Minimalist

www/bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@astrojs/mdx": "^4.3.0",
         "@astrojs/react": "^4.3.0",
+        "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-slot": "^1.2.3",
         "@tailwindcss/vite": "^4.1.3",
         "@types/canvas-confetti": "^1.9.0",
@@ -191,6 +192,8 @@
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
+    "@radix-ui/react-icons": ["@radix-ui/react-icons@1.3.2", "", { "peerDependencies": { "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc" } }, "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g=="],
+
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.19", "", {}, "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA=="],

www/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/mdx": "^4.3.0",
     "@astrojs/react": "^4.3.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.3",
     "@types/canvas-confetti": "^1.9.0",

www/src/components/CTA.tsx

@@ -7,15 +7,13 @@ 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-gradient-to-r from-blue-600 to-purple-600 p-6 sm:p-8 md:p-12 text-center">
+        <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-card border p-6 sm:p-8 md:p-12 text-center">
-          {/* Background pattern */}
-          <div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,transparent,rgba(255,255,255,0.5))]" />
           
           <div className="relative">
-            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
               Start Protecting Your Code Today
             </h2>
-            <p className="text-base sm:text-lg text-white/90 mb-6 sm:mb-8 max-w-2xl mx-auto px-4">
+            <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. 
               Free, open source, and ready to deploy.
             </p>
@@ -24,13 +22,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" variant="secondary" className="group w-full sm:w-auto min-h-[48px]" asChild>
+              <Button size="lg" className="group w-full sm:w-auto min-h-[48px]" 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="ghost" className="text-white hover:bg-white/20 w-full sm:w-auto min-h-[48px]" asChild>
+              <Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px]" asChild>
                 <a href="https://github.com/RayLabsHQ/gitea-mirror/discussions" target="_blank" rel="noopener noreferrer">
                   Join Community
                 </a>

www/src/components/Features.tsx

@@ -12,38 +12,32 @@ 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-blue-500 to-cyan-500"
   },
   {
     title: "Bulk Operations", 
     description: "Mirror entire organizations or user accounts with a single configuration.",
-    icon: Building2,
+    icon: Building2
-    gradient: "from-purple-500 to-pink-500"
   },
   {
     title: "Preserve Structure",
     description: "Maintain your GitHub organization structure or customize how repos are organized.",
-    icon: FolderTree,
+    icon: FolderTree
-    gradient: "from-green-500 to-emerald-500"
   },
   {
     title: "Real-time Status",
     description: "Monitor mirror progress with live updates and detailed activity logs.",
-    icon: Activity,
+    icon: Activity
-    gradient: "from-orange-500 to-red-500"
   },
   {
     title: "Secure & Private",
     description: "Self-hosted solution keeps your code on your infrastructure with full control.",
-    icon: Lock,
+    icon: Lock
-    gradient: "from-indigo-500 to-purple-500"
   },
   {
     title: "Open Source",
     description: "Free, transparent, and community-driven development. Contribute and customize.",
-    icon: Heart,
+    icon: Heart
-    gradient: "from-pink-500 to-rose-500"
   }
 ];
 
@@ -54,7 +48,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="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent block sm:inline"> Reliable Backups</span>
+            <span className="text-primary 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.
@@ -67,18 +61,10 @@ 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-xl transition-all duration-300 hover:-translate-y-1"
+                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"
               >
-                <div className="absolute inset-0 bg-gradient-to-r opacity-0 group-hover:opacity-5 rounded-xl sm:rounded-2xl transition-opacity duration-300"
+                <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">
-                     style={{
+                  <Icon className="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground group-hover:text-primary transition-colors duration-300" />
-                       backgroundImage: `linear-gradient(to right, var(--tw-gradient-stops))`,
-                       '--tw-gradient-from': feature.gradient.split(' ')[1],
-                       '--tw-gradient-to': feature.gradient.split(' ')[3],
-                     }}
-                />
-                
-                <div className={`inline-flex p-2.5 sm:p-3 rounded-lg bg-gradient-to-r ${feature.gradient} mb-3 sm:mb-4`}>
-                  <Icon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                 </div>
                 
                 <h3 className="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>

www/src/components/Footer.tsx

