Add src/app/login/page.tsx

2026-06-04 05:58:40 +00:00
parent 8a5efdd3b4
commit 8902c5d4e1
1 changed files with 131 additions and 0 deletions
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import Input from '@/components/form/Input';
+import ButtonIconArrow from '@/components/button/ButtonIconArrow';
+import Link from 'next/link';
+import { useState } from 'react';
+
+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 });
+    // Add actual login logic here
+  };
+
+  const commonNavItems = [
+    {
+      name: "Home",      id: "/"
+    },
+    {
+      name: "About Us",      id: "#about"
+    },
+    {
+      name: "Collections",      id: "#features"
+    },
+    {
+      name: "Shop",      id: "#products"
+    },
+    {
+      name: "Testimonials",      id: "#testimonials"
+    },
+    {
+      name: "FAQ",      id: "#faq"
+    },
+    {
+      name: "Blog",      id: "#blog"
+    },
+    {
+      name: "Contact",      id: "#contact"
+    },
+    {
+      name: "Login",      id: "/login"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="mediumSizeLargeTitles"
+        background="aurora"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={commonNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/illustration-boutique-shop-logo-stamp-banner_53876-6837.jpg"
+            logoAlt="Elegance Attire Logo"
+            brandName="Elegance Attire"
+          />
+        </div>
+
+        <div className="flex min-h-[calc(100vh-var(--height-navbar))]">
+          {/* Left side: Fashion model image */}
+          <div className="relative hidden w-1/2 flex-shrink-0 lg:flex items-center justify-center bg-[var(--background-accent)] p-6">
+            <img
+              src="http://img.b2bpic.net/free-photo/side-view-beautiful-woman-pink-background_23-2148784869.jpg"
+              alt="Fashion model"
+              className="max-h-full max-w-full object-contain rounded-lg shadow-lg"
+            />
+          </div>
+
+          {/* Right side: Login form */}
+          <div className="flex flex-grow items-center justify-center p-4 sm:p-6 lg:p-12 bg-[var(--background)]">
+            <div className="w-full max-w-md p-8 space-y-6 rounded-lg shadow-xl bg-[var(--card)] text-[var(--foreground)]">
+              <h2 className="text-3xl font-bold text-center">Login to Your Account</h2>
+              <form onSubmit={handleLogin} className="space-y-6">
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-[var(--foreground)]">Email</label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="you@example.com"
+                    value={email}
+                    onChange={setEmail}
+                    required
+                    className="mt-1 block w-full rounded-md shadow-sm border-gray-300 bg-[var(--background)] text-[var(--foreground)] focus:ring-[var(--primary-cta)] focus:border-[var(--primary-cta)]"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-[var(--foreground)]">Password</label>
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={setPassword}
+                    required
+                    className="mt-1 block w-full rounded-md shadow-sm border-gray-300 bg-[var(--background)] text-[var(--foreground)] focus:ring-[var(--primary-cta)] focus:border-[var(--primary-cta)]"
+                  />
+                </div>
+                <ButtonIconArrow
+                  text="Login"
+                  type="submit"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-opacity-90"
+                  textClassName="!text-[var(--primary-cta-text)]"
+                />
+                <div className="text-center text-sm mt-4">
+                  <Link href="/forgot-password" className="font-medium text-[var(--secondary-cta)] hover:underline">
+                    Forgot password?
+                  </Link>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}