Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5310743d50 | |||
| 058df6185e | |||
| aa0cadd42b | |||
| fa5f95042c | |||
| 39be8217e9 | |||
| d7bb20ce97 | |||
| ec5be20cf3 |
335
src/app/admin/products/edit/page.tsx
Normal file
335
src/app/admin/products/edit/page.tsx
Normal file
@@ -0,0 +1,335 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
|
import { ArrowLeft, Save, X } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
interface ProductFormData {
|
||||||
|
id: string;
|
||||||
|
brand: string;
|
||||||
|
name: string;
|
||||||
|
price: string;
|
||||||
|
rating: number;
|
||||||
|
reviewCount: string;
|
||||||
|
imageSrc: string;
|
||||||
|
imageAlt: string;
|
||||||
|
description: string;
|
||||||
|
sku: string;
|
||||||
|
stock: number;
|
||||||
|
category: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialFormData: ProductFormData = {
|
||||||
|
id: "1", brand: "TechVault", name: "Pro Wireless Earbuds", price: "$249.99", rating: 5,
|
||||||
|
reviewCount: "2.8k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png", imageAlt: "Premium wireless earbuds", description: "High-quality wireless earbuds with active noise cancellation and 24-hour battery life", sku: "TWE-PRO-001", stock: 245,
|
||||||
|
category: "Audio"
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function EditProductPage() {
|
||||||
|
const [formData, setFormData] = useState<ProductFormData>(initialFormData);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: name === "rating" || name === "stock" ? parseInt(value) : value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setIsSaving(true);
|
||||||
|
try {
|
||||||
|
// Simulate API call
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
console.log("Product saved:", formData);
|
||||||
|
alert("Product updated successfully!");
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setFormData(initialFormData);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="text-stagger"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="smallMedium"
|
||||||
|
sizing="mediumLargeSizeLargeTitles"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="outline"
|
||||||
|
primaryButtonStyle="primary-glow"
|
||||||
|
secondaryButtonStyle="radial-glow"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
brandName="TechVault"
|
||||||
|
navItems={[
|
||||||
|
{ name: "Shop", id: "products" },
|
||||||
|
{ name: "Features", id: "features" },
|
||||||
|
{ name: "Pricing", id: "pricing" },
|
||||||
|
{ name: "Support", id: "contact" },
|
||||||
|
{ name: "Admin", id: "https://techvault.io/admin" }
|
||||||
|
]}
|
||||||
|
button={{ text: "Back to Home", href: "/" }}
|
||||||
|
className="backdrop-blur-md bg-opacity-80"
|
||||||
|
buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-h-screen bg-background pt-20 pb-20">
|
||||||
|
<div className="max-w-4xl mx-auto px-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<Link href="/" className="inline-flex items-center gap-2 text-primary-cta hover:opacity-80 transition-opacity mb-6">
|
||||||
|
<ArrowLeft size={20} />
|
||||||
|
<span>Back to Home</span>
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-4xl font-bold text-foreground mb-2">Edit Product</h1>
|
||||||
|
<p className="text-foreground/70">Modify product details, pricing, and inventory information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Container */}
|
||||||
|
<div className="bg-card rounded-lg border border-accent/20 p-8 shadow-lg">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{/* Product Image Preview */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="aspect-square rounded-lg overflow-hidden bg-background border border-accent/20 flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={formData.imageSrc}
|
||||||
|
alt={formData.imageAlt}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Image URL</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="imageSrc"
|
||||||
|
value={formData.imageSrc}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Product Details Form */}
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Brand & Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Brand</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="brand"
|
||||||
|
value={formData.brand}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Product Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SKU & Category */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">SKU</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="sku"
|
||||||
|
value={formData.sku}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Category</label>
|
||||||
|
<select
|
||||||
|
name="category"
|
||||||
|
value={formData.category}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
>
|
||||||
|
<option>Audio</option>
|
||||||
|
<option>Wearables</option>
|
||||||
|
<option>Chargers</option>
|
||||||
|
<option>Accessories</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pricing & Inventory Section */}
|
||||||
|
<div className="mt-8 pt-8 border-t border-accent/20">
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-6">Pricing & Inventory</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Price</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="price"
|
||||||
|
value={formData.price}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
placeholder="$0.00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Stock Quantity</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="stock"
|
||||||
|
value={formData.stock}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Rating</label>
|
||||||
|
<select
|
||||||
|
name="rating"
|
||||||
|
value={formData.rating}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
>
|
||||||
|
<option value="1">1 Star</option>
|
||||||
|
<option value="2">2 Stars</option>
|
||||||
|
<option value="3">3 Stars</option>
|
||||||
|
<option value="4">4 Stars</option>
|
||||||
|
<option value="5">5 Stars</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description & Review Count */}
|
||||||
|
<div className="mt-8 pt-8 border-t border-accent/20">
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-6">Additional Details</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Review Count</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="reviewCount"
|
||||||
|
value={formData.reviewCount}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
placeholder="e.g., 2.8k"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Image Alt Text</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="imageAlt"
|
||||||
|
value={formData.imageAlt}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<label className="block text-sm font-semibold text-foreground mb-2">Product Description</label>
|
||||||
|
<textarea
|
||||||
|
name="description"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
|
||||||
|
placeholder="Enter product description..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="mt-8 pt-8 border-t border-accent/20 flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={isSaving}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 bg-primary-cta hover:bg-primary-cta/90 disabled:opacity-50 text-foreground font-semibold py-3 px-6 rounded-lg transition-all"
|
||||||
|
>
|
||||||
|
<Save size={20} />
|
||||||
|
{isSaving ? "Saving..." : "Save Changes"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleReset}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 border border-accent/20 hover:bg-background/50 text-foreground font-semibold py-3 px-6 rounded-lg transition-all"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
Reset Form
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info Section */}
|
||||||
|
<div className="mt-8 bg-background-accent/30 border border-accent/20 rounded-lg p-6">
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">💡 Tip</h3>
|
||||||
|
<p className="text-foreground/70 text-sm">
|
||||||
|
Changes to product details, pricing, and inventory are saved immediately and reflected across all sales channels. Product images update within 5 minutes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/abstract-dark-tech-background-with-flowi-1773085532519-883f666b.png"
|
||||||
|
imageAlt="Tech abstract background"
|
||||||
|
logoText="TechVault"
|
||||||
|
copyrightText="© 2025 TechVault | Powering Tech E-Commerce"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: "Product", items: [
|
||||||
|
{ label: "Features", href: "#features" },
|
||||||
|
{ label: "Pricing", href: "#pricing" },
|
||||||
|
{ label: "Security", href: "#" },
|
||||||
|
{ label: "Updates", href: "#" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company", items: [
|
||||||
|
{ label: "About", href: "#" },
|
||||||
|
{ label: "Blog", href: "#" },
|
||||||
|
{ label: "Careers", href: "#" },
|
||||||
|
{ label: "Contact", href: "#contact" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Legal", items: [
|
||||||
|
{ label: "Privacy Policy", href: "#" },
|
||||||
|
{ label: "Terms of Service", href: "#" },
|
||||||
|
{ label: "Cookie Policy", href: "#" },
|
||||||
|
{ label: "Compliance", href: "#" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
containerClassName="max-w-7xl mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,7 +5,8 @@ import "./globals.css";
|
|||||||
const inter = Inter({ subsets: ["latin"] });
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "TechVault - Premium Tech E-Commerce Platform", description: "Next-generation e-commerce platform for cutting-edge technology with seamless checkout and real-time inventory tracking."};
|
title: "TechVault - Premium Tech E-Commerce Platform", description: "Next-generation e-commerce platform for cutting-edge technology with seamless checkout and real-time inventory tracking."
|
||||||
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@@ -13,7 +14,7 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" suppressHydrationWarning>
|
||||||
<body className={inter.className}>{children}
|
<body className={inter.className}>{children}
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
|
|||||||
120
src/app/page.tsx
120
src/app/page.tsx
@@ -10,7 +10,7 @@ import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|||||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import { Zap, Star, Award, DollarSign, Mail, Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, CreditCard, Lock, CheckCircle, Gauge, Package, Bell, MoreVertical, Smartphone, Globe, Store, Users, HelpCircle } from "lucide-react";
|
import { Zap, Star, Award, DollarSign, Mail, Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, CreditCard, Lock, CheckCircle, Gauge, Package, Bell, MoreVertical, Smartphone, Globe, Store, Users, HelpCircle, AlertCircle, TrendingDown, Activity, Box } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -44,8 +44,8 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardDashboard
|
<HeroBillboardDashboard
|
||||||
title="Next-Gen Tech Commerce"
|
title="Next-Gen Tech Commerce with Inventory Management"
|
||||||
description="Premium e-commerce platform for cutting-edge technology. Seamless checkout, real-time inventory tracking, and elite customer experience."
|
description="Premium e-commerce platform with advanced stock management, real-time inventory tracking, and automated reorder systems. Seamless checkout, intelligent stock alerts, and elite customer experience."
|
||||||
tag="Premium Tech Store"
|
tag="Premium Tech Store"
|
||||||
tagIcon={Zap}
|
tagIcon={Zap}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -56,27 +56,27 @@ export default function LandingPage() {
|
|||||||
buttonAnimation="blur-reveal"
|
buttonAnimation="blur-reveal"
|
||||||
background={{ variant: "plain" }}
|
background={{ variant: "plain" }}
|
||||||
dashboard={{
|
dashboard={{
|
||||||
title: "Real-Time Commerce Hub", logoIcon: Hexagon,
|
title: "Real-Time Inventory Hub", logoIcon: Box,
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1", searchPlaceholder: "Search products...", buttons: [
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1", searchPlaceholder: "Search products or SKU...", buttons: [
|
||||||
{ text: "Dashboard", href: "https://techvault.io/admin" },
|
{ text: "Inventory Dashboard", href: "https://techvault.io/admin" },
|
||||||
{ text: "Export Reports", href: "#" }
|
{ text: "Export Stock Report", href: "#" }
|
||||||
],
|
],
|
||||||
sidebarItems: [
|
sidebarItems: [
|
||||||
{ icon: House, active: true },
|
{ icon: House, active: true },
|
||||||
{ icon: ShoppingCart },
|
{ icon: Box },
|
||||||
{ icon: BarChart3 },
|
{ icon: Activity },
|
||||||
{ icon: Settings }
|
{ icon: Settings }
|
||||||
],
|
],
|
||||||
stats: [
|
stats: [
|
||||||
{ title: "Total Sales", values: [24580, 38920, 52450], valuePrefix: "$", description: "Revenue this month" },
|
{ title: "Total Stock Value", values: [24580, 38920, 52450], valuePrefix: "$", description: "Inventory worth this month" },
|
||||||
{ title: "Orders", values: [125, 189, 234], description: "Active transactions" },
|
{ title: "Stock Levels", values: [125, 189, 234], description: "Active SKUs monitored" },
|
||||||
{ title: "Stock Items", values: [450, 425, 410], description: "Available products" }
|
{ title: "Low Stock Alerts", values: [12, 8, 3], description: "Items needing reorder" }
|
||||||
],
|
],
|
||||||
chartTitle: "Sales Performance", chartData: [{ value: 45 }, { value: 60 }, { value: 75 }, { value: 90 }, { value: 85 }],
|
chartTitle: "Stock Level Trends", chartData: [{ value: 95 }, { value: 88 }, { value: 76 }, { value: 82 }, { value: 91 }],
|
||||||
listTitle: "Recent Transactions", listItems: [
|
listTitle: "Inventory Updates", listItems: [
|
||||||
{ icon: CircleDollarSign, title: "$1,250 Premium Headphones", status: "Confirmed" },
|
{ icon: AlertCircle, title: "Stock Alert: Pro Earbuds", status: "Critical" },
|
||||||
{ icon: ShoppingBag, title: "Order #2847 Shipped", status: "In Transit" },
|
{ icon: TrendingDown, title: "Smart Watch - 34 units sold", status: "Updated" },
|
||||||
{ icon: TrendingUp, title: "Stock Alert: Low Inventory", status: "Alert" }
|
{ icon: Package, title: "New shipment received - 500 items", status: "Confirmed" }
|
||||||
]
|
]
|
||||||
}}
|
}}
|
||||||
className="min-h-screen"
|
className="min-h-screen"
|
||||||
@@ -88,8 +88,8 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="products" data-section="products">
|
<div id="products" data-section="products">
|
||||||
<ProductCardTwo
|
<ProductCardTwo
|
||||||
title="Featured Tech Collection"
|
title="Featured Tech Collection with Stock Tracking"
|
||||||
description="Curated selection of premium technology products with verified 5-star ratings from verified customers."
|
description="Curated selection of premium technology products with real-time stock levels, verified ratings, and automated inventory updates. View availability and reserve items instantly."
|
||||||
tag="Top Sellers"
|
tag="Top Sellers"
|
||||||
tagIcon={Star}
|
tagIcon={Star}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -102,15 +102,15 @@ export default function LandingPage() {
|
|||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "1", brand: "TechVault", name: "Pro Wireless Earbuds", price: "$249.99", rating: 5,
|
id: "1", brand: "TechVault", name: "Pro Wireless Earbuds", price: "$249.99", rating: 5,
|
||||||
reviewCount: "2.8k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png", imageAlt: "Premium wireless earbuds"
|
reviewCount: "2.8k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png", imageAlt: "Premium wireless earbuds - Stock: 156 units"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2", brand: "TechVault", name: "Smart Watch Pro", price: "$399.99", rating: 5,
|
id: "2", brand: "TechVault", name: "Smart Watch Pro", price: "$399.99", rating: 5,
|
||||||
reviewCount: "4.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-professional-tech-device-modern-smartp-1773085532582-d0d141fe.png", imageAlt: "Advanced smartwatch device"
|
reviewCount: "4.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-professional-tech-device-modern-smartp-1773085532582-d0d141fe.png", imageAlt: "Advanced smartwatch device - Stock: 89 units"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3", brand: "TechVault", name: "Portable Charger Elite", price: "$129.99", rating: 5,
|
id: "3", brand: "TechVault", name: "Portable Charger Elite", price: "$129.99", rating: 5,
|
||||||
reviewCount: "1.9k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-cutting-edge-tech-accessory-or-wearabl-1773085532779-cc3fe295.png", imageAlt: "High-capacity portable charger"
|
reviewCount: "1.9k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-cutting-edge-tech-accessory-or-wearabl-1773085532779-cc3fe295.png", imageAlt: "High-capacity portable charger - Stock: 342 units"
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
containerClassName="max-w-7xl mx-auto"
|
containerClassName="max-w-7xl mx-auto"
|
||||||
@@ -120,8 +120,8 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureBento
|
<FeatureBento
|
||||||
title="Powerful Commerce Features"
|
title="Powerful Inventory Management Features"
|
||||||
description="Everything you need to run a successful tech e-commerce business with intelligent inventory management and seamless payment processing."
|
description="Everything you need to run a successful tech e-commerce business with intelligent stock management, automated reorder points, supply chain visibility, and real-time stock synchronization across all channels."
|
||||||
tag="Platform Capabilities"
|
tag="Platform Capabilities"
|
||||||
tagIcon={Zap}
|
tagIcon={Zap}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -132,44 +132,44 @@ export default function LandingPage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Real-Time Inventory", description: "Track stock levels instantly across all channels", bentoComponent: "animated-bar-chart"
|
title: "Real-Time Stock Tracking", description: "Monitor inventory levels across all warehouses and channels instantly", bentoComponent: "animated-bar-chart"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Smart Pricing Engine", description: "Automated discount management and promotional campaigns", bentoComponent: "line-chart"
|
title: "Automated Reorder Management", description: "Set minimum stock levels and auto-trigger purchase orders", bentoComponent: "line-chart"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Payment Integration", description: "Stripe and PayPal integration for secure transactions", bentoComponent: "icon-info-cards", items: [
|
title: "Stock Analytics & Insights", description: "Track inventory turnover, forecast demand, and optimize stock allocation", bentoComponent: "icon-info-cards", items: [
|
||||||
{ icon: CreditCard, label: "Payment Methods", value: "12+" },
|
{ icon: Activity, label: "Turnover Rate", value: "8.5x" },
|
||||||
{ icon: Lock, label: "Security Level", value: "SSL" },
|
{ icon: TrendingUp, label: "Forecast", value: "92%" },
|
||||||
{ icon: CheckCircle, label: "Transactions", value: "100%" }
|
{ icon: Box, label: "SKU Count", value: "2,847" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Admin Tasks", description: "Comprehensive sales and customer behavior insights", bentoComponent: "3d-task-list", items: [
|
title: "Inventory Tasks", description: "Manage stock updates, reconciliation, and audits", bentoComponent: "3d-task-list", items: [
|
||||||
{ icon: ShoppingCart, label: "Process Orders", time: "2 min" },
|
{ icon: Package, label: "Count Inventory", time: "2 hrs" },
|
||||||
{ icon: Package, label: "Update Stock", time: "5 min" },
|
{ icon: AlertCircle, label: "Reorder Stock", time: "30 min" },
|
||||||
{ icon: TrendingUp, label: "Review Analytics", time: "10 min" }
|
{ icon: Activity, label: "Audit Records", time: "1 hr" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Multi-Channel Sync", description: "Unified product catalog across platforms", bentoComponent: "orbiting-icons", centerIcon: Globe,
|
title: "Multi-Channel Sync", description: "Unified inventory catalog across all sales channels", bentoComponent: "orbiting-icons", centerIcon: Box,
|
||||||
items: [
|
items: [
|
||||||
{ icon: ShoppingBag, ring: 1 },
|
{ icon: Store, ring: 1 },
|
||||||
{ icon: Store, ring: 2 },
|
{ icon: Globe, ring: 2 },
|
||||||
{ icon: Users, ring: 3 }
|
{ icon: ShoppingBag, ring: 3 }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Admin Dashboard", description: "One-click product and pricing modifications", bentoComponent: "phone", statusIcon: Smartphone,
|
title: "Mobile Inventory App", description: "Update stock levels and check availability on the go", bentoComponent: "phone", statusIcon: Box,
|
||||||
alertIcon: Bell,
|
alertIcon: AlertCircle,
|
||||||
alertTitle: "Stock Alert", alertMessage: "Inventory low for Product ID #247", apps: [
|
alertTitle: "Stock Alert", alertMessage: "Earbuds inventory below threshold", apps: [
|
||||||
{ name: "Dashboard", icon: Gauge },
|
{ name: "Stock Count", icon: Package },
|
||||||
{ name: "Products", icon: Package },
|
{ name: "Locations", icon: Globe },
|
||||||
|
{ name: "Shipments", icon: TrendingUp },
|
||||||
{ name: "Orders", icon: ShoppingCart },
|
{ name: "Orders", icon: ShoppingCart },
|
||||||
{ name: "Analytics", icon: BarChart3 },
|
{ name: "Analytics", icon: Activity },
|
||||||
{ name: "Settings", icon: Settings },
|
{ name: "Alerts", icon: AlertCircle },
|
||||||
{ name: "Wallet", icon: CreditCard },
|
{ name: "Reports", icon: BarChart3 },
|
||||||
{ name: "Support", icon: HelpCircle },
|
|
||||||
{ name: "More", icon: MoreVertical }
|
{ name: "More", icon: MoreVertical }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -180,8 +180,8 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardSeven
|
<MetricCardSeven
|
||||||
title="Proven Business Impact"
|
title="Proven Inventory Impact"
|
||||||
description="Real results from successful tech e-commerce stores using our platform"
|
description="Real results from successful tech e-commerce stores using our advanced stock management platform"
|
||||||
tag="Success Stories"
|
tag="Success Stories"
|
||||||
tagIcon={Award}
|
tagIcon={Award}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -190,16 +190,16 @@ export default function LandingPage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
metrics={[
|
metrics={[
|
||||||
{
|
{
|
||||||
id: "1", value: "45%", title: "Average Revenue Growth", items: ["Within first 90 days", "Optimized checkout flow", "Real-time analytics"]
|
id: "1", value: "68%", title: "Stock Accuracy Improvement", items: ["Reduced shrinkage", "Real-time tracking", "Automated reconciliation"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2", value: "99.9%", title: "Uptime Guarantee", items: ["Reliable infrastructure", "24/7 support team", "Automatic backups"]
|
id: "2", value: "42%", title: "Inventory Cost Reduction", items: ["Optimized stock levels", "Reduced overstock", "Better forecasting"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3", value: "2.3s", title: "Average Page Load", items: ["Optimized performance", "CDN integrated", "Fast checkout"]
|
id: "3", value: "3.2s", title: "Stock Update Latency", items: ["Real-time synchronization", "Instant availability checks", "Live dashboards"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4", value: "$0", title: "Setup Fees", items: ["Transparent pricing", "No hidden costs", "Pay only commissions"]
|
id: "4", value: "99.7%", title: "Order Fulfillment Rate", items: ["Accurate stock data", "Reduced backorders", "Customer satisfaction"]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
containerClassName="max-w-7xl mx-auto"
|
containerClassName="max-w-7xl mx-auto"
|
||||||
@@ -209,7 +209,7 @@ export default function LandingPage() {
|
|||||||
<div id="pricing" data-section="pricing">
|
<div id="pricing" data-section="pricing">
|
||||||
<PricingCardFive
|
<PricingCardFive
|
||||||
title="Transparent Pricing Plans"
|
title="Transparent Pricing Plans"
|
||||||
description="Choose the plan that fits your business needs. All plans include core features with transparent commission rates."
|
description="Choose the plan that fits your business needs. All plans include inventory management with transparent pricing and no hidden fees."
|
||||||
tag="Flexible Options"
|
tag="Flexible Options"
|
||||||
tagIcon={DollarSign}
|
tagIcon={DollarSign}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -219,15 +219,15 @@ export default function LandingPage() {
|
|||||||
plans={[
|
plans={[
|
||||||
{
|
{
|
||||||
id: "starter", tag: "Starter Plan", price: "Free", period: "forever", description: "Perfect for small tech shops getting started.", button: { text: "Get Started", href: "#" },
|
id: "starter", tag: "Starter Plan", price: "Free", period: "forever", description: "Perfect for small tech shops getting started.", button: { text: "Get Started", href: "#" },
|
||||||
featuresTitle: "What's Included:", features: ["Up to 50 products", "Basic analytics", "Email support", "Payment processing", "1 admin account"]
|
featuresTitle: "What's Included:", features: ["Up to 50 products", "Basic inventory tracking", "Email support", "Payment processing", "1 admin account", "Stock alerts"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "professional", tag: "Professional Plan", price: "$49", period: "/month", description: "Ideal for growing tech e-commerce businesses.", button: { text: "Start Free Trial", href: "#" },
|
id: "professional", tag: "Professional Plan", price: "$49", period: "/month", description: "Ideal for growing tech e-commerce businesses.", button: { text: "Start Free Trial", href: "#" },
|
||||||
featuresTitle: "What's Included:", features: ["Unlimited products", "Advanced analytics", "Priority support", "Stripe integration", "5 admin accounts", "Marketing tools", "API access"]
|
featuresTitle: "What's Included:", features: ["Unlimited products", "Advanced inventory management", "Multi-warehouse support", "Priority support", "5 admin accounts", "Automated reorder systems", "API access", "Stock forecasting"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "enterprise", tag: "Enterprise Plan", price: "$199", period: "/month", description: "For large-scale tech retailers with custom needs.", button: { text: "Schedule Demo", href: "#" },
|
id: "enterprise", tag: "Enterprise Plan", price: "$199", period: "/month", description: "For large-scale tech retailers with custom needs.", button: { text: "Schedule Demo", href: "#" },
|
||||||
featuresTitle: "What's Included:", features: ["Everything in Professional", "White-label solution", "Dedicated account manager", "Custom integrations", "Unlimited admin accounts", "Advanced security", "99.9% SLA", "Phone support"]
|
featuresTitle: "What's Included:", features: ["Everything in Professional", "Custom inventory workflows", "Dedicated account manager", "Real-time analytics", "Unlimited admin accounts", "Advanced security", "99.9% SLA", "Phone support"]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
containerClassName="max-w-7xl mx-auto"
|
containerClassName="max-w-7xl mx-auto"
|
||||||
@@ -237,7 +237,7 @@ export default function LandingPage() {
|
|||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardOne
|
<TestimonialCardOne
|
||||||
title="Trusted by Tech Leaders"
|
title="Trusted by Tech Leaders"
|
||||||
description="Hear from successful e-commerce merchants who transformed their businesses with our platform."
|
description="Hear from successful e-commerce merchants who transformed their businesses with our inventory management platform."
|
||||||
tag="Customer Reviews"
|
tag="Customer Reviews"
|
||||||
tagIcon={Star}
|
tagIcon={Star}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -271,7 +271,7 @@ export default function LandingPage() {
|
|||||||
<ContactSplit
|
<ContactSplit
|
||||||
tag="Stay Connected"
|
tag="Stay Connected"
|
||||||
title="Join Our Tech Community"
|
title="Join Our Tech Community"
|
||||||
description="Subscribe to receive exclusive product launches, special discounts, and insider tips for maximizing your e-commerce success."
|
description="Subscribe to receive exclusive product launches, inventory management tips, stock optimization strategies, and insider insights for maximizing your e-commerce success."
|
||||||
tagIcon={Mail}
|
tagIcon={Mail}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
background={{ variant: "sparkles-gradient" }}
|
background={{ variant: "sparkles-gradient" }}
|
||||||
@@ -297,7 +297,7 @@ export default function LandingPage() {
|
|||||||
title: "Product", items: [
|
title: "Product", items: [
|
||||||
{ label: "Features", href: "#features" },
|
{ label: "Features", href: "#features" },
|
||||||
{ label: "Pricing", href: "#pricing" },
|
{ label: "Pricing", href: "#pricing" },
|
||||||
{ label: "Security", href: "#" },
|
{ label: "Inventory", href: "#" },
|
||||||
{ label: "Updates", href: "#" }
|
{ label: "Updates", href: "#" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
86
src/app/seller-dashboard/page.tsx
Normal file
86
src/app/seller-dashboard/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||||
|
import { Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, Package, Bell, MoreVertical, Gauge, HelpCircle, Smartphone } from "lucide-react";
|
||||||
|
|
||||||
|
export default function SellerDashboardPage() {
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="text-stagger"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="smallMedium"
|
||||||
|
sizing="mediumLargeSizeLargeTitles"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="outline"
|
||||||
|
primaryButtonStyle="primary-glow"
|
||||||
|
secondaryButtonStyle="radial-glow"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
brandName="TechVault"
|
||||||
|
navItems={[
|
||||||
|
{ name: "Shop", id: "/" },
|
||||||
|
{ name: "Features", id: "#features" },
|
||||||
|
{ name: "Pricing", id: "#pricing" },
|
||||||
|
{ name: "Support", id: "#contact" },
|
||||||
|
{ name: "Dashboard", id: "/seller-dashboard" }
|
||||||
|
]}
|
||||||
|
button={{ text: "Go to Store", href: "/" }}
|
||||||
|
className="backdrop-blur-md bg-opacity-80"
|
||||||
|
buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" data-section="hero">
|
||||||
|
<HeroBillboardDashboard
|
||||||
|
title="Seller Dashboard"
|
||||||
|
description="Manage your entire e-commerce business from one powerful dashboard. Track inventory, monitor sales, and optimize performance in real-time."
|
||||||
|
tag="Seller Control Center"
|
||||||
|
tagIcon={Hexagon}
|
||||||
|
tagAnimation="slide-up"
|
||||||
|
buttons={[
|
||||||
|
{ text: "View Products", href: "#" },
|
||||||
|
{ text: "Export Reports", href: "#" }
|
||||||
|
]}
|
||||||
|
buttonAnimation="blur-reveal"
|
||||||
|
background={{ variant: "plain" }}
|
||||||
|
dashboard={{
|
||||||
|
title: "Seller Management Hub", logoIcon: Hexagon,
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1", searchPlaceholder: "Search products, orders, discounts...", buttons: [
|
||||||
|
{ text: "Add Product", href: "#" },
|
||||||
|
{ text: "View Analytics", href: "#" }
|
||||||
|
],
|
||||||
|
sidebarItems: [
|
||||||
|
{ icon: House, active: true },
|
||||||
|
{ icon: ShoppingCart },
|
||||||
|
{ icon: CircleDollarSign },
|
||||||
|
{ icon: Package },
|
||||||
|
{ icon: BarChart3 },
|
||||||
|
{ icon: Bell },
|
||||||
|
{ icon: Settings }
|
||||||
|
],
|
||||||
|
stats: [
|
||||||
|
{ title: "Total Revenue", values: [24580, 38920, 52450], valuePrefix: "$", description: "This month" },
|
||||||
|
{ title: "Active Products", values: [85, 92, 105], description: "Listed items" },
|
||||||
|
{ title: "Pending Orders", values: [12, 8, 5], description: "To process" }
|
||||||
|
],
|
||||||
|
chartTitle: "Sales Trend", chartData: [{ value: 45 }, { value: 60 }, { value: 75 }, { value: 90 }, { value: 85 }],
|
||||||
|
listTitle: "Quick Actions", listItems: [
|
||||||
|
{ icon: ShoppingCart, title: "Manage Products", status: "Active" },
|
||||||
|
{ icon: CircleDollarSign, title: "Create Discount Campaign", status: "Ready" },
|
||||||
|
{ icon: Package, title: "Update Inventory Levels", status: "Pending" }
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
className="min-h-screen"
|
||||||
|
containerClassName="max-w-7xl mx-auto"
|
||||||
|
titleClassName="text-5xl md:text-7xl font-bold"
|
||||||
|
descriptionClassName="text-lg md:text-xl text-opacity-80"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
388
src/app/seller-login/page.tsx
Normal file
388
src/app/seller-login/page.tsx
Normal file
@@ -0,0 +1,388 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||||
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
|
import { Mail, Lock, CheckCircle, AlertCircle, Eye, EyeOff, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
export default function SellerLoginPage() {
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [loginStep, setLoginStep] = useState<"email" | "password" | "verify" | "success">("email");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [verificationCode, setVerificationCode] = useState("");
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleEmailSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
setError("Please enter your email address");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||||
|
setError("Please enter a valid email address");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoginStep("verify");
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVerificationSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
if (!verificationCode) {
|
||||||
|
setError("Please enter the verification code");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (verificationCode.length !== 6) {
|
||||||
|
setError("Verification code must be 6 digits");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoginStep("password");
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePasswordSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
if (!password) {
|
||||||
|
setError("Please enter your password");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 8) {
|
||||||
|
setError("Password must be at least 8 characters");
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoginStep("success");
|
||||||
|
setIsLoading(false);
|
||||||
|
// Redirect to dashboard after 2 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = "https://techvault.io/admin";
|
||||||
|
}, 2000);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="text-stagger"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="smallMedium"
|
||||||
|
sizing="mediumLargeSizeLargeTitles"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="outline"
|
||||||
|
primaryButtonStyle="primary-glow"
|
||||||
|
secondaryButtonStyle="radial-glow"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
brandName="TechVault"
|
||||||
|
navItems={[
|
||||||
|
{ name: "Shop", id: "/" },
|
||||||
|
{ name: "Features", id: "/#features" },
|
||||||
|
{ name: "Pricing", id: "/#pricing" },
|
||||||
|
{ name: "Support", id: "/#contact" }
|
||||||
|
]}
|
||||||
|
button={{ text: "Back to Store", href: "/" }}
|
||||||
|
className="backdrop-blur-md bg-opacity-80"
|
||||||
|
buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" data-section="hero">
|
||||||
|
<HeroSplit
|
||||||
|
title="Seller Authentication"
|
||||||
|
description="Secure login portal for Prime Re Stock sellers. Manage your inventory, track orders, and grow your business."
|
||||||
|
background={{ variant: "plain" }}
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1"
|
||||||
|
imageAlt="Seller dashboard preview"
|
||||||
|
mediaAnimation="blur-reveal"
|
||||||
|
fixedMediaHeight={true}
|
||||||
|
className="min-h-screen"
|
||||||
|
containerClassName="max-w-7xl mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="contact" data-section="contact" className="py-20">
|
||||||
|
<div className="max-w-7xl mx-auto px-4">
|
||||||
|
<div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl p-8 md:p-12 max-w-md mx-auto border border-slate-200 dark:border-slate-700">
|
||||||
|
{/* Email Step */}
|
||||||
|
{loginStep === "email" && (
|
||||||
|
<form onSubmit={handleEmailSubmit} className="space-y-6">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
Seller Login
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400">
|
||||||
|
Step 1: Enter your email
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||||
|
Email Address
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Mail className="absolute left-3 top-3 text-slate-400" size={18} />
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => {
|
||||||
|
setEmail(e.target.value);
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
placeholder="seller@example.com"
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
|
<AlertCircle size={18} className="text-red-600 dark:text-red-400" />
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading ? "Sending..." : "Continue with Email"}
|
||||||
|
{!isLoading && <ArrowRight size={18} />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="text-center text-sm text-slate-600 dark:text-slate-400">
|
||||||
|
New seller?{" "}
|
||||||
|
<a href="#" className="text-green-600 dark:text-green-400 font-semibold hover:underline">
|
||||||
|
Create account
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Verification Step */}
|
||||||
|
{loginStep === "verify" && (
|
||||||
|
<form onSubmit={handleVerificationSubmit} className="space-y-6">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
Verify Email
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400">
|
||||||
|
Step 2: Enter verification code
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
|
||||||
|
Check your email for a 6-digit code
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||||
|
Verification Code
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={verificationCode}
|
||||||
|
onChange={(e) => {
|
||||||
|
const val = e.target.value.replace(/\D/g, "").slice(0, 6);
|
||||||
|
setVerificationCode(val);
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
placeholder="000000"
|
||||||
|
maxLength={6}
|
||||||
|
className="w-full px-4 py-3 text-center text-2xl tracking-widest border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500 font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
|
<AlertCircle size={18} className="text-red-600 dark:text-red-400" />
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading || verificationCode.length !== 6}
|
||||||
|
className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading ? "Verifying..." : "Verify Email"}
|
||||||
|
{!isLoading && <ArrowRight size={18} />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setLoginStep("email");
|
||||||
|
setVerificationCode("");
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
className="w-full text-slate-600 dark:text-slate-400 text-sm hover:text-slate-900 dark:hover:text-white font-medium"
|
||||||
|
>
|
||||||
|
← Back to email
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Password Step */}
|
||||||
|
{loginStep === "password" && (
|
||||||
|
<form onSubmit={handlePasswordSubmit} className="space-y-6">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<CheckCircle size={32} className="text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
Email Verified
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400">
|
||||||
|
Step 3: Set your password
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock className="absolute left-3 top-3 text-slate-400" size={18} />
|
||||||
|
<input
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPassword(e.target.value);
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full pl-10 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
Minimum 8 characters
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
|
<AlertCircle size={18} className="text-red-600 dark:text-red-400" />
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading ? "Setting up..." : "Complete Login"}
|
||||||
|
{!isLoading && <ArrowRight size={18} />}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Step */}
|
||||||
|
{loginStep === "success" && (
|
||||||
|
<div className="space-y-6 text-center">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-green-500/20 rounded-full blur-lg"></div>
|
||||||
|
<CheckCircle size={48} className="text-green-600 dark:text-green-400 relative" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
Welcome Back!
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400">
|
||||||
|
Your account has been authenticated successfully.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-500">
|
||||||
|
Redirecting to dashboard...
|
||||||
|
</p>
|
||||||
|
<div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1 overflow-hidden">
|
||||||
|
<div className="bg-green-600 h-full animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/abstract-dark-tech-background-with-flowi-1773085532519-883f666b.png"
|
||||||
|
imageAlt="Tech abstract background"
|
||||||
|
logoText="TechVault"
|
||||||
|
copyrightText="© 2025 TechVault | Powering Tech E-Commerce"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: "Product", items: [
|
||||||
|
{ label: "Features", href: "/#features" },
|
||||||
|
{ label: "Pricing", href: "/#pricing" },
|
||||||
|
{ label: "Security", href: "#" },
|
||||||
|
{ label: "Updates", href: "#" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company", items: [
|
||||||
|
{ label: "About", href: "#" },
|
||||||
|
{ label: "Blog", href: "#" },
|
||||||
|
{ label: "Careers", href: "#" },
|
||||||
|
{ label: "Contact", href: "/#contact" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Legal", items: [
|
||||||
|
{ label: "Privacy Policy", href: "#" },
|
||||||
|
{ label: "Terms of Service", href: "#" },
|
||||||
|
{ label: "Cookie Policy", href: "#" },
|
||||||
|
{ label: "Compliance", href: "#" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
containerClassName="max-w-7xl mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user