Update src/App.tsx
This commit is contained in:
281
src/App.tsx
281
src/App.tsx
@@ -1,126 +1,183 @@
|
||||
import { Calendar, Users, Star, Award } from 'lucide-react'
|
||||
import { Menu, X, Play, Users, Calendar, MessageSquare } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
function App() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
{/* Navigation */}
|
||||
<nav className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center py-6">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img className="h-8 w-8" src="/images/placeholder.webp" alt="Logo" />
|
||||
<span className="ml-2 text-xl font-semibold text-gray-900">Brand</span>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
<a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Services</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-900"
|
||||
>
|
||||
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
||||
<a href="#" className="text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="relative bg-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
|
||||
<main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
|
||||
<div className="sm:text-center lg:text-left">
|
||||
<h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
|
||||
<span className="block xl:inline">Welcome to our</span>
|
||||
<span className="block text-indigo-600 xl:inline">awesome platform</span>
|
||||
</h1>
|
||||
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
|
||||
Discover amazing features and connect with people around the world. Start your journey today.
|
||||
</p>
|
||||
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
|
||||
<div className="rounded-md shadow">
|
||||
<button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
|
||||
<Play className="mr-2" size={20} />
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 sm:mt-0 sm:ml-3">
|
||||
<button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<img className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="/images/placeholder.webp" alt="Hero" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="py-12 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="lg:text-center">
|
||||
<h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
|
||||
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Everything you need
|
||||
</p>
|
||||
<p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
||||
Our platform provides all the tools and features you need to succeed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<div className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
|
||||
<div className="relative">
|
||||
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">Community</p>
|
||||
<p className="mt-2 ml-16 text-base text-gray-500">
|
||||
Connect with like-minded individuals and build lasting relationships.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<Calendar size={24} />
|
||||
</div>
|
||||
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">Events</p>
|
||||
<p className="mt-2 ml-16 text-base text-gray-500">
|
||||
Stay updated with the latest events and never miss an opportunity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<MessageSquare size={24} />
|
||||
</div>
|
||||
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">Messaging</p>
|
||||
<p className="mt-2 ml-16 text-base text-gray-500">
|
||||
Communicate seamlessly with integrated messaging features.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<Play size={24} />
|
||||
</div>
|
||||
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">Media</p>
|
||||
<p className="mt-2 ml-16 text-base text-gray-500">
|
||||
Share and discover amazing content with our media platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center">
|
||||
<img className="h-8 w-8" src="/images/placeholder.webp" alt="Logo" />
|
||||
<span className="ml-2 text-xl font-semibold text-white">Brand</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-300 text-sm">
|
||||
Making the world a better place through constructing elegant hierarchies.
|
||||
</p>
|
||||
</div>
|
||||
<nav className="hidden md:flex space-x-8">
|
||||
<a href="#" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
|
||||
Home
|
||||
</a>
|
||||
<a href="#" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
|
||||
About
|
||||
</a>
|
||||
<a href="#" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
<div>
|
||||
<h3 className="text-white text-sm font-semibold uppercase tracking-wider">Company</h3>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">About</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">Blog</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white text-sm font-semibold uppercase tracking-wider">Support</h3>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">Help Center</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">Contact</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white text-sm">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 border-t border-gray-700 pt-8">
|
||||
<p className="text-gray-400 text-sm text-center">
|
||||
© 2023 Brand. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div className="px-4 py-6 sm:px-0">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Stats Cards */}
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<Users className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Total Users</dt>
|
||||
<dd className="text-lg font-medium text-gray-900">1,234</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<Calendar className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Events</dt>
|
||||
<dd className="text-lg font-medium text-gray-900">56</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<Star className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Rating</dt>
|
||||
<dd className="text-lg font-medium text-gray-900">4.8</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<Award className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Awards</dt>
|
||||
<dd className="text-lg font-medium text-gray-900">12</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="mt-8">
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Welcome to your dashboard</h3>
|
||||
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
||||
<p>This is a sample dashboard built with React, Vite, and Tailwind CSS.</p>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user