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/landing_page.css

@@ -0,0 +1,224 @@
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;900&display=swap");
+
+:root {
+  --bg-color: #1a1f2e;
+  --text-color: #e2e8f0;
+  --font-family: "Bricolage Grotesque", sans-serif;
+  --blue-color: #7091ff;
+  --lblue-color: #538cd3;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+body {
+  font-family: var(--font-family);
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+a,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+  color: var(--text-color);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: 0 0px;
+}
+
+.content {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start;
+  padding: 24px 24px 16px 24px;
+}
+
+.first_links {
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  font-size: 16px;
+  margin-top: 20px;
+  text-decoration: underline;
+  line-height: 1.5rem;
+  text-underline-offset: 2px;
+}
+
+.title {
+  font-size: 30px;
+  font-weight: 400;
+  line-height: 2rem;
+  margin: 0px;
+  font-family: "Bricolage Grotesque", sans-serif;
+}
+
+.about {
+  flex: 1;
+  display: flex;
+  line-height: 1.25rem;
+  flex-direction: column;
+  justify-content: center;
+  font-family: "Inter", sans-serif;
+}
+
+.about p {
+  font-size: 15px;
+  margin: 24px 0px 0px;
+}
+
+.last_links {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5rem;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.image_container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: left;
+}
+
+.image_text {
+  position: absolute;
+  left: 10%;
+  bottom: 5%;
+  font-size: 60px;
+  font-weight: 900;
+  line-height: 0.9;
+  color: #eff8ff;
+}
+
+@media (min-width: 480px) {
+  .content {
+    padding: 32px 32px 24px;
+  }
+
+  .first_links,
+  .last_links {
+    font-size: 18px;
+    line-height: 2rem;
+  }
+}
+
+@media (min-width: 780px) {
+  .container {
+    flex-direction: row;
+    height: 100vh;
+  }
+
+  .last_links {
+    column-gap: 28px;
+  }
+
+  .title {
+    font-size: 34px;
+    line-height: 2.5rem;
+  }
+
+  .about {
+    padding: 0 48px 32px 0;
+  }
+
+  .about p {
+    font-size: 15px;
+    margin-top: 16px;
+  }
+
+  .image_container {
+    flex: 0 0 50%;
+  }
+
+  .header_image {
+    object-position: 0% 0%;
+  }
+
+  .image_text {
+    font-size: 70px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .content {
+    padding: 60px 60px 32px 48px;
+  }
+
+  .first_links,
+  .last_links {
+    font-size: 22px;
+  }
+
+  .last_links {
+    column-gap: 32px;
+  }
+
+  .title {
+    font-size: 40px;
+  }
+
+  .about {
+    padding: 0 60px 60px 0;
+  }
+
+  .about p {
+    font-size: 16px;
+    margin-top: 38px;
+  }
+
+  .image_text {
+    font-size: 82px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .content {
+    padding: 96px 120px 40px;
+  }
+
+  .title {
+    font-size: 42px;
+    line-height: 3rem;
+  }
+
+  .about {
+    padding: 0 72px 60px 0;
+  }
+
+  .about p {
+    margin-top: 32px;
+    line-height: 1.5rem;
+  }
+
+  .image_text {
+    font-size: 84px;
+  }
+}