Merge version_25_1782878844192 into main

Merge version_25_1782878844192 into main

src/App.tsx

@@ -3,12 +3,14 @@ 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

@@ -36,6 +36,8 @@ export default function Layout() {
     "href": "#contact"
   },
   { name: "Vicforce Recruitment", href: "/vicforce-recruitment" },
+  { name: "About Us", href: "/about-us" },
+
 
 ];
 
@@ -107,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/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

@@ -16,7 +16,10 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 import TrustMetricsSection from './HomePage/sections/TrustMetrics';
-import VerseSection from './HomePage/sections/Verse';export default function HomePage(): React.JSX.Element {
+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 />
@@ -34,8 +37,11 @@ import VerseSection from './HomePage/sections/Verse';export default function Hom
       <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/Hero.tsx

@@ -10,13 +10,13 @@ export default function HeroSection(): React.JSX.Element {
     <div id="hero" data-section="hero">
             <SectionErrorBoundary name="hero">
               <HeroBillboardBrand
-        brand="Build Opportunity. Deliver Excellence."
+        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: "Get Your Free Consultation",              href: "#contact"}}
-        imageSrc="http://img.b2bpic.net/free-photo/vintage-landscape-photo_23-2149728863.jpg"
+        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/Verse.tsx

@@ -13,7 +13,7 @@ export default function VerseSection() {
           gradientText={false}
         />
         <TextAnimation 
-          text="With God nothing shall be impossible. - Luke 1:37" 
+          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"

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/routes.ts

@@ -7,4 +7,5 @@ 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' },
 ];