refactor: Update landing page testimonials styling

web/app/globals.css

@@ -126,3 +126,7 @@ body {
   );
   background-size: 20px 20px;
 }
+
+.perspective-1000 {
+  perspective: 1000px;
+}

web/components/3d-dancing-header.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { motion, useAnimationControls } from "framer-motion";
+
+const Dancing3DHeading = () => {
+  const controls = useAnimationControls();
+
+  const headingVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.8, ease: "easeOut" },
+    },
+    hover: {
+      scale: 1.05,
+      rotateX: 10,
+      rotateY: 10,
+      transition: { duration: 0.3, ease: "easeInOut" },
+    },
+  };
+
+  useEffect(() => {
+    controls.start((i) => ({
+      y: [0, -10, 0],
+      transition: {
+        repeat: Infinity,
+        repeatType: "mirror",
+        duration: 1 + i * 0.1,
+        ease: "easeInOut",
+      },
+    }));
+  }, [controls]);
+
+  const text = "Empower Your Data with DataVinci";
+
+  return (
+    <motion.h1
+      className="lg:leading-tighter text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl xl:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary perspective-1000"
+      variants={headingVariants}
+      initial="hidden"
+      animate="visible"
+      whileHover="hover"
+      style={{ transformStyle: "preserve-3d" }}
+    >
+      {text.split(" ").map((word, wordIndex) => (
+        <span
+          key={wordIndex}
+          style={{ display: "inline-block", whiteSpace: "nowrap" }}
+        >
+          {word.split("").map((char, charIndex) => (
+            <motion.span
+              key={`${wordIndex}-${charIndex}`}
+              animate={controls}
+              custom={(wordIndex * word.length + charIndex) * 0.1}
+              style={{ display: "inline-block" }}
+            >
+              {char}
+            </motion.span>
+          ))}
+          {wordIndex < text.split(" ").length - 1 && "\u00A0"}
+        </span>
+      ))}
+    </motion.h1>
+  );
+};
+
+export default Dancing3DHeading;

web/components/hover-animated-3d.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { motion, Variants } from "framer-motion";
+
+const HoverAnimated3DHeading: React.FC = () => {
+  const headingVariants: Variants = {
+    initial: { opacity: 1, y: 0 },
+    hover: {
+      scale: 1.05,
+      rotateX: 10,
+      rotateY: 10,
+      transition: { duration: 0.3, ease: "easeInOut" },
+    },
+  };
+
+  const letterVariants: Variants = {
+    initial: { y: 0 },
+    hover: {
+      y: [-5, 5, -5],
+      transition: { repeat: Infinity, duration: 1, ease: "easeInOut" },
+    },
+  };
+
+  const text = "Empower Your Data with DataVinci";
+
+  return (
+    <motion.h1
+      className="lg:leading-tighter text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl xl:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary perspective-1000"
+      variants={headingVariants}
+      initial="initial"
+      whileHover="hover"
+      style={{ transformStyle: "preserve-3d" }}
+    >
+      {text.split(" ").map((word, wordIndex) => (
+        <span
+          key={wordIndex}
+          style={{ display: "inline-block", whiteSpace: "nowrap" }}
+        >
+          {word.split("").map((char, charIndex) => (
+            <motion.span
+              key={`${wordIndex}-${charIndex}`}
+              variants={letterVariants}
+              style={{ display: "inline-block" }}
+              custom={(wordIndex * word.length + charIndex) * 0.1}
+              transition={{
+                delay: (wordIndex * word.length + charIndex) * 0.05,
+              }}
+            >
+              {char}
+            </motion.span>
+          ))}
+          {wordIndex < text.split(" ").length - 1 && "\u00A0"}
+        </span>
+      ))}
+    </motion.h1>
+  );
+};
+
+export default HoverAnimated3DHeading;