27 Commits

Author SHA1 Message Date
8160098a77 Merge version_4 into main
Merge version_4 into main
2026-02-19 18:24:54 +00:00
447609ab01 Update src/app/page.tsx 2026-02-19 18:24:49 +00:00
cbbdfa248d Merge version_4 into main
Merge version_4 into main
2026-02-19 18:21:48 +00:00
457fdd795f Update src/app/team/page.tsx 2026-02-19 18:21:44 +00:00
13da3870f0 Update src/app/shop/page.tsx 2026-02-19 18:21:43 +00:00
2cc5adcb81 Update src/app/shop/[id]/page.tsx 2026-02-19 18:21:42 +00:00
37da8fa875 Update src/app/page.tsx 2026-02-19 18:21:42 +00:00
044647f58e Update src/app/layout.tsx 2026-02-19 18:21:41 +00:00
63b0568b4e Update src/app/blog/page.tsx 2026-02-19 18:21:39 +00:00
d7e2052091 Update src/app/about/page.tsx 2026-02-19 18:21:39 +00:00
bdceac8789 Merge version_4 into main
Merge version_4 into main
2026-02-19 18:18:36 +00:00
e1e17cde82 Update src/app/page.tsx 2026-02-19 18:18:31 +00:00
c69e0d77a6 Merge version_3 into main
Merge version_3 into main
2026-02-19 18:17:10 +00:00
389e02d460 Update theme colors 2026-02-19 18:17:04 +00:00
d5f1173228 Merge version_3 into main
Merge version_3 into main
2026-02-19 18:16:45 +00:00
88e529687b Update theme colors 2026-02-19 18:16:38 +00:00
f1f01f00ad Merge version_3 into main
Merge version_3 into main
2026-02-19 18:13:36 +00:00
77eb0ab7a2 Update src/app/team/page.tsx 2026-02-19 18:13:31 +00:00
e593ff567b Update src/app/styles/variables.css 2026-02-19 18:13:31 +00:00
f756ded01b Update src/app/styles/base.css 2026-02-19 18:13:30 +00:00
c240bf78ac Update src/app/shop/page.tsx 2026-02-19 18:13:29 +00:00
1cdd0bff4d Update src/app/shop/[id]/page.tsx 2026-02-19 18:13:29 +00:00
ea4236f2b8 Update src/app/page.tsx 2026-02-19 18:13:28 +00:00
8bdce3bb85 Update src/app/layout.tsx 2026-02-19 18:13:27 +00:00
5beec92abe Update src/app/blog/page.tsx 2026-02-19 18:13:26 +00:00
0c2f491b93 Update src/app/about/page.tsx 2026-02-19 18:13:25 +00:00
b705a7d80a Merge version_2 into main
Merge version_2 into main
2026-02-19 18:06:28 +00:00
9 changed files with 309 additions and 333 deletions

View File

