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/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',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 backdrop-blur-sm active:scale-[0.98]',
+        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',
-        lg: 'h-11 rounded-md text-lg px-8',
-        icon: 'h-10 w-10',
+        sm: 'h-9 rounded-lg px-3',
+        lg: 'h-12 rounded-xl text-base px-8 font-semibold',
+        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>
   );