Update src/app/page.tsx
This commit is contained in:
150
src/app/page.tsx
150
src/app/page.tsx
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
@@ -9,65 +9,63 @@ import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwent
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import { ArrowRight, Heart, Instagram, Leaf, Mail, Target, TrendingUp, Zap } from 'lucide-react';
|
||||
import { ArrowRight, Leaf, Mail, Target, TrendingUp, Heart, Zap } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Blue Forest"
|
||||
brandName="Seatrees"
|
||||
navItems={[
|
||||
{ name: "Journey", id: "updates" },
|
||||
{ name: "Support", id: "support" },
|
||||
{ name: "Mission", id: "about" },
|
||||
{ name: "Impact", id: "metrics" },
|
||||
{ name: "Team", id: "/team" },
|
||||
{ name: "About", id: "/about" }
|
||||
{ name: "How It Works", id: "updates" },
|
||||
{ name: "Plans", id: "support" }
|
||||
]}
|
||||
button={{
|
||||
text: "Donate", href: "#contact"
|
||||
text: "Get Started", href: "#support"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Blue Forest Project"
|
||||
description="Student-led kelp restoration starting in San Diego. We're growing ocean ecosystems, one forest at a time."
|
||||
tag="Kelp Restoration"
|
||||
title="Restore the Ocean, One Action at a Time"
|
||||
description="Join millions making a real impact. Plant trees, restore habitats, and rebuild marine ecosystems with Seatrees."
|
||||
tag="Ocean Restoration"
|
||||
tagIcon={Leaf}
|
||||
buttons={[
|
||||
{ text: "Donate Now", href: "#support" },
|
||||
{ text: "Follow the Journey", href: "#updates" }
|
||||
{ text: "Start Restoring", href: "#support" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg", imageAlt: "Vibrant kelp forest underwater ecosystem"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg", imageAlt: "Vibrant underwater ocean ecosystem"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=1", imageAlt: "Kelp tank research setup with monitoring equipment"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=1", imageAlt: "Ocean restoration project setup"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=1", imageAlt: "Team conducting field research in San Diego waters"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=1", imageAlt: "Team conducting marine research"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/close-up-scientist-analysing-health-informations-tablet-while-specialist-sport-supervises-exercise-sportsman-monitoring-his-physical-endurance-examining-medical-scan-notepad-laboratory_482257-13199.jpg?_wi=1", imageAlt: "Advanced monitoring gear for kelp forest health tracking"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/close-up-scientist-analysing-health-informations-tablet-while-specialist-sport-supervises-exercise-sportsman-monitoring-his-physical-endurance-examining-medical-scan-notepad-laboratory_482257-13199.jpg?_wi=1", imageAlt: "Marine monitoring and tracking"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=1", imageAlt: "Students collaborating on restoration project"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=1", imageAlt: "Team collaborating on restoration"
|
||||
}
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
@@ -77,8 +75,8 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Live Impact"
|
||||
description="Real-time progress toward our kelp restoration goals. Every dollar fuels research and growth."
|
||||
title="Real Impact, Measured Daily"
|
||||
description="Every action counts. See the real-time progress of our global ocean restoration movement."
|
||||
tag="Our Progress"
|
||||
tagIcon={TrendingUp}
|
||||
textboxLayout="default"
|
||||
@@ -86,10 +84,10 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "$12,450", title: "Funds Raised", description: "Supporting our first kelp tank and monitoring system", imageSrc: "https://img.b2bpic.net/free-vector/growing-up-landing-page-template_23-2148114137.jpg", imageAlt: "progress chart growth metrics achievement success indicators data visualization"
|
||||
id: "1", value: "2.4M", title: "Trees Planted", description: "Seagrass, mangroves, and kelp forests restored worldwide", imageSrc: "https://img.b2bpic.net/free-vector/growing-up-landing-page-template_23-2148114137.jpg", imageAlt: "growth metrics achievement success"
|
||||
},
|
||||
{
|
||||
id: "2", value: "2,340", title: "Supporters", description: "Students, scientists, and ocean advocates backing our mission", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=2", imageAlt: "student team research team collaboration students working project team"
|
||||
id: "2", value: "890K", title: "Active Members", description: "People around the world restoring ocean ecosystems", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=2", imageAlt: "community collaboration team"
|
||||
}
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
@@ -99,21 +97,21 @@ export default function LandingPage() {
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaSplitTabsAbout
|
||||
title="About Blue Forest"
|
||||
description="We're just getting started—and that's the point. Real science, real students, real impact."
|
||||
title="How We're Restoring the Ocean"
|
||||
description="Science-backed restoration that actually works. Every action is transparent, measured, and accountable."
|
||||
tabs={[
|
||||
{
|
||||
id: "mission", label: "Our Mission", description: "We're restoring kelp forests in San Diego waters through hands-on research, community science, and transparent documentation of our progress. This project is entirely student-led, combining marine biology with entrepreneurial thinking to prove that young people can drive environmental change."
|
||||
id: "mission", label: "Our Mission", description: "We're making ocean restoration accessible to everyone. Through tree-planting partnerships, habitat protection, and direct restoration projects, we're rebuilding marine ecosystems at scale. No greenwashing. Real science. Real impact."
|
||||
},
|
||||
{
|
||||
id: "focus", label: "What We Do", description: "We're growing kelp in controlled tank environments to understand growth patterns, test restoration techniques, and monitor environmental variables. Our lab work directly informs field restoration efforts, creating a feedback loop between controlled research and real-ocean impact."
|
||||
id: "focus", label: "What We Do", description: "We plant seagrass, restore mangrove forests, and rebuild coral reefs. Every restoration project is monitored with satellite imagery and on-the-ground verification. We work with local communities and marine biologists to ensure every action creates lasting impact."
|
||||
},
|
||||
{
|
||||
id: "approach", label: "Monitoring & Science", description: "Every experiment is tracked. Every data point matters. We use professional-grade monitoring equipment to measure water quality, growth rates, and ecosystem health. Our data is open, our methods are transparent, and our mistakes become learning moments we share publicly."
|
||||
id: "approach", label: "Transparent & Verified", description: "Every restoration project is tracked, verified, and reported. We use cutting-edge satellite monitoring to track growth, measure impact, and share data publicly. You always know exactly where your contribution goes and what impact it creates."
|
||||
}
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=2"
|
||||
imageAlt="Kelp tank research setup with monitoring sensors"
|
||||
imageAlt="Ocean restoration monitoring"
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -122,26 +120,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="updates" data-section="updates">
|
||||
<FeatureCardTwentySix
|
||||
title="Follow the Journey"
|
||||
description="Real updates from the lab and the field. Unfiltered progress, honest setbacks, genuine wins."
|
||||
tag="Built in Public"
|
||||
title="How It Works"
|
||||
description="Four simple steps to make a real difference in ocean restoration."
|
||||
tag="The Process"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Tank Setup Complete", description: "First kelp cohort planted and monitoring systems online. Early growth metrics exceeding expectations.", imageSrc: "https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=3", imageAlt: "Newly established kelp research tank", buttonIcon: ArrowRight,
|
||||
title: "Choose Your Impact", description: "Select from seagrass restoration, mangrove reforestation, or coral reef recovery. Each has different benefits and timelines.", imageSrc: "https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=3", imageAlt: "Impact selection", buttonIcon: ArrowRight,
|
||||
buttonHref: "#support"
|
||||
},
|
||||
{
|
||||
title: "Make Your Contribution", description: "Flexible plans from $5/month to one-time donations. Your money directly funds restoration on the ground.", imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=2", imageAlt: "Contributing to restoration", buttonIcon: ArrowRight,
|
||||
buttonHref: "#support"
|
||||
},
|
||||
{
|
||||
title: "Track Your Impact", description: "Watch your restoration project grow. Monthly updates with satellite imagery show exactly how your contribution is creating change.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-scientist-analysing-health-informations-tablet-while-specialist-sport-supervises-exercise-sportsman-monitoring-his-physical-endurance-examining-medical-scan-notepad-laboratory_482257-13199.jpg?_wi=2", imageAlt: "Tracking project progress", buttonIcon: ArrowRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "Field Research Week", description: "Collected baseline data from three San Diego restoration sites. Water samples and growth surveys complete.", imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=2", imageAlt: "Team conducting underwater field research", buttonIcon: ArrowRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "Monitoring Tools Deployed", description: "Real-time pH, temperature, and salinity sensors now tracking tank conditions 24/7 with automated alerts.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-scientist-analysing-health-informations-tablet-while-specialist-sport-supervises-exercise-sportsman-monitoring-his-physical-endurance-examining-medical-scan-notepad-laboratory_482257-13199.jpg?_wi=2", imageAlt: "Advanced monitoring equipment installed", buttonIcon: ArrowRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "Student Collaborations", description: "Partnered with three local universities. Data-sharing agreements signed. Real peer collaboration happening.", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=3", imageAlt: "Team members collaborating on research", buttonIcon: ArrowRight,
|
||||
title: "See Global Results", description: "Join millions making impact. Our dashboard shows real-time progress on every restoration project around the world.", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1689.jpg?_wi=3", imageAlt: "Global impact dashboard", buttonIcon: ArrowRight,
|
||||
buttonHref: "#"
|
||||
}
|
||||
]}
|
||||
@@ -152,32 +150,30 @@ export default function LandingPage() {
|
||||
|
||||
<div id="support" data-section="support">
|
||||
<PricingCardTwo
|
||||
title="Support Our Mission"
|
||||
description="Choose how you want to help. Every contribution funds equipment, research, and real ocean impact."
|
||||
tag="Funding"
|
||||
title="Choose Your Plan"
|
||||
description="Flexible options to fit your budget. Every dollar goes directly to ocean restoration."
|
||||
tag="Pricing"
|
||||
tagIcon={Heart}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "gofundme", badge: "Primary Fundraiser", badgeIcon: Target,
|
||||
price: "Any Amount", subtitle: "Support the full project on GoFundMe", buttons: [
|
||||
{ text: "Donate on GoFundMe", href: "https://www.gofundme.com" },
|
||||
{ text: "View Campaign", href: "#" }
|
||||
id: "monthly", badge: "Most Popular", badgeIcon: Target,
|
||||
price: "$9", subtitle: "/month", buttons: [
|
||||
{ text: "Subscribe Now", href: "#" }
|
||||
],
|
||||
features: [
|
||||
"Kelp tank maintenance & growth", "Water chiller system", "Monitoring equipment & sensors", "Field research supplies", "Lab upgrades"
|
||||
"~15 trees planted monthly", "Monthly impact updates", "Satellite tracking included", "Cancel anytime", "Community member badge"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "venmo", badge: "Quick Donation", badgeIcon: Zap,
|
||||
price: "$5 - $500", subtitle: "Instant support via Venmo direct payments", buttons: [
|
||||
{ text: "Donate via Venmo", href: "https://www.venmo.com" },
|
||||
{ text: "Learn About Venmo", href: "#" }
|
||||
id: "annual", badge: "Best Value", badgeIcon: Zap,
|
||||
price: "$99", subtitle: "/year", buttons: [
|
||||
{ text: "Subscribe Now", href: "#" }
|
||||
],
|
||||
features: [
|
||||
"Flexible donation amounts", "Instant processing", "Direct to project fund", "Thank you updates", "Supporter recognition"
|
||||
"~180 trees planted yearly", "Exclusive impact reports", "Priority project access", "Save 25% vs monthly", "Founding member status"
|
||||
]
|
||||
}
|
||||
]}
|
||||
@@ -188,13 +184,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tag="Get Started Today"
|
||||
tagIcon={Mail}
|
||||
title="Connect With Us"
|
||||
description="Have questions? Want to collaborate? Ready to support? Reach out directly. We read every message and respond personally."
|
||||
title="Ready to Restore?"
|
||||
description="Join thousands of people making real impact. Start your ocean restoration journey with just one click."
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:hello@blueforestproject.org" },
|
||||
{ text: "Follow on Social", href: "#social" }
|
||||
{ text: "Subscribe Now", href: "#support" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
@@ -203,15 +199,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Blue Forest"
|
||||
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego"
|
||||
logoText="Seatrees"
|
||||
copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://www.instagram.com/blueforestproject", ariaLabel: "Blue Forest on Instagram" },
|
||||
{ icon: TrendingUp, href: "https://www.tiktok.com/@blueforestproject", ariaLabel: "Blue Forest on TikTok" },
|
||||
{ icon: Mail, href: "mailto:hello@blueforestproject.org", ariaLabel: "Email Blue Forest Project" }
|
||||
{ icon: TrendingUp, href: "https://www.instagram.com/seatrees", ariaLabel: "Seatrees on Instagram" },
|
||||
{ icon: Heart, href: "https://www.twitter.com/seatrees", ariaLabel: "Seatrees on Twitter" },
|
||||
{ icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user