Updated deisgn

2025-12-06 19:46:44 +03:00 · 2025-07-09 00:34:04 +05:30
parent 97997bd1c0
commit a320dc38ad
8 changed files with 224 additions and 99 deletions
--- a/www/src/components/CTA.tsx
+++ b/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>
--- a/www/src/components/Features.tsx
+++ b/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,15 +73,18 @@ 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>
+              </div>
            );
          })}
        </div>
--- a/www/src/components/GitHubButton.tsx
+++ b/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 && (
--- a/www/src/components/Hero.tsx
+++ b/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>
--- a/www/src/components/Installation.tsx
+++ b/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>
--- a/www/src/components/Screenshots.tsx
+++ b/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">
--- a/www/src/pages/index.astro
+++ b/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>
--- a/www/src/styles/global.css
+++ b/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);
+  }
+}