Bob AI: Populate src/pages/AboutUsPage.tsx (snippet builder, 3 sections)

src/pages/AboutUsPage.tsx

@@ -1,67 +1,20 @@
-import React from "react";
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import AboutMediaOverlay from "@/components/sections/about/AboutMediaOverlay";
-import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
-import TeamProfileCards from "@/components/sections/team/TeamProfileCards";
-import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { Quote } from "lucide-react";
 
 export default function AboutUsPage() {
   return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <NavbarCentered
-        logo="Webild"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "/contact" }}
-      />
-
-      <main className="flex-grow">
-        <AboutMediaOverlay
-          tag="Our Story"
-          title="Building the future of web development."
-          description="We are a team of passionate creators dedicated to making web design accessible, fast, and beautiful for everyone."
-          imageSrc="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2000&q=80"
-          textAnimation="fade-blur"
-        />
-
-        <AboutTextSplit
-          title="Our Mission & Vision"
-          descriptions={[
-            "Founded in 2023, we set out to solve the biggest bottleneck in modern web development: the gap between design and code. We believe that building stunning websites shouldn't require weeks of tedious boilerplate.",
-            "Our vision is a world where creators can focus entirely on their unique ideas, while our tools handle the heavy lifting of responsive layouts, accessible components, and beautiful animations."
-          ]}
-          textAnimation="slide-up"
-        />
-
-        <TeamProfileCards
-          tag="The Team"
-          title="Meet the minds behind the magic"
-          description="A diverse group of engineers, designers, and dreamers working together to build better tools for the web."
-          items={[
-            {
-              title: "Alex Rivera",
-              description: "CEO & Founder",
-              avatarSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80"
-            },
-            {
-              title: "Sarah Chen",
-              description: "Head of Design",
-              avatarSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80"
-            },
-            {
-              title: "Marcus Johnson",
-              description: "Lead Engineer",
-              avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80"
-            }
-          ]}
-          textAnimation="fade-blur"
-        />
-      </main>
-
-      <FooterMinimal
-        brand="Webild"
-        copyright="© 2024 Webild Inc. All rights reserved."
-      />
-    </div>
+    <>
+      <div data-webild-section="AboutTextSplit"><section aria-label="About section" className="py-20"><div className="flex flex-col gap-20 mx-auto w-content-width"><div className="flex flex-col md:flex-row gap-3 md:gap-15"><div className="w-full md:w-1/2"><TextAnimation text="15 Years of People-First Service" variant="fade-blur" gradientText={true} tag="h2" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance" /></div><div className="flex flex-col gap-2 w-full md:w-1/2"><TextAnimation key={0} text="Since our humble beginnings, ABC Group has built a reputation on integrity and reliability. We believe that true success comes from putting people first in everything we do." variant="fade-blur" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" />
+<TextAnimation key={1} text="Our dedicated team works tirelessly to foster long-term relationships, ensuring that every client and candidate feels valued, supported, and empowered to reach their goals." variant="fade-blur" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" /><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Our Services" href="/services" variant="primary" /><Button text="Meet the Team" href="/team" variant="secondary" animationDelay={0.1} /></div></div></div><div className="w-full border-b border-foreground/5" /></div></section></div>
+      <div data-webild-section="TeamOverlayCards"><section aria-label="Team section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our People</p></div><TextAnimation text="Meet the Team Behind ABC Group" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="For 15 years, our dedicated professionals have built lasting relationships based on integrity and trust." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Join Our Team" href="/careers" variant="primary" /><Button variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Sarah J." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/confident-business-woman-portrait-smiling-face_53876-137693.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Sarah J.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Managing Director</p></div></div></div></div>
+<div key="Michael B." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/handsome-corporate-man-real-estate-agent-assistant-smiling-holding-hands-together-how-can-i-help-smiling-camera-standing-white-background_176420-45257.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Michael B.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Head of Recruitment</p></div></div></div></div>
+<div key="Emma L." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Emma L.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Client Relations Manager</p></div></div></div></div>
+<div key="David W." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-red-checkered-shirt-fashion-man-posing_158538-4914.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">David W.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Operations Lead</p></div></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="AboutTestimonial"><section aria-label="Testimonial section" className="py-20"><div className="grid grid-cols-1 md:grid-cols-5 gap-5 mx-auto w-content-width"><div className="relative md:col-span-3 p-10 md:p-20 card rounded"><div className="absolute flex items-center justify-center -top-7 -left-7 md:-top-8 md:-left-8 size-14 md:size-16 primary-button rounded"><Quote className="h-5/10 text-primary-cta-text" strokeWidth={1.5} /></div><div className="relative flex flex-col justify-center gap-5 h-full"><div className="w-fit px-3 py-1 mb-1 text-sm card rounded"><p>Client Success</p></div><TextAnimation text="ABC Group has been our go-to recruitment partner for over a decade. Their commitment to finding the right people and building long-term relationships is unmatched." variant="fade-blur" gradientText={false} tag="h1" className="text-4xl md:text-5xl leading-[1.15] font-semibold text-balance" /><div className="flex items-center gap-2 min-w-0"><span className="text-base font-medium truncate">Jessica T.</span><span className="text-accent shrink-0">•</span><span className="text-base font-medium truncate">Operations Manager</span></div></div></div><ScrollReveal variant="fade-blur" className="p-px md:col-span-2 aspect-square md:aspect-auto md:h-full card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/confident-business-woman-smiling-looking-camera_114579-78988.jpg" /></ScrollReveal></div></section></div>
+    </>
   );
-}
+}