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">

www/src/pages/index.astro

@@ -89,7 +89,7 @@ const structuredData = {
     <link rel="canonical" href={siteUrl} />
     
     <!-- Additional Meta Tags -->
-    <meta name="theme-color" content="#3b82f6" />
+    <meta name="theme-color" content="#5b6fff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="apple-mobile-web-app-title" content="Gitea Mirror" />
@@ -162,6 +162,21 @@ const structuredData = {
           linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
         background-size: 20px 20px;
       }
+      
+      /* Smooth gradient animations */
+      @keyframes gradient-shift {
+        0%, 100% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+      }
+      
+      .animate-gradient {
+        background-size: 200% 200%;
+        animation: gradient-shift 15s ease infinite;
+      }
     </style>
   </body>
 </html>

www/src/styles/global.css

@@ -4,6 +4,8 @@
 @custom-variant dark (&:is(.dark *));
 @custom-media --xs (width >= 475px);
 
+@import 'tailwindcss/theme' layer(theme);
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -40,75 +42,84 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-accent-purple: var(--accent-purple);
+  --color-accent-teal: var(--accent-teal);
+  --color-accent-coral: var(--accent-coral);
 }
 
 :root {
-  --radius: 0.375rem;
+  --radius: 0.5rem;
   --background: oklch(0.99 0 0);
-  --foreground: oklch(0.2 0 0);
-  --card: oklch(0.98 0 0);
-  --card-foreground: oklch(0.2 0 0);
-  --popover: oklch(0.98 0 0);
-  --popover-foreground: oklch(0.2 0 0);
-  --primary: oklch(0.55 0.15 220);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(0.985 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(0.985 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.55 0.25 255);
   --primary-foreground: oklch(0.99 0 0);
-  --secondary: oklch(0.96 0 0);
-  --secondary-foreground: oklch(0.2 0 0);
-  --muted: oklch(0.96 0 0);
-  --muted-foreground: oklch(0.5 0 0);
-  --accent: oklch(0.55 0.15 220);
+  --secondary: oklch(0.96 0.02 240);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.96 0.01 240);
+  --muted-foreground: oklch(0.45 0.02 240);
+  --accent: oklch(0.7 0.2 190);
   --accent-foreground: oklch(0.99 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0 0);
-  --input: oklch(0.92 0 0);
-  --ring: oklch(0.55 0.15 220);
-  --chart-1: oklch(0.7 0 0);
-  --chart-2: oklch(0.6 0 0);
-  --chart-3: oklch(0.5 0 0);
-  --chart-4: oklch(0.4 0 0);
-  --chart-5: oklch(0.3 0 0);
-  --sidebar: oklch(0.98 0 0);
-  --sidebar-foreground: oklch(0.2 0 0);
-  --sidebar-primary: oklch(0.55 0.15 220);
+  --border: oklch(0.94 0.01 240);
+  --input: oklch(0.94 0.01 240);
+  --ring: oklch(0.55 0.25 255);
+  --chart-1: oklch(0.55 0.25 255);
+  --chart-2: oklch(0.7 0.2 190);
+  --chart-3: oklch(0.7 0.15 150);
+  --chart-4: oklch(0.7 0.2 30);
+  --chart-5: oklch(0.6 0.25 280);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(0.55 0.25 255);
   --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.96 0 0);
