Added basic use cases pages

www/src/components/Header.tsx

@@ -15,9 +15,10 @@ export function Header() {
   }, []);
 
   const navLinks = [
-    { href: '#features', label: 'Features' },
-    { href: '#screenshots', label: 'Screenshots' },
-    { href: '#installation', label: 'Installation' }
+    { href: '/#features', label: 'Features' },
+    { href: '/#use-cases', label: 'Use Cases' },
+    { href: '/#screenshots', label: 'Screenshots' },
+    { href: '/#installation', label: 'Installation' }
   ];
 
   return (
@@ -27,7 +28,7 @@ export function Header() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <a href="#" className="flex items-center gap-2 group">
+          <a href="/" className="flex items-center gap-2 group">
             <img
               src="/assets/logo.png"
               alt="Gitea Mirror Logo"
@@ -65,4 +66,4 @@ export function Header() {
 
     </header>
   );
-}
+}

www/src/components/Hero.tsx

@@ -93,32 +93,6 @@ export function Hero() {
             />
           </a>
         </div>
-
-        {/* Call to action buttons */}
-        {/* <div className="mt-8 sm:mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4 z-20">
-          <Button
-            size="lg"
-            className="relative group w-full sm:w-auto min-h-[48px] text-base bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
-            asChild
-          >
-            <a
-              href="https://github.com/RayLabsHQ/gitea-mirror"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Get Started
-              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-            </a>
-          </Button>
-          <Button
-            size="lg"
-            variant="outline"
-            className="relative w-full sm:w-auto min-h-[48px] text-base border-primary/20 hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300"
-            asChild
-          >
-            <a href="#features">View Features</a>
-          </Button>
-        </div> */}
       </div>
     </section>
   );

www/src/components/UseCases.astro

@@ -0,0 +1,64 @@
+---
+import { ArrowRight } from 'lucide-react';
+import { useCases } from '@/lib/use-cases';
+---
+
+<section id="use-cases" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30 border-y">
+  <div class="max-w-7xl mx-auto">
+    <div class="text-center max-w-3xl mx-auto mb-12 sm:mb-16">
+      <span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4">
+        Use Cases
+      </span>
+      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">
+        Proven Ways Teams Depend on
+        <span class="text-gradient from-primary to-accent block sm:inline"> Gitea Mirror</span>
+      </h2>
+      <p class="mt-4 text-base sm:text-lg text-muted-foreground">
+        Explore real-world workflows where automated mirroring removes risk, accelerates migrations, and keeps engineering teams shipping.
+      </p>
+    </div>
+
+    <div class="grid gap-4 sm:gap-6 lg:gap-8 lg:grid-cols-3">
+      {useCases.map((useCase) => (
+        <article class="group relative flex flex-col rounded-2xl border bg-background/80 p-6 sm:p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
+          <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/5 via-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          <div class="relative flex flex-col h-full">
+            <h3 class="text-xl font-semibold mb-3">
+              {useCase.title}
+            </h3>
+            <p class="text-sm sm:text-base text-muted-foreground mb-4">
+              {useCase.summary}
+            </p>
+
+            <dl class="grid gap-3 text-sm sm:text-base text-muted-foreground">
+              <div>
+                <dt class="font-semibold text-foreground">Pain Point</dt>
+                <dd>{useCase.painPoint}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-foreground">Outcome</dt>
+                <dd>{useCase.outcome}</dd>
+              </div>
+            </dl>
+
+            <div class="mt-6 flex flex-wrap gap-2">
+              {useCase.tags.map((tag) => (
+                <span class="inline-flex items-center rounded-full border border-muted px-3 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+
+            <a
+              href={`/use-cases/${useCase.slug}/`}
+              class="mt-auto inline-flex items-center gap-2 pt-6 text-sm font-medium text-primary transition-colors hover:text-primary/80"
+            >
+              Read the playbook
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </a>
+          </div>
+        </article>
+      ))}
+    </div>
+  </div>
+</section>