Update src/app/page.tsx
This commit is contained in:
446
src/app/page.tsx
446
src/app/page.tsx
@@ -19,325 +19,155 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Collections",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Estet Butik"
|
||||
button={{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Estet Butik"
|
||||
button={{ text: "Shop Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ESTET BUTIK"
|
||||
description="Discover curated elegance. Your destination for timeless style and refined fashion."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353695.jpg",
|
||||
imageAlt: "Fashion display 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegance-blonde-girl-fur-coat-store-fur-coats-leather-jackets_627829-8480.jpg",
|
||||
imageAlt: "Fashion display 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-modern-restaurant-with-full-comfort_140725-9761.jpg",
|
||||
imageAlt: "Fashion display 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-shopping-menswear-shop_1303-19869.jpg",
|
||||
imageAlt: "Fashion display 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-body-shopping-bags-wooden-door_23-2147645163.jpg",
|
||||
imageAlt: "Fashion display 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892901.jpg",
|
||||
imageAlt: "Fashion display 6",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ESTET BUTIK"
|
||||
description="Discover curated elegance. Your destination for timeless style and refined fashion."
|
||||
buttons={[{ text: "View Collection", href: "#products" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353695.jpg", imageAlt: "Fashion display 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/elegance-blonde-girl-fur-coat-store-fur-coats-leather-jackets_627829-8480.jpg", imageAlt: "Fashion display 2" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vintage-modern-restaurant-with-full-comfort_140725-9761.jpg", imageAlt: "Fashion display 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-shopping-menswear-shop_1303-19869.jpg", imageAlt: "Fashion display 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-body-shopping-bags-wooden-door_23-2147645163.jpg", imageAlt: "Fashion display 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892901.jpg", imageAlt: "Fashion display 6" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Defining Your ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/clothes-designer-working-store_23-2148915560.jpg",
|
||||
alt: "About us style",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Personal Style",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Defining Your " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/clothes-designer-working-store_23-2148915560.jpg", alt: "About us style" },
|
||||
{ type: "text", content: " Personal Style" }
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#about" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Premium Materials",
|
||||
tags: [
|
||||
"Quality",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575394.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Curated Trends",
|
||||
tags: [
|
||||
"Style",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-thoughtful-fashionable-woman-dressed-green-clothes-white-boots-sits-near-grey-concrete-wall-has-bun-hairstyle-vivid-makeup-thinks-about-something-urban-lifestyle-concept_273609-59968.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Personal Styling",
|
||||
tags: [
|
||||
"Service",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-repair-sale-shop_23-2150746338.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Estet Butik?"
|
||||
description="Experience fashion that understands you."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", title: "Premium Materials", tags: ["Quality"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575394.jpg" },
|
||||
{ id: "f2", title: "Curated Trends", tags: ["Style"], imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-thoughtful-fashionable-woman-dressed-green-clothes-white-boots-sits-near-grey-concrete-wall-has-bun-hairstyle-vivid-makeup-thinks-about-something-urban-lifestyle-concept_273609-59968.jpg" },
|
||||
{ id: "f3", title: "Personal Styling", tags: ["Service"], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-repair-sale-shop_23-2150746338.jpg" }
|
||||
]}
|
||||
title="Why Choose Estet Butik?"
|
||||
description="Experience fashion that understands you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Dress",
|
||||
price: "$89",
|
||||
variant: "Premium Silk",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-preparing-christmas-eve_482257-74474.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Silk Blouse",
|
||||
price: "$59",
|
||||
variant: "Satin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-stylish-fedora-hat_23-2150711551.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Modern Skirt",
|
||||
price: "$75",
|
||||
variant: "Wool",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-female-customer-staring-dress-rack-fashion-store-low-angle-candid-shot-boutique-retail-concept_74855-11670.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Tailored Jacket",
|
||||
price: "$129",
|
||||
variant: "Classic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-top-view_23-2150264138.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Slim Trousers",
|
||||
price: "$69",
|
||||
variant: "Office",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-holding-takeaway-coffee-cup-standing-outdoor_23-2148148109.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Leather Bag",
|
||||
price: "$149",
|
||||
variant: "Essential",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-sales-person-jewelry-shop_1303-30676.jpg",
|
||||
},
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Fresh styles for your everyday aesthetic."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Dress", price: "$89", variant: "Premium Silk", imageSrc: "http://img.b2bpic.net/free-photo/people-preparing-christmas-eve_482257-74474.jpg" },
|
||||
{ id: "p2", name: "Silk Blouse", price: "$59", variant: "Satin", imageSrc: "http://img.b2bpic.net/free-photo/view-stylish-fedora-hat_23-2150711551.jpg" },
|
||||
{ id: "p3", name: "Modern Skirt", price: "$75", variant: "Wool", imageSrc: "http://img.b2bpic.net/free-photo/excited-female-customer-staring-dress-rack-fashion-store-low-angle-candid-shot-boutique-retail-concept_74855-11670.jpg" },
|
||||
{ id: "p4", name: "Tailored Jacket", price: "$129", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-top-view_23-2150264138.jpg" },
|
||||
{ id: "p5", name: "Slim Trousers", price: "$69", variant: "Office", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-holding-takeaway-coffee-cup-standing-outdoor_23-2148148109.jpg" },
|
||||
{ id: "p6", name: "Leather Bag", price: "$149", variant: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/female-sales-person-jewelry-shop_1303-30676.jpg" }
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Fresh styles for your everyday aesthetic."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Happy Customers",
|
||||
description: "Fashion journeys started.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-shopping-together_23-2149273773.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Unique Designs",
|
||||
description: "Curated for your style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-with-lots-shopping-bags_23-2148695588.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "20+",
|
||||
title: "Global Partners",
|
||||
description: "Brands we trust.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-looking-jacket_23-2149241360.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Reach"
|
||||
description="Trusted by fashion lovers everywhere."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10k+", title: "Happy Customers", description: "Fashion journeys started.", imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-shopping-together_23-2149273773.jpg" },
|
||||
{ id: "m2", value: "500+", title: "Unique Designs", description: "Curated for your style.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-with-lots-shopping-bags_23-2148695588.jpg" },
|
||||
{ id: "m3", value: "20+", title: "Global Partners", description: "Brands we trust.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-looking-jacket_23-2149241360.jpg" }
|
||||
]}
|
||||
title="Our Reach"
|
||||
description="Trusted by fashion lovers everywhere."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Elena K.",
|
||||
role: "Fashion Enthusiast",
|
||||
testimonial: "The best shopping experience I've had. Quality is unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-sitting-stairs-having-fun_23-2148133972.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Maria S.",
|
||||
role: "Stylist",
|
||||
testimonial: "Estet Butik never disappoints. Always fresh styles.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-personal-shopper-helping-cutomer_23-2148924090.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Anna V.",
|
||||
role: "Blogger",
|
||||
testimonial: "Love the curated collections here. Truly elegant.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-mirror_1301-1468.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sofia R.",
|
||||
role: "Creative",
|
||||
testimonial: "Quality service and beautiful pieces. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trendy-couple-gloomy-city_1157-14937.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Julia P.",
|
||||
role: "Customer",
|
||||
testimonial: "Amazing selection, quick delivery. Love my new dress!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Feedback from the Estet community."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Elena K.", role: "Fashion Enthusiast", testimonial: "The best shopping experience I've had. Quality is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/couple-sitting-stairs-having-fun_23-2148133972.jpg" },
|
||||
{ id: "t2", name: "Maria S.", role: "Stylist", testimonial: "Estet Butik never disappoints. Always fresh styles.", imageSrc: "http://img.b2bpic.net/free-photo/female-personal-shopper-helping-cutomer_23-2148924090.jpg" },
|
||||
{ id: "t3", name: "Anna V.", role: "Blogger", testimonial: "Love the curated collections here. Truly elegant.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-mirror_1301-1468.jpg" },
|
||||
{ id: "t4", name: "Sofia R.", role: "Creative", testimonial: "Quality service and beautiful pieces. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/trendy-couple-gloomy-city_1157-14937.jpg" },
|
||||
{ id: "t5", name: "Julia P.", role: "Customer", testimonial: "Amazing selection, quick delivery. Love my new dress!", imageSrc: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg" }
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Feedback from the Estet community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Shipping times?",
|
||||
content: "Generally 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Return policy?",
|
||||
content: "You can return items within 14 days.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Custom styling?",
|
||||
content: "Reach out to us for consultations.",
|
||||
},
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Here is what you might want to know."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Shipping times?", content: "Generally 3-5 business days." },
|
||||
{ id: "q2", title: "Return policy?", content: "You can return items within 14 days." },
|
||||
{ id: "q3", title: "Custom styling?", content: "Reach out to us for consultations." }
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Here is what you might want to know."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Ready to elevate your style?"
|
||||
description="Follow us on Instagram or drop a message to get started."
|
||||
buttons={[
|
||||
{
|
||||
text: "Follow on Instagram",
|
||||
href: "https://www.instagram.com/estet_butik_/",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Ready to elevate your style?"
|
||||
description="Follow us on Instagram or drop a message to get started."
|
||||
buttons={[{ text: "Follow on Instagram", href: "https://www.instagram.com/estet_butik_/" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ESTET BUTIK"
|
||||
copyrightText="© 2025 Estet Butik. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ESTET BUTIK"
|
||||
copyrightText="© 2025 Estet Butik. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user