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/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,102 @@
+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>
+
+      {/* 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>
+  );
+}