123 lines
5.9 KiB
TypeScript
123 lines
5.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
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 TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import { Recycle } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Surface", id: "hero" },
|
|
{ name: "The Strategy", id: "about" },
|
|
{ name: "Midwater", id: "features" },
|
|
{ name: "Abyss", id: "metrics" },
|
|
{ name: "Connect", id: "contact" },
|
|
]}
|
|
brandName="DEBRIS FREE OCEANS"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{ variant: "rotated-rays-animated" }}
|
|
title="DEBRIS FREE OCEANS"
|
|
description="Turning off the waste tap to protect our blue planet."
|
|
buttons={[
|
|
{ text: "Dive in", href: "#about" },
|
|
]}
|
|
carouselItems={[
|
|
{ id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/sunlight-rays-piercing-through-clear-tur-1775511259373-29d7a359.png", imageAlt: "Surface sunlight" },
|
|
{ id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/gentle-waves-on-the-surface-sun-rays-ref-1775511260087-d14b8e7f.png", imageAlt: "Sun rays refraction" },
|
|
{ id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-ascending-slowly-through-ocean-s-1775511261316-98e8ea56.png", imageAlt: "Ascending bubbles" },
|
|
{ id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/ethereal-sunlight-beams-piercing-into-tu-1775511261139-159d49eb.png", imageAlt: "Turquoise beams" },
|
|
{ id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bioluminescent-particles-drifting-in-lig-1775511261074-c3518511.png", imageAlt: "Bioluminescent drift" },
|
|
{ id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/panoramic-ocean-surface-with-sun-glisten-1775511261059-f4eb7d73.png", imageAlt: "Expansive sea" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Mission"
|
|
title="Turning Off The Waste Tap"
|
|
description="We are a Miami-based non-profit organization dedicated to advancing a zero-waste economy. Our goal is to shift cultural paradigms away from disposable living toward a circular future."
|
|
subdescription="Through community, education, and advocacy, we tackle the root causes of ocean plastic pollution, protecting the delicate ecosystems that define our blue planet."
|
|
icon={Recycle}
|
|
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.mp4"
|
|
mediaAnimation="blur-reveal"
|
|
className="py-24 bg-background-accent"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
title="Our Core Strategy: The 5Rs"
|
|
description='We move beyond just "cleaning up" by integrating a circular approach to waste'
|
|
features={[
|
|
{ id: "1", label: "Reduce", title: "Consumption Shift", items: ["Inspiring a shift away from single-use consumption to stop waste before it starts.", "Consumer awareness initiatives"] },
|
|
{ id: "2", label: "Reuse & Repurpose", title: "Circularity", items: ["Material upcycling projects", "Community repair workshops", "Resource recovery networks"] },
|
|
{ id: "3", label: "The Goal", title: "Restoration", items: ["Ecosystem cleaning efforts", "Policy advocacy for ocean health", "Zero-waste infrastructure"] },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Oceanic Depths"
|
|
tag="In-Depth Exploration"
|
|
metrics={[
|
|
{ id: "depth", value: "11,000m", description: "Maximum Mariana Depth" },
|
|
{ id: "temp", value: "2°C", description: "Abyssal Zone Temperature" },
|
|
{ id: "press", value: "1,000atm", description: "Intense Pressure Level" },
|
|
]}
|
|
metricsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Stay Updated"
|
|
title="Join the Descent"
|
|
description="Sign up for updates about new zones to explore as we continue to unlock the mysteries of the deep."
|
|
buttonText="Join The Mission"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="OCEANIC"
|
|
copyrightText="© 2025 Oceanic Immersive | All Rights Reserved"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |