src/app/dashboard/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { LayoutDashboard, ShoppingBag, Heart, Settings, User } from "lucide-react";
+
+export default function DashboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="large"
+        background="blurBottom"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Dashboard", id: "#" }
+            ]}
+            brandName="ServiceConnect"
+          />
+        </div>
+
+        <main className="container mx-auto py-20 px-4">
+          <h1 className="text-4xl font-extrabold mb-10">Customer Dashboard</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="p-6 border rounded-3xl bg-card shadow-sm">
+              <div className="flex items-center gap-3 mb-4"><User /> <h2 className="text-xl font-bold">Profile</h2></div>
+              <p>View and edit your personal information and preferences.</p>
+            </div>
+            <div className="p-6 border rounded-3xl bg-card shadow-sm">
+              <div className="flex items-center gap-3 mb-4"><ShoppingBag /> <h2 className="text-xl font-bold">Order History</h2></div>
+              <p>Track your current and past service bookings.</p>
+            </div>
+            <div className="p-6 border rounded-3xl bg-card shadow-sm">
+              <div className="flex items-center gap-3 mb-4"><Heart /> <h2 className="text-xl font-bold">Saved Items</h2></div>
+              <p>Manage your favorite services and companies.</p>
+            </div>
+            <div className="p-6 border rounded-3xl bg-card shadow-sm">
+              <div className="flex items-center gap-3 mb-4"><Settings /> <h2 className="text-xl font-bold">Settings</h2></div>
+              <p>Configure account security, notifications, and WhatsApp integration.</p>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="ServiceConnect"
+            columns={[
+              { title: "Marketplace", items: [{ label: "Home", href: "/" }] },
+              { title: "Account", items: [{ label: "Dashboard", href: "/dashboard" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,7 +9,6 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Calendar } from "lucide-react";
@@ -40,6 +39,8 @@ export default function LandingPage() {
           name: "Reviews",          id: "testimonials"},
         {
           name: "Contact",          id: "contact"},
+        {
+          name: "Dashboard",          id: "/dashboard"},
       ]}
       brandName="ServiceConnect"
     />
@@ -214,4 +215,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/signin/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function SignInPage() {
+  const [isLogin, setIsLogin] = useState(true);
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="large"
+        background="blurBottom"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" },
+          { name: "Reviews", id: "/reviews" },
+          { name: "Contact", id: "/contact" },
+        ]}
+        brandName="ServiceConnect"
+      />
+
+      <div className="pt-32 pb-20">
+        <ContactSplitForm
+          useInvertedBackground={false}
+          title={isLogin ? "Sign In" : "Create Account"}
+          description={isLogin ? "Welcome back to ServiceConnect." : "Join our community to start booking services today."}
+          inputs={[
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true },
+          ]}
+          buttonText={isLogin ? "Sign In" : "Sign Up"}
+          onSubmit={(data) => console.log(data)}
+        />
+        
+        <div className="text-center mt-6">
+          <button onClick={() => setIsLogin(!isLogin)} className="text-sm text-gray-500 hover:underline">
+            {isLogin ? "Need an account? Sign Up" : "Already have an account? Sign In"}
+          </button>
+          <div className="mt-2">
+            <a href="#" className="text-sm text-gray-500 hover:underline">Forgot Password?</a>
+          </div>
+        </div>
+      </div>
+
+      <FooterBaseReveal
+        logoText="ServiceConnect"
+        columns={[
+          { title: "Marketplace", items: [{ label: "About", href: "#" }, { label: "Categories", href: "#" }] },
+          { title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#" }] },
+        ]}
+      />
+    </ThemeProvider>
+  );
+}

src/app/vendor-dashboard/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function VendorDashboardPage() {
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inventory", id: "#inventory" },
+            { name: "Sales", id: "#sales" },
+            { name: "Orders", id: "#orders" },
+          ]}
+          brandName="Vendor Dashboard"
+        />
+        
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Vendor Performance"
+            tag="Analytics"
+            metrics={[
+              { id: "1", value: "$12,450", description: "Total Revenue" },
+              { id: "2", value: "48", description: "Active Orders" },
+              { id: "3", value: "98%", description: "Satisfaction Rate" }
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="inventory" data-section="inventory">
+          <FeatureCardTwentyThree
+            animationType="slide-up"
+            title="Inventory Management"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { id: "i1", title: "Product A", tags: ["Stock: 45"] },
+              { id: "i2", title: "Product B", tags: ["Stock: 12"] }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="ServiceConnect"
+            columns={[]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}