@@ -6,57 +6,56 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout'; import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix'; import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterCard from '@/components/sections/footer/FooterCard'; 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() { export default function AboutPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ button={{
text: "Donate", href: "#contact" text: "Get Started", href: "#support"
}} }}
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaSplitTabsAbout <MediaSplitTabsAbout
title="About Blue Forest Project" title="Our Mission: Restore the Ocean"
description="A student-led initiative combining rigorous marine science with transparent documentation and real ocean impact." 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={[ 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" 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" imagePosition="right"
mediaAnimation="slide-up" mediaAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
@@ -65,26 +64,26 @@ export default function AboutPage() {
<div id="values" data-section="values"> <div id="values" data-section="values">
<FeatureCardTwentySix <FeatureCardTwentySix
title="How We Work" title="Our Core Values"
description="Our approach is built on these core principles that guide every decision we make." description="These principles guide every decision we make."
tag="Our Values" tag="What We Stand For"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
features={[ 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: "#" 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: "#" 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: "#" 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: "#" buttonHref: "#"
} }
]} ]}
@@ -95,12 +94,12 @@ export default function AboutPage() {
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>

View File

@@ -6,38 +6,37 @@ import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { useBlogPosts } from "@/hooks/useBlogPosts"; import { useBlogPosts } from "@/hooks/useBlogPosts";
import { Instagram, TrendingUp, Mail } from 'lucide-react'; import { TrendingUp, Mail, Heart } from 'lucide-react';
export default function BlogPage() { export default function BlogPage() {
const { posts, isLoading } = useBlogPosts(); const { posts, isLoading } = useBlogPosts();
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ button={{
text: "Donate", href: "#contact" text: "Get Started", href: "#support"
}} }}
/> />
</div> </div>
@@ -51,32 +50,32 @@ export default function BlogPage() {
<BlogCardTwo <BlogCardTwo
blogs={posts} blogs={posts}
title="Ocean Stories" 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" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
carouselMode="buttons" carouselMode="buttons"
tag="Blue Forest Blog" tag="Seatrees Blog"
/> />
</div> </div>
)} )}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ socialLinks={[
{ {
icon: Instagram, icon: TrendingUp,
href: "https://www.instagram.com/blueforestproject", ariaLabel: "Blue Forest on Instagram" href: "https://www.instagram.com/seatrees", ariaLabel: "Seatrees on Instagram"
}, },
{ {
icon: TrendingUp, icon: Heart,
href: "https://www.tiktok.com/@blueforestproject", ariaLabel: "Blue Forest on TikTok" href: "https://www.twitter.com/seatrees", ariaLabel: "Seatrees on Twitter"
}, },
{ {
icon: Mail, icon: Mail,
href: "mailto:hello@blueforestproject.org", ariaLabel: "Email Blue Forest Project" href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees"
} }
]} ]}
/> />

View File

@@ -1,24 +1,24 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Lora } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const lora = Lora({ const inter = Inter({
variable: "--font-lora", subsets: ["latin"], variable: "--font-inter", subsets: ["latin"],
}); });
export const metadata: Metadata = { 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: { 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: { 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 ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body className={inter.variable}>
className={lora.variable}
>
<Tag /> <Tag />
{children} {children}

View File

@@ -1,73 +1,72 @@
"use client" "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel'; import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven'; import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout'; import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix'; import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo'; import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA'; import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard'; import FooterCard from '@/components/sections/footer/FooterCard';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven'; import FaqDouble from '@/components/sections/faq/FaqDouble';
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() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ button={{
text: "Donate", href: "#contact" text: "Get Started", href: "#support"
}} }}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardCarousel <HeroBillboardCarousel
title="Blue Forest Project" title="Restore the Ocean, One Action at a Time"
description="Student-led kelp restoration starting in San Diego. We're growing ocean ecosystems, one forest at a time." description="Join millions making a real impact. Plant trees, restore habitats, and rebuild marine ecosystems with Seatrees."
tag="Kelp Restoration" tag="Ocean Restoration"
tagIcon={Leaf} tagIcon={Leaf}
buttons={[ buttons={[
{ text: "Donate Now", href: "#support" }, { text: "Start Restoring", href: "#support" },
{ text: "Follow the Journey", href: "#updates" } { text: "Learn More", href: "#about" }
]} ]}
background={{ variant: "sparkles-gradient" }} background={{ variant: "plain" }}
mediaItems={[ 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" tagAnimation="slide-up"
@@ -76,9 +75,9 @@ export default function LandingPage() {
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardEleven <MetricCardSeven
title="Live Impact" title="Real Impact, Measured Daily"
description="Real-time progress toward our kelp restoration goals. Every dollar fuels research and growth." description="Every action counts. See the real-time progress of our global ocean restoration movement."
tag="Our Progress" tag="Our Progress"
tagIcon={TrendingUp} tagIcon={TrendingUp}
textboxLayout="default" textboxLayout="default"
@@ -86,10 +85,10 @@ export default function LandingPage() {
animationType="slide-up" animationType="slide-up"
metrics={[ 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", items: ["Seagrass, mangroves, and kelp forests restored worldwide"]
}, },
{ {
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", items: ["People around the world restoring ocean ecosystems"]
} }
]} ]}
tagAnimation="slide-up" tagAnimation="slide-up"
@@ -99,21 +98,21 @@ export default function LandingPage() {
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaSplitTabsAbout <MediaSplitTabsAbout
title="About Blue Forest" title="How We're Restoring the Ocean"
description="We're just getting started—and that's the point. Real science, real students, real impact." description="Science-backed restoration that actually works. Every action is transparent, measured, and accountable."
tabs={[ 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" 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" imagePosition="right"
mediaAnimation="slide-up" mediaAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
@@ -122,26 +121,26 @@ export default function LandingPage() {
<div id="updates" data-section="updates"> <div id="updates" data-section="updates">
<FeatureCardTwentySix <FeatureCardTwentySix
title="Follow the Journey" title="How It Works"
description="Real updates from the lab and the field. Unfiltered progress, honest setbacks, genuine wins." description="Four simple steps to make a real difference in ocean restoration."
tag="Built in Public" tag="The Process"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
features={[ 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: "#" 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, 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: "#"
},
{
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,
buttonHref: "#" buttonHref: "#"
} }
]} ]}
@@ -150,34 +149,63 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common questions about ocean restoration with Seatrees."
tag="Help & Support"
faqs={[
{
id: "1", title: "How does my contribution actually restore the ocean?", content: "Every dollar you contribute funds on-the-ground restoration projects. We plant seagrass, restore mangrove forests, and rebuild coral reefs. Each project is monitored with satellite imagery and field verification. You receive monthly updates showing exactly what your contribution created."
},
{
id: "2", title: "Is this really carbon neutral?", content: "We track the carbon impact of every restoration project. Seagrass meadows, mangrove forests, and coral reefs are natural carbon sinks. Our projects sequester carbon while restoring marine habitats. We publish transparent reports on all carbon measurements."
},
{
id: "3", title: "Can I see where my money goes?", content: "Yes. Every project is tracked in our dashboard. You can see exactly which restoration project received your contribution, monitor its progress with satellite imagery, and track the impact over time. No greenwashing. Complete transparency."
},
{
id: "4", title: "What happens if a restoration project fails?", content: "We work with local communities and marine biologists to minimize failure risk. If a project doesn't meet success metrics, we redirect resources to improve outcomes. We measure success using peer-reviewed scientific methods and share all data publicly."
},
{
id: "5", title: "How long does restoration take?", content: "Timeline varies by project. Seagrass restoration takes 2-3 years to mature. Mangrove forests take 3-5 years. Coral reefs take longer but show growth within the first year. You receive updates throughout the process so you can watch your impact grow."
},
{
id: "6", title: "Can I cancel my subscription anytime?", content: "Yes. Monthly plans can be canceled anytime with no penalty. Annual plans can also be canceled, with a prorated refund. We believe in flexibility so you can support ocean restoration at your own pace."
}
]}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
/>
</div>
<div id="support" data-section="support"> <div id="support" data-section="support">
<PricingCardTwo <PricingCardTwo
title="Support Our Mission" title="Choose Your Plan"
description="Choose how you want to help. Every contribution funds equipment, research, and real ocean impact." description="Flexible options to fit your budget. Every dollar goes directly to ocean restoration."
tag="Funding" tag="Pricing"
tagIcon={Heart} tagIcon={Heart}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
plans={[ plans={[
{ {
id: "gofundme", badge: "Primary Fundraiser", badgeIcon: Target, id: "monthly", badge: "Most Popular", badgeIcon: Target,
price: "Any Amount", subtitle: "Support the full project on GoFundMe", buttons: [ price: "$9", subtitle: "/month", buttons: [
{ text: "Donate on GoFundMe", href: "https://www.gofundme.com" }, { text: "Subscribe Now", href: "#" }
{ text: "View Campaign", href: "#" }
], ],
features: [ 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, id: "annual", badge: "Best Value", badgeIcon: Zap,
price: "$5 - $500", subtitle: "Instant support via Venmo direct payments", buttons: [ price: "$99", subtitle: "/year", buttons: [
{ text: "Donate via Venmo", href: "https://www.venmo.com" }, { text: "Subscribe Now", href: "#" }
{ text: "Learn About Venmo", href: "#" }
], ],
features: [ 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 +216,13 @@ export default function LandingPage() {
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCTA <ContactCTA
tag="Get in Touch" tag="Get Started Today"
tagIcon={Mail} tagIcon={Mail}
title="Connect With Us" title="Ready to Restore?"
description="Have questions? Want to collaborate? Ready to support? Reach out directly. We read every message and respond personally." description="Join thousands of people making real impact. Start your ocean restoration journey with just one click."
buttons={[ buttons={[
{ text: "Email Us", href: "mailto:hello@blueforestproject.org" }, { text: "Subscribe Now", href: "#support" },
{ text: "Follow on Social", href: "#social" } { text: "Learn More", href: "#about" }
]} ]}
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
@@ -203,12 +231,12 @@ export default function LandingPage() {
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>

View File

@@ -6,7 +6,7 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard'; 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 ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
import ProductCart from "@/components/ecommerce/cart/ProductCart"; import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useProductDetail } from "@/hooks/useProductDetail"; import { useProductDetail } from "@/hooks/useProductDetail";
@@ -70,28 +70,27 @@ export default function ProductPage({ params }: ProductPageProps) {
if (isLoading) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -101,12 +100,12 @@ export default function ProductPage({ params }: ProductPageProps) {
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>
@@ -118,28 +117,27 @@ export default function ProductPage({ params }: ProductPageProps) {
if (!product) { if (!product) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -157,12 +155,12 @@ export default function ProductPage({ params }: ProductPageProps) {
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>
@@ -173,28 +171,27 @@ export default function ProductPage({ params }: ProductPageProps) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -237,12 +234,12 @@ export default function ProductPage({ params }: ProductPageProps) {
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>

View File

@@ -4,7 +4,7 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard'; 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 ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog"; import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -20,28 +20,27 @@ export default function ShopPage() {
if (isLoading) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => console.log("cart") }} button={{ text: "Cart", onClick: () => console.log("cart") }}
/> />
@@ -51,12 +50,12 @@ export default function ShopPage() {
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>
@@ -67,28 +66,27 @@ export default function ShopPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => console.log("cart") }} button={{ text: "Cart", onClick: () => console.log("cart") }}
/> />
@@ -106,12 +104,12 @@ export default function ShopPage() {
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>

View File

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

View File

@@ -2,21 +2,21 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f5f5f5;; /* --background: #f5faff;;;;
--card: #ffffff;; --card: #f1f8ff;;;;
--foreground: #1c1c1c;; --foreground: #001122;;;;
--primary-cta: #0066cc;; --primary-cta: #15479c;;;;
--secondary-cta: #ffffff;; --secondary-cta: #ffffff;;;;
--accent: #00aacc;; --accent: #a8cce8;;;;
--background-accent: #004d99;; */ --background-accent: #7ba3cf;;;; */
--background: #f5f5f5;; --background: #f5faff;;;;
--card: #ffffff;; --card: #f1f8ff;;;;
--foreground: #1c1c1c;; --foreground: #001122;;;;
--primary-cta: #0066cc;; --primary-cta: #15479c;;;;
--secondary-cta: #ffffff;; --secondary-cta: #ffffff;;;;
--accent: #00aacc;; --accent: #a8cce8;;;;
--background-accent: #004d99;; --background-accent: #7ba3cf;;;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

View File

@@ -3,95 +3,52 @@
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import FooterCard from '@/components/sections/footer/FooterCard'; 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() { export default function TeamPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="subtle-shadow" cardStyle="solid"
primaryButtonStyle="primary-glow" primaryButtonStyle="flat"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="Blue Forest" brandName="Seatrees"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "Journey", id: "updates" }, { name: "Mission", id: "about" },
{ name: "Support", id: "support" },
{ name: "Impact", id: "metrics" }, { name: "Impact", id: "metrics" },
{ name: "Team", id: "/team" }, { name: "How It Works", id: "updates" },
{ name: "About", id: "/about" } { name: "Plans", id: "support" }
]} ]}
button={{ button={{
text: "Donate", href: "#contact" text: "Get Started", href: "#support"
}} }}
/> />
</div> </div>
<div id="team" data-section="team"> <div className="w-full py-20 text-center">
<TeamCardEleven <p className="text-foreground text-2xl">Team page coming soon</p>
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> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="Blue Forest" logoText="Seatrees"
copyrightText="© 2025 Blue Forest Project | Student-led kelp restoration from San Diego" copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[ 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" } { icon: Mail, href: "mailto:hello@seatrees.com", ariaLabel: "Email Seatrees" }
]} ]}
/> />
</div> </div>