Restructure blogs as Astro monorepo

sites/vibes/src/components/sections/all-blogs.tsx

@@ -0,0 +1,57 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/components/ui/card";
+import { BLOG_SITES } from "@/blog-sites.js";
+
+const features = BLOG_SITES.map((site) => ({
+  title: site.title,
+  description: site.description,
+  href: site.url,
+}));
+
+export default function AllBlogs() {
+  return (
+    <section id="ai-chatbot" className="relative py-16 md:py-28 lg:py-32">
+      <div className="container max-w-5xl">
+        <div className="text-center">
+          <h3 className="mini-title">CURRENTLY ACTIVE BLOGS</h3>
+        </div>
+
+        <div className="mt-8 grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3 lg:gap-6">
+          {features.map((feature, index) => (
+            <Card key={index} className="flex flex-col">
+              <CardHeader className="max-md:p-3">
+                <h3 className="text-lg font-semibold">{feature.title}</h3>
+                <CardDescription className="text-foreground mt-4 font-medium">
+                  {feature.description}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="mt-auto max-md:p-3">
+                <Button
+                  variant="outline"
+                  asChild
+                  className="border-border group w-[min(100%,300px)]"
+                >
+                  <a href={feature.href}>
+                    Read On
+                    <span className="sr-only">
+                      {" "}
+                      about {feature.description.toLowerCase()}
+                    </span>
+                    <ChevronRight className="ml-1 size-4 transition-transform group-hover:translate-x-0.5" />
+                  </a>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}