Optimised static comp with .astro

Author: arunavo4

www/src/components/Features.astro

@@ -0,0 +1,90 @@
+---
+import { 
+  RefreshCw, 
+  Building2, 
+  FolderTree, 
+  Activity, 
+  Lock, 
+  Heart,
+} from 'lucide-react';
+
+const features = [
+  {
+    title: "Automated Mirroring",
+    description: "Set it and forget it. Automatically sync your GitHub repositories to Gitea on a schedule.",
+    icon: RefreshCw,
+    gradient: "from-primary/10 to-accent/10",
+    iconColor: "text-primary"
+  },
+  {
+    title: "Bulk Operations", 
+    description: "Mirror entire organizations or user accounts with a single configuration.",
+    icon: Building2,
+    gradient: "from-accent/10 to-accent-teal/10",
+    iconColor: "text-accent"
+  },
+  {
+    title: "Preserve Structure",
+    description: "Maintain your GitHub organization structure or customize how repos are organized.",
+    icon: FolderTree,
+    gradient: "from-accent-teal/10 to-primary/10",
+    iconColor: "text-accent-teal"
+  },
+  {
+    title: "Real-time Status",
+    description: "Monitor mirror progress with live updates and detailed activity logs.",
+    icon: Activity,
+    gradient: "from-accent-coral/10 to-primary/10",
+    iconColor: "text-accent-coral"
+  },
+  {
+    title: "Secure & Private",
+    description: "Self-hosted solution keeps your code on your infrastructure with full control.",
+    icon: Lock,
+    gradient: "from-accent-purple/10 to-primary/10",
+    iconColor: "text-accent-purple"
+  },
+  {
+    title: "Open Source",
+    description: "Free, transparent, and community-driven development. Contribute and customize.",
+    icon: Heart,
+    gradient: "from-primary/10 to-accent-purple/10",
+    iconColor: "text-primary"
+  }
+];
+---
+
+<section id="features" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-7xl mx-auto">
+    <div class="text-center mb-12 sm:mb-16">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight px-4">
+        Everything You Need for
+        <span class="text-gradient from-primary to-accent block sm:inline"> Reliable Backups</span>
+      </h2>
+      <p class="mt-4 text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4">
+        Powerful features designed to keep your code safe and accessible, no matter what happens.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+      {features.map((feature) => {
+        const Icon = feature.icon;
+        return (
+          <div
+            class={`group relative p-6 sm:p-8 rounded-xl sm:rounded-2xl border bg-gradient-to-br ${feature.gradient} backdrop-blur-sm hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 overflow-hidden`}
+          >
+            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-background/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            <div class="relative">
+              <div class={`inline-flex p-2.5 sm:p-3 rounded-lg bg-background/80 backdrop-blur-sm mb-3 sm:mb-4 ${feature.iconColor} shadow-sm`}>
+                <Icon className="w-5 h-5 sm:w-6 sm:h-6" />
+              </div>
+              
+              <h3 class="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>
+              <p class="text-sm sm:text-base text-muted-foreground">{feature.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+</section>

www/src/components/Features.tsx

@@ -0,0 +1,88 @@
+---
+import { Github, Book, MessageSquare, Bug } from 'lucide-react';
+
+const links = [
+  {
+    title: "Source Code",
+    href: "https://github.com/RayLabsHQ/gitea-mirror",
+    icon: Github
+  },
+  {
+    title: "Documentation",
+    href: "https://github.com/RayLabsHQ/gitea-mirror/tree/main/docs",
+    icon: Book
+  },
+  {
+    title: "Discussions",
+    href: "https://github.com/RayLabsHQ/gitea-mirror/discussions",
+    icon: MessageSquare
+  },
+  {
+    title: "Report Issue",
+    href: "https://github.com/RayLabsHQ/gitea-mirror/issues",
+    icon: Bug
+  }
+];
+
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="border-t py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-7xl mx-auto">
+    <div class="flex flex-col items-center gap-6 sm:gap-8">
+      <!-- Logo and tagline -->
+      <div class="text-center">
+        <div class="flex items-center justify-center gap-2 mb-2">
+          <img
+            src="/logo-light.svg"
+            alt="Gitea Mirror"
+            class="w-6 h-6 sm:w-8 sm:h-8 dark:hidden"
+          />
+          <img
+            src="/logo-dark.svg"
+            alt="Gitea Mirror"
+            class="w-6 h-6 sm:w-8 sm:h-8 hidden dark:block"
+          />
+          <span class="font-semibold text-base sm:text-lg">Gitea Mirror</span>
+        </div>
+        <p class="text-xs sm:text-sm text-muted-foreground">
+          Keep your GitHub code safe and synced
+        </p>
+      </div>
+
+      <!-- Links -->
+      <nav class="grid grid-cols-2 sm:flex items-center justify-center gap-4 sm:gap-6 text-center">
+        {links.map((link) => {
+          const Icon = link.icon;
+          return (
+            <a
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center justify-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground transition-colors py-2 sm:py-0"
+            >
+              <Icon className="w-3 h-3 sm:w-4 sm:h-4" />
+              <span>{link.title}</span>
+            </a>
+          );
+        })}
+      </nav>
+
+      <!-- Copyright -->
+      <div class="text-center text-xs sm:text-sm text-muted-foreground px-4">
+        <p>© {currentYear} Gitea Mirror. Open source under GPL-3.0 License.</p>
+        <p class="mt-1">
+          Made with dedication by the{' '}
+          <a 
+            href="https://github.com/RayLabsHQ" 
+            class="underline hover:text-foreground transition-colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            RayLabs team
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</footer>