Merge version_25_1782878844192 into main

Merge version_25_1782878844192 into main

src/App.tsx

@@ -2,11 +2,15 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import VicforceRecruitmentPage from "@/pages/VicforceRecruitmentPage";
+import AboutUsPage from "@/pages/AboutUsPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/vicforce-recruitment" element={<VicforceRecruitmentPage />} />
+        <Route path="/about-us" element={<AboutUsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,11 @@ export default function Layout() {
   {
     "name": "Contact",
     "href": "#contact"
-  }
+  },
+  { name: "Vicforce Recruitment", href: "/vicforce-recruitment" },
+  { name: "About Us", href: "/about-us" },
+
+
 ];
 
   return (
@@ -43,6 +47,7 @@ export default function Layout() {
       <SectionErrorBoundary name="navbar">
         <NavbarDropdown
       logo="ABC Group"
+      logoImageSrc="https://storage.googleapis.com/webild/users/user_3FrIdiKqk5Mx7IGoNYH69LWPruK/uploaded-1782874468433-03sxkwcx.png"
       ctaButton={{
         text: "Request Consultation",
         href: "#contact",
@@ -104,7 +109,7 @@ export default function Layout() {
           ],
         },
       ]}
-      copyright="© 2024 ABC Group. All rights reserved."
+      copyright="Australian Business Concepts Group © 2026"
       links={[
         {
           label: "Luke 1:37",

src/components/ui/NavbarDropdown.tsx

@@ -6,6 +6,7 @@ import Button from "@/components/ui/Button";
 
 interface NavbarDropdownProps {
   logo: string;
+  logoImageSrc?: string;
   navItems: { name: string; href: string }[];
   ctaButton: { text: string; href: string };
 }
@@ -19,7 +20,7 @@ const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, on
   onClose?.();
 };
 
-const NavbarDropdown = ({ logo, navItems, ctaButton }: NavbarDropdownProps) => {
+const NavbarDropdown = ({ logo, logoImageSrc, navItems, ctaButton }: NavbarDropdownProps) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const navRef = useRef<HTMLElement>(null);
 

src/index.css

@@ -3,6 +3,12 @@
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 800 !important;
+  color: #FFFFFF !important;
+  letter-spacing: 0.025em !important;
+}
+
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
   --background: #0F172A;

src/pages/AboutUsPage.tsx

@@ -0,0 +1,20 @@
+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 data-webild-section="AboutTextSplit"><section aria-label="About section" className=""><div className="flex flex-col mx-auto w-content-width"><div className="flex flex-col md:flex-row gap-3"><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=""><div className="flex flex-col gap-8"><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 text="Learn More" 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=""><div className="grid grid-cols-1 md:grid-cols-5 gap-5 mx-auto w-content-width"><div className="relative md:col-span-3 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>
+    </>
+  );
+}

src/pages/HomePage.tsx

@@ -14,12 +14,19 @@ import CommitmentsSection from './HomePage/sections/Commitments';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import TrustMetricsSection from './HomePage/sections/TrustMetrics';
+import VerseSection from './HomePage/sections/Verse';
+import VicforceIntroWhySection from './HomePage/sections/VicforceIntroWhy';
+import VicforceServicesRolesSection from './HomePage/sections/VicforceServicesRoles';
+import VicforceProcessCtaSection from './HomePage/sections/VicforceProcessCta';export default function HomePage(): React.JSX.Element {
   return (
 <>
       <HeroSection />
+      <VerseSection />
 
       <AboutSection />
+      <TrustMetricsSection />
 
       <CompaniesSection />
 
@@ -30,8 +37,11 @@ export default function HomePage(): React.JSX.Element {
       <CommitmentsSection />
 
       <TestimonialsSection />
+      <VicforceIntroWhySection />
 
       <ContactSection />
+          <VicforceServicesRolesSection />
+      <VicforceProcessCtaSection />
     </>
   );
 }

src/pages/HomePage/sections/Companies.tsx

@@ -1,35 +1,18 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "companies" section.
+// Created by add_section_from_catalog (FeaturesRevealCards).
 
 import React from 'react';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
 
 export default function CompaniesSection(): React.JSX.Element {
   return (
-    <div id="companies" data-section="companies">
-            <SectionErrorBoundary name="companies">
-              <FeaturesMediaCarousel
-                tag="Our Companies"
-                title="Business Divisions"
-                description="Diversified professional services across Australia and beyond."
-                items={[
-                  {
-                    title: "VicForce Recruitment",                description: "Professional workforce solutions, industrial to hospitality.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/pregnant-manager-starts-interview-process_482257-120818.jpg"},
-                  {
-                    title: "ABC Trading",                description: "Global international trade experts for Australian produce.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827264.jpg"},
-                  {
-                    title: "Jag International",                description: "Residential property, development and luxury renovations.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-sea-from-window-diner_181624-8379.jpg"},
-                  {
-                    title: "Go Travel",                description: "Personalised corporate and leisure travel management.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-working-laptop_23-2149963928.jpg"},
-                  {
-                    title: "Services Management",                description: "Integrated management solutions.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-group-three-businesspeople-meeting-modern-o_1139-971.jpg"},
-                  {
-                    title: "Global Logistics",                description: "Seamless export/import networks.",                buttonIcon: "ArrowRight",                imageSrc: "http://img.b2bpic.net/free-photo/transport-logistics-concept_23-2151541951.jpg"},
-                ]}
-                textAnimation="fade"
-              />
-            </SectionErrorBoundary>
-          </div>
+    <div data-webild-section="companies" id="companies">
+      <FeaturesRevealCards
+        textAnimation="fade"
+        description="Diversified professional services across Australia and beyond."
+        tag="Our Companies"
+        title="Business Divisions"
+        items={[{"description":"Professional workforce solutions, industrial to hospitality.","title":"VicForce Recruitment","imageSrc":"http://img.b2bpic.net/free-photo/pregnant-manager-starts-interview-process_482257-120818.jpg"},{"title":"ABC Trading","imageSrc":"http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827264.jpg","description":"Global international trade experts for Australian produce."},{"description":"Residential property, development and luxury renovations.","imageSrc":"http://img.b2bpic.net/free-photo/beautiful-view-sea-from-window-diner_181624-8379.jpg","title":"Jag International"},{"title":"Go Travel","imageSrc":"http://img.b2bpic.net/free-photo/full-shot-woman-working-laptop_23-2149963928.jpg","description":"Personalised corporate and leisure travel management."},{"imageSrc":"http://img.b2bpic.net/free-photo/multi-ethnic-group-three-businesspeople-meeting-modern-o_1139-971.jpg","title":"Services Management","description":"Integrated management solutions."},{"description":"Seamless export/import networks.","title":"Global Logistics","imageSrc":"http://img.b2bpic.net/free-photo/transport-logistics-concept_23-2151541951.jpg"}]}
+      />
+    </div>
   );
 }

src/pages/HomePage/sections/Contact.tsx

@@ -13,7 +13,7 @@ export default function ContactSection(): React.JSX.Element {
                 tag="Let's Talk"
                 text="Ready to build something impossible? Contact ABC Group today."
                 primaryButton={{
-                  text: "Call Now (+61 3 8788 5151)",              href: "tel:+61387885151"}}
+                  text: "Call Now (03 8788 5151)",              href: "tel:+61387885151"}}
                 secondaryButton={{
                   text: "Email Info",              href: "mailto:info@abcgroup.net.au"}}
                 textAnimation="slide-up"

src/pages/HomePage/sections/Hero.tsx

@@ -10,15 +10,13 @@ export default function HeroSection(): React.JSX.Element {
     <div id="hero" data-section="hero">
             <SectionErrorBoundary name="hero">
               <HeroBillboardBrand
-        brand="Build Opportunity. Deliver Excellence."
-        description="ABC Group is an independent Australian family-owned business delivering trusted recruitment, trade, property, and travel solutions for over 15 years. 
-
-With God nothing shall be impossible. – Luke 1:37"
+        brand="Trusted Partnerships. Proven Results."
+        description="ABC Group is an independent Australian family-owned business delivering trusted recruitment, trade, property, and travel solutions for over 15 years. "
         primaryButton={{
                   text: "Our Companies",              href: "#companies"}}
         secondaryButton={{
-                  text: "Contact Us",              href: "#contact"}}
-        imageSrc="http://img.b2bpic.net/free-photo/vintage-landscape-photo_23-2149728863.jpg"
+                  text: "Get Your Free Consultation",              href: "#contact"}}
+        imageSrc="https://images.pexels.com/photos/33410957/pexels-photo-33410957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=33410957"
         textAnimation="fade-blur"
       />
             </SectionErrorBoundary>

