296 lines
16 KiB
TypeScript
296 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { Sparkles, Star, Heart } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Collections", id: "/collections" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Shop", id: "shop" }
|
|
];
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Kasbah"
|
|
bottomLeftText="Handcrafted in Morocco"
|
|
bottomRightText="kasbah.luxury@gmail.com"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Timeless Moroccan Elegance"
|
|
description="Handcrafted caftans blending tradition and modern sophistication. Each piece celebrates the artistry and heritage of Moroccan fashion."
|
|
background={{ variant: "plain" }}
|
|
tag="New Collection"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "/collections" },
|
|
{ text: "Discover the Brand", href: "about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/scissors-with-thread-high-angle_23-2148897931.jpg", imageAlt: "Elegant ivory caftan with gold embroidery" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/women-floral-dresses-surrounded-by-nature_23-2148261265.jpg", imageAlt: "Deep emerald green traditional caftan" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-surrounded-by-plants_23-2150522500.jpg", imageAlt: "Soft beige contemporary caftan" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/ramadan-concept-with-glasses_23-2147791753.jpg", imageAlt: "Gold-accented luxury caftan detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/lady-car_1157-7432.jpg", imageAlt: "Model wearing signature collection caftan" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
ariaLabel="Hero section showcasing Moroccan caftans"
|
|
/>
|
|
</div>
|
|
|
|
{/* Featured Products Section */}
|
|
<div id="featured-products" data-section="featured-products">
|
|
<ProductCardOne
|
|
title="Featured Collection"
|
|
description="Discover our most coveted pieces handcrafted with premium fabrics and intricate embroidery"
|
|
tag="Bestsellers"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{ id: "1", name: "Sultana Ivory Caftan", price: "$450", imageSrc: "http://img.b2bpic.net/free-photo/toy-santa-claus-coat-near-present-box-threads-twigs_23-2147969886.jpg?_wi=1", imageAlt: "Sultana Ivory Caftan" },
|
|
{ id: "2", name: "Emerald Palace Caftan", price: "$520", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-hand-her-face_23-2148261257.jpg?_wi=1", imageAlt: "Emerald Palace Caftan" },
|
|
{ id: "3", name: "Golden Riad Caftan", price: "$480", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-beach-covering-her-face-with-veil_23-2149460546.jpg?_wi=1", imageAlt: "Golden Riad Caftan" },
|
|
{ id: "4", name: "Dusty Rose Elegance", price: "$510", imageSrc: "http://img.b2bpic.net/free-photo/lady-evening-dress-elegant-woman-long-gown_1157-47535.jpg?_wi=1", imageAlt: "Dusty Rose Elegance Caftan" }
|
|
]}
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* About Section */}
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Heritage"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
title="Our story begins in the heart of Morocco, where generations of artisans have perfected the art of caftan craftsmanship. We celebrate this legacy while creating contemporary pieces that honor tradition and embrace modernity."
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "/collections" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Craftsmanship Section */}
|
|
<div id="craftsmanship" data-section="craftsmanship">
|
|
<FeatureCardNineteen
|
|
title="The Art of the Caftan"
|
|
description="Each caftan is a masterpiece of traditional Moroccan craftsmanship combined with contemporary design sensibility"
|
|
tag="Artisan Process"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Premium Fabrics",
|
|
title: "Hand-Selected Materials",
|
|
subtitle: "Finest silks and linens",
|
|
description: "We source the most luxurious fabrics from trusted suppliers across Morocco and Europe. Each textile is carefully selected for its quality, drape, and ability to showcase our intricate embroidery.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-origami-made-object_23-2149048400.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Embroidery",
|
|
title: "Intricate Handwork",
|
|
subtitle: "Detailed traditional embroidery",
|
|
description: "Our master embroiderers spend weeks on each piece, creating patterns inspired by Moroccan heritage. Every stitch is executed with precision, bringing traditional motifs to life with gold thread and beads.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/decoration-with-sweater-ice-skates-hanger_23-2148350148.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Custom Tailoring",
|
|
title: "Perfect Fit",
|
|
subtitle: "Personalized alterations available",
|
|
description: "We offer made-to-measure customization for every piece. Our master tailors work closely with you to ensure your caftan fits perfectly and reflects your personal style preferences.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/females-shopping-store_23-2148915571.jpg?_wi=1"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Loved by Our Clients"
|
|
description="Hear from customers around the world who have fallen in love with our caftans"
|
|
tag="Customer Stories"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Fatima Hassan, Fashion Designer, Casablanca",
|
|
date: "Date: 15 December 2024",
|
|
title: "Absolutely stunning quality and elegance!",
|
|
quote: "I purchased three caftans for a wedding celebration and I was blown away by the quality of the embroidery and the comfort of the fit. The craftsmanship is extraordinary. These pieces are true investment pieces that will last a lifetime.",
|
|
tag: "Premium Collection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-wearing-traditional-sari-garment_23-2149565143.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-lady-green-dress-holds-bride-s-hand-tender_8353-9003.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Amina Al-Rashid, CEO, Dubai",
|
|
date: "Date: 22 November 2024",
|
|
title: "Perfect for special occasions and celebrations",
|
|
quote: "I ordered custom pieces for my daughter's engagement party and they exceeded all expectations. The attention to detail, the color matching, and the overall presentation was impeccable. Kasbah truly understands luxury.",
|
|
tag: "Custom Collection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-cup-coffee_23-2149330971.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-posing-with-lighthouse_23-2150608261.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Leila Boucher, Entrepreneur, Montreal",
|
|
date: "Date: 8 November 2024",
|
|
title: "Connecting with my Moroccan roots",
|
|
quote: "Living in the diaspora, I wanted to reconnect with my heritage. These caftans are not just beautiful clothing—they are wearable art that honors my culture. The team was incredibly helpful in understanding sizing and customization options.",
|
|
tag: "Signature Line",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/senior-woman-applying-lipstick-mirror-outdoors_23-2150296681.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-wearing-sari_23-2149503030.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Sophia Rossi, Luxury Consultant, Paris",
|
|
date: "Date: 1 November 2024",
|
|
title: "A discovery of true craftsmanship",
|
|
quote: "I recommend Kasbah to all my clients looking for unique luxury pieces. The caftans are incredibly well-made, featuring traditional techniques that are rarely seen in contemporary fashion. This is the future of luxury retail.",
|
|
tag: "Premium Collection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-60-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1854.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-elegant-girl-standing-autumn-city-drinking-coffee_1157-13867.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Noor Khalil, Wedding Planner, Marrakech",
|
|
date: "Date: 25 October 2024",
|
|
title: "The go-to choice for every celebration",
|
|
quote: "I coordinate weddings and events throughout Morocco and beyond. My clients consistently choose Kasbah caftans for their sophistication and comfort. The variety of styles ensures every bride finds her perfect piece.",
|
|
tag: "Custom Collection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-wonderful-young-woman-with-kind-big-eyes-gently-smiling-light-wall_197531-4929.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ramadan-concept-with-food-te_23-2147796729.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Maya Patel, Fashion Editor, London",
|
|
date: "Date: 10 October 2024",
|
|
title: "Redefining luxury in the modern era",
|
|
quote: "Kasbah represents everything we love about contemporary luxury fashion. The pieces are timeless, beautifully crafted, and tell a story of cultural heritage and artistic excellence. A true treasure in the fashion world.",
|
|
tag: "Signature Line",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/expressive-woman-posing-outdoor_344912-2893.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-poster-template_23-2148929777.jpg?_wi=1"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Section */}
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="Recognized by leading luxury and fashion publications worldwide"
|
|
tag="Media Presence"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vogue Arabia",
|
|
"Luxe Arabia",
|
|
"Tatler Middle East",
|
|
"Elle France",
|
|
"Marie Claire Morocco",
|
|
"Architectural Digest ME",
|
|
"Harper's Bazaar",
|
|
"WWD"
|
|
]}
|
|
showCard={true}
|
|
speed={50}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<footer className="bg-gray-900 text-white py-12 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<h3 className="font-semibold mb-4">Shop</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/collections" className="hover:text-gray-300">New Arrivals</Link></li>
|
|
<li><Link href="/collections" className="hover:text-gray-300">Collections</Link></li>
|
|
<li><Link href="/collections" className="hover:text-gray-300">Custom Caftans</Link></li>
|
|
<li><Link href="/collections" className="hover:text-gray-300">Sale</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-4">Discover</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/" className="hover:text-gray-300">About Kasbah</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Our Artisans</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Craftsmanship</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Blog</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-4">Connect</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/collections" className="hover:text-gray-300">Contact Us</Link></li>
|
|
<li><a href="https://instagram.com/kasbah.luxury" target="_blank" rel="noopener noreferrer" className="hover:text-gray-300">Instagram</a></li>
|
|
<li><a href="https://wa.me/212612345678" target="_blank" rel="noopener noreferrer" className="hover:text-gray-300">WhatsApp</a></li>
|
|
<li><a href="#" className="hover:text-gray-300">Newsletter</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-4">Legal</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/" className="hover:text-gray-300">Privacy Policy</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Terms of Service</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Shipping Info</Link></li>
|
|
<li><Link href="/" className="hover:text-gray-300">Returns</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
|
|
<p className="text-sm">© 2025 Kasbah Caftans. All rights reserved. Handcrafted in Morocco.</p>
|
|
<p className="text-sm">Made with love and tradition</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |