19 Commits

Author SHA1 Message Date
389e02d460 Update theme colors 2026-02-19 18:17:04 +00:00
88e529687b Update theme colors 2026-02-19 18:16:38 +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
3cf46b034a Add src/app/team/page.tsx 2026-02-19 18:06:24 +00:00
0164bbbb3d Update src/app/shop/page.tsx 2026-02-19 18:06:23 +00:00
18bf61f58c Update src/app/shop/[id]/page.tsx 2026-02-19 18:06:23 +00:00
9e72ccaec1 Update src/app/page.tsx 2026-02-19 18:06:22 +00:00
b5aac009c9 Update src/app/blog/page.tsx 2026-02-19 18:06:21 +00:00
7c4ee22440 Add src/app/about/page.tsx 2026-02-19 18:06:20 +00:00
7e33de3b2d Merge version_1 into main
Merge version_1 into main
2026-02-19 18:00:54 +00:00
9 changed files with 392 additions and 227 deletions

109
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,109 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterCard from '@/components/sections/footer/FooterCard';
import { TrendingUp, Mail, ArrowRight, Heart } from 'lucide-react';
export default function AboutPage() {
return (
<ThemeProvider
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="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ name: "Mission", id: "about" },
{ name: "Impact", id: "metrics" },
{ name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]}
button={{
text: "Get Started", href: "#support"
}}
/>
</div>
<div id="about" data-section="about">
<MediaSplitTabsAbout
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: "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: "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. 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="Ocean restoration monitoring"
imagePosition="right"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="values" data-section="values">
<FeatureCardTwentySix
title="Our Core Values"
description="These principles guide every decision we make."
tag="What We Stand For"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
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: "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: "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: "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: "#"
}
]}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Seatrees"
copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[
{ 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>
);
}

View File

@@ -6,36 +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: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ button={{
text: "Donate", href: "#contact" text: "Get Started", href: "#support"
}} }}
/> />
</div> </div>
@@ -49,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,4 +1,4 @@
"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';
@@ -9,62 +9,63 @@ import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwent
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 { 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: "How It Works", id: "updates" },
{ 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"
@@ -74,8 +75,8 @@ export default function LandingPage() {
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardEleven <MetricCardEleven
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"
@@ -83,10 +84,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", 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" tagAnimation="slide-up"
@@ -96,21 +97,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}
@@ -119,26 +120,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: "#"
} }
]} ]}
@@ -149,32 +150,30 @@ export default function LandingPage() {
<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"
] ]
} }
]} ]}
@@ -185,13 +184,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}
@@ -200,12 +199,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,27 +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: "Shop", id: "/shop" } { name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -100,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>
@@ -117,27 +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: "Shop", id: "/shop" } { name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -155,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>
@@ -171,27 +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: "Shop", id: "/shop" } { name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
@@ -234,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,27 +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: "Shop", id: "/shop" } { name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => console.log("cart") }} button={{ text: "Cart", onClick: () => console.log("cart") }}
/> />
@@ -50,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>
@@ -66,27 +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: "Shop", id: "/shop" } { name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]} ]}
button={{ text: "Cart", onClick: () => console.log("cart") }} button={{ text: "Cart", onClick: () => console.log("cart") }}
/> />
@@ -104,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);

58
src/app/team/page.tsx Normal file
View File

@@ -0,0 +1,58 @@
"use client";
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 { TrendingUp, Heart, Mail } from 'lucide-react';
export default function TeamPage() {
return (
<ThemeProvider
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="Seatrees"
navItems={[
{ name: "Home", id: "/" },
{ name: "Mission", id: "about" },
{ name: "Impact", id: "metrics" },
{ name: "How It Works", id: "updates" },
{ name: "Plans", id: "support" }
]}
button={{
text: "Get Started", href: "#support"
}}
/>
</div>
<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="Seatrees"
copyrightText="© 2025 Seatrees | Restoring oceans, one action at a time"
socialLinks={[
{ 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>
);
}