Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 66d0fbc373 | |||
| f153378695 | |||
| 4f1060a9ef | |||
| 6f3fa3f963 | |||
| cc9fc644f0 | |||
| bd344a6fbf | |||
| b498f4b6db | |||
| 645e686406 | |||
| b06f1a8058 | |||
| 97621b52fa | |||
| 86cf0d3ce7 |
@@ -1,12 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { HelpCircle } from "lucide-react";
|
||||
import {
|
||||
Sparkles,
|
||||
Mail,
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "All Collections", href: "/" },
|
||||
{ label: "Sale", href: "/" },
|
||||
{ label: "Gift Cards", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About RAEN", href: "#about" },
|
||||
{ label: "Sustainability", href: "/" },
|
||||
{ label: "Careers", href: "/" },
|
||||
{ label: "Press", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "Size Guide", href: "/" },
|
||||
{ label: "Care Guide", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -26,125 +56,44 @@ export default function ContactPage() {
|
||||
brandName="RAEN"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Collections", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Collections", id: "#collections" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Explore the Collection",
|
||||
href: "/",
|
||||
}}
|
||||
text: "Explore the Collection", href: "#products"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Section - Using FAQ for contact information display */}
|
||||
{/* Contact Section */}
|
||||
<div id="contact" data-section="contact">
|
||||
<FaqBase
|
||||
title="Get in Touch with RAEN"
|
||||
description="Have questions about our collections, membership, or services? We're here to help. Reach out to our team and we'll respond within 24 hours."
|
||||
tag="Contact Us"
|
||||
tagIcon={HelpCircle}
|
||||
<ContactSplit
|
||||
tag="Get In Touch"
|
||||
title="Connect With Our Team"
|
||||
description="Have questions about our collections or services? We're here to help. Reach out to us and we'll get back to you within 24 hours with personalized assistance."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Customer Service",
|
||||
content: "For inquiries about orders, returns, or product information, please contact our customer service team at support@raen-luxury.com or call +1 (555) 123-4567. Our team is available Monday-Friday, 9 AM - 6 PM EST.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Membership & Account",
|
||||
content: "To learn more about our Premium Membership program or manage your account, contact membership@raen-luxury.com. We're happy to help you choose the perfect membership tier for your lifestyle.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Concierge & Bespoke Services",
|
||||
content: "Interested in custom designs or our white-glove Concierge Service? Email concierge@raen-luxury.com or schedule a consultation at your convenience. Our specialists will work with you to create something uniquely yours.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Press & Collaborations",
|
||||
content: "For media inquiries, press releases, or collaboration opportunities, please contact press@raen-luxury.com. We welcome partnerships that align with our values of sustainability and craftsmanship.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Wholesale & B2B",
|
||||
content: "Are you a retailer or business interested in stocking RAEN? Contact our wholesale team at wholesale@raen-luxury.com for partnership opportunities and competitive pricing.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Store Visits & Personal Shopping",
|
||||
content: "Visit our flagship boutique in New York or schedule a virtual personal shopping session with our style consultants. Book an appointment at hello@raen-luxury.com or call +1 (555) 123-4567.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg"
|
||||
imageAlt="RAEN luxury fashion contact"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Send Message"
|
||||
termsText="We respect your privacy. Your message will be kept confidential and used only to assist you."
|
||||
onSubmit={(email) => console.log('Contact form submitted:', email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Contact Information Section */}
|
||||
<div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-20">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Email */}
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-bold mb-2">Email</h3>
|
||||
<p className="text-foreground opacity-70">support@raen-luxury.com</p>
|
||||
</div>
|
||||
{/* Phone */}
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-bold mb-2">Phone</h3>
|
||||
<p className="text-foreground opacity-70">+1 (555) 123-4567</p>
|
||||
</div>
|
||||
{/* Location */}
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-bold mb-2">Address</h3>
|
||||
<p className="text-foreground opacity-70">
|
||||
123 Luxury Avenue<br />
|
||||
New York, NY 10001
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg?_wi=4"
|
||||
imageAlt="RAEN luxury craftsmanship"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "All Collections", href: "/" },
|
||||
{ label: "Sale", href: "/" },
|
||||
{ label: "Gift Cards", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About RAEN", href: "/about" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Guide", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg?_wi=1"
|
||||
imageAlt="luxury fashion atelier studio elegant"
|
||||
columns={footerColumns}
|
||||
logoText="RAEN"
|
||||
copyrightText="© 2025 RAEN Luxury. All rights reserved."
|
||||
/>
|
||||
|
||||
@@ -7,49 +7,31 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const sourceSans3 = Source_Sans_3({
|
||||
variable: "--font-source-sans-3",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-source-sans-3", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "RAEN | Luxury Women's Clothing - Timeless Elegance",
|
||||
description: "Discover RAEN luxury women's clothing. Handcrafted collections of elevated essentials and statement pieces. Premium fabrics, ethical craftsmanship, and timeless design.",
|
||||
keywords: "luxury women's clothing, premium fashion, designer apparel, handcrafted, ethical luxury, premium collections",
|
||||
metadataBase: new URL("https://raen-luxury.com"),
|
||||
title: "RAEN | Luxury Women's Clothing - Timeless Elegance", description: "Discover RAEN luxury women's clothing. Handcrafted collections of elevated essentials and statement pieces. Premium fabrics, ethical craftsmanship, and timeless design.", keywords: "luxury women's clothing, premium fashion, designer apparel, handcrafted, ethical luxury, premium collections", metadataBase: new URL("https://raen-luxury.com"),
|
||||
alternates: {
|
||||
canonical: "https://raen-luxury.com",
|
||||
},
|
||||
canonical: "https://raen-luxury.com"},
|
||||
openGraph: {
|
||||
title: "RAEN - Timeless Luxury Unmistakably",
|
||||
description: "Handcrafted collections designed for the discerning woman. Discover elevated essentials and statement pieces that transcend season.",
|
||||
url: "https://raen-luxury.com",
|
||||
siteName: "RAEN",
|
||||
type: "website",
|
||||
images: [
|
||||
title: "RAEN - Timeless Luxury Unmistakably", description: "Handcrafted collections designed for the discerning woman. Discover elevated essentials and statement pieces that transcend season.", url: "https://raen-luxury.com", siteName: "RAEN", type: "website", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg",
|
||||
alt: "RAEN luxury women's clothing",
|
||||
},
|
||||
url: "http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg", alt: "RAEN luxury women's clothing"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "RAEN | Luxury Women's Fashion",
|
||||
description: "Timeless elegance. Handcrafted luxury collections for discerning women.",
|
||||
images: [
|
||||
"http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg",
|
||||
],
|
||||
card: "summary_large_image", title: "RAEN | Luxury Women's Fashion", description: "Timeless elegance. Handcrafted luxury collections for discerning women.", images: [
|
||||
"http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
|
||||
319
src/app/page.tsx
319
src/app/page.tsx
@@ -30,35 +30,32 @@ export default function HomePage() {
|
||||
{ name: "Shop", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Collections", id: "#collections" },
|
||||
{ name: "Contact", id: "#" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "All Collections", href: "/" },
|
||||
{ label: "Sale", href: "/" },
|
||||
{ label: "Gift Cards", href: "#" },
|
||||
{ label: "Gift Cards", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About RAEN", href: "#about" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
{ label: "Sustainability", href: "/" },
|
||||
{ label: "Careers", href: "/" },
|
||||
{ label: "Press", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Contact Us", href: "#" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Guide", href: "#" },
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "Size Guide", href: "/" },
|
||||
{ label: "Care Guide", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -84,12 +81,10 @@ export default function HomePage() {
|
||||
{ name: "Shop", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Collections", id: "#collections" },
|
||||
{ name: "Contact", id: "#" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Explore the Collection",
|
||||
href: "#products",
|
||||
}}
|
||||
text: "Explore the Collection", href: "#products"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -104,78 +99,54 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore the Collection",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Explore the Collection", href: "#products"},
|
||||
{
|
||||
text: "View Heritage",
|
||||
href: "#about",
|
||||
},
|
||||
text: "View Heritage", href: "#about"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
dashboard={{
|
||||
title: "Luxury Analytics Hub",
|
||||
logoIcon: Package,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg",
|
||||
sidebarItems: [
|
||||
title: "Luxury Analytics Hub", logoIcon: Package,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-color-palette_23-2150538720.jpg", sidebarItems: [
|
||||
{ icon: Home, active: true },
|
||||
{ icon: ShoppingBag },
|
||||
{ icon: Heart },
|
||||
],
|
||||
buttons: [
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
{ text: "View Lookbook", href: "#" },
|
||||
{ text: "View Lookbook", href: "/" },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Collections",
|
||||
values: [12, 15, 18],
|
||||
description: "Curated seasonal pieces",
|
||||
},
|
||||
title: "Collections", values: [12, 15, 18],
|
||||
description: "Curated seasonal pieces"},
|
||||
{
|
||||
title: "Global Reach",
|
||||
values: [28, 35, 42],
|
||||
valueSuffix: " Countries",
|
||||
description: "Shipping worldwide",
|
||||
},
|
||||
title: "Global Reach", values: [28, 35, 42],
|
||||
valueSuffix: " Countries", description: "Shipping worldwide"},
|
||||
{
|
||||
title: "Satisfaction",
|
||||
values: [98, 99, 100],
|
||||
valueSuffix: "%",
|
||||
description: "Customer rating",
|
||||
},
|
||||
title: "Satisfaction", values: [98, 99, 100],
|
||||
valueSuffix: "%", description: "Customer rating"},
|
||||
],
|
||||
chartTitle: "Sales Performance",
|
||||
chartData: [
|
||||
chartTitle: "Sales Performance", chartData: [
|
||||
{ value: 75 },
|
||||
{ value: 85 },
|
||||
{ value: 92 },
|
||||
{ value: 88 },
|
||||
{ value: 95 },
|
||||
],
|
||||
listTitle: "Recent Orders",
|
||||
listItems: [
|
||||
listTitle: "Recent Orders", listItems: [
|
||||
{
|
||||
icon: Package,
|
||||
title: "Silk Essentials Collection",
|
||||
status: "Dispatched",
|
||||
},
|
||||
title: "Silk Essentials Collection", status: "Dispatched"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Premium Denim Set",
|
||||
status: "Delivered",
|
||||
},
|
||||
title: "Premium Denim Set", status: "Delivered"},
|
||||
{
|
||||
icon: Truck,
|
||||
title: "Statement Outerwear",
|
||||
status: "In Transit",
|
||||
},
|
||||
title: "Statement Outerwear", status: "In Transit"},
|
||||
],
|
||||
searchPlaceholder: "Search collections...",
|
||||
}}
|
||||
searchPlaceholder: "Search collections..."}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -189,47 +160,21 @@ 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: "1",
|
||||
name: "Silk Essentials Blouse",
|
||||
price: "$385",
|
||||
variant: "Ivory, Navy, Charcoal - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-dressed-summer-outfit-out-city_1303-15911.jpg?_wi=1",
|
||||
imageAlt: "premium ivory silk blouse elegant",
|
||||
isFavorited: false,
|
||||
id: "1", name: "Silk Essentials Blouse", price: "$385", variant: "Ivory, Navy, Charcoal - 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-dressed-summer-outfit-out-city_1303-15911.jpg?_wi=1", imageAlt: "premium ivory silk blouse elegant", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Tailored Wool Trousers",
|
||||
price: "$495",
|
||||
variant: "Black, Camel, Graphite - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-office_1303-31722.jpg?_wi=1",
|
||||
imageAlt: "tailored black wool trousers professional",
|
||||
isFavorited: false,
|
||||
id: "2", name: "Tailored Wool Trousers", price: "$495", variant: "Black, Camel, Graphite - 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-office_1303-31722.jpg?_wi=1", imageAlt: "tailored black wool trousers professional", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Premium Linen Dress",
|
||||
price: "$425",
|
||||
variant: "White, Sage, Stone - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1",
|
||||
imageAlt: "premium white linen dress elegant",
|
||||
isFavorited: false,
|
||||
id: "3", name: "Premium Linen Dress", price: "$425", variant: "White, Sage, Stone - 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1", imageAlt: "premium white linen dress elegant", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Luxury Cashmere Sweater",
|
||||
price: "$545",
|
||||
variant: "Cream, Charcoal, Caramel - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-walking-beach_23-2150100091.jpg?_wi=1",
|
||||
imageAlt: "luxury cashmere sweater cream elegant",
|
||||
isFavorited: false,
|
||||
id: "4", name: "Luxury Cashmere Sweater", price: "$545", variant: "Cream, Charcoal, Caramel - 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-walking-beach_23-2150100091.jpg?_wi=1", imageAlt: "luxury cashmere sweater cream elegant", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
@@ -249,9 +194,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Discover Heritage",
|
||||
href: "#",
|
||||
},
|
||||
text: "Discover Heritage", href: "/"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/senior-man-looking-male-tailor-taking-fabric-from-shelf-workshop_23-2148180378.jpg?_wi=1"
|
||||
@@ -265,53 +208,23 @@ export default function HomePage() {
|
||||
<FeatureCardTwentySix
|
||||
features={[
|
||||
{
|
||||
title: "Silk Essentials",
|
||||
description: "Timeless basics reimagined in premium silk, from fluid blouses to refined camisoles",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-wearing-dark-blue-white-checkered-cardigan_132075-14012.jpg?_wi=1",
|
||||
imageAlt: "silk clothing collection luxury elegant",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Silk Essentials", description: "Timeless basics reimagined in premium silk, from fluid blouses to refined camisoles", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-wearing-dark-blue-white-checkered-cardigan_132075-14012.jpg?_wi=1", imageAlt: "silk clothing collection luxury elegant", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
{
|
||||
title: "Tailored Structure",
|
||||
description: "Precision-cut blazers, trousers, and skirts designed to flatter and empower",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groom-preparing-his-wedding_1303-28302.jpg?_wi=1",
|
||||
imageAlt: "tailored blazer collection professional luxury",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Tailored Structure", description: "Precision-cut blazers, trousers, and skirts designed to flatter and empower", imageSrc: "http://img.b2bpic.net/free-photo/groom-preparing-his-wedding_1303-28302.jpg?_wi=1", imageAlt: "tailored blazer collection professional luxury", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
{
|
||||
title: "Luxe Knitwear",
|
||||
description: "Hand-finished cashmere and merino pieces for elevated comfort and sophistication",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-pullovers-pine-cones-with-copy-space_23-2148791080.jpg?_wi=1",
|
||||
imageAlt: "luxury cashmere knitwear collection elegant",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Luxe Knitwear", description: "Hand-finished cashmere and merino pieces for elevated comfort and sophistication", imageSrc: "http://img.b2bpic.net/free-photo/front-view-pullovers-pine-cones-with-copy-space_23-2148791080.jpg?_wi=1", imageAlt: "luxury cashmere knitwear collection elegant", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
{
|
||||
title: "Statement Outerwear",
|
||||
description: "Architectural coats and jackets that define the silhouette and season",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-14026.jpg?_wi=1",
|
||||
imageAlt: "statement coat collection luxury fashion",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Statement Outerwear", description: "Architectural coats and jackets that define the silhouette and season", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-14026.jpg?_wi=1", imageAlt: "statement coat collection luxury fashion", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
{
|
||||
title: "Evening Elegance",
|
||||
description: "Refined gowns and formal wear crafted for unforgettable moments",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-fashion-designer-holding-coat-with-his-customer-sitting-chair-shop_23-2148180341.jpg?_wi=1",
|
||||
imageAlt: "elegant evening gown collection luxury",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Evening Elegance", description: "Refined gowns and formal wear crafted for unforgettable moments", imageSrc: "http://img.b2bpic.net/free-photo/male-fashion-designer-holding-coat-with-his-customer-sitting-chair-shop_23-2148180341.jpg?_wi=1", imageAlt: "elegant evening gown collection luxury", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
{
|
||||
title: "Accessories & Details",
|
||||
description: "Curated accessories and finishing touches that complete every ensemble",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halloween-decor-white-table-black-surface_176420-9109.jpg?_wi=1",
|
||||
imageAlt: "luxury fashion accessories collection flat lay",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop",
|
||||
},
|
||||
title: "Accessories & Details", description: "Curated accessories and finishing touches that complete every ensemble", imageSrc: "http://img.b2bpic.net/free-photo/halloween-decor-white-table-black-surface_176420-9109.jpg?_wi=1", imageAlt: "luxury fashion accessories collection flat lay", buttonIcon: ArrowRight,
|
||||
buttonHref: "/shop"},
|
||||
]}
|
||||
title="Signature Collections"
|
||||
description="Explore our carefully curated seasonal collections, each telling a unique story of elegance and sophistication"
|
||||
@@ -320,9 +233,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop All Collections",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Shop All Collections", href: "/shop"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -340,32 +251,14 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Victoria Chen",
|
||||
role: "Creative Director",
|
||||
company: "Design Studio NYC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9654.jpg",
|
||||
imageAlt: "professional women creative director portrait",
|
||||
},
|
||||
id: "1", name: "Victoria Chen", role: "Creative Director", company: "Design Studio NYC", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9654.jpg", imageAlt: "professional women creative director portrait"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sophie Laurent",
|
||||
role: "Fashion Executive",
|
||||
company: "Luxury Retail Group",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing_1303-3781.jpg",
|
||||
imageAlt: "elegant luxury retail executive portrait",
|
||||
},
|
||||
id: "2", name: "Sophie Laurent", role: "Fashion Executive", company: "Luxury Retail Group", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing_1303-3781.jpg", imageAlt: "elegant luxury retail executive portrait"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Amelia Richardson",
|
||||
role: "Entrepreneur",
|
||||
company: "Tech Ventures",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-dark-wall-concept-stylish-clothes-sophistication_78826-3092.jpg",
|
||||
imageAlt: "professional entrepreneur woman portrait photo",
|
||||
},
|
||||
id: "3", name: "Amelia Richardson", role: "Entrepreneur", company: "Tech Ventures", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-dark-wall-concept-stylish-clothes-sophistication_78826-3092.jpg", imageAlt: "professional entrepreneur woman portrait photo"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "10,000+", label: "Satisfied Customers" },
|
||||
@@ -384,62 +277,22 @@ export default function HomePage() {
|
||||
<PricingCardFive
|
||||
plans={[
|
||||
{
|
||||
id: "individual",
|
||||
tag: "Ready-to-Wear",
|
||||
price: "$385",
|
||||
period: "- $695",
|
||||
description: "Individual pieces and seasonal collections, available for immediate purchase",
|
||||
button: {
|
||||
text: "Browse Collection",
|
||||
href: "/shop",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Full seasonal collections",
|
||||
"Free standard shipping on orders over $500",
|
||||
"30-day return policy",
|
||||
"Access to styling guides",
|
||||
],
|
||||
id: "individual", tag: "Ready-to-Wear", price: "$385", period: "- $695", description: "Individual pieces and seasonal collections, available for immediate purchase", button: {
|
||||
text: "Browse Collection", href: "/shop"},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Full seasonal collections", "Free standard shipping on orders over $500", "30-day return policy", "Access to styling guides"],
|
||||
},
|
||||
{
|
||||
id: "membership",
|
||||
tag: "Premium Membership",
|
||||
price: "$199",
|
||||
period: "/year",
|
||||
description: "Exclusive early access and special pricing for our most loyal customers",
|
||||
button: {
|
||||
text: "Join Membership",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Early access to new collections",
|
||||
"15% discount on all purchases",
|
||||
"Free 2-day shipping worldwide",
|
||||
"Personal styling consultations",
|
||||
"Exclusive member-only events",
|
||||
"Complimentary alterations",
|
||||
],
|
||||
id: "membership", tag: "Premium Membership", price: "$199", period: "/year", description: "Exclusive early access and special pricing for our most loyal customers", button: {
|
||||
text: "Join Membership", href: "/"},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Early access to new collections", "15% discount on all purchases", "Free 2-day shipping worldwide", "Personal styling consultations", "Exclusive member-only events", "Complimentary alterations"],
|
||||
},
|
||||
{
|
||||
id: "concierge",
|
||||
tag: "Concierge Service",
|
||||
price: "Custom",
|
||||
period: "pricing",
|
||||
description: "White-glove service for bespoke and custom orders, curated exclusively for you",
|
||||
button: {
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Personal style consultation",
|
||||
"Bespoke and custom design",
|
||||
"Priority access to limited pieces",
|
||||
"Dedicated account manager",
|
||||
"Global concierge services",
|
||||
"VIP event invitations",
|
||||
],
|
||||
id: "concierge", tag: "Concierge Service", price: "Custom", period: "pricing", description: "White-glove service for bespoke and custom orders, curated exclusively for you", button: {
|
||||
text: "Schedule Consultation", href: "/"},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Personal style consultation", "Bespoke and custom design", "Priority access to limited pieces", "Dedicated account manager", "Global concierge services", "VIP event invitations"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
@@ -450,9 +303,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Shopping",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Start Shopping", href: "/shop"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -465,35 +316,17 @@ export default function HomePage() {
|
||||
<FaqBase
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What makes RAEN different from other luxury brands?",
|
||||
content: "RAEN combines timeless design with ethical craftsmanship. Every piece is handcrafted using premium, sustainable materials and produced in small batches to ensure quality and exclusivity. We prioritize artisanal techniques and transparent sourcing, offering luxury that aligns with modern values.",
|
||||
},
|
||||
id: "1", title: "What makes RAEN different from other luxury brands?", content: "RAEN combines timeless design with ethical craftsmanship. Every piece is handcrafted using premium, sustainable materials and produced in small batches to ensure quality and exclusivity. We prioritize artisanal techniques and transparent sourcing, offering luxury that aligns with modern values."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do I care for my RAEN pieces?",
|
||||
content: "Each piece comes with detailed care instructions tailored to its material. We recommend dry cleaning for most items, hand washing for delicates, and proper storage to maintain fabric quality. Our membership members receive complimentary professional care services.",
|
||||
},
|
||||
id: "2", title: "How do I care for my RAEN pieces?", content: "Each piece comes with detailed care instructions tailored to its material. We recommend dry cleaning for most items, hand washing for delicates, and proper storage to maintain fabric quality. Our membership members receive complimentary professional care services."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy on all unworn pieces in original condition. Membership members enjoy extended 60-day returns and free return shipping. Simply contact our customer service team to initiate a return.",
|
||||
},
|
||||
id: "3", title: "What is your return policy?", content: "We offer a 30-day return policy on all unworn pieces in original condition. Membership members enjoy extended 60-day returns and free return shipping. Simply contact our customer service team to initiate a return."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship to over 28 countries worldwide. Standard shipping takes 5-7 business days, while expedited 2-day shipping is available. Premium members receive complimentary 2-day shipping on all orders.",
|
||||
},
|
||||
id: "4", title: "Do you offer international shipping?", content: "Yes, we ship to over 28 countries worldwide. Standard shipping takes 5-7 business days, while expedited 2-day shipping is available. Premium members receive complimentary 2-day shipping on all orders."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Can I request custom or bespoke pieces?",
|
||||
content: "Absolutely! Our Concierge Service specializes in custom design and bespoke orders. Contact our team to schedule a personal consultation where we'll create something uniquely tailored to your preferences and vision.",
|
||||
},
|
||||
id: "5", title: "Can I request custom or bespoke pieces?", content: "Absolutely! Our Concierge Service specializes in custom design and bespoke orders. Contact our team to schedule a personal consultation where we'll create something uniquely tailored to your preferences and vision."},
|
||||
{
|
||||
id: "6",
|
||||
title: "What is your sustainability commitment?",
|
||||
content: "RAEN is committed to ethical fashion. We use eco-friendly materials, work with fair-trade suppliers, and maintain small production batches to minimize waste. 5% of profits support artisan communities and environmental initiatives.",
|
||||
},
|
||||
id: "6", title: "What is your sustainability commitment?", content: "RAEN is committed to ethical fashion. We use eco-friendly materials, work with fair-trade suppliers, and maintain small production batches to minimize waste. 5% of profits support artisan communities and environmental initiatives."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about RAEN collections, ordering, shipping, and our commitment to quality"
|
||||
|
||||
282
src/app/product/[id]/page.tsx
Normal file
282
src/app/product/[id]/page.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
"use client";
|
||||
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Heart,
|
||||
Star,
|
||||
ShoppingBag,
|
||||
Truck,
|
||||
RotateCcw,
|
||||
Shield,
|
||||
Minus,
|
||||
Plus,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ProductDetailsProps {
|
||||
params: { id: string };
|
||||
}
|
||||
|
||||
const productDetails: Record<string, any> = {
|
||||
"1": {
|
||||
id: "1", name: "Silk Essentials Blouse", price: "$385", rating: 4.9,
|
||||
reviews: 128,
|
||||
description: "Timeless silk blouse crafted with premium mulberry silk and finished with delicate mother-of-pearl buttons. Perfect for layering or wearing as a standalone piece.", colors: ["Ivory", "Navy", "Charcoal"],
|
||||
sizes: ["XS", "S", "M", "L", "XL"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-dressed-summer-outfit-out-city_1303-15911.jpg?_wi=1", longDescription: "Our signature silk blouse exemplifies timeless elegance. Hand-selected mulberry silk provides a luxurious drape and natural sheen. The blouse features:\n\n• Premium mulberry silk (100%)\n• Mother-of-pearl buttons\n• French seams for durability\n• Machine washable on delicate cycle\n• Made in Italy\n\nStyle with tailored trousers for the office, or layer under a blazer for evening elegance.", care: [
|
||||
"Hand wash or dry clean recommended", "Lay flat to dry", "Iron on low heat if needed", "Store in cool, dry place"
|
||||
],
|
||||
shipping: "Free shipping on orders over $500. Delivery in 5-7 business days.", return: "30-day return policy for unworn pieces in original condition."
|
||||
},
|
||||
"2": {
|
||||
id: "2", name: "Tailored Wool Trousers", price: "$495", rating: 4.8,
|
||||
reviews: 95,
|
||||
description: "Precision-tailored trousers in premium wool with a perfect fit. The ideal foundation for any professional wardrobe.", colors: ["Black", "Camel", "Graphite"],
|
||||
sizes: ["XS", "S", "M", "L", "XL"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-office_1303-31722.jpg?_wi=1", longDescription: "Crafted from the finest Italian wool, these tailored trousers offer impeccable fit and timeless style. Features:\n\n• 100% pure new wool\n• Flat front with zipper fly\n• Side pockets and back patch pockets\n• Hemmed to fit\n• Professional tailoring\n\nThe perfect investment piece for your wardrobe.", care: [
|
||||
"Dry clean recommended", "Professional pressing", "Spot clean if needed", "Store on wooden hanger"
|
||||
],
|
||||
shipping: "Free shipping on orders over $500. Delivery in 5-7 business days.", return: "30-day return policy for unworn pieces in original condition."
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProductPage({ params }: ProductDetailsProps) {
|
||||
const product = productDetails[params.id] || productDetails["1"];
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedColor, setSelectedColor] = useState(product.colors[0]);
|
||||
const [selectedSize, setSelectedSize] = useState(product.sizes[2]);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "All Collections", href: "/shop" },
|
||||
{ label: "Sale", href: "/" },
|
||||
{ label: "Gift Cards", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About RAEN", href: "/" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Guide", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="RAEN"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Collections", id: "/" },
|
||||
{ name: "Contact", id: "#" },
|
||||
]}
|
||||
button={{
|
||||
text: "Back to Shop", href: "/shop"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="w-full py-16 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-8 flex items-center gap-2 text-sm text-foreground/60">
|
||||
<a href="/shop" className="hover:text-foreground">Shop</a>
|
||||
<span>/</span>
|
||||
<span>{product.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
|
||||
{/* Product Image */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.name}
|
||||
className="w-full aspect-square object-cover rounded-lg"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className="absolute top-4 right-4 p-3 bg-background/80 backdrop-blur rounded-full hover:bg-background transition-colors"
|
||||
>
|
||||
<Heart
|
||||
className={`w-6 h-6 ${isFavorited ? 'fill-current text-red-500' : 'text-foreground'}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-4xl font-bold mb-2">{product.name}</h1>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-5 h-5 ${i < Math.floor(product.rating) ? 'fill-current' : 'text-foreground/20'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-foreground/60">({product.reviews} reviews)</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold mb-4">{product.price}</p>
|
||||
<p className="text-foreground/80 text-lg">{product.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Color Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold mb-3">Color</label>
|
||||
<div className="flex gap-3">
|
||||
{product.colors.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setSelectedColor(color)}
|
||||
className={`px-4 py-2 rounded-lg border-2 transition-all ${
|
||||
selectedColor === color
|
||||
? 'border-foreground bg-foreground text-background'
|
||||
: 'border-foreground/20 hover:border-foreground/40'
|
||||
}`}
|
||||
>
|
||||
{color}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold mb-3">Size</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{product.sizes.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-2 rounded-lg border-2 font-semibold transition-all ${
|
||||
selectedSize === size
|
||||
? 'border-foreground bg-foreground text-background'
|
||||
: 'border-foreground/20 hover:border-foreground/40'
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold mb-3">Quantity</label>
|
||||
<div className="flex items-center gap-4 w-fit border border-foreground/20 rounded-lg p-2">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="p-2 hover:bg-foreground/10 rounded"
|
||||
>
|
||||
<Minus className="w-5 h-5" />
|
||||
</button>
|
||||
<span className="w-8 text-center font-semibold">{quantity}</span>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="p-2 hover:bg-foreground/10 rounded"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add to Cart */}
|
||||
<button className="w-full py-4 px-6 bg-foreground text-background font-semibold rounded-lg mb-4 hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
|
||||
<ShoppingBag className="w-5 h-5" />
|
||||
Add to Cart
|
||||
</button>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div className="grid grid-cols-3 gap-4 pt-6 border-t border-foreground/10">
|
||||
<div className="text-center">
|
||||
<Truck className="w-6 h-6 mx-auto mb-2" />
|
||||
<p className="text-xs font-semibold">Free Shipping</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<RotateCcw className="w-6 h-6 mx-auto mb-2" />
|
||||
<p className="text-xs font-semibold">30-Day Returns</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Shield className="w-6 h-6 mx-auto mb-2" />
|
||||
<p className="text-xs font-semibold">Secure Checkout</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Tabs */}
|
||||
<div className="mb-16">
|
||||
<div className="border-b border-foreground/20 mb-6">
|
||||
<div className="flex gap-8">
|
||||
<button className="py-4 font-semibold border-b-2 border-foreground">Details</button>
|
||||
<button className="py-4 font-semibold text-foreground/60 hover:text-foreground">Care</button>
|
||||
<button className="py-4 font-semibold text-foreground/60 hover:text-foreground">Shipping</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<h3 className="text-2xl font-bold mb-4">Product Description</h3>
|
||||
<p className="text-foreground/80 whitespace-pre-wrap mb-6">{product.longDescription}</p>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4 mt-8">Care Instructions</h3>
|
||||
<ul className="space-y-2">
|
||||
{product.care.map((instruction, idx) => (
|
||||
<li key={idx} className="text-foreground/80">• {instruction}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4 mt-8">Shipping & Returns</h3>
|
||||
<p className="text-foreground/80 mb-3">{product.shipping}</p>
|
||||
<p className="text-foreground/80">{product.return}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg?_wi=1"
|
||||
imageAlt="luxury fashion atelier studio elegant"
|
||||
columns={footerColumns}
|
||||
logoText="RAEN"
|
||||
copyrightText="© 2025 RAEN Luxury. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,33 +2,48 @@
|
||||
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import {
|
||||
Sparkles,
|
||||
Star,
|
||||
Crown,
|
||||
HelpCircle,
|
||||
ShoppingBag,
|
||||
Heart,
|
||||
Home,
|
||||
ShoppingBag,
|
||||
Filter,
|
||||
Sliders,
|
||||
ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface FilterState {
|
||||
categories: string[];
|
||||
priceRange: [number, number];
|
||||
colors: string[];
|
||||
sizes: string[];
|
||||
}
|
||||
|
||||
export default function ShopPage() {
|
||||
const [filters, setFilters] = useState<FilterState>({
|
||||
categories: [],
|
||||
priceRange: [0, 1000],
|
||||
colors: [],
|
||||
sizes: [],
|
||||
});
|
||||
|
||||
const [sortBy, setSortBy] = useState('featured');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "All Collections", href: "/" },
|
||||
title: "Shop", items: [
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "All Collections", href: "/shop" },
|
||||
{ label: "Sale", href: "/" },
|
||||
{ label: "Gift Cards", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About RAEN", href: "/" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
@@ -36,8 +51,7 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
@@ -46,6 +60,33 @@ export default function ShopPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Silk Essentials Blouse", price: "$385", variant: "Ivory", category: "Tops", color: "Ivory", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-dressed-summer-outfit-out-city_1303-15911.jpg?_wi=1", imageAlt: "premium ivory silk blouse elegant", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2", name: "Tailored Wool Trousers", price: "$495", variant: "Black", category: "Bottoms", color: "Black", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-office_1303-31722.jpg?_wi=1", imageAlt: "tailored black wool trousers professional", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3", name: "Premium Linen Dress", price: "$425", variant: "White", category: "Dresses", color: "White", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1", imageAlt: "premium white linen dress elegant", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "4", name: "Luxury Cashmere Sweater", price: "$545", variant: "Cream", category: "Knitwear", color: "Cream", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-walking-beach_23-2150100091.jpg?_wi=1", imageAlt: "luxury cashmere sweater cream elegant", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "5", name: "Structured Blazer", price: "$625", variant: "Charcoal", category: "Outerwear", color: "Charcoal", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-wearing-dark-blue-white-checkered-cardigan_132075-14012.jpg?_wi=1", imageAlt: "structured charcoal blazer professional", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "6", name: "Evening Gown", price: "$895", variant: "Midnight", category: "Formal", color: "Midnight", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/front-view-pullovers-pine-cones-with-copy-space_23-2148791080.jpg?_wi=1", imageAlt: "elegant midnight evening gown", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "7", name: "Statement Coat", price: "$795", variant: "Camel", category: "Outerwear", color: "Camel", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-14026.jpg?_wi=1", imageAlt: "statement camel coat luxury fashion", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "8", name: "Silk Camisole", price: "$285", variant: "Blush", category: "Tops", color: "Blush", size: "XS-L", imageSrc: "http://img.b2bpic.net/free-photo/male-fashion-designer-holding-coat-with-his-customer-sitting-chair-shop_23-2148180341.jpg?_wi=1", imageAlt: "silk blush camisole elegant", isFavorited: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -64,196 +105,182 @@ export default function ShopPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="RAEN"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Collections", id: "/" },
|
||||
{ name: "Contact", id: "#" },
|
||||
]}
|
||||
button={{
|
||||
text: "Explore the Collection",
|
||||
href: "/",
|
||||
}}
|
||||
text: "Back to Home", href: "/"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Featured Products Section */}
|
||||
<div id="featured" data-section="featured">
|
||||
{/* Shop Hero */}
|
||||
<div className="relative w-full py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-4">Shop Collections</h1>
|
||||
<p className="text-xl text-foreground/80 mb-8">Explore our curated selection of luxury pieces</p>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="flex items-center justify-between mb-8 gap-4">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-foreground/20 rounded-lg hover:border-foreground/40 transition-colors"
|
||||
>
|
||||
<Sliders className="w-5 h-5" />
|
||||
Filters
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-foreground/60">Sort by:</span>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
className="px-3 py-2 border border-foreground/20 rounded-lg bg-background hover:border-foreground/40 transition-colors"
|
||||
>
|
||||
<option value="featured">Featured</option>
|
||||
<option value="price-low">Price: Low to High</option>
|
||||
<option value="price-high">Price: High to Low</option>
|
||||
<option value="newest">Newest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collapsible Filters */}
|
||||
{showFilters && (
|
||||
<div className="mb-8 p-6 border border-foreground/20 rounded-lg bg-background/50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{/* Category Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Category</h3>
|
||||
<div className="space-y-2">
|
||||
{['Tops', 'Bottoms', 'Dresses', 'Knitwear', 'Outerwear', 'Formal'].map((cat) => (
|
||||
<label key={cat} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setFilters({ ...filters, categories: [...filters.categories, cat] });
|
||||
} else {
|
||||
setFilters({ ...filters, categories: filters.categories.filter(c => c !== cat) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm">{cat}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Color</h3>
|
||||
<div className="space-y-2">
|
||||
{['Black', 'White', 'Ivory', 'Cream', 'Charcoal', 'Blush'].map((col) => (
|
||||
<label key={col} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setFilters({ ...filters, colors: [...filters.colors, col] });
|
||||
} else {
|
||||
setFilters({ ...filters, colors: filters.colors.filter(c => c !== col) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm">{col}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Size</h3>
|
||||
<div className="space-y-2">
|
||||
{['XS', 'S', 'M', 'L', 'XL'].map((size) => (
|
||||
<label key={size} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setFilters({ ...filters, sizes: [...filters.sizes, size] });
|
||||
} else {
|
||||
setFilters({ ...filters, sizes: filters.sizes.filter(s => s !== size) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm">{size}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Price Range</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm">Min: ${filters.priceRange[0]}</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1000"
|
||||
value={filters.priceRange[0]}
|
||||
onChange={(e) => {
|
||||
const newMin = parseInt(e.target.value);
|
||||
if (newMin <= filters.priceRange[1]) {
|
||||
setFilters({ ...filters, priceRange: [newMin, filters.priceRange[1]] });
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">Max: ${filters.priceRange[1]}</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1000"
|
||||
value={filters.priceRange[1]}
|
||||
onChange={(e) => {
|
||||
const newMax = parseInt(e.target.value);
|
||||
if (newMax >= filters.priceRange[0]) {
|
||||
setFilters({ ...filters, priceRange: [filters.priceRange[0], newMax] });
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title="Complete Collections"
|
||||
description="Browse our full range of handcrafted pieces, from everyday essentials to statement items"
|
||||
tag="Shop Now"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Silk Essentials Blouse",
|
||||
price: "$385",
|
||||
variant: "Ivory, Navy, Charcoal - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-dressed-summer-outfit-out-city_1303-15911.jpg?_wi=2",
|
||||
imageAlt: "premium ivory silk blouse elegant",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Tailored Wool Trousers",
|
||||
price: "$495",
|
||||
variant: "Black, Camel, Graphite - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-office_1303-31722.jpg?_wi=2",
|
||||
imageAlt: "tailored black wool trousers professional",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Premium Linen Dress",
|
||||
price: "$425",
|
||||
variant: "White, Sage, Stone - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2",
|
||||
imageAlt: "premium white linen dress elegant",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Luxury Cashmere Sweater",
|
||||
price: "$545",
|
||||
variant: "Cream, Charcoal, Caramel - 3 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-walking-beach_23-2150100091.jpg?_wi=2",
|
||||
imageAlt: "luxury cashmere sweater cream elegant",
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title=""
|
||||
description=""
|
||||
products={allProducts}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Membership & Pricing Section */}
|
||||
<div id="memberships" data-section="memberships">
|
||||
<PricingCardFive
|
||||
plans={[
|
||||
{
|
||||
id: "individual",
|
||||
tag: "Ready-to-Wear",
|
||||
price: "$385",
|
||||
period: "- $695",
|
||||
description: "Individual pieces and seasonal collections, available for immediate purchase",
|
||||
button: {
|
||||
text: "Browse Collection",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Full seasonal collections",
|
||||
"Free standard shipping on orders over $500",
|
||||
"30-day return policy",
|
||||
"Access to styling guides",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "membership",
|
||||
tag: "Premium Membership",
|
||||
price: "$199",
|
||||
period: "/year",
|
||||
description: "Exclusive early access and special pricing for our most loyal customers",
|
||||
button: {
|
||||
text: "Join Membership",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Early access to new collections",
|
||||
"15% discount on all purchases",
|
||||
"Free 2-day shipping worldwide",
|
||||
"Personal styling consultations",
|
||||
"Exclusive member-only events",
|
||||
"Complimentary alterations",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "concierge",
|
||||
tag: "Concierge Service",
|
||||
price: "Custom",
|
||||
period: "pricing",
|
||||
description: "White-glove service for bespoke and custom orders, curated exclusively for you",
|
||||
button: {
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "What's Included:",
|
||||
features: [
|
||||
"Personal style consultation",
|
||||
"Bespoke and custom design",
|
||||
"Priority access to limited pieces",
|
||||
"Dedicated account manager",
|
||||
"Global concierge services",
|
||||
"VIP event invitations",
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Investment in Luxury"
|
||||
description="Choose the perfect way to experience RAEN, from individual pieces to exclusive memberships"
|
||||
tag="Membership & Pricing"
|
||||
tagIcon={Crown}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Memberships",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What makes RAEN different from other luxury brands?",
|
||||
content: "RAEN combines timeless design with ethical craftsmanship. Every piece is handcrafted using premium, sustainable materials and produced in small batches to ensure quality and exclusivity. We prioritize artisanal techniques and transparent sourcing, offering luxury that aligns with modern values.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do I care for my RAEN pieces?",
|
||||
content: "Each piece comes with detailed care instructions tailored to its material. We recommend dry cleaning for most items, hand washing for delicates, and proper storage to maintain fabric quality. Our membership members receive complimentary professional care services.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy on all unworn pieces in original condition. Membership members enjoy extended 60-day returns and free return shipping. Simply contact our customer service team to initiate a return.",
|
||||
},
|
||||
]}
|
||||
title="Shop FAQs"
|
||||
description="Find answers to common questions about shopping at RAEN, orders, and our services"
|
||||
tag="Help & Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg?_wi=1"
|
||||
imageAlt="luxury fashion atelier studio elegant"
|
||||
columns={footerColumns}
|
||||
logoText="RAEN"
|
||||
@@ -262,4 +289,4 @@ export default function ShopPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-source-sans-3), sans-serif;
|
||||
font-family: var(--font-playfair-display), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-source-sans-3), sans-serif;
|
||||
font-family: var(--font-playfair-display), sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #634110;
|
||||
--background: #0a0805;
|
||||
--card: #1a1410;
|
||||
--foreground: #f5f0e8;
|
||||
--primary-cta: #d4af6a;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #1a1410;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--accent: #8b7355;
|
||||
--background-accent: #d4af6a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user