Spaces:
Running
Running
Artistic Intelligence Re-imagining AI application in art The term Artificial Intelligence automatically invokes negative associations in my mind. Something artificial is not authentic, original or real, but a forgery or a fake imitation of reality. Human expression should not be hijacked by technology or dictated by algorythms, instead the AI should act as a catalyst and vehicle to further elevate artistic expression. Art as an expression is a very subjective thing. To me, art has always been defined by an emotional response. Does the artwork invoke a strong feeling? Positive or negative, true art should not leave a person indifferent. AI models are "trained" on enormous amounts of data. A large part of that data consists of art created throughout human existence, hundreds of thousands of paintings and drawings, sculptures and other creative expressions are part of this database. A living gallery where artists submit their work to become part of an ever-evolving tapestry of AI generated art. Large models will be fine tuned on artists work, creating new strands of art. The spectators are part of the story, photographed upon entry, their portraits will be integrated into Loras in real time, mini trained models that are mixed into the main database and manifested in the art. Patrons of the gallery will see representations of themselves in the artwork showcased withing the gallery. These methods to locally train large generative AI models are just the tip of the iceberg when it comes to innovation and adaptation of Ai in the creative field. The goal is to utilize the powerful AI tools not as a means of art creation and interpretation but as a catalyst and a vehicle to bring new and exciting ideas to life. The computational speed and generative power of large generative models are constantly improving and with a wider variety of tools available to the public every day, the sky is no longer the limit. Creating an interactive art gallery is a way to integrate the viewer into the creative process, trully immersing them into the art itself. The gallery patrons will have the ability to manipulate multiple aspects of the generative art in real time. By accesing terminals located throughout the space, the viewers can input concepts and terms that will affect the main generation happening on the walls. By entering prompts like "Summer", "War", or even "Puppies", these terms will trigger the model to infuse the live generation with new visual elements that will transform the narrative and guide it into new dimensions. Generate a comprehensive proposal for art foundations to solicit grants for a new and innovative gallery space that cultivates community and civic engagement. Use modern design elements and bright tones. Create a ultra modern design. Emphasise the philosophy and reinforce it throughout the proposal. Create comprehensive and clear technical specifications detailing the process of the inner workings of the gallery. - Initial Deployment
ae543d8
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Artistic Intelligence Gallery - Proposal</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6C63FF', | |
| secondary: '#FF6584', | |
| accent: '#42C2FF', | |
| dark: '#1A1A2E', | |
| light: '#F8F9FA' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Lexend', 'sans-serif'] | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Lexend:wght@600;700&display=swap'); | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6C63FF 0%, #FF6584 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .artistic-bg { | |
| background: radial-gradient(circle at 20% 50%, rgba(108, 99, 255, 0.15) 0%, rgba(66, 194, 255, 0.05) 40%, transparent 70%), | |
| radial-gradient(circle at 80% 30%, rgba(255, 101, 132, 0.15) 0%, rgba(255, 101, 132, 0.05) 30%, transparent 60%), | |
| linear-gradient(135deg, #1A1A2E 0%, #16213E 100%); | |
| } | |
| .interactive-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .interactive-card:hover { | |
| transform: translateY(-10px) rotateX(5deg); | |
| box-shadow: 0 25px 50px -12px rgba(108, 99, 255, 0.25); | |
| } | |
| .pulse-animation { | |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(108, 99, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light font-sans leading-relaxed"> | |
| <!-- Header --> | |
| <header class="artistic-bg py-20 px-6 md:px-12 lg:px-24 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto relative z-10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="md:w-1/2"> | |
| <h1 class="text-4xl md:text-6xl font-display font-bold mb-6"> | |
| <span class="gradient-text">Artistic Intelligence</span><br> | |
| <span class="text-accent">Gallery</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Reimagining artificial intelligence as a catalyst for authentic artistic expression and community engagement. | |
| </p> | |
| <div class="flex gap-4"> | |
| <button class="bg-primary hover:bg-opacity-90 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105"> | |
| Download Full Proposal | |
| </button> | |
| <button class="border border-accent text-accent hover:bg-accent hover:bg-opacity-10 font-semibold px-8 py-3 rounded-full transition-all duration-300"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 mt-12 md:mt-0 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-tr from-primary to-secondary rounded-full opacity-20 blur-xl"></div> | |
| <div class="absolute inset-4 bg-gradient-to-br from-accent/50 to-primary/50 rounded-full animate-spin-slow"></div> | |
| <div class="absolute inset-8 bg-gradient-to-tr from-secondary/50 to-accent/50 rounded-full animate-spin-slow-reverse"></div> | |
| <div class="absolute inset-12 bg-dark rounded-full overflow-hidden flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Generated Art" class="w-full h-full object-cover opacity-90"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Philosophy Section --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 bg-gradient-to-b from-dark to-[#0F3460]"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-secondary font-semibold tracking-widest">OUR PHILOSOPHY</span> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mt-4"> | |
| Human Expression <span class="gradient-text">Amplified</span>, Not Replaced | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-primary/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">AI as Catalyst</h3> | |
| <p class="text-gray-400"> | |
| We believe artificial intelligence should elevate rather than imitate human creativity. Our models serve as collaborators, not replacements. | |
| </p> | |
| </div> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-secondary/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-3xl text-secondary"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Community Integration</h3> | |
| <p class="text-gray-400"> | |
| Gallery visitors become active participants in the artistic process, with their images and input shaping the evolving artwork in real-time. | |
| </p> | |
| </div> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-palette text-3xl text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Emotional Resonance</h3> | |
| <p class="text-gray-400"> | |
| True art provokes emotional response. Our AI systems are designed to respond to and amplify human emotions through generative techniques. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Process --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 bg-[#0F3460]"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-accent font-semibold tracking-widest">TECHNICAL SPECIFICATIONS</span> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mt-4"> | |
| The Behind-The-Scenes <span class="gradient-text">Magic</span> | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E]"> | |
| <div class="flex gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"> | |
| <span class="text-primary font-mono font-bold">1</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Visitor Integration</h3> | |
| <p class="text-gray-400 text-sm">Real-time participant data collection</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center"> | |
| <span class="text-secondary font-mono font-bold">2</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Model Adaptation</h3> | |
| <p class="text-gray-400 text-sm">LoRa/LoHa fine-tuning on visitor input</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center"> | |
| <span class="text-accent font-mono font-bold">3</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Generative Process</h3> | |
| <p class="text-gray-400 text-sm">Stable Diffusion XL with ControlNets</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center"> | |
| <span class="text-purple-500 font-mono font-bold">4</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Interactive Display</h3> | |
| <p class="text-gray-400 text-sm">High-resolution LED walls with touch input</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="order-1 md:order-2"> | |
| <div class="relative"> | |
| <div class="w-full h-80 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center glow-effect"> | |
| <i class="fas fa-server text-6xl text-white opacity-70"></i> | |
| </div> | |
| <div class="absolute -bottom-8 -right-8 w-2/3 h-40 bg-secondary/10 rounded-2xl border border-secondary/20 flex items-center justify-center backdrop-blur-sm"> | |
| <i class="fas fa-project-diagram text-4xl text-secondary"></i> | |
| </div> | |
| <div class="absolute -top-8 -left-8 w-1/2 h-32 bg-accent/10 rounded-2xl border border-accent/20 flex items-center justify-center backdrop-blur-sm"> | |
| <i class="fas fa-microchip text-3xl text-accent"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-[#1A1A2E] rounded-2xl p-8 border border-[#2A3A6E]"> | |
| <h3 class="text-2xl font-display font-bold mb-6 gradient-text">Technical Stack</h3> | |
| <ul class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> | |
| <li class="bg-primary/10 py-4 rounded-lg text-primary font-mono"> | |
| Stable Diffusion XL | |
| </li> | |
| <li class="bg-secondary/10 py-4 rounded-lg text-secondary font-mono"> | |
| LoRa/LoHa | |
| </li> | |
| <li class="bg-accent/10 py-4 rounded-lg text-accent font-mono"> | |
| ControlNet | |
| </li> | |
| <li class="bg-purple-500/10 py-4 rounded-lg text-purple-500 font-mono"> | |
| NVIDIA GPUs | |
| </li> | |
| <li class="bg-green-500/10 py-4 rounded-lg text-green-500 font-mono"> | |
| TensorRT | |
| </li> | |
| <li class="bg-yellow-500/10 py-4 rounded-lg text-yellow-500 font-mono"> | |
| FastAPI | |
| </li> | |
| <li class="bg-red-500/10 py-4 rounded-lg text-red-500 font-mono"> | |
| WebSockets | |
| </li> | |
| <li class="bg-pink-500/10 py-4 rounded-lg text-pink-500 font-mono"> | |
| Three.js | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Experience --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 bg-dark"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-primary font-semibold tracking-widest">EXPERIENCE DESIGN</span> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mt-4"> | |
| Become Part of the <span class="gradient-text">Artwork</span> | |
| </h2> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="relative h-[400px]"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/20 to-accent/20 rounded-3xl"></div> | |
| <div class="absolute top-8 left-8 w-full h-full bg-gradient-to-tl from-secondary/20 to-purple-500/20 rounded-3xl"></div> | |
| <div class="absolute top-16 left-16 w-full h-full bg-dark rounded-3xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Interactive Gallery" class="w-full h-full object-cover opacity-90"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center p-8 backdrop-blur-sm bg-black/30 rounded-xl border border-white/10"> | |
| <h4 class="text-xl font-semibold mb-2">"Experience The Future"</h4> | |
| <p class="text-sm opacity-80">Your presence changes the art</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-display font-bold mb-6 text-white">Participatory Art Generation</h3> | |
| <p class="text-gray-400 mb-6"> | |
| The Artistic Intelligence Gallery transforms passive observation into active participation. Visitors engage through multiple interaction modalities: | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex gap-4"> | |
| <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-camera text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Facial Capture Stations</h4> | |
| <p class="text-gray-400 text-sm"> | |
| High-resolution cameras capture visitor portraits which are instantly processed into artistic styles and integrated into the gallery's AI models. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-terminal text-secondary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Prompt Terminals</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Strategically placed kiosks allow visitors to input concepts and emotions that steer the artistic direction of the live generative displays. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-vector-square text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Gesture & Motion Tracking</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Advanced sensors translate visitor movements into aesthetic parameters - speed, fluidity, and intensity directly influence the visual output. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-20 bg-gradient-to-r from-primary/10 to-accent/10 rounded-2xl p-8 border border-primary/20"> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center pulse-animation"> | |
| <i class="fas fa-lightbulb text-3xl text-primary"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-2xl font-display font-bold mb-4">Our Vision</h3> | |
| <p class="text-gray-300"> | |
| We envision a space where technology disappears, leaving only the magic of co-creation between human and machine. Where every visitor becomes both artist and muse, contributing to an ever-evolving masterpiece that reflects our collective imagination. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Impact --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 bg-gradient-to-b from-dark to-[#0F3460]"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-secondary font-semibold tracking-widest">COMMUNITY IMPACT</span> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mt-4"> | |
| Building <span class="gradient-text">Connections</span> Through Art | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-display font-bold mb-6 text-white">Educational Programs</h3> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E] mb-8"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-graduation-cap text-secondary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">AI Art Workshops</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Hands-on classes teaching ethical use of generative AI while developing personal artistic vision. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E] mb-8"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-users text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Community Creation Days</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Monthly events where local groups collaborate on large-scale generative pieces reflecting community identity. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E]"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-school text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">School Partnership Program</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Curriculum-connected visits and residencies bringing art and technology education to under-resourced schools. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-display font-bold mb-6 text-white">Civic Engagement</h3> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E] mb-8"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-city text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Public Art Initiatives</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Collaborative projects with city government to create evolving digital murals in public spaces. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E] mb-8"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-hand-holding-heart text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Charity Fundraisers</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Special events where visitor contributions generate auctionable digital artworks supporting local causes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-[#16213E] rounded-2xl p-6 border border-[#2A3A6E]"> | |
| <div class="flex gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center shrink-0"> | |
| <i class="fas fa-hands-helping text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Accessibility Features</h4> | |
| <p class="text-gray-400 text-sm"> | |
| Inclusive design including tactile interfaces, audio descriptions, and adaptive interaction methods. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl p-8 border border-primary/20"> | |
| <div class="grid md:grid-cols-3 gap-8 text-center"> | |
| <div> | |
| <div class="text-4xl font-display font-bold gradient-text mb-2">15+</div> | |
| <div class="text-gray-400">Local schools served</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-display font-bold gradient-text mb-2">100+</div> | |
| <div class="text-gray-400">Artist collaborators</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-display font-bold gradient-text mb-2">10k+</div> | |
| <div class="text-gray-400">Annual visitors projected</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Funding Needs --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 bg-[#0F3460]"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-accent font-semibold tracking-widest">FUNDING REQUESTS</span> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mt-4"> | |
| Join Us in <span class="gradient-text">Reimagining</span> Art | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-primary/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Technology Infrastructure</h3> | |
| <ul class="space-y-2 text-gray-400 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-primary"></i> | |
| High-performance GPU clusters | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-primary"></i> | |
| Interactive display walls | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-primary"></i> | |
| Visitor sensing equipment | |
| </li> | |
| </ul> | |
| <div class="text-lg font-bold">$250,000</div> | |
| </div> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-secondary/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-building text-3xl text-secondary"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Gallery Space</h3> | |
| <ul class="space-y-2 text-gray-400 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-secondary"></i> | |
| Downtown location build-out | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-secondary"></i> | |
| Modular exhibit furniture | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-secondary"></i> | |
| Climate control systems | |
| </li> | |
| </ul> | |
| <div class="text-lg font-bold">$180,000</div> | |
| </div> | |
| <div class="interactive-card bg-[#16213E] p-8 rounded-2xl border border-[#2A3A6E]"> | |
| <div class="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-3xl text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Community Programs</h3> | |
| <ul class="space-y-2 text-gray-400 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-accent"></i> | |
| First year operational costs | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-accent"></i> | |
| Educational staff | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i class="fas fa-check text-xs text-accent"></i> | |
| Outreach initiatives | |
| </li> | |
| </ul> | |
| <div class="text-lg font-bold">$120,000</div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-2xl font-display font-bold mb-6">Total Funding Request</h3> | |
| <div class="text-5xl font-bold gradient-text mb-6">$550,000</div> | |
| <p class="text-gray-400 max-w-3xl mx-auto mb-8"> | |
| With your support, we can create a groundbreaking cultural space that redefines the relationship between technology and art while serving as a hub for community creativity. | |
| </p> | |
| <button class="bg-secondary hover:bg-opacity-90 text-white font-semibold px-12 py-4 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-secondary/30"> | |
| Support Our Vision | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24 artistic-bg"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-display font-bold mb-8"> | |
| The Future of Art is <span class="gradient-text">Collaborative</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-10"> | |
| Help us build a space where artificial intelligence serves as a brush in the hands of human creativity, where community participation creates masterpieces beyond any single imagination. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-white hover:bg-opacity-90 text-dark font-semibold px-10 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3"> | |
| <i class="fas fa-file-download"></i> Download Full Proposal | |
| </button> | |
| <button class="border border-white hover:bg-white hover:bg-opacity-10 text-white font-semibold px-10 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3"> | |
| <i class="fas fa-calendar-alt"></i> Schedule Meeting | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 md:px-12 lg:px-24 bg-dark border-t border-[#2A3A6E]"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-display font-bold gradient-text mb-6">Artistic Intelligence Gallery</h3> | |
| <p class="text-gray-400 mb-6"> | |
| Reimagining AI as a catalyst for authentic artistic expression and community engagement. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-[#16213E] flex items-center justify-center hover:bg-primary/20 transition-colors"> | |
| <i class="fab fa-twitter text-gray-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-[#16213E] flex items-center justify-center hover:bg-primary/20 transition-colors"> | |
| <i class="fab fa-instagram text-gray-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-[#16213E] flex items-center justify-center hover:bg-primary/20 transition-colors"> | |
| <i class="fab fa-linkedin-in text-gray-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-[#16213E] flex items-center justify-center hover:bg-primary/20 transition-colors"> | |
| <i class="fab fa-github text-gray-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white mb-6">Project</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Proposal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Timeline</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">White Paper</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white mb-6">Technology</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">AI Models</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Interactive Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Technical Stack</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Open Source</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white mb-6">Connect</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">[email protected]</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">+1 (555) 123-4567</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Press Inquiries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Partnerships</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-[#2A3A6E] mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Artistic Intelligence Gallery. All rights reserved. | |
| </div> | |
| <div class="flex gap-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">GDPR</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script for the interactive elements | |
| document.querySelectorAll('.interactive-card').forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; | |
| card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; | |
| }); | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transition = 'none'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transition = 'all 0.5s ease'; | |
| card.style.transform = 'rotateY(0deg) rotateX(0deg)'; | |
| }); | |
| }); | |
| // Simple animation for the tech stack chips | |
| const techStackItems = document.querySelectorAll('.font-mono'); | |
| techStackItems.forEach((item, index) => { | |
| item.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| </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://enzostvs-deepsite.hf.space/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://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GooGooPanda/aig" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |