Switch to version 2: modified src/app/page.tsx
This commit is contained in:
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -65,17 +65,16 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Glossy Finish", description: "High-shine lip care for an elevated look.", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-product-beauty-branding_23-2149504640.jpg" },
|
||||
{ title: "Rich Nutrition", description: "Nutrient-dense formulas for soft, healthy skin.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-routine-essential_23-2149504660.jpg" },
|
||||
{ title: "Chic Design", description: "Sophisticated packaging that looks beautiful anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg" },
|
||||
]}
|
||||
title="The Rhode Aesthetic"
|
||||
description="Performance skincare that doubles as a chic accessory."
|
||||
features={[
|
||||
{ id: "f1", label: "01", title: "Glossy Finish", items: ["High-shine lip care", "Elevated look", "Glossy texture"] },
|
||||
{ id: "f2", label: "02", title: "Rich Nutrition", items: ["Nutrient-dense", "Healthy skin", "Deep hydration"] },
|
||||
{ id: "f3", label: "03", title: "Chic Design", items: ["Sophisticated packaging", "Beautiful design", "Modern aesthetic"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -96,67 +95,68 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
cardTitle="Loved by the Chic"
|
||||
cardTag="Testimonials"
|
||||
<TestimonialCardThirteen
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Join the global community embracing the glow."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Maya A.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling_23-2149504780.jpg" },
|
||||
{ id: "2", name: "Leo S.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-minimal_23-2149504790.jpg" },
|
||||
{ id: "1", name: "Maya A.", handle: "@maya.glow", testimonial: "The lip gloss is absolutely iconic. Chic and nourishing.", rating: 5 },
|
||||
{ id: "2", name: "Leo S.", handle: "@leoskin", testimonial: "Perfect routine for that effortless look. Simply expensive.", rating: 5 },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Loved by the Chic"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="blur-reveal"
|
||||
gridVariant="bento-grid"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Proven Glow"
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
description="Elevating your daily beauty ritual with proven care."
|
||||
metrics={[
|
||||
{ id: "m1", value: "98%", description: "Visible radiance improvement" },
|
||||
{ id: "m2", value: "100%", description: "Loved for style & performance" },
|
||||
{ id: "m1", value: "98%", title: "Glow Index", description: "Visible radiance improvement.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-splash_23-2149504720.jpg" },
|
||||
{ id: "m2", value: "100%", title: "Chic Appeal", description: "Loved for style & performance.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-texture_23-2149504730.jpg" },
|
||||
]}
|
||||
title="Proven Glow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqsAnimation="blur-reveal"
|
||||
sideTitle="Glossary"
|
||||
sideDescription="Everything you need to know about our signature glow."
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Everything you need to know about our signature glow."
|
||||
faqs={[
|
||||
{ id: "q1", title: "Are these glosses sticky?", content: "Not at all. Our formula is designed for smooth, glassy comfort." },
|
||||
{ id: "q2", title: "Is Rhode dermatologist-tested?", content: "Yes, all our formulas are rigorously tested for your skin barrier." },
|
||||
]}
|
||||
title="Glossary"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Exclusive Access"
|
||||
title="Join the Rhode Circle"
|
||||
description="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
|
||||
buttons={[{ text: "Join the Circle", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg"
|
||||
logoText="rhode"
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Journal", href: "#" }] },
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
{ items: [{ label: "Shop", href: "#products" }, { label: "Journal", href: "#" }] },
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
|
||||
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="rhode"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user