From c21aa71c3550e6e3ab836d463535cb5bb51fb903 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 16 Apr 2026 05:08:15 +0000
Subject: [PATCH] Bob AI: Replace the current hero section with a new hero
 component t

---
 src/App.tsx                                   |  4 +-
 src/components/sections/hero/HeroAnimated.tsx | 71 +++++++++++++++++++
 src/styles/animations.css                     | 12 ++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/components/sections/hero/HeroAnimated.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9f94d3e..41c0535 100644
--- a/src/App.tsx
+++ b/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."
diff --git a/src/components/sections/hero/HeroAnimated.tsx b/src/components/sections/hero/HeroAnimated.tsx
new file mode 100644
index 0000000..c877f8f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
index c10b577..ba23101 100644
--- a/src/styles/animations.css
+++ b/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);