Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
225
src/app/admin/dashboard/page.tsx
Normal file
225
src/app/admin/dashboard/page.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
const router = useRouter();
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [adminId, setAdminId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Check authentication on mount
|
||||
const auth = localStorage.getItem("adminAuth");
|
||||
if (auth) {
|
||||
try {
|
||||
const parsedAuth = JSON.parse(auth);
|
||||
if (parsedAuth.isAuthenticated) {
|
||||
setIsAuthenticated(true);
|
||||
setAdminId(parsedAuth.id);
|
||||
} else {
|
||||
router.push("/admin/login");
|
||||
}
|
||||
} catch (e) {
|
||||
router.push("/admin/login");
|
||||
}
|
||||
} else {
|
||||
router.push("/admin/login");
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, [router]);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("adminAuth");
|
||||
router.push("/admin/login");
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Streetwear", id: "streetwear" },
|
||||
{ name: "Casuals", id: "casuals" },
|
||||
{ name: "Specials", id: "specials" },
|
||||
{ name: "Collections", id: "collections" },
|
||||
{ name: "About", id: "about" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Streetwear", href: "#streetwear" },
|
||||
{ label: "Casuals", href: "#casuals" },
|
||||
{ label: "Specials", href: "#specials" },
|
||||
{ label: "Seasonal Drops", href: "#seasonal" },
|
||||
{ label: "New Arrivals", href: "#new" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/collections" },
|
||||
{ label: "Our Story", href: "#story" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
{ label: "Press", href: "#press" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping Info", href: "#shipping" },
|
||||
{ label: "Returns", href: "#returns" },
|
||||
{ label: "Track Order", href: "#track" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "Refund Policy", href: "#refund" },
|
||||
{ label: "Cookie Policy", href: "#cookies" },
|
||||
{ label: "Accessibility", href: "#accessibility" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<p className="text-lg">Loading...</p>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="DripDrop"
|
||||
bottomLeftText="Admin Dashboard"
|
||||
bottomRightText="hello@dripdrop.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen px-4 md:px-6 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Admin Dashboard</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">Welcome, {adminId}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-semibold py-2 px-6 rounded-md transition duration-200"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Total Orders</h2>
|
||||
<p className="text-4xl font-bold text-blue-600 dark:text-blue-400">2,847</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">+12% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Total Revenue</h2>
|
||||
<p className="text-4xl font-bold text-green-600 dark:text-green-400">₹2.5L</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">+8% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Active Users</h2>
|
||||
<p className="text-4xl font-bold text-purple-600 dark:text-purple-400">1,234</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">+5% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Pending Orders</h2>
|
||||
<p className="text-4xl font-bold text-orange-600 dark:text-orange-400">156</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">Awaiting shipment</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Top Product</h2>
|
||||
<p className="text-lg font-semibold">Premium Black Hoodie</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">324 units sold</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Return Rate</h2>
|
||||
<p className="text-4xl font-bold text-red-600 dark:text-red-400">2.3%</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">Below industry average</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">Quick Actions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-md text-center transition duration-200"
|
||||
>
|
||||
View Store
|
||||
</Link>
|
||||
<button className="bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
|
||||
Manage Products
|
||||
</button>
|
||||
<button className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
|
||||
View Orders
|
||||
</button>
|
||||
<button className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
|
||||
Generate Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 mt-12">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
|
||||
bottomRightText="Secure checkout powered by Razorpay & Stripe"
|
||||
ariaLabel="Site footer with navigation and legal information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
181
src/app/admin/login/page.tsx
Normal file
181
src/app/admin/login/page.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const router = useRouter();
|
||||
const [id, setId] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Streetwear", id: "streetwear" },
|
||||
{ name: "Casuals", id: "casuals" },
|
||||
{ name: "Specials", id: "specials" },
|
||||
{ name: "Collections", id: "collections" },
|
||||
{ name: "About", id: "about" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Streetwear", href: "#streetwear" },
|
||||
{ label: "Casuals", href: "#casuals" },
|
||||
{ label: "Specials", href: "#specials" },
|
||||
{ label: "Seasonal Drops", href: "#seasonal" },
|
||||
{ label: "New Arrivals", href: "#new" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/collections" },
|
||||
{ label: "Our Story", href: "#story" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
{ label: "Press", href: "#press" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping Info", href: "#shipping" },
|
||||
{ label: "Returns", href: "#returns" },
|
||||
{ label: "Track Order", href: "#track" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "Refund Policy", href: "#refund" },
|
||||
{ label: "Cookie Policy", href: "#cookies" },
|
||||
{ label: "Accessibility", href: "#accessibility" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsLoading(true);
|
||||
|
||||
// Authenticate with hardcoded credentials
|
||||
if (id === "death" && password === "helloimdead") {
|
||||
// Store auth state in localStorage
|
||||
localStorage.setItem("adminAuth", JSON.stringify({ id, isAuthenticated: true }));
|
||||
// Redirect to admin dashboard
|
||||
router.push("/admin/dashboard");
|
||||
} else {
|
||||
setError("Invalid credentials. Please try again.");
|
||||
setPassword("");
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="DripDrop"
|
||||
bottomLeftText="Admin Login"
|
||||
bottomRightText="hello@dripdrop.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-8">
|
||||
<h1 className="text-3xl font-bold text-center mb-2">Admin Login</h1>
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 mb-8">
|
||||
Access the admin dashboard
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="id"
|
||||
value={id}
|
||||
onChange={(e) => setId(e.target.value)}
|
||||
placeholder="Enter your ID"
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? "Logging in..." : "Login"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<Link href="/" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 mt-12">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
|
||||
bottomRightText="Secure checkout powered by Razorpay & Stripe"
|
||||
ariaLabel="Site footer with navigation and legal information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
292
src/app/admin/page.tsx
Normal file
292
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import { Lock, Check, AlertCircle, Eye, EyeOff } from "lucide-react";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Settings", id: "settings" },
|
||||
{ name: "Logout", id: "logout" },
|
||||
];
|
||||
|
||||
const validatePassword = (password: string): { valid: boolean; errors: string[] } => {
|
||||
const errors: string[] = [];
|
||||
|
||||
if (password.length < 8) {
|
||||
errors.push("Password must be at least 8 characters long");
|
||||
}
|
||||
if (!/[A-Z]/.test(password)) {
|
||||
errors.push("Password must contain at least one uppercase letter");
|
||||
}
|
||||
if (!/[a-z]/.test(password)) {
|
||||
errors.push("Password must contain at least one lowercase letter");
|
||||
}
|
||||
if (!/[0-9]/.test(password)) {
|
||||
errors.push("Password must contain at least one number");
|
||||
}
|
||||
if (!/[!@#$%^&*]/.test(password)) {
|
||||
errors.push("Password must contain at least one special character (!@#$%^&*)");
|
||||
}
|
||||
|
||||
return { valid: errors.length === 0, errors };
|
||||
};
|
||||
|
||||
const handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
|
||||
// Validate inputs
|
||||
if (!currentPassword.trim()) {
|
||||
setMessage({ type: "error", text: "Current password is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newPassword.trim()) {
|
||||
setMessage({ type: "error", text: "New password is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setMessage({ type: "error", text: "New password and confirmation do not match" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentPassword === newPassword) {
|
||||
setMessage({ type: "error", text: "New password must be different from current password" });
|
||||
return;
|
||||
}
|
||||
|
||||
const validation = validatePassword(newPassword);
|
||||
if (!validation.valid) {
|
||||
setMessage({ type: "error", text: validation.errors.join(". ") });
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// In a real application, this would call your backend API
|
||||
// const response = await fetch('/api/admin/change-password', {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify({ currentPassword, newPassword })
|
||||
// });
|
||||
// const data = await response.json();
|
||||
|
||||
// Simulated delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
setMessage({ type: "success", text: "Password changed successfully. Please log in again." });
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Failed to change password. Please try again." });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Admin Dashboard"
|
||||
bottomLeftText="Secure Admin Portal"
|
||||
bottomRightText="admin@dripdrop.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-md">
|
||||
<div className="bg-white bg-opacity-5 backdrop-blur-xl border border-white border-opacity-10 rounded-2xl p-8 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8 text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 bg-opacity-20 mb-4">
|
||||
<Lock className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Change Password</h1>
|
||||
<p className="text-slate-400 text-sm">Update your admin account password securely</p>
|
||||
</div>
|
||||
|
||||
{/* Message Alert */}
|
||||
{message && (
|
||||
<div
|
||||
className={`mb-6 p-4 rounded-lg flex items-start gap-3 ${
|
||||
message.type === "success"
|
||||
? "bg-green-500 bg-opacity-10 border border-green-500 border-opacity-30"
|
||||
: "bg-red-500 bg-opacity-10 border border-red-500 border-opacity-30"
|
||||
}`}
|
||||
>
|
||||
{message.type === "success" ? (
|
||||
<Check className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<p
|
||||
className={`text-sm ${
|
||||
message.type === "success" ? "text-green-200" : "text-red-200"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handlePasswordChange} className="space-y-5">
|
||||
{/* Current Password */}
|
||||
<div>
|
||||
<label htmlFor="current-password" className="block text-sm font-medium text-white mb-2">
|
||||
Current Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="current-password"
|
||||
type={showCurrentPassword ? "text" : "password"}
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition"
|
||||
>
|
||||
{showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Password */}
|
||||
<div>
|
||||
<label htmlFor="new-password" className="block text-sm font-medium text-white mb-2">
|
||||
New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="new-password"
|
||||
type={showNewPassword ? "text" : "password"}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition"
|
||||
>
|
||||
{showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label htmlFor="confirm-password" className="block text-sm font-medium text-white mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="confirm-password"
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition"
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Requirements */}
|
||||
<div className="bg-white bg-opacity-5 border border-white border-opacity-10 rounded-lg p-4 mt-6">
|
||||
<p className="text-xs font-semibold text-slate-300 mb-3">Password Requirements:</p>
|
||||
<ul className="space-y-2 text-xs text-slate-400">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
||||
Minimum 8 characters
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
||||
At least one uppercase letter (A-Z)
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
||||
At least one lowercase letter (a-z)
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
||||
At least one number (0-9)
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
||||
At least one special character (!@#$%^&*)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg transition transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 mt-8"
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="inline-block animate-spin">⟳</span>
|
||||
Updating Password...
|
||||
</span>
|
||||
) : (
|
||||
"Update Password"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Security Info */}
|
||||
<div className="mt-6 pt-6 border-t border-white border-opacity-10">
|
||||
<p className="text-xs text-slate-500 text-center">
|
||||
🔒 Your password is encrypted and transmitted securely. Never share your password with anyone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
340
src/app/page.tsx
340
src/app/page.tsx
@@ -31,6 +31,7 @@ import Link from "next/link";
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Admin", id: "admin" },
|
||||
{ name: "Streetwear", id: "streetwear" },
|
||||
{ name: "Casuals", id: "casuals" },
|
||||
{ name: "Specials", id: "specials" },
|
||||
@@ -40,8 +41,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "Streetwear", href: "#streetwear" },
|
||||
{ label: "Casuals", href: "#casuals" },
|
||||
{ label: "Specials", href: "#specials" },
|
||||
@@ -50,8 +50,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/collections" },
|
||||
{ label: "Our Story", href: "#story" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
@@ -60,8 +59,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping Info", href: "#shipping" },
|
||||
@@ -70,8 +68,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "Refund Policy", href: "#refund" },
|
||||
@@ -119,34 +116,22 @@ export default function HomePage() {
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-cinematic-luxury-fashion-hero-image-fe-1773905419937-c226a180.png",
|
||||
imageAlt: "Premium luxury fashion hero showcase",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-cinematic-luxury-fashion-hero-image-fe-1773905419937-c226a180.png", imageAlt: "Premium luxury fashion hero showcase"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-luxury-streetwear-collection-d-1773905421130-d9b67094.png",
|
||||
imageAlt: "Exclusive streetwear collection",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-luxury-streetwear-collection-d-1773905421130-d9b67094.png", imageAlt: "Exclusive streetwear collection"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-sleek-minimalist-showcase-of-premium-c-1773905419713-776baa65.png",
|
||||
imageAlt: "Premium casual collection",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-sleek-minimalist-showcase-of-premium-c-1773905419713-776baa65.png", imageAlt: "Premium casual collection"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=1",
|
||||
imageAlt: "Trending luxury hoodie",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=1", imageAlt: "Trending luxury hoodie"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=1",
|
||||
imageAlt: "Designer jacket showcase",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=1", imageAlt: "Designer jacket showcase"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=1",
|
||||
imageAlt: "Luxury accessories collection",
|
||||
},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=1", imageAlt: "Luxury accessories collection"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
ariaLabel="DripDrop hero section with premium fashion showcase"
|
||||
@@ -168,32 +153,14 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "product-1",
|
||||
name: "Premium Black Hoodie",
|
||||
price: "₹8,999",
|
||||
variant: "Luxury Streetwear",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=2",
|
||||
imageAlt: "Premium black luxury hoodie",
|
||||
},
|
||||
id: "product-1", name: "Premium Black Hoodie", price: "₹8,999", variant: "Luxury Streetwear", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=2", imageAlt: "Premium black luxury hoodie"},
|
||||
{
|
||||
id: "product-2",
|
||||
name: "Designer Jacket",
|
||||
price: "₹15,499",
|
||||
variant: "Exclusive Outerwear",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=2",
|
||||
imageAlt: "Premium designer jacket",
|
||||
},
|
||||
id: "product-2", name: "Designer Jacket", price: "₹15,499", variant: "Exclusive Outerwear", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=2", imageAlt: "Premium designer jacket"},
|
||||
{
|
||||
id: "product-3",
|
||||
name: "Luxury Accessories Set",
|
||||
price: "₹12,999",
|
||||
variant: "Signature Collection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=2",
|
||||
imageAlt: "Premium accessories collection",
|
||||
},
|
||||
id: "product-3", name: "Luxury Accessories Set", price: "₹12,999", variant: "Signature Collection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=2", imageAlt: "Premium accessories collection"},
|
||||
]}
|
||||
ariaLabel="Featured collections section"
|
||||
/>
|
||||
@@ -214,41 +181,17 @@ export default function HomePage() {
|
||||
animationType="scale-rotate"
|
||||
products={[
|
||||
{
|
||||
id: "trending-1",
|
||||
name: "Exclusive Summer Collection T-Shirt",
|
||||
price: "₹4,999",
|
||||
variant: "Limited Edition",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=1",
|
||||
imageAlt: "Trending luxury t-shirt",
|
||||
},
|
||||
id: "trending-1", name: "Exclusive Summer Collection T-Shirt", price: "₹4,999", variant: "Limited Edition", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=1", imageAlt: "Trending luxury t-shirt"},
|
||||
{
|
||||
id: "trending-2",
|
||||
name: "Premium Tailored Trousers",
|
||||
price: "₹9,999",
|
||||
variant: "Seasonal Drop",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=1",
|
||||
imageAlt: "Premium tailored trousers",
|
||||
},
|
||||
id: "trending-2", name: "Premium Tailored Trousers", price: "₹9,999", variant: "Seasonal Drop", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=1", imageAlt: "Premium tailored trousers"},
|
||||
{
|
||||
id: "trending-3",
|
||||
name: "Designer Sneakers",
|
||||
price: "₹11,499",
|
||||
variant: "Exclusive Footwear",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=1",
|
||||
imageAlt: "Premium designer sneakers",
|
||||
},
|
||||
id: "trending-3", name: "Designer Sneakers", price: "₹11,499", variant: "Exclusive Footwear", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=1", imageAlt: "Premium designer sneakers"},
|
||||
{
|
||||
id: "trending-4",
|
||||
name: "Statement Luxury Piece",
|
||||
price: "₹16,999",
|
||||
variant: "Premium Collection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=1",
|
||||
imageAlt: "Luxury statement piece",
|
||||
},
|
||||
id: "trending-4", name: "Statement Luxury Piece", price: "₹16,999", variant: "Premium Collection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=1", imageAlt: "Luxury statement piece"},
|
||||
]}
|
||||
ariaLabel="Trending products section"
|
||||
/>
|
||||
@@ -268,37 +211,24 @@ export default function HomePage() {
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
title: "Smart Outfit Matching",
|
||||
description:
|
||||
"AI analyzes your saved items and suggests perfect combinations. Mix and match pieces for complete looks.",
|
||||
bentoComponent: "chat",
|
||||
aiIcon: Sparkles,
|
||||
title: "Smart Outfit Matching", description:
|
||||
"AI analyzes your saved items and suggests perfect combinations. Mix and match pieces for complete looks.", bentoComponent: "chat", aiIcon: Sparkles,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "I love black streetwear",
|
||||
aiResponse:
|
||||
"Perfect! I recommend pairing this black hoodie with our premium trousers and designer sneakers for a cohesive luxury streetwear look.",
|
||||
},
|
||||
userMessage: "I love black streetwear", aiResponse:
|
||||
"Perfect! I recommend pairing this black hoodie with our premium trousers and designer sneakers for a cohesive luxury streetwear look."},
|
||||
{
|
||||
userMessage: "Show me casual options",
|
||||
aiResponse:
|
||||
"Absolutely! Here are 5 premium casual combinations that match your style preference based on your saved items.",
|
||||
},
|
||||
userMessage: "Show me casual options", aiResponse:
|
||||
"Absolutely! Here are 5 premium casual combinations that match your style preference based on your saved items."},
|
||||
{
|
||||
userMessage: "What's trending?",
|
||||
aiResponse:
|
||||
"These are the top trending combinations right now: Premium layers with statement accessories. Limited stock available!",
|
||||
},
|
||||
userMessage: "What's trending?", aiResponse:
|
||||
"These are the top trending combinations right now: Premium layers with statement accessories. Limited stock available!"},
|
||||
],
|
||||
placeholder: "Ask about outfit recommendations...",
|
||||
},
|
||||
placeholder: "Ask about outfit recommendations..."},
|
||||
{
|
||||
title: "Complete the Look",
|
||||
description:
|
||||
"Select any item and get instant recommendations for complementary pieces to complete your perfect outfit.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Complete the Look", description:
|
||||
"Select any item and get instant recommendations for complementary pieces to complete your perfect outfit.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Shirt, label: "Tops", value: "547 matches" },
|
||||
{ icon: Shield, label: "Bottoms", value: "382 matches" },
|
||||
{ icon: Footprints, label: "Footwear", value: "231 matches" },
|
||||
@@ -306,11 +236,8 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Top Picks for You",
|
||||
description:
|
||||
"Personalized selection based on your browsing history and preferences. Discover new favorites curated just for you.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Heart,
|
||||
title: "Top Picks for You", description:
|
||||
"Personalized selection based on your browsing history and preferences. Discover new favorites curated just for you.", bentoComponent: "orbiting-icons", centerIcon: Heart,
|
||||
items: [
|
||||
{ icon: Star, ring: 1, duration: 20 },
|
||||
{ icon: Sparkles, ring: 1, duration: 25 },
|
||||
@@ -340,50 +267,20 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "pick-1",
|
||||
name: "Premium Casual Shirt",
|
||||
price: "₹5,499",
|
||||
variant: "Versatile Collection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=2",
|
||||
imageAlt: "Premium casual luxury shirt",
|
||||
},
|
||||
id: "pick-1", name: "Premium Casual Shirt", price: "₹5,499", variant: "Versatile Collection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=2", imageAlt: "Premium casual luxury shirt"},
|
||||
{
|
||||
id: "pick-2",
|
||||
name: "Luxury Trousers",
|
||||
price: "₹10,999",
|
||||
variant: "Premium Selection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=2",
|
||||
imageAlt: "Premium luxury trousers",
|
||||
},
|
||||
id: "pick-2", name: "Luxury Trousers", price: "₹10,999", variant: "Premium Selection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=2", imageAlt: "Premium luxury trousers"},
|
||||
{
|
||||
id: "pick-3",
|
||||
name: "Designer Sneakers Pro",
|
||||
price: "₹12,999",
|
||||
variant: "Signature Footwear",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=2",
|
||||
imageAlt: "Premium designer sneakers",
|
||||
},
|
||||
id: "pick-3", name: "Designer Sneakers Pro", price: "₹12,999", variant: "Signature Footwear", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=2", imageAlt: "Premium designer sneakers"},
|
||||
{
|
||||
id: "pick-4",
|
||||
name: "Luxury Belt & Accessories",
|
||||
price: "₹6,999",
|
||||
variant: "Statement Collection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-accessory-or-complementary-fash-1773905419444-022fd6a5.png",
|
||||
imageAlt: "Premium luxury accessories",
|
||||
},
|
||||
id: "pick-4", name: "Luxury Belt & Accessories", price: "₹6,999", variant: "Statement Collection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-accessory-or-complementary-fash-1773905419444-022fd6a5.png", imageAlt: "Premium luxury accessories"},
|
||||
{
|
||||
id: "pick-5",
|
||||
name: "Premium Jacket",
|
||||
price: "₹14,999",
|
||||
variant: "Seasonal Collection",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=2",
|
||||
imageAlt: "Premium designer jacket",
|
||||
},
|
||||
id: "pick-5", name: "Premium Jacket", price: "₹14,999", variant: "Seasonal Collection", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=2", imageAlt: "Premium designer jacket"},
|
||||
]}
|
||||
ariaLabel="Top picks for you personalized products"
|
||||
/>
|
||||
@@ -403,48 +300,24 @@ export default function HomePage() {
|
||||
animationType="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1",
|
||||
name: "Arjun Kumar",
|
||||
handle: "@arjunstyle",
|
||||
testimonial:
|
||||
"DripDrop is a game-changer. The quality is unmatched, and the AI recommendations helped me find my perfect style. Absolutely worth every rupee!",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-satisfied-l-1773905419556-bcdb5b91.png",
|
||||
imageAlt: "Arjun Kumar customer testimonial",
|
||||
icon: Star,
|
||||
id: "testimonial-1", name: "Arjun Kumar", handle: "@arjunstyle", testimonial:
|
||||
"DripDrop is a game-changer. The quality is unmatched, and the AI recommendations helped me find my perfect style. Absolutely worth every rupee!", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-satisfied-l-1773905419556-bcdb5b91.png", imageAlt: "Arjun Kumar customer testimonial", icon: Star,
|
||||
},
|
||||
{
|
||||
id: "testimonial-2",
|
||||
name: "Priya Sharma",
|
||||
handle: "@priyafashion",
|
||||
testimonial:
|
||||
"Finally found a luxury fashion platform that understands premium quality. The collection is curated with impeccable taste. Highly recommended!",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/another-professional-headshot-of-a-satis-1773905421529-5cdcfa3d.png",
|
||||
imageAlt: "Priya Sharma customer testimonial",
|
||||
icon: Heart,
|
||||
id: "testimonial-2", name: "Priya Sharma", handle: "@priyafashion", testimonial:
|
||||
"Finally found a luxury fashion platform that understands premium quality. The collection is curated with impeccable taste. Highly recommended!", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/another-professional-headshot-of-a-satis-1773905421529-5cdcfa3d.png", imageAlt: "Priya Sharma customer testimonial", icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "testimonial-3",
|
||||
name: "Rajesh Patel",
|
||||
handle: "@rajeshwear",
|
||||
testimonial:
|
||||
"The checkout process is seamless, delivery was lightning fast, and the packaging feels premium. This is how luxury shopping should be!",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-luxury-fash-1773905418969-b6f3bc7c.png",
|
||||
imageAlt: "Rajesh Patel customer testimonial",
|
||||
icon: ThumbsUp,
|
||||
id: "testimonial-3", name: "Rajesh Patel", handle: "@rajeshwear", testimonial:
|
||||
"The checkout process is seamless, delivery was lightning fast, and the packaging feels premium. This is how luxury shopping should be!", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-luxury-fash-1773905418969-b6f3bc7c.png", imageAlt: "Rajesh Patel customer testimonial", icon: ThumbsUp,
|
||||
},
|
||||
{
|
||||
id: "testimonial-4",
|
||||
name: "Neha Desai",
|
||||
handle: "@neha_luxe",
|
||||
testimonial:
|
||||
"Every piece from DripDrop is a masterpiece. The attention to detail is incredible. I've become a loyal customer for life!",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-portrait-of-a-customer-in-1773905419689-f702ac6f.png",
|
||||
imageAlt: "Neha Desai customer testimonial",
|
||||
icon: Sparkles,
|
||||
id: "testimonial-4", name: "Neha Desai", handle: "@neha_luxe", testimonial:
|
||||
"Every piece from DripDrop is a masterpiece. The attention to detail is incredible. I've become a loyal customer for life!", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-portrait-of-a-customer-in-1773905419689-f702ac6f.png", imageAlt: "Neha Desai customer testimonial", icon: Sparkles,
|
||||
},
|
||||
]}
|
||||
speed={40}
|
||||
@@ -467,44 +340,20 @@ export default function HomePage() {
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{
|
||||
id: "customers",
|
||||
value: "50K+",
|
||||
title: "Happy Customers",
|
||||
items: [
|
||||
"Worldwide shipping",
|
||||
"99% satisfaction rate",
|
||||
"Premium support",
|
||||
],
|
||||
id: "customers", value: "50K+", title: "Happy Customers", items: [
|
||||
"Worldwide shipping", "99% satisfaction rate", "Premium support"],
|
||||
},
|
||||
{
|
||||
id: "collections",
|
||||
value: "500+",
|
||||
title: "Products",
|
||||
items: [
|
||||
"Curated selection",
|
||||
"Regular drops",
|
||||
"Exclusive pieces",
|
||||
],
|
||||
id: "collections", value: "500+", title: "Products", items: [
|
||||
"Curated selection", "Regular drops", "Exclusive pieces"],
|
||||
},
|
||||
{
|
||||
id: "awards",
|
||||
value: "12",
|
||||
title: "Awards Won",
|
||||
items: [
|
||||
"Best Fashion Platform",
|
||||
"Innovation in Retail",
|
||||
"Customer Choice",
|
||||
],
|
||||
id: "awards", value: "12", title: "Awards Won", items: [
|
||||
"Best Fashion Platform", "Innovation in Retail", "Customer Choice"],
|
||||
},
|
||||
{
|
||||
id: "countries",
|
||||
value: "25+",
|
||||
title: "Countries Served",
|
||||
items: [
|
||||
"Global delivery",
|
||||
"Multi-currency support",
|
||||
"Local partnerships",
|
||||
],
|
||||
id: "countries", value: "25+", title: "Countries Served", items: [
|
||||
"Global delivery", "Multi-currency support", "Local partnerships"],
|
||||
},
|
||||
]}
|
||||
ariaLabel="Key metrics and achievements section"
|
||||
@@ -524,14 +373,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
names={["Nike", "Adidas", "Dior", "Gucci", "Louis Vuitton", "Versace", "Supreme"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-psd/sports-landing-page-template-with-photo_23-2148986698.jpg",
|
||||
"http://img.b2bpic.net/free-vector/unsa-independance-day-label-collection_1366-10.jpg",
|
||||
"http://img.b2bpic.net/free-vector/floral-botanical-frame-collection_53876-67206.jpg",
|
||||
"http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881462.jpg",
|
||||
"http://img.b2bpic.net/free-vector/pattern-with-square-shapes-stars_1017-6220.jpg",
|
||||
"http://img.b2bpic.net/free-vector/golden-logo-background_1115-689.jpg",
|
||||
"http://img.b2bpic.net/free-photo/man-holding-bible-book-outside-church_23-2150572060.jpg",
|
||||
]}
|
||||
"http://img.b2bpic.net/free-psd/sports-landing-page-template-with-photo_23-2148986698.jpg", "http://img.b2bpic.net/free-vector/unsa-independance-day-label-collection_1366-10.jpg", "http://img.b2bpic.net/free-vector/floral-botanical-frame-collection_53876-67206.jpg", "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881462.jpg", "http://img.b2bpic.net/free-vector/pattern-with-square-shapes-stars_1017-6220.jpg", "http://img.b2bpic.net/free-vector/golden-logo-background_1115-689.jpg", "http://img.b2bpic.net/free-photo/man-holding-bible-book-outside-church_23-2150572060.jpg"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Trusted brand partners section"
|
||||
@@ -552,41 +394,23 @@ export default function HomePage() {
|
||||
faqsAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "What payment methods do you accept?",
|
||||
content:
|
||||
"We accept multiple payment methods including UPI (Google Pay, PhonePe, Paytm), Debit Cards, Credit Cards via Razorpay and Stripe integration. All transactions are encrypted and secure.",
|
||||
},
|
||||
id: "faq-1", title: "What payment methods do you accept?", content:
|
||||
"We accept multiple payment methods including UPI (Google Pay, PhonePe, Paytm), Debit Cards, Credit Cards via Razorpay and Stripe integration. All transactions are encrypted and secure."},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "How fast is your delivery?",
|
||||
content:
|
||||
"We offer fast delivery options with estimated delivery times of 2-5 business days to major Indian cities. Express delivery is available for rush orders. Real-time tracking is available for all orders.",
|
||||
},
|
||||
id: "faq-2", title: "How fast is your delivery?", content:
|
||||
"We offer fast delivery options with estimated delivery times of 2-5 business days to major Indian cities. Express delivery is available for rush orders. Real-time tracking is available for all orders."},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "Is there a return policy?",
|
||||
content:
|
||||
"Yes, we offer a 30-day return policy for all items. Products must be unworn and in original packaging. Returns are free, and refunds are processed within 5-7 business days.",
|
||||
},
|
||||
id: "faq-3", title: "Is there a return policy?", content:
|
||||
"Yes, we offer a 30-day return policy for all items. Products must be unworn and in original packaging. Returns are free, and refunds are processed within 5-7 business days."},
|
||||
{
|
||||
id: "faq-4",
|
||||
title: "How does the AI recommendation work?",
|
||||
content:
|
||||
"Our AI analyzes your browsing history, saved items, style preferences, and previous purchases to suggest personalized products and outfit combinations. The more you interact, the smarter it gets!",
|
||||
},
|
||||
id: "faq-4", title: "How does the AI recommendation work?", content:
|
||||
"Our AI analyzes your browsing history, saved items, style preferences, and previous purchases to suggest personalized products and outfit combinations. The more you interact, the smarter it gets!"},
|
||||
{
|
||||
id: "faq-5",
|
||||
title: "Do you have physical stores?",
|
||||
content:
|
||||
"Currently, DripDrop operates exclusively online to maintain lower prices and faster service. We're expanding to select premium locations. Visit our contact page for updates.",
|
||||
},
|
||||
id: "faq-5", title: "Do you have physical stores?", content:
|
||||
"Currently, DripDrop operates exclusively online to maintain lower prices and faster service. We're expanding to select premium locations. Visit our contact page for updates."},
|
||||
{
|
||||
id: "faq-6",
|
||||
title: "Are your products authentic?",
|
||||
content:
|
||||
"100% authentic. We partner directly with designers and verified suppliers. Each product comes with authenticity verification. If not satisfied, full refund guaranteed.",
|
||||
},
|
||||
id: "faq-6", title: "Are your products authentic?", content:
|
||||
"100% authentic. We partner directly with designers and verified suppliers. Each product comes with authenticity verification. If not satisfied, full refund guaranteed."},
|
||||
]}
|
||||
ariaLabel="FAQ section"
|
||||
/>
|
||||
@@ -616,4 +440,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user