Update src/app/page.tsx
This commit is contained in:
133
src/app/page.tsx
133
src/app/page.tsx
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
@@ -11,141 +11,98 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Leaf, Shield, Award } from 'lucide-react';
|
||||
import { Star, Shield, Zap } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" }
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
logoSrc="asset://gen-stock-rsv-8"
|
||||
logoAlt="Logo"
|
||||
/>
|
||||
<NavbarStyleCentered navItems={navItems} />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Beauty Defined by Elegance"
|
||||
description="Discover CHIC ELEGANCE™: A curated ritual for your skin, crafted with pure ingredients and timeless luxury."
|
||||
avatars={[{ src: "asset://test-1", alt: "Customer" }, { src: "asset://test-2", alt: "Customer" }, { src: "asset://test-3", alt: "Customer" }, { src: "asset://test-4", alt: "Customer" }, { src: "asset://test-5", alt: "Customer" }]}
|
||||
avatarText="Trusted by 10,000+ radiant customers"
|
||||
buttons={[{ text: "Shop Rituals", href: "#products" }, { text: "Our Story", href: "#about" }]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[{ type: "text", text: "Cruelty-Free" }, { type: "text", text: "Ethically Sourced" }, { type: "text", text: "100% Organic" }, { type: "text", text: "Dermatologist Tested" }, { type: "text", text: "Fragrance-Free" }]}
|
||||
title="Welcome to Our Platform"
|
||||
description="The best solution for your needs."
|
||||
background={{ variant: "animated-grid" }}
|
||||
avatars={[{ src: "https://example.com/avatar.png", alt: "User" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
title="The Art of Radiant Skin"
|
||||
buttons={[{ text: "Explore Philosophy", href: "#" }]}
|
||||
useInvertedBackground={false}
|
||||
title="About Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Purest Ingredients, Potent Results"
|
||||
description="We blend nature and science to bring you skincare that actually works."
|
||||
features={[{
|
||||
title: "Botanical Infusion",
|
||||
description: "Sourced from the finest organic farms, ensuring peak vitality in every drop.",
|
||||
media: { imageSrc: "asset://about-img", imageAlt: "Luxury skincare cream jar" },
|
||||
items: [{ icon: Leaf, text: "100% Organic" }, { icon: Shield, text: "Cruelty-Free" }, { icon: Award, text: "Ethically Sourced" }],
|
||||
reverse: false
|
||||
title="Core Features"
|
||||
description="What we offer"
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
features={[{
|
||||
title: "Speed",
|
||||
description: "Fast performance",
|
||||
media: { imageSrc: "https://example.com/img.png" },
|
||||
items: [{ icon: Zap, text: "Fast" }],
|
||||
reverse: false
|
||||
}]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
title="Our Products"
|
||||
description="Browse our catalog"
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="The Collection"
|
||||
description="Essential rituals for a timeless glow."
|
||||
products={[
|
||||
{ id: "1", name: "Golden Radiance Serum", price: "$85.00", imageSrc: "asset://prod-1" },
|
||||
{ id: "2", name: "Botanical Cleanser", price: "$45.00", imageSrc: "asset://prod-2" },
|
||||
{ id: "3", name: "Hydrating Mist", price: "$38.00", imageSrc: "asset://prod-3" },
|
||||
{ id: "4", name: "Night Recovery Cream", price: "$95.00", imageSrc: "asset://prod-4" },
|
||||
{ id: "5", name: "Pure Glow Oil", price: "$72.00", imageSrc: "asset://prod-5" },
|
||||
{ id: "6", name: "Revitalizing Eye Balm", price: "$65.00", imageSrc: "asset://prod-6" }
|
||||
{ id: "1", name: "Product A", price: "$10", imageSrc: "https://example.com/p1.png" },
|
||||
{ id: "2", name: "Product B", price: "$20", imageSrc: "https://example.com/p2.png" },
|
||||
{ id: "3", name: "Product C", price: "$30", imageSrc: "https://example.com/p3.png" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Loved by You"
|
||||
description="Hear from our community of skin enthusiasts."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Journalist", company: "Global Times", rating: 5, imageSrc: "asset://test-1__2" },
|
||||
{ id: "2", name: "Michael C.", role: "Creative Director", company: "Studio X", rating: 5, imageSrc: "asset://test-2__2" },
|
||||
{ id: "3", name: "Emily R.", role: "Marketing Lead", company: "Growth Co", rating: 5, imageSrc: "asset://test-3__2" },
|
||||
{ id: "4", name: "David K.", role: "Designer", company: "Creative Lab", rating: 5, imageSrc: "asset://test-4__2" },
|
||||
{ id: "5", name: "Alice T.", role: "Entrepreneur", company: "Startup Hub", rating: 5, imageSrc: "asset://test-5" }
|
||||
]}
|
||||
title="Testimonials"
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "CEO", company: "ABC", rating: 5 },
|
||||
{ id: "2", name: "Jane Doe", role: "CTO", company: "XYZ", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
names={["Vogue", "Harper's Bazaar", "Elle", "Allure", "Cosmopolitan", "Marie Claire", "Vanity Fair"]}
|
||||
title="Featured In"
|
||||
description="Recognized by industry leaders."
|
||||
names={["Partner A", "Partner B"]}
|
||||
title="Trusted By"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Questions? We're here."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "Are your products cruelty-free?", content: "Yes, we are 100% committed to ethical sourcing and never test on animals." },
|
||||
{ id: "2", title: "What is the shipping policy?", content: "We offer complimentary worldwide shipping on all orders over $100." },
|
||||
{ id: "3", title: "Can I return my order?", content: "Yes, we offer a 30-day money-back guarantee for all our products." }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
faqs={[{ id: "1", title: "Question?", content: "Answer!" }]}
|
||||
sideTitle="FAQ"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready to start your journey? Our experts are here to help."
|
||||
buttons={[{ text: "Contact Support", href: "mailto:hello@chicelegance.com" }]}
|
||||
useInvertedBackground={false}
|
||||
text="Contact us today"
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Rituals", href: "#products" }, { label: "All Products", href: "#products" }] },
|
||||
{ title: "Company", items: [{ label: "Our Story", href: "#about" }, { label: "Sustainability", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 CHIC ELEGANCE™. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
columns={[{ title: "Links", items: [{ label: "Home" }] }]}
|
||||
bottomLeftText="© 2024"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user