Implement blog snippet system and new landing page

landing-panda/astro.config.mjs

@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import react from '@astrojs/react';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react()]
+});

landing-panda/package.json

@@ -9,6 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.9.2"
+    "@astrojs/react": "^4.3.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "astro": "^5.9.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

landing-panda/public/styles/mylanding.css

@@ -0,0 +1,299 @@
+@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque&display=swap');
+
+:root {
+  --bg-color: #1a1f2e;
+  --text-color: #e2e8f0;
+  --font-family:'Bricolage Grotesque', sans-serif;
+  --blue-color:#7091ff;
+  --lblue-color:#538cd3;
+}
+/* general */
+html {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+body {
+  font-family: var(--font-family);
+}
+
+/* body content */
+div{
+    /* border: 1px solid white; */
+}
+
+.container{
+    display: flex;
+    flex-direction: row;
+    height: auto;
+    padding: 0 15px;
+
+}
+/* container 1 */
+.content{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    align-content: left;
+    /* padding-right: 25px; */
+    height: auto;
+}
+
+.first_links{
+    display: flex;
+    flex-direction: column;
+    font-size: 25px;
+    margin-top: 80px;
+}
+
+/* paragraph title */
+.title{
+    font-size: 41px;
+    font-weight: 400;
+}
+.about{
+    margin-top: 100px;
+    padding-right: 90px;
+}
+
+.last_links{
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 130px;
+}
+
+/* container 2: image */
+.image_container{
+    width: auto;
+    height: auto;
+}
+.header_image{
+    margin-top: 0px;
+    width: 700px;
+    height: 710px;
+    border-radius: 4px;
+}
+
+/* all links */
+a,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+  color: white;
+}
+
+
+/* Blogs specific page */
+.blogs_container{
+    /* border: 1px solid red; */
+    display: flex;
+    flex-direction: column;
+    margin: 10px auto;
+    width: 700px;
+    gap: 60px;
+}
+
+/* date and read more colors */
+.bluecolor{
+    color: var(--blue-color);
+}
+a.readmore{
+   color: var(--blue-color);
+   text-decoration: none;
+}
+a.readmore:hover{
+   color: var(--lblue-color);
+   text-decoration: underline;
+}
+
+.para_space{
+    line-height: 25px;
+}
+
+/* blogs styling */
+.blog-body {
+    /* border: 1px solid pink; */
+    display: flex;
+    flex-direction: column;
+    margin: 10px auto;
+    font-size: 120%;
+    /* align-items: center; */
+    justify-content: center;
+    background-color:var(--bg-color);
+    font-family: var(--font-family);
+    line-height: 1.6;
+    padding: 9px;
+    color:var(--text-color);
+    width: 710px;
+}
+.blog-post img {
+  max-width: 700px;  /* or whatever width you prefer */
+  height: auto;
+  display: block;
+  /* margin-top: 1px; */
+}
+.blog-post title{
+    align-content: center;
+    align-self: center;
+}
+
+.blog-post h1,h2,h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 40px;
+  font-weight: 200;
+  /* margin-left: 3rem; */
+}
+.blog-post{
+    /* border: 1px solid red; */
+}
+.blog-post p {
+  margin-bottom: 0.5rem;
+}
+
+.blog-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.blog-post a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.blog-post blockquote {
+  border-left: 2px solid #ccc;
+  padding-left: 1rem;
+}
+
+/* ========== MEDIA QUERIES FOR HOMEPAGE ========== */
+
+/* Screens up to 781px (phones + small tablets) */
+@media (max-width: 781px) {
+  .container {
+    flex-direction: column;
+    align-items: left;
+    padding: 0 20px;
+  }
+
+  .content {
+    padding-left: 0;
+    padding-right: 0;
+    align-items: left;
+    text-align: left;
+  }
+
+  .about {
+    margin-top: 60px;
+    padding-right: 0;
+  }
+
+  .first_links {
+    margin-top: 40px;
+    font-size: 20px;
+  }
+
+  .last_links {
+    flex-direction: column;
+    align-items: center;
+    font-size: 18px;
+    margin-top: 60px;
+  }
+
+  .header_image {
+    width: 90%;
+    height: auto;
+    max-width: 600px;
+    margin-top: 30px;
+  }
+}
+
+/* Media Queries - Blog Snippets Page */
+@media (max-width: 768px) {
+  .blogs_container {
+    padding: 1rem;
+  }
+
+  .first_links,
+  .last_links {
+    flex-direction: column;
+    align-items: left;
+    gap: 0.5rem;
+  }
+
+  .blog_card {
+    width: 100%;
+    margin-bottom: 1.5rem;
+  }
+
+  .blog_card h2 {
+    font-size: 1.2rem;
+  }
+
+  .blog_card p {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .blogs_container {
+    padding: 0.5rem;
+  }
+
+  .blog_card h2 {
+    font-size: 1rem;
+  }
+
+  .blog_card p {
+    font-size: 0.9rem;
+  }
+}
+
+/* ==================================== */
+/* Media Queries - Individual Blog Pages */
+/* ==================================== */
+
+@media (max-width: 768px) {
+  .blog-body {
+    padding: 1rem;
+  }
+
+  .first_links,
+  .last_links {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .blog-post img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .blog-post h1,
+  .blog-post h2 {
+    font-size: 1.5rem;
+  }
+
+  .blog-post p {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .blog-post h1,
+  .blog-post h2 {
+    font-size: 1.2rem;
+  }
+
+  .blog-post p {
+    font-size: 0.95rem;
+  }
+}

landing-panda/src/components/BlogCard.tsx

@@ -0,0 +1,21 @@
+import '../../public/styles/mylanding.css'
+
+type BlogCardProps = {
+  title: string;
+  date: string;
+  snippet: string;
+  link: string;
+};
+
+const BlogCard = ({ title, date, snippet, link }: BlogCardProps) => {
+  return (
+    <div>
+      <p className="bluecolor" >{date}</p>
+      <h1><a href={link}>{title}</a></h1>
+      <p className="para_space">{snippet}</p>
+      <a className="bluecolor readmore" href={link}>Read more→</a>
+    </div>
+  );
+};
+
+export default BlogCard;