src/App.tsx

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

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Contact",
     "href": "#contact"
-  }
+  },
+  { name: "Vicforce Recruitment", href: "/vicforce-recruitment" },
+
 ];
 
   return (

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,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/vicforce-recruitment', label: 'Vicforce Recruitment', pageFile: 'VicforceRecruitmentPage' },
 ];