Merge version_2 into main #2
@@ -1,13 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
||||
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Heart, CheckCircle, Users } from "lucide-react";
|
||||
import { Heart, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
@@ -17,6 +16,48 @@ export default function AboutPage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?sort=new" },
|
||||
{ label: "Collections", href: "/shop?filter=collection" },
|
||||
{ label: "Sale", href: "/shop?filter=sale" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Craft", href: "/about" },
|
||||
{ label: "Sustainability", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-policy" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Pinterest", href: "https://pinterest.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -31,39 +72,28 @@ export default function AboutPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Artisan & Co."
|
||||
navItems={navItems}
|
||||
/>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div id="about-craft" data-section="about-craft">
|
||||
<div id="about-section" data-section="about-section">
|
||||
<MetricSplitMediaAbout
|
||||
title="The Art of Handmade Fashion"
|
||||
description="Every piece is a testament to our dedication to quality, sustainability, and artisanal craftsmanship. We believe in creating fashion that lasts, tells a story, and celebrates the beauty of human creativity."
|
||||
tag="Our Story"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-tailor-workplace-background-with-fabric_23-2148827131.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-tailor-workplace-background-with-fabric_23-2148827131.jpg?_wi=1"
|
||||
imageAlt="Artisan founder in studio creating handmade garments"
|
||||
mediaAnimation="opacity"
|
||||
metrics={[
|
||||
{
|
||||
value: "500+",
|
||||
title: "Handmade Pieces Sold",
|
||||
},
|
||||
value: "500+", title: "Handmade Pieces Sold"},
|
||||
{
|
||||
value: "8 Years",
|
||||
title: "Crafting Excellence",
|
||||
},
|
||||
value: "8 Years", title: "Crafting Excellence"},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Sustainable Materials",
|
||||
},
|
||||
value: "100%", title: "Sustainable Materials"},
|
||||
{
|
||||
value: "2K+",
|
||||
title: "Satisfied Customers",
|
||||
},
|
||||
value: "2K+", title: "Satisfied Customers"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -72,37 +102,22 @@ export default function AboutPage() {
|
||||
|
||||
<div id="why-choose" data-section="why-choose">
|
||||
<FeatureCardTwentyOne
|
||||
title="Why Choose Handmade"
|
||||
description="Beyond aesthetics, our pieces offer quality, exclusivity, and values that mass-produced fashion simply cannot match."
|
||||
title="Our Commitment"
|
||||
description="We are dedicated to creating pieces that embody quality, exclusivity, and values that mass-produced fashion cannot offer."
|
||||
tag="Quality Assurance"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "uniqueness",
|
||||
title: "One-of-a-Kind Design",
|
||||
content: "Each piece is individually crafted, ensuring that no two garments are exactly alike. Your fashion statement is truly exclusive and reflects your individual style.",
|
||||
},
|
||||
id: "uniqueness", title: "One-of-a-Kind Design", content: "Each piece is individually crafted, ensuring that no two garments are exactly alike. Your fashion statement is truly exclusive and reflects your individual style."},
|
||||
{
|
||||
id: "quality",
|
||||
title: "Premium Materials & Durability",
|
||||
content: "We source only the finest sustainable fabrics and materials. Our pieces are built to last for years, making them a worthy investment in your wardrobe.",
|
||||
},
|
||||
id: "quality", title: "Premium Materials & Durability", content: "We source only the finest sustainable fabrics and materials. Our pieces are built to last for years, making them a worthy investment in your wardrobe."},
|
||||
{
|
||||
id: "craftsmanship",
|
||||
title: "Master Craftsmanship",
|
||||
content: "Our artisans bring decades of combined experience to every stitch. Every detail is meticulously crafted with passion and precision.",
|
||||
},
|
||||
id: "craftsmanship", title: "Master Craftsmanship", content: "Our artisans bring decades of combined experience to every stitch. Every detail is meticulously crafted with passion and precision."},
|
||||
{
|
||||
id: "sustainability",
|
||||
title: "Eco-Conscious Production",
|
||||
content: "We are committed to sustainable practices, using eco-friendly dyes, organic fabrics, and ethical production methods that respect both people and planet.",
|
||||
},
|
||||
id: "sustainability", title: "Eco-Conscious Production", content: "We are committed to sustainable practices, using eco-friendly dyes, organic fabrics, and ethical production methods that respect both people and planet."},
|
||||
{
|
||||
id: "support",
|
||||
title: "Support Independent Artisans",
|
||||
content: "When you buy handmade, you directly support independent creators and small-scale production, fostering genuine human connection and community.",
|
||||
},
|
||||
id: "support", title: "Support Independent Artisans", content: "When you buy handmade, you directly support independent creators and small-scale production, fostering genuine human connection and community."},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
useInvertedBackground={false}
|
||||
@@ -110,156 +125,9 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Loved by Our Community"
|
||||
description="Discover what our customers are saying about their handmade fashion experience and the quality they've come to trust."
|
||||
tag="Customer Stories"
|
||||
tagIcon={Users}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sophie Laurent",
|
||||
role: "Fashion Enthusiast",
|
||||
testimonial: "The quality is absolutely stunning! I received my handmade dress and it exceeded all expectations. The attention to detail and craftsmanship is evident in every stitch. I feel like I'm wearing art.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smiley-woman-presenting-clothes_23-2149731164.jpg?_wi=2",
|
||||
imageAlt: "Sophie Laurent customer testimonial",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Emma Richardson",
|
||||
role: "Sustainable Fashion Advocate",
|
||||
testimonial: "Finally found a brand that aligns with my values! Every piece is beautifully crafted and sustainably made. The customer service is also exceptional. I'm a customer for life.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorimetry-specialist-with-client-colored-fabric-swaps_23-2150461557.jpg?_wi=2",
|
||||
imageAlt: "Emma Richardson customer testimonial",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Clara Mendez",
|
||||
role: "Fashion Designer",
|
||||
testimonial: "As a designer myself, I deeply appreciate the artisanal approach. The fabrics are exquisite, the construction is flawless, and the designs are timeless. Highly recommended!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-plants-vases_23-2147742954.jpg?_wi=2",
|
||||
imageAlt: "Clara Mendez customer testimonial",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jessica Wong",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "I've bought multiple pieces and each one is a treasure. The exclusivity of having one-of-a-kind pieces makes me feel special. Worth every penny and more!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-smiling-consumer-enjoying-shopping_1262-17095.jpg?_wi=2",
|
||||
imageAlt: "Jessica Wong customer testimonial",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Artisan & Co."
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "/shop",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "/shop?sort=new",
|
||||
},
|
||||
{
|
||||
label: "Collections",
|
||||
href: "/shop?filter=collection",
|
||||
},
|
||||
{
|
||||
label: "Sale",
|
||||
href: "/shop?filter=sale",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Our Craft",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Sustainability",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
{
|
||||
label: "Shipping & Returns",
|
||||
href: "/shipping-returns",
|
||||
},
|
||||
{
|
||||
label: "Size Guide",
|
||||
href: "/size-guide",
|
||||
},
|
||||
{
|
||||
label: "Care Instructions",
|
||||
href: "/care-instructions",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{
|
||||
label: "Pinterest",
|
||||
href: "https://pinterest.com",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://facebook.com",
|
||||
},
|
||||
{
|
||||
label: "TikTok",
|
||||
href: "https://tiktok.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
},
|
||||
{
|
||||
label: "Terms & Conditions",
|
||||
href: "/terms",
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "/cookies",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
251
src/app/cart/page.tsx
Normal file
251
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { useState } from "react";
|
||||
import { Trash2, ArrowRight } from "lucide-react";
|
||||
|
||||
export default function CartPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?sort=new" },
|
||||
{ label: "Collections", href: "/shop?filter=collection" },
|
||||
{ label: "Sale", href: "/shop?filter=sale" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Craft", href: "/about" },
|
||||
{ label: "Sustainability", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-policy" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Pinterest", href: "https://pinterest.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [cartItems, setCartItems] = useState([
|
||||
{
|
||||
id: "dress-linen-white", name: "Ethereal Linen Dress", price: "$185", quantity: 1,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=1"},
|
||||
{
|
||||
id: "blouse-embroidery", name: "Embroidered Heritage Blouse", price: "$155", quantity: 2,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=1"},
|
||||
]);
|
||||
|
||||
const handleRemove = (id: string) => {
|
||||
setCartItems(cartItems.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const handleQuantityChange = (id: string, quantity: number) => {
|
||||
if (quantity <= 0) {
|
||||
handleRemove(id);
|
||||
} else {
|
||||
setCartItems(
|
||||
cartItems.map((item) =>
|
||||
item.id === id ? { ...item, quantity } : item
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const calculateTotal = () => {
|
||||
return cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.price.replace("$", ""));
|
||||
return sum + price * item.quantity;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const total = calculateTotal().toFixed(2);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-transparent via-transparent to-transparent">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4">Shopping Cart</h1>
|
||||
<p className="text-lg text-foreground/70">Review your selected handmade pieces before checkout</p>
|
||||
</div>
|
||||
|
||||
{cartItems.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-xl mb-8 text-foreground/70">Your cart is empty</p>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Continue Shopping
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2">
|
||||
<div className="space-y-4">
|
||||
{cartItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex gap-4 p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm"
|
||||
>
|
||||
<div className="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-card">
|
||||
<img
|
||||
src={item.imageSrc}
|
||||
alt={item.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h3 className="font-semibold text-lg mb-1">{item.name}</h3>
|
||||
<p className="text-primary-cta font-medium mb-3">{item.price}</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm text-foreground/70">Quantity:</label>
|
||||
<div className="flex items-center border border-foreground/20 rounded-lg">
|
||||
<button
|
||||
onClick={() =>
|
||||
handleQuantityChange(item.id, item.quantity - 1)
|
||||
}
|
||||
className="px-3 py-1 hover:bg-card transition-colors"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) =>
|
||||
handleQuantityChange(
|
||||
item.id,
|
||||
parseInt(e.target.value) || 1
|
||||
)
|
||||
}
|
||||
className="w-12 px-2 py-1 text-center border-l border-r border-foreground/20 bg-transparent outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleQuantityChange(item.id, item.quantity + 1)
|
||||
}
|
||||
className="px-3 py-1 hover:bg-card transition-colors"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRemove(item.id)}
|
||||
className="self-start p-2 text-foreground/50 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h3 className="text-xl font-semibold mb-6">Order Summary</h3>
|
||||
<div className="space-y-3 mb-6 pb-6 border-b border-foreground/10">
|
||||
{cartItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex justify-between text-sm text-foreground/70"
|
||||
>
|
||||
<span>
|
||||
{item.name} x{item.quantity}
|
||||
</span>
|
||||
<span>
|
||||
${(
|
||||
parseFloat(item.price.replace("$", "")) *
|
||||
item.quantity
|
||||
).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-foreground/70">Subtotal</span>
|
||||
<span>${total}</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-4">
|
||||
<span className="text-foreground/70">Shipping</span>
|
||||
<span className="text-sm">Calculated at checkout</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-lg font-semibold">
|
||||
<span>Estimated Total</span>
|
||||
<span>${total}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href="/checkout"
|
||||
className="w-full block text-center px-6 py-3 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity mb-3"
|
||||
>
|
||||
Proceed to Checkout
|
||||
</Link>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="w-full block text-center px-6 py-3 border border-primary-cta text-primary-cta font-semibold rounded-lg hover:bg-primary-cta/10 transition-colors"
|
||||
>
|
||||
Continue Shopping
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
353
src/app/checkout/page.tsx
Normal file
353
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { useState } from "react";
|
||||
import { CheckCircle, Lock, Shield } from "lucide-react";
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?sort=new" },
|
||||
{ label: "Collections", href: "/shop?filter=collection" },
|
||||
{ label: "Sale", href: "/shop?filter=sale" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Craft", href: "/about" },
|
||||
{ label: "Sustainability", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-policy" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Pinterest", href: "https://pinterest.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [orderComplete, setOrderComplete] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
email: "", firstName: "", lastName: "", address: "", city: "", state: "", zipCode: "", country: "", cardNumber: "", cardExpiry: "", cardCvc: ""});
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setOrderComplete(true);
|
||||
};
|
||||
|
||||
const total = "$340.00";
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-transparent via-transparent to-transparent">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
{orderComplete ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="flex justify-center mb-6">
|
||||
<CheckCircle className="w-16 h-16 text-green-500" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-4">Order Confirmed!</h1>
|
||||
<p className="text-lg text-foreground/70 mb-2">Thank you for your purchase</p>
|
||||
<p className="text-foreground/60 mb-8">
|
||||
Order confirmation has been sent to your email
|
||||
</p>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-block px-8 py-3 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Continue Shopping
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4">Checkout</h1>
|
||||
<p className="text-lg text-foreground/70">Complete your purchase securely</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Contact Information */}
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h2 className="text-xl font-semibold mb-6">Contact Information</h2>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shipping Address */}
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h2 className="text-xl font-semibold mb-6">Shipping Address</h2>
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">City</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">State</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.state}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">ZIP Code</label>
|
||||
<input
|
||||
type="text"
|
||||
name="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Country</label>
|
||||
<select
|
||||
name="country"
|
||||
value={formData.country}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Information */}
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5" />
|
||||
Payment Information
|
||||
</h2>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Card Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardNumber"
|
||||
value={formData.cardNumber}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
placeholder="1234 5678 9012 3456"
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Expiry Date
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardExpiry"
|
||||
value={formData.cardExpiry}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
placeholder="MM/YY"
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">CVC</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardCvc"
|
||||
value={formData.cardCvc}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
placeholder="123"
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Security Badge */}
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-foreground/60">
|
||||
<Shield className="w-4 h-4" />
|
||||
Your payment information is encrypted and secure
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h3 className="text-xl font-semibold mb-6">Order Summary</h3>
|
||||
<div className="space-y-3 mb-6 pb-6 border-b border-foreground/10">
|
||||
<div className="flex justify-between">
|
||||
<span>Ethereal Linen Dress x1</span>
|
||||
<span>$185.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Embroidered Heritage Blouse x2</span>
|
||||
<span>$310.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 mb-6 pb-6 border-b border-foreground/10">
|
||||
<div className="flex justify-between text-foreground/70">
|
||||
<span>Subtotal</span>
|
||||
<span>$495.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-foreground/70">
|
||||
<span>Shipping</span>
|
||||
<span>-$155.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-foreground/70">
|
||||
<span>Tax</span>
|
||||
<span>$0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xl font-semibold mb-6">
|
||||
<span>Total</span>
|
||||
<span>{total}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="w-full px-6 py-3 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Complete Purchase
|
||||
</button>
|
||||
<Link
|
||||
href="/cart"
|
||||
className="block text-center text-sm text-primary-cta hover:underline mt-3"
|
||||
>
|
||||
Return to Cart
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Mail, Heart, CheckCircle, Star, Users, HelpCircle } from "lucide-react";
|
||||
import { Mail, Phone, MapPin } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
@@ -35,7 +36,7 @@ export default function ContactPage() {
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-policy" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
@@ -57,6 +58,23 @@ export default function ContactPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", subject: "", message: ""});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
setFormData({ name: "", email: "", subject: "", message: "" });
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -71,72 +89,173 @@ export default function ContactPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="Artisan & Co." navItems={navItems} />
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div id="contact-section" data-section="contact-section">
|
||||
<div className="min-h-screen bg-gradient-to-b from-transparent via-transparent to-transparent">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="mb-16">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4">Get In Touch</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
We'd love to hear from you. Send us a message and we'll respond as soon as possible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
|
||||
{/* Contact Info Cards */}
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Mail className="w-6 h-6 text-primary-cta" />
|
||||
<h3 className="text-lg font-semibold">Email</h3>
|
||||
</div>
|
||||
<p className="text-foreground/70 mb-2">hello@artisanandco.com</p>
|
||||
<p className="text-sm text-foreground/60">We'll respond within 24 hours</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Phone className="w-6 h-6 text-primary-cta" />
|
||||
<h3 className="text-lg font-semibold">Phone</h3>
|
||||
</div>
|
||||
<p className="text-foreground/70 mb-2">+1 (555) 123-4567</p>
|
||||
<p className="text-sm text-foreground/60">Monday–Friday, 9am–6pm EST</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<MapPin className="w-6 h-6 text-primary-cta" />
|
||||
<h3 className="text-lg font-semibold">Studio</h3>
|
||||
</div>
|
||||
<p className="text-foreground/70 mb-2">123 Artisan Lane</p>
|
||||
<p className="text-sm text-foreground/60">New York, NY 10001</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="p-8 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h2 className="text-2xl font-semibold mb-6">Send us a Message</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors"
|
||||
placeholder="How can we help?"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Message</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta transition-colors resize-none"
|
||||
placeholder="Your message here..."
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
{submitted && (
|
||||
<p className="text-green-500 text-sm text-center">
|
||||
Thank you! We've received your message and will get back to you soon.
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Business Hours & Info */}
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h3 className="text-lg font-semibold mb-4">Business Hours</h3>
|
||||
<div className="space-y-2 text-foreground/70">
|
||||
<p className="flex justify-between">
|
||||
<span>Monday – Friday</span>
|
||||
<span>9:00 AM – 6:00 PM</span>
|
||||
</p>
|
||||
<p className="flex justify-between">
|
||||
<span>Saturday</span>
|
||||
<span>10:00 AM – 4:00 PM</span>
|
||||
</p>
|
||||
<p className="flex justify-between">
|
||||
<span>Sunday</span>
|
||||
<span>Closed</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-card bg-card/50 backdrop-blur-sm">
|
||||
<h3 className="text-lg font-semibold mb-4">Quick Links</h3>
|
||||
<div className="space-y-2">
|
||||
<Link href="/faq" className="block text-primary-cta hover:underline">
|
||||
Frequently Asked Questions
|
||||
</Link>
|
||||
<Link href="/shipping-policy" className="block text-primary-cta hover:underline">
|
||||
Shipping & Returns
|
||||
</Link>
|
||||
<Link href="/about" className="block text-primary-cta hover:underline">
|
||||
About Us
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="newsletter" data-section="newsletter">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Contact Our Artisan Studio"
|
||||
description="Have questions about our handmade pieces, custom orders, or collaboration opportunities? We'd love to hear from you. Reach out anytime."
|
||||
tag="Stay Connected"
|
||||
title="Join Our Artisan Community"
|
||||
description="Subscribe to get exclusive updates on new collections, special releases, and insider stories from our artisan studio."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="By contacting us, you agree to receive our response and relevant communications. We respect your privacy."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive our newsletter and marketing emails. Unsubscribe anytime."
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<section className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold mb-12 text-center">Get in Touch</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||||
<div className="mb-4 flex justify-center">
|
||||
<Mail className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Email</h3>
|
||||
<p className="text-gray-600">hello@artisanandco.com</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||||
<div className="mb-4 flex justify-center">
|
||||
<Heart className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Studio Hours</h3>
|
||||
<p className="text-gray-600">Mon–Fri: 10am–6pm UTC</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||||
<div className="mb-4 flex justify-center">
|
||||
<CheckCircle className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Response Time</h3>
|
||||
<p className="text-gray-600">Within 24–48 hours</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 p-8 bg-purple-50 rounded-lg">
|
||||
<h3 className="text-xl font-semibold mb-4">Custom Orders & Collaborations</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
We offer bespoke tailoring, custom fabric selections, and special collaborations for discerning clients. Contact our studio to discuss your vision.
|
||||
</p>
|
||||
<p className="text-gray-600">Response to custom inquiries: 2–3 business days.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Artisan & Co."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Mail, HelpCircle } from "lucide-react";
|
||||
import { HelpCircle } from "lucide-react";
|
||||
|
||||
export default function FaqPage() {
|
||||
const navItems = [
|
||||
@@ -15,39 +15,6 @@ export default function FaqPage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does it take to create a handmade piece?",
|
||||
content: "Each piece typically takes 2–4 weeks to complete, depending on complexity and customization. This includes sourcing materials, designing, and handcrafting with meticulous attention to detail.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I customize my order?",
|
||||
content: "Absolutely! We offer customization options including size adjustments, color preferences, and fabric choices. Contact us for details on how we can tailor your perfect piece.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What materials do you use?",
|
||||
content: "We exclusively use sustainable, high-quality materials including organic cotton, linen, silk, and ethically-sourced fabrics. All dyes are natural and eco-friendly.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "How should I care for my handmade garment?",
|
||||
content: "Each piece comes with detailed care instructions. Generally, hand wash in cool water with mild detergent, air dry, and iron on low heat. Proper care ensures your piece lasts for years.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes! We ship worldwide. Shipping costs vary by location. Standard international shipping takes 10–15 business days. We also offer expedited options.",
|
||||
},
|
||||
{
|
||||
id: "q6",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for unworn items in original condition. Since each piece is handmade to order, custom pieces may have different terms. See our full policy for details.",
|
||||
},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
@@ -68,7 +35,7 @@ export default function FaqPage() {
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-policy" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
@@ -104,7 +71,7 @@ export default function FaqPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="Artisan & Co." navItems={navItems} />
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
@@ -114,9 +81,26 @@ export default function FaqPage() {
|
||||
tag="Help Center"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={faqItems}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-seamstress-poster-template_23-2149349485.jpg?_wi=3"
|
||||
imageAlt="Clothing size chart measurement guide"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "How long does it take to create a handmade piece?", content: "Each piece typically takes 2-4 weeks to complete, depending on complexity and customization. This includes sourcing materials, designing, and handcrafting with meticulous attention to detail."},
|
||||
{
|
||||
id: "q2", title: "Can I customize my order?", content: "Absolutely! We offer customization options including size adjustments, color preferences, and fabric choices. Contact us for details on how we can tailor your perfect piece."},
|
||||
{
|
||||
id: "q3", title: "What materials do you use?", content: "We exclusively use sustainable, high-quality materials including organic cotton, linen, silk, and ethically-sourced fabrics. All dyes are natural and eco-friendly."},
|
||||
{
|
||||
id: "q4", title: "How should I care for my handmade garment?", content: "Each piece comes with detailed care instructions. Generally, hand wash in cool water with mild detergent, air dry, and iron on low heat. Proper care ensures your piece lasts for years."},
|
||||
{
|
||||
id: "q5", title: "Do you offer international shipping?", content: "Yes! We ship worldwide. Shipping costs vary by location. Standard international shipping takes 10-15 business days. We also offer expedited options."},
|
||||
{
|
||||
id: "q6", title: "What is your return policy?", content: "We offer a 30-day return policy for unworn items in original condition. Since each piece is handmade to order, custom pieces may have different terms. See our full policy for details."},
|
||||
{
|
||||
id: "q7", title: "Do you offer gift wrapping?", content: "Yes! We offer complimentary artisan gift wrapping for all orders. Your package will arrive beautifully presented and ready to give."},
|
||||
{
|
||||
id: "q8", title: "How can I track my order?", content: "You'll receive a tracking number via email once your order ships. You can use this number to monitor your package's journey from our studio to your door."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-seamstress-poster-template_23-2149349485.jpg?_wi=1"
|
||||
imageAlt="Size and fitting guide for handmade clothing"
|
||||
mediaAnimation="opacity"
|
||||
mediaPosition="right"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -127,11 +111,8 @@ export default function FaqPage() {
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Artisan & Co."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
217
src/app/page.tsx
217
src/app/page.tsx
@@ -89,31 +89,22 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop the Collection",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Shop the Collection", href: "/shop"},
|
||||
{
|
||||
text: "Discover Our Story",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Discover Our Story", href: "/shop"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647266.jpg?_wi=1",
|
||||
imageAlt: "Handmade dress on model showcasing artisan craftsmanship",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647266.jpg?_wi=1", imageAlt: "Handmade dress on model showcasing artisan craftsmanship"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-barter-event-exchange-goods_23-2150208200.jpg?_wi=1",
|
||||
imageAlt: "Artisan hands crafting textile with precision",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-barter-event-exchange-goods_23-2150208200.jpg?_wi=1", imageAlt: "Artisan hands crafting textile with precision"},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
rating={5}
|
||||
ratingText="Trusted by 2,000+ fashion enthusiasts"
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -126,92 +117,34 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Products",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "View All Products", href: "/shop"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "dress-linen-white",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Ethereal Linen Dress",
|
||||
price: "$185",
|
||||
rating: 5,
|
||||
reviewCount: "24 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=1",
|
||||
imageAlt: "Ethereal white linen handmade dress",
|
||||
},
|
||||
id: "dress-linen-white", brand: "Artisan & Co.", name: "Ethereal Linen Dress", price: "$185", rating: 5,
|
||||
reviewCount: "24 reviews", imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=1", imageAlt: "Ethereal white linen handmade dress"},
|
||||
{
|
||||
id: "dress-earth-tones",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Earth Harmony Dress",
|
||||
price: "$195",
|
||||
rating: 5,
|
||||
reviewCount: "18 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=1",
|
||||
imageAlt: "Earth-toned handcrafted dress",
|
||||
},
|
||||
id: "dress-earth-tones", brand: "Artisan & Co.", name: "Earth Harmony Dress", price: "$195", rating: 5,
|
||||
reviewCount: "18 reviews", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=1", imageAlt: "Earth-toned handcrafted dress"},
|
||||
{
|
||||
id: "blouse-embroidery",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Embroidered Heritage Blouse",
|
||||
price: "$155",
|
||||
rating: 5,
|
||||
reviewCount: "32 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=1",
|
||||
imageAlt: "Handmade embroidered blouse with artisan detail",
|
||||
},
|
||||
id: "blouse-embroidery", brand: "Artisan & Co.", name: "Embroidered Heritage Blouse", price: "$155", rating: 5,
|
||||
reviewCount: "32 reviews", imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=1", imageAlt: "Handmade embroidered blouse with artisan detail"},
|
||||
{
|
||||
id: "blouse-premium",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Premium Silk Blouse",
|
||||
price: "$165",
|
||||
rating: 5,
|
||||
reviewCount: "27 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=1",
|
||||
imageAlt: "Premium handcrafted silk blouse",
|
||||
},
|
||||
id: "blouse-premium", brand: "Artisan & Co.", name: "Premium Silk Blouse", price: "$165", rating: 5,
|
||||
reviewCount: "27 reviews", imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=1", imageAlt: "Premium handcrafted silk blouse"},
|
||||
{
|
||||
id: "set-matching-1",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Matching Luxury Set",
|
||||
price: "$245",
|
||||
rating: 5,
|
||||
reviewCount: "15 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg?_wi=1",
|
||||
imageAlt: "Exclusive matching set artisan coordination",
|
||||
},
|
||||
id: "set-matching-1", brand: "Artisan & Co.", name: "Matching Luxury Set", price: "$245", rating: 5,
|
||||
reviewCount: "15 reviews", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg?_wi=1", imageAlt: "Exclusive matching set artisan coordination"},
|
||||
{
|
||||
id: "set-matching-2",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Sustainable Coordinate Set",
|
||||
price: "$255",
|
||||
rating: 5,
|
||||
reviewCount: "12 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478950.jpg?_wi=1",
|
||||
imageAlt: "Handmade sustainable matching pieces",
|
||||
},
|
||||
id: "set-matching-2", brand: "Artisan & Co.", name: "Sustainable Coordinate Set", price: "$255", rating: 5,
|
||||
reviewCount: "12 reviews", imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478950.jpg?_wi=1", imageAlt: "Handmade sustainable matching pieces"},
|
||||
{
|
||||
id: "accessory-textile-1",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Artisan Textile Wrap",
|
||||
price: "$85",
|
||||
rating: 5,
|
||||
reviewCount: "41 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305939.jpg?_wi=1",
|
||||
imageAlt: "Handmade artisan textile accessory",
|
||||
},
|
||||
id: "accessory-textile-1", brand: "Artisan & Co.", name: "Artisan Textile Wrap", price: "$85", rating: 5,
|
||||
reviewCount: "41 reviews", imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305939.jpg?_wi=1", imageAlt: "Handmade artisan textile accessory"},
|
||||
{
|
||||
id: "accessory-textile-2",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Premium Fabric Shawl",
|
||||
price: "$95",
|
||||
rating: 5,
|
||||
reviewCount: "28 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-furoshiki-package_23-2150274516.jpg?_wi=1",
|
||||
imageAlt: "Luxury handcrafted textile shawl",
|
||||
},
|
||||
id: "accessory-textile-2", brand: "Artisan & Co.", name: "Premium Fabric Shawl", price: "$95", rating: 5,
|
||||
reviewCount: "28 reviews", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-furoshiki-package_23-2150274516.jpg?_wi=1", imageAlt: "Luxury handcrafted textile shawl"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -233,21 +166,13 @@ export default function HomePage() {
|
||||
mediaAnimation="opacity"
|
||||
metrics={[
|
||||
{
|
||||
value: "500+",
|
||||
title: "Handmade Pieces Sold",
|
||||
},
|
||||
value: "500+", title: "Handmade Pieces Sold"},
|
||||
{
|
||||
value: "8 Years",
|
||||
title: "Crafting Excellence",
|
||||
},
|
||||
value: "8 Years", title: "Crafting Excellence"},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Sustainable Materials",
|
||||
},
|
||||
value: "100%", title: "Sustainable Materials"},
|
||||
{
|
||||
value: "2K+",
|
||||
title: "Satisfied Customers",
|
||||
},
|
||||
value: "2K+", title: "Satisfied Customers"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -263,30 +188,15 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "uniqueness",
|
||||
title: "One-of-a-Kind Design",
|
||||
content: "Each piece is individually crafted, ensuring that no two garments are exactly alike. Your fashion statement is truly exclusive and reflects your individual style.",
|
||||
},
|
||||
id: "uniqueness", title: "One-of-a-Kind Design", content: "Each piece is individually crafted, ensuring that no two garments are exactly alike. Your fashion statement is truly exclusive and reflects your individual style."},
|
||||
{
|
||||
id: "quality",
|
||||
title: "Premium Materials & Durability",
|
||||
content: "We source only the finest sustainable fabrics and materials. Our pieces are built to last for years, making them a worthy investment in your wardrobe.",
|
||||
},
|
||||
id: "quality", title: "Premium Materials & Durability", content: "We source only the finest sustainable fabrics and materials. Our pieces are built to last for years, making them a worthy investment in your wardrobe."},
|
||||
{
|
||||
id: "craftsmanship",
|
||||
title: "Master Craftsmanship",
|
||||
content: "Our artisans bring decades of combined experience to every stitch. Every detail is meticulously crafted with passion and precision.",
|
||||
},
|
||||
id: "craftsmanship", title: "Master Craftsmanship", content: "Our artisans bring decades of combined experience to every stitch. Every detail is meticulously crafted with passion and precision."},
|
||||
{
|
||||
id: "sustainability",
|
||||
title: "Eco-Conscious Production",
|
||||
content: "We are committed to sustainable practices, using eco-friendly dyes, organic fabrics, and ethical production methods that respect both people and planet.",
|
||||
},
|
||||
id: "sustainability", title: "Eco-Conscious Production", content: "We are committed to sustainable practices, using eco-friendly dyes, organic fabrics, and ethical production methods that respect both people and planet."},
|
||||
{
|
||||
id: "support",
|
||||
title: "Support Independent Artisans",
|
||||
content: "When you buy handmade, you directly support independent creators and small-scale production, fostering genuine human connection and community.",
|
||||
},
|
||||
id: "support", title: "Support Independent Artisans", content: "When you buy handmade, you directly support independent creators and small-scale production, fostering genuine human connection and community."},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
useInvertedBackground={false}
|
||||
@@ -303,37 +213,13 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sophie Laurent",
|
||||
role: "Fashion Enthusiast",
|
||||
testimonial: "The quality is absolutely stunning! I received my handmade dress and it exceeded all expectations. The attention to detail and craftsmanship is evident in every stitch. I feel like I'm wearing art.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smiley-woman-presenting-clothes_23-2149731164.jpg?_wi=1",
|
||||
imageAlt: "Sophie Laurent customer testimonial",
|
||||
},
|
||||
id: "1", name: "Sophie Laurent", role: "Fashion Enthusiast", testimonial: "The quality is absolutely stunning! I received my handmade dress and it exceeded all expectations. The attention to detail and craftsmanship is evident in every stitch. I feel like I'm wearing art.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smiley-woman-presenting-clothes_23-2149731164.jpg?_wi=1", imageAlt: "Sophie Laurent customer testimonial"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Emma Richardson",
|
||||
role: "Sustainable Fashion Advocate",
|
||||
testimonial: "Finally found a brand that aligns with my values! Every piece is beautifully crafted and sustainably made. The customer service is also exceptional. I'm a customer for life.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorimetry-specialist-with-client-colored-fabric-swaps_23-2150461557.jpg?_wi=1",
|
||||
imageAlt: "Emma Richardson customer testimonial",
|
||||
},
|
||||
id: "2", name: "Emma Richardson", role: "Sustainable Fashion Advocate", testimonial: "Finally found a brand that aligns with my values! Every piece is beautifully crafted and sustainably made. The customer service is also exceptional. I'm a customer for life.", imageSrc: "http://img.b2bpic.net/free-photo/colorimetry-specialist-with-client-colored-fabric-swaps_23-2150461557.jpg?_wi=1", imageAlt: "Emma Richardson customer testimonial"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Clara Mendez",
|
||||
role: "Fashion Designer",
|
||||
testimonial: "As a designer myself, I deeply appreciate the artisanal approach. The fabrics are exquisite, the construction is flawless, and the designs are timeless. Highly recommended!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-plants-vases_23-2147742954.jpg?_wi=1",
|
||||
imageAlt: "Clara Mendez customer testimonial",
|
||||
},
|
||||
id: "3", name: "Clara Mendez", role: "Fashion Designer", testimonial: "As a designer myself, I deeply appreciate the artisanal approach. The fabrics are exquisite, the construction is flawless, and the designs are timeless. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-plants-vases_23-2147742954.jpg?_wi=1", imageAlt: "Clara Mendez customer testimonial"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jessica Wong",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "I've bought multiple pieces and each one is a treasure. The exclusivity of having one-of-a-kind pieces makes me feel special. Worth every penny and more!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-smiling-consumer-enjoying-shopping_1262-17095.jpg?_wi=1",
|
||||
imageAlt: "Jessica Wong customer testimonial",
|
||||
},
|
||||
id: "4", name: "Jessica Wong", role: "Entrepreneur", testimonial: "I've bought multiple pieces and each one is a treasure. The exclusivity of having one-of-a-kind pieces makes me feel special. Worth every penny and more!", imageSrc: "http://img.b2bpic.net/free-photo/pensive-smiling-consumer-enjoying-shopping_1262-17095.jpg?_wi=1", imageAlt: "Jessica Wong customer testimonial"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -350,35 +236,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does it take to create a handmade piece?",
|
||||
content: "Each piece typically takes 2-4 weeks to complete, depending on complexity and customization. This includes sourcing materials, designing, and handcrafting with meticulous attention to detail.",
|
||||
},
|
||||
id: "q1", title: "How long does it take to create a handmade piece?", content: "Each piece typically takes 2-4 weeks to complete, depending on complexity and customization. This includes sourcing materials, designing, and handcrafting with meticulous attention to detail."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I customize my order?",
|
||||
content: "Absolutely! We offer customization options including size adjustments, color preferences, and fabric choices. Contact us for details on how we can tailor your perfect piece.",
|
||||
},
|
||||
id: "q2", title: "Can I customize my order?", content: "Absolutely! We offer customization options including size adjustments, color preferences, and fabric choices. Contact us for details on how we can tailor your perfect piece."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What materials do you use?",
|
||||
content: "We exclusively use sustainable, high-quality materials including organic cotton, linen, silk, and ethically-sourced fabrics. All dyes are natural and eco-friendly.",
|
||||
},
|
||||
id: "q3", title: "What materials do you use?", content: "We exclusively use sustainable, high-quality materials including organic cotton, linen, silk, and ethically-sourced fabrics. All dyes are natural and eco-friendly."},
|
||||
{
|
||||
id: "q4",
|
||||
title: "How should I care for my handmade garment?",
|
||||
content: "Each piece comes with detailed care instructions. Generally, hand wash in cool water with mild detergent, air dry, and iron on low heat. Proper care ensures your piece lasts for years.",
|
||||
},
|
||||
id: "q4", title: "How should I care for my handmade garment?", content: "Each piece comes with detailed care instructions. Generally, hand wash in cool water with mild detergent, air dry, and iron on low heat. Proper care ensures your piece lasts for years."},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes! We ship worldwide. Shipping costs vary by location. Standard international shipping takes 10-15 business days. We also offer expedited options.",
|
||||
},
|
||||
id: "q5", title: "Do you offer international shipping?", content: "Yes! We ship worldwide. Shipping costs vary by location. Standard international shipping takes 10-15 business days. We also offer expedited options."},
|
||||
{
|
||||
id: "q6",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for unworn items in original condition. Since each piece is handmade to order, custom pieces may have different terms. See our full policy for details.",
|
||||
},
|
||||
id: "q6", title: "What is your return policy?", content: "We offer a 30-day return policy for unworn items in original condition. Since each piece is handmade to order, custom pieces may have different terms. See our full policy for details."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-seamstress-poster-template_23-2149349485.jpg?_wi=1"
|
||||
imageAlt="Size and fitting guide for handmade clothing"
|
||||
@@ -402,8 +270,7 @@ export default function HomePage() {
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive our newsletter and marketing emails. Unsubscribe anytime."
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Star, HelpCircle } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Star, Heart, ShoppingCart, Sparkles, Mail } from "lucide-react";
|
||||
|
||||
export default function ProductPage() {
|
||||
const params = useParams();
|
||||
const productId = params.id as string;
|
||||
interface Review {
|
||||
id: string;
|
||||
author: string;
|
||||
rating: number;
|
||||
title: string;
|
||||
content: string;
|
||||
date: string;
|
||||
verified: boolean;
|
||||
}
|
||||
|
||||
interface ProductImage {
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
rating: number;
|
||||
reviewCount: number;
|
||||
description: string;
|
||||
longDescription: string;
|
||||
images: ProductImage[];
|
||||
details: { label: string; value: string }[];
|
||||
reviews: Review[];
|
||||
inStock: boolean;
|
||||
brand: string;
|
||||
}
|
||||
|
||||
const productData: { [key: string]: Product } = {
|
||||
"dress-linen-white": {
|
||||
id: "dress-linen-white", brand: "Artisan & Co.", name: "Ethereal Linen Dress", price: "$185", rating: 4.8,
|
||||
reviewCount: 24,
|
||||
description: "Handcrafted with premium organic linen, this ethereal dress features delicate seaming and a flowing silhouette.", longDescription: "Our Ethereal Linen Dress is meticulously handcrafted from pure organic linen, sourced from sustainable farms. Each dress is individually constructed with attention to every detail, from the hand-finished seams to the graceful drape. This timeless piece works beautifully for casual summer days or elevated occasions.", images: [
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=1", alt: "Ethereal white linen handmade dress - front view"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=1", alt: "Ethereal white linen handmade dress - side view"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=1", alt: "Ethereal white linen handmade dress - worn"},
|
||||
],
|
||||
details: [
|
||||
{ label: "Material", value: "100% Organic Linen" },
|
||||
{ label: "Color", value: "Natural White" },
|
||||
{ label: "Sizes", value: "XS - XL" },
|
||||
{ label: "Care", value: "Hand wash in cool water" },
|
||||
{ label: "Production Time", value: "3-4 weeks" },
|
||||
],
|
||||
reviews: [
|
||||
{
|
||||
id: "1", author: "Sophie Laurent", rating: 5,
|
||||
title: "Exceeded All Expectations", content: "The quality is absolutely stunning! I received my handmade dress and it exceeded all expectations. The attention to detail and craftsmanship is evident in every stitch. I feel like I'm wearing art.", date: "2 weeks ago", verified: true,
|
||||
},
|
||||
{
|
||||
id: "2", author: "Maria Chen", rating: 5,
|
||||
title: "Perfect Summer Dress", content: "This dress is perfect for summer! The linen is so soft and breathable. It feels luxurious and looks elegant. I've already received several compliments.", date: "1 month ago", verified: true,
|
||||
},
|
||||
{
|
||||
id: "3", author: "Caroline Williams", rating: 4,
|
||||
title: "Beautiful but Requires Care", content: "Gorgeous dress with impeccable craftsmanship. Just note that linen does wrinkle, which is part of its charm. Runs a bit loose, so consider sizing down.", date: "6 weeks ago", verified: true,
|
||||
},
|
||||
{
|
||||
id: "4", author: "Jessica Wong", rating: 5,
|
||||
title: "Investment Piece", content: "I've bought multiple pieces and each one is a treasure. The exclusivity of having one-of-a-kind pieces makes me feel special. Worth every penny!", date: "2 months ago", verified: true,
|
||||
},
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
"dress-earth-tones": {
|
||||
id: "dress-earth-tones", brand: "Artisan & Co.", name: "Earth Harmony Dress", price: "$195", rating: 4.9,
|
||||
reviewCount: 18,
|
||||
description: "Woven with earthy tones and sustainable fabrics, this dress celebrates natural beauty and craftsmanship.", longDescription: "The Earth Harmony Dress represents our commitment to sustainability and timeless design. Hand-dyed with natural pigments and constructed from organic cotton-linen blend, each piece is unique. The warm earth tones are achieved through traditional dyeing techniques that are gentle on both fabric and environment.", images: [
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=1", alt: "Earth Harmony Dress - front view"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=1", alt: "Earth Harmony Dress - detail view"},
|
||||
],
|
||||
details: [
|
||||
{ label: "Material", value: "Organic Cotton-Linen Blend" },
|
||||
{ label: "Color", value: "Earth Tones (Hand-Dyed)" },
|
||||
{ label: "Sizes", value: "XS - XL" },
|
||||
{ label: "Care", value: "Hand wash, air dry" },
|
||||
{ label: "Production Time", value: "3-4 weeks" },
|
||||
],
|
||||
reviews: [
|
||||
{
|
||||
id: "1", author: "Emma Richardson", rating: 5,
|
||||
title: "Perfect Sustainable Choice", content: "Finally found a brand that aligns with my values! Every piece is beautifully crafted and sustainably made. The customer service is also exceptional. I'm a customer for life.", date: "3 weeks ago", verified: true,
|
||||
},
|
||||
{
|
||||
id: "2", author: "Amanda Foster", rating: 5,
|
||||
title: "Love the Natural Colors", content: "The earth tones are absolutely gorgeous and so versatile. You can pair this with almost anything. The hand-dyeing gives each piece unique character.", date: "1 month ago", verified: true,
|
||||
},
|
||||
{
|
||||
id: "3", author: "Rachel Green", rating: 4,
|
||||
title: "Great Quality, True to Size", content: "Beautiful dress with excellent craftsmanship. True to size. My only note is that the fabric takes time to soften with washing, but it gets better with age.", date: "2 months ago", verified: true,
|
||||
},
|
||||
],
|
||||
inStock: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProductDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) {
|
||||
const product = productData[params.id];
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [cartMessage, setCartMessage] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
@@ -21,99 +128,104 @@ export default function ProductPage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
// Product details map
|
||||
const productDetails: Record<string, any> = {
|
||||
"dress-linen-white": {
|
||||
title: "Ethereal Linen Dress",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$185",
|
||||
rating: 5,
|
||||
reviewCount: "24 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=3",
|
||||
imageAlt: "Ethereal white linen handmade dress",
|
||||
description: "Experience the perfect blend of elegance and comfort with our Ethereal Linen Dress. Crafted from premium organic linen, this piece features delicate hand-stitching and a timeless silhouette that works for any occasion.",
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?sort=new" },
|
||||
{ label: "Collections", href: "/shop?filter=collection" },
|
||||
{ label: "Sale", href: "/shop?filter=sale" },
|
||||
],
|
||||
},
|
||||
"dress-earth-tones": {
|
||||
title: "Earth Harmony Dress",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$195",
|
||||
rating: 5,
|
||||
reviewCount: "18 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=3",
|
||||
imageAlt: "Earth-toned handcrafted dress",
|
||||
description: "Channel natural beauty with our Earth Harmony Dress. Dyed with sustainable plant-based colors, this dress celebrates the rich tones of nature while maintaining the highest standards of craftsmanship.",
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Craft", href: "/about" },
|
||||
{ label: "Sustainability", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
"blouse-embroidery": {
|
||||
title: "Embroidered Heritage Blouse",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$155",
|
||||
rating: 5,
|
||||
reviewCount: "32 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=3",
|
||||
imageAlt: "Handmade embroidered blouse with artisan detail",
|
||||
description: "A true masterpiece, our Embroidered Heritage Blouse showcases intricate hand embroidery inspired by traditional textile arts. Each thread is placed with precision to create a wearable work of art.",
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
],
|
||||
},
|
||||
"blouse-premium": {
|
||||
title: "Premium Silk Blouse",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$165",
|
||||
rating: 5,
|
||||
reviewCount: "27 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=3",
|
||||
imageAlt: "Premium handcrafted silk blouse",
|
||||
description: "Indulge in luxury with our Premium Silk Blouse. Tailored from pure mulberry silk and hand-finished by master craftspeople, this piece epitomizes refined elegance and timeless sophistication.",
|
||||
{
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Pinterest", href: "https://pinterest.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
],
|
||||
},
|
||||
"set-matching-1": {
|
||||
title: "Matching Luxury Set",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$245",
|
||||
rating: 5,
|
||||
reviewCount: "15 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg?_wi=3",
|
||||
imageAlt: "Exclusive matching set artisan coordination",
|
||||
description: "Complete your wardrobe with our Matching Luxury Set. Perfectly coordinated pieces in complementary colors and textures, designed to work seamlessly together for effortless elegance.",
|
||||
},
|
||||
"set-matching-2": {
|
||||
title: "Sustainable Coordinate Set",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$255",
|
||||
rating: 5,
|
||||
reviewCount: "12 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478950.jpg?_wi=3",
|
||||
imageAlt: "Handmade sustainable matching pieces",
|
||||
description: "Built on sustainability principles, our Coordinate Set combines eco-conscious materials with impeccable design. Each piece is crafted to minimize environmental impact without compromising on style.",
|
||||
},
|
||||
"accessory-textile-1": {
|
||||
title: "Artisan Textile Wrap",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$85",
|
||||
rating: 5,
|
||||
reviewCount: "41 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305939.jpg?_wi=3",
|
||||
imageAlt: "Handmade artisan textile accessory",
|
||||
description: "Add versatility to your wardrobe with our Artisan Textile Wrap. Perfect as a shawl, scarf, or layering piece, this handwoven textile brings texture and sophistication to any ensemble.",
|
||||
},
|
||||
"accessory-textile-2": {
|
||||
title: "Premium Fabric Shawl",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$95",
|
||||
rating: 5,
|
||||
reviewCount: "28 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-furoshiki-package_23-2150274516.jpg?_wi=3",
|
||||
imageAlt: "Luxury handcrafted textile shawl",
|
||||
description: "Wrapped in luxury, our Premium Fabric Shawl is handcrafted from the finest materials. An investment piece that transcends seasons and trends, perfect for both casual and formal occasions.",
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
|
||||
<p className="text-lg mb-8">Sorry, this product doesn't exist.</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
setCartMessage(`Added ${quantity} ${quantity === 1 ? "item" : "items"} to cart!`);
|
||||
setTimeout(() => setCartMessage(""), 3000);
|
||||
};
|
||||
|
||||
const product = productDetails[productId] || {
|
||||
title: "Handcrafted Elegance",
|
||||
brand: "Artisan & Co.",
|
||||
price: "$185",
|
||||
rating: 5,
|
||||
reviewCount: "24 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647266.jpg?_wi=3",
|
||||
imageAlt: "Handmade dress on model showcasing artisan craftsmanship",
|
||||
description: "Discover exclusive, one-of-a-kind pieces made with passion and precision. Every garment tells a story of artisanal craftsmanship.",
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={16}
|
||||
className={i < Math.floor(rating) ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">{rating} ({product.reviewCount} reviews)</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -130,256 +242,196 @@ export default function ProductPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Artisan & Co."
|
||||
navItems={navItems}
|
||||
/>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title={product.title}
|
||||
description={product.description}
|
||||
tag="Artisan Made"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Add to Cart",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Collection",
|
||||
href: "/shop",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt,
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-barter-event-exchange-goods_23-2150208200.jpg?_wi=2",
|
||||
imageAlt: "Artisan hands crafting textile with precision",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
rating={product.rating}
|
||||
ratingText={product.reviewCount}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-7xl mx-auto px-4 py-8 sm:py-12">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-8 flex items-center gap-2 text-sm">
|
||||
<Link href="/" className="text-blue-600 hover:text-blue-700">
|
||||
Home
|
||||
</Link>
|
||||
<span className="text-gray-400">›</span>
|
||||
<Link href="/shop" className="text-blue-600 hover:text-blue-700">
|
||||
Shop
|
||||
</Link>
|
||||
<span className="text-gray-400">›</span>
|
||||
<span className="text-gray-600">{product.name}</span>
|
||||
</div>
|
||||
|
||||
<div id="featured-products" data-section="featured-products">
|
||||
<ProductCardTwo
|
||||
title="Similar Products"
|
||||
description="You might also love these handcrafted pieces from our collection."
|
||||
tag="More Pieces"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore All",
|
||||
href: "/shop",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "dress-linen-white",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Ethereal Linen Dress",
|
||||
price: "$185",
|
||||
rating: 5,
|
||||
reviewCount: "24 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=4",
|
||||
imageAlt: "Ethereal white linen handmade dress",
|
||||
},
|
||||
{
|
||||
id: "dress-earth-tones",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Earth Harmony Dress",
|
||||
price: "$195",
|
||||
rating: 5,
|
||||
reviewCount: "18 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=4",
|
||||
imageAlt: "Earth-toned handcrafted dress",
|
||||
},
|
||||
{
|
||||
id: "blouse-embroidery",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Embroidered Heritage Blouse",
|
||||
price: "$155",
|
||||
rating: 5,
|
||||
reviewCount: "32 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=4",
|
||||
imageAlt: "Handmade embroidered blouse with artisan detail",
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
{/* Main Product Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
{/* Image Gallery */}
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200">
|
||||
<img
|
||||
src={product.images[selectedImage].src}
|
||||
alt={product.images[selectedImage].alt}
|
||||
className="w-full h-96 object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{product.images.map((image, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setSelectedImage(index)}
|
||||
className={`rounded-lg overflow-hidden border-2 transition-all ${
|
||||
selectedImage === index
|
||||
? "border-blue-600"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="w-full h-24 object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<FaqSplitMedia
|
||||
title="Product Information & Care"
|
||||
description="Everything you need to know about this artisan piece and how to care for it."
|
||||
tag="Help Center"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What materials are used in this piece?",
|
||||
content: "This handmade piece is crafted from premium sustainable materials including organic cotton, linen, and natural dyes. Each material is carefully selected for its quality, durability, and eco-friendly properties.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How should I care for my purchase?",
|
||||
content: "Hand wash in cool water with mild detergent. Avoid bleach and harsh chemicals. Air dry in a shaded area. Iron on low heat if needed. Proper care will ensure your piece lasts for years to come.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is this piece customizable?",
|
||||
content: "Yes! We offer customization options including size adjustments, color preferences, and custom embroidery. Contact our team to discuss your specific needs and create a truly personalized piece.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "What is the production timeline?",
|
||||
content: "Each handmade piece typically takes 2-4 weeks to complete from order to shipment. This timeline ensures meticulous craftsmanship and attention to detail. Rush orders may be available upon request.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship worldwide! Standard international shipping takes 10-15 business days. Expedited shipping options are also available. Customs duties and import taxes are the responsibility of the recipient.",
|
||||
},
|
||||
{
|
||||
id: "q6",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for unworn items in original condition. Since our pieces are handmade to order, custom orders may have different terms. Please contact us for specific return details.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-seamstress-poster-template_23-2149349485.jpg?_wi=2"
|
||||
imageAlt="Size and fitting guide for handmade clothing"
|
||||
mediaAnimation="opacity"
|
||||
mediaPosition="right"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showCard={true}
|
||||
/>
|
||||
{/* Product Details */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-2">{product.brand}</p>
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||||
{product.name}
|
||||
</h1>
|
||||
<div className="mb-4">{renderStars(product.rating)}</div>
|
||||
<p className="text-2xl font-semibold text-gray-900">{product.price}</p>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">{product.longDescription}</p>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 space-y-3">
|
||||
{product.details.map((detail, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<span className="text-gray-600">{detail.label}</span>
|
||||
<span className="font-medium text-gray-900">{detail.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stock Status */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${
|
||||
product.inStock ? "bg-green-500" : "bg-red-500"
|
||||
}`}
|
||||
/>
|
||||
<span className={product.inStock ? "text-green-600" : "text-red-600"}>
|
||||
{product.inStock ? "In Stock" : "Out of Stock"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quantity and Add to Cart */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="text-gray-700 font-medium">Quantity:</label>
|
||||
<div className="flex items-center border border-gray-300 rounded-lg">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="px-3 py-2 text-gray-600 hover:bg-gray-100"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
|
||||
className="w-16 text-center py-2 border-0 outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="px-3 py-2 text-gray-600 hover:bg-gray-100"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`px-6 py-3 rounded-lg border-2 transition-all ${
|
||||
isFavorited
|
||||
? "border-red-600 bg-red-50"
|
||||
: "border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
size={20}
|
||||
className={isFavorited ? "fill-red-600 text-red-600" : "text-gray-600"}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{cartMessage && (
|
||||
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
|
||||
{cartMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Customer Reviews Section */}
|
||||
<div id="reviews" data-section="reviews" className="bg-white rounded-lg border border-gray-200 p-8 mb-16">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">Customer Reviews</h2>
|
||||
<p className="text-gray-600">Trusted by {product.reviewCount}+ customers</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{product.reviews.map((review) => (
|
||||
<div key={review.id} className="border-b border-gray-200 pb-6 last:border-b-0">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-semibold text-gray-900">{review.author}</span>
|
||||
{review.verified && (
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">
|
||||
Verified Purchase
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={14}
|
||||
className={i < review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">{review.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">{review.title}</h3>
|
||||
<p className="text-gray-700">{review.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Artisan & Co."
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "/shop",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "/shop?sort=new",
|
||||
},
|
||||
{
|
||||
label: "Collections",
|
||||
href: "/shop?filter=collection",
|
||||
},
|
||||
{
|
||||
label: "Sale",
|
||||
href: "/shop?filter=sale",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Our Craft",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Sustainability",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
{
|
||||
label: "Shipping & Returns",
|
||||
href: "/shipping-returns",
|
||||
},
|
||||
{
|
||||
label: "Size Guide",
|
||||
href: "/size-guide",
|
||||
},
|
||||
{
|
||||
label: "Care Instructions",
|
||||
href: "/care-instructions",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{
|
||||
label: "Pinterest",
|
||||
href: "https://pinterest.com",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://facebook.com",
|
||||
},
|
||||
{
|
||||
label: "TikTok",
|
||||
href: "https://tiktok.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
},
|
||||
{
|
||||
label: "Terms & Conditions",
|
||||
href: "/terms",
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "/cookies",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FooterLogoEmphasis logoText="Artisan & Co." columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Star, Sparkles } from "lucide-react";
|
||||
import { Search, X, Sliders } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const navItems = [
|
||||
@@ -27,18 +27,18 @@ export default function ShopPage() {
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Craft", href: "/about" },
|
||||
{ label: "Sustainability", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Our Craft", href: "/" },
|
||||
{ label: "Sustainability", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "Size Guide", href: "/size-guide" },
|
||||
{ label: "Care Instructions", href: "/care-instructions" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "Size Guide", href: "/" },
|
||||
{ label: "Care Instructions", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -51,13 +51,87 @@ export default function ShopPage() {
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms & Conditions", href: "/" },
|
||||
{ label: "Cookie Policy", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "dress-linen-white", brand: "Artisan & Co.", name: "Ethereal Linen Dress", price: "$185", rating: 5,
|
||||
reviewCount: "24 reviews", imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=1", imageAlt: "Ethereal white linen handmade dress", category: "Dresses", priceRange: "100-200", material: "Linen", size: ["XS", "S", "M", "L"],
|
||||
},
|
||||
{
|
||||
id: "dress-earth-tones", brand: "Artisan & Co.", name: "Earth Harmony Dress", price: "$195", rating: 5,
|
||||
reviewCount: "18 reviews", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=1", imageAlt: "Earth-toned handcrafted dress", category: "Dresses", priceRange: "100-200", material: "Organic Cotton", size: ["S", "M", "L", "XL"],
|
||||
},
|
||||
{
|
||||
id: "blouse-embroidery", brand: "Artisan & Co.", name: "Embroidered Heritage Blouse", price: "$155", rating: 5,
|
||||
reviewCount: "32 reviews", imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=1", imageAlt: "Handmade embroidered blouse with artisan detail", category: "Blouses", priceRange: "100-200", material: "Cotton Blend", size: ["XS", "S", "M", "L", "XL"],
|
||||
},
|
||||
{
|
||||
id: "blouse-premium", brand: "Artisan & Co.", name: "Premium Silk Blouse", price: "$165", rating: 5,
|
||||
reviewCount: "27 reviews", imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=1", imageAlt: "Premium handcrafted silk blouse", category: "Blouses", priceRange: "100-200", material: "Silk", size: ["S", "M", "L"],
|
||||
},
|
||||
{
|
||||
id: "set-matching-1", brand: "Artisan & Co.", name: "Matching Luxury Set", price: "$245", rating: 5,
|
||||
reviewCount: "15 reviews", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg?_wi=1", imageAlt: "Exclusive matching set artisan coordination", category: "Sets", priceRange: "200-300", material: "Linen", size: ["XS", "S", "M", "L"],
|
||||
},
|
||||
{
|
||||
id: "set-matching-2", brand: "Artisan & Co.", name: "Sustainable Coordinate Set", price: "$255", rating: 5,
|
||||
reviewCount: "12 reviews", imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478950.jpg?_wi=1", imageAlt: "Handmade sustainable matching pieces", category: "Sets", priceRange: "200-300", material: "Organic Cotton", size: ["S", "M", "L", "XL"],
|
||||
},
|
||||
{
|
||||
id: "accessory-textile-1", brand: "Artisan & Co.", name: "Artisan Textile Wrap", price: "$85", rating: 5,
|
||||
reviewCount: "41 reviews", imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305939.jpg?_wi=1", imageAlt: "Handmade artisan textile accessory", category: "Accessories", priceRange: "50-100", material: "Wool Blend", size: ["One Size"],
|
||||
},
|
||||
{
|
||||
id: "accessory-textile-2", brand: "Artisan & Co.", name: "Premium Fabric Shawl", price: "$95", rating: 5,
|
||||
reviewCount: "28 reviews", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-furoshiki-package_23-2150274516.jpg?_wi=1", imageAlt: "Luxury handcrafted textile shawl", category: "Accessories", priceRange: "50-100", material: "Silk", size: ["One Size"],
|
||||
},
|
||||
];
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [selectedPrice, setSelectedPrice] = useState("All");
|
||||
const [selectedMaterial, setSelectedMaterial] = useState("All");
|
||||
const [selectedSize, setSelectedSize] = useState("All");
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const categories = ["All", "Dresses", "Blouses", "Sets", "Accessories"];
|
||||
const priceRanges = ["All", "Under $100", "$100-$200", "$200-$300", "$300+"];
|
||||
const materials = ["All", "Linen", "Organic Cotton", "Silk", "Cotton Blend", "Wool Blend"];
|
||||
const sizes = ["All", "XS", "S", "M", "L", "XL", "One Size"];
|
||||
|
||||
const priceRangeMap: { [key: string]: string } = {
|
||||
"Under $100": "0-100", "$100-$200": "100-200", "$200-$300": "200-300", "$300+": "300+"};
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
return allProducts.filter((product) => {
|
||||
const matchesSearch =
|
||||
product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
product.brand.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
|
||||
const matchesPrice =
|
||||
selectedPrice === "All" ||
|
||||
product.priceRange === priceRangeMap[selectedPrice];
|
||||
const matchesMaterial = selectedMaterial === "All" || product.material === selectedMaterial;
|
||||
const matchesSize = selectedSize === "All" || product.size.includes(selectedSize);
|
||||
|
||||
return matchesSearch && matchesCategory && matchesPrice && matchesMaterial && matchesSize;
|
||||
});
|
||||
}, [searchQuery, selectedCategory, selectedPrice, selectedMaterial, selectedSize]);
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("");
|
||||
setSelectedCategory("All");
|
||||
setSelectedPrice("All");
|
||||
setSelectedMaterial("All");
|
||||
setSelectedSize("All");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -75,141 +149,174 @@ export default function ShopPage() {
|
||||
<NavbarStyleApple navItems={navItems} brandName="Artisan & Co." />
|
||||
</div>
|
||||
|
||||
<div id="shop-hero" data-section="shop-hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Our Complete Collection"
|
||||
description="Browse our full range of handmade pieces, each crafted with meticulous attention to detail and premium sustainable materials."
|
||||
tag="Curated by Artisans"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore All",
|
||||
href: "/shop",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647266.jpg?_wi=2",
|
||||
imageAlt: "Handmade collection showcase",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273056.jpg",
|
||||
imageAlt: "Artisan workspace with textile samples",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
rating={5}
|
||||
ratingText="Trusted by 2,000+ customers worldwide"
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-b from-white to-slate-50 pt-8 pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4 font-halant">Shop Our Collection</h1>
|
||||
<p className="text-gray-600 text-lg">Explore our handcrafted pieces, each made with passion and precision.</p>
|
||||
</div>
|
||||
|
||||
<div id="all-products" data-section="all-products">
|
||||
<ProductCardTwo
|
||||
title="All Products"
|
||||
description="Discover our complete collection of handmade clothing and accessories, each piece a testament to artisanal excellence."
|
||||
tag="Full Collection"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Back to Home",
|
||||
href: "/",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "dress-linen-white",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Ethereal Linen Dress",
|
||||
price: "$185",
|
||||
rating: 5,
|
||||
reviewCount: "24 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-ripe-tomatoes-blue-cloth_114579-68525.jpg?_wi=2",
|
||||
imageAlt: "Ethereal white linen handmade dress",
|
||||
},
|
||||
{
|
||||
id: "dress-earth-tones",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Earth Harmony Dress",
|
||||
price: "$195",
|
||||
rating: 5,
|
||||
reviewCount: "18 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-holding-leaf_23-2147781195.jpg?_wi=2",
|
||||
imageAlt: "Earth-toned handcrafted dress",
|
||||
},
|
||||
{
|
||||
id: "blouse-embroidery",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Embroidered Heritage Blouse",
|
||||
price: "$155",
|
||||
rating: 5,
|
||||
reviewCount: "32 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-female-with-blue-eyes-white-clothes_613910-10588.jpg?_wi=2",
|
||||
imageAlt: "Handmade embroidered blouse with artisan detail",
|
||||
},
|
||||
{
|
||||
id: "blouse-premium",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Premium Silk Blouse",
|
||||
price: "$165",
|
||||
rating: 5,
|
||||
reviewCount: "27 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-clothing-thrift-store_23-2150952358.jpg?_wi=2",
|
||||
imageAlt: "Premium handcrafted silk blouse",
|
||||
},
|
||||
{
|
||||
id: "set-matching-1",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Matching Luxury Set",
|
||||
price: "$245",
|
||||
rating: 5,
|
||||
reviewCount: "15 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg?_wi=2",
|
||||
imageAlt: "Exclusive matching set artisan coordination",
|
||||
},
|
||||
{
|
||||
id: "set-matching-2",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Sustainable Coordinate Set",
|
||||
price: "$255",
|
||||
rating: 5,
|
||||
reviewCount: "12 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478950.jpg?_wi=2",
|
||||
imageAlt: "Handmade sustainable matching pieces",
|
||||
},
|
||||
{
|
||||
id: "accessory-textile-1",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Artisan Textile Wrap",
|
||||
price: "$85",
|
||||
rating: 5,
|
||||
reviewCount: "41 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305939.jpg?_wi=2",
|
||||
imageAlt: "Handmade artisan textile accessory",
|
||||
},
|
||||
{
|
||||
id: "accessory-textile-2",
|
||||
brand: "Artisan & Co.",
|
||||
name: "Premium Fabric Shawl",
|
||||
price: "$95",
|
||||
rating: 5,
|
||||
reviewCount: "28 reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-furoshiki-package_23-2150274516.jpg?_wi=2",
|
||||
imageAlt: "Luxury handcrafted textile shawl",
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
{/* Search Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Toggle for Mobile */}
|
||||
<div className="md:hidden mb-6">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg hover:bg-slate-800 transition"
|
||||
>
|
||||
<Sliders size={18} />
|
||||
{showFilters ? "Hide" : "Show"} Filters
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Filters Sidebar */}
|
||||
<div
|
||||
className={`md:col-span-1 ${
|
||||
showFilters ? "block" : "hidden md:block"
|
||||
} bg-white p-6 rounded-lg border border-gray-200 h-fit sticky top-8`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold font-halant">Filters</h2>
|
||||
{(selectedCategory !== "All" ||
|
||||
selectedPrice !== "All" ||
|
||||
selectedMaterial !== "All" ||
|
||||
selectedSize !== "All" ||
|
||||
searchQuery) && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-sm text-slate-600 hover:text-slate-900 flex items-center gap-1"
|
||||
>
|
||||
<X size={16} /> Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold mb-3 text-gray-900">Category</h3>
|
||||
<div className="space-y-2">
|
||||
{categories.map((cat) => (
|
||||
<label key={cat} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="category"
|
||||
value={cat}
|
||||
checked={selectedCategory === cat}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className="w-4 h-4 text-slate-900 cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{cat}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price Filter */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold mb-3 text-gray-900">Price</h3>
|
||||
<div className="space-y-2">
|
||||
{priceRanges.map((price) => (
|
||||
<label key={price} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="price"
|
||||
value={price}
|
||||
checked={selectedPrice === price}
|
||||
onChange={(e) => setSelectedPrice(e.target.value)}
|
||||
className="w-4 h-4 text-slate-900 cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{price}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Material Filter */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold mb-3 text-gray-900">Material</h3>
|
||||
<div className="space-y-2">
|
||||
{materials.map((mat) => (
|
||||
<label key={mat} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="material"
|
||||
value={mat}
|
||||
checked={selectedMaterial === mat}
|
||||
onChange={(e) => setSelectedMaterial(e.target.value)}
|
||||
className="w-4 h-4 text-slate-900 cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{mat}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Filter */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold mb-3 text-gray-900">Size</h3>
|
||||
<div className="space-y-2">
|
||||
{sizes.map((size) => (
|
||||
<label key={size} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
value={size}
|
||||
checked={selectedSize === size}
|
||||
onChange={(e) => setSelectedSize(e.target.value)}
|
||||
className="w-4 h-4 text-slate-900 cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{size}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="md:col-span-3">
|
||||
<div className="mb-6 text-sm text-gray-600">
|
||||
Showing {filteredProducts.length} of {allProducts.length} products
|
||||
</div>
|
||||
|
||||
{filteredProducts.length > 0 ? (
|
||||
<ProductCardTwo
|
||||
products={filteredProducts}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
title=""
|
||||
description=""
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-white p-12 rounded-lg border border-gray-200 text-center">
|
||||
<p className="text-gray-600 text-lg mb-4">No products match your filters.</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="px-6 py-2 bg-slate-900 text-white rounded-lg hover:bg-slate-800 transition"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
|
||||
Reference in New Issue
Block a user