Update src/components/Home.tsx
This commit is contained in:
@@ -1,64 +1,252 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { ChevronRight, ArrowRight, Play, Star, Check, Globe, Users, Zap } from 'lucide-react';
|
||||||
|
|
||||||
type BackgroundType = 'solid' | 'glass' | 'transparent';
|
const Home: React.FC = () => {
|
||||||
type BorderRadiusType = 'none' | 'small' | 'rounded' | 'large';
|
|
||||||
type CardStyleType = 'minimal' | 'glass' | 'glass-elevated' | 'solid';
|
|
||||||
type ButtonStyleType = 'solid' | 'glass' | 'outline';
|
|
||||||
type TextAnimationType = 'none' | 'entrance-slide' | 'entrance-fade' | 'typing';
|
|
||||||
|
|
||||||
interface HomeProps {
|
|
||||||
defaultTextAnimation?: TextAnimationType;
|
|
||||||
borderRadius?: BorderRadiusType;
|
|
||||||
background?: BackgroundType;
|
|
||||||
cardStyle?: CardStyleType;
|
|
||||||
primaryButtonStyle?: ButtonStyleType;
|
|
||||||
secondaryButtonStyle?: ButtonStyleType;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Home: React.FC<HomeProps> = ({
|
|
||||||
defaultTextAnimation = "entrance-slide", borderRadius = "rounded", background = "glass", cardStyle = "glass-elevated", primaryButtonStyle = "solid", secondaryButtonStyle = "glass"
|
|
||||||
}) => {
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="container mx-auto px-4 py-16">
|
{/* Header */}
|
||||||
<div className="text-center mb-16">
|
<header className="bg-white shadow-sm">
|
||||||
<h1 className="text-6xl font-bold text-white mb-6">
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||||
Welcome to Webild Components
|
<div className="flex items-center space-x-2">
|
||||||
</h1>
|
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center">
|
||||||
<p className="text-xl text-slate-300 max-w-3xl mx-auto">
|
<span className="text-white font-bold text-sm">W</span>
|
||||||
A modern component library built with React and Tailwind CSS
|
</div>
|
||||||
</p>
|
<span className="text-xl font-bold text-gray-900">Webild</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
|
|
||||||
<h3 className="text-2xl font-semibold text-white mb-4">Modern Design</h3>
|
|
||||||
<p className="text-slate-300">
|
|
||||||
Beautiful, responsive components with glass morphism effects
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
|
<nav className="hidden md:flex items-center space-x-8">
|
||||||
<h3 className="text-2xl font-semibold text-white mb-4">TypeScript</h3>
|
<a href="#" className="text-gray-700 hover:text-blue-600">Home</a>
|
||||||
<p className="text-slate-300">
|
<a href="#" className="text-gray-700 hover:text-blue-600">About</a>
|
||||||
Fully typed components for better developer experience
|
<a href="#" className="text-gray-700 hover:text-blue-600">Services</a>
|
||||||
</p>
|
<a href="#" className="text-gray-700 hover:text-blue-600">Contact</a>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
|
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||||
<h3 className="text-2xl font-semibold text-white mb-4">Customizable</h3>
|
|
||||||
<p className="text-slate-300">
|
|
||||||
Flexible theming system with multiple style variants
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center mt-16">
|
|
||||||
<button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
|
|
||||||
Get Started
|
Get Started
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||||
|
Build Amazing
|
||||||
|
<span className="text-blue-600 block">Web Experiences</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||||
|
Create stunning websites and applications with our cutting-edge tools and components.
|
||||||
|
Fast, reliable, and beautiful.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<button className="bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
|
||||||
|
Start Building <ArrowRight className="ml-2 h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<button className="bg-white text-gray-700 px-8 py-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors flex items-center justify-center">
|
||||||
|
<Play className="mr-2 h-5 w-5" /> Watch Demo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
Why Choose Webild?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600">
|
||||||
|
Everything you need to build modern web applications
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Zap className="h-8 w-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Lightning Fast</h3>
|
||||||
|
<p className="text-gray-600">Optimized performance with modern web technologies for blazing fast load times.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Globe className="h-8 w-8 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Global Reach</h3>
|
||||||
|
<p className="text-gray-600">Deploy anywhere with our global CDN and edge computing capabilities.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Users className="h-8 w-8 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Team Collaboration</h3>
|
||||||
|
<p className="text-gray-600">Work together seamlessly with real-time collaboration tools.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="py-20 bg-gray-50">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid md:grid-cols-4 gap-8 text-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-bold text-blue-600 mb-2">10k+</div>
|
||||||
|
<div className="text-gray-600">Happy Customers</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-bold text-green-600 mb-2">50M+</div>
|
||||||
|
<div className="text-gray-600">Page Views</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-bold text-purple-600 mb-2">99.9%</div>
|
||||||
|
<div className="text-gray-600">Uptime</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-bold text-orange-600 mb-2">24/7</div>
|
||||||
|
<div className="text-gray-600">Support</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Testimonials */}
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
What Our Users Say
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="bg-white p-6 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
"Webild has transformed how we build web applications. The components are beautiful and the performance is outstanding."
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">Sarah Johnson</div>
|
||||||
|
<div className="text-sm text-gray-500">Frontend Developer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
"The best web development platform I've used. Clean, fast, and incredibly easy to work with."
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">Mike Chen</div>
|
||||||
|
<div className="text-sm text-gray-500">Tech Lead</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-6 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
"Amazing support and documentation. Our team was up and running in no time."
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">Emily Davis</div>
|
||||||
|
<div className="text-sm text-gray-500">Product Manager</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 bg-blue-600">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl md: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 developers building amazing web experiences
|
||||||
|
</p>
|
||||||
|
<button className="bg-white text-blue-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors font-semibold">
|
||||||
|
Start Your Free Trial
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-gray-900 text-white py-12">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center space-x-2 mb-4">
|
||||||
|
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center">
|
||||||
|
<span className="text-white font-bold text-sm">W</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold">Webild</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Building the future of web development, one component at a time.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4">Product</h3>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><a href="#" className="hover:text-white">Features</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Pricing</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Documentation</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">API</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4">Company</h3>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><a href="#" className="hover:text-white">About</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Blog</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Careers</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4">Support</h3>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><a href="#" className="hover:text-white">Help Center</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Community</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Status</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Privacy</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||||
|
<p>© 2024 Webild. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user