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,183 @@
+@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;
+}
+/* container 1 */
+.content{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    /* 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 white; */
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    margin-left: 28%;
+    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: 22px;
+}
+
+/* blogs styling */
+.blog-body {
+    border: 1px solid pink;
+    display: flex;
+    flex-direction: column;
+    margin-left: 359px;
+    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;
+}
+
+/* .blog-body > p > em:nth-of-type(1){
+    font-size: 15px;
+    margin-left: 50%;
+    color:var(--blue-color)
+} */
+
+/* actual blogdiv */
+.actualblog_divh1{
+    /* border: 1px solid pink; */
+}

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;

landing-panda/src/data/blogsnippets.ts

@@ -0,0 +1,33 @@
+export type BlogSnippet = {
+  date: string;
+  title: string;
+  snippet: string;
+  link: string;
+};
+
+export const blogPosts: BlogSnippet[] = [
+  {
+    date: "June 28, 2025",
+    title: "The Power of Honest Communication in Teams",
+    snippet: "Honesty without clarity Charity, joined the team recently. In one of our internal discussions, we stumbled on the concept of “brutal honesty“. Her interpretation of brutal honesty was focused on the word “brutal”. This led to a very very spirited discussion on whether one needs to be brutal to be honest. She questioned whether brutal…",
+    link: "/blogs/blog4",
+  },
+  {
+    date: "June 28, 2025",
+    title: "Solve, Build, Get Paid: Open Source Bounties at Akong’a",
+    snippet: "You don’t have to be on payroll to earn money. Akong’a Labs wants you to earn by solving real problems. How? Open source bounties. To be clear, this isn’t the vague “open-source contributions look good on your CV” stuff. Bounties, requirements, and payouts. Open to those willing to build. That’s it. That’s the blog post.…",
+    link: "/blogs/blog3",
+  },
+  {
+    date: "June 18, 2025",
+    title: "Understanding Remote Onboarding: Lessons from Akonga Labs",
+    snippet: "“Are you readyyyyyy?!?!” That was the message I got from my manager on the morning of my onboarding and even though I was genuinely feeling a little anxious, I replied confidently: “Very ready!” Onboarding into a new company is always a mixed bag of emotions: excitement, nerves, hope, and curiosity. For me, joining Akonga Labs…",
+    link: "/blogs/blog2",
+  },
+  {
+    date: "June 18, 2025",
+    title: "Why I’m starting this company",
+    snippet: "Outsized returns You’re going to be somewhere in your career in ten years, why not in your absolute ideal role, doing the kind of work you’d find most rewarding and having the kind of impact that you’re capable of? If you don’t believe that this is possible, you will surely fail. If you do believe it’s possible,…",
+    link: "/blogs/blog1",
+  }
+];

landing-panda/src/pages/blogLayout.astro

@@ -0,0 +1,32 @@
+---
+import "../../public/styles/mylanding.css"
+import "../../public/images/blog1.webp"
+import "../../public/images/blog2.webp"
+import "../../public/images/blog3.webp"
+import "../../public/images/blog4.webp"
+---
+
+<html lang="en">
+  <head>
+      <head>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Blog layout</title>
+  </head>
+  <body >
+    <article class="blog-post">
+        <div class="blog-body">
+            <div class="first_links">
+                <a href="/newLanding">Akong'a Labs</a>
+                <a href="/blogSnippets">Blogs</a>
+            </div>
+            <slot /> <!-- where the blog content goes -->
+            <div class="last_links">
+                <p> <a href="https://x.com/adrianmurage">X</a> </p>
+                <p> <a href="https://github.com/AkongaLabs">GitHub</a></p>
+            </div>
+        </div>
+    </article>
+  </body>
+</html>

landing-panda/src/pages/blogSnippets.astro

@@ -0,0 +1,36 @@
+---
+import "../../public/styles/mylanding.css"
+import BlogCard from "../components/BlogCard.tsx";
+import {blogPosts} from '../data/blogsnippets';
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Charity's landing page 🐼</title>
+  </head>
+  <body>
+    <div class="blogs_container">
+        <div class="first_links">
+            <a href="/newLanding">Akong'a Labs</a>
+            <a href="/blogSnippets">Blogs</a>
+        </div>
+      {
+        blogPosts.map(post => (
+          <BlogCard
+            date={post.date}
+            title={post.title}
+            snippet={post.snippet}
+            link={post.link}
+          />
+        ))
+      }
+      <div class="last_links">
+          <p> <a href="https://x.com/adrianmurage">X</a> </p>
+          <p> <a href="https://github.com/AkongaLabs">GitHub</a></p>
+      </div>
+    </div>
+  </body>
+</html>