-  --sidebar-accent-foreground: oklch(0.2 0 0);
-  --sidebar-border: oklch(0.92 0 0);
-  --sidebar-ring: oklch(0.55 0.15 220);
+  --sidebar-accent: oklch(0.96 0.02 240);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.94 0.01 240);
+  --sidebar-ring: oklch(0.55 0.25 255);
+  --accent-purple: oklch(0.6 0.25 280);
+  --accent-teal: oklch(0.7 0.2 190);
+  --accent-coral: oklch(0.7 0.2 30);
 }
 
 .dark {
-  --background: oklch(0.1 0 0);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.18 0 0);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.18 0 0);
-  --popover-foreground: oklch(0.95 0 0);
-  --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.7 0.12 220);
-  --accent-foreground: oklch(0.1 0 0);
+  --background: oklch(0.08 0.01 240);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.13 0.02 240);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.13 0.02 240);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.7 0.25 255);
+  --primary-foreground: oklch(0.08 0 0);
+  --secondary: oklch(0.18 0.03 240);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.18 0.02 240);
+  --muted-foreground: oklch(0.7 0.02 240);
+  --accent: oklch(0.75 0.2 190);
+  --accent-foreground: oklch(0.08 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.7 0.12 220);
-  --chart-1: oklch(0.35 0 0);
-  --chart-2: oklch(0.45 0 0);
-  --chart-3: oklch(0.55 0 0);
-  --chart-4: oklch(0.65 0 0);
-  --chart-5: oklch(0.75 0 0);
-  --sidebar: oklch(0.18 0 0);
-  --sidebar-foreground: oklch(0.95 0 0);
-  --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.7 0.12 220);
+  --border: oklch(0.22 0.02 240);
+  --input: oklch(0.22 0.02 240);
+  --ring: oklch(0.7 0.25 255);
+  --chart-1: oklch(0.7 0.25 255);
+  --chart-2: oklch(0.75 0.2 190);
+  --chart-3: oklch(0.75 0.15 150);
+  --chart-4: oklch(0.75 0.2 30);
+  --chart-5: oklch(0.65 0.25 280);
+  --sidebar: oklch(0.13 0.02 240);
+  --sidebar-foreground: oklch(0.98 0 0);
+  --sidebar-primary: oklch(0.7 0.25 255);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.18 0.03 240);
+  --sidebar-accent-foreground: oklch(0.98 0 0);
+  --sidebar-border: oklch(0.22 0.02 240);
+  --sidebar-ring: oklch(0.7 0.25 255);
+  --accent-purple: oklch(0.65 0.25 280);
+  --accent-teal: oklch(0.75 0.2 190);
+  --accent-coral: oklch(0.75 0.2 30);
 }
 
 @layer base {
@@ -119,3 +130,82 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom gradient utilities */
+@layer utilities {
+  .bg-gradient-radial {
+    background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
+  }
+  
+  .text-gradient {
+    @apply bg-gradient-to-r bg-clip-text text-transparent;
+  }
+  
+  .gradient-border {
+    position: relative;
+    background: linear-gradient(var(--background), var(--background)) padding-box,
+                linear-gradient(to right, var(--tw-gradient-stops)) border-box;
+    border: 2px solid transparent;
+  }
+  
+  .glow-sm {
+    box-shadow: 0 0 20px -5px var(--tw-shadow-color);
+  }
+  
+  .glow-md {
+    box-shadow: 0 0 40px -10px var(--tw-shadow-color);
+  }
+  
+  .glow-lg {
+    box-shadow: 0 0 60px -15px var(--tw-shadow-color);
+  }
+  
+  /* Accent color utilities */
+  .text-accent-purple {
+    color: var(--accent-purple);
+  }
+  
+  .text-accent-teal {
+    color: var(--accent-teal);
+  }
+  
+  .text-accent-coral {
+    color: var(--accent-coral);
+  }
+  
+  .bg-accent-purple {
+    background-color: var(--accent-purple);
+  }
+  
+  .bg-accent-teal {
+    background-color: var(--accent-teal);
+  }
+  
+  .bg-accent-coral {
+    background-color: var(--accent-coral);
+  }
+  
+  .from-accent-purple\/10 {
+    --tw-gradient-from: oklch(from var(--accent-purple) l c h / 0.1);
+  }
+  
+  .from-accent-teal\/10 {
+    --tw-gradient-from: oklch(from var(--accent-teal) l c h / 0.1);
+  }
+  
+  .from-accent-coral\/10 {
+    --tw-gradient-from: oklch(from var(--accent-coral) l c h / 0.1);
+  }
+  
+  .to-accent-purple\/10 {
+    --tw-gradient-to: oklch(from var(--accent-purple) l c h / 0.1);
+  }
+  
+  .to-accent-teal\/10 {
+    --tw-gradient-to: oklch(from var(--accent-teal) l c h / 0.1);
+  }
+  
+  .to-accent-coral\/10 {
+    --tw-gradient-to: oklch(from var(--accent-coral) l c h / 0.1);
+  }
+}