Compare commits
46 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3015685a10 | |||
| cea1c78d59 | |||
| 9895850f09 | |||
| 9c2b440ce6 | |||
| ae90ee5682 | |||
| 0cdbea6d9d | |||
| bd447f413b | |||
| 193257916f | |||
| 24e3cd19a9 | |||
| c1ddc3c59a | |||
| f4c3e6b939 | |||
| 1c750edc61 | |||
| 8e51fcacbc | |||
| bc5e564603 | |||
| fb205a06a0 | |||
| 12f68a7f80 | |||
| 593a213a6d | |||
| 1ee83646d5 | |||
| f3a198a76d | |||
| d65e580040 | |||
| d473ce04cc | |||
| 99406b1b68 | |||
| abdad4161f | |||
| 8d96e9662b | |||
| 1a943e9759 | |||
| d7d38bb9cb | |||
| f76e9f6bf9 | |||
| a0e793e684 | |||
| 49d734a974 | |||
| 197483813f | |||
| 175fe1a9ab | |||
| aa6a1c15b9 | |||
| bf774c9aa4 | |||
| 0e145a6571 | |||
| bce14ed4af | |||
| 1307e1badf | |||
| 1cab13dadf | |||
| 3f47c367e1 | |||
| b9fc7f7110 | |||
| 3686c55b08 | |||
| c2b4f55880 | |||
| 0c7327af1c | |||
| 5ec3ef0a6a | |||
| ee437ddd0b | |||
| 0f2d3a683b | |||
| 896ac3ffde |
@@ -1,458 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { CreditCard, Apple, Zap, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState("card");
|
||||
const [formData, setFormData] = useState({
|
||||
email: "", firstName: "", lastName: "", address: "", city: "", state: "", zipCode: "", country: "", cardNumber: "", expiryDate: "", cvv: ""});
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Processing payment with method:", paymentMethod);
|
||||
console.log("Form data:", formData);
|
||||
// Payment processing logic would go here
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Continue Shopping", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 py-12 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Page Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Secure Checkout</h1>
|
||||
<p className="text-slate-300">Complete your purchase with our secure payment options</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Checkout Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Shipping Information */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 text-sm">1</span>
|
||||
Shipping Information
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="John"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Doe"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleInputChange}
|
||||
placeholder="123 Main Street"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">City</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
placeholder="New York"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">State/Province</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.state}
|
||||
onChange={handleInputChange}
|
||||
placeholder="NY"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">ZIP/Postal Code</label>
|
||||
<input
|
||||
type="text"
|
||||
name="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={handleInputChange}
|
||||
placeholder="10001"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Country</label>
|
||||
<select
|
||||
name="country"
|
||||
value={formData.country}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
<option value="">Select Country</option>
|
||||
<option value="US">United States</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="UK">United Kingdom</option>
|
||||
<option value="AU">Australia</option>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="FR">France</option>
|
||||
<option value="JP">Japan</option>
|
||||
<option value="CN">China</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Method Selection */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 text-sm">2</span>
|
||||
Payment Method
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{/* Credit Card */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="card"
|
||||
checked={paymentMethod === "card"}
|
||||
onChange={() => setPaymentMethod("card")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<CreditCard className="w-5 h-5 ml-3 text-blue-400" />
|
||||
<span className="ml-3 text-white font-medium">Credit or Debit Card</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Visa, Mastercard, Amex</span>
|
||||
</label>
|
||||
|
||||
{/* Apple Pay */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="apple"
|
||||
checked={paymentMethod === "apple"}
|
||||
onChange={() => setPaymentMethod("apple")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Apple className="w-5 h-5 ml-3 text-slate-300" />
|
||||
<span className="ml-3 text-white font-medium">Apple Pay</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Fast & Secure</span>
|
||||
</label>
|
||||
|
||||
{/* Google Pay */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="google"
|
||||
checked={paymentMethod === "google"}
|
||||
onChange={() => setPaymentMethod("google")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">Google Pay</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Fast & Secure</span>
|
||||
</label>
|
||||
|
||||
{/* PayPal */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="paypal"
|
||||
checked={paymentMethod === "paypal"}
|
||||
onChange={() => setPaymentMethod("paypal")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">PayPal</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Secure Payment</span>
|
||||
</label>
|
||||
|
||||
{/* Stripe */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="stripe"
|
||||
checked={paymentMethod === "stripe"}
|
||||
onChange={() => setPaymentMethod("stripe")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">Stripe</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Multiple Methods</span>
|
||||
</label>
|
||||
|
||||
{/* Klarna (Buy Now Pay Later) */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="klarna"
|
||||
checked={paymentMethod === "klarna"}
|
||||
onChange={() => setPaymentMethod("klarna")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Zap className="w-5 h-5 ml-3 text-yellow-400" />
|
||||
<span className="ml-3 text-white font-medium">Klarna</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Buy Now, Pay Later</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Details (shown only for card payment) */}
|
||||
{paymentMethod === "card" && (
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h3 className="text-lg font-bold text-white mb-4">Card Information</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Card Number</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardNumber"
|
||||
value={formData.cardNumber}
|
||||
onChange={handleInputChange}
|
||||
placeholder="1234 5678 9012 3456"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Expiry Date</label>
|
||||
<input
|
||||
type="text"
|
||||
name="expiryDate"
|
||||
value={formData.expiryDate}
|
||||
onChange={handleInputChange}
|
||||
placeholder="MM/YY"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">CVV</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cvv"
|
||||
value={formData.cvv}
|
||||
onChange={handleInputChange}
|
||||
placeholder="123"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Security Notice */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 flex items-start">
|
||||
<div className="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center flex-shrink-0 mr-4">
|
||||
<svg className="w-6 h-6 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-bold mb-1">Secure Payment</h3>
|
||||
<p className="text-slate-300 text-sm">Your payment information is encrypted and secured with industry-standard SSL technology. We never store full card details on our servers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-4 px-6 rounded-lg transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
Complete Purchase
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Order Summary Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 sticky top-20">
|
||||
<h2 className="text-xl font-bold text-white mb-6">Order Summary</h2>
|
||||
<div className="space-y-4 mb-6 pb-6 border-b border-slate-700">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Supreme Box Logo Hoodie</span>
|
||||
<span className="text-white font-semibold">$345.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Nike Air Max 90</span>
|
||||
<span className="text-white font-semibold">$129.99</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Carhartt WIP Jacket</span>
|
||||
<span className="text-white font-semibold">$159.99</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6 pb-6 border-b border-slate-700">
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Subtotal</span>
|
||||
<span>$634.98</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Shipping</span>
|
||||
<span>$9.99</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Tax</span>
|
||||
<span>$51.49</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-white font-bold text-lg mb-6">
|
||||
<span>Total</span>
|
||||
<span>$696.46</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-900 bg-opacity-30 border border-blue-700 rounded-lg p-4 mb-4">
|
||||
<p className="text-blue-300 text-sm">✓ Free returns within 30 days</p>
|
||||
</div>
|
||||
|
||||
<a href="/shop" className="block text-center text-blue-400 hover:text-blue-300 text-sm font-medium">
|
||||
Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,352 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Heart, Share2, ChevronLeft, Check } from "lucide-react";
|
||||
|
||||
export default function ProductPage() {
|
||||
const params = useParams();
|
||||
const productId = params.id as string;
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 45,
|
||||
description: "Experience timeless style with the Nike Air Max 90 Classic. Featuring the iconic Air Max sole unit and premium leather construction, these sneakers deliver exceptional comfort and durability. Perfect for everyday wear or making a statement with classic sneaker culture."},
|
||||
{
|
||||
id: "prod-002", brand: "Supreme", name: "Box Logo Hoodie", price: "$345.00", rating: 4.9,
|
||||
reviewCount: "521", imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", imageAlt: "Supreme black box logo hoodie", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 12,
|
||||
description: "The Supreme Box Logo Hoodie is an iconic piece of streetwear history. Crafted with premium materials and featuring the legendary box logo, this hoodie represents supreme quality and style. Perfect for collectors and enthusiasts alike."},
|
||||
{
|
||||
id: "prod-003", brand: "Carhartt WIP", name: "Detroit Jacket", price: "$159.99", rating: 4.7,
|
||||
reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", imageAlt: "Carhartt WIP brown Detroit work jacket", category: "Jackets", size: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 28,
|
||||
description: "The Carhartt WIP Detroit Jacket blends timeless workwear heritage with modern streetwear aesthetics. Featuring durable canvas construction and signature Carhartt craftsmanship, this jacket is built to last and designed to impress."},
|
||||
{
|
||||
id: "prod-004", brand: "Stüssy", name: "Classic T-Shirt", price: "$48.00", rating: 4.6,
|
||||
reviewCount: "276", imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", imageAlt: "Stüssy white classic logo t-shirt", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 156,
|
||||
description: "The Stüssy Classic T-Shirt is a wardrobe staple featuring the iconic Stüssy logo. Made from premium cotton, this tee offers exceptional comfort and quality. A versatile piece that pairs well with any outfit."},
|
||||
{
|
||||
id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8,
|
||||
reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12", "13"],
|
||||
stock: 34,
|
||||
description: "Step into the future with the Adidas Ultra Boost 22. Featuring Boost technology and responsive cushioning, these shoes provide ultimate comfort for performance and lifestyle wear. Engineered for excellence."},
|
||||
];
|
||||
|
||||
const product = allProducts.find((p) => p.id === productId);
|
||||
|
||||
const [selectedSize, setSelectedSize] = useState<string | null>(null);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [addedToCart, setAddedToCart] = useState(false);
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-24">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Product not found</h1>
|
||||
<Link href="/shop" className="text-blue-600 hover:underline">
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (selectedSize) {
|
||||
setAddedToCart(true);
|
||||
setTimeout(() => setAddedToCart(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen pt-24 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-6">
|
||||
{/* Breadcrumb */}
|
||||
<Link href="/shop" className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-8">
|
||||
<ChevronLeft size={16} />
|
||||
Back to Shop
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Product Image */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="aspect-square bg-gray-200 rounded-lg">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={`Product view ${i}`}
|
||||
className="w-full h-full object-cover cursor-pointer hover:opacity-75"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Brand and Title */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">{product.brand}</p>
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-2">{product.name}</h1>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<span key={i} className={i < Math.floor(product.rating) ? "text-yellow-400" : "text-gray-300"}>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">({product.reviewCount} reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price and Stock */}
|
||||
<div className="border-t border-b py-4">
|
||||
<p className="text-3xl font-bold mb-2">{product.price}</p>
|
||||
<p className={`text-sm font-medium ${
|
||||
product.stock > 10 ? "text-green-600" : product.stock > 0 ? "text-orange-600" : "text-red-600"
|
||||
}`}>
|
||||
{product.stock > 0 ? (
|
||||
<>
|
||||
<span className="inline-block w-2 h-2 bg-current rounded-full mr-2"></span>
|
||||
{product.stock} in stock
|
||||
</>
|
||||
) : (
|
||||
"Out of stock"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3">Product Description</h2>
|
||||
<p className="text-gray-700 leading-relaxed">{product.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3">Select Size</h2>
|
||||
<div className="grid grid-cols-4 gap-2 mb-4">
|
||||
{product.size.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-3 px-2 rounded-lg border-2 text-center font-medium transition ${
|
||||
selectedSize === size
|
||||
? "border-blue-600 bg-blue-50 text-blue-600"
|
||||
: "border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity and Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center border rounded-lg">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="px-4 py-2 font-medium">{quantity}</span>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add to Cart Button */}
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
disabled={product.stock === 0 || !selectedSize}
|
||||
className={`py-4 px-6 rounded-lg font-semibold text-white text-lg transition flex items-center justify-center gap-2 ${
|
||||
addedToCart
|
||||
? "bg-green-600 hover:bg-green-700"
|
||||
: product.stock === 0 || !selectedSize
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700"
|
||||
}`}
|
||||
>
|
||||
{addedToCart ? (
|
||||
<>
|
||||
<Check size={20} />
|
||||
Added to Cart
|
||||
</>
|
||||
) : (
|
||||
"Add to Cart"
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Wishlist and Share */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`flex-1 py-3 px-4 border-2 rounded-lg font-semibold transition ${
|
||||
isFavorited
|
||||
? "border-red-600 bg-red-50 text-red-600"
|
||||
: "border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Heart size={20} className="inline mr-2" fill={isFavorited ? "currentColor" : "none"} />
|
||||
{isFavorited ? "Saved" : "Save"}
|
||||
</button>
|
||||
<button className="flex-1 py-3 px-4 border-2 border-gray-300 rounded-lg font-semibold hover:border-gray-400 transition">
|
||||
<Share2 size={20} className="inline mr-2" />
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
|
||||
<p>✓ 100% Authentic Guarantee</p>
|
||||
<p>✓ Free Shipping on orders over $100</p>
|
||||
<p>✓ 30-Day Return Policy</p>
|
||||
<p>✓ Secure Checkout</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
313
src/app/products/page.tsx
Normal file
313
src/app/products/page.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Search, Filter, X, Eye, Heart, ShoppingCart } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
|
||||
const [isMobileFilterOpen, setIsMobileFilterOpen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/products" },
|
||||
{ label: "Best Sellers", href: "/products" },
|
||||
{ label: "Brands", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-002", brand: "Supreme", name: "Box Logo Hoodie", price: "$345.00", rating: 4.9,
|
||||
reviewCount: "521", imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", imageAlt: "Supreme black box logo hoodie", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-003", brand: "Carhartt WIP", name: "Detroit Jacket", price: "$159.99", rating: 4.7,
|
||||
reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", imageAlt: "Carhartt WIP brown Detroit work jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-004", brand: "Stüssy", name: "Classic T-Shirt", price: "$48.00", rating: 4.6,
|
||||
reviewCount: "276", imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", imageAlt: "Stüssy white classic logo t-shirt", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8,
|
||||
reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-006", brand: "The North Face", name: "Nuptse Jacket", price: "$229.99", rating: 4.9,
|
||||
reviewCount: "654", imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2", imageAlt: "The North Face Nuptse puffer jacket in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-007", brand: "Nike", name: "Jordan 1 Low OG", price: "$99.99", rating: 4.7,
|
||||
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", imageAlt: "Jordan 1 Low OG sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-008", brand: "Supreme", name: "Arc Logo Cap", price: "$68.00", rating: 4.5,
|
||||
reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg", imageAlt: "Supreme arc logo baseball cap", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-009", brand: "Stüssy", name: "Fleece Pullover", price: "$98.00", rating: 4.8,
|
||||
reviewCount: "203", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg", imageAlt: "Stüssy fleece pullover in grey", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-010", brand: "Adidas", name: "Stan Smith Classic", price: "$89.99", rating: 4.9,
|
||||
reviewCount: "1,240", imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith white leather sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-011", brand: "The North Face", name: "Denali Fleece", price: "$99.99", rating: 4.8,
|
||||
reviewCount: "856", imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg", imageAlt: "The North Face Denali fleece jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-012", brand: "Carhartt WIP", name: "Simple Pant", price: "$54.99", rating: 4.7,
|
||||
reviewCount: "742", imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg", imageAlt: "Carhartt WIP simple pant in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-013", brand: "Vans", name: "Old Skool", price: "$65.00", rating: 4.9,
|
||||
reviewCount: "1,567", imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg", imageAlt: "Vans Old Skool classic skateboard shoe", isFavorited: false,
|
||||
},
|
||||
];
|
||||
|
||||
const selectedProductData = selectedProduct
|
||||
? allProducts.find((p) => p.id === selectedProduct)
|
||||
: null;
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < Math.floor(rating)
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: "fill-gray-300 text-gray-300"
|
||||
}`}
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Cart", href: "/products"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mobile Filter Toggle */}
|
||||
<div className="md:hidden sticky top-20 z-40 bg-opacity-95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex gap-2 p-4 justify-center">
|
||||
<button
|
||||
onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Filter</span>
|
||||
</button>
|
||||
<button className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Product Grid Section */}
|
||||
<div id="products-grid" data-section="products-grid" className="w-full">
|
||||
<ProductCardTwo
|
||||
title="All Products"
|
||||
description="Browse our complete collection of premium fashion items. Use filters to refine your search."
|
||||
tag="Complete Collection"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
products={allProducts}
|
||||
buttons={[]}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Complete products catalog with mobile-first design"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick View Popup Modal */}
|
||||
{selectedProductData && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4"
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-gray-900 rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
className="sticky top-0 right-0 z-10 p-4 float-right bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
|
||||
aria-label="Close quick view"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg min-h-80 md:min-h-96">
|
||||
<img
|
||||
src={selectedProductData.imageSrc}
|
||||
alt={selectedProductData.imageAlt}
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-600 dark:text-blue-400 mb-1">
|
||||
{selectedProductData.brand}
|
||||
</p>
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-2">
|
||||
{selectedProductData.name}
|
||||
</h2>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{renderStars(selectedProductData.rating)}
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedProductData.rating} ({selectedProductData.reviewCount} reviews)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<p className="text-4xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedProductData.price}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for Image Upload Section */}
|
||||
<div className="mb-6 p-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
📷 Additional product images
|
||||
</p>
|
||||
<div className="flex gap-2 justify-center">
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="w-full border-2 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<Heart className="w-5 h-5" />
|
||||
Save for Later
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Card Click Handler - Overlay for Quick View Trigger */}
|
||||
<div className="hidden" id="quick-view-trigger">
|
||||
{allProducts.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
onClick={() => setSelectedProduct(product.id)}
|
||||
className="quick-view-btn"
|
||||
data-product-id={product.id}
|
||||
aria-label={`Quick view ${product.name}`}
|
||||
>
|
||||
<Eye className="w-5 h-5" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import LegalSection from "@/components/legal/LegalSection";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function ShippingAndReturnsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-conditions" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/shipping-and-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shipping-returns-section" data-section="shipping-returns-section">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Shipping & Returns Policy"
|
||||
subtitle="Learn about our shipping options and return procedures"
|
||||
sections={[
|
||||
{
|
||||
heading: "Shipping Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "At garraagarmzz, we offer fast and reliable shipping to ensure your orders arrive safely and on time. We provide multiple shipping options to meet your needs."},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Standard Shipping: 5-7 business days (Free for orders over $50)", "Express Shipping: 2-3 business days ($15.99)", "Overnight Shipping: 1 business day ($29.99)", "International Shipping: 10-21 business days (rates vary by location)"],
|
||||
},
|
||||
{
|
||||
type: "paragraph", text: "All orders are processed within 24 hours of placement. You will receive a tracking number via email once your order has shipped."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Policy", content: [
|
||||
{
|
||||
type: "paragraph", text: "We want you to be completely satisfied with your purchase. If for any reason you are not satisfied, we offer a hassle-free 30-day return policy."},
|
||||
{
|
||||
type: "heading-list", items: [
|
||||
"Return Eligibility: Items must be unworn, unwashed, and in original condition with all tags attached", "Return Window: Returns must be initiated within 30 days of purchase", "Domestic Returns: Free shipping labels are provided for US customers", "International Returns: Return shipping costs are the responsibility of the customer"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Process", content: [
|
||||
{
|
||||
type: "paragraph", text: "Follow these simple steps to initiate a return:"},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Log into your account and select 'Return Item'", "Choose the items you wish to return and provide a reason", "Print the shipping label or arrange pickup", "Pack the items securely in their original packaging", "Ship the package back to us", "Once received and inspected, your refund will be processed within 5-7 business days"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Refunds", content: [
|
||||
{
|
||||
type: "paragraph", text: "Refunds are processed to the original payment method. The time it takes for the refund to appear in your account depends on your financial institution and may take up to 5-10 business days."},
|
||||
{
|
||||
type: "paragraph", text: "Shipping fees are non-refundable unless the return is due to our error or a defective product."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Defective or Damaged Items", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you receive a defective or damaged item, please contact our customer service team immediately. We will arrange a replacement or full refund at no cost to you. Please provide photos of the damage for our records."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Support", content: [
|
||||
{
|
||||
type: "paragraph", text: "For questions about shipping, returns, or to initiate a return, please contact our customer service team at support@garraagarmzz.com or call 1-800-GARRAAG."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,376 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ChevronLeft, Heart, ShoppingCart, Check } from "lucide-react";
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
brand: string;
|
||||
price: number;
|
||||
category: string;
|
||||
sizes: string[];
|
||||
stock: number;
|
||||
image: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Mock product data - in production this would come from a database or API
|
||||
const PRODUCTS_MAP: Record<string, Product> = {
|
||||
"prod-001": {
|
||||
id: "prod-001", name: "Air Max 90 Classic", brand: "Nike", price: 129.99,
|
||||
category: "Sneakers", sizes: ["6", "7", "8", "9", "10", "11", "12", "13"],
|
||||
stock: 15,
|
||||
image: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", description: "Classic Nike Air Max 90 in white and grey leather."},
|
||||
"prod-002": {
|
||||
id: "prod-002", name: "Box Logo Hoodie", brand: "Supreme", price: 345.0,
|
||||
category: "Hoodies", sizes: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 8,
|
||||
image: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", description: "Supreme box logo hoodie in black."},
|
||||
"prod-003": {
|
||||
id: "prod-003", name: "Detroit Jacket", brand: "Carhartt WIP", price: 159.99,
|
||||
category: "Jackets", sizes: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 12,
|
||||
image: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", description: "Carhartt WIP brown Detroit work jacket."},
|
||||
"prod-004": {
|
||||
id: "prod-004", name: "Classic T-Shirt", brand: "Stüssy", price: 48.0,
|
||||
category: "T-Shirts", sizes: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 24,
|
||||
image: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", description: "Stüssy white classic logo t-shirt."},
|
||||
"prod-005": {
|
||||
id: "prod-005", name: "Ultra Boost 22", brand: "Adidas", price: 189.99,
|
||||
category: "Sneakers", sizes: ["6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 10,
|
||||
image: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", description: "Adidas Ultra Boost 22 in black."},
|
||||
};
|
||||
|
||||
export default function ProductDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { productId: string };
|
||||
}) {
|
||||
const product = PRODUCTS_MAP[params.productId];
|
||||
const [selectedSize, setSelectedSize] = useState<string | null>(null);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [addedToCart, setAddedToCart] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Product Not Found</h1>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="text-primary-cta hover:underline font-semibold"
|
||||
>
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
setAddedToCart(true);
|
||||
setTimeout(() => setAddedToCart(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-card">
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
{/* Breadcrumb */}
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-flex items-center gap-2 text-primary-cta hover:text-primary-cta/80 transition mb-8"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
Back to Shop
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-start">
|
||||
<div className="w-full bg-card border border-accent/20 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-primary-cta font-semibold uppercase mb-2">
|
||||
{product.category}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2">
|
||||
{product.name}
|
||||
</h1>
|
||||
<p className="text-xl text-foreground/70 mb-4">{product.brand}</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-4xl font-bold text-foreground">
|
||||
${product.price.toFixed(2)}
|
||||
</span>
|
||||
{product.stock > 0 ? (
|
||||
<span className="text-green-600 font-semibold">In Stock</span>
|
||||
) : (
|
||||
<span className="text-red-600 font-semibold">Out of Stock</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-8 pb-8 border-b border-accent/20">
|
||||
<p className="text-foreground/80 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
<div className="mt-4 text-sm text-foreground/60">
|
||||
<p>• 100% Authentic Product</p>
|
||||
<p>• Free shipping on orders over $100</p>
|
||||
<p>• 30-day money-back guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold text-foreground mb-4">
|
||||
Select Size
|
||||
</label>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{product.sizes.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-3 px-2 rounded-lg border-2 transition font-semibold text-sm ${
|
||||
selectedSize === size
|
||||
? "border-primary-cta bg-primary-cta text-white"
|
||||
: "border-accent/20 bg-card hover:border-primary-cta/50 text-foreground"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold text-foreground mb-4">
|
||||
Quantity
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="px-4 py-2 bg-card border border-accent/20 rounded-lg hover:border-primary-cta/50 transition"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="w-12 text-center font-semibold text-foreground">
|
||||
{quantity}
|
||||
</span>
|
||||
<button
|
||||
onClick={() =>
|
||||
setQuantity(Math.min(product.stock, quantity + 1))
|
||||
}
|
||||
className="px-4 py-2 bg-card border border-accent/20 rounded-lg hover:border-primary-cta/50 transition"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
disabled={!selectedSize || product.stock === 0 || addedToCart}
|
||||
className={`w-full py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition ${
|
||||
addedToCart
|
||||
? "bg-green-600 text-white"
|
||||
: product.stock === 0
|
||||
? "bg-foreground/30 text-foreground/50 cursor-not-allowed"
|
||||
: "bg-primary-cta text-white hover:bg-primary-cta/90"
|
||||
}`}
|
||||
>
|
||||
{addedToCart ? (
|
||||
<>
|
||||
<Check size={20} />
|
||||
Added to Cart
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`w-full py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition ${
|
||||
isFavorited
|
||||
? "bg-red-600/20 text-red-600 border border-red-600/50"
|
||||
: "bg-card border border-accent/20 text-foreground hover:border-primary-cta/50"
|
||||
}`}
|
||||
>
|
||||
<Heart size={20} fill={isFavorited ? "currentColor" : "none"} />
|
||||
{isFavorited ? "Remove from Favorites" : "Add to Favorites"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!selectedSize && product.stock > 0 && (
|
||||
<p className="text-sm text-amber-600 mt-4">Please select a size</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Placeholder Section */}
|
||||
<div className="mt-16 pt-12 border-t border-accent/20">
|
||||
<div className="bg-background/50 border border-accent/20 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">Admin Panel - Product Management</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-foreground/70">
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Product Image Upload</p>
|
||||
<p className="text-xs">Admin can upload/replace product images here</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Title & Description</p>
|
||||
<p className="text-xs">Admin can edit product title and description</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Size Options</p>
|
||||
<p className="text-xs">Admin can add/remove/manage available sizes</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Stock & Pricing</p>
|
||||
<p className="text-xs">Admin can update stock levels and prices</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,191 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import LegalSection from "@/components/legal/LegalSection";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function TermsAndConditionsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-conditions" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/shipping-and-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="terms-conditions-section" data-section="terms-conditions-section">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Terms & Conditions"
|
||||
subtitle="Please read these terms carefully before using our website"
|
||||
sections={[
|
||||
{
|
||||
heading: "1. Acceptance of Terms", content: [
|
||||
{
|
||||
type: "paragraph", text: "By accessing and using the garraagarmzz website and services, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "2. Use License", content: [
|
||||
{
|
||||
type: "paragraph", text: "Permission is granted to temporarily download one copy of the materials (information or software) on the garraagarmzz website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Modify or copy the materials", "Use the materials for any commercial purpose or for any public display", "Attempt to reverse engineer, decompile, or disassemble any software contained on the website", "Remove any copyright or other proprietary notations from the materials", "Transfer the materials to another person or 'mirror' the materials on any other server", "Use the materials as part of any scheme to compete with garraagarmzz"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "3. Disclaimer of Warranties", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials on garraagarmzz are provided on an 'as is' basis. garraagarmzz makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "4. Limitations of Liability", content: [
|
||||
{
|
||||
type: "paragraph", text: "In no event shall garraagarmzz or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on the garraagarmzz website, even if garraagarmzz or an authorized representative has been notified orally or in writing of the possibility of such damage."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "5. Accuracy of Materials", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials appearing on the garraagarmzz website could include technical, typographical, or photographic errors. garraagarmzz does not warrant that any of the materials on the website are accurate, complete, or current. garraagarmzz may make changes to the materials contained on the website at any time without notice."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "6. Materials and Copyright", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials appearing on the garraagarmzz website are copyrighted. No copying or reproduction of the text or images is permitted without prior written consent from garraagarmzz. Unauthorized use of any content may violate copyright, trademark, and other intellectual property laws."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "7. Links to Third-Party Websites", content: [
|
||||
{
|
||||
type: "paragraph", text: "garraagarmzz has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by garraagarmzz of the site. Use of any such linked website is at the user's own risk."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "8. Modifications to Terms", content: [
|
||||
{
|
||||
type: "paragraph", text: "garraagarmzz may revise these terms and conditions for the website at any time without notice. By using this website, you are agreeing to be bound by the then current version of these terms and conditions."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "9. Product Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "All product descriptions, prices, and availability information is subject to change without notice. We strive for accuracy but do not guarantee that all product information is complete or error-free. Images are for illustrative purposes and may not represent exact product appearance."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "10. Account Registration", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you create an account on our website, you agree to provide accurate, current, and complete information. You are responsible for maintaining the confidentiality of your account information and password. You agree to accept responsibility for all activities that occur under your account."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "11. User Conduct", content: [
|
||||
{
|
||||
type: "paragraph", text: "You agree not to use the website in any way that:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Is unlawful or fraudulent", "Violates any intellectual property rights", "Is abusive, offensive, or contains profanity", "Attempts to gain unauthorized access to our systems", "Disrupts the normal operation of the website", "Spreads malware or malicious code"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "12. Governing Law", content: [
|
||||
{
|
||||
type: "paragraph", text: "These terms and conditions are governed by and construed in accordance with the laws of the United States of America, and you irrevocably submit to the exclusive jurisdiction of the courts located in New York, USA."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you have questions about these Terms & Conditions, please contact us at legal@garraagarmzz.com or mail your request to: garraagarmzz Legal Team, 123 Fashion Street, New York, NY 10001."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user