337 lines
23 KiB
TypeScript
337 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Award, ArrowRight, Eye, HelpCircle, Infinity, Package, Palette, Pen, Sparkles, Star, Target, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Serene Studios"
|
|
navItems={[
|
|
{ name: "Collection", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Approach", id: "approach" },
|
|
{ name: "Journal", id: "blog" },
|
|
]}
|
|
button={{ text: "Contact", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
className="backdrop-blur-sm"
|
|
navItemClassName="text-sm tracking-wide"
|
|
buttonClassName="border-2"
|
|
buttonTextClassName="font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Silence in Design"
|
|
description="Serene Studios explores the intersection of restraint, identity, and intentional creation. Each piece whispers rather than shouts."
|
|
tag="Avant-Garde Fashion"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Explore Collection", href: "#products" }]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
dashboard={{
|
|
title: "Studio Essence", logoIcon: Palette,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-human-hand-with-mirror_23-2149512324.jpg", sidebarItems: [
|
|
{ icon: Eye, active: true },
|
|
{ icon: Pen, active: false },
|
|
{ icon: Zap, active: false },
|
|
],
|
|
buttons: [
|
|
{ text: "View Archive", href: "#" },
|
|
{ text: "Inquire", href: "#contact" },
|
|
],
|
|
stats: [
|
|
{ title: "Seasons", values: [3, 5, 7], description: "Collections created" },
|
|
{ title: "Restraint", values: ["Pure", "Essence", "Form"], description: "Design philosophy" },
|
|
{ title: "Silence", values: ["Speaks", "Louder", "Always"], description: "Through absence" },
|
|
],
|
|
listTitle: "Atelier Notes", listItems: [
|
|
{ icon: Eye, title: "Conceptual Rigor", status: "Embedded" },
|
|
{ icon: Target, title: "Editorial Excellence", status: "Practiced" },
|
|
{ icon: Infinity, title: "Timeless Integrity", status: "Pursued" },
|
|
],
|
|
searchPlaceholder: "Search our archive", imageAlt: "Serene Studios atelier"}}
|
|
ariaLabel="Hero section introducing Serene Studios"
|
|
className="min-h-screen"
|
|
containerClassName="space-y-12"
|
|
textBoxClassName="mb-12"
|
|
titleClassName="text-6xl md:text-7xl leading-tight tracking-tight"
|
|
descriptionClassName="text-lg md:text-xl leading-relaxed max-w-3xl"
|
|
tagClassName="inline-block text-sm tracking-widest uppercase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Serene Studios stands as a testament to" },
|
|
{ type: "text", content: "conceptual rigor and artistic integrity. We reject commercial noise in favor of editorial clarity, creating pieces that communicate through absence rather than assertion." },
|
|
]}
|
|
buttons={[{ text: "Our Philosophy", href: "#approach" }]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About Serene Studios"
|
|
className="py-24"
|
|
containerClassName="max-w-5xl mx-auto"
|
|
headingClassName="text-5xl md:text-6xl leading-tight font-light tracking-tight mb-8"
|
|
imageWrapperClassName="inline-flex mx-2"
|
|
imageClassName="h-[1.1em] aspect-square object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div id="approach" data-section="approach">
|
|
<FeatureCardTwentySix
|
|
title="Our Design Language"
|
|
description="Minimalist aesthetics meet avant-garde vision in every piece we create. Silence becomes luxury; restraint becomes rebellion."
|
|
tag="Editorial Philosophy"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Conceptual Foundation", description: "Every piece begins with ideas, not trends. Art directs commerce.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-model-holding-fresh-plants_23-2148442573.jpg", imageAlt: "Conceptual design process", buttonIcon: ArrowRight,
|
|
buttonHref: "#products"},
|
|
{
|
|
title: "Editorial Presentation", description: "Gallery-like curation with expansive whitespace amplifies intention.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-posing-with-cloth_23-2148546986.jpg", imageAlt: "Editorial gallery layout", buttonIcon: ArrowRight,
|
|
buttonHref: "#products"},
|
|
{
|
|
title: "Restraint as Luxury", description: "Monochromatic subtlety signals confidence. Silence speaks volumes.", imageSrc: "http://img.b2bpic.net/free-psd/fashion-design-banner-template_23-2149003184.jpg", imageAlt: "Restrained design aesthetic", buttonIcon: ArrowRight,
|
|
buttonHref: "#products"},
|
|
{
|
|
title: "Timeless Integrity", description: "Pieces designed to transcend seasons. Intentionality over obsolescence.", imageSrc: "http://img.b2bpic.net/free-vector/business-proposal-template-design_742173-24808.jpg", imageAlt: "Timeless collection pieces", buttonIcon: ArrowRight,
|
|
buttonHref: "#products"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Our design approach and philosophy"
|
|
className="py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
cardTitleClassName="text-5xl md:text-6xl leading-tight font-light"
|
|
cardDescriptionClassName="text-lg leading-relaxed max-w-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Collection"
|
|
description="Carefully curated pieces that define our artistic vision. Each item is an editorial statement."
|
|
tag="Limited Pieces"
|
|
tagIcon={Package}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Silk Whisper Shirt", price: "$485", variant: "Off-White · 2 Colors", imageSrc: "http://img.b2bpic.net/free-photo/sexy-blond-female-black-costume-sits-round-black-chair-empty-room_613910-8198.jpg", imageAlt: "Silk Whisper Shirt in off-white", isFavorited: false,
|
|
},
|
|
{
|
|
id: "2", name: "Deconstructed Overcoat", price: "$890", variant: "Charcoal · Tailored", imageSrc: "http://img.b2bpic.net/free-photo/caucasian-female-tourist-standing-tower-rooftop-enjoying_482257-22945.jpg", imageAlt: "Deconstructed Overcoat in charcoal", isFavorited: false,
|
|
},
|
|
{
|
|
id: "3", name: "Minimal Pleated Skirt", price: "$595", variant: "Cream · Architectural", imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934356.jpg", imageAlt: "Minimal Pleated Skirt in cream", isFavorited: false,
|
|
},
|
|
{
|
|
id: "4", name: "Studio Trousers", price: "$445", variant: "Stone · Refined Cut", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-fashion-boutique-template_23-2150632575.jpg", imageAlt: "Studio Trousers in stone", isFavorited: false,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Featured product collection"
|
|
className="py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxTitleClassName="text-5xl md:text-6xl leading-tight font-light"
|
|
textBoxDescriptionClassName="text-lg leading-relaxed max-w-2xl"
|
|
cardNameClassName="font-light text-sm tracking-wide"
|
|
cardPriceClassName="font-light text-base"
|
|
cardVariantClassName="text-xs text-muted-foreground tracking-widest uppercase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Trusted by Visionaries"
|
|
description="Editorial professionals and design aesthetes who understand that restraint is the ultimate luxury."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Helena Voss, Fashion Director at Atelier Magazine", date: "Date: December 2024", title: "A Voice of Quiet Confidence", quote: "Serene Studios speaks the language of editorial fashion. Every piece feels like a considered editorial choice rather than a commercial offering. This is fashion for those who understand that silence is the loudest statement.", tag: "Editorial Professional", avatarSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-with-eyeglasses-posing_23-2148452678.jpg", avatarAlt: "Helena Voss", imageSrc: "http://img.b2bpic.net/free-photo/stacked-aesthetic-objects-still-life_23-2150230644.jpg", imageAlt: "Editorial testimonial showcase"},
|
|
{
|
|
id: "2", name: "Marcus Chen, Independent Stylist & Curator", date: "Date: November 2024", title: "Conceptual Excellence Realized", quote: "Working with Serene Studios has transformed how I think about fashion curation. Their commitment to intentionality and restraint creates pieces that aged beautifully in both aesthetic and philosophy. This is luxury redefined.", tag: "Creative Director", avatarSrc: "http://img.b2bpic.net/free-photo/confident-lady-stylish-red-outfit-looks-into-camera_197531-27288.jpg", avatarAlt: "Marcus Chen", imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830357.jpg", imageAlt: "Curator testimonial presentation"},
|
|
{
|
|
id: "3", name: "Isabelle Laurent, Contemporary Fashion Photographer", date: "Date: October 2024", title: "Photographing Restraint", quote: "The challenge and beauty of Serene Studios pieces lies in their simplicity. They photograph with a purity that commercial fashion rarely achieves. These are pieces designed for the archive, not the trend cycle.", tag: "Visual Artist", avatarSrc: "http://img.b2bpic.net/free-photo/asian-worker-arranging-mannequin-with-formal-suit-working-store-visual-with-fashionable-merchandise-employee-preparing-boutique-opening-waiting-customers-shopping-centre_482257-61880.jpg", avatarAlt: "Isabelle Laurent", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-yellow-plant_23-2149640627.jpg", imageAlt: "Photography testimonial visual"},
|
|
{
|
|
id: "4", name: "David Kohl, Luxury Goods Consultant", date: "Date: September 2024", title: "Authenticity in Luxury Markets", quote: "In an oversaturated luxury market, Serene Studios stands apart through genuine artistic vision. Their refusal to compromise on conceptual integrity while maintaining accessibility is rare and admirable.", tag: "Industry Expert", avatarSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-white-blazer-smiling-secretly_114579-18682.jpg", avatarAlt: "David Kohl", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346546.jpg", imageAlt: "Expert testimonial composition"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Client testimonials and reviews"
|
|
className="py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxTitleClassName="text-5xl md:text-6xl leading-tight font-light"
|
|
textBoxDescriptionClassName="text-lg leading-relaxed max-w-2xl"
|
|
cardTitleClassName="text-4xl leading-tight font-light"
|
|
cardQuoteClassName="text-lg leading-relaxed"
|
|
cardNameClassName="font-light text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="Recognized by leading editorial publications and luxury curators worldwide"
|
|
tag="Press & Recognition"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vogue Editorial", "Atelier Magazine", "Contemporary Design Review", "Editorial Fashion Journal", "Luxury Concepts Quarterly", "Minimalist Design Platform", "Independent Fashion Archive", "Contemporary Craft Magazine"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/minimalist-wedding-monograms-pastel-colors_23-2148361243.jpg", "http://img.b2bpic.net/free-vector/golden-elegant-business-logo-template_23-2148218240.jpg", "http://img.b2bpic.net/free-photo/creative-ideas-brand-logo-style_53876-120345.jpg", "http://img.b2bpic.net/free-vector/collection-logos-gold_1048-5472.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-collection_23-2148895774.jpg", "http://img.b2bpic.net/free-photo/high-angle-thimbles-with-scissors-textile_23-2148527961.jpg", "http://img.b2bpic.net/free-vector/flat-slow-fashion-badge-collection_23-2148836461.jpg"]}
|
|
speed={40}
|
|
showCard={true}
|
|
ariaLabel="Featured publications and partners"
|
|
className="py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
textBoxTitleClassName="text-5xl md:text-6xl leading-tight font-light"
|
|
textBoxDescriptionClassName="text-lg leading-relaxed max-w-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Questions About Our Practice"
|
|
description="Understanding Serene Studios philosophy, process, and approach to contemporary luxury fashion."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What inspired the Serene Studios concept?", content: "Serene Studios emerged from observing the oversaturation and noise in contemporary fashion. We sought to create a counter-narrative: a brand built on silence, restraint, and editorial integrity. Our inspiration draws from curatorial practices in museums and galleries—treating fashion as art worthy of thoughtful presentation rather than commercial spectacle."},
|
|
{
|
|
id: "2", title: "How do you approach design and conceptualization?", content: "Each collection begins with a conceptual framework rather than trend forecasting. We ask: What does this piece communicate? How does restraint amplify intention? Design follows philosophy. Every detail—from fabric selection to construction—serves the overarching narrative. We believe fashion should whisper, not shout."},
|
|
{
|
|
id: "3", title: "Why is minimalism central to your vision?", content: "Minimalism in our practice is not about simplicity for its own sake, but about intentionality. It's a disciplined approach that removes everything unnecessary, allowing what remains to resonate more profoundly. In a world of excess, restraint becomes a radical statement of confidence and authenticity."},
|
|
{
|
|
id: "4", title: "What is your approach to sustainability and craftsmanship?", content: "Our commitment to timelessness is inseparable from sustainability. We use premium, durable materials designed to age gracefully. Pieces are constructed with meticulous attention to detail, supporting artisanal production methods. We believe in creating items that transcend seasonality—pieces customers will treasure for years, not discard next season."},
|
|
{
|
|
id: "5", title: "How do you define 'luxury' differently?", content: "True luxury, in our view, is not about logos or conspicuous consumption. It's about artistic vision, conceptual rigor, and emotional resonance. Luxury is the freedom to create without commercial compromise. It's a whisper heard in a quiet room—powerful precisely because it asks for attention rather than demanding it."},
|
|
{
|
|
id: "6", title: "How do I inquire about custom or commission work?", content: "We occasionally collaborate with collectors and editorial projects that align with our vision. For inquiries regarding commissions, collaborations, or editorial partnerships, please contact us directly. We consider each proposal individually, ensuring alignment with our conceptual and artistic standards."},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={false}
|
|
ariaLabel="Frequently asked questions"
|
|
className="py-24"
|
|
containerClassName="max-w-4xl mx-auto"
|
|
textBoxTitleClassName="text-5xl md:text-6xl leading-tight font-light"
|
|
textBoxDescriptionClassName="text-lg leading-relaxed"
|
|
accordionTitleClassName="text-lg font-light"
|
|
accordionContentClassName="text-base leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Connect With Serene Studios"
|
|
description="For inquiries regarding collections, collaborations, or editorial partnerships, we invite you to reach out. We carefully consider each connection that aligns with our artistic vision."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your vision or inquiry...", rows: 6,
|
|
required: true,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstyle-smiling-model-dressed-white-summer-costume-sexy-carefree-female-posing-near-grey-wall-studio-tanned-cheerful-shocked-surprised_158538-24857.jpg"
|
|
imageAlt="Serene Studios studio"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Inquiry"
|
|
ariaLabel="Contact form"
|
|
className="py-24"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
contentClassName="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
|
|
formCardClassName="p-8 md:p-12"
|
|
titleClassName="text-4xl md:text-5xl leading-tight font-light mb-6"
|
|
descriptionClassName="text-lg leading-relaxed mb-8"
|
|
buttonClassName="w-full py-3 mt-6 font-light tracking-wide"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Collection", href: "#products" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Approach", href: "#approach" },
|
|
{ label: "Journal", href: "#blog" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Inquiries", href: "#contact" },
|
|
{ label: "Collaborations", href: "#contact" },
|
|
{ label: "Press", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Returns", href: "#" },
|
|
{ label: "Accessibility", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 Serene Studios. All inquiries treated with consideration."
|
|
bottomRightText="Thoughtfully Designed"
|
|
ariaLabel="Site footer"
|
|
className="mt-24 pt-12 border-t border-accent"
|
|
containerClassName="max-w-7xl mx-auto px-6"
|
|
columnsClassName="grid grid-cols-2 md:grid-cols-3 gap-8 mb-12"
|
|
columnTitleClassName="text-sm font-light tracking-widest uppercase mb-4"
|
|
columnItemClassName="text-sm leading-relaxed"
|
|
bottomContainerClassName="flex flex-col md:flex-row justify-between items-start md:items-center pt-8 text-xs text-muted-foreground"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|