Enhance UI components and styles for improved user experience

- Updated global styles in globals.css for better dark mode support and background effects.
- Enhanced DownloadSection and FeatureCard components with hover effects and improved layout.
- Refined Header component with better backdrop blur and tracking for text.
- Improved button styles for consistency and added shadow effects for better visibility.
- Adjusted Card and Section components for better spacing and visual hierarchy.

landing/src/app/globals.css

@@ -27,25 +27,26 @@
   }
 
   .dark {
-    --background: 0 0% 0%;
+    --background: 0 0% 3%;
-    --foreground: 0 0% 100%;
+    --foreground: 0 0% 98%;
-    --card: 0 0% 0%;
+    --card: 0 0% 8% / 0.6;
-    --card-foreground: 0 0% 100%;
+    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 0%;
+    --popover: 0 0% 8% / 0.8;
-    --popover-foreground: 0 0% 100%;
+    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 100%;
+    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 0%;
+    --primary-foreground: 0 0% 8%;
-    --secondary: 0 0% 10%;
+    --secondary: 0 0% 12% / 0.5;
-    --secondary-foreground: 0 0% 100%;
+    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 10%;
+    --muted: 0 0% 12% / 0.4;
     --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 10%;
+    --accent: 0 0% 15% / 0.5;
-    --accent-foreground: 0 0% 100%;
+    --accent-foreground: 0 0% 98%;
-    --destructive: 0 0% 100%;
+    --destructive: 0 62% 50%;
-    --destructive-foreground: 0 0% 0%;
+    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 20%;
+    --border: 0 0% 15% / 0.5;
-    --input: 0 0% 20%;
+    --input: 0 0% 15% / 0.5;
-    --ring: 0 0% 100%;
+    --ring: 0 0% 98% / 0.2;
+    --radius: 1rem;
   }
 }
 
@@ -54,7 +55,10 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    background-image: 
+      radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.03) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, rgba(255, 255, 255, 0.02) 0px, transparent 50%);
   }
 }
 

landing/src/components/DownloadSection.tsx

@@ -35,10 +35,10 @@ export function DownloadSection() {
       </div>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
         {downloads.map(({ platform, icon: Icon, link, description }) => (
-          <Card key={platform} className="hover:border-primary/50 transition-colors">
+          <Card key={platform} className="hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1">
             <CardContent className="p-6">
               <div className="flex flex-col items-center text-center space-y-4">
-                <div className="p-3 rounded-lg bg-muted">
+                <div className="p-3 rounded-xl bg-muted/50 backdrop-blur-sm border border-border">
                   <Icon className="h-8 w-8" />
                 </div>
                 <div>

landing/src/components/Header.tsx

@@ -7,11 +7,11 @@ import { GITHUB_REPO } from '@/lib/constants';
 
 export function Header() {
   return (
-    <header className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-0 z-50">
+    <header className="border-b border-border bg-background/60 backdrop-blur-2xl sticky top-0 z-50 supports-[backdrop-filter]:bg-background/40">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <Link href="/" className="flex items-center gap-2 font-bold text-xl sm:text-2xl hover:opacity-80 transition-opacity">
+          <Link href="/" className="flex items-center gap-2 font-bold text-xl sm:text-2xl hover:opacity-80 transition-opacity tracking-tight">
             voicebox
           </Link>
 

landing/src/components/ui/button.tsx

@@ -4,25 +4,25 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-black/20 active:scale-[0.98]',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-lg shadow-destructive/20 active:scale-[0.98]',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border border-border bg-background/50 backdrop-blur-sm hover:bg-accent/50 hover:border-border transition-all active:scale-[0.98]',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 backdrop-blur-sm active:scale-[0.98]',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent/50 hover:text-accent-foreground backdrop-blur-sm active:scale-[0.98]',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-9 rounded-lg px-3',
-        lg: 'h-11 rounded-md text-lg px-8',
+        lg: 'h-12 rounded-xl text-base px-8 font-semibold',
-        icon: 'h-10 w-10',
+        icon: 'h-10 w-10 rounded-xl',
       },
     },
     defaultVariants: {

landing/src/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      'rounded-2xl border border-border bg-card backdrop-blur-xl text-card-foreground shadow-lg shadow-black/20',
       className
     )}
     {...props}
@@ -22,7 +22,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    className={cn('flex flex-col space-y-1.5 p-6 pb-4', className)}
     {...props}
   />
 ));
@@ -59,7 +59,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-4', className)} {...props} />
 ));
 CardContent.displayName = 'CardContent';
 

landing/src/components/ui/feature-card.tsx

@@ -11,9 +11,15 @@ interface FeatureCardProps {
 
 export function FeatureCard({ title, description, icon, className }: FeatureCardProps) {
   return (
-    <Card className={cn('text-center', className)}>
+    <Card className={cn('text-center hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 hover:-translate-y-1', className)}>
       <CardHeader>
-        {icon && <div className="flex justify-center mb-2">{icon}</div>}
+        {icon && (
+          <div className="flex justify-center mb-3">
+            <div className="p-3 rounded-xl bg-muted/50 backdrop-blur-sm border border-border">
+              {icon}
+            </div>
+          </div>
+        )}
         <CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
       </CardHeader>
       <CardContent>

landing/src/components/ui/section.tsx

@@ -9,7 +9,7 @@ interface SectionProps {
 
 export function Section({ children, className, id }: SectionProps) {
   return (
-    <section id={id} className={cn('space-y-4 sm:space-y-6', className)}>
+    <section id={id} className={cn('space-y-6 sm:space-y-8', className)}>
       {children}
     </section>
   );