7 Commits

Author SHA1 Message Date
5310743d50 Update src/app/seller-dashboard/page.tsx 2026-03-09 20:00:48 +00:00
058df6185e Add src/app/seller-login/page.tsx 2026-03-09 19:59:42 +00:00
aa0cadd42b Add src/app/seller-dashboard/page.tsx 2026-03-09 19:59:41 +00:00
fa5f95042c Update src/app/page.tsx 2026-03-09 19:59:41 +00:00
39be8217e9 Update src/app/layout.tsx 2026-03-09 19:59:41 +00:00
d7bb20ce97 Add src/app/admin/products/edit/page.tsx 2026-03-09 19:59:40 +00:00
ec5be20cf3 Merge version_2 into main
Merge version_2 into main
2026-03-09 19:50:01 +00:00
5 changed files with 872 additions and 62 deletions

View 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>
);
}

View File

@@ -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={{

View File

@@ -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: "#" }
] ]
}, },

View 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>
);
}

View 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>
);
}