Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -28,11 +28,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        { name: "Live Dashboard", id: "/" },
-        { name: "Analytics", id: "/analytics" },
-        { name: "Reports", id: "/reports" },
-        { name: "Settings", id: "/settings" },
-        { name: "Calibration", id: "/calibration" },
+        {
+          name: "Live Dashboard",          id: "/"},
+        {
+          name: "Analytics",          id: "/analytics"},
+        {
+          name: "Reports",          id: "/reports"},
+        {
+          name: "Settings",          id: "/settings"},
       ]}
       brandName="DMS Dashboard"
     />
@@ -40,10 +43,14 @@ export default function LandingPage() {
 
   <div id="hero-dashboard" data-section="hero-dashboard">
       <HeroBillboardScroll
-      background={{ variant: "gradient-bars" }}
+      background={{
+        variant: "gradient-bars"}}
       title="RealTime Driver Safety, Always Watching"
       description="Monitor drowsiness, distraction, and phone use live. Prevent accidents before they happen with instant alerts and detailed session reports."
-      buttons={[{ text: "Start Monitoring", href: "/" }]}
+      buttons={[
+        {
+          text: "Start Monitoring",          href: "/"},
+      ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/a-hyper-realistic-dark-themed-dashboard--1774833512780-7b7d772b.png?_wi=1"
       imageAlt="Dashboard visualization"
     />
@@ -57,18 +64,24 @@ export default function LandingPage() {
       features={[
         {
           id: 1,
-          title: "Drowsiness & Yawning",          description: "Measures eye closure rate (PERCLOS) and yawning frequency to trigger alerts.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=1" },
-          phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=1" }
+          title: "Drowsiness & Yawning",          description: "Measures eye closure rate (PERCLOS) and yawning frequency to trigger alerts.",          phoneOne: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=1"},
+          phoneTwo: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=1"}
         },
         {
           id: 2,
-          title: "Head & Gaze Tracking",          description: "Detects distraction by monitoring head orientation and gaze direction.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=2" },
-          phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=2" }
+          title: "Head & Gaze Tracking",          description: "Detects distraction by monitoring head orientation and gaze direction.",          phoneOne: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=2"},
+          phoneTwo: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=2"}
         },
         {
           id: 3,
-          title: "Phone Detection",          description: "Instantly identifies mobile device usage by the driver to maintain focus.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=3" },
-          phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=3" }
+          title: "Phone Detection",          description: "Instantly identifies mobile device usage by the driver to maintain focus.",          phoneOne: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=3"},
+          phoneTwo: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=3"}
         },
       ]}
       showStepNumbers={true}
@@ -84,10 +97,14 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       metrics={[
-        { id: "1", value: "99.9%", description: "Alert Accuracy" },
-        { id: "2", value: "<50ms", description: "Signal Latency" },
-        { id: "3", value: "24/7", description: "Monitoring Uptime" },
-        { id: "4", value: "15k+", description: "Active Drivers" },
+        {
+          id: "1",          value: "99.9%",          description: "Alert Accuracy"},
+        {
+          id: "2",          value: "<50ms",          description: "Signal Latency"},
+        {
+          id: "3",          value: "24/7",          description: "Monitoring Uptime"},
+        {
+          id: "4",          value: "15k+",          description: "Active Drivers"},
       ]}
       title="System Performance Metrics"
       description="Real-time accuracy and reliability data for our monitoring fleet."
@@ -103,10 +120,18 @@ export default function LandingPage() {
       description="Hear how our clients have improved safety standards."
       showRating={true}
       testimonials={[
-        { id: "1", name: "Sarah J.", handle: "@logistics_ops", testimonial: "This system reduced incidents by 40% in just two months.", rating: 5 },
-        { id: "2", name: "Mike R.", handle: "@transport_lead", testimonial: "The real-time alerts are a game changer for our night shifts.", rating: 5 },
-        { id: "3", name: "Elena V.", handle: "@fleet_manager", testimonial: "Seamless integration with our existing telematics infrastructure.", rating: 4 },
-        { id: "4", name: "David K.", handle: "@ops_director", testimonial: "Actionable data that actually makes a difference.", rating: 5 },
+        {
+          id: "1",          name: "Sarah J.",          handle: "@logistics_ops",          testimonial: "This system reduced incidents by 40% in just two months.",          rating: 5,
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/abstract-background-of-digital-binary-co-1774833487713-9bdd1b7b.png",          imageAlt: "Abstract background of digital binary code and signal waves in deep blue and purple, representing ne"},
+        {
+          id: "2",          name: "Mike R.",          handle: "@transport_lead",          testimonial: "The real-time alerts are a game changer for our night shifts.",          rating: 5,
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/a-hyper-realistic-dark-themed-dashboard--1774833512780-7b7d772b.png?_wi=2",          imageAlt: "A hyper-realistic, dark-themed dashboard showing a driver safety monitoring interface with circular "},
+        {
+          id: "3",          name: "Elena V.",          handle: "@fleet_manager",          testimonial: "Seamless integration with our existing telematics infrastructure.",          rating: 4,
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/close-up-view-of-a-high-tech-camera-modu-1774833488283-b69baccb.png?_wi=4",          imageAlt: "Close-up view of a high-tech camera module integrated into a modern vehicle interior, sleek minimali"},
+        {
+          id: "4",          name: "David K.",          handle: "@ops_director",          testimonial: "Actionable data that actually makes a difference.",          rating: 5,
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bdyr8fBaLQD5wgUuEbAsupcqC6/smartphone-display-showing-real-time-dro-1774833503271-2b1a2ae0.png?_wi=4",          imageAlt: "Smartphone display showing real-time drowsiness alerts with charts and graphs, dark mode interface, "},
       ]}
     />
   </div>
@@ -114,7 +139,8 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{ variant: "plain" }}
+      background={{
+        variant: "plain"}}
       tag="Get in touch"
       title="Ready to secure your fleet?"
       description="Speak with a consultant about custom deployment for your operations."
@@ -127,15 +153,18 @@ export default function LandingPage() {
       columns={[
         {
           items: [
-            { label: "About", href: "/about" },
-            { label: "Privacy", href: "/privacy" },
+            {
+              label: "About",              href: "/about"},
+            {
+              label: "Privacy",              href: "/privacy"},
           ],
         },
         {
           items: [
-            { label: "Dashboard", href: "/" },
-            { label: "Reports", href: "/reports" },
-            { label: "Settings", href: "/settings" },
+            {
+              label: "Dashboard",              href: "/"},
+            {
+              label: "Reports",              href: "/reports"},
           ],
         },
       ]}
@@ -145,17 +174,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}"
-    },
-    {
-      "path": "src/app/settings/page.tsx",      "content": "\"use client\";\n\nimport { ThemeProvider } from \"@/providers/themeProvider/ThemeProvider\";\nimport NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';\n\nexport default function SettingsPage() {\n  return (\n    <ThemeProvider background=\"none\" cardStyle=\"outline\" sizing=\"medium\">\n      <NavbarStyleFullscreen\n        navItems={[\n          { name: \"Dashboard\", id: \"/\" },\n          { name: \"Settings\", id: \"/settings\" },\n        ]}\n        brandName=\"DMS Dashboard\"\n      />\n      <div className=\"container mx-auto p-12 min-h-screen pt-32\">\n        <h1 className=\"text-4xl font-bold mb-8\">Configuration Settings</h1>\n        <div className=\"grid gap-8 p-8 rounded border\">\n          <div className=\"space-y-4\">\n            <label className=\"block font-semibold\">Device Sensitivity</label>\n            <input type=\"range\" className=\"w-full\" />\n          </div>\n          <div className=\"space-y-4\">\n            <label className=\"block font-semibold\">Alert Volume</label>\n            <input type=\"range\" className=\"w-full\" />\n          </div>\n          <button className=\"bg-primary text-white p-3 rounded\">Save Configuration</button>\n        </div>\n      </div>\n    </ThemeProvider>\n  );\n}"
-    },
-    {
-      "path": "src/app/calibration/page.tsx",      "content": "\"use client\";\n\nimport { ThemeProvider } from \"@/providers/themeProvider/ThemeProvider\";\nimport NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';\n\nexport default function CalibrationPage() {\n  return (\n    <ThemeProvider background=\"none\" cardStyle=\"outline\" sizing=\"medium\">\n      <NavbarStyleFullscreen\n        navItems={[\n          { name: \"Dashboard\", id: \"/\" },\n          { name: \"Calibration\", id: \"/calibration\" },\n        ]}\n        brandName=\"DMS Dashboard\"\n      />\n      <div className=\"container mx-auto p-12 min-h-screen pt-32\">\n        <h1 className=\"text-4xl font-bold mb-8\">Calibration Screen</h1>\n        <div className=\"border-2 border-dashed p-16 flex flex-col items-center justify-center min-h-[400px]\">\n          <div className=\"w-64 h-48 bg-gray-800 mb-6\"></div>\n          <p className=\"text-lg mb-8\">Align eyes with the center markers to begin calibration.</p>\n          <button className=\"bg-primary text-white px-8 py-3 rounded\">Start Calibration</button>\n        </div>\n      </div>\n    </ThemeProvider>\n  );\n}"
-    }
-  ],
-  "theme": {
-    "--background": "#0a0a0f",    "--card": "#1a1a2e",    "--foreground": "#ffffff",    "--primary-cta": "#00d4ff",    "--secondary-cta": "#1a1a2e",    "--accent": "#004a93",    "--background-accent": "#0e1a29"
-  },
-  "rawPlan": "I have added a new Settings page and a Calibration Screen page with a dark theme interface. I also updated the navigation links across all pages to include access to these new configurations."
-}
+}