372 lines
15 KiB
TypeScript
372 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { ArrowRight, Star, Play, CheckCircle, Sparkles, Globe, Zap, Shield } from "lucide-react";
|
|
|
|
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 (
|
|
<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 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>
|
|
);
|
|
};
|
|
|
|
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>
|
|
);
|
|
} |