Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>NeuralNomadAI — Creative AI Studio</title> | |
| <!-- Google fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind (utility) + local CSS --> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="font-display bg-hero-bg text-gray-100"> | |
| <!-- NAV --> | |
| <header class="site-header"> | |
| <div class="container nav-inner"> | |
| <div class="brand"> | |
| <div class="logo"></div> | |
| <span class="brand-name">NeuralNomadAI</span> | |
| </div> | |
| <nav class="nav-links" aria-label="Primary Navigation"> | |
| <a data-page="home" class="nav-link active">Home</a> | |
| <a data-page="services" class="nav-link">Services</a> | |
| <a data-page="portfolio" class="nav-link">Portfolio</a> | |
| <a data-page="pricing" class="nav-link">Pricing</a> | |
| <a data-page="contact" class="nav-link">Contact</a> | |
| </nav> | |
| <div class="nav-cta"> | |
| <button class="btn btn-outline">Login</button> | |
| <button class="btn btn-primary">Get Started</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- HERO --> | |
| <section id="home" class="hero-section"> | |
| <div class="hero-overlay"></div> | |
| <div class="container hero-inner"> | |
| <h1 class="hero-title">Unleash Your Creative Vision with AI</h1> | |
| <p class="hero-sub">NeuralNomadAI empowers creators with cutting-edge AI tools for imagery and automation, transforming ideas into stunning visuals and streamlined workflows.</p> | |
| <div class="hero-ctas"> | |
| <a href="#contact" class="btn btn-primary large">Get Started</a> | |
| <a href="#services" class="btn btn-muted large">Explore Features</a> | |
| </div> | |
| </div> | |
| </section> | |
| <main> | |
| <!-- QUICK PITCH --> | |
| <section class="container section section-compact text-center"> | |
| <h2 class="section-title">Quick Pitch</h2> | |
| <p class="lead">NeuralNomadAI offers a suite of AI-powered tools to generate images, automate workflows, and tailor models to your brand style — all with fast turnaround and commercial rights.</p> | |
| </section> | |
| <!-- VISUAL SHOWCASE --> | |
| <section class="container section"> | |
| <h2 class="section-title text-center">Visual Showcase</h2> | |
| <div class="grid-3 gap-large mt-8"> | |
| <article class="feature-card"> | |
| <img src="assets/showcase-1.jpg" alt="AI-powered sample 1" loading="lazy" /> | |
| <h3>AI-Powered Image Generation</h3> | |
| <p>Create stunning, unique visuals with our advanced AI image models.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <img src="assets/showcase-2.jpg" alt="AI-powered sample 2" loading="lazy" /> | |
| <h3>Automated Workflow Tools</h3> | |
| <p>Streamline your process with automated tasks and pipelines.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <img src="assets/showcase-3.jpg" alt="AI-powered sample 3" loading="lazy" /> | |
| <h3>Customizable AI Models</h3> | |
| <p>Tune models to match your artistic vision and brand voice.</p> | |
| </article> | |
| </div> | |
| <!-- large showcase banner --> | |
| <div class="showcase-banner mt-10"> | |
| <img src="assets/hero-showcase.jpg" alt="Large showcase" loading="lazy"/> | |
| <button class="play-btn" aria-label="Play showcase video">▶</button> | |
| </div> | |
| </section> | |
| <!-- TRUSTED / LOGOS --> | |
| <section class="container section"> | |
| <h3 class="section-title text-center">Trusted by Creators</h3> | |
| <div class="trusted-logos"> | |
| <div class="logo-circle"><img src="assets/logo1.png" alt="Company 1"/></div> | |
| <div class="logo-circle"><img src="assets/logo2.png" alt="Company 2"/></div> | |
| <div class="logo-circle"><img src="assets/logo3.png" alt="Company 3"/></div> | |
| <div class="logo-circle"><img src="assets/logo4.png" alt="Company 4"/></div> | |
| </div> | |
| </section> | |
| <!-- CTA BANNER --> | |
| <section class="cta-banner"> | |
| <div class="container"> | |
| <h3>Ready to Transform Your Creative Process?</h3> | |
| <a href="#contact" class="btn btn-primary">Get Started Today</a> | |
| </div> | |
| </section> | |
| <!-- CONTACT + FORM --> | |
| <section id="contact" class="container section grid-2 gap-large"> | |
| <div class="contact-card"> | |
| <h3>Hire Us on Fiverr</h3> | |
| <p>For standardized services and quick turnarounds, find us on Fiverr.</p> | |
| <a class="btn btn-primary" href="#" target="_blank" rel="noopener">Hire on Fiverr</a> | |
| <hr class="divider"/> | |
| <h3>Custom Requests</h3> | |
| <form id="contact-form" class="contact-form" novalidate> | |
| <label> | |
| <span>Your Name</span> | |
| <input name="name" type="text" placeholder="Enter your name" required> | |
| </label> | |
| <label> | |
| <span>Your Email</span> | |
| <input name="email" type="email" placeholder="Enter your email" required> | |
| </label> | |
| <label> | |
| <span>Subject</span> | |
| <input name="subject" type="text" placeholder="Enter the subject"> | |
| </label> | |
| <label> | |
| <span>Your Message</span> | |
| <textarea name="message" rows="6" placeholder="Enter your message" required></textarea> | |
| </label> | |
| <button type="submit" class="btn btn-primary full">Send Message</button> | |
| </form> | |
| </div> | |
| <aside class="contact-info"> | |
| <h3>Direct Contact & Info</h3> | |
| <div class="info-box"> | |
| <p><strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></p> | |
| <p><strong>Business Hours:</strong> Mon–Fri, 9 AM – 6 PM (GMT)</p> | |
| <p><strong>Availability:</strong> We are currently accepting new projects.</p> | |
| </div> | |
| <h4>Follow Us</h4> | |
| <div class="social-grid"> | |
| <a class="social">Twitter</a> | |
| <a class="social">Instagram</a> | |
| <a class="social">LinkedIn</a> | |
| </div> | |
| <h4>What Happens Next?</h4> | |
| <ol class="what-next"> | |
| <li><strong>Initial Contact:</strong> We review your message and reply within 24 hours.</li> | |
| <li><strong>Project Discussion:</strong> We schedule a call to discuss details.</li> | |
| <li><strong>Proposal & Quote:</strong> You receive a tailored proposal.</li> | |
| <li><strong>Kick-off:</strong> We start after approval and keep you updated.</li> | |
| </ol> | |
| </aside> | |
| </section> | |
| <!-- PRICING --> | |
| <section id="pricing" class="container section"> | |
| <h2 class="section-title text-center">Transparent Pricing</h2> | |
| <p class="lead text-center">Choose the plan that fits your creative needs. No hidden fees.</p> | |
| <div class="pricing-grid mt-8"> | |
| <div class="pricing-card"> | |
| <div class="price-top">Basic <span class="price-amount">$29<span class="price-unit">/month</span></span></div> | |
| <ul class="price-features"> | |
| <li>100 AI Image Credits</li> | |
| <li>Basic Image Editing Tools</li> | |
| <li>Community Support</li> | |
| </ul> | |
| <button class="btn btn-outline full">Choose Plan</button> | |
| </div> | |
| <div class="pricing-card featured"> | |
| <div class="ribbon">Popular</div> | |
| <div class="price-top">Pro <span class="price-amount">$99<span class="price-unit">/month</span></span></div> | |
| <ul class="price-features"> | |
| <li>Unlimited AI Image Credits</li> | |
| <li>Advanced Editing Tools</li> | |
| <li>Priority Support</li> | |
| </ul> | |
| <button class="btn btn-primary full">Choose Plan</button> | |
| </div> | |
| <div class="pricing-card"> | |
| <div class="price-top">Enterprise <span class="price-amount">Custom</span></div> | |
| <ul class="price-features"> | |
| <li>Custom Solutions</li> | |
| <li>Dedicated Account Manager</li> | |
| <li>Scalable Resources</li> | |
| </ul> | |
| <button class="btn btn-outline full">Contact Us</button> | |
| </div> | |
| </div> | |
| <div class="package-table mt-10"> | |
| <h4>Package Comparison</h4> | |
| <table> | |
| <thead> | |
| <tr><th>Feature</th><th>Basic</th><th>Pro</th><th>Enterprise</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>AI Image Credits</td><td>100</td><td>Unlimited</td><td>Custom</td></tr> | |
| <tr><td>Image Editing Tools</td><td>Basic</td><td>Advanced</td><td>Advanced</td></tr> | |
| <tr><td>Support</td><td>Community</td><td>Priority</td><td>Dedicated</td></tr> | |
| <tr><td>Delivery Time</td><td>Instant</td><td>Instant</td><td>Custom</td></tr> | |
| <tr><td>Commercial Use</td><td>No</td><td>Yes</td><td>Yes</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- TESTIMONIALS --> | |
| <section class="container section"> | |
| <h2 class="section-title text-center">What Our Clients Say</h2> | |
| <div class="testimonial-grid mt-8"> | |
| <blockquote class="testimonial"> | |
| <div class="avatar">SB</div> | |
| <div class="quote"> | |
| <strong>Sophia Bennett</strong> | |
| <p class="date">August 15, 2023</p> | |
| <p class="stars">★★★★★</p> | |
| <p class="text">"NeuralNomadAI transformed my creative process. The AI imagery is stunning, and the automation tools have saved me countless hours."</p> | |
| </div> | |
| </blockquote> | |
| <blockquote class="testimonial"> | |
| <div class="avatar">EC</div> | |
| <div class="quote"> | |
| <strong>Ethan Carter</strong> | |
| <p class="date">July 22, 2023</p> | |
| <p class="stars">★★★★★</p> | |
| <p class="text">"Exceptional service and results. NeuralNomadAI's AI tools are a game-changer for content creators."</p> | |
| </div> | |
| </blockquote> | |
| <blockquote class="testimonial"> | |
| <div class="avatar">OH</div> | |
| <div class="quote"> | |
| <strong>Olivia Hayes</strong> | |
| <p class="date">June 10, 2023</p> | |
| <p class="stars">★★★★★</p> | |
| <p class="text">"I'm blown away by the quality and efficiency of NeuralNomadAI. A must-have for any serious creator."</p> | |
| </div> | |
| </blockquote> | |
| </div> | |
| </section> | |
| <!-- ABOUT (brief) --> | |
| <section class="container section"> | |
| <h2 class="section-title text-center">About NeuralNomadAI</h2> | |
| <p class="lead text-center">We pioneer AI-driven creative solutions — blending art and technology to help creators scale and focus on what matters.</p> | |
| <div class="capability-grid mt-8"> | |
| <div class="cap-card"><h4>AI-Powered Imagery</h4><p>Generate stunning visuals with AI.</p></div> | |
| <div class="cap-card"><h4>Automation Tools</h4><p>Automate repetitive tasks for efficiency.</p></div> | |
| <div class="cap-card"><h4>Creative Solutions</h4><p>Tailored solutions for diverse needs.</p></div> | |
| <div class="cap-card"><h4>Rapid Turnaround</h4><p>Fast delivery without compromising quality.</p></div> | |
| </div> | |
| </section> | |
| <!-- PORTFOLIO --> | |
| <section id="portfolio" class="container section"> | |
| <h2 class="section-title">Featured Work</h2> | |
| <p class="lead">Explore our portfolio of AI-driven projects.</p> | |
| <div class="portfolio-grid mt-8"> | |
| <div class="portfolio-item"><img src="assets/portfolio-1.jpg" alt=""><h4>AI-Enhanced Photography</h4></div> | |
| <div class="portfolio-item"><img src="assets/portfolio-2.jpg" alt=""><h4>Automated Content Creation</h4></div> | |
| <div class="portfolio-item"><img src="assets/portfolio-3.jpg" alt=""><h4>Personalized Marketing</h4></div> | |
| <div class="portfolio-item"><img src="assets/portfolio-4.jpg" alt=""><h4>Design Tools</h4></div> | |
| <div class="portfolio-item"><img src="assets/portfolio-5.jpg" alt=""><h4>Interactive Installations</h4></div> | |
| <div class="portfolio-item"><img src="assets/portfolio-6.jpg" alt=""><h4>Data Visualization</h4></div> | |
| </div> | |
| <div class="pagination mt-8">‹ <span class="page active">1</span> 2 3 ›</div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <div class="container"> | |
| <div class="footer-row"> | |
| <div>© 2025 NeuralNomadAI. All rights reserved.</div> | |
| <div class="footer-links"> | |
| <a>Terms of Service</a> | |
| <a>Privacy Policy</a> | |
| <a>Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Optional small JS for simple navigation & form --> | |
| <script> | |
| // Simple single-page switching using data-page attributes | |
| (function() { | |
| const links = document.querySelectorAll('.nav-link'); | |
| const pages = document.querySelectorAll('.page-content'); // not used here — we use anchors instead | |
| function setActive(link) { | |
| links.forEach(l => l.classList.remove('active')); | |
| link.classList.add('active'); | |
| } | |
| links.forEach(l => { | |
| l.addEventListener('click', (e) => { | |
| links.forEach(x=>x.classList.remove('active')); | |
| l.classList.add('active'); | |
| }); | |
| }); | |
| // Contact form simple handler | |
| const form = document.getElementById('contact-form'); | |
| form?.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Thanks! Your message was received (this demo does not send emails).'); | |
| form.reset(); | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |