Update src/app/page.tsx

This commit is contained in:
2026-04-13 06:12:30 +00:00
parent c35c4c261e
commit cc0b5fba2f

View File

@@ -14,190 +14,115 @@ import { Building, Scan, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
defaultButtonVariant="shift-hover"
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">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "home",
},
{
name: "How it Works",
id: "features",
},
{
name: "ESG Metrics",
id: "metrics",
},
{
name: "Community",
id: "testimonials",
},
]}
brandName="GreenScan"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "home" },
{ name: "Features", id: "features" },
{ name: "Metrics", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="GreenScan"
/>
</div>
<div id="home" data-section="home">
<HeroSplitDualMedia
background={{
variant: "plain",
}}
title="Empowering Conscious Decisions Through ESG Intelligence"
description="Scan every product barcode to instantly access verified ESG green ratings. Experience the transparency of modern green finance in the palm of your hand."
tag="Luxury ESG Scanner"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-device_23-2149340927.jpg",
imageAlt: "smartphone barcode scanning app interface",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-covid19-international-vaccination-certificate-with-qr-code-phone-pink-background_1268-19588.jpg",
imageAlt: "mobile barcode scanner app closeup",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-wearing-face-mask_23-2149340932.jpg",
imageAlt: "Medium shot woman wearing face mask",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hands-scanning-qr-code-close-up_23-2149303379.jpg",
imageAlt: "Hands scanning qr code close up",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-restaurant_23-2150384784.jpg",
imageAlt: "Medium shot woman in restaurant",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Verified by 50,000+ conscious users"
/>
</div>
<div id="home" data-section="home">
<HeroSplitDualMedia
background={{ variant: "plain" }}
title="Empowering Conscious Decisions Through ESG Intelligence"
description="Scan every product barcode to instantly access verified ESG green ratings. Experience the transparency of modern green finance in the palm of your hand."
tag="Luxury ESG Scanner"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-device_23-2149340927.jpg", imageAlt: "smartphone barcode scanning app interface"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-covid19-international-vaccination-certificate-with-qr-code-phone-pink-background_1268-19588.jpg", imageAlt: "mobile barcode scanner app closeup"
}
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Verified by 50,000+ conscious users"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={true}
title="Advanced ESG Data Science"
description="Our scanner doesn't just read barcodes; it queries global sustainability databases to provide real-time ESG metrics you can actually trust."
accordionItems={[
{
id: "1",
title: "Real-time ESG Analysis",
content: "Instant lookup of carbon footprints and social labor scores.",
},
{
id: "2",
title: "Transparency Guaranteed",
content: "Verified supply chain data from independent global sources.",
},
{
id: "3",
title: "Personalized Impact Scoring",
content: "Understand your purchasing impact with our unique 100-point scale.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
mediaAnimation="opacity"
imageAlt="esg metrics analytical dashboard screen"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={true}
title="Advanced ESG Data Science"
description="Our scanner doesn't just read barcodes; it queries global sustainability databases to provide real-time ESG metrics you can actually trust."
accordionItems={[
{ id: "1", title: "Real-time ESG Analysis", content: "Instant lookup of carbon footprints and social labor scores." },
{ id: "2", title: "Transparency Guaranteed", content: "Verified supply chain data from independent global sources." },
{ id: "3", title: "Personalized Impact Scoring", content: "Understand your purchasing impact with our unique 100-point scale." }
]}
imageSrc="http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
mediaAnimation="opacity"
imageAlt="esg metrics analytical dashboard screen"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
icon: Scan,
title: "Products Scanned",
value: "1.2M+",
},
{
id: "m2",
icon: Building,
title: "Carbon Reduced",
value: "50K tons",
},
{
id: "m3",
icon: Star,
title: "Average Score",
value: "84/100",
},
]}
title="Sustainability at Scale"
description="Quantifiable impact data for every product you scan."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", icon: Scan, title: "Products Scanned", value: "1.2M+" },
{ id: "m2", icon: Building, title: "Carbon Reduced", value: "50K tons" },
{ id: "m3", icon: Star, title: "Average Score", value: "84/100" }
]}
title="Sustainability at Scale"
description="Quantifiable impact data for every product you scan."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Elena Vance",
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg",
},
{
id: "2",
name: "Marcus Thorne",
imageSrc: "http://img.b2bpic.net/free-photo/young-person-intership_23-2149315641.jpg",
},
{
id: "3",
name: "Sita Ray",
imageSrc: "http://img.b2bpic.net/free-photo/female-gardner-plant-house-with-plants-flowers_1303-26428.jpg",
},
{
id: "4",
name: "Julian Pike",
imageSrc: "http://img.b2bpic.net/free-photo/shopping-girl-phone_23-2148023383.jpg",
},
{
id: "5",
name: "Claire Dupont",
imageSrc: "http://img.b2bpic.net/free-photo/paying-purchases_1098-19435.jpg",
},
]}
cardTitle="Loved by Conscious Leaders"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Elena Vance", imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg" },
{ id: "2", name: "Marcus Thorne", imageSrc: "http://img.b2bpic.net/free-photo/young-person-intership_23-2149315641.jpg" },
{ id: "3", name: "Sita Ray", imageSrc: "http://img.b2bpic.net/free-photo/female-gardner-plant-house-with-plants-flowers_1303-26428.jpg" },
{ id: "4", name: "Julian Pike", imageSrc: "http://img.b2bpic.net/free-photo/shopping-girl-phone_23-2148023383.jpg" },
{ id: "5", name: "Claire Dupont", imageSrc: "http://img.b2bpic.net/free-photo/paying-purchases_1098-19435.jpg" }
]}
cardTitle="Loved by Conscious Leaders"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
tag="Join the Movement"
title="Be the First to Experience GreenScan"
description="Sign up for early access to our exclusive luxury beta, starting this Fall."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
tag="Join the Movement"
title="Be the First to Experience GreenScan"
description="Sign up for early access to our exclusive luxury beta, starting this Fall."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="GreenScan"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="GreenScan"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);