Set up the basic structure and functionality for the DJ management system
Initializes project structure, adds core components, and configures essential dependencies. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 3a22ac80-cd1d-4441-9e36-f24fc2f4c3de Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3478f7c3-db8c-4fca-9165-3adbdf1b5829/e8da43e7-d99c-4328-9fdc-485bdeecffc1.jpg
This commit is contained in:
spliceboti
@@ -0,0 +1,174 @@
|
||||
import { Link } from "wouter";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Music, Calendar, Users, Settings } from "lucide-react";
|
||||
|
||||
export default function Landing() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm border-b border-slate-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center">
|
||||
<Music className="w-8 h-8 text-primary-600 mr-3" />
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-800">DJ Management</h1>
|
||||
<p className="text-sm text-slate-500">Professional Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
onClick={() => window.location.href = "/api/login"}
|
||||
className="bg-primary-600 hover:bg-primary-700"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h2 className="text-4xl font-bold text-slate-800 mb-6">
|
||||
Professional DJ Management System
|
||||
</h2>
|
||||
<p className="text-xl text-slate-600 mb-8">
|
||||
Streamline your DJ operations with our comprehensive management platform.
|
||||
Handle schedules, events, and team coordination all in one place.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => window.location.href = "/api/login"}
|
||||
className="bg-primary-600 hover:bg-primary-700"
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-3xl font-bold text-slate-800 mb-4">
|
||||
Everything You Need to Manage Your DJ Team
|
||||
</h3>
|
||||
<p className="text-lg text-slate-600">
|
||||
Powerful tools designed for modern DJ management
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Calendar className="w-8 h-8 text-primary-600 mb-2" />
|
||||
<CardTitle>Event Management</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-slate-600">
|
||||
Create, manage, and track all your events with intuitive scheduling tools and automated assignments.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Users className="w-8 h-8 text-primary-600 mb-2" />
|
||||
<CardTitle>DJ Profiles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-slate-600">
|
||||
Comprehensive DJ profiles with social links, availability management, and performance tracking.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Settings className="w-8 h-8 text-primary-600 mb-2" />
|
||||
<CardTitle>Admin Tools</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-slate-600">
|
||||
Advanced admin controls for user management, schedule templates, and automated DJ assignments.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600 mb-2">500+</div>
|
||||
<div className="text-slate-600">Events Managed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600 mb-2">50+</div>
|
||||
<div className="text-slate-600">Active DJs</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600 mb-2">99.9%</div>
|
||||
<div className="text-slate-600">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-primary-600">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h3 className="text-3xl font-bold text-white mb-4">
|
||||
Ready to Transform Your DJ Management?
|
||||
</h3>
|
||||
<p className="text-primary-100 mb-8">
|
||||
Join hundreds of event organizers who trust our platform to manage their DJ operations.
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
onClick={() => window.location.href = "/api/login"}
|
||||
>
|
||||
Start Managing Today
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-slate-800 text-white py-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex items-center mb-4 md:mb-0">
|
||||
<Music className="w-6 h-6 mr-2" />
|
||||
<span className="text-lg font-semibold">DJ Management System</span>
|
||||
</div>
|
||||
<div className="text-slate-400">
|
||||
© 2024 DJ Management System. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user