Switch to version 1: modified src/app/styles/variables.css

Switch to version 1: modified src/app/page.tsx
Switch to version 2: modified src/app/styles/variables.css
2026-05-18 09:54:43 +00:00 · 2026-05-18 09:54:42 +00:00 · 2026-05-18 09:54:38 +00:00 · 2026-05-18 09:54:38 +00:00 · 2026-05-18 09:54:37 +00:00 · 2026-05-18 09:54:37 +00:00
4 changed files with 139 additions and 123 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,9 +7,6 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Public_Sans } from "next/font/google";
-import { Manrope } from "next/font/google";
-import { DM_Sans } from "next/font/google";
-import { Montserrat } from "next/font/google";



@@ -23,14 +20,8 @@ export const metadata: Metadata = {
  },
 };

-
-
-const montserrat = Montserrat({
-  variable: "--font-montserrat",
-  subsets: ["latin"],
-});
-const inter = Inter({
-  variable: "--font-inter",
+const publicSans = Public_Sans({
+  variable: "--font-public-sans",
  subsets: ["latin"],
 });

@@ -42,7 +33,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${montserrat.variable} ${inter.variable} antialiased`}>
+        <body className={`${publicSans.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,126 +2,151 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { CheckCircle, AlertTriangle, ShieldCheck, HardHat } from "lucide-react";
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

 export default function LandingPage() {
  return (
    <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
-        contentWidth="medium"
-        sizing="large"
-        background="noise"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="mediumLargeSizeMediumTitles"
+        background="aurora"
+        cardStyle="inset"
+        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="extrabold"
    >
      <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "Support", id: "/workforce-support" },
-              { name: "Join", id: "/join-esg" },
-              { name: "About", id: "/about" },
-              { name: "Contact", id: "/contact" },
-            ]}
-            brandName="ESG"
-          />
-        </div>
+  <div id="nav" data-section="nav">
+      <NavbarLayoutFloatingOverlay
+      navItems={[
+        { name: "Home", id: "/" },
+        { name: "Support", id: "/workforce-support" },
+        { name: "Join", id: "/join-esg" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
+      ]}
+      brandName="ESG"
+    />
+  </div>

-        <div id="hero" data-section="hero">
-          <HeroSplitDualMedia
-            title="Elite Mining Workforce, Rapidly Deployed"
-            description="ESG connects top-tier HD/LV Mechanics and specialized Welders to Western Australia's most critical mining operations. We power production stability through precision recruitment."
-            tag="Industrial Maintenance Support"
-            tagIcon={HardHat}
-            background={{ variant: "gradient-bars" }}
-            buttons={[{ text: "Hire Workforce", href: "#contact" }, { text: "Join ESG", href: "/join-esg" }]}
-            mediaItems={[
-              { imageSrc: "https://img.b2bpic.net/free-photo/industrial-plant-workers_1134-118.jpg", imageAlt: "Industrial site support" },
-              { imageSrc: "https://img.b2bpic.net/free-photo/mechanic-repairing-large-machinery_1134-122.jpg", imageAlt: "Mining machinery repair" }
-            ]}
-            rating={5}
-            ratingText="Trusted by WA's largest contractors"
-          />
-        </div>
+  <div id="hero" data-section="hero">
+      <HeroSplitDualMedia
+      background={{ variant: "gradient-bars" }}
+      title="FIFO Workforce Support for WA Mining Operations"
+      description="Skilled HD Mechanics, LV Mechanics and Welders deployed fast to mining and maintenance sites across Western Australia."
+      tag="Reliable Industrial Partner"
+      buttons={[
+        { text: "Request Workforce Support", href: "#contact" },
+        { 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/excavator-action_1112-1599.jpg?id=1194026", imageAlt: "Mining site machinery" }
+      ]}
+      mediaAnimation="slide-up"
+      rating={5}
+      ratingText="Trusted by WA's leading contractors"
+    />
+  </div>

-        <div id="services" data-section="services">
-          <FeatureCardTwentyNine
-            title="Our Industrial Edge"
-            description="Solving critical skill shortages with reliable, safety-vetted professionals."
-            features={[
-              { title: "Problem: Site Downtime", description: "Unplanned mechanical failures cost millions. We provide the expertise to fix them fast.", imageSrc: "https://img.b2bpic.net/free-photo/engineers-helmets-standing-by-factory_1157-35475.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/industrial-plant-workers_1134-118.jpg", buttonText: "Learn More" },
-              { title: "Solution: ESG Specialists", description: "Deploy our elite crew of HD and LV mechanics to restore production in record time.", imageSrc: "https://img.b2bpic.net/free-photo/mechanic-engine_1134-180.jpg", titleImageSrc: "https://img.b2bpic.net/free-photo/welding-sparks_1134-160.jpg", buttonText: "Partner With Us" }
-            ]}
-            gridVariant="bento-grid"
-            animationType="slide-up"
-            textboxLayout="split-description"
-            useInvertedBackground={true}
-          />
-        </div>
+  <div id="services" data-section="services">
+      <FeatureCardTwentyNine
+      animationType="slide-up"
+      textboxLayout="split"
+      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: "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: "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: "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: "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"
+      description="Professional support for all mining and maintenance stages."
+    />
+  </div>

-        <div id="why-esg" data-section="why-esg">
-          <MetricSplitMediaAbout
-            title="Proven Mining Reliability"
-            description="Our track record speaks for itself. ESG maintains high project availability through rigorous vetting and constant trade support."
-            metrics={[{ value: "48hr", title: "Avg. Mobilization" }, { value: "98%", title: "Compliance Rate" }, { value: "24/7", title: "Field Support" }]}
-            imageSrc="https://img.b2bpic.net/free-photo/mining-site-machinery_1134-210.jpg"
-            mediaAnimation="blur-reveal"
-            useInvertedBackground={false}
-          />
-        </div>
+  <div id="why-esg" data-section="why-esg">
+      <MetricSplitMediaAbout
+      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
-            cardTitle="Trusted Partner"
-            cardTag="Industry Reputation"
-            testimonials={[{ id: "1", name: "Operations Superintendent", imageSrc: "https://img.b2bpic.net/free-photo/person-in-hard-hat_1134-220.jpg" }, { id: "2", name: "Project Lead", imageSrc: "https://img.b2bpic.net/free-photo/site-manager_1134-225.jpg" }]}
-            cardAnimation="slide-up"
-            useInvertedBackground={true}
-          />
-        </div>
+  <div id="testimonial" data-section="testimonial">
+      <TestimonialCardTwelve
+      useInvertedBackground={false}
+      cardTitle="What Our Partners Say"
+      cardTag="Testimonials"
+      cardAnimation="slide-up"
+      testimonials={[
+        { 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
-            title="Getting Started"
-            description="How ESG transforms your on-site capabilities."
-            faqs={[{ id: "f1", title: "Can you scale crews?", content: "Yes, we mobilize crews from single experts to complete maintenance teams depending on your shutdown requirements." }, { id: "f2", title: "Are crews trade-vetted?", content: "Every single ESG professional is rigorously checked for certifications, safety compliance, and site-readiness." }]}
-            imageSrc="https://img.b2bpic.net/free-photo/mine-logistics_1134-240.jpg"
-            faqsAnimation="slide-up"
-            textboxLayout="split"
-            useInvertedBackground={false}
-          />
-        </div>
+  <div id="faq" data-section="faq">
+      <FaqSplitMedia
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Frequently Asked Questions"
+      description="Everything you need to know about partnering with ESG for your workforce needs."
+      imageSrc="http://img.b2bpic.net/free-photo/road-raising-mountains_158595-5803.jpg"
+      imageAlt="Mining landscape view"
+      mediaAnimation="slide-up"
+      faqsAnimation="slide-up"
+      faqs={[
+        { id: "q1", title: "How fast can you deploy?", content: "Our recruitment network allows for rapid mobilization, often within 48-72 hours for critical roles." },
+        { 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="Secure Your Mining Project Today"
-            description="Don't let workforce gaps halt production. Partner with ESG."
-            tag="Contact ESG"
-            buttons={[{ text: "Request a Call Back" }]}
-            background={{ variant: "sparkles-gradient" }}
-            useInvertedBackground={true}
-          />
-        </div>
-
-        <div id="footer" data-section="footer">
-          <FooterLogoEmphasis
-            logoText="Expert Support Group"
-            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Support", href: "/workforce-support" }] }, { items: [{ label: "Contact", href: "/contact" }, { label: "Join", href: "/join-esg" }] }]} 
-          />
-        </div>
+  <div id="footer" data-section="footer">
+      <FooterLogoEmphasis
+      columns={[
+        {
+          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>
    </ThemeProvider>
  );
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-public-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-public-sans), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #1a1a1a;
-  --card: #262626;
-  --foreground: #f5f5f5;
+  --background: #0b0f14;
+  --card: #111821;
+  --foreground: #ffffff;
  --primary-cta: #f2c200;
  --primary-cta-text: #0b0f14;
-  --secondary-cta: #333333;
+  --secondary-cta: #111821;
  --secondary-cta-text: #ffffff;
  --accent: #f2c200;
-  --background-accent: #333333;
+  --background-accent: #111821;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	56d4d4375f	Switch to version 1: modified src/app/styles/variables.css	2026-05-18 09:54:43 +00:00
bender	2c8eef854b	Switch to version 1: modified src/app/page.tsx	2026-05-18 09:54:42 +00:00
bender	dff9e14c1d	Switch to version 2: modified src/app/styles/variables.css	2026-05-18 09:54:38 +00:00
bender	94920e7520	Switch to version 2: modified src/app/styles/base.css	2026-05-18 09:54:38 +00:00
bender	d142bf9c1d	Switch to version 2: modified src/app/page.tsx	2026-05-18 09:54:37 +00:00
bender	433f256791	Switch to version 2: modified src/app/layout.tsx	2026-05-18 09:54:37 +00:00
bender	4027a41cd6	Merge version_3 into main Merge version_3 into main	2026-05-18 09:54:17 +00:00
bender	7158a037d6	Merge version_3 into main Merge version_3 into main	2026-05-18 09:54:00 +00:00
bender	34a13645b8	Merge version_3 into main Merge version_3 into main	2026-05-18 09:27:04 +00:00