Update src/app/page.tsx
This commit is contained in:
612
src/app/page.tsx
612
src/app/page.tsx
@@ -1,252 +1,372 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { TrendingUp, Users, Euro, Star, CheckCircle, Rocket } from 'lucide-react';
|
||||
import { useState, useEffect } from "react";
|
||||
import { ArrowRight, Star, Play, CheckCircle, Sparkles, Globe, Zap, Shield } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const TestimonialCardSix = ({ title, description, tag, textboxLayout, animationType, useInvertedBackground, members }: {
|
||||
title: string;
|
||||
description: string;
|
||||
tag: string;
|
||||
textboxLayout: string;
|
||||
animationType: string;
|
||||
useInvertedBackground: string;
|
||||
members: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}>;
|
||||
}) => {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Stories", id: "stories" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Pitchdrive"
|
||||
/>
|
||||
<div className="bg-white p-8 rounded-2xl shadow-lg">
|
||||
<div className="mb-6">
|
||||
<span className="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4">
|
||||
{tag}
|
||||
</span>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">{title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{description}</p>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
title="We empower founders to build next level startups"
|
||||
description="Early-stage VC run by experienced entrepreneurs. Backing founders during their crazy startup ride. Buckle up."
|
||||
tag="Early-stage VC 🚀"
|
||||
tagIcon={Rocket}
|
||||
buttons={[
|
||||
{ text: "Pitch to Us", href: "contact" },
|
||||
{ text: "View Portfolio", href: "portfolio" }
|
||||
]}
|
||||
imageSrc="https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63ea3f2bf21752118d5cb50c_pitchdrive-vc.jpg"
|
||||
imageAlt="Pitchdrive VC team"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<img
|
||||
src={member.imageSrc}
|
||||
alt={member.imageAlt}
|
||||
className="w-12 h-12 rounded-full object-cover"
|
||||
/>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">{member.name}</h4>
|
||||
<p className="text-sm text-gray-500">{member.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Investing in the potential of tomorrow"
|
||||
description="Track record of supporting ambitious founders across Europe"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="invertDefault"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Euro,
|
||||
title: "Fund Size", value: "€50M"
|
||||
},
|
||||
{
|
||||
id: "2", icon: TrendingUp,
|
||||
title: "Startups", value: "60+"
|
||||
},
|
||||
{
|
||||
id: "3", icon: Users,
|
||||
title: "Tickets", value: "€250K-€2M"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stories" data-section="stories">
|
||||
<BlogCardOne
|
||||
title="Latest Success Stories"
|
||||
description="Read about our portfolio companies and their journey"
|
||||
tag="Portfolio Updates"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Series A", title: "OTIV Accelerates with €9M in New Fuel", excerpt: "Early conviction pays off as OTIV secures major growth funding", imageSrc: "https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/69118c343e55c10529840a9b_20250916-DSC05948-2.webp", imageAlt: "OTIV team", authorName: "Pitchdrive Team", authorAvatar: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e38b64b40e370058bd15a1_pitchdrive-logo.svg", date: "Jan 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Series A", title: "Introw Raises $3M to Redefine Partner Sales with AI", excerpt: "Revolutionary AI-powered partner sales platform scales rapidly", imageSrc: "https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/69397367c169d84eb0cccc2c__2329844.jpg", imageAlt: "Introw team", authorName: "Pitchdrive Team", authorAvatar: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e38b64b40e370058bd15a1_pitchdrive-logo.svg", date: "Dec 2024"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Series A", title: "Donna Raises $4.8M to Supercharge Field Sales with AI", excerpt: "AI-powered field sales platform revolutionizes customer engagement", imageSrc: "https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/69282ce47f48f7c5eff9fc49_20250925-_DONNA-founders_2.webp", imageAlt: "Donna founders", authorName: "Pitchdrive Team", authorAvatar: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e38b64b40e370058bd15a1_pitchdrive-logo.svg", date: "Nov 2024"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="approach" data-section="approach">
|
||||
<FeatureCardOne
|
||||
title="Our Investment Approach"
|
||||
description="How we support ambitious founders throughout their journey"
|
||||
tag="Our Process"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground="invertDefault"
|
||||
features={[
|
||||
{
|
||||
title: "€50M Fund", description: "Deploying our third entrepreneur-led fund with tickets between €250K and €2M", imageSrc: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e4e5972348310fb2ec088a_icon-feature-1.svg", imageAlt: "Fund icon", button: { text: "Learn More", href: "about" }
|
||||
},
|
||||
{
|
||||
title: "24/7 Support", description: "Support from experienced entrepreneurs who already did the startup ride", imageSrc: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e4e597fbcc313fd91a3001_icon-feature-2.svg", imageAlt: "Support icon", button: { text: "Meet Team", href: "team" }
|
||||
},
|
||||
{
|
||||
title: "B2B Focus", description: "Focus on ambitious founders in B2B tech, e-commerce and software-driven hardware", imageSrc: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e4e59748194dd8649aff65_icon-feature-3.svg", imageAlt: "B2B focus icon", button: { text: "View Portfolio", href: "portfolio" }
|
||||
},
|
||||
{
|
||||
title: "Elite Network", description: "Surrounded by an elite mentor network of successful entrepreneurs and industry experts", imageSrc: "https://cdn.prod.website-files.com/63d7a1f905e6a1dc5864c2b0/63e4e5978c122b264244a3b4_icon-feature-4.svg", imageAlt: "Network icon", button: { text: "Join Network", href: "contact" }
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="By and for entrepreneurs, taken to a next level"
|
||||
description="We back founders with the right execution mindset who turn good ideas into great companies. Read about our story."
|
||||
tag="Our Story"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Angel to Seed", description: "Supporting startups from angel to seed rounds with meaningful ticket sizes", icon: TrendingUp
|
||||
},
|
||||
{
|
||||
title: "Experienced Team", description: "Led by entrepreneurs who have built and scaled successful companies", icon: Users
|
||||
},
|
||||
{
|
||||
title: "European Focus", description: "Based across Antwerp, Ghent, Amsterdam, Berlin, Barcelona and London", icon: Star
|
||||
}
|
||||
]}
|
||||
imageSrc="https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/68de811f4b2dba1ebb1023ac_25-09-10%20Pitchdrive-94%20copy.jpeg"
|
||||
imageAlt="Pitchdrive team meeting"
|
||||
buttons={[
|
||||
{ text: "Read Our Story", href: "about" },
|
||||
{ text: "Pitch to Us", href: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="What Founders Say About Us"
|
||||
description="Hear from the entrepreneurs we've backed on their journey"
|
||||
tag="Testimonials"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground="invertDefault"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Casimir Morobé-Toqua", role: "Founder", imageSrc: "https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/6464d87c016004cf8fb73d8a_casimir.png", imageAlt: "Casimir Morobé-Toqua"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Roy Jeunen", role: "Founder, NineID", imageSrc: "https://cdn.prod.website-files.com/63d90fe29e8bf43980780590/6464d8868bb5fa81edf8b108_roy.png", imageAlt: "Roy Jeunen"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
title="Meet Our Team"
|
||||
description="The experienced entrepreneurs backing the next generation of founders"
|
||||
tag="Team"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground="noInvert"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Boris Bogaert", role: "Co-founder & Managing Partner", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Boris Bogaert"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Koen Christiaens", role: "Co-founder & Managing Partner", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Koen Christiaens"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Wim Derkinderen", role: "Co-founder & Managing Partner", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Wim Derkinderen"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Emily Kegels", role: "Investment Manager", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Emily Kegels"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Ready to Pitch?"
|
||||
title="Send us your pitch deck"
|
||||
description="We are looking for the most talented and ambitious entrepreneurs with a passion for innovation. Whether you are working on a revolutionary new technology, a disruptive business model, or a socially impactful project... Let's get in touch."
|
||||
useInvertedBackground="invertDefault"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Pitch to Us"
|
||||
termsText="By submitting, you agree to our terms and privacy policy. We're always looking for European-focused, pre-seed and seed stage startups."
|
||||
onSubmit={(email) => console.log('Pitch submitted:', email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Pitchdrive"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Our Story", href: "about" },
|
||||
{ label: "How We Work", href: "about" },
|
||||
{ label: "Team", href: "team" },
|
||||
{ label: "Portfolio", href: "portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Stories", href: "stories" },
|
||||
{ label: "Academy", href: "academy" },
|
||||
{ label: "Glossary", href: "glossary" },
|
||||
{ label: "Insights", href: "insights" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Locations", items: [
|
||||
{ label: "Antwerp (HQ)", href: "contact" },
|
||||
{ label: "Ghent", href: "contact" },
|
||||
{ label: "Amsterdam", href: "contact" },
|
||||
{ label: "Berlin", href: "contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2026 Pitchdrive. All rights reserved."
|
||||
onPrivacyClick={() => console.log('Privacy policy clicked')}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const FeatureCard = ({ icon: Icon, title, description }: {
|
||||
icon: any;
|
||||
title: string;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<Icon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const StatCard = ({ number, label }: {
|
||||
number: string;
|
||||
label: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">{number}</div>
|
||||
<div className="text-gray-600">{label}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PricingCard = ({ plan, price, period, features, popular }: {
|
||||
plan: string;
|
||||
price: string;
|
||||
period: string;
|
||||
features: string[];
|
||||
popular?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className={`bg-white p-8 rounded-2xl border-2 ${popular ? 'border-blue-500' : 'border-gray-200'} relative`}>
|
||||
{popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<span className="bg-blue-500 text-white text-sm font-semibold px-4 py-1 rounded-full">
|
||||
Most Popular
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">{plan}</h3>
|
||||
<div className="mb-4">
|
||||
<span className="text-4xl font-bold text-gray-900">${price}</span>
|
||||
<span className="text-gray-500">/{period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index} className="flex items-center space-x-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
|
||||
<span className="text-gray-600">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className={`w-full py-3 px-6 rounded-lg font-semibold transition-colors duration-200 ${
|
||||
popular
|
||||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
: 'bg-gray-100 text-gray-900 hover:bg-gray-200'
|
||||
}`}>
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const [isVideoPlaying, setIsVideoPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Add any initialization logic here
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
|
||||
{/* Hero Section */}
|
||||
<section className="px-4 py-20 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
Build Amazing
|
||||
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
Digital Experiences
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
Transform your ideas into stunning web applications with our cutting-edge development platform.
|
||||
Fast, reliable, and built for the modern web.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200 flex items-center space-x-2">
|
||||
<span>Get Started Free</span>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
className="border border-gray-300 text-gray-700 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-200 flex items-center space-x-2"
|
||||
onClick={() => setIsVideoPlaying(!isVideoPlaying)}
|
||||
>
|
||||
<Play className="w-5 h-5" />
|
||||
<span>Watch Demo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Image/Video */}
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="bg-white p-4 rounded-2xl shadow-2xl">
|
||||
{isVideoPlaying ? (
|
||||
<div className="aspect-video bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
<Play className="w-16 h-16 text-white opacity-80" />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src="/images/hero-dashboard.png"
|
||||
alt="Dashboard Preview"
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* Floating elements */}
|
||||
<div className="absolute -top-4 -left-4 bg-blue-500 text-white p-3 rounded-full shadow-lg">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="absolute -bottom-4 -right-4 bg-purple-500 text-white p-3 rounded-full shadow-lg">
|
||||
<Zap className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="bg-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<StatCard number="100K+" label="Active Users" />
|
||||
<StatCard number="99.9%" label="Uptime" />
|
||||
<StatCard number="50+" label="Countries" />
|
||||
<StatCard number="24/7" label="Support" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20 px-4 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Everything you need to succeed
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Powerful features designed to streamline your workflow and boost productivity
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon={Globe}
|
||||
title="Global CDN"
|
||||
description="Lightning-fast content delivery across the globe with 99.9% uptime guarantee"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={Shield}
|
||||
title="Enterprise Security"
|
||||
description="Bank-level security with end-to-end encryption and compliance certifications"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={Zap}
|
||||
title="Real-time Analytics"
|
||||
description="Get instant insights with comprehensive analytics and performance monitoring"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={Sparkles}
|
||||
title="AI-Powered Tools"
|
||||
description="Leverage artificial intelligence to automate tasks and optimize performance"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={CheckCircle}
|
||||
title="Easy Integration"
|
||||
description="Seamlessly integrate with your existing tools and workflows in minutes"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={Star}
|
||||
title="24/7 Support"
|
||||
description="Get help whenever you need it with our dedicated support team"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Trusted by industry leaders
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
See what our customers have to say about their experience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<TestimonialCardSix
|
||||
title="Amazing Results"
|
||||
description="Our team has achieved incredible results using this platform. The tools are intuitive and the support is exceptional."
|
||||
tag="Customer Success"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="invertDefault"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", role: "CTO, TechCorp", imageSrc: "/images/avatar1.jpg", imageAlt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen", role: "Lead Developer, StartupXYZ", imageSrc: "/images/avatar2.jpg", imageAlt: "Michael Chen"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emily Rodriguez", role: "Product Manager, InnovateLab", imageSrc: "/images/avatar3.jpg", imageAlt: "Emily Rodriguez"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section className="py-20 px-4 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Simple, transparent pricing
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
Choose the plan that works best for your team
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<PricingCard
|
||||
plan="Starter"
|
||||
price="29"
|
||||
period="month"
|
||||
features={[
|
||||
"Up to 5 team members", "10GB storage", "Basic analytics", "Email support"
|
||||
]}
|
||||
/>
|
||||
<PricingCard
|
||||
plan="Professional"
|
||||
price="99"
|
||||
period="month"
|
||||
popular={true}
|
||||
features={[
|
||||
"Up to 25 team members", "100GB storage", "Advanced analytics", "Priority support", "Custom integrations"
|
||||
]}
|
||||
/>
|
||||
<PricingCard
|
||||
plan="Enterprise"
|
||||
price="299"
|
||||
period="month"
|
||||
features={[
|
||||
"Unlimited team members", "1TB storage", "Real-time analytics", "24/7 dedicated support", "Custom solutions", "SLA guarantee"
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-gradient-to-r from-blue-600 to-purple-600 py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-xl text-blue-100 mb-8">
|
||||
Join thousands of teams already building amazing things
|
||||
</p>
|
||||
<button className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-200 inline-flex items-center space-x-2">
|
||||
<span>Start Your Free Trial</span>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">Company</h3>
|
||||
<div className="space-y-2">
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">About</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">Product</h3>
|
||||
<div className="space-y-2">
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Features</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Pricing</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Updates</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">Resources</h3>
|
||||
<div className="space-y-2">
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Documentation</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Help Center</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Community</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">Legal</h3>
|
||||
<div className="space-y-2">
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Terms</a></div>
|
||||
<div><a href="#" className="text-gray-400 hover:text-white transition-colors">Security</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-800 pt-8 mt-8 text-center text-gray-400">
|
||||
<p>© 2024 Your Company. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user