Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EBB - Spectator No More</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#84cc16', // lime-500 | |
| secondary: '#ec4899' // pink-500 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #0f172a; /* slate-900 */ | |
| color: #e2e8f0; /* slate-200 */ | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(ellipse at top, rgba(132, 204, 22, 0.1), transparent), | |
| radial-gradient(ellipse at bottom, rgba(236, 72, 153, 0.1), transparent); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 25px 50px -12px rgba(132, 204, 22, 0.25); | |
| } | |
| .pillar-card { | |
| border-left: 4px solid #84cc16; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-800/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold text-primary">E</span> | |
| <span class="text-2xl font-bold text-white">EBB</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-slate-300 hover:text-primary transition-colors">Products</a> | |
| <a href="#" class="text-slate-300 hover:text-primary transition-colors">Projects</a> | |
| <a href="#" class="text-slate-300 hover:text-primary transition-colors">Education</a> | |
| <a href="#" class="text-slate-300 hover:text-primary transition-colors">Contact</a> | |
| </div> | |
| <button class="md:hidden text-slate-300"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20 md:py-32 relative overflow-hidden"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> | |
| <span class="text-primary">SPECTATOR</span> | |
| <span class="text-white block mt-2">NO MORE</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-10"> | |
| Transforming audiences into protagonists through personalized AI-powered cultural experiences, innovative products, and revolutionary educational programs. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-primary hover:bg-lime-600 text-slate-900 font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| Explore Products | |
| </button> | |
| <button class="bg-transparent border-2 border-secondary hover:bg-pink-900/30 text-secondary font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| View Projects | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Three Pillars Section --> | |
| <section class="py-20 bg-slate-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> | |
| Three <span class="text-primary">Pillars</span> of Cultural Innovation | |
| </h2> | |
| <p class="text-xl text-slate-300 text-center max-w-4xl mx-auto mb-16"> | |
| EBB operates at the intersection of technology, art, and education, creating transformative experiences that turn passive spectators into active participants in cultural creation. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Product Card --> | |
| <div class="pillar-card bg-slate-800 p-8 rounded-lg hover:shadow-lg transition-all duration-300"> | |
| <div class="text-secondary mb-4"> | |
| <i data-feather="box" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Products & Services</h3> | |
| <p class="text-slate-300 mb-6"> | |
| AI-powered tools and platforms that enable artists and institutions to create personalized cultural experiences at scale. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <!-- Projects Card --> | |
| <div class="pillar-card bg-slate-800 p-8 rounded-lg hover:shadow-lg transition-all duration-300"> | |
| <div class="text-secondary mb-4"> | |
| <i data-feather="layers" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Projects & Experiences</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Groundbreaking collaborations with world-renowned artists and institutions, creating immersive cultural experiences. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <!-- Education Card --> | |
| <div class="pillar-card bg-slate-800 p-8 rounded-lg hover:shadow-lg transition-all duration-300"> | |
| <div class="text-secondary mb-4"> | |
| <i data-feather="book-open" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Education & Distribution</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Revolutionary vocational training programs that transform students into creators of tomorrow's cultural economy. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Tools Section --> | |
| <section class="py-20 bg-gradient-to-b from-slate-800/50 to-slate-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="text-primary">AI-Powered</span> Cultural Tools | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mb-12"> | |
| EBB's Drop Builder platform enables artists and institutions to create personalized AI-powered experiences where audiences become protagonists in the art they love. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-slate-800 p-6 rounded-lg"> | |
| <i data-feather="code" class="w-8 h-8 text-secondary mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Drop Builder Platform</h3> | |
| <p class="text-slate-300">No-code interface for AI-powered personalized drops</p> | |
| </div> | |
| <div class="bg-slate-800 p-6 rounded-lg"> | |
| <i data-feather="printer" class="w-8 h-8 text-secondary mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Hardware Terminals</h3> | |
| <p class="text-slate-300">On-site printing and interaction solutions</p> | |
| </div> | |
| <div class="bg-slate-800 p-6 rounded-lg"> | |
| <i data-feather="cloud" class="w-8 h-8 text-secondary mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">SaaS Platform</h3> | |
| <p class="text-slate-300">B2B licensing and white-label solutions</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button class="bg-primary hover:bg-lime-600 text-slate-900 font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 flex items-center"> | |
| Explore Products <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Showcase --> | |
| <section class="py-20 bg-slate-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center"> | |
| Featured <span class="text-primary">Projects</span> | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- SIBYL Project --> | |
| <div class="bg-slate-800 rounded-lg overflow-hidden card-hover transition-all duration-300"> | |
| <img src="https://h5qbkcuvhce2a.ok.kimi.link/resources/projects-sibyl.jpg" alt="SIBYL Project" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">SIBYL</h3> | |
| <span class="bg-green-900/30 text-green-400 text-xs px-3 py-1 rounded-full">ACTIVE</span> | |
| </div> | |
| <p class="text-slate-300 mb-4">Tony Oursler • LUMA Arles</p> | |
| <p class="text-sm text-slate-400 mb-6">Immersive installation with AI chatbot and live printing. 40K visitors, 300 logged audience.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-secondary">€250 Fine Art Print</span> | |
| <a href="#" class="text-primary text-sm font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OUTRAGE Project --> | |
| <div class="bg-slate-800 rounded-lg overflow-hidden card-hover transition-all duration-300"> | |
| <img src="https://h5qbkcuvhce2a.ok.kimi.link/resources/projects-outrage.jpg" alt="OUTRAGE Project" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">OUTRAGE</h3> | |
| <span class="bg-green-900/30 text-green-400 text-xs px-3 py-1 rounded-full">ACTIVE</span> | |
| </div> | |
| <p class="text-slate-300 mb-4">Gérard Garouste • La Source</p> | |
| <p class="text-sm text-slate-400 mb-6">AI-generated portrait series. 150 editions, €50K+ revenue for association.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-secondary">€450 Limited Edition</span> | |
| <a href="#" class="text-primary text-sm font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HUMANITIES Project --> | |
| <div class="bg-slate-800 rounded-lg overflow-hidden card-hover transition-all duration-300"> | |
| <img src="https://h5qbkcuvhce2a.ok.kimi.link/resources/projects-huma.jpg" alt="HUMANITIES Project" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">HUMANITIES</h3> | |
| <span class="bg-green-900/30 text-green-400 text-xs px-3 py-1 rounded-full">ACTIVE</span> | |
| </div> | |
| <p class="text-slate-300 mb-4">Neil Beloufa • Multiple Venues</p> | |
| <p class="text-sm text-slate-400 mb-6">Interactive media across 3 exhibitions. 20K visitors, 5K logged audience.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-secondary">Active 3 Exhibitions</span> | |
| <a href="#" class="text-primary text-sm font-medium">View Details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-12"> | |
| <button class="bg-transparent border-2 border-secondary hover:bg-pink-900/30 text-secondary font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| View All Projects | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Program --> | |
| <section class="py-20 bg-gradient-to-b from-slate-900 to-slate-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="text-primary">DISPLAY</span> Program | |
| </h2> | |
| <p class="text-xl text-slate-300 mb-8"> | |
| Revolutionary vocational education transforming students into creators of tomorrow's interactive entertainment through AI-powered pipelines and cultural partnerships. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="bg-slate-800 p-4 rounded-lg text-center"> | |
| <span class="text-3xl font-bold text-primary">0</span> | |
| <p class="text-sm text-slate-300">Visitors in 2 months</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg text-center"> | |
| <span class="text-3xl font-bold text-primary">0</span> | |
| <p class="text-sm text-slate-300">Students engaged</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg text-center"> | |
| <span class="text-3xl font-bold text-primary">0</span> | |
| <p class="text-sm text-slate-300">Professional internships</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg text-center"> | |
| <span class="text-3xl font-bold text-primary">0</span> | |
| <p class="text-sm text-slate-300">Direct hires</p> | |
| </div> | |
| </div> | |
| <button class="bg-secondary hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| Learn About DISPLAY | |
| </button> | |
| </div> | |
| <div> | |
| <img src="https://h5qbkcuvhce2a.ok.kimi.link/resources/education-display.jpg" alt="DISPLAY Education Program" class="rounded-lg shadow-xl w-full"> | |
| <p class="text-sm text-slate-400 mt-2 text-center">France 2030 Initiative</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ecosystem Section --> | |
| <section class="py-20 bg-slate-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center"> | |
| How It All <span class="text-primary">Connects</span> | |
| </h2> | |
| <p class="text-xl text-slate-300 text-center max-w-4xl mx-auto mb-16"> | |
| Our three pillars work together to create a complete ecosystem for cultural innovation | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-slate-800 p-8 rounded-lg text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="tool" class="w-8 h-8 text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Tools Enable Creation</h3> | |
| <p class="text-slate-300"> | |
| Our Drop Builder and hardware terminals provide the technological foundation for all projects and educational programs. | |
| </p> | |
| </div> | |
| <div class="bg-slate-800 p-8 rounded-lg text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="star" class="w-8 h-8 text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Projects Inspire Innovation</h3> | |
| <p class="text-slate-300"> | |
| Real-world collaborations with artists and institutions drive product development and educational content. | |
| </p> | |
| </div> | |
| <div class="bg-slate-800 p-8 rounded-lg text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="users" class="w-8 h-8 text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Education Grows the Ecosystem</h3> | |
| <p class="text-slate-300"> | |
| Training the next generation of cultural creators ensures sustainable growth and continuous innovation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 hero-gradient"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| Ready to <span class="text-primary">Transform</span> Culture? | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-2xl mx-auto mb-10"> | |
| Join us in turning spectators into protagonists across art, education, and culture. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-primary hover:bg-lime-600 text-slate-900 font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| Get Started | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105"> | |
| Explore Solutions | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <span class="text-2xl font-bold text-primary">E</span> | |
| <span class="text-2xl font-bold text-white">EBB</span> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-slate-300 mb-2">SPECTATOR NO MORE</p> | |
| <p class="text-sm text-slate-400">© 2025 EBB. All rights reserved.</p> | |
| <p class="text-sm text-slate-400">Transforming audiences into protagonists</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |