Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9014a10016 | |||
| 1af59b64f3 | |||
| ac3aa754ed | |||
| 01e9b3b5cb | |||
| 08bbb6784b | |||
| 536177d25f | |||
| acd535c51d | |||
| 4c5d192dce | |||
| bb51781319 |
177
src/app/customers/page.tsx
Normal file
177
src/app/customers/page.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Input from '@/components/form/Input';
|
||||
import React from 'react';
|
||||
|
||||
export default function CustomerManagementPage() {
|
||||
const [customerName, setCustomerName] = React.useState("");
|
||||
const [customerEmail, setCustomerEmail] = React.useState("");
|
||||
|
||||
const handleAddCustomer = () => {
|
||||
console.log("Add customer:", { customerName, customerEmail });
|
||||
// Placeholder for API call or state update
|
||||
setCustomerName("");
|
||||
setCustomerEmail("");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Customers", id: "/customers"},
|
||||
{
|
||||
name: "Products", id: "/products"},
|
||||
{
|
||||
name: "Features", id: "/#features"},
|
||||
{
|
||||
name: "About Us", id: "/#about"},
|
||||
{
|
||||
name: "Contact", id: "/#contact"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
brandName="OrderDesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen py-24 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl font-light text-foreground mb-6">Customer Management</h1>
|
||||
<p className="text-lg text-foreground/80 mb-12">Manage your customer accounts, view order history, and update customer details.</p>
|
||||
|
||||
{/* Customer List Section */}
|
||||
<section className="bg-card p-8 rounded-lg shadow-lg mb-12">
|
||||
<h2 className="text-2xl font-light text-foreground mb-6">Customer List</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-foreground/80">
|
||||
<thead>
|
||||
<tr className="border-b border-foreground/20">
|
||||
<th className="py-3 px-4 text-left font-normal">Name</th>
|
||||
<th className="py-3 px-4 text-left font-normal">Email</th>
|
||||
<th className="py-3 px-4 text-left font-normal">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-foreground/10">
|
||||
<td className="py-3 px-4">John Doe</td>
|
||||
<td className="py-3 px-4">john.doe@example.com</td>
|
||||
<td className="py-3 px-4">
|
||||
<button className="text-primary-cta hover:underline mr-4">View</button>
|
||||
<button className="text-primary-cta hover:underline">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-foreground/10">
|
||||
<td className="py-3 px-4">Jane Smith</td>
|
||||
<td className="py-3 px-4">jane.smith@example.com</td>
|
||||
<td className="py-3 px-4">
|
||||
<button className="text-primary-cta hover:underline mr-4">View</button>
|
||||
<button className="text-primary-cta hover:underline">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Add New Customer Section */}
|
||||
<section className="bg-card p-8 rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-light text-foreground mb-6">Add New Customer</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="customerName" className="block text-foreground/80 text-sm font-medium mb-2">Customer Name</label>
|
||||
<Input
|
||||
value={customerName}
|
||||
onChange={setCustomerName}
|
||||
placeholder="Enter customer name"
|
||||
ariaLabel="Customer Name"
|
||||
className="w-full p-2 border border-foreground/20 rounded-md bg-transparent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="customerEmail" className="block text-foreground/80 text-sm font-medium mb-2">Customer Email</label>
|
||||
<Input
|
||||
value={customerEmail}
|
||||
onChange={setCustomerEmail}
|
||||
type="email"
|
||||
placeholder="Enter customer email"
|
||||
ariaLabel="Customer Email"
|
||||
className="w-full p-2 border border-foreground/20 rounded-md bg-transparent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddCustomer}
|
||||
className="mt-8 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-md hover:bg-primary-cta/90 transition-colors"
|
||||
>
|
||||
Add Customer
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
logoText="OrderDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "/"},
|
||||
{
|
||||
label: "Customers", href: "/customers"},
|
||||
{
|
||||
label: "Products", href: "/products"},
|
||||
{
|
||||
label: "Features", href: "/#features"},
|
||||
{
|
||||
label: "About Us", href: "/#about"},
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Support", href: "/#contact"},
|
||||
{
|
||||
label: "Sales Inquiry", href: "/#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Sri Nagalakshmi Enterprises. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
147
src/app/login/page.tsx
Normal file
147
src/app/login/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Input from '@/components/form/Input';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Login attempt:', { email, password });
|
||||
// Placeholder for authentication logic
|
||||
alert('Login functionality is a placeholder.');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "About Us", id: "#about"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{
|
||||
name: "Login", id: "/login"},
|
||||
{
|
||||
name: "Signup", id: "/signup"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
brandName="OrderDesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
|
||||
Login to your account
|
||||
</h2>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
id="email-address"
|
||||
type="email"
|
||||
required
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={setPassword}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
logoText="OrderDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Login", href: "/login"},
|
||||
{
|
||||
label: "Signup", href: "/signup"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Support", href: "#contact"},
|
||||
{
|
||||
label: "Sales Inquiry", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Sri Nagalakshmi Enterprises. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
334
src/app/page.tsx
334
src/app/page.tsx
@@ -34,21 +34,15 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About Us", id: "#about"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Order Items", id: "/order-items"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
@@ -60,63 +54,33 @@ export default function LandingPage() {
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
variant: "animated-grid"}}
|
||||
imagePosition="right"
|
||||
title="Streamline Your Wholesale Orders with OrderDesk"
|
||||
description="OrderDesk is a powerful, desktop-friendly Order Management System optimized for distributors, simplifying daily order entry, product management, and customer tracking for Sri Nagalakshmi Enterprises."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Priya Sharma",
|
||||
handle: "@priya_logistics",
|
||||
testimonial: "OrderDesk has transformed our daily order processing. It's incredibly fast and reduces manual errors significantly. A game-changer for our distribution business!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12778.jpg",
|
||||
imageAlt: "Priya Sharma",
|
||||
},
|
||||
name: "Priya Sharma", handle: "@priya_logistics", testimonial: "OrderDesk has transformed our daily order processing. It's incredibly fast and reduces manual errors significantly. A game-changer for our distribution business!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12778.jpg", imageAlt: "Priya Sharma"},
|
||||
{
|
||||
name: "Rajesh Kumar",
|
||||
handle: "@rajesh_ops",
|
||||
testimonial: "The product and customer suggestions save us so much time. We can process orders faster than ever before. Real-time tracking is a huge plus.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-warehouse-working_23-2148886873.jpg",
|
||||
imageAlt: "Rajesh Kumar",
|
||||
},
|
||||
name: "Rajesh Kumar", handle: "@rajesh_ops", testimonial: "The product and customer suggestions save us so much time. We can process orders faster than ever before. Real-time tracking is a huge plus.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-warehouse-working_23-2148886873.jpg", imageAlt: "Rajesh Kumar"},
|
||||
{
|
||||
name: "Ananya Singh",
|
||||
handle: "@ananya_admin",
|
||||
testimonial: "As an administrator, the simple and intuitive interface of OrderDesk makes my job much easier. Data entry is a breeze, and I love the robust reporting.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg",
|
||||
imageAlt: "Ananya Singh",
|
||||
},
|
||||
name: "Ananya Singh", handle: "@ananya_admin", testimonial: "As an administrator, the simple and intuitive interface of OrderDesk makes my job much easier. Data entry is a breeze, and I love the robust reporting.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg", imageAlt: "Ananya Singh"},
|
||||
{
|
||||
name: "Vikram Patel",
|
||||
handle: "@vikram_supply",
|
||||
testimonial: "The automatic archiving and CSV export features are invaluable for our record-keeping and analysis. OrderDesk keeps our operations smooth and compliant.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/angry-man-with-crossed-arms_1187-3142.jpg",
|
||||
imageAlt: "Vikram Patel",
|
||||
},
|
||||
name: "Vikram Patel", handle: "@vikram_supply", testimonial: "The automatic archiving and CSV export features are invaluable for our record-keeping and analysis. OrderDesk keeps our operations smooth and compliant.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/angry-man-with-crossed-arms_1187-3142.jpg", imageAlt: "Vikram Patel"},
|
||||
{
|
||||
name: "Sneha Reddy",
|
||||
handle: "@sneha_bizdev",
|
||||
testimonial: "Duplicating orders is a lifesaver for repeat customers. It's truly optimized for speed and efficiency, exactly what a distributor needs.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-businesswoman-cafe_1157-15025.jpg",
|
||||
imageAlt: "Sneha Reddy",
|
||||
},
|
||||
name: "Sneha Reddy", handle: "@sneha_bizdev", testimonial: "Duplicating orders is a lifesaver for repeat customers. It's truly optimized for speed and efficiency, exactly what a distributor needs.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-businesswoman-cafe_1157-15025.jpg", imageAlt: "Sneha Reddy"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Demo",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Request Demo", href: "#contact"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Learn More", href: "#features"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/office-worker-setting-project-reminders_482257-119416.jpg"
|
||||
imageAlt="OrderDesk Dashboard Interface"
|
||||
@@ -124,52 +88,30 @@ export default function LandingPage() {
|
||||
fixedMediaHeight={true}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Order Entry",
|
||||
},
|
||||
type: "text", text: "Fast Order Entry"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Product Management",
|
||||
},
|
||||
type: "text", text: "Product Management"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Customer Suggestions",
|
||||
},
|
||||
type: "text", text: "Customer Suggestions"},
|
||||
{
|
||||
type: "text",
|
||||
text: "CSV Export",
|
||||
},
|
||||
type: "text", text: "CSV Export"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Tracking",
|
||||
},
|
||||
type: "text", text: "Real-time Tracking"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Automated Archiving",
|
||||
},
|
||||
type: "text", text: "Automated Archiving"},
|
||||
]}
|
||||
showMarqueeCard={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202433.jpg",
|
||||
alt: "Business user avatar",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202433.jpg", alt: "Business user avatar"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg",
|
||||
alt: "Operations manager avatar",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg", alt: "Operations manager avatar"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-hard-work_181624-33428.jpg",
|
||||
alt: "Supply chain specialist avatar",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-hard-work_181624-33428.jpg", alt: "Supply chain specialist avatar"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12853.jpg",
|
||||
alt: "Logistics coordinator avatar",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12853.jpg", alt: "Logistics coordinator avatar"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-using-tablet_181624-27455.jpg",
|
||||
alt: "Distribution executive avatar",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-using-tablet_181624-27455.jpg", alt: "Distribution executive avatar"},
|
||||
]}
|
||||
avatarText="Join 50+ satisfied distributors"
|
||||
/>
|
||||
@@ -182,17 +124,11 @@ export default function LandingPage() {
|
||||
description="For over a decade, Sri Nagalakshmi Enterprises has been a leading wholesale distributor, processing 40-50 orders daily. OrderDesk was meticulously developed to bring unparalleled efficiency and precision to this demanding workflow, empowering our team with smart tools and a seamless user experience."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years in Distribution",
|
||||
},
|
||||
value: "10+", title: "Years in Distribution"},
|
||||
{
|
||||
value: "50+",
|
||||
title: "Orders Processed Daily",
|
||||
},
|
||||
value: "50+", title: "Orders Processed Daily"},
|
||||
{
|
||||
value: "99%",
|
||||
title: "Order Accuracy",
|
||||
},
|
||||
value: "99%", title: "Order Accuracy"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-owner-working-home-office-packaging_1150-11527.jpg"
|
||||
imageAlt="Sri Nagalakshmi Enterprises Office"
|
||||
@@ -207,29 +143,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
tag: "Efficiency",
|
||||
title: "Lightning-Fast Order Entry",
|
||||
subtitle: "Desktop-optimized interface for quick and accurate manual order processing.",
|
||||
description: "Our intuitive design minimizes clicks and keystrokes, allowing office staff to enter 40-50 orders daily with speed and precision, drastically reducing processing time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/illustration-space-ship_53876-5577.jpg",
|
||||
imageAlt: "Speed and efficiency icon",
|
||||
},
|
||||
tag: "Efficiency", title: "Lightning-Fast Order Entry", subtitle: "Desktop-optimized interface for quick and accurate manual order processing.", description: "Our intuitive design minimizes clicks and keystrokes, allowing office staff to enter 40-50 orders daily with speed and precision, drastically reducing processing time.", imageSrc: "http://img.b2bpic.net/free-vector/illustration-space-ship_53876-5577.jpg", imageAlt: "Speed and efficiency icon"},
|
||||
{
|
||||
tag: "Intelligence",
|
||||
title: "Smart Customer & Product Suggestions",
|
||||
subtitle: "Autocomplete powered by historical data for rapid entry and fewer errors.",
|
||||
description: "OrderDesk intelligently suggests customer names and products based on previous orders, streamlining the entry process and enhancing accuracy by preventing common data input mistakes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/search-engine-optimization-searching-web-page-concept_53876-120862.jpg",
|
||||
imageAlt: "Smart suggestions icon",
|
||||
},
|
||||
tag: "Intelligence", title: "Smart Customer & Product Suggestions", subtitle: "Autocomplete powered by historical data for rapid entry and fewer errors.", description: "OrderDesk intelligently suggests customer names and products based on previous orders, streamlining the entry process and enhancing accuracy by preventing common data input mistakes.", imageSrc: "http://img.b2bpic.net/free-photo/search-engine-optimization-searching-web-page-concept_53876-120862.jpg", imageAlt: "Smart suggestions icon"},
|
||||
{
|
||||
tag: "Visibility",
|
||||
title: "Real-time Order Tracking & Management",
|
||||
subtitle: "Monitor orders through all delivery stages with live updates and actionable insights.",
|
||||
description: "Track orders from 'Pending' to 'Delivered' or 'Cancelled' in real-time. Gain complete visibility into your active orders, enabling proactive management and informed decision-making.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/25-product-management-flat-color-icon-pack_1142-24599.jpg",
|
||||
imageAlt: "Real-time tracking icon",
|
||||
},
|
||||
tag: "Visibility", title: "Real-time Order Tracking & Management", subtitle: "Monitor orders through all delivery stages with live updates and actionable insights.", description: "Track orders from 'Pending' to 'Delivered' or 'Cancelled' in real-time. Gain complete visibility into your active orders, enabling proactive management and informed decision-making.", imageSrc: "http://img.b2bpic.net/free-vector/25-product-management-flat-color-icon-pack_1142-24599.jpg", imageAlt: "Real-time tracking icon"},
|
||||
]}
|
||||
title="Key Features Designed for Wholesale Distributors"
|
||||
description="OrderDesk delivers a comprehensive suite of tools to manage your entire order lifecycle, from initial entry to automatic archiving, ensuring speed, accuracy, and operational excellence."
|
||||
@@ -244,53 +162,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "dashboard-module",
|
||||
name: "Dashboard Overview",
|
||||
price: "Daily Summary",
|
||||
variant: "Insights",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/web-data-analysis-summary-vector-illustration-set-collection_53876-34711.jpg",
|
||||
imageAlt: "Dashboard Icon",
|
||||
},
|
||||
id: "dashboard-module", name: "Dashboard Overview", price: "Daily Summary", variant: "Insights", imageSrc: "http://img.b2bpic.net/free-vector/web-data-analysis-summary-vector-illustration-set-collection_53876-34711.jpg", imageAlt: "Dashboard Icon"},
|
||||
{
|
||||
id: "active-orders-module",
|
||||
name: "Active Orders",
|
||||
price: "Real-time",
|
||||
variant: "Management",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/save-front-side-with-white-background_187299-39944.jpg",
|
||||
imageAlt: "Active Orders Icon",
|
||||
},
|
||||
id: "active-orders-module", name: "Active Orders", price: "Real-time", variant: "Management", imageSrc: "http://img.b2bpic.net/free-photo/save-front-side-with-white-background_187299-39944.jpg", imageAlt: "Active Orders Icon"},
|
||||
{
|
||||
id: "archive-module",
|
||||
name: "Order Archive",
|
||||
price: "Historical",
|
||||
variant: "Records",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/creative-multimedia-25-flat-icon-pack-such-as-download-cloud-folder-upload-cloud_1142-21672.jpg",
|
||||
imageAlt: "Archive Icon",
|
||||
},
|
||||
id: "archive-module", name: "Order Archive", price: "Historical", variant: "Records", imageSrc: "http://img.b2bpic.net/free-vector/creative-multimedia-25-flat-icon-pack-such-as-download-cloud-folder-upload-cloud_1142-21672.jpg", imageAlt: "Archive Icon"},
|
||||
{
|
||||
id: "products-master-module",
|
||||
name: "Products Master",
|
||||
price: "Inventory",
|
||||
variant: "Management",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalistic-technology-annual-report_23-2149108026.jpg",
|
||||
imageAlt: "Products Master Icon",
|
||||
},
|
||||
id: "products-master-module", name: "Products Master", price: "Inventory", variant: "Management", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalistic-technology-annual-report_23-2149108026.jpg", imageAlt: "Products Master Icon"},
|
||||
{
|
||||
id: "order-entry-module",
|
||||
name: "Order Entry",
|
||||
price: "Fast",
|
||||
variant: "Processing",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/startup-concept_23-2147505114.jpg",
|
||||
imageAlt: "Order Entry Icon",
|
||||
},
|
||||
id: "order-entry-module", name: "Order Entry", price: "Fast", variant: "Processing", imageSrc: "http://img.b2bpic.net/free-vector/startup-concept_23-2147505114.jpg", imageAlt: "Order Entry Icon"},
|
||||
{
|
||||
id: "settings-module",
|
||||
name: "System Settings",
|
||||
price: "Admin",
|
||||
variant: "Configuration",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fire-alarm-switch_1339-1888.jpg",
|
||||
imageAlt: "Settings Icon",
|
||||
},
|
||||
id: "settings-module", name: "System Settings", price: "Admin", variant: "Configuration", imageSrc: "http://img.b2bpic.net/free-photo/fire-alarm-switch_1339-1888.jpg", imageAlt: "Settings Icon"},
|
||||
]}
|
||||
title="Core Modules of OrderDesk"
|
||||
description="Explore the powerful sections that make OrderDesk the comprehensive and intuitive solution for wholesale order management, designed for a fast and efficient workflow."
|
||||
@@ -304,29 +186,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "orders-daily",
|
||||
icon: Package,
|
||||
title: "Orders Daily",
|
||||
value: "50+",
|
||||
},
|
||||
id: "orders-daily", icon: Package,
|
||||
title: "Orders Daily", value: "50+"},
|
||||
{
|
||||
id: "accuracy",
|
||||
icon: CheckCircle,
|
||||
title: "Accuracy Rate",
|
||||
value: "99%",
|
||||
},
|
||||
id: "accuracy", icon: CheckCircle,
|
||||
title: "Accuracy Rate", value: "99%"},
|
||||
{
|
||||
id: "availability",
|
||||
icon: Clock,
|
||||
title: "System Availability",
|
||||
value: "24/7",
|
||||
},
|
||||
id: "availability", icon: Clock,
|
||||
title: "System Availability", value: "24/7"},
|
||||
{
|
||||
id: "archive-policy",
|
||||
icon: Archive,
|
||||
title: "Auto Archive",
|
||||
value: "5 Days",
|
||||
},
|
||||
id: "archive-policy", icon: Archive,
|
||||
title: "Auto Archive", value: "5 Days"},
|
||||
]}
|
||||
title="Driving Efficiency, One Order at a Time"
|
||||
description="See how OrderDesk helps streamline operations, reduce errors, and boost productivity for wholesale distributors, leading to a more reliable and efficient business."
|
||||
@@ -338,14 +208,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Microsoft",
|
||||
"Google",
|
||||
"Apple",
|
||||
"Amazon",
|
||||
"IBM",
|
||||
"HP",
|
||||
"Dell",
|
||||
]}
|
||||
"Microsoft", "Google", "Apple", "Amazon", "IBM", "HP", "Dell"]}
|
||||
title="Trusted by Leading Distributors"
|
||||
description="OrderDesk is built to meet the rigorous demands of modern wholesale and distribution businesses, ensuring reliable performance and seamless integration into complex supply chains."
|
||||
showCard={true}
|
||||
@@ -360,25 +223,15 @@ export default function LandingPage() {
|
||||
author="Prabha K., Operations Director"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/best-employees-rating_74855-4367.jpg",
|
||||
alt: "Female business avatar digital",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-vector/best-employees-rating_74855-4367.jpg", alt: "Female business avatar digital"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/businessmen-avatars-pack_23-2147535419.jpg",
|
||||
alt: "Male business avatar digital",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-vector/businessmen-avatars-pack_23-2147535419.jpg", alt: "Male business avatar digital"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-texting-her-phone-with-chat-bubbles_23-2151989422.jpg",
|
||||
alt: "Non-binary business avatar digital",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/woman-texting-her-phone-with-chat-bubbles_23-2151989422.jpg", alt: "Non-binary business avatar digital"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-elegant-mature-male-browsing-tablet_23-2148673425.jpg",
|
||||
alt: "Senior business avatar digital",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-elegant-mature-male-browsing-tablet_23-2148673425.jpg", alt: "Senior business avatar digital"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12782.jpg",
|
||||
alt: "Businesswoman working in warehouse",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12782.jpg", alt: "Businesswoman working in warehouse"},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -391,20 +244,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "What is OrderDesk designed for?",
|
||||
content: "OrderDesk is a desktop-first Order Management System specifically designed for wholesale/distributor businesses to streamline daily order entry, product management, and customer tracking with speed and accuracy.",
|
||||
},
|
||||
id: "faq1", title: "What is OrderDesk designed for?", content: "OrderDesk is a desktop-first Order Management System specifically designed for wholesale/distributor businesses to streamline daily order entry, product management, and customer tracking with speed and accuracy."},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "How does product and customer suggestion work?",
|
||||
content: "The system intelligently suggests customer names and product details based on your historical order data. As you type, an autocomplete dropdown appears, allowing for fast, accurate selections and reducing manual input errors.",
|
||||
},
|
||||
id: "faq2", title: "How does product and customer suggestion work?", content: "The system intelligently suggests customer names and product details based on your historical order data. As you type, an autocomplete dropdown appears, allowing for fast, accurate selections and reducing manual input errors."},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Can I export my order data?",
|
||||
content: "Yes, OrderDesk provides a robust CSV export feature. You can easily export active or archived order data in a clear, product-per-row format for reporting and analysis.",
|
||||
},
|
||||
id: "faq3", title: "Can I export my order data?", content: "Yes, OrderDesk provides a robust CSV export feature. You can easily export active or archived order data in a clear, product-per-row format for reporting and analysis."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find quick answers to common questions about OrderDesk's features, setup, and how it can benefit your wholesale distribution operations."
|
||||
@@ -419,27 +263,16 @@ export default function LandingPage() {
|
||||
description="Have questions or want to schedule a personalized demo? Reach out to our team and discover how OrderDesk can revolutionize your wholesale distribution operations with speed and precision."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Phone Number (Optional)",
|
||||
},
|
||||
name: "phone", type: "tel", placeholder: "Phone Number (Optional)"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Your Message", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/concentrated-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-writing-with-pen-clipboard-isolated-white_141793-76602.jpg"
|
||||
@@ -456,50 +289,31 @@ export default function LandingPage() {
|
||||
logoText="OrderDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Support",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Support", href: "#contact"},
|
||||
{
|
||||
label: "Sales Inquiry",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Sales Inquiry", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
178
src/app/products/page.tsx
Normal file
178
src/app/products/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Input from '@/components/form/Input';
|
||||
import React from 'react';
|
||||
|
||||
export default function ProductMasterPage() {
|
||||
const [productName, setProductName] = React.useState("");
|
||||
const [productPrice, setProductPrice] = React.useState("");
|
||||
const [productCategory, setProductCategory] = React.useState("");
|
||||
|
||||
const handleAddProduct = () => {
|
||||
console.log("Add product:", { productName, productPrice, productCategory });
|
||||
// Placeholder for API call or state update
|
||||
setProductName("");
|
||||
setProductPrice("");
|
||||
setProductCategory("");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Customers", id: "/customers"},
|
||||
{
|
||||
name: "Products", id: "/products"},
|
||||
{
|
||||
name: "Features", id: "/#features"},
|
||||
{
|
||||
name: "About Us", id: "/#about"},
|
||||
{
|
||||
name: "Contact", id: "/#contact"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
brandName="OrderDesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen py-24 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl font-light text-foreground mb-6">Product Master</h1>
|
||||
<p className="text-lg text-foreground/80 mb-12">Manage your product catalog, update inventory, and categorize products.</p>
|
||||
|
||||
{/* Product Catalog Section */}
|
||||
<section className="bg-card p-8 rounded-lg shadow-lg mb-12">
|
||||
<h2 className="text-2xl font-light text-foreground mb-6">Product Catalog</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{/* Placeholder Product Card 1 */}
|
||||
<div className="border border-foreground/20 rounded-lg p-4 flex flex-col items-center text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/product-placeholder.png" alt="Product 1" className="w-24 h-24 object-contain mb-4" />
|
||||
<h3 className="text-xl font-normal text-foreground mb-2">Product A</h3>
|
||||
<p className="text-foreground/70 mb-2">Category: Electronics</p>
|
||||
<p className="text-primary-cta font-semibold">$199.99</p>
|
||||
<button className="mt-4 px-4 py-2 bg-secondary-cta text-secondary-cta-foreground rounded-md hover:bg-secondary-cta/90 transition-colors">Edit</button>
|
||||
</div>
|
||||
{/* Placeholder Product Card 2 */}
|
||||
<div className="border border-foreground/20 rounded-lg p-4 flex flex-col items-center text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/product-placeholder.png" alt="Product 2" className="w-24 h-24 object-contain mb-4" />
|
||||
<h3 className="text-xl font-normal text-foreground mb-2">Product B</h3>
|
||||
<p className="text-foreground/70 mb-2">Category: Home Goods</p>
|
||||
<p className="text-primary-cta font-semibold">$29.50</p>
|
||||
<button className="mt-4 px-4 py-2 bg-secondary-cta text-secondary-cta-foreground rounded-md hover:bg-secondary-cta/90 transition-colors">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Add New Product Section */}
|
||||
<section className="bg-card p-8 rounded-lg shadow-lg">
|
||||
<h2 className="text-2xl font-light text-foreground mb-6">Add New Product</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label htmlFor="productName" className="block text-foreground/80 text-sm font-medium mb-2">Product Name</label>
|
||||
<Input
|
||||
value={productName}
|
||||
onChange={setProductName}
|
||||
placeholder="Enter product name"
|
||||
ariaLabel="Product Name"
|
||||
className="w-full p-2 border border-foreground/20 rounded-md bg-transparent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="productPrice" className="block text-foreground/80 text-sm font-medium mb-2">Price</label>
|
||||
<Input
|
||||
value={productPrice}
|
||||
onChange={setProductPrice}
|
||||
type="number"
|
||||
placeholder="Enter price"
|
||||
ariaLabel="Product Price"
|
||||
className="w-full p-2 border border-foreground/20 rounded-md bg-transparent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="productCategory" className="block text-foreground/80 text-sm font-medium mb-2">Category</label>
|
||||
<Input
|
||||
value={productCategory}
|
||||
onChange={setProductCategory}
|
||||
placeholder="Enter category"
|
||||
ariaLabel="Product Category"
|
||||
className="w-full p-2 border border-foreground/20 rounded-md bg-transparent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddProduct}
|
||||
className="mt-8 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-md hover:bg-primary-cta/90 transition-colors"
|
||||
>
|
||||
Add Product
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
logoText="OrderDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "/"},
|
||||
{
|
||||
label: "Customers", href: "/customers"},
|
||||
{
|
||||
label: "Products", href: "/products"},
|
||||
{
|
||||
label: "Features", href: "/#features"},
|
||||
{
|
||||
label: "About Us", href: "/#about"},
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Support", href: "/#contact"},
|
||||
{
|
||||
label: "Sales Inquiry", href: "/#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Sri Nagalakshmi Enterprises. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
163
src/app/signup/page.tsx
Normal file
163
src/app/signup/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Input from '@/components/form/Input';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function SignupPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
alert('Passwords do not match!');
|
||||
return;
|
||||
}
|
||||
console.log('Signup attempt:', { email, password });
|
||||
// Placeholder for authentication logic
|
||||
alert('Signup functionality is a placeholder.');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "About Us", id: "#about"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{
|
||||
name: "Login", id: "/login"},
|
||||
{
|
||||
name: "Signup", id: "/signup"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
brandName="OrderDesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
|
||||
Create your account
|
||||
</h2>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
id="email-address"
|
||||
type="email"
|
||||
required
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={setPassword}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Confirm Password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnH9uZRBxKBYLUqaGzp50zBKy5/uploaded-1780807514136-3ys7dtth.png"
|
||||
logoAlt="Sri Nagalakshmi Enterprises Logo"
|
||||
logoText="OrderDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Login", href: "/login"},
|
||||
{
|
||||
label: "Signup", href: "/signup"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Support", href: "#contact"},
|
||||
{
|
||||
label: "Sales Inquiry", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Sri Nagalakshmi Enterprises. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user