Bob AI: make the buttons super 3d on the hero section

src/pages/HomePage.tsx

@@ -1,20 +1,115 @@
 import AboutText from '@/components/sections/about/AboutText';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeaturesProfileCards from '@/components/sections/features/FeaturesProfileCards';
-import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
 import MetricsGradientCards from '@/components/sections/metrics/MetricsGradientCards';
 import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
 import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
-import { CheckCircle, Clock, Smile } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import { CheckCircle, Clock, Smile } from 'lucide-react';
+import SectionErrorBoundary from '@/components/ui/SectionErrorBoundary';
+import Button from '@/components/ui/Button';
+import HeroBackgroundSlot from '@/components/ui/HeroBackgroundSlot';
+import TextAnimation from '@/components/ui/TextAnimation';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import { cls } from '@/lib/utils';
+
+// ── Inlined from src/components/sections/hero/HeroTiltedCards.tsx (was <HeroTiltedCards />)
+// You can now edit InlinedHeroTiltedCards freely below — it is a local copy and
+// will not affect any other page that imports the original HeroTiltedCards.
+interface HeroTiltedCardsProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
+}
+
+const InlinedHeroTiltedCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items,
+}: HeroTiltedCardsProps) => {
+  const marqueeItems = [...items, ...items];
+  const galleryStyles = [
+    "-rotate-6 z-10 -translate-y-5",
+    "rotate-6 z-20 translate-y-5 -ml-15",
+    "-rotate-6 z-30 -translate-y-5 -ml-15",
+    "rotate-6 z-40 translate-y-5 -ml-15",
+    "-rotate-6 z-50 -translate-y-5 -ml-15",
+  ];
+
+  return (
+    <section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col items-center gap-10 md:gap-15 w-full md:w-content-width mx-auto">
+        <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{tag}</p>
+          </div>
+
+          <TextAnimation
+            text={title}
+            variant="fade"
+            gradientText={true}
+            tag="h1"
+            className="text-6xl font-medium text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="text-base md:text-lg leading-tight text-balance"
+          />
+
+          <div className="flex flex-wrap justify-center gap-3 mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="transform-gpu [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateY(12deg)] hover:scale-105"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} className="transform-gpu [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateY(12deg)] hover:scale-105" />
+          </div>
+        </div>
+
+        <ScrollReveal variant="fade-blur" delay={0.2} className="block md:hidden w-full overflow-hidden mask-padding-x">
+          <div className="flex w-max animate-marquee-horizontal">
+            {marqueeItems.map((item, index) => (
+              <div key={index} className="shrink-0 w-[50vw] mr-5 aspect-4/5 p-2 card rounded overflow-hidden">
+                <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+
+        <ScrollReveal variant="fade-blur" delay={0.2} className="hidden md:flex justify-center items-center w-full">
+          <div className="flex items-center justify-center">
+            {items.map((item, index) => (
+              <div
+                key={index}
+                className={cls(
+                  "relative w-[23%] aspect-4/5 p-2 card rounded overflow-hidden shadow-lg transition-transform duration-500 ease-out hover:scale-110",
+                  galleryStyles[index]
+                )}
+              >
+                <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
 
 export default function HomePage() {
   return (
     <>
   <div id="hero" data-section="hero">
     <SectionErrorBoundary name="hero">
-          <HeroTiltedCards
+          <InlinedHeroTiltedCards
       tag="Motion Graphics Designer"
       title="Bringing Ideas to Life with Dynamic Visuals"
       description="Crafting compelling narratives through animation, visual effects, and engaging motion design. Let's make your vision move."