@@ -32,7 +32,16 @@ export function Footer() {
           {/* Logo and tagline */}
           <div className="text-center">
             <div className="flex items-center justify-center gap-2 mb-2">
-              <img src="/assets/logo-no-bg.png" alt="Gitea Mirror" className="w-6 h-6 sm:w-8 sm:h-8" />
+              <img
+                src="/logo-light.svg"
+                alt="Gitea Mirror"
+                className="w-6 h-6 sm:w-8 sm:h-8 dark:hidden"
+              />
+              <img
+                src="/logo-dark.svg"
+                alt="Gitea Mirror"
+                className="w-6 h-6 sm:w-8 sm:h-8 hidden dark:block"
+              />
               <span className="font-semibold text-base sm:text-lg">Gitea Mirror</span>
             </div>
             <p className="text-xs sm:text-sm text-muted-foreground">

www/src/components/GitHubStats.tsx

@@ -41,7 +41,7 @@ export function GitHubStats() {
   }
 
   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 flex-wrap items-center justify-center gap-4 sm:gap-6 md:gap-8 mb-6 sm:mb-8 text-foreground 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>

www/src/components/Header.tsx

@@ -36,11 +36,16 @@ export function Header() {
           {/* Logo */}
           <a href="#" className="flex items-center gap-2 group">
             <img
-              src="/assets/logo-no-bg.png" 
+              src="/logo-light.svg"
-              alt="Gitea Mirror" 
+              alt="Gitea Mirror Logo"
-              className="w-8 h-8 transition-transform group-hover:scale-110" 
+              className="h-6 w-6 dark:hidden"
             />
-            <span className="font-semibold text-lg hidden sm:block">Gitea Mirror</span>
+            <img
+              src="/logo-dark.svg"
+              alt="Gitea Mirror Logo"
+              className="h-6 w-6 hidden dark:block"
+            />
+            <span className="text-xl font-bold hidden sm:inline">Gitea Mirror</span>
           </a>
 
           {/* Desktop Navigation */}

www/src/components/Hero.tsx

@@ -1,35 +1,38 @@
 import React from 'react';
 import { Button } from './ui/button';
-import { ArrowRight, Github, Shield, RefreshCw } from 'lucide-react';
+import { ArrowRight, Shield, RefreshCw } from 'lucide-react';
+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">
-      {/* Background gradients */}
+      {/* Subtle background pattern */}
       <div className="absolute inset-0 -z-10">
-        <div className="absolute top-20 -left-4 w-48 h-48 sm:w-72 sm:h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob dark:opacity-10"></div>
+        <div className="absolute inset-0 bg-gradient-to-b from-muted/20 to-transparent"></div>
-        <div className="absolute top-20 -right-4 w-48 h-48 sm:w-72 sm:h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000 dark:opacity-10"></div>
-        <div className="absolute -bottom-8 left-10 w-48 h-48 sm:w-72 sm:h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000 dark:opacity-10"></div>
       </div>
 
       <div className="max-w-7xl mx-auto text-center w-full">
         <div className="mb-6 sm:mb-8 flex justify-center">
           <div className="relative">
-            <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-lg opacity-75 animate-pulse"></div>
             <img
               src="/assets/logo-no-bg.png"
               alt="Gitea Mirror Logo"
-              className="relative w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32"
+              className="relative w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 dark:hidden"
+            />
+            <img
+              src="/assets/logo-no-bg.png"
+              alt="Gitea Mirror Logo"
+              className="relative w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 hidden dark:block"
             />
           </div>
         </div>
 
         <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
-          <span className="bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400 bg-clip-text text-transparent">
+          <span className="text-foreground">
             Keep Your Code
           </span>
           <br />
-          <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          <span className="text-primary">
             Safe & Synced
           </span>
         </h1>
@@ -41,17 +44,17 @@ export function Hero() {
 
         <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" />
+            <Shield className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
             <span>Self-Hosted</span>
           </div>
-          <span className="text-gray-300 dark:text-gray-700 hidden xs:inline">•</span>
+          <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" />
+            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
             <span>Auto-Sync</span>
           </div>
-          <span className="text-gray-300 dark:text-gray-700 hidden xs:inline">•</span>
+          <span className="text-border hidden xs:inline">•</span>
           <div className="flex items-center gap-2">
-            <Github className="w-3 h-3 sm:w-4 sm:h-4" />
+            <GitHubLogoIcon className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
             <span>Open Source</span>
           </div>
         </div>

www/src/components/Screenshots.tsx

@@ -113,7 +113,7 @@ export function Screenshots() {
             onTouchMove={onTouchMove}
             onTouchEnd={onTouchEnd}
           >
-            <div className="aspect-[16/10] overflow-hidden rounded-lg sm:rounded-2xl bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-800 dark:to-gray-900 shadow-2xl">
+            <div className="aspect-[16/10] overflow-hidden rounded-lg sm:rounded-2xl bg-card border shadow-lg">
               <picture>
                 <source media="(max-width: 640px)" srcSet={current.mobile} />
                 <img

www/src/pages/index.astro

@@ -71,7 +71,7 @@ const structuredData = {
     <meta property="og:url" content={siteUrl} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
-    <meta property="og:image" content={`${siteUrl}/assets/dashboard.png`} />
+    <meta property="og:image" content={`${siteUrl}/og-image.png`} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:site_name" content="Gitea Mirror" />
@@ -82,7 +82,7 @@ const structuredData = {
     <meta property="twitter:url" content={siteUrl} />
     <meta property="twitter:title" content={title} />
     <meta property="twitter:description" content={description} />
-    <meta property="twitter:image" content={`${siteUrl}/assets/dashboard.png`} />
+    <meta property="twitter:image" content={`${siteUrl}/og-image.png`} />
     <meta name="twitter:creator" content="@RayLabsHQ" />
     
     <!-- Canonical URL -->

www/src/styles/global.css

@@ -43,72 +43,72 @@
 }
 
 :root {
-  --radius: 0.5rem;
+  --radius: 0.375rem;
   --background: oklch(0.99 0 0);
-  --foreground: oklch(0.15 0 0);
+  --foreground: oklch(0.2 0 0);
-  --card: oklch(1 0 0);
+  --card: oklch(0.98 0 0);
-  --card-foreground: oklch(0.15 0 0);
+  --card-foreground: oklch(0.2 0 0);
-  --popover: oklch(1 0 0);
+  --popover: oklch(0.98 0 0);
-  --popover-foreground: oklch(0.15 0 0);
+  --popover-foreground: oklch(0.2 0 0);
-  --primary: oklch(0.5 0.2 250);
+  --primary: oklch(0.55 0.15 220);
-  --primary-foreground: oklch(0.98 0 0);
+  --primary-foreground: oklch(0.99 0 0);
   --secondary: oklch(0.96 0 0);
-  --secondary-foreground: oklch(0.15 0 0);
+  --secondary-foreground: oklch(0.2 0 0);
   --muted: oklch(0.96 0 0);
-  --muted-foreground: oklch(0.45 0 0);
+  --muted-foreground: oklch(0.5 0 0);
-  --accent: oklch(0.96 0 0);
+  --accent: oklch(0.55 0.15 220);
-  --accent-foreground: oklch(0.15 0 0);
+  --accent-foreground: oklch(0.99 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.9 0 0);
+  --border: oklch(0.92 0 0);
-  --input: oklch(0.9 0 0);
+  --input: oklch(0.92 0 0);
-  --ring: oklch(0.5 0.2 250);
+  --ring: oklch(0.55 0.15 220);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-1: oklch(0.7 0 0);
-  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-2: oklch(0.6 0 0);
-  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-3: oklch(0.5 0 0);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-4: oklch(0.4 0 0);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-5: oklch(0.3 0 0);
   --sidebar: oklch(0.98 0 0);
-  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-foreground: oklch(0.2 0 0);
-  --sidebar-primary: oklch(0.5 0.2 250);
+  --sidebar-primary: oklch(0.55 0.15 220);
-  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
   --sidebar-accent: oklch(0.96 0 0);
-  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-accent-foreground: oklch(0.2 0 0);
-  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-border: oklch(0.92 0 0);
-  --sidebar-ring: oklch(0.5 0.2 250);
+  --sidebar-ring: oklch(0.55 0.15 220);
 }
 
 .dark {
   --background: oklch(0.1 0 0);
   --foreground: oklch(0.95 0 0);
-  --card: oklch(0.15 0 0);
+  --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.15 0 0);
+  --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.6 0.2 250);
+  --primary: oklch(0.7 0.12 220);
   --primary-foreground: oklch(0.1 0 0);
   --secondary: oklch(0.2 0 0);
   --secondary-foreground: oklch(0.95 0 0);
   --muted: oklch(0.25 0 0);
   --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.25 0 0);
+  --accent: oklch(0.7 0.12 220);
-  --accent-foreground: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.1 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(0.3 0 0);
   --input: oklch(0.3 0 0);
-  --ring: oklch(0.6 0.2 250);
+  --ring: oklch(0.7 0.12 220);
-  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.35 0 0);
-  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-2: oklch(0.45 0 0);
-  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.55 0 0);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.65 0 0);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: oklch(0.75 0 0);
-  --sidebar: oklch(0.15 0 0);
+  --sidebar: oklch(0.18 0 0);
   --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.6 0.2 250);
+  --sidebar-primary: oklch(0.7 0.12 220);
   --sidebar-primary-foreground: oklch(0.95 0 0);
   --sidebar-accent: oklch(0.25 0 0);
   --sidebar-accent-foreground: oklch(0.95 0 0);
   --sidebar-border: oklch(0.3 0 0);
-  --sidebar-ring: oklch(0.6 0.2 250);
+  --sidebar-ring: oklch(0.7 0.12 220);
 }
 
 @layer base {