src/App.tsx

@@ -1,7 +1,7 @@
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
 import FooterMinimal from '@/components/sections/footer/FooterMinimal';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroAnimated from '@/components/sections/hero/HeroAnimated';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
 import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';
@@ -26,7 +26,7 @@ export default function App() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
+        <HeroAnimated
           tag="Revolutionary AI Opportunity"
           title="Turn Zero Into Growth With AI"
           description="Don't let your situation define your outcome. Leverage our AI-driven platform to identify, scale, and secure high-value opportunities designed for everyone."

src/components/sections/hero/HeroAnimated.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type HeroAnimatedProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroAnimated = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  imageSrc,
+  videoSrc,
+}: HeroAnimatedProps) => {
+  const [parallaxStyle, setParallaxStyle] = useState({});
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLElement>) => {
+    const { clientX, clientY, currentTarget } = e;
+    const { left, top, width, height } = currentTarget.getBoundingClientRect();
+    const x = (clientX - left - width / 2) / (width / 2);
+    const y = (clientY - top - height / 2) / (height / 2);
+    setParallaxStyle({
+      transform: `translate(${x * -20}px, ${y * -20}px)`,
+    });
+  };
+
+  return (
+    <section
+      aria-label="Hero section"
+      className="hero-animated-container"
+      onMouseMove={handleMouseMove}
+    >
+      <div className="hero-animated-image-container">
+        <div className="hero-animated-parallax-wrapper" style={parallaxStyle}>
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="hero-animated-image" />
+        </div>
+      </div>
+      <div className="hero-animated-content w-content-width mx-auto">
+        <div className="flex flex-col items-center gap-3 md:gap-5">
+          <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+          <TextAnimation
+            text={title}
+            variant="fade"
+            tag="h1"
+            className="text-7xl 2xl:text-8xl font-medium text-center text-balance"
+          />
+          <TextAnimation
+            text={description}
+            variant="fade"
+            tag="p"
+            className="max-w-8/10 text-lg md:text-xl leading-tight text-center"
+          />
+          <div className="flex flex-wrap justify-center gap-3 mt-2">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroAnimated;

src/styles/animations.css

@@ -23,6 +23,18 @@
   }
 }
 
+@keyframes hero-float {
+  0% {
+    transform: translateY(-5px) scale(1.1);
+  }
+  50% {
+    transform: translateY(5px) scale(1.1);
+  }
+  100% {
+    transform: translateY(-5px) scale(1.1);
+  }
+}
+
 @keyframes fadeInTranslate {
   from {
     transform: translateY(0.75vh);