Updated deisgn

www/src/components/CTA.tsx

@@ -7,11 +7,16 @@ export function CTA() {
   return (
     <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
       <div className="max-w-4xl mx-auto">
-        <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-card border p-6 sm:p-8 md:p-12 text-center">
+        <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-card/80 backdrop-blur-sm border border-primary/10 p-6 sm:p-8 md:p-12 text-center shadow-xl">
+          {/* Subtle gradient accent */}
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 pointer-events-none" />
+          <div className="absolute -top-24 -right-24 w-48 h-48 bg-primary/20 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-accent/20 rounded-full blur-3xl pointer-events-none" />
           
           <div className="relative">
             <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
-              Start Protecting Your Code Today
+              Start Protecting Your
+              <span className="text-gradient from-primary via-accent to-accent-purple"> Code Today</span>
             </h2>
             <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8 max-w-2xl mx-auto px-4">
               Join developers who trust Gitea Mirror to keep their repositories safe and accessible. 
@@ -22,13 +27,13 @@ export function CTA() {
             <GitHubStats />
 
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
-              <Button size="lg" className="group w-full sm:w-auto min-h-[48px]" asChild>
+              <Button size="lg" className="group w-full sm:w-auto min-h-[48px] 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 Now
                   <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                 </a>
               </Button>
-              <Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px]" asChild>
+              <Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px] bg-background/80 backdrop-blur-sm hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
                 <a href="https://github.com/RayLabsHQ/gitea-mirror/discussions" target="_blank" rel="noopener noreferrer">
                   Join Community
                 </a>

www/src/components/Features.tsx

@@ -12,32 +12,44 @@ const features = [
   {
     title: "Automated Mirroring",
     description: "Set it and forget it. Automatically sync your GitHub repositories to Gitea on a schedule.",
-    icon: RefreshCw
+    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
+    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
+    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
+    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
+    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
+    icon: Heart,
+    gradient: "from-primary/10 to-accent-purple/10",
+    iconColor: "text-primary"
   }
 ];
 
@@ -48,7 +60,7 @@ export function Features() {
         <div className="text-center mb-12 sm:mb-16">
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight px-4">
             Everything You Need for
-            <span className="text-primary block sm:inline"> Reliable Backups</span>
+            <span className="text-gradient from-primary to-accent block sm:inline"> Reliable Backups</span>
           </h2>
           <p className="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.
@@ -61,14 +73,17 @@ export function Features() {
             return (
               <div
                 key={index}
-                className="group relative p-6 sm:p-8 rounded-xl sm:rounded-2xl border bg-card hover:shadow-lg transition-all duration-300 hover:-translate-y-1 hover:border-primary/20"
+                className={`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 className="inline-flex p-2.5 sm:p-3 rounded-lg bg-muted mb-3 sm:mb-4 group-hover:bg-primary/10 transition-colors duration-300">
-                  <Icon className="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground group-hover:text-primary transition-colors duration-300" />
+                <div className="absolute inset-0 bg-gradient-to-br from-transparent to-background/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                <div className="relative">
+                  <div className={`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 className="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-sm sm:text-base text-muted-foreground">{feature.description}</p>
                 </div>
-                
-                <h3 className="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>
-                <p className="text-sm sm:text-base text-muted-foreground">{feature.description}</p>
               </div>
             );
           })}

www/src/components/GitHubButton.tsx

@@ -22,8 +22,8 @@ export function GitHubButton() {
   }, []);
 
   return (
-    <Button variant="outline" size="sm" asChild>
-      <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
+    <Button variant="outline" size="sm" className="hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
+      <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer" className="flex items-center">
         <Github className="w-4 h-4 mr-2" />
         <span>Star on GitHub</span>
         {stars !== null && (

www/src/components/Hero.tsx

@@ -6,9 +6,11 @@ import { GitHubLogoIcon } from '@radix-ui/react-icons';
 export function Hero() {
   return (
     <section className="relative min-h-[100vh] pt-20 pb-10 flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden">
-      {/* Subtle background pattern */}
-      <div className="absolute inset-0 -z-10">
-        <div className="absolute inset-0 bg-gradient-to-b from-muted/20 to-transparent"></div>
+      {/* Elegant gradient background */}
+      <div className="absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5"></div>
+        <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-radial from-primary/10 to-transparent blur-3xl"></div>
+        <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-radial from-accent/10 to-transparent blur-3xl"></div>
       </div>
 
       <div className="max-w-7xl mx-auto text-center w-full">
@@ -32,7 +34,7 @@ export function Hero() {
             Keep Your Code
           </span>
           <br />
-          <span className="text-primary">
+          <span className="text-gradient from-primary via-accent to-accent-purple">
             Safe & Synced
           </span>
         </h1>
@@ -43,30 +45,28 @@ export function Hero() {
         </p>
 
         <div className="mt-6 sm:mt-8 flex flex-wrap items-center justify-center gap-3 text-xs sm:text-sm text-muted-foreground px-4">
-          <div className="flex items-center gap-2">
-            <Shield className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
-            <span>Self-Hosted</span>
+          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary">
+            <Shield className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="font-medium">Self-Hosted</span>
           </div>
-          <span className="text-border hidden xs:inline">•</span>
-          <div className="flex items-center gap-2">
-            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
-            <span>Auto-Sync</span>
+          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent">
+            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="font-medium">Auto-Sync</span>
           </div>
-          <span className="text-border hidden xs:inline">•</span>
-          <div className="flex items-center gap-2">
-            <GitHubLogoIcon className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
-            <span>Open Source</span>
+          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-accent-purple/10 text-accent-purple">
+            <GitHubLogoIcon className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="font-medium">Open Source</span>
           </div>
         </div>
 
         <div className="mt-8 sm:mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4">
-          <Button size="lg" className="group w-full sm:w-auto min-h-[48px] text-base" asChild>
+          <Button size="lg" className="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="w-full sm:w-auto min-h-[48px] text-base" asChild>
+          <Button size="lg" variant="outline" className="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>

www/src/components/Installation.tsx

@@ -100,8 +100,8 @@ export function Installation() {
                 onClick={() => setActiveMethod(method)}
                 className={`flex items-center gap-3 px-4 sm:px-6 py-3 rounded-lg border transition-all min-h-[60px] ${
                   activeMethod === method
-                    ? 'bg-primary text-primary-foreground border-primary'
-                    : 'bg-card hover:bg-muted border-border'
+                    ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground border-transparent shadow-lg shadow-primary/25'
+                    : 'bg-card hover:bg-muted border-border hover:border-primary/30'
                 }`}
               >
                 <Icon className="w-5 h-5 flex-shrink-0" />
@@ -121,8 +121,8 @@ export function Installation() {
           {installMethods[activeMethod].steps.map((step, index) => (
             <div key={step.id} className="relative">
               <div className="flex items-start gap-3 sm:gap-4">
-                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
-                  <span className="text-sm font-semibold text-primary">{index + 1}</span>
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-md shadow-primary/20">
+                  <span className="text-sm font-semibold text-primary-foreground">{index + 1}</span>
                 </div>
                 <div className="flex-grow min-w-0">
                   <h3 className="font-semibold mb-2 text-sm sm:text-base">{step.title}</h3>

www/src/components/Screenshots.tsx

@@ -93,7 +93,7 @@ export function Screenshots() {
   const current = screenshots[currentIndex];
 
   return (
-    <section id="screenshots" className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30">
+    <section id="screenshots" className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-muted/30 via-primary/5 to-muted/30">
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-8 sm:mb-16">
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">