src/pages/HomePage/sections/Testimonials.tsx

@@ -1,28 +1,150 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "testimonials" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
-import React from 'react';
-import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const testimonials = [
+  {
+    name: "Sarah J.",
+    role: "Director",
+    company: "TechCorp Solutions",
+    quote: "Exceptional service throughout the entire process.",
+    imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg"
+  },
+  {
+    name: "Michael B.",
+    role: "Client",
+    company: "Global Logistics Inc.",
+    quote: "Professional, reliable, and always results-driven.",
+    imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
+  },
+  {
+    name: "Emma L.",
+    role: "CEO",
+    company: "Innovate Partners",
+    quote: "Their team is an extension of our own success.",
+    imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg"
+  },
+  {
+    name: "David W.",
+    role: "Partner",
+    company: "Apex Financial",
+    quote: "Unwavering commitment to quality and integrity.",
+    imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg"
+  },
+  {
+    name: "Rebecca S.",
+    role: "Operations Manager",
+    company: "BuildRight Construction",
+    quote: "Truly personal and tailored workforce solutions.",
+    imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"
+  }
+];
+
+type Testimonial = {
+  name: string;
+  role: string;
+  company?: string;
+  quote: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const TestimonialsInline = () => {
+  const half = Math.ceil(testimonials.length / 2);
+  const topRow = testimonials.slice(0, half);
+  const bottomRow = testimonials.slice(half);
 
-export default function TestimonialsSection(): React.JSX.Element {
   return (
-    <div id="testimonials" data-section="testimonials">
-            <SectionErrorBoundary name="testimonials">
-              <TestimonialMarqueeCards
-                tag="Trust"
-                title="What Clients Say"
-                testimonials={[
-                  { name: "Sarah J.", role: "Director", quote: "Exceptional service throughout the entire process.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg" },
-                  { name: "Michael B.", role: "Client", quote: "Professional, reliable, and always results-driven.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg" },
-                  { name: "Emma L.", role: "CEO", quote: "Their team is an extension of our own success.", imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg" },
-                  { name: "David W.", role: "Partner", quote: "Unwavering commitment to quality and integrity.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg" },
-                  { name: "Rebecca S.", role: "Operations Manager", quote: "Truly personal and tailored workforce solutions.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" }
-                ]}
-                textAnimation="fade"
-                description="Hear from our partners and clients about their experience."
-              />
-            </SectionErrorBoundary>
+    <section aria-label="Testimonials section" className="pt-20 pb-10">
+      <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>{"Trust"}</p>
           </div>
+
+          <TextAnimation
+            text={"What Clients Say"}
+            variant={"fade"}
+            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={"Hear from our partners and clients about their experience."}
+            variant={"fade"}
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="slide-up" className="flex flex-col w-content-width mx-auto">
+          <div className="overflow-hidden mask-fade-x">
+            <div className="flex w-max animate-marquee-horizontal mb-5" style={{ animationDuration: "30s" }}>
+              {[...topRow, ...topRow, ...topRow, ...topRow].map((testimonial, index) => (
+                <div key={`top-${index}`} className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 shrink-0 w-72 md:w-80 mr-5 p-6 xl:p-7 2xl:p-8 rounded card">
+                    <p className="text-lg leading-snug line-clamp-3">{testimonial.quote}</p>
+
+                    <div className="flex items-center gap-3">
+                      <ImageOrVideo
+                        imageSrc={testimonial.imageSrc}
+                        videoSrc={testimonial.videoSrc}
+                        className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+                      />
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-base text-foreground font-semibold leading-snug truncate">{testimonial.name}</span>
+                        <span className="text-base text-foreground/75 leading-snug truncate">
+                          {testimonial.role}{testimonial.company ? `, ${testimonial.company}` : ''}
+                        </span>
+                      </div>
+                    </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="overflow-hidden mask-fade-x">
+            <div className="flex w-max animate-marquee-horizontal-reverse mb-10" style={{ animationDuration: "30s" }}>
+              {[...bottomRow, ...bottomRow, ...bottomRow, ...bottomRow].map((testimonial, index) => (
+                <div key={`bottom-${index}`} className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 shrink-0 w-72 md:w-80 mr-5 p-6 xl:p-7 2xl:p-8 rounded card">
+                    <p className="text-lg leading-snug line-clamp-3">{testimonial.quote}</p>
+
+                    <div className="flex items-center gap-3">
+                      <ImageOrVideo
+                        imageSrc={testimonial.imageSrc}
+                        videoSrc={testimonial.videoSrc}
+                        className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+                      />
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-base text-foreground font-semibold leading-snug truncate">{testimonial.name}</span>
+                        <span className="text-base text-foreground/75 leading-snug truncate">
+                          {testimonial.role}{testimonial.company ? `, ${testimonial.company}` : ''}
+                        </span>
+                      </div>
+                    </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function TestimonialsSection() {
+  return (
+    <div data-webild-section="testimonials" id="testimonials">
+      <TestimonialsInline />
+    </div>
   );
 }

src/pages/HomePage/sections/TrustMetrics.tsx

@@ -0,0 +1,50 @@
+import { Calendar, Building2, Users, Clock } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Card from "@/components/ui/Card";
+
+export default function TrustMetricsSection() {
+  return (
+    <div data-webild-section="trust-metrics" id="trust-metrics">
+      <section className="relative w-full py-24 bg-background">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation
+              variant="fade-blur"
+              text="Trust Metrics"
+              tag="h2"
+              className="text-sm font-semibold tracking-wider text-accent uppercase mb-4"
+              gradientText={false}
+            />
+            <TextAnimation
+              variant="fade-blur"
+              text="Proven Track Record"
+              tag="h3"
+              className="text-4xl md:text-5xl font-bold text-foreground"
+              gradientText={false}
+            />
+          </div>
+
+          <ScrollReveal variant="slide-up">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {[
+                { icon: Calendar, value: "15+", label: "Years Experience" },
+                { icon: Building2, value: "100+", label: "Business Clients" },
+                { icon: Users, value: "1000+", label: "Employees Managed" },
+                { icon: Clock, value: "24/7", label: "Client Support" }
+              ].map((metric, index) => (
+                <Card key={index} className="p-8 flex flex-col items-center text-center hover:-translate-y-1 transition-transform duration-300">
+                  <div className="w-14 h-14 rounded-full bg-background-accent flex items-center justify-center mb-6 text-foreground">
+                    <metric.icon className="w-7 h-7" />
+                  </div>
+                  <h4 className="text-4xl font-bold text-foreground mb-2">{metric.value}</h4>
+                  <p className="text-accent font-medium">{metric.label}</p>
+                </Card>
+              ))}
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Verse.tsx

@@ -0,0 +1,25 @@
+import { motion } from "motion/react"
+import TextAnimation from "@/components/ui/TextAnimation"
+
+export default function VerseSection() {
+  return (
+    <section data-webild-section="verse" id="verse" className="relative w-full py-24 md:py-32 bg-background flex items-center justify-center overflow-hidden">
+      <div className="w-content-width mx-auto text-center flex flex-col items-center justify-center">
+        <TextAnimation 
+          text="ABC GROUP" 
+          variant="fade-blur" 
+          tag="h2" 
+          className="text-6xl md:text-8xl lg:text-[10rem] font-bold text-foreground tracking-tighter mb-4 leading-none"
+          gradientText={false}
+        />
+        <TextAnimation 
+          text="With God nothing shall be impossible. - Disrupt Solutions" 
+          variant="fade-blur" 
+          tag="p" 
+          className="text-xl md:text-3xl lg:text-4xl font-medium text-accent"
+          gradientText={false}
+        />
+      </div>
+    </section>
+  )
+}

src/pages/HomePage/sections/VicforceIntroWhy.tsx

@@ -0,0 +1,64 @@
+import { CheckCircle2, Clock, Users, Headphones, ThumbsUp, Handshake } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+export default function VicforceIntroWhySection() {
+  const whyChoose = [
+    { title: "Operational Accuracy", desc: "Every recruitment process is managed with precision to ensure quality outcomes and seamless workforce integration.", icon: CheckCircle2 },
+    { title: "Rapid Response", desc: "Fast turnaround times to minimise downtime and keep your business operating efficiently.", icon: Clock },
+    { title: "Candidate Matching", desc: "We carefully match skills, experience and workplace culture to ensure long-term success.", icon: Users },
+    { title: "24/7 Client Support", desc: "Our team remains responsive whenever your business requires workforce assistance.", icon: Headphones },
+    { title: "Satisfaction Focused", desc: "Building lasting relationships through consistent service, reliability and accountability.", icon: ThumbsUp },
+    { title: "Personalised Partnerships", desc: "Every workforce solution is tailored to meet your organisation's unique operational requirements.", icon: Handshake }
+  ];
+
+  return (
+    <div data-webild-section="vicforce-intro-why" id="vicforce-intro-why" className="w-full bg-background text-foreground">
+      {/* Introduction */}
+      <section className="w-full py-24 bg-card">
+        <div className="w-content-width mx-auto text-center">
+          <TextAnimation 
+            text="Workforce Solutions That Keep Your Business Moving" 
+            variant="fade-blur" 
+            tag="h1" 
+            className="text-4xl md:text-5xl font-bold mb-6" 
+            gradientText={false} 
+          />
+          <ScrollReveal variant="fade">
+            <p className="text-lg text-accent max-w-3xl mx-auto mb-6">
+              At <strong className="text-foreground">VicForce Recruitment</strong>, we understand that every business relies on having the right people in the right roles at the right time.
+            </p>
+            <p className="text-lg text-accent max-w-3xl mx-auto mb-6">
+              With a reputation built on <strong className="text-foreground">operational accuracy, rapid response times, personalised service and long-term partnerships</strong>, we provide tailored workforce solutions that help organisations maintain productivity and grow with confidence.
+            </p>
+            <p className="text-lg text-accent max-w-3xl mx-auto">
+              Whether you require a single employee, temporary workforce support or an outsourced recruitment partner, VicForce delivers reliable recruitment solutions backed by professionalism, integrity and exceptional customer service.
+            </p>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Why Choose VicForce */}
+      <section className="w-full py-24">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation text="Why Choose VicForce" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold" gradientText={false} />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {whyChoose.map((item, idx) => (
+              <ScrollReveal variant="fade" key={idx} delay={idx * 0.1}>
+                <div className="p-8 h-full flex flex-col items-start border-t-4 border-blue-500 bg-white shadow-lg hover:shadow-xl transition-shadow rounded-lg">
+                  <div className="p-3 bg-blue-50 rounded-lg mb-6 text-blue-600">
+                    <item.icon className="w-8 h-8" />
+                  </div>
+                  <h3 className="text-xl font-bold mb-3 text-slate-900">{item.title}</h3>
+                  <p className="text-slate-600 leading-relaxed">{item.desc}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/VicforceProcessCta.tsx

@@ -0,0 +1,123 @@
+import { CheckCircle2, ArrowRight } from "lucide-react";
+import Button from "@/components/ui/Button";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+export default function VicforceProcessCtaSection() {
+  const process = [
+    { step: "1. Consultation", desc: "We take the time to understand your workforce needs and business objectives." },
+    { step: "2. Candidate Search", desc: "Leveraging our extensive talent network to identify the right people." },
+    { step: "3. Screening & Assessment", desc: "Comprehensive screening, reference checking and suitability assessments." },
+    { step: "4. Placement", desc: "Efficient onboarding with the right candidate for your organisation." },
+    { step: "5. Ongoing Support", desc: "Continued communication and workforce support to ensure long-term success." }
+  ];
+
+  const commitments = [
+    "Deliver exceptional service with dedication and integrity.",
+    "Provide cost-effective workforce solutions tailored to each client's business.",
+    "Continuously monitor performance to ensure client satisfaction.",
+    "Improve our processes to deliver seamless, efficient service.",
+    "Be available to support our clients 24 hours a day, 7 days a week."
+  ];
+
+  return (
+    <div data-webild-section="vicforce-process-cta" id="vicforce-process-cta" className="w-full bg-background text-foreground">
+      {/* Our Recruitment Process */}
+      <section className="w-full py-24 overflow-hidden">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation text="Our Recruitment Process" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold" gradientText={false} />
+          </div>
+          
+          <div className="relative">
+            <div className="hidden lg:block absolute top-6 left-0 w-full h-0.5 bg-white/10 z-0" />
+            
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 relative z-10">
+              {process.map((step, idx) => (
+                <ScrollReveal variant="fade" key={idx} delay={idx * 0.1} className="flex flex-col items-center text-center">
+                  <div className="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-6 shadow-lg ring-4 ring-background">
+                    {idx + 1}
+                  </div>
+                  <h3 className="text-lg font-bold mb-3">{step.step.split('. ')[1]}</h3>
+                  <p className="text-sm text-accent">{step.desc}</p>
+                  {idx < process.length - 1 && (
+                    <ArrowRight className="w-6 h-6 text-white/20 mt-6 lg:hidden" />
+                  )}
+                </ScrollReveal>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Our Commitment */}
+      <section className="w-full py-24 bg-card">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation text="Our Commitment" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold" gradientText={false} />
+          </div>
+          <div className="max-w-4xl mx-auto space-y-4">
+            {commitments.map((commitment, idx) => (
+              <ScrollReveal variant="fade" key={idx} delay={idx * 0.1}>
+                <div className="card p-6 flex items-center gap-6 hover:border-blue-500/50 transition-colors border border-transparent">
+                  <div className="w-10 h-10 rounded-full bg-blue-900/20 flex items-center justify-center shrink-0">
+                    <CheckCircle2 className="w-5 h-5 text-blue-400" />
+                  </div>
+                  <p className="text-lg font-medium">{commitment}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Lead Magnet */}
+      <section className="w-full py-24 bg-background">
+        <div className="w-content-width mx-auto">
+          <div className="card p-8 md:p-12 text-center max-w-4xl mx-auto border border-blue-500/20">
+            <h2 className="text-2xl md:text-3xl font-bold mb-4">Download Our Free Workforce Solutions Guide</h2>
+            <p className="text-accent mb-8 max-w-2xl mx-auto">
+              Get actionable insights on how to optimize your contingent workforce, reduce downtime, and improve hiring accuracy.
+            </p>
+            <form className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto" onSubmit={(e) => e.preventDefault()}>
+              <input 
+                type="email" 
+                placeholder="Enter your email address" 
+                className="flex-1 px-4 py-3 rounded bg-background border border-white/10 focus:outline-none focus:border-blue-500 text-foreground"
+                required
+              />
+              <Button text="Download Guide" variant="primary" className="whitespace-nowrap" />
+            </form>
+          </div>
+        </div>
+      </section>
+
+      {/* Final Call to Action */}
+      <section className="w-full py-32 relative overflow-hidden">
+        <div className="absolute inset-0 bg-slate-900 z-0">
+          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-overlay" />
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-slate-900/90" />
+        </div>
+        
+        <div className="w-content-width mx-auto relative z-10 text-center">
+          <TextAnimation 
+            text="Looking for dependable workforce solutions?" 
+            variant="slide-up" 
+            tag="h2" 
+            className="text-4xl md:text-5xl font-bold text-white mb-6" 
+            gradientText={false} 
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-xl text-blue-100 max-w-3xl mx-auto mb-10 leading-relaxed">
+              From temporary staffing to permanent recruitment and complete workforce management, VicForce is committed to connecting businesses with the people they need to succeed.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Request Staff" variant="primary" href="#contact" className="w-full sm:w-auto text-lg px-8 py-4" />
+              <Button text="Contact Our Team" variant="secondary" href="#contact" className="w-full sm:w-auto text-lg px-8 py-4" />
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/VicforceServicesRoles.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Briefcase, Clock, FileText, DollarSign, Users, Building2, BarChart, TrendingUp, MonitorPlay, ShieldCheck, HeartHandshake, Search, Check } from "lucide-react";
+import Input from "@/components/ui/Input";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+export default function VicforceServicesRolesSection() {
+  const [activeTab, setActiveTab] = useState("Industrial");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const services = [
+    { title: "Permanent Recruitment", desc: "Secure high-quality long-term employees for your organisation.", icon: Briefcase },
+    { title: "Temporary Recruitment", desc: "Flexible staffing solutions to meet changing business demands.", icon: Clock },
+    { title: "Contract Recruitment", desc: "Experienced professionals available for project-based or fixed-term assignments.", icon: FileText },
+    { title: "Payroll Services", desc: "Comprehensive payroll administration and workforce management.", icon: DollarSign },
+    { title: "Outsourced Workforce Management", desc: "End-to-end management of casual and contingent workforces.", icon: Users },
+    { title: "On-Site Recruitment Services", desc: "Dedicated recruitment support integrated into your workplace.", icon: Building2 },
+    { title: "Workforce Reporting", desc: "Tailored reporting and workforce insights to support business decisions.", icon: BarChart },
+    { title: "Salary Reviews", desc: "Salary benchmarking and remuneration guidance.", icon: TrendingUp },
+    { title: "Software Training", desc: "Recruitment system implementation and user training.", icon: MonitorPlay },
+    { title: "Workplace Safety Advice", desc: "Occupational Health & Safety guidance and compliance support.", icon: ShieldCheck },
+    { title: "Equal Employment Opportunity", desc: "Inclusive recruitment practices that support diverse workplaces.", icon: HeartHandshake }
+  ];
+
+  const industries = [
+    "Commercial", "Industrial", "Technical", "Hospitality", "Recreation", "Warehousing & Logistics", "Manufacturing", "Professional Services"
+  ];
+
+  const roles: Record<string, string[]> = {
+    "Industrial": [
+      "Cleaners (Hospital, Commercial & Industrial)", "Forklift Operators", "Delivery Drivers", "Labourers", "Leading Hands", "Foremen & Supervisors", "Maintenance Workers", "Pick Packers", "Plant Operators", "Process Workers", "Storepersons", "Store Supervisors", "Warehouse Staff", "Warehouse Managers", "Tradespeople (All Disciplines)"
+    ],
+    "Commercial": [
+      "Accounts Clerks", "Accounts Supervisors", "Assistant Accountants", "Bookkeepers", "Payroll Officers", "Customer Service Officers", "Customer Service Team Leaders", "Customer Service Managers", "Data Entry Operators", "Documentation Officers", "General Clerks", "Human Resources Officers", "Legal Secretaries", "Marketing Managers", "Office Administrators", "Office Managers", "Executive Assistants", "Personal Assistants", "Receptionists", "Telephonists", "Word Processing Officers", "Systems Administrators", "PC Support Specialists", "Sales Executives", "Sales & Account Managers", "Telemarketers", "Telemarketing Team Leaders", "Telemarketing Managers"
+    ],
+    "Hospitality": [
+      "Front Office Staff", "Food & Beverage Staff", "Housekeeping Staff", "Hospitality Supervisors", "Event & Venue Support Staff"
+    ]
+  };
+
+  const filteredRoles = roles[activeTab].filter(role => 
+    role.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div data-webild-section="vicforce-services-roles" id="vicforce-services-roles" className="w-full bg-background text-foreground">
+      {/* Recruitment Services */}
+      <section className="w-full py-24 bg-card">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation text="Recruitment Services" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold" gradientText={false} />
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {services.map((service, idx) => (
+              <ScrollReveal variant="fade" key={idx} delay={idx * 0.05}>
+                <div className="card p-6 h-full flex flex-col items-start hover:border-blue-500/50 transition-colors group border border-transparent">
+                  <service.icon className="w-6 h-6 text-blue-500 mb-4 group-hover:scale-110 transition-transform" />
+                  <h3 className="text-lg font-bold mb-2">{service.title}</h3>
+                  <p className="text-sm text-accent">{service.desc}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Industries We Support */}
+      <section className="w-full py-24">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation text="Industries We Support" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold" gradientText={false} />
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {industries.map((industry, idx) => (
+              <ScrollReveal variant="fade" key={idx} delay={idx * 0.05}>
+                <div className="card p-6 text-center hover:-translate-y-1 transition-transform cursor-pointer group border border-white/10 hover:border-blue-500/50">
+                  <span className="font-medium group-hover:text-blue-500 transition-colors">{industry}</span>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Roles We Recruit */}
+      <section className="w-full py-24 bg-card">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-12">
+            <TextAnimation text="Roles We Recruit" variant="slide-up" tag="h2" className="text-3xl md:text-4xl font-bold mb-8" gradientText={false} />
+            
+            <div className="flex flex-wrap justify-center gap-2 mb-8">
+              {Object.keys(roles).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${
+                    activeTab === tab 
+                      ? "bg-blue-600 text-white" 
+                      : "bg-background text-foreground hover:bg-blue-900/20"
+                  }`}
+                >
+                  {tab}
+                </button>
+              ))}
+            </div>
+
+            <div className="max-w-md mx-auto relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent" />
+              <Input 
+                type="text" 
+                placeholder={`Search ${activeTab} roles...`} 
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10 w-full bg-background"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <AnimatePresence mode="popLayout">
+              {filteredRoles.map((role) => (
+                <motion.div
+                  key={role}
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex items-center gap-3 p-4 card border border-white/10"
+                >
+                  <Check className="w-5 h-5 text-blue-500 shrink-0" />
+                  <span className="text-sm font-medium">{role}</span>
+                </motion.div>
+              ))}
+              {filteredRoles.length === 0 && (
+                <div className="col-span-full text-center py-12 text-accent">
+                  No roles found matching "{searchQuery}"
+                </div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/WhyChoose.tsx

@@ -1,29 +1,115 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "why-choose" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { cls } from "@/lib/utils";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
-import React from 'react';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const metrics = [
+  {
+    value: "15+",
+    title: "Years Experience",
+    description: "Industry trusted family business.",
+    imageSrc: "http://img.b2bpic.net/free-vector/ui-ux-element-security-button_24877-82400.jpg"
+  },
+  {
+    value: "100+",
+    title: "Business Clients",
+    description: "Long-term partnership network.",
+    imageSrc: "http://img.b2bpic.net/free-photo/marketing-concept-with-wooden-figures-person-wooden-black-heart-background-flat-lay_176474-7807.jpg"
+  },
+  {
+    value: "1000+",
+    title: "Workforce Placements",
+    description: "Exceptional talent delivery.",
+    imageSrc: "http://img.b2bpic.net/free-vector/collection-new-year-badges-2018_23-2147701497.jpg"
+  }
+];
 
-export default function WhyChooseSection(): React.JSX.Element {
-  return (
-    <div id="why-choose" data-section="why-choose">
-            <SectionErrorBoundary name="why-choose">
-              <MetricsMediaCards
-                tag="Why Choose Us"
-                title="Proven Success Metrics"
-                metrics={[
-                  {
-                    value: "15+",                title: "Years Experience",                description: "Industry trusted family business.",                imageSrc: "http://img.b2bpic.net/free-vector/ui-ux-element-security-button_24877-82400.jpg"},
-                  {
-                    value: "100+",                title: "Business Clients",                description: "Long-term partnership network.",                imageSrc: "http://img.b2bpic.net/free-photo/marketing-concept-with-wooden-figures-person-wooden-black-heart-background-flat-lay_176474-7807.jpg"},
-                  {
-                    value: "1000+",                title: "Workforce Placements",                description: "Exceptional talent delivery.",                imageSrc: "http://img.b2bpic.net/free-vector/collection-new-year-badges-2018_23-2147701497.jpg"},
-                ]}
-                textAnimation="slide-up"
-                description="We lead by example in delivering value."
-              />
-            </SectionErrorBoundary>
+type Metric = {
+  value: string;
+  title: string;
+  description: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const WhyChooseInline = () => (
+  <section aria-label="Metrics 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>{"Why Choose Us"}</p>
+        </div>
+
+        <TextAnimation
+          text={"Proven Success Metrics"}
+          variant={"slide-up"}
+          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={"We lead by example in delivering value."}
+          variant={"slide-up"}
+          gradientText={false}
+          tag="p"
+          className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+        />
+
+        {(undefined || undefined) && (
+          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
           </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 w-content-width mx-auto">
+        {metrics.map((metric, index) => {
+          const isEven = index % 2 === 1;
+          const isLast = index === metrics.length - 1;
+          const isOddTotal = metrics.length % 2 !== 0;
+          const shouldSpanFull = isLast && isOddTotal;
+
+          return (
+            <ScrollReveal
+              variant="slide-up"
+              key={metric.value}
+              className={cls("grid grid-cols-2 gap-5", shouldSpanFull && "md:col-span-2")}
+            >
+              <div className={cls(
+                "flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 card rounded",
+                shouldSpanFull ? "min-h-[280px] md:min-h-[320px]" : "min-h-[280px]",
+                isEven && "order-2 md:order-1"
+              )}>
+                <span className="text-5xl md:text-6xl font-semibold leading-snug text-accent">{metric.value}</span>
+                <div className="flex flex-col gap-2 min-w-0">
+                  <span className="text-xl md:text-2xl font-semibold text-foreground">{metric.title}</span>
+                  <div className="w-full h-px bg-accent/30" />
+                  <p className="text-base leading-snug text-foreground/90">{metric.description}</p>
+                </div>
+              </div>
+
+              <div className={cls(
+                "rounded overflow-hidden",
+                shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
+                isEven && "order-1 md:order-2"
+              )}>
+                <ImageOrVideo imageSrc={metric.imageSrc} videoSrc={metric.videoSrc} />
+              </div>
+            </ScrollReveal>
+          );
+        })}
+      </div>
+    </div>
+  </section>
+);
+
+export default function WhyChooseSection() {
+  return (
+    <div data-webild-section="why-choose" id="why-choose">
+      <WhyChooseInline />
+    </div>
   );
 }

src/pages/VicforceRecruitmentPage.tsx

@@ -0,0 +1,60 @@
+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 AvatarGroup from "@/components/ui/AvatarGroup";
+import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
+import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import FeaturesTimelineCards from "@/components/sections/features/FeaturesTimelineCards";
+
+export default function VicforceRecruitmentPage() {
+  return (
+    <>
+      <div data-webild-section="HeroOverlay"><section aria-label="Hero section" className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"><HeroBackgroundSlot /><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/diverse-business-team-working-together-office_53876-104681.jpg" className="absolute inset-0 w-full h-full object-cover rounded-none" /><div className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]" aria-hidden="true" /><div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25"><div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10"><div className="w-fit px-3 py-1 mb-1 text-sm card rounded"><p>Vicforce Recruitment</p></div><TextAnimation text="The Right People. The Right Skills. Right When You Need Them." variant="fade-blur" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance" /><TextAnimation text="Decades of trusted service providing high-quality staffing solutions. We connect businesses with reliable, people-first talent to drive your success forward." variant="fade-blur" gradientText={false} tag="p" className="text-lg md:text-xl text-white leading-snug text-balance" /><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Find Staff" href="#contact" variant="primary" /><Button text="Our Services" href="#services" variant="secondary" animationDelay={0.1} /></div><div className="mt-3 md:mt-4"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/confident-business-woman-portrait-smiling-face_53876-137693.jpg","https://img.freepik.com/free-photo/portrait-successful-man-having-stubble-posing-with-broad-smile-keeping-arms-folded_171337-1267.jpg","https://img.freepik.com/free-photo/handsome-corporate-man-real-estate-agent-assistant-smiling-holding-hands-together-like-professional-standing-suit-against-white-background_1258-85362.jpg"]} size="lg" label="15+ years of trusted service" labelClassName="text-primary-cta-text" /></div></div></div></section></div>
+      <div data-webild-section="AboutFeaturesSplit"><AboutFeaturesSplit
+        tag="About VicForce"
+        title="Connecting Businesses with Top Talent"
+        description="With decades of experience, VicForce Recruitment delivers reliable, people-first staffing solutions tailored to your industry needs."
+        primaryButton={{"text":"Find Staff","href":"#contact"}}
+        secondaryButton={{"text":"Our Services","href":"#services"}}
+        items={[{"icon":"Users","title":"Vetted Professionals","description":"Rigorous screening ensures you get highly skilled and reliable candidates."},{"icon":"Clock","title":"Rapid Placement","description":"Quick turnaround times to keep your business operations running smoothly."},{"icon":"ShieldCheck","title":"Trusted Partner","description":"Built on integrity and decades of proven recruitment success."}]}
+        imageSrc="https://img.freepik.com/free-photo/two-business-partners-shaking-hands-greeting-each-other_1262-17416.jpg"
+        textAnimation="fade-blur"
+      /></div>
+      <div data-webild-section="MetricsIconCards"><MetricsIconCards
+        tag="Our Track Record"
+        title="Delivering Excellence at Scale"
+        description="We have built a reputation on integrity and reliability, connecting top-tier talent with industry-leading businesses across the region."
+        primaryButton={{"text":"Find Staff","href":"/contact"}}
+        secondaryButton={{"text":"View Services","href":"/services"}}
+        metrics={[{"icon":"Clock","title":"Years of Experience","value":"15+"},{"icon":"Users","title":"People-First Focus","value":"100%"},{"icon":"ShieldCheck","title":"Integrity Driven","value":"100%"},{"icon":"Activity","title":"Reliable Service","value":"24/7"}]}
+        textAnimation="slide-up"
+      /></div>
+      <div data-webild-section="FeaturesIconCards"><FeaturesIconCards
+        tag="Why Choose Us"
+        title="Why Businesses Choose VicForce"
+        description="We deliver reliable, people-first recruitment solutions built on decades of integrity and industry expertise."
+        primaryButton={{"text":"Partner With Us","href":"/contact"}}
+        features={[{"icon":"ShieldCheck","title":"Proven Reliability","description":"Over 15 years of trusted service delivering high-quality staffing solutions."},{"icon":"Users","title":"People-First Approach","description":"We prioritize building lasting relationships with both clients and candidates."},{"icon":"Clock","title":"Rapid Placement","description":"Efficient recruitment processes to get the right skills when you need them."},{"icon":"Briefcase","title":"Industry Expertise","description":"Deep understanding of diverse sectors ensures perfect candidate matching."},{"icon":"Award","title":"Premium Quality","description":"Rigorous vetting processes guarantee only the most qualified professionals."},{"icon":"Handshake","title":"Integrity Driven","description":"Transparent and honest communication at every step of the hiring journey."}]}
+        textAnimation="slide-up"
+      /></div>
+      <div data-webild-section="FeaturesMediaGrid"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Expertise</p></div><TextAnimation text="Comprehensive Recruitment Solutions" 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="We connect businesses with top-tier talent across various industries, ensuring the perfect fit for your operational needs." 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="Find Staff" href="#contact" variant="primary" /><Button text="View Industries" href="#industries" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Temporary & Contract" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-people-shaking-hands-together_53876-20488.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Temporary & Contract</h3><p className="text-base leading-snug text-balance">Flexible workforce solutions to manage peak periods and project demands efficiently.</p></div></div>
+<div key="Permanent Placement" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/two-business-partners-working-together-office_1303-21334.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Permanent Placement</h3><p className="text-base leading-snug text-balance">Dedicated search and selection to find long-term talent that aligns with your company culture.</p></div></div>
+<div key="Industrial & Manufacturing" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/worker-reading-news-clipboard-factory_1303-14304.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Industrial & Manufacturing</h3><p className="text-base leading-snug text-balance">Skilled and unskilled labor for warehousing, logistics, and production facilities.</p></div></div>
+<div key="Corporate & Administration" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/confident-business-team-with-leader-center_1170-1926.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Corporate & Administration</h3><p className="text-base leading-snug text-balance">Professional office support staff, from receptionists to executive assistants.</p></div></div>
+<div key="Executive Search" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-people-meeting-office_1048-11500.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Executive Search</h3><p className="text-base leading-snug text-balance">Targeted headhunting for senior leadership and specialized management roles.</p></div></div>
+<div key="Volume Recruitment" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/group-diverse-people-having-business-meeting_53876-25060.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Volume Recruitment</h3><p className="text-base leading-snug text-balance">Rapid scaling of your workforce for large-scale projects and seasonal spikes.</p></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="FeaturesTimelineCards"><FeaturesTimelineCards
+        tag="Our Process"
+        title="How We Find Your Perfect Fit"
+        description="A streamlined, proven recruitment process designed to deliver high-quality candidates quickly and efficiently."
+        items={[{"title":"Consultation & Strategy","description":"We partner with you to understand your business needs, culture, and specific role requirements.","imageSrc":"https://img.freepik.com/free-photo/business-people-meeting-office_107420-84852.jpg"},{"title":"Sourcing & Screening","description":"Our team leverages extensive networks to identify, interview, and rigorously vet top talent.","imageSrc":"https://img.freepik.com/free-photo/job-interview-with-manager_23-2148932306.jpg"},{"title":"Placement & Support","description":"We manage the offer process and provide ongoing support to ensure a seamless onboarding experience.","imageSrc":"https://img.freepik.com/free-photo/handshake-close-up-executives_1098-1384.jpg"}]}
+        textAnimation="slide-up"
+      /></div>
+      <div data-webild-section="ContactCta"><section aria-label="Contact section" className="py-20"><div className="w-content-width mx-auto"><ScrollReveal variant="fade-blur"><div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Ready to hire?</p></div><TextAnimation text="Looking for reliable staff? Partner with Vicforce Recruitment today." variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Contact Us" href="/contact" variant="primary" /><Button text="Our Process" href="#process" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,6 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/vicforce-recruitment', label: 'Vicforce Recruitment', pageFile: 'VicforceRecruitmentPage' },
+  { path: '/about-us', label: 'About Us', pageFile: 'AboutUsPage' },
 ];