165 lines
11 KiB
TypeScript
165 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import { Zap, Sparkles, Award, Shield, Frame } from "lucide-react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Artists", id: "#products" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
brandName="Sinister Sisters"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{ variant: "radial-gradient" }}
|
|
title="Where Darkness Becomes Luxury"
|
|
description="Step into an atmospheric sanctuary of rare antiques, bespoke decor, and curated mystique. Sinister Sisters is where the beautifully dark come to belong."
|
|
buttons={[{ text: "Enter the Sanctuary", href: "#about" }]} mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424204630-eogc74ad.jpg", imageAlt: "Gothic candle arrangement" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424223364-nhjg9dc6.jpg", imageAlt: "Curated gothic skull decor" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424235300-ng6cscj9.jpg", imageAlt: "Atmospheric boutique interior" }
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
title="A Sanctuary of Curated Mystique"
|
|
description="We believe darkness is not an absence of light, but a presence of depth. Sinister Sisters offers a hand-picked collection of antiques and bespoke items for those who find beauty in the shadows and seek soul in their surroundings."
|
|
bulletPoints={[
|
|
{ title: "Rare Antiques", description: "Authentic pieces sourced for history and character." },
|
|
{ title: "Bespoke Decor", description: "Custom artisan pieces exclusive to our shop." },
|
|
{ title: "Atmospheric Curation", description: "A sensory shopping experience like no other." }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424710023-og4mrmur.jpg"
|
|
imageAlt="Sinister Sisters boutique interior display"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Private Consultations", description: "Personalized aesthetic planning for your space.", buttonIcon: Zap, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424745342-zl4mp9tg.jpg", imageAlt: "gothic vintage pocket watch decor" },
|
|
{ title: "Seasonal Collections", description: "Changing displays to match the shifting seasons.", buttonIcon: Sparkles, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780425195790-55eb69an.jpg", imageAlt: "seasonal candle arrangement" },
|
|
{ title: "Artisan Partnerships", description: "Supporting local makers of dark luxury art.", buttonIcon: Award, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424812840-cxq758vl.jpg", imageAlt: "artisan skull decor" },
|
|
{ title: "Global Sourcing", description: "Finding the rare and unusual worldwide.", buttonIcon: Shield, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424835317-2cqvza83.jpg", imageAlt: "global antique sourcing" },
|
|
{ title: "Bespoke Framing", description: "Custom-fitted ornate frames for your dark collection.", buttonIcon: Frame, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CNTOheG6UvDdEJ2DwnpjfM96IF/uploaded-1780424882151-c2fq7t14.jpg", imageAlt: "bespoke ornate framing" }
|
|
]}
|
|
title="The Sinister Experience"
|
|
description="More than a shop, we provide an immersive aesthetic journey for the discerning dark decor collector."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<TeamCardOne
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
members={[
|
|
{ id: "artist1", name: "Evelyn Thorne", role: "Gothic Sculptor", imageSrc: "https://img.b2bpic.net/free-photo/evelyn-thorne-portrait.jpg?_wi=1", imageAlt: "Portrait of Evelyn Thorne" },
|
|
{ id: "artist2", name: "Victor Blackwood", role: "Mystic Painter", imageSrc: "https://img.b2bpic.net/free-photo/victor-blackwood-portrait.jpg?_wi=1", imageAlt: "Portrait of Victor Blackwood" },
|
|
{ id: "artist3", name: "Morgana Le Fey", role: "Enchanted Jeweler", imageSrc: "https://img.b2bpic.net/free-photo/morgana-le-fey-portrait.jpg?_wi=1", imageAlt: "Portrait of Morgana Le Fey" },
|
|
{ id: "artist4", name: "Dorian Grey", role: "Curio Crafter", imageSrc: "https://img.b2bpic.net/free-photo/dorian-grey-portrait.jpg?_wi=1", imageAlt: "Portrait of Dorian Grey" }
|
|
]}
|
|
title="Featured Artists of the Sanctuary"
|
|
description="Discover the visionary artisans who imbue our collections with their unique dark luxury aesthetics."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{ id: "t1", name: "Evelyn Thorne", role: "Collector", company: "Dark Aesthetic", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/evelyn-thorne-portrait.jpg?_wi=2", imageAlt: "Evelyn Thorne portrait" },
|
|
{ id: "t2", name: "Victor Blackwood", role: "Architect", company: "Blackwood Studio", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/victor-blackwood-portrait.jpg?_wi=2", imageAlt: "Victor Blackwood portrait" },
|
|
{ id: "t3", name: "Morgana Le Fey", role: "Curator", company: "Mystic Arts", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/morgana-le-fey-portrait.jpg?_wi=2", imageAlt: "Morgana Le Fey portrait" },
|
|
{ id: "t4", name: "Dorian Grey", role: "Designer", company: "Grey Interiors", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/dorian-grey-portrait.jpg?_wi=2", imageAlt: "Dorian Grey portrait" },
|
|
{ id: "t5", name: "Lenore Raven", role: "Collector", company: "Shadow Lane", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/lenore-raven-portrait.jpg", imageAlt: "Lenore Raven portrait" }
|
|
]}
|
|
title="Voices from the Shadows"
|
|
description="Discover what our devoted patrons say about their encounters within our sanctuary."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "Do you ship items internationally?", content: "We currently do not ship items, largely due to logistical issues. " },
|
|
{ id: "q2", title: "Are your antiques authentic?", content: "Absolutely. Every piece undergoes rigorous verification." },
|
|
{ id: "q3", title: "Can I visit your physical location?", content: "We invite you to step into the sanctuary anytime during our operating hours." },
|
|
{ id: "q4", title: "Do you accept custom commissions?", content: "Our artisans do accept limited, select commissions periodically." },
|
|
{ id: "q5", title: "Is the shop haunted?", content: "We prefer the term 'spiritually animated' by history and atmosphere." }
|
|
]}
|
|
title="Frequently Whispered"
|
|
description="Answers to common questions about our shop and our curation process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{ variant: "gradient-bars" }}
|
|
text="The sanctuary awaits. Visit us or reach out for inquiries about our current collections and bespoke services."
|
|
buttons={[{ text: "Email Our Curators", href: "#" }] }
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{ title: "Boutique", items: [{ label: "About Us", href: "#about" }, { label: "Collections", href: "#products" }] },
|
|
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
|
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
|
]}
|
|
logoText="Sinister Sisters"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |