2026-04-14 23:29:50 +00:00
6 changed files with 146 additions and 52 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,41 +1,53 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 export default function AboutPage() {
  return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
-            { name: "Responsible Gaming", id: "/responsible-gaming" },
-            { name: "Contact", id: "#contact" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Contact", id: "/contact" }
          ]}
          brandName="Swift Haul"
        />
-        <div style={{ paddingTop: "100px", paddingBottom: "100px" }}>
-          <SplitAbout
-            title="About Swift Haul"
-            description="Learn more about our mission to provide the most reliable trucking services in the industry."
-            bulletPoints={[]}
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
-        </div>
+      </div>
+      <div id="about" data-section="about">
+        <SplitAbout
+          title="About Swift Haul"
+          description="Learn more about our mission to provide the most reliable trucking services in the industry."
+          bulletPoints={[]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Swift Haul"
          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Responsible Gaming", href: "/responsible-gaming" }] },
-            { title: "Support", items: [{ label: "Contact", href: "/" }, { label: "Privacy Policy", href: "#" }] },
+            { title: "Company", items: [{ label: "About", href: "/about" }] },
+            { title: "Support", items: [{ label: "Contact", href: "/contact" }] },
          ]}
        />
-      </ReactLenis>
+      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,17 +1,35 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';

 export default function DashboardPage() {
  return (
-    <ThemeProvider borderRadius="soft" contentWidth="medium">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Account", id: "/dashboard"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <MetricCardSeven 
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="metrics" data-section="metrics">
+        <MetricCardTwo 
          title="Your Dashboard"
-          metrics={[{id: "1", value: "$12,450", title: "Pending Payouts", items: ["Direct Deposit"]}]}
+          metrics={[{id: "1", value: "$12,450", description: "Pending Payouts"}]}
+          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
+          textboxLayout="default"
        />
      </div>
    </ThemeProvider>
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -10,15 +10,27 @@ export default function LoginPage() {
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
+      sizing="medium"
      background="noiseDiagonalGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
    >
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Login", id: "/login"}]} brandName="Swift Haul" />
-      <div className="pt-32">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="contact" data-section="contact">
        <ContactSplit 
          tag="Access"
          title="Login to Your Account"
          description="Manage your fleet and track your shipments."
          background={{ variant: "gradient-bars" }}
+          useInvertedBackground={false}
+          mediaAnimation="blur-reveal"
          inputPlaceholder="Enter your email"
          buttonText="Login"
        />
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -5,10 +5,30 @@ import LegalSection from '@/components/legal/LegalSection';

 export default function PrivacyPage() {
  return (
-    <ThemeProvider borderRadius="soft">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <LegalSection layout="page" title="Privacy Policy" sections={[{heading: "Data", content: {type: "paragraph", text: "We protect your data."}}]} />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection 
+            layout="page" 
+            title="Privacy Policy" 
+            sections={[{heading: "Data", content: {type: "paragraph", text: "We protect your data."}}]} 
+        />
      </div>
    </ThemeProvider>
  );
--- a/src/app/responsible-gaming/page.tsx
+++ b/src/app/responsible-gaming/page.tsx
@@ -1,41 +1,53 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import LegalSection from '@/components/legal/LegalSection';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 export default function ResponsibleGamingPage() {
  return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
-            { name: "Responsible Gaming", id: "/responsible-gaming" },
-            { name: "Contact", id: "#contact" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Contact", id: "/contact" },
          ]}
          brandName="Swift Haul"
        />
-        <div style={{ paddingTop: "100px", paddingBottom: "100px" }}>
-            <LegalSection
-                layout="page"
-                title="Responsible Gaming"
-                sections={[
-                    { heading: "Our Commitment", content: { type: "paragraph", text: "At Swift Haul, we prioritize safety and integrity in everything we do." } }
-                ]}
-            />
-        </div>
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection
+            layout="page"
+            title="Responsible Gaming"
+            sections={[
+                { heading: "Our Commitment", content: { type: "paragraph", text: "At Swift Haul, we prioritize safety and integrity in everything we do." } }
+            ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Swift Haul"
          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Responsible Gaming", href: "/responsible-gaming" }] },
-            { title: "Support", items: [{ label: "Contact", href: "/" }, { label: "Privacy Policy", href: "#" }] },
+            { title: "Company", items: [{ label: "About", href: "/about" }] },
+            { title: "Support", items: [{ label: "Contact", href: "/contact" }] },
          ]}
        />
-      </ReactLenis>
+      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -5,10 +5,30 @@ import LegalSection from '@/components/legal/LegalSection';

 export default function TermsPage() {
  return (
-    <ThemeProvider borderRadius="soft">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <LegalSection layout="page" title="Terms of Service" sections={[{heading: "Usage", content: {type: "paragraph", text: "By using our services, you agree to these terms."}}]} />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection 
+            layout="page" 
+            title="Terms of Service" 
+            sections={[{heading: "Usage", content: {type: "paragraph", text: "By using our services, you agree to these terms."}}]} 
+        />
      </div>
    </ThemeProvider>
  );