OK

src/app/(main)/page.tsx

@@ -12,6 +12,7 @@ import { ScrollDown } from '@/components/ui/ScrollDown'
 import { ScrollUp } from '@/components/ui/ScrollUp'
 import { GridStats } from '@/components/GridStats'
 import { WorldMap } from '@/components/WorldMap'
+import { GetStarted } from '@/components/GetStarted'
 
 export default function Home() {
   return (
@@ -28,11 +29,14 @@ export default function Home() {
       <section>
         <StackSectionPreview />
       </section>
+      <section id="grid-stats">
+        <GridStats />
+      </section>
       <section id="world-map">
         <WorldMap />
       </section>
-      <section id="grid-stats">
+      <section id="get-started">
-        <GridStats />
+        <GetStarted />
       </section>
       <section id="use-cases">
         <UseCases />

src/components/Button.tsx

@@ -16,7 +16,7 @@ const variantStyles = {
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: 'border-gray-300 text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-white',
   },
 }
 

src/components/GetStarted.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { H2, P, CP } from "@/components/Texts";
+import { Button } from "@/components/ui/Button";
+
+export  function GetStarted() {
+  const items = [
+    {
+      title: "Mycelium Docs",
+      description:
+        "Learn how Mycelium works and get a high-level understanding of its architecture, deployment, and API references.",
+      href: "/docs",
+    },
+    {
+      title: "Mycelium Repository",
+      description:
+        "Explore the official code repositories, contribute, and stay up-to-date with the latest changes.",
+      href: "https://github.com/your-repo", // replace with actual repo
+    },
+    {
+      title: "Mycelium Support",
+      description:
+        "Need help? Reach out to our support team or join the community to get your questions answered quickly.",
+      href: "/support",
+    },
+  ];
+
+  return (
+    <section
+      className="bg-cover bg-center text-white py-32 px-6 relative"
+      style={{
+        backgroundImage: `url('/images/getstarted.webp')`,
+      }}
+    >
+      <div className="max-w-8xl mx-auto px-4 text-left mb-12">
+        <H2>Get Started</H2>
+        <P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3 max-w-8xl mx-auto px-4">
+        {items.map((item, idx) => (
+          <div
+            key={idx}
+            className="flex flex-col justify-between border border-white/10 rounded-2xl p-6 hover:border-white/20 transition bg-black/20"
+          >
+            {/* Title + Button Row */}
+            <div className="flex items-center justify-between">
+              <h3 className="text-xl font-semibold">{item.title}</h3>
+              <Button variant="outline" href={item.href}>
+                View All
+              </Button>
+            </div>
+
+            {/* Divider + Description */}
+            <div className="mt-4 border-t border-white/10"></div>
+
+            <CP className="mt-4">{item.description}</CP>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/components/UseCases.tsx

@@ -221,7 +221,7 @@ export function UseCases() {
       id="usecases"
       ref={ref}
       aria-labelledby="usecases-title"
-      className="bg-black py-12"
+      className="bg-black py-24"
     >
       <Container className=''>
         <motion.div