Add smooth animations

lovable-dev[bot] · lovable-dev[bot] · commit fb9f530eb248 · 2025-04-20T16:19:50.000Z
Implement animations for UI elements.
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
@@ -38,7 +38,7 @@ const FeaturesSection = () => {
   return (
     <section className="py-16 md:py-24 bg-muted/30">
       <div className="container mx-auto px-4">
-        <div className="text-center max-w-2xl mx-auto mb-16">
+        <div className="text-center max-w-2xl mx-auto mb-16 animate-fade-in">
           <h2 className="text-3xl font-bold mb-4">Comprehensive Health Insights</h2>
           <p className="text-muted-foreground">
             Revon combines cutting-edge AI with medical knowledge to provide you with actionable health insights.
@@ -49,9 +49,9 @@ const FeaturesSection = () => {
           {features.map((feature, index) => (
             <div 
               key={index} 
-              className="bg-white dark:bg-card rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300"
+              className={`gradient-card p-6 animate-fade-in animate-fade-in-delay-${Math.min(Math.floor(index / 3) + 1, 3)}`}
             >
-              <div className="h-12 w-12 rounded-lg bg-revon-primary/10 flex items-center justify-center mb-4">
+              <div className="h-12 w-12 rounded-lg bg-revon-primary/10 flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
                 {feature.icon}
               </div>
               <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
diff --git a/src/components/home/HowItWorksSection.tsx b/src/components/home/HowItWorksSection.tsx
@@ -30,7 +30,7 @@ const HowItWorksSection = () => {
   return (
     <section className="py-16 md:py-24">
       <div className="container mx-auto px-4">
-        <div className="max-w-2xl mx-auto text-center mb-16">
+        <div className="max-w-2xl mx-auto text-center mb-16 animate-fade-in">
           <h2 className="text-3xl font-bold mb-4">How Revon Works</h2>
           <p className="text-muted-foreground">
             Our intuitive process helps you understand your health concerns in just a few simple steps.
@@ -39,7 +39,7 @@ const HowItWorksSection = () => {
         
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {steps.map((step, index) => (
-            <div key={index} className="relative">
+            <div key={index} className={`relative animate-fade-in animate-fade-in-delay-${index + 1}`}>
               <div className="gradient-card rounded-xl p-6 h-full">
                 <div className="text-4xl font-bold text-revon-primary/20 mb-4">{step.number}</div>
                 <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
diff --git a/src/index.css b/src/index.css
@@ -94,10 +94,39 @@
 
 @layer components {
   .gradient-card {
-    @apply bg-gradient-to-br from-white to-revon-light/50 dark:from-card dark:to-muted;
+    @apply bg-gradient-to-br from-white to-revon-light/50 dark:from-card dark:to-muted transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
   }
   
   .gradient-btn {
-    @apply bg-gradient-to-r from-revon-primary to-revon-accent hover:from-revon-primary/90 hover:to-revon-accent/90 transition-all duration-300;
+    @apply bg-gradient-to-r from-revon-primary to-revon-accent hover:from-revon-primary/90 hover:to-revon-accent/90 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md active:translate-y-0;
+  }
+
+  .animate-fade-in {
+    @apply opacity-0 translate-y-4;
+    animation: fadeIn 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in-delay-1 {
+    animation-delay: 0.2s;
+  }
+
+  .animate-fade-in-delay-2 {
+    animation-delay: 0.4s;
+  }
+
+  .animate-fade-in-delay-3 {
+    animation-delay: 0.6s;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
