407 lines
17 KiB
TypeScript
407 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
|
|
import ProductCardSix from '@/components/sections/product/ProductCardSix';
|
|
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
|
|
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
|
|
import { Leaf, Sparkles, Award, Linkedin, Twitter, Github, Mail } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="neon-glow-border"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="EcoHub"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Get Started",
|
|
href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Transform Your Impact with Sustainable Solutions"
|
|
description="EcoHub helps organizations track, measure, and amplify their environmental impact with intelligent analytics and real-time insights."
|
|
tag="Eco-Friendly Analytics"
|
|
tagIcon={Leaf}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697692413-ceqqaha8.jpg"
|
|
imageAlt="EcoHub analytics dashboard interface"
|
|
frameStyle="browser"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "contact" },
|
|
{ text: "Watch Demo", href: "features" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Driving Sustainable Change"
|
|
description={[
|
|
"EcoHub was founded on a simple belief: every organization has the power to measure and improve their environmental footprint. We provide the technology and insights needed to make data-driven sustainability decisions.",
|
|
"Our platform integrates seamlessly with your existing systems, transforming complex environmental data into actionable intelligence. From carbon accounting to water usage optimization, we help you understand your impact and plan for a more sustainable future."
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
showBorder={false}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardFourteen
|
|
title="Powerful Features for Sustainable Impact"
|
|
description="Discover the tools that make environmental tracking effortless"
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
id: "1",
|
|
title: "Real-Time Sustainability Tracking",
|
|
description: "Monitor your environmental metrics across all operations in real-time with live dashboards and instant alerts.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704069729-ot0hboat.jpg",
|
|
imageAlt: "Sustainability tracking interface"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Impact Measurement & Reporting",
|
|
description: "Generate comprehensive reports with verified emissions data, sustainability KPIs, and compliance documentation.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704070987-st10xdul.jpg",
|
|
imageAlt: "Impact measurement dashboard"
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Community Collaboration Tools",
|
|
description: "Work together with teams and stakeholders to set targets, share insights, and celebrate sustainability milestones.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704072235-eeuynwww.jpg",
|
|
imageAlt: "Collaboration and teamwork interface"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore All Features", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardSix
|
|
title="Our Product Suite"
|
|
description="Comprehensive tools designed for environmental intelligence"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
gridVariant="bento-grid"
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Analytics Engine",
|
|
price: "$299/mo",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704073615-140eun3n.jpg",
|
|
imageAlt: "Analytics platform interface"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Impact Tracker",
|
|
price: "$199/mo",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704075057-ywovh1h1.jpg",
|
|
imageAlt: "Real-time impact tracking"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Integration Hub",
|
|
price: "$149/mo",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704076251-88p8egr2.jpg",
|
|
imageAlt: "API integration platform"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Workflow Automation",
|
|
price: "$249/mo",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704077520-lxs0oqf5.jpg",
|
|
imageAlt: "Automation workflow builder"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEight
|
|
title="Trusted by organizations making a difference in sustainability across the globe"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704078776-mi8fiiq0.jpg"
|
|
imageAlt="Team of sustainability professionals"
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "5,000+",
|
|
title: "Active Organizations"
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "2.5B",
|
|
title: "Tons CO2 Tracked"
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "95%",
|
|
title: "Customer Satisfaction"
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "180+",
|
|
title: "Countries Covered"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Trusted by Sustainability Leaders"
|
|
description="See how organizations are using EcoHub to drive meaningful environmental change"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
tag="Success Stories"
|
|
tagIcon={Award}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Reduced carbon footprint by 40%",
|
|
quote: "EcoHub gave us the visibility and tools to identify where we could make the biggest impact. In just one year, we've cut our emissions significantly while improving operational efficiency.",
|
|
name: "Sarah Chen",
|
|
role: "Sustainability Director",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704080066-iqpamno3.jpg",
|
|
imageAlt: "Sarah Chen headshot"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Streamlined sustainability reporting",
|
|
quote: "What used to take our team weeks now takes days. The automated reporting features have transformed how we manage ESG compliance and stakeholder communication.",
|
|
name: "Michael Rodriguez",
|
|
role: "ESG Manager",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704080689-xarotb6n.jpg",
|
|
imageAlt: "Michael Rodriguez headshot"
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Engaged employees in sustainability",
|
|
quote: "The collaboration tools helped us build a culture of environmental responsibility. Our team is more engaged and motivated than ever before.",
|
|
name: "Emily Thompson",
|
|
role: "HR Executive",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704081335-762lwio5.jpg",
|
|
imageAlt: "Emily Thompson headshot"
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Data-driven decision making",
|
|
quote: "The real-time insights have revolutionized how we approach sustainability strategy. We can now measure impact and iterate quickly.",
|
|
name: "David Kim",
|
|
role: "Operations Chief",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704082083-u1q2lgj9.jpg",
|
|
imageAlt: "David Kim headshot"
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Achieved net-zero certification",
|
|
quote: "With EcoHub's comprehensive tracking and verified reporting, we successfully achieved our net-zero goals two years ahead of schedule.",
|
|
name: "Lisa Anderson",
|
|
role: "Chief Sustainability Officer",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704082969-vkb5zd7l.jpg",
|
|
imageAlt: "Lisa Anderson headshot"
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Transformed team collaboration",
|
|
quote: "Our sustainability initiatives are now more coordinated across departments. EcoHub made it easy for everyone to contribute and see the impact.",
|
|
name: "Jennifer Walsh",
|
|
role: "Sustainability Lead",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704083903-62zfpwje.jpg",
|
|
imageAlt: "Jennifer Walsh headshot"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about EcoHub's sustainability platform"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How does EcoHub measure carbon emissions?",
|
|
content: "EcoHub uses industry-standard methodologies (GHG Protocol, ISO 14064) combined with your operational data to calculate accurate emissions. Our algorithms account for Scope 1, 2, and 3 emissions across your entire organization."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Can EcoHub integrate with our existing systems?",
|
|
content: "Yes! EcoHub connects with over 500+ business applications including ERP, CRM, and accounting software. We provide APIs, pre-built connectors, and white-glove integration support."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What kind of reporting does EcoHub provide?",
|
|
content: "We offer customizable reports for ESG disclosure (GRI, SASB, TCFD), sustainability audits, carbon accounting, and executive dashboards. All reports are verified and audit-ready."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "How secure is my sustainability data?",
|
|
content: "EcoHub uses enterprise-grade security (ISO 27001, SOC 2 Type II) with end-to-end encryption, multi-factor authentication, and regular third-party audits to protect your data."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Can we track sustainability across multiple locations?",
|
|
content: "Absolutely. EcoHub supports unlimited locations and subsidiaries with centralized dashboards for cross-site analysis, benchmarking, and consolidated reporting."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "What support options are available?",
|
|
content: "We offer 24/7 customer support, dedicated account managers for enterprise customers, video tutorials, knowledge base, and quarterly business reviews to ensure your success."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenterForm
|
|
title="Get Started with EcoHub Today"
|
|
description="Schedule a demo or talk to our sustainability experts about how EcoHub can transform your environmental impact strategy."
|
|
useInvertedBackground="noInvert"
|
|
buttonText="Send Inquiry"
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Full Name",
|
|
required: true
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Business Email",
|
|
required: true
|
|
},
|
|
{
|
|
name: "company",
|
|
type: "text",
|
|
placeholder: "Company Name",
|
|
required: true
|
|
},
|
|
{
|
|
name: "industry",
|
|
type: "text",
|
|
placeholder: "Industry",
|
|
required: false
|
|
}
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Tell us about your sustainability goals and how we can help...",
|
|
rows: 5,
|
|
required: true
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseSocial
|
|
logoText="EcoHub"
|
|
description="Making sustainability measurable and actionable for every organization."
|
|
copyrightText="© 2025 EcoHub. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", href: "features" },
|
|
{ label: "Pricing", href: "pricing" },
|
|
{ label: "Integration Hub", href: "#" },
|
|
{ label: "API Documentation", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press Kit", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Status Page", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Compliance", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com",
|
|
ariaLabel: "LinkedIn"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com",
|
|
ariaLabel: "Twitter"
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com",
|
|
ariaLabel: "GitHub"
|
|
},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@ecohub.io",
|
|
ariaLabel: "Email"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|