193 lines
12 KiB
TypeScript
193 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Sparkles, ShoppingBag, Award, Star, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Aura Vibes"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Discover Your Perfect Aura"
|
|
description="Explore our curated collection of premium products designed to elevate your lifestyle. Each item is carefully selected for quality, elegance, and timeless appeal."
|
|
tag="New Collection"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/transparent-prism-with-jewel_23-2147960090.jpg?_wi=1", imageAlt: "luxury product display carousel elegant" },
|
|
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/young-man-shopping-menswear-shop_1303-19869.jpg", imageAlt: "aesthetic product collection display modern" },
|
|
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/mall-employee-assisting-customer-choose-from-new-collection-clothes_482257-112821.jpg", imageAlt: "luxury retail environment product display" },
|
|
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/woman-searching-fornew-clothes_23-2147688706.jpg", imageAlt: "minimalist product display luxury aesthetic" },
|
|
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/collection-quail-eggs-near-feathers-can_23-2148073846.jpg", imageAlt: "upscale retail store product arrangement" },
|
|
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/full-length-shot-bearded-man-suit-glasses-standing-wardrobe-looking-away_171337-19302.jpg", imageAlt: "high-end product showcase retail space" }
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
ariaLabel="Hero section with product carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Our Collection"
|
|
description="Browse our exclusive selection of premium products, handpicked for their exceptional quality and elegant design."
|
|
tag="Shop"
|
|
tagIcon={ShoppingBag}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{ id: "1", name: "Luminous Serum Essence", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-products-different-recipients_23-2148761429.jpg", imageAlt: "luxury skincare product bottle packaging", initialQuantity: 1 },
|
|
{ id: "2", name: "Radiant Day Cream", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-nature-landing-page-template_52683-30795.jpg", imageAlt: "premium wellness product luxury packaging", initialQuantity: 1 },
|
|
{ id: "3", name: "Midnight Renewal Mask", price: "$48.00", imageSrc: "http://img.b2bpic.net/free-photo/white-still-life-composition_23-2148869771.jpg", imageAlt: "luxury fragrance product bottle packaging", initialQuantity: 1 },
|
|
{ id: "4", name: "Citrus Glow Exfoliant", price: "$42.00", imageSrc: "http://img.b2bpic.net/free-photo/transparent-skin-care-moisture-recipient-arrangement_23-2148761461.jpg", imageAlt: "premium skincare serum bottle luxury", initialQuantity: 1 },
|
|
{ id: "5", name: "Hydra Luxe Body Oil", price: "$72.00", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-theater-mask-still-life_23-2150257769.jpg", imageAlt: "luxury wellness mask product premium", initialQuantity: 1 }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View All Products", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Product collection showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Thousands"
|
|
description="Join our growing community of satisfied customers who have transformed their routine with Aura Vibes."
|
|
tag="Partners"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Vogue Beauty", "Elle Magazine", "GQ Style", "Harper's Bazaar", "Refinery29", "WWD", "Beauty Insider"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/set-sale-promotion-design-template_53876-61740.jpg", "http://img.b2bpic.net/free-vector/golden-logo-vintage-luxury-style_23-2147861437.jpg", "http://img.b2bpic.net/free-vector/retro-art-deco-logo-design_1562-777.jpg", "http://img.b2bpic.net/free-vector/golden-logo-vintage-luxury-style_23-2147861436.jpg", "http://img.b2bpic.net/free-vector/collection-floral-logo-template-business-branding_1017-60627.jpg", "http://img.b2bpic.net/free-vector/elegant-ornamental-logo_23-2148311634.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-with-letter-s_1017-6162.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
ariaLabel="Trusted partners and publications"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Customers Say"
|
|
description="Hear directly from customers who have experienced the transformative power of Aura Vibes products."
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Martinez", handle: "@sarah.m", testimonial: "Aura Vibes completely transformed my skincare routine. The products are luxurious, effective, and worth every penny. My skin has never looked better!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg", imageAlt: "Sarah Martinez" },
|
|
{ id: "2", name: "James Chen", handle: "@james.chen", testimonial: "The attention to detail in every product is exceptional. From the packaging to the results, Aura Vibes delivers premium quality. Highly recommended!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "James Chen" },
|
|
{ id: "3", name: "Emma Thompson", handle: "@emma.t", testimonial: "I've tried many luxury brands, but Aura Vibes stands out. The products are gentle yet powerful, and the results are visible within weeks.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing-with-papers_23-2148053689.jpg", imageAlt: "Emma Thompson" },
|
|
{ id: "4", name: "Michael Rodriguez", handle: "@m.rodriguez", testimonial: "Best investment I've made for my skincare. The quality is unmatched, and customer service is outstanding. Will definitely be a repeat customer!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-businessman-black-wall_176420-3455.jpg", imageAlt: "Michael Rodriguez" },
|
|
{ id: "5", name: "Priya Patel", handle: "@priya.patel", testimonial: "Aura Vibes products have become an essential part of my daily routine. The natural ingredients and effective formulas make all the difference.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-window-1_1262-1490.jpg", imageAlt: "Priya Patel" },
|
|
{ id: "6", name: "David Kim", handle: "@david.kim", testimonial: "Finally found a brand that understands quality and elegance. Every product feels premium, and the results exceed my expectations every single time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2708.jpg", imageAlt: "David Kim" }
|
|
]}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{ text: "Share Your Review", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Customer testimonials section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Newsletter"
|
|
title="Stay Connected"
|
|
description="Subscribe to our newsletter and be the first to know about new collections, exclusive offers, and beauty tips from our experts."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/transparent-prism-with-jewel_23-2147960090.jpg?_wi=2"
|
|
imageAlt="Premium collection preview"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime. Your data helps us deliver better content and offers."
|
|
ariaLabel="Newsletter signup section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Skincare", href: "#" },
|
|
{ label: "Wellness", href: "#" },
|
|
{ label: "New Arrivals", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#" },
|
|
{ label: "Sustainability", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" },
|
|
{ label: "Privacy Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Aura Vibes. All rights reserved. Crafted with elegance."
|
|
ariaLabel="Footer navigation"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |