refactor: Update landing page testimonials styling

doziestar · Jul 4, 2024 · d6ca645 · d6ca645
1 parent 04a94b7
commit d6ca645
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -26,12 +26,6 @@ body {
     rgb(var(--background-start-rgb));
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
 @layer base {
   :root {
     --background: 210 100% 6%;
@@ -55,15 +49,15 @@ body {
     --ring: 180 100% 90%;
     --radius: 0rem;
   }
-}
 
-@layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
+
   h1,
   h2,
   h3,
@@ -75,16 +69,48 @@ body {
 }
 
 @layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
   .text-shadow {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   }
+
+  .floating-card {
+    @apply transition-all duration-300 ease-out hover:translate-y-[-10px] hover:shadow-lg;
+  }
+
+  .glow {
+    @apply relative overflow-hidden;
+  }
+
+  .glow::before {
+    content: "";
+    @apply absolute top-[-50%] left-[-50%] w-[200%] h-[200%] opacity-0 rotate-[30deg] transition-opacity duration-300;
+    background: linear-gradient(to right, transparent, white, transparent);
+  }
+
+  .glow:hover::before {
+    @apply animate-glow;
+  }
+}
+
+@keyframes glow {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
 @supports not (backdrop-filter: blur(10px)) {
   .fallback-bg {
     background-color: rgba(17, 24, 39, 0.95);
   }
 }
+
 .glassmorphic {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);

diff --git a/web/components/landing-page.tsx b/web/components/landing-page.tsx
@@ -165,7 +165,7 @@ export function LandingPage() {
             {features.map((feature, index) => (
               <motion.div
                 key={index}
-                className="glassmorphic p-6 rounded-lg"
+                className="glassmorphic p-6 rounded-lg floating-card glow group"
                 variants={fadeIn}
                 transition={{ duration: 0.5, delay: 0.1 * index }}
               >
@@ -418,7 +418,7 @@ chart.save("sales_forecast.png")`}
               What Developers Are Saying
             </h2>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <div className="glassmorphic p-6 fallback-bg">
+              <div className="glassmorphic p-6 fallback-bg floating-card glow group">
                 <p className="italic mb-4 text-foreground text-shadow">
                   "DataVinci has revolutionized our data pipeline. It's
                   intuitive, powerful, and saves us countless hours every week."
@@ -427,7 +427,7 @@ chart.save("sales_forecast.png")`}
                   - Sarah Chen, Senior Data Engineer
                 </p>
               </div>
-              <div className="glassmorphic p-6 fallback-bg">
+              <div className="glassmorphic p-6 fallback-bg floating-card glow group">
                 <p className="italic mb-4 text-foreground text-shadow">
                   "The AI-powered insights have given us a competitive edge.
                   It's like having a data scientist on call 24/7."
@@ -436,7 +436,7 @@ chart.save("sales_forecast.png")`}
                   - Alex Rodriguez, CTO
                 </p>
               </div>
-              <div className="glassmorphic p-6 fallback-bg">
+              <div className="glassmorphic p-6 fallback-bg floating-card glow group">
                 <p className="italic mb-4 text-foreground text-shadow">
                   "DataVinci's extensibility is a game-changer. We've integrated
                   it seamlessly with our existing tools and workflows."

diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
@@ -16,6 +16,9 @@ const config: Config = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      animation: {
+        glow: "glow 3s linear infinite",
+      },
     },
     colors: {
       border: "hsl(var(--border))",