Update src/app/services/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
+      <main className="pt-24">
+        <h1 className="text-center text-4xl">About Autosphere Company</h1>
+        <p className="text-center mt-6">We are the leader in automotive innovation.</p>
+      </main>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Learn More" description="Get in touch with us." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/company-info/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function CompanyInfoPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
+      <main className="pt-24">
+        <h1 className="text-center text-4xl">Company Information</h1>
+        <p className="text-center mt-6">Dedicated to excellence and innovation at Autosphere Company.</p>
+      </main>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Connect" description="Find out more about our mission." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
+      <main className="pt-24">
+        <div id="contact" data-section="contact">
+          <ContactCTA tag="Contact" title="Contact Us" description="We'd love to hear from you." buttons={[{ text: "Email Us" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ReactLenis from "lenis/react";
+
+export default function DashboardPage() {
+  const [savedItems, setSavedItems] = useState<Array<{ id: string, name: string, price: string }>>([
+    { id: "p1", name: "Urban Explorer SUV", price: "$34,500" },
+    { id: "p3", name: "Speedster Convertible", price: "$48,900" }
+  ]);
+
+  const handleRemove = (id: string) => {
+    setSavedItems(savedItems.filter(item => item.id !== id));
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="noise"
+        cardStyle="solid"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Cars", id: "/#catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+          ]}
+          brandName="AutoSource"
+          button={{ text: "Logout", onClick: () => console.log("Logging out") }}
+        />
+        
+        <main className="pt-32 pb-20 px-6 container mx-auto max-w-4xl">
+          <h1 className="text-4xl font-bold mb-8">Your Dashboard</h1>
+          <div className="bg-white dark:bg-zinc-900 p-8 rounded-lg border border-zinc-200 dark:border-zinc-800">
+            <h2 className="text-2xl mb-6">Saved Vehicles</h2>
+            {savedItems.length === 0 ? (
+              <p>No saved vehicles yet.</p>
+            ) : (
+              <ul className="space-y-4">
+                {savedItems.map((item) => (
+                  <li key={item.id} className="flex justify-between items-center p-4 border rounded">
+                    <div>
+                      <p className="font-bold">{item.name}</p>
+                      <p className="text-sm text-zinc-500">{item.price}</p>
+                    </div>
+                    <button 
+                      onClick={() => handleRemove(item.id)}
+                      className="text-red-500 hover:text-red-700 text-sm font-medium"
+                    >
+                      Remove
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </main>
+
+        <FooterLogoReveal
+          logoText="AutoSource"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -35,6 +35,7 @@ export default function LandingPage() {
               { name: "Cars", id: "catalog" },
               { name: "Why Us", id: "features" },
               { name: "Contact", id: "contact" },
+              { name: "Dashboard", id: "/dashboard" },
             ]}
             brandName="AutoSource"
             button={{ text: "Get Started", href: "#contact" }}
@@ -151,7 +152,7 @@ export default function LandingPage() {
             tag="Get in Touch"
             title="Ready to get behind the wheel?"
             description="Contact our sales team today to start your journey."
-            buttons={[{ text: "Contact Support", href: "#" }]}
+            buttons={[{ text: "Contact Support", onClick: () => window.location.href = "mailto:autoshpherecompany@gmail.com" }]}
           />
         </div>
 
@@ -165,4 +166,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
+      <main className="pt-24">
+        <h1 className="text-center text-4xl">Our Services</h1>
+        <p className="text-center mt-6">High-quality automotive solutions tailored for you.</p>
+      </main>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Inquire Now" description="Let us help you." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #041633;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);