Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,35 +2,37 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-shift"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="soft"
-        contentWidth="compact"
+        contentWidth="medium"
-        sizing="mediumLargeSizeMediumTitles"
+        sizing="large"
-        background="aurora"
+        background="noiseDiagonalGradient"
-        cardStyle="inset"
+        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             navItems={[
               { name: "Home", id: "/" },
-        { name: "Support", id: "/workforce-support" },
+              { name: "FIFO Support", id: "/workforce-support" },
-        { name: "Join", id: "/join-esg" },
+              { name: "Careers", id: "/join-esg" },
               { name: "About", id: "/about" },
               { name: "Contact", id: "/contact" },
             ]}
@@ -40,111 +42,86 @@ export default function LandingPage() {
 
         <div id="hero" data-section="hero">
           <HeroSplitDualMedia
-      background={{ variant: "gradient-bars" }}
+            title="Rostered FIFO Workforce Support for Mining"
-      title="FIFO Workforce Support for WA Mining Operations"
+            description="Expert Support Group delivers elite HD Mechanics, LV Mechanics, and Welders for critical maintenance and site operations. Rapid, reliable deployment across Western Australia."
-      description="Skilled HD Mechanics, LV Mechanics and Welders deployed fast to mining and maintenance sites across Western Australia."
+            tag="Industrial Maintenance Experts"
-      tag="Reliable Industrial Partner"
+            tagIcon={CheckCircle}
-      buttons={[
+            background={{ variant: "radial-gradient" }}
-        { text: "Request Workforce Support", href: "#contact" },
+            buttons={[{ text: "Request Workforce", href: "#contact" }, { text: "Join Team", href: "/join-esg" }]}
-        { text: "Join Our Workforce", href: "/join-esg" },
-      ]}
             mediaItems={[
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtDyT7phrflrqeP2FPmLftd5Xh/uploaded-1779094979359-xw35grr3.png", imageAlt: "CAT haul truck in WA mine" },
+              { imageSrc: "https://img.b2bpic.net/free-photo/industrial-plant-workers_1134-118.jpg", imageAlt: "Mining site support" },
-        { imageSrc: "https://img.b2bpic.net/free-photo/excavator-action_1112-1599.jpg?id=1194026", imageAlt: "Mining site machinery" }
+              { imageSrc: "https://img.b2bpic.net/free-photo/mechanic-repairing-large-machinery_1134-122.jpg", imageAlt: "Mechanical maintenance" }
             ]}
-      mediaAnimation="slide-up"
             rating={5}
-      ratingText="Trusted by WA's leading contractors"
+            ratingText="Preferred by top tier WA contractors"
           />
         </div>
 
         <div id="services" data-section="services">
           <FeatureCardTwentyNine
-      animationType="slide-up"
+            title="Our Industrial Solutions"
-      textboxLayout="split"
+            description="High-performance staffing designed to prevent downtime and optimize site efficiency."
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
             features={[
-        { title: "FIFO Rostered Support", description: "Experienced teams for continuous site operations.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtDyT7phrflrqeP2FPmLftd5Xh/uploaded-1779094640193-vf5i1l53.png", titleImageSrc: "http://img.b2bpic.net/free-photo/men-looking-tablet-medium-shot_23-2148921388.jpg", buttonText: "Read More" },
+              { title: "FIFO Rostered Staff", description: "Consistent, high-caliber personnel for daily site operations.", imageSrc: "https://img.b2bpic.net/free-photo/workers-standing-factory_1134-135.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/factory-worker_1134-142.jpg", buttonText: "Learn More" },
-        { title: "Shutdown Workforce Support", description: "Rapid deployment for major maintenance events.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DtDyT7phrflrqeP2FPmLftd5Xh/uploaded-1779094726729-0u9jcebm.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/man-using-excavator-digging-day-light_23-2149194787.jpg", buttonText: "Read More" },
+              { title: "Shutdown Management", description: "Rapidly deploy specialized crews for major maintenance events.", imageSrc: "https://img.b2bpic.net/free-photo/maintenance-crew_1134-155.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/welding-sparks_1134-160.jpg", buttonText: "Learn More" },
-        { title: "HD Mechanical Support", description: "Heavy machinery experts for all equipment types.", imageSrc: "https://img.b2bpic.net/free-photo/combine-machine-service_146671-19098.jpg?id=10180823", titleImageSrc: "http://img.b2bpic.net/free-photo/mechanic-checking-car-parts_1170-1338.jpg", buttonText: "Read More" },
+              { title: "HD/LV Mechanical", description: "Specialized expertise for mining heavy and light vehicle fleets.", imageSrc: "https://img.b2bpic.net/free-photo/mechanic-engine_1134-180.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/engine-parts_1134-185.jpg", buttonText: "Learn More" },
-        { title: "LV Mechanical Support", description: "Light vehicle maintenance for critical site operations.", imageSrc: "https://img.b2bpic.net/free-photo/combine-machine-service_146671-19096.jpg?id=10180813", titleImageSrc: "http://img.b2bpic.net/free-photo/combine-machine-service_146671-19096.jpg", buttonText: "Read More" },
+              { title: "Qualified Trades", description: "Verified certified welders and fabricators for all site needs.", imageSrc: "https://img.b2bpic.net/free-photo/welder-at-work_1134-190.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/welding-metal_1134-195.jpg", buttonText: "Learn More" }
-        { title: "Welding & Fabrication", description: "Certified trade professionals for site repair needs.", imageSrc: "http://img.b2bpic.net/free-photo/man-makes-show-with-sparkling-fire_8353-698.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/rough-metallic-surface-texture_23-2148953936.jpg", buttonText: "Read More" },
             ]}
-      title="Our Workforce Services"
+            gridVariant="bento-grid"
-      description="Professional support for all mining and maintenance stages."
+            animationType="slide-up"
+            textboxLayout="split-description"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="why-esg" data-section="why-esg">
           <MetricSplitMediaAbout
+            title="Uncompromising Safety & Quality"
+            description="We don't just provide personnel; we provide operational continuity. ESG ensures every trade professional deployed is strictly compliant with WA safety standards."
+            metrics={[{ value: "100%", title: "Compliance Vetted" }, { value: "24/7", title: "Support" }, { value: "50+", title: "Active Projects" }]}
+            imageSrc="https://img.b2bpic.net/free-photo/mining-site-machinery_1134-210.jpg"
+            mediaAnimation="blur-reveal"
             useInvertedBackground={false}
-      title="Why Choose ESG?"
-      description="ESG provides fast, reliable FIFO workforce support across WA mining and maintenance operations."
-      metrics={[
-        { value: "24/7", title: "Operational" },
-        { value: "25+", title: "Tradespeople" },
-        { value: "50+", title: "Mine Sites" },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-rock-formations-death-valley-usa_181624-52616.jpg"
-      imageAlt="Pilbara mining landscape"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
           />
         </div>
 
         <div id="testimonial" data-section="testimonial">
           <TestimonialCardTwelve
-      useInvertedBackground={false}
+            cardTitle="Industry Trusted"
-      cardTitle="What Our Partners Say"
+            cardTag="Our Reputation"
-      cardTag="Testimonials"
+            testimonials={[{ id: "1", name: "Mining Operations Lead", imageSrc: "https://img.b2bpic.net/free-photo/person-in-hard-hat_1134-220.jpg" }, { id: "2", name: "Procurement Director", imageSrc: "https://img.b2bpic.net/free-photo/site-manager_1134-225.jpg" }]}
             cardAnimation="slide-up"
-      testimonials={[
+            useInvertedBackground={false}
-        { id: "t1", name: "Site Manager, Pilbara", imageSrc: "http://img.b2bpic.net/free-photo/portrait-factory-worker-with-arms-crossed-standing-by-industrial-machine_342744-181.jpg", imageAlt: "Worker 1" },
-        { id: "t2", name: "Procurement Lead, WA", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-factory_1303-14306.jpg", imageAlt: "Worker 2" },
-        { id: "t3", name: "Operations Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-factory-worker-with-arms-crossed-standing-by-drilling-machine-industrial-plant_342744-122.jpg", imageAlt: "Worker 3" },
-        { id: "t4", name: "HR Specialist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-factory-worker-protective-equipment-production-hall_342744-146.jpg", imageAlt: "Worker 4" },
-        { id: "t5", name: "Maintenance Lead", imageSrc: "http://img.b2bpic.net/free-photo/hardhat-wearing-men-work-together-build-factory-generated-by-ai_188544-26781.jpg", imageAlt: "Worker 5" },
-      ]}
           />
         </div>
 
         <div id="faq" data-section="faq">
           <FaqSplitMedia
-      textboxLayout="default"
+            title="Operational Questions"
-      useInvertedBackground={false}
+            description="Everything you need to know about partnering with us."
-      title="Frequently Asked Questions"
+            faqs={[{ id: "f1", title: "How fast is your deployment?", content: "We specialize in rapid mobilization, typically arriving on-site within 48 hours for critical shutdowns." }, { id: "f2", title: "Do you supply tools?", content: "Yes, all our tradespeople arrive site-ready with their own specialized tools and PPE." }]}
-      description="Everything you need to know about partnering with ESG for your workforce needs."
+            imageSrc="https://img.b2bpic.net/free-photo/mine-logistics_1134-240.jpg"
-      imageSrc="http://img.b2bpic.net/free-photo/road-raising-mountains_158595-5803.jpg"
-      imageAlt="Mining landscape view"
-      mediaAnimation="slide-up"
             faqsAnimation="slide-up"
-      faqs={[
+            textboxLayout="split"
-        { id: "q1", title: "How fast can you deploy?", content: "Our recruitment network allows for rapid mobilization, often within 48-72 hours for critical roles." },
+            useInvertedBackground={false}
-        { id: "q2", title: "Are your staff certified?", content: "All personnel are fully vetted, hold current trade certifications, and meet all site-specific safety compliance requirements." },
+          />
-        { id: "q3", title: "Do you handle FIFO logistics?", content: "Yes, ESG manages all travel, accommodation, and site logistics for our workforce." },
+        </div>
-      ]}
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            title="Ready for Reliable FIFO Support?"
+            description="Contact our planning team today to secure the workforce your project requires."
+            tag="Get In Touch"
+            buttons={[{ text: "Submit Request" }]}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
-      columns={[
+            logoText="ESG"
-        {
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Support", href: "/workforce-support" }] }, { items: [{ label: "Contact", href: "/contact" }, { label: "Join", href: "/join-esg" }] }]}
-          items: [
-            { label: "FIFO Solutions", href: "/workforce-support" },
-            { label: "Join ESG", href: "/join-esg" },
-            { label: "About Us", href: "/about" },
-          ],
-        },
-        {
-          items: [
-            { label: "Contact", href: "/contact" },
-            { label: "Privacy", href: "#" },
-          ],
-        },
-      ]}
-      logoText="Expert Support Group"
           />
         </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0b0f14;
+  --background: #121212;
-  --card: #111821;
+  --card: #1e1e1e;
   --foreground: #ffffff;
   --primary-cta: #f2c200;
   --primary-cta-text: #0b0f14;
-  --secondary-cta: #111821;
+  --secondary-cta: #333333;
   --secondary-cta-text: #ffffff;
   --accent: #f2c200;
-  --background-accent: #111821;
+  --background-accent: #252525;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);