|
|
|
|
@@ -3,14 +3,12 @@
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
|
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
|
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
|
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
|
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
|
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
|
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
|
|
|
import { BarChart3, Users, Target, Zap } from 'lucide-react';
|
|
|
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
@@ -21,9 +19,9 @@ export default function LandingPage() {
|
|
|
|
|
contentWidth="mediumLarge"
|
|
|
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
|
|
|
background="grid"
|
|
|
|
|
cardStyle="gradient-radial"
|
|
|
|
|
cardStyle="glass-elevated"
|
|
|
|
|
primaryButtonStyle="diagonal-gradient"
|
|
|
|
|
secondaryButtonStyle="solid"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="extrabold"
|
|
|
|
|
>
|
|
|
|
|
<ReactLenis root>
|
|
|
|
|
@@ -31,7 +29,7 @@ export default function LandingPage() {
|
|
|
|
|
<NavbarStyleApple
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Surface", id: "hero" },
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "The Strategy", id: "about" },
|
|
|
|
|
{ name: "Midwater", id: "features" },
|
|
|
|
|
{ name: "Abyss", id: "metrics" },
|
|
|
|
|
{ name: "Connect", id: "contact" },
|
|
|
|
|
@@ -60,32 +58,31 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<AboutMetric
|
|
|
|
|
title="Our Impact Underwater"
|
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
<MetricSplitMediaAbout
|
|
|
|
|
title="Our Mission & The 5Rs Strategy"
|
|
|
|
|
description="We are dedicated to safeguarding our oceans by implementing a proactive, layered approach to waste management and community engagement."
|
|
|
|
|
metrics={[
|
|
|
|
|
{ icon: BarChart3, label: "Depth Scanned", value: "45,000 km" },
|
|
|
|
|
{ icon: Users, label: "Active Explorers", value: "1,200+" },
|
|
|
|
|
{ icon: Target, label: "Zones Discovered", value: "85" },
|
|
|
|
|
{ icon: Zap, label: "Data Processed", value: "12 TB" }
|
|
|
|
|
{ value: "5", title: "Core Pillars (5Rs)" },
|
|
|
|
|
{ value: "100%", title: "Ecological Commitment" }
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png"
|
|
|
|
|
className="bg-background-accent text-foreground py-20"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
<FeatureCardThree
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
<FeatureCardTwelve
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
title="What We Do"
|
|
|
|
|
description="Our strategy focuses on systematic change and actionable community restoration initiatives."
|
|
|
|
|
features={[
|
|
|
|
|
{ title: "Bioluminescent Wonders", description: "Glimmering organisms that light up the darkness.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png" },
|
|
|
|
|
{ title: "Fluid Dynamics", description: "Experience currents that shape the ocean floor.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/school-of-fish-swimming-through-midwater-1775511261257-73e530b0.png" },
|
|
|
|
|
{ title: "Atmospheric Pressure", description: "Feel the intensity of depth in every interaction.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-drifting-past-futuristic-ocean-u-1775511260463-ae02a6e5.png" },
|
|
|
|
|
{ id: "1", label: "Refuse & Reduce", title: "Prevention", items: ["Single-use ban", "Packaging audits"] },
|
|
|
|
|
{ id: "2", label: "Reuse & Repurpose", title: "Circularity", items: ["Material upcycling", "Community workshops"] },
|
|
|
|
|
{ id: "3", label: "The Goal", title: "Restoration", items: ["Ecosystem cleaning", "Policy advocacy"] },
|
|
|
|
|
]}
|
|
|
|
|
title="The Midwater Journey"
|
|
|
|
|
description="As you descend, witness the change in light, pressure, and the diverse marine life thriving in these deep, cool waters."
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -103,24 +100,6 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardThirteen
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
testimonials={[
|
|
|
|
|
{ id: "1", name: "Elena V.", handle: "@elena_ocean", testimonial: "The transition to the deep ocean felt so incredibly real.", rating: 5 },
|
|
|
|
|
{ id: "2", name: "Marcus R.", handle: "@marcus_deep", testimonial: "The lighting effects are absolutely stunning. Truly immersive.", rating: 5 },
|
|
|
|
|
{ id: "3", name: "Sarah K.", handle: "@sarah_waves", testimonial: "A calming and futuristic experience unlike any other I've seen.", rating: 5 },
|
|
|
|
|
{ id: "4", name: "David W.", handle: "@david_explore", testimonial: "Loved the subtle animations as you scroll down the page.", rating: 5 },
|
|
|
|
|
{ id: "5", name: "Chloe L.", handle: "@chloe_blue", testimonial: "The perfect balance of minimalist UI and deep ocean atmosphere.", rating: 5 },
|
|
|
|
|
]}
|
|
|
|
|
showRating={true}
|
|
|
|
|
title="Explorers' Impressions"
|
|
|
|
|
description="Discover what fellow travelers experienced during their descent."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
|
