Merge version_1 into main #2
402
src/app/page.tsx
402
src/app/page.tsx
@@ -9,7 +9,7 @@ import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import { Award, Facebook, Globe, Headphones, Instagram, Leaf, Lock, Shield, Twitter, Zap } from "lucide-react";
|
||||
import { Award, Facebook, Globe, Headphones, Instagram, Leaf, Lock, RefreshCcw, Shield, Twitter, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,287 +17,141 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
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">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Health & Beauty",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Home & Kitchen",
|
||||
id: "features",
|
||||
},
|
||||
]}
|
||||
brandName="RLX Store"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="RLX Store"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Welcome to RLX Store"
|
||||
description="Discover our carefully curated collection of health, beauty, and home essentials. Quality products designed for your lifestyle."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice M.",
|
||||
handle: "@alicem",
|
||||
testimonial: "The best shopping experience I've had online.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg?_wi=1",
|
||||
imageAlt: "elegant lifestyle product display soft lighting",
|
||||
},
|
||||
{
|
||||
name: "Bob R.",
|
||||
handle: "@bobr",
|
||||
testimonial: "Fast shipping and high quality items. Highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg?_wi=1",
|
||||
imageAlt: "luxury health and beauty product minimalist",
|
||||
},
|
||||
{
|
||||
name: "Carol W.",
|
||||
handle: "@carolw",
|
||||
testimonial: "I love the clean aesthetic and reliable service.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg?_wi=1",
|
||||
imageAlt: "modern home decor aesthetic object",
|
||||
},
|
||||
{
|
||||
name: "David T.",
|
||||
handle: "@davidt",
|
||||
testimonial: "Great products, will definitely be back.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg?_wi=1",
|
||||
imageAlt: "minimalist shoe design clean background",
|
||||
},
|
||||
{
|
||||
name: "Eva P.",
|
||||
handle: "@evap",
|
||||
testimonial: "Excellent selection, found exactly what I needed.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg?_wi=1",
|
||||
imageAlt: "beauty wellness product simple composition",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/coffee-cup-composition_23-2147693627.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Sustainable Materials",
|
||||
icon: Leaf,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Worldwide Shipping",
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Premium Quality",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "24/7 Support",
|
||||
icon: Headphones,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Secure Payments",
|
||||
icon: Lock,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Welcome to RLX Store"
|
||||
description="Discover our carefully curated collection of health, beauty, and home essentials. Quality products designed for your lifestyle."
|
||||
testimonials={[
|
||||
{ name: "Alice M.", handle: "@alicem", testimonial: "The best shopping experience I've had online.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg", imageAlt: "elegant lifestyle product display soft lighting" },
|
||||
{ name: "Bob R.", handle: "@bobr", testimonial: "Fast shipping and high quality items. Highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg", imageAlt: "luxury health and beauty product minimalist" },
|
||||
{ name: "Carol W.", handle: "@carolw", testimonial: "I love the clean aesthetic and reliable service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg", imageAlt: "modern home decor aesthetic object" },
|
||||
{ name: "David T.", handle: "@davidt", testimonial: "Great products, will definitely be back.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg", imageAlt: "minimalist shoe design clean background" },
|
||||
{ name: "Eva P.", handle: "@evap", testimonial: "Excellent selection, found exactly what I needed.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg", imageAlt: "beauty wellness product simple composition" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/coffee-cup-composition_23-2147693627.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Sustainable Materials", icon: Leaf },
|
||||
{ type: "text-icon", text: "Worldwide Shipping", icon: Globe },
|
||||
{ type: "text-icon", text: "Premium Quality", icon: Award },
|
||||
{ type: "text-icon", text: "24/7 Support", icon: Headphones },
|
||||
{ type: "text-icon", text: "Secure Payments", icon: Lock }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Essential Skincare",
|
||||
price: "$45.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Modern Ceramic Vase",
|
||||
price: "$32.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Casual Leather Shoes",
|
||||
price: "$120.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Wellness Diffuser",
|
||||
price: "$55.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Kitchen Organizer Set",
|
||||
price: "$28.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-composition_23-2147693627.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Classic Trainers",
|
||||
price: "$85.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/summer-spring-break-holiday-vacation-leisure-concept_53876-31829.jpg",
|
||||
},
|
||||
]}
|
||||
title="Shop Our Collection"
|
||||
description="Premium selections for home, health, and beauty."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Essential Skincare", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/covid-party-with-mask-drink-high-angle_23-2149299870.jpg" },
|
||||
{ id: "p2", name: "Modern Ceramic Vase", price: "$32.00", imageSrc: "http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090648.jpg" },
|
||||
{ id: "p3", name: "Casual Leather Shoes", price: "$120.00", imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg" },
|
||||
{ id: "p4", name: "Wellness Diffuser", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-assortment_23-2149080530.jpg" },
|
||||
{ id: "p5", name: "Kitchen Organizer Set", price: "$28.00", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-composition_23-2147693627.jpg" },
|
||||
{ id: "p6", name: "Classic Trainers", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/summer-spring-break-holiday-vacation-leisure-concept_53876-31829.jpg" }
|
||||
]}
|
||||
title="Shop Our Collection"
|
||||
description="Premium selections for home, health, and beauty."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Fast & Reliable",
|
||||
description: "We ensure your orders reach you quickly and safely.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lonely-girl-sitting-near-window-with-book-kitchen_23-2147922368.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: "Express delivery available",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
text: "Secure packaging guarantee",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
text: "Easy return policy",
|
||||
icon: RefreshCcw,
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-composition_23-2147693627.jpg?_wi=2",
|
||||
imageAlt: "lifestyle home kitchen accessory minimal",
|
||||
},
|
||||
]}
|
||||
title="Why Shop With RLX"
|
||||
description="Quality assurance and premium service at every step."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Fast & Reliable", description: "We ensure your orders reach you quickly and safely.", media: { imageSrc: "http://img.b2bpic.net/free-photo/lonely-girl-sitting-near-window-with-book-kitchen_23-2147922368.jpg" },
|
||||
items: [
|
||||
{ text: "Express delivery available", icon: Zap },
|
||||
{ text: "Secure packaging guarantee", icon: Shield },
|
||||
{ text: "Easy return policy", icon: RefreshCcw }
|
||||
],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
title="Why Shop With RLX"
|
||||
description="Quality assurance and premium service at every step."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We're here to help."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg?_wi=3"
|
||||
mediaAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you ship worldwide?",
|
||||
content: "Yes, we ship to over 50 countries globally.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day no-questions-asked return policy.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are your products eco-friendly?",
|
||||
content: "We prioritize sustainable sourcing for all our essentials.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "How can I track my order?",
|
||||
content: "You will receive an email with tracking details once your item ships.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We're here to help."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pretty-young-girl-thinking-library_23-2148727801.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you ship worldwide?", content: "Yes, we ship to over 50 countries globally." },
|
||||
{ id: "q2", title: "What is your return policy?", content: "We offer a 30-day no-questions-asked return policy." },
|
||||
{ id: "q3", title: "Are your products eco-friendly?", content: "We prioritize sustainable sourcing for all our essentials." },
|
||||
{ id: "q4", title: "How can I track my order?", content: "You will receive an email with tracking details once your item ships." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Subscribe to our emails"
|
||||
description="Join our email list for exclusive offers and the latest news."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142180.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Sign up"
|
||||
tag="Stay Informed"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
title="Subscribe to our emails"
|
||||
description="Join our email list for exclusive offers and the latest news."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142180.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Sign up"
|
||||
tag="Stay Informed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="RLX Store"
|
||||
copyrightText="© 2025 RLX Store. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="RLX Store"
|
||||
copyrightText="© 2025 RLX Store. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user