bender/31831e9e-4cfa-49b3-b6b5-6a1296e35aee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #3

Merged
bender merged 9 commits from version_3 into main 2026-02-19 18:13:36 +00:00
Conversation 0 Commits 9 Files Changed 9 +278 -334
9 changed files with 278 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/about/page.tsx
View File

@@ -6,57 +6,56 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, TrendingUp, Mail, ArrowRight, Target } from 'lucide-react';
import { TrendingUp, Mail, ArrowRight, Heart } from 'lucide-react';
export default function AboutPage() {
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"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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="about" data-section="about">
<MediaSplitTabsAbout
title="About Blue Forest Project"
description="A student-led initiative combining rigorous marine science with transparent documentation and real ocean impact."
title="Our Mission: Restore the Ocean"
description="We're building a global movement to restore marine ecosystems. Through science, technology, and community action, we're proving that ocean restoration can be simple, transparent, and effective."
tabs={[
{
id: "origin", label: "Our Story", description: "Blue Forest started as a simple question: What if students could design and execute real marine restoration science? We weren't interested in theory alone. We wanted hands-on experience growing kelp, testing restoration techniques, and building a complete understanding of what it takes to restore ocean ecosystems. Starting from San Diego, we've created a transparent, peer-reviewed approach to kelp restoration that proves young people can drive environmental change."
id: "story", label: "Our Story", description: "Seatrees was founded on a simple idea: ocean restoration should be accessible to everyone. We started by connecting people who care about the ocean with verified restoration projects that create real impact. Today, we're a global community of nearly a million people restoring marine ecosystems across the world."
},
{
id: "science", label: "Our Science", description: "We operate with full scientific rigor. Our tanks are equipped with professional-grade sensors monitoring pH, temperature, salinity, and light cycles 24/7. Every growth measurement is recorded. Every experiment is documented. We partner with university researchers to validate our methods and share data openly. Our approach combines controlled lab research with field restoration, creating a feedback loop that improves our impact in real ocean waters."
id: "science", label: "Our Science", description: "Every project is science-backed. We partner with marine researchers, conservation organizations, and local communities to ensure our restoration efforts follow best practices. Satellite monitoring, regular field verification, and peer-reviewed data keep us accountable to our mission and to you."
},
{
id: "impact", label: "Our Impact", description: "Real numbers matter. We've successfully grown kelp cohorts from spore to mature plants. We've trained over 50 student researchers. We're partnering with three universities on peer-reviewed studies. Our monitoring data has revealed insights about optimal growth conditions that are now informing restoration site selection along the San Diego coast. Every dollar raised funds equipment upgrades and expands our field restoration capacity."
id: "impact", label: "Our Impact", description: "Real numbers. We've restored 2.4 million trees across seagrass meadows, mangrove forests, and coral reefs. Our restoration projects have protected over 50,000 acres of marine habitat. Every action is tracked, measured, and reported. You always know exactly what you're creating."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/woman-s-hand-pouring-water-glass-container-filled-with-pieces-paper_23-2147845512.jpg?_wi=2"
imageAlt="Blue Forest research lab with monitoring equipment"
imageAlt="Ocean restoration monitoring"
imagePosition="right"
mediaAnimation="slide-up"
useInvertedBackground={false}
@@ -65,26 +64,26 @@ export default function AboutPage() {
<div id="values" data-section="values">
<FeatureCardTwentySix
title="How We Work"
description="Our approach is built on these core principles that guide every decision we make."
tag="Our Values"
title="Our Core Values"
description="These principles guide every decision we make."
tag="What We Stand For"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Transparent Science", description: "We share every experiment, every failure, every learning. No hidden data, no cherry-picked results. Real science means showing your work and inviting peer review.", imageSrc: "https://img.b2bpic.net/free-photo/scientists-working-together-in-laboratory_23-2148116421.jpg", imageAlt: "Team collaborating on research", buttonIcon: ArrowRight,
title: "Transparent", description: "No greenwashing. Every project is documented, monitored, and verified. You see exactly where your money goes and what impact it creates.", imageSrc: "https://img.b2bpic.net/free-photo/scientists-working-together-in-laboratory_23-2148116421.jpg", imageAlt: "Team collaborating", buttonIcon: ArrowRight,
buttonHref: "#"
},
{
title: "Student Leadership", description: "This is student-led from top to bottom. We design the experiments, conduct the research, analyze the data, and drive the field work. Our advisors guide, but we own the science.", imageSrc: "https://img.b2bpic.net/free-photo/group-young-researchers_23-2148116389.jpg", imageAlt: "Student researchers in the field", buttonIcon: ArrowRight,
title: "Science-Backed", description: "We work with marine biologists, conservation experts, and universities. Every restoration method is research-tested and optimized for maximum impact.", imageSrc: "https://img.b2bpic.net/free-photo/group-young-researchers_23-2148116389.jpg", imageAlt: "Research team", buttonIcon: ArrowRight,
buttonHref: "#"
},
{
title: "Real Ocean Impact", description: "We don't just grow kelp in tanks. We take what we learn directly to San Diego's waters and restore actual kelp forests. Lab research informs field work. Field results improve lab experiments.", imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=2", imageAlt: "Underwater field restoration work", buttonIcon: ArrowRight,
title: "Community-Driven", description: "Ocean restoration works best with local communities. We partner with fishermen, coastal residents, and indigenous peoples who know these ecosystems best.", imageSrc: "https://img.b2bpic.net/free-photo/astronaut-diving-ocean_23-2151549787.jpg?_wi=2", imageAlt: "Community collaboration", buttonIcon: ArrowRight,
buttonHref: "#"
},
{
title: "Community Accountability", description: "We're accountable to our donors, our academic partners, and the ocean ecosystem we're trying to restore. Monthly progress updates, quarterly reports, and annual impact assessments keep us honest.", imageSrc: "https://img.b2bpic.net/free-photo/diverse-team-collaborating_23-2148116487.jpg", imageAlt: "Community collaboration meeting", buttonIcon: ArrowRight,
title: "Scalable Impact", description: "We've proven the model works. Now we're scaling globally. Millions of people + local expertise + technology = real ocean restoration at scale.", imageSrc: "https://img.b2bpic.net/free-photo/diverse-team-collaborating_23-2148116487.jpg", imageAlt: "Global collaboration", buttonIcon: ArrowRight,
buttonHref: "#"
}
]}
@@ -95,16 +94,16 @@ export default function AboutPage() {
<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>
</ReactLenis>
</ThemeProvider>
);
}
}

53
src/app/blog/page.tsx
View File

@@ -6,38 +6,37 @@ import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { useBlogPosts } from "@/hooks/useBlogPosts";
import { Instagram, TrendingUp, Mail } from 'lucide-react';
import { TrendingUp, Mail, Heart } from 'lucide-react';
export default function BlogPage() {
const { posts, isLoading } = useBlogPosts();
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"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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>
@@ -51,32 +50,32 @@ export default function BlogPage() {
<BlogCardTwo
blogs={posts}
title="Ocean Stories"
description="Discover insights from our kelp restoration journey and marine conservation efforts"
description="Discover insights from our ocean restoration journey and marine conservation efforts"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
carouselMode="buttons"
tag="Blue Forest Blog"
tag="Seatrees Blog"
/>
</div>
)}
<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.instagram.com/seatrees", ariaLabel: "Seatrees on Instagram"
},
{
icon: TrendingUp,
href: "https://www.tiktok.com/@blueforestproject", ariaLabel: "Blue Forest on TikTok"
icon: Heart,
href: "https://www.twitter.com/seatrees", ariaLabel: "Seatrees on Twitter"
},
{
icon: Mail,
href: "mailto:hello@blueforestproject.org", ariaLabel: "Email Blue Forest Project"
href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees"
}
]}
/>
@@ -84,4 +83,4 @@ export default function BlogPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

20
src/app/layout.tsx
View File

@@ -1,24 +1,24 @@
import type { Metadata } from "next";
import { Lora } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const lora = Lora({
variable: "--font-lora", subsets: ["latin"],
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Blue Forest Project | Student-Led Kelp Restoration", description: "Real students, real science, real impact. A transparent kelp restoration project starting in San Diego. Restoring ocean ecosystems from the ground up.", keywords: ["kelp restoration", "ocean conservation", "student science", "environmental research", "marine biology", "sustainability"],
title: "Seatrees | Ocean Restoration Made Simple", description: "Join the global movement to restore ocean ecosystems. Plant trees, protect marine habitats, and make a real impact with Seatrees.", keywords: ["ocean restoration", "marine conservation", "environmental impact", "seagrass restoration", "coral reefs", "sustainability"],
openGraph: {
title: "Blue Forest Project", description: "Student-led kelp restoration changing San Diego's ocean ecosystem", type: "website", siteName: "Blue Forest Project", images: [
title: "Seatrees", description: "Restore ocean ecosystems with purpose and transparency", type: "website", siteName: "Seatrees", images: [
{
url: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg", alt: "Kelp forest restoration project"
url: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg", alt: "Ocean restoration"
}
]
},
twitter: {
card: "summary_large_image", title: "Blue Forest Project", description: "Restoring kelp forests, one student at a time", images: ["https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg"]
card: "summary_large_image", title: "Seatrees", description: "Restore the ocean, one action at a time", images: ["https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg"]
}
};
@@ -30,9 +30,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={lora.variable}
>
<body className={inter.variable}>
<Tag />
{children}
@@ -1406,4 +1404,4 @@ export default function RootLayout({
</ServiceWrapper>
</html>
);
}
}

150
src/app/page.tsx
View File

@@ -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>
);
}
}

121
src/app/shop/[id]/page.tsx
View File

@@ -6,7 +6,7 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, TrendingUp, Mail } from 'lucide-react';
import { TrendingUp, Mail, Heart } from 'lucide-react';
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useProductDetail } from "@/hooks/useProductDetail";
@@ -70,28 +70,27 @@ export default function ProductPage({ params }: ProductPageProps) {
if (isLoading) {
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"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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: "Cart", onClick: () => setCartOpen(true) }}
/>
@@ -101,12 +100,12 @@ export default function ProductPage({ params }: ProductPageProps) {
</main>
<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>
@@ -118,28 +117,27 @@ export default function ProductPage({ params }: ProductPageProps) {
if (!product) {
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"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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: "Cart", onClick: () => setCartOpen(true) }}
/>
@@ -157,12 +155,12 @@ export default function ProductPage({ params }: ProductPageProps) {
</main>
<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>
@@ -173,28 +171,27 @@ export default function ProductPage({ params }: ProductPageProps) {
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"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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: "Cart", onClick: () => setCartOpen(true) }}
/>
@@ -237,16 +234,16 @@ export default function ProductPage({ params }: ProductPageProps) {
</div>
<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>
</ReactLenis>
</ThemeProvider>
);
}
}

82
src/app/shop/page.tsx
View File

@@ -4,7 +4,7 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, TrendingUp, Mail } from 'lucide-react';
import { TrendingUp, Mail, Heart } from 'lucide-react';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -20,28 +20,27 @@ export default function ShopPage() {
if (isLoading) {
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"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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: "Cart", onClick: () => console.log("cart") }}
/>
@@ -51,12 +50,12 @@ export default function ShopPage() {
</main>
<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>
@@ -67,28 +66,27 @@ export default function ShopPage() {
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"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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: "Cart", onClick: () => console.log("cart") }}
/>
@@ -106,16 +104,16 @@ export default function ShopPage() {
</div>
<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>
</ReactLenis>
</ThemeProvider>
);
}
}

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-lora), sans-serif;
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-lora), sans-serif;
font-family: var(--font-inter), sans-serif;
}

20
src/app/styles/variables.css
View File

@@ -2,21 +2,21 @@
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
/* --background: #ffffff;;
--card: #f5f5f5;;
--foreground: #1c1c1c;;
--primary-cta: #0066cc;;
--primary-cta: #0a7039;;
--secondary-cta: #ffffff;;
--accent: #00aacc;;
--background-accent: #004d99;; */
--accent: #a8d9be;;
--background-accent: #e2f0e8;; */
--background: #f5f5f5;;
--card: #ffffff;;
--background: #ffffff;;
--card: #f5f5f5;;
--foreground: #1c1c1c;;
--primary-cta: #0066cc;;
--primary-cta: #0a7039;;
--secondary-cta: #ffffff;;
--accent: #00aacc;;
--background-accent: #004d99;;
--accent: #a8d9be;;
--background-accent: #e2f0e8;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

91
src/app/team/page.tsx
View File

@@ -3,99 +3,56 @@
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, TrendingUp, Mail } from 'lucide-react';
import { TrendingUp, Heart, Mail } from 'lucide-react';
export default function TeamPage() {
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"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Blue Forest"
brandName="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ 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="team" data-section="team">
<TeamCardEleven
groups={[
{
id: "founders", groupTitle: "Founders", members: [
{
id: "1", title: "Alex Chen", subtitle: "Co-Founder & Lab Director", detail: "alex@blueforestproject.org", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-scientist_23-2148116612.jpg"
},
{
id: "2", title: "Jordan Martinez", subtitle: "Co-Founder & Field Research Lead", detail: "jordan@blueforestproject.org", imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-scientist-laboratory_23-2148116563.jpg"
}
]
},
{
id: "research", groupTitle: "Research Team", members: [
{
id: "3", title: "Sam Thompson", subtitle: "Kelp Biology Specialist", detail: "sam@blueforestproject.org", imageSrc: "https://img.b2bpic.net/free-photo/portrait-scientist-working-laboratory_23-2148116518.jpg"
},
{
id: "4", title: "Casey Park", subtitle: "Data & Monitoring Engineer", detail: "casey@blueforestproject.org", imageSrc: "https://img.b2bpic.net/free-photo/portrait-concentrated-scientist-working-laboratory_23-2148116645.jpg"
},
{
id: "5", title: "Morgan Stone", subtitle: "Field Operations Coordinator", detail: "morgan@blueforestproject.org", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-scientist_23-2148116521.jpg"
}
]
},
{
id: "advisors", groupTitle: "Academic Advisors", members: [
{
id: "6", title: "Dr. Rebecca Walsh", subtitle: "Marine Biology, UC San Diego", detail: "r.walsh@ucsd.edu", imageSrc: "https://img.b2bpic.net/free-photo/portrait-professional-woman_23-2148116421.jpg"
},
{
id: "7", title: "Prof. David Kim", subtitle: "Environmental Science, SDSU", detail: "d.kim@sdsu.edu", imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-smiling_23-2148116589.jpg"
}
]
}
]}
animationType="slide-up"
title="Meet Our Team"
description="The dedicated students and advisors driving Blue Forest forward. Real people, real passion, real science."
textboxLayout="default"
useInvertedBackground={false}
/>
<div className="w-full py-20 text-center">
<p className="text-foreground text-2xl">Team page coming soon</p>
</div>
<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>
</ReactLenis>
</ThemeProvider>
);
}
}