Added real data

www/src/components/CTA.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from './ui/button';
-import { ArrowRight, Star, GitFork, Users } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
+import { GitHubStats } from './GitHubStats';
 
 export function CTA() {
   return (
@@ -20,20 +21,7 @@ export function CTA() {
             </p>
 
             {/* Stats */}
-            <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 md:gap-8 mb-6 sm:mb-8 text-white/80 text-sm sm:text-base">
-              <div className="flex items-center gap-2">
-                <Star className="w-4 h-4 sm:w-5 sm:h-5" />
-                <span className="font-semibold">500+ Stars</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <GitFork className="w-4 h-4 sm:w-5 sm:h-5" />
-                <span className="font-semibold">50+ Forks</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Users className="w-4 h-4 sm:w-5 sm:h-5" />
-                <span className="font-semibold">Active Community</span>
-              </div>
-            </div>
+            <GitHubStats />
 
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
               <Button size="lg" variant="secondary" className="group w-full sm:w-auto min-h-[48px]" asChild>

www/src/components/Features.tsx

@@ -6,9 +6,6 @@ import {
   Activity, 
   Lock, 
   Heart,
-  Zap,
-  Shield,
-  GitBranch
 } from 'lucide-react';
 
 const features = [
@@ -90,37 +87,6 @@ export function Features() {
             );
           })}
         </div>
-
-        {/* Additional feature highlights */}
-        <div className="mt-12 sm:mt-16 grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 p-6 sm:p-8 rounded-xl sm:rounded-2xl bg-muted/30">
-          <div className="flex items-center gap-3 sm:gap-4">
-            <div className="p-2 rounded-lg bg-blue-500/10 flex-shrink-0">
-              <Zap className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400" />
-            </div>
-            <div>
-              <p className="font-semibold text-sm sm:text-base">Lightning Fast</p>
-              <p className="text-xs sm:text-sm text-muted-foreground">Optimized for speed</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 sm:gap-4">
-            <div className="p-2 rounded-lg bg-green-500/10 flex-shrink-0">
-              <Shield className="w-4 h-4 sm:w-5 sm:h-5 text-green-600 dark:text-green-400" />
-            </div>
-            <div>
-              <p className="font-semibold text-sm sm:text-base">Enterprise Ready</p>
-              <p className="text-xs sm:text-sm text-muted-foreground">Scale with confidence</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 sm:gap-4">
-            <div className="p-2 rounded-lg bg-purple-500/10 flex-shrink-0">
-              <GitBranch className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <p className="font-semibold text-sm sm:text-base">Full Git Support</p>
-              <p className="text-xs sm:text-sm text-muted-foreground">All features preserved</p>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
   );

www/src/components/GitHubButton.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { Github, Star } from 'lucide-react';
+import { Button } from './ui/button';
+
+export function GitHubButton() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    const fetchStars = async () => {
+      try {
+        const response = await fetch('https://api.github.com/repos/RayLabsHQ/gitea-mirror');
+        if (response.ok) {
+          const data = await response.json();
+          setStars(data.stargazers_count);
+        }
+      } catch (error) {
+        console.error('Failed to fetch GitHub stars:', error);
+      }
+    };
+
+    fetchStars();
+  }, []);
+
+  return (
+    <Button variant="outline" size="sm" asChild>
+      <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
+        <Github className="w-4 h-4 mr-2" />
+        <span>Star on GitHub</span>
+        {stars !== null && (
+          <>
+            <span className="mx-2 text-muted-foreground">•</span>
+            <Star className="w-3 h-3 mr-1" />
+            <span>{stars}</span>
+          </>
+        )}
+      </a>
+    </Button>
+  );
+}

www/src/components/GitHubStats.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { Star, GitFork, Users } from 'lucide-react';
+
+interface GitHubRepo {
+  stargazers_count: number;
+  forks_count: number;
+  open_issues_count: number;
+}
+
+export function GitHubStats() {
+  const [stats, setStats] = useState<GitHubRepo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await fetch('https://api.github.com/repos/RayLabsHQ/gitea-mirror');
+        if (response.ok) {
+          const data = await response.json();
+          setStats(data);
+        }
+      } catch (error) {
+        console.error('Failed to fetch GitHub stats:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 md:gap-8 mb-6 sm:mb-8 text-white/80 text-sm sm:text-base">
+        <div className="flex items-center gap-2">
+          <Star className="w-4 h-4 sm:w-5 sm:h-5" />
+          <span className="font-semibold">Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 md:gap-8 mb-6 sm:mb-8 text-white/80 text-sm sm:text-base">
+      <div className="flex items-center gap-2">
+        <Star className="w-4 h-4 sm:w-5 sm:h-5" />
+        <span className="font-semibold">{stats?.stargazers_count || 0} Stars</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <GitFork className="w-4 h-4 sm:w-5 sm:h-5" />
+        <span className="font-semibold">{stats?.forks_count || 0} Forks</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Users className="w-4 h-4 sm:w-5 sm:h-5" />
+        <span className="font-semibold">Active Community</span>
+      </div>
+    </div>
+  );
+}

www/src/components/Header.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { ThemeToggle } from './ThemeToggle';
-import { Github, Menu, X } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { Button } from './ui/button';
+import { GitHubButton } from './GitHubButton';
 
 export function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -58,12 +59,7 @@ export function Header() {
           {/* Desktop Actions */}
           <div className="hidden md:flex items-center gap-4">
             <ThemeToggle />
-            <Button variant="outline" size="sm" asChild>
-              <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
-                <Github className="w-4 h-4 mr-2" />
-                Star on GitHub
-              </a>
-            </Button>
+            <GitHubButton />
           </div>
 
           {/* Mobile Actions */}
@@ -103,12 +99,7 @@ export function Header() {
               </a>
             ))}
             <div className="pt-3 border-t">
-              <Button variant="outline" size="sm" className="w-full" asChild>
-                <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
-                  <Github className="w-4 h-4 mr-2" />
-                  Star on GitHub
-                </a>
-              </Button>
+              <GitHubButton />
             </div>
           </nav>
         </div>