Switch to version 2: added src/app/login/page.tsx

src/app/login/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import Input from "@/components/form/Input";
+import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login attempt with:", { email, password });
+    // Implement actual login logic here
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "#hero" },
+              { name: "About", id: "#about" },
+              { name: "Products", id: "#products" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "Contact", id: "#contact" },
+              { name: "Signup", id: "/signup" },
+              { name: "Order History", id: "/order-history" },
+              { name: "Account", id: "/account" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            brandName="Elegance Atelier"
+            button={{
+              text: "Login",              href: "/login"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <main className="flex min-h-[calc(100vh-200px)] items-center justify-center p-4">
+          <div className="w-full max-w-md p-8 space-y-6 rounded-lg shadow-xl bg-card text-foreground">
+            <h2 className="text-3xl font-bold text-center">Login to your Account</h2>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="you@example.com"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={setPassword}
+                  placeholder="••••••••"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <ButtonTextStagger
+                text="Login"
+                type="submit"
+                className="w-full justify-center"
+              />
+            </form>
+            <p className="text-center text-sm text-foreground">
+              Don't have an account?{" "}
+              <Link href="/signup" className="text-primary-cta hover:underline">
+                Sign up
+              </Link>
+            </p>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            columns={[
+              {
+                items: [
+                  { label: "Home", href: "#hero" },
+                  { label: "About Us", href: "#about" },
+                  { label: "Collections", href: "#products" },
+                  { label: "Membership", href: "#pricing" },
+                ],
+              },
+              {
+                items: [
+                  { label: "Contact", href: "#contact" },
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Login", href: "/login" },
+                  { label: "Signup", href: "/signup" },
+                  { label: "Order History", href: "/order-history" },
+                  { label: "Account", href: "/account" },
+                ],
+              },
+              {
+                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Shipping & Returns", href: "#" },
+                ],
+              },
+            ]}
+            logoText="Elegance Atelier"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}