Creare un sito web globale per eventi e opportunità per ballerini è un’idea fantastica! Ecco una struttura che potrebbe funzionare bene: 1. Homepage • Presentazione del sito e della sua missione • Sezione per eventi in evidenza • Call-to-action per iscriversi o accedere 2. Sezione Eventi • Ricerca avanzata per trovare eventi per località, stile di danza, data • Eventi consigliati in base alle preferenze degli utenti • Mappa interattiva con eventi in tutto il mondo 3. Sezione Ballerini • Profilo personale con portfolio e video delle esibizioni • Spazio per inserire disponibilità e offerte di lavoro • Recensioni e collaborazioni tra ballerini e organizzatori 4. Community e Networking • Forum di discussione per esperienze e consigli • Sezione mentorship per ballerini emergenti • Eventi di networking virtuali e dal vivo 5. Area Business • Sezione per coreografi, agenti e organizzatori di eventi • Opportunità di sponsorizzazione e collaborazione • Marketplace per costumi, attrezzature e corsi di danza 6. Blog e Risorse • Articoli su tendenze, tecniche e storie di successo • Interviste con ballerini famosi • Sezione tutorial con video didattici Ti piacerebbe che fosse più focalizzato sugli eventi o più sui ballerini e le loro opportunità di lavoro? Posso aiutarti a definire Anche il design 2025 con e-mail: yaostephanekouassi1@gmail.com e numero telefonico:3279386519 - Initial Deployment
cd5413b
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DanceConnect - Global Dance Community</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .hero-clip-path { | |
| clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
| } | |
| .event-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .dancer-card:hover .dancer-overlay { | |
| opacity: 1; | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=World&zoom=2&size=800x400&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-clip-path { | |
| clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-dance text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-purple-600">DanceConnect</span> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:space-x-8"> | |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#events" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Events</a> | |
| <a href="#dancers" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dancers</a> | |
| <a href="#community" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a> | |
| <a href="#business" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Business</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-4 md:flex md:items-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button> | |
| <button class="ml-4 bg-white hover:bg-gray-100 text-purple-600 border border-purple-600 px-4 py-2 rounded-md text-sm font-medium">Sign Up</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#events" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Events</a> | |
| <a href="#dancers" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dancers</a> | |
| <a href="#community" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a> | |
| <a href="#business" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Business</a> | |
| <div class="mt-4 p-2"> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button> | |
| <button class="w-full mt-2 bg-white hover:bg-gray-100 text-purple-600 border border-purple-600 px-4 py-2 rounded-md text-sm font-medium">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white hero-clip-path pt-16 pb-32"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> | |
| <span class="block">Connect with the</span> | |
| <span class="block text-purple-200">Global Dance Community</span> | |
| </h1> | |
| <p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Discover events, find opportunities, and grow your dance career worldwide. Join thousands of dancers, choreographers, and event organizers in one vibrant community. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button class="bg-purple-800 hover:bg-purple-900 text-white px-6 py-3 rounded-md font-medium">Join Now</button> | |
| </div> | |
| <p class="mt-3 text-sm text-purple-100"> | |
| By signing up, you agree to our Terms of Service and Privacy Policy. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> | |
| <div class="relative block w-full bg-white overflow-hidden rounded-lg"> | |
| <img class="w-full" src="https://images.unsplash.com/photo-1547153760-18fc86324498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Dancers performing"> | |
| <div class="absolute inset-0 bg-purple-600 opacity-20"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="bg-white bg-opacity-90 hover:bg-opacity-100 text-purple-600 rounded-full p-4 shadow-lg transform transition hover:scale-110"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-16"> | |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <div class="px-6 py-8 sm:p-10 sm:pb-6"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-3"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-purple-600">12,000+</div> | |
| <div class="mt-2 text-base font-medium text-gray-500">Dancers Connected</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-purple-600">850+</div> | |
| <div class="mt-2 text-base font-medium text-gray-500">Events Monthly</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-purple-600">45+</div> | |
| <div class="mt-2 text-base font-medium text-gray-500">Countries</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Events Section --> | |
| <div id="events" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Upcoming Dance Events | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Find performances, competitions, and workshops near you or worldwide. | |
| </p> | |
| </div> | |
| <!-- Search Filters --> | |
| <div class="mt-8 bg-white shadow rounded-lg p-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4"> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700">Location</label> | |
| <select id="location" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>Anywhere</option> | |
| <option>North America</option> | |
| <option>Europe</option> | |
| <option>Asia</option> | |
| <option>Africa</option> | |
| <option>South America</option> | |
| <option>Australia</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="dance-style" class="block text-sm font-medium text-gray-700">Dance Style</label> | |
| <select id="dance-style" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>All Styles</option> | |
| <option>Ballet</option> | |
| <option>Contemporary</option> | |
| <option>Hip Hop</option> | |
| <option>Jazz</option> | |
| <option>Ballroom</option> | |
| <option>Salsa</option> | |
| <option>Tap</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-sm font-medium text-gray-700">Date Range</label> | |
| <select id="date" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>Any Time</option> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| <option>Next 3 Months</option> | |
| <option>2024</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">Search Events</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Events Grid --> | |
| <div class="mt-12 grid gap-8 lg:grid-cols-3"> | |
| <!-- Event Card 1 --> | |
| <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1547153760-18fc86324498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Contemporary dance event"> | |
| <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full">Featured</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-block px-2 py-1 leading-none bg-purple-200 text-purple-800 rounded-full font-semibold uppercase tracking-wide text-xs">Contemporary</span> | |
| <div class="ml-2 text-xs text-gray-600">• Paris, France</div> | |
| </div> | |
| <h3 class="mt-2 font-bold text-xl">International Contemporary Festival</h3> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="far fa-calendar mr-1"></i> | |
| <span>June 15-18, 2024</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm font-medium text-purple-600">From $120</span> | |
| <button class="text-sm bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium">Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Hip hop battle"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-block px-2 py-1 leading-none bg-blue-200 text-blue-800 rounded-full font-semibold uppercase tracking-wide text-xs">Hip Hop</span> | |
| <div class="ml-2 text-xs text-gray-600">• New York, USA</div> | |
| </div> | |
| <h3 class="mt-2 font-bold text-xl">Urban Dance Battle 2024</h3> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="far fa-calendar mr-1"></i> | |
| <span>July 22-24, 2024</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm font-medium text-purple-600">Free Entry</span> | |
| <button class="text-sm bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium">Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 3 --> | |
| <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Ballet performance"> | |
| <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full">Sold Out</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-block px-2 py-1 leading-none bg-pink-200 text-pink-800 rounded-full font-semibold uppercase tracking-wide text-xs">Ballet</span> | |
| <div class="ml-2 text-xs text-gray-600">• Moscow, Russia</div> | |
| </div> | |
| <h3 class="mt-2 font-bold text-xl">Bolshoi Ballet Intensive</h3> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="far fa-calendar mr-1"></i> | |
| <span>August 5-15, 2024</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm font-medium text-purple-600">Waitlist Only</span> | |
| <button class="text-sm bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium">Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-white hover:bg-gray-100 text-purple-600 border border-purple-600 px-6 py-3 rounded-md font-medium">View All Events</button> | |
| </div> | |
| </div> | |
| <!-- Dancers Section --> | |
| <div id="dancers" class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Connect with Talented Dancers | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Find performers for your event or showcase your skills to potential employers. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid gap-8 lg:grid-cols-4"> | |
| <!-- Dancer Card 1 --> | |
| <div class="dancer-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1549060279-7e168fcee0c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Contemporary dancer"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl">Sophia Martinez</h3> | |
| <div class="mt-1 text-sm text-gray-600">Contemporary | Ballet | Jazz</div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Barcelona, Spain</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4 text-xs text-gray-500">3 collaborations</div> | |
| </div> | |
| </div> | |
| <div class="dancer-overlay absolute inset-0 bg-purple-600 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300"> | |
| <div class="text-center p-6 text-white"> | |
| <h3 class="text-xl font-bold">Sophia Martinez</h3> | |
| <p class="mt-2">Professional contemporary dancer with 8 years experience in international performances.</p> | |
| <div class="mt-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-md font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dancer Card 2 --> | |
| <div class="dancer-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Hip hop dancer"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl">Marcus Johnson</h3> | |
| <div class="mt-1 text-sm text-gray-600">Hip Hop | Breaking | Popping</div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Los Angeles, USA</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4 text-xs text-gray-500">2 collaborations</div> | |
| </div> | |
| </div> | |
| <div class="dancer-overlay absolute inset-0 bg-purple-600 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300"> | |
| <div class="text-center p-6 text-white"> | |
| <h3 class="text-xl font-bold">Marcus Johnson</h3> | |
| <p class="mt-2">Street dance specialist with championship titles in multiple international battles.</p> | |
| <div class="mt-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-md font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dancer Card 3 --> | |
| <div class="dancer-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Ballet dancer"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl">Elena Petrov</h3> | |
| <div class="mt-1 text-sm text-gray-600">Ballet | Contemporary | Character</div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Saint Petersburg, Russia</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4 text-xs text-gray-500">5 collaborations</div> | |
| </div> | |
| </div> | |
| <div class="dancer-overlay absolute inset-0 bg-purple-600 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300"> | |
| <div class="text-center p-6 text-white"> | |
| <h3 class="text-xl font-bold">Elena Petrov</h3> | |
| <p class="mt-2">Principal dancer with Mariinsky Ballet, available for guest performances worldwide.</p> | |
| <div class="mt-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-md font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dancer Card 4 --> | |
| <div class="dancer-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Salsa dancer"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl">Carlos Mendez</h3> | |
| <div class="mt-1 text-sm text-gray-600">Salsa | Bachata | Latin Jazz</div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Havana, Cuba</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4 text-xs text-gray-500">4 collaborations</div> | |
| </div> | |
| </div> | |
| <div class="dancer-overlay absolute inset-0 bg-purple-600 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300"> | |
| <div class="text-center p-6 text-white"> | |
| <h3 class="text-xl font-bold">Carlos Mendez</h3> | |
| <p class="mt-2">World champion salsa dancer and instructor available for performances and workshops.</p> | |
| <div class="mt-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-md font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium">Browse All Dancers</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Section --> | |
| <div id="community" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Join Our Vibrant Community | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Connect, learn, and grow with dancers from around the world. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid gap-8 lg:grid-cols-3"> | |
| <!-- Community Feature 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Discussion Forums</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Engage in conversations about dance techniques, career advice, and industry trends with professionals and enthusiasts. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-purple-600 font-medium">Join discussions →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Feature 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-hands-helping text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Mentorship Program</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Connect with experienced dancers who can guide you in your career development and skill improvement. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-purple-600 font-medium">Find a mentor →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Feature 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Networking Events</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Attend virtual and in-person meetups to expand your professional network in the dance industry. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-purple-600 font-medium">View events →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="mt-16"> | |
| <h3 class="text-2xl font-bold text-center text-gray-900">What Our Members Say</h3> | |
| <div class="mt-8 grid gap-8 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">Jessica Chen</h4> | |
| <p class="text-sm text-gray-500">Contemporary Dancer</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "Through DanceConnect, I found my current dance company and have connected with choreographers worldwide. It's transformed my career." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">Michael Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Event Organizer</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "Finding talented dancers for our productions has never been easier. The quality of performers on this platform is exceptional." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">David Kim</h4> | |
| <p class="text-sm text-gray-500">Hip Hop Instructor</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "The mentorship program connected me with an industry veteran who helped me refine my teaching methods. Game changer!" | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Business Section --> | |
| <div id="business" class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="lg:col-span-6"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Business Solutions for the Dance Industry | |
| </h2> | |
| <p class="mt-3 text-xl text-gray-500"> | |
| Tools and services designed for choreographers, agents, studios, and event organizers. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 text-white"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Talent Management</h4> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Advanced tools to manage your roster of dancers, track bookings, and handle contracts. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 text-white"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Event Promotion</h4> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Reach thousands of potential attendees with our targeted marketing solutions. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 text-white"> | |
| <i class="fas fa-store"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Marketplace</h4> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Sell costumes, equipment, or digital courses to our community of dance professionals. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0 lg:col-span-6"> | |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> | |
| <div class="px-6 py-8 sm:p-10 sm:pb-6"> | |
| <h3 class="text-2xl font-bold text-center text-gray-900">Business Premium</h3> | |
| <div class="mt-4 flex items-center justify-center"> | |
| <span class="px-3 text-6xl font-bold text-gray-900">$29</span> | |
| <span class="text-xl font-medium text-gray-500">/month</span> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| For professional choreographers, studios, and event organizers. | |
| </p> | |
| </div> | |
| <div class="px-6 pt-6 pb-8 bg-gray-50"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Unlimited dancer profiles</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Advanced booking system</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Priority event promotion</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Marketplace with 0% commission</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Dedicated account manager</p> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Global Map Section --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Dance Community Worldwide | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Our members span across 45+ countries with events happening daily. | |
| </p> | |
| </div> | |
| <div class="mt-12 map-container rounded-lg shadow-xl overflow-hidden"> | |
| <!-- This would be replaced with an actual interactive map in production --> | |
| <div class="h-full flex items-center justify-center bg-gray-100"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-globe-americas text-5xl text-purple-600 mb-4"></i> | |
| <h3 class="text-xl font-bold text-gray-900">Interactive Global Map</h3> | |
| <p class="mt-2 text-gray-600">Explore dance events and communities around the world</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid gap-8 lg:grid-cols-3"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">120+</div> | |
| <div class="mt-2 text-lg font-medium text-gray-900">Major Cities</div> | |
| <p class="mt-1 text-gray-500">With active dance communities</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">50+</div> | |
| <div class="mt-2 text-lg font-medium text-gray-900">International Festivals</div> | |
| <p class="mt-1 text-gray-500">Partnered with our platform</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">24/7</div> | |
| <div class="mt-2 text-lg font-medium text-gray-900">Support</div> | |
| <p class="mt-1 text-gray-500">For all your questions and needs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl"> | |
| Ready to join the global dance community? | |
| </h2> | |
| <p class="mt-3 text-lg text-purple-100"> | |
| Whether you're a dancer looking for opportunities or an organizer seeking talent, DanceConnect has what you need. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100">Sign Up as Dancer</button> | |
| <button class="bg-purple-800 hover:bg-purple-900 text-white px-6 py-3 rounded-md font-medium">Business Solutions</button> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0"> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-6"> | |
| <h3 class="text-xl font-bold">Have questions?</h3> | |
| <p class="mt-2 text-purple-100">Our team is happy to help you get started.</p> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>contact@danceconnect.com</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-purple-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-purple-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-purple-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-purple-400 tracking-wider uppercase">Connect</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-gray-400">Subscribe to our newsletter</h4> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-l-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-md font-medium">Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-base text-gray-400">© 2024 DanceConnect. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="text-base text-gray-400 hover:text-white mr-6">Privacy Policy</a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white mr-6">Terms of Service</a> | |
| <a href="#" class="text-base text-gray-400 hover:text-white">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| window.scrollTo({ | |
| top: target.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Simple form validation for newsletter signup | |
| document.querySelectorAll('input[type="email"]').forEach(input => { | |
| input.addEventListener('blur', function() { | |
| if (!this.value.includes('@')) { | |
| this.classList.add('border-red-500'); | |
| } else { | |
| this.classList.remove('border-red-500'); | |
| } | |
| }); | |
| }); | |
| // Event card hover effect | |
| document.querySelectorAll('.event-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px)'; | |
| this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=yaostephanekouassi1/yaostephanekouassi7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |