Hugging Face's logo

Spaces:
oldmonk69
/
gemini-ui-redesign
Running

App Files Community
12
gemini-ui-redesign / index.html
oldmonk69's picture
oldmonk69
Update index.html (#8)
fee1b9f verified
raw
history blame
28.7 kB
 <!-- =========================================================
# File: index.html
# NeuralNomadAI — Fully Developed Website (HTML + CSS + JS)
# Features:
# - Mobile-first responsive layout (Tailwind via CDN)
# - Accessible navigation + keyboard support
# - Dark mode with localStorage
# - Section router + hash-based nav + scroll spy
# - Portfolio filter + image lightbox
# - Pricing table
# - Testimonials
# - Contact form (Formspree) with client-side validation
# - SEO meta tags, Open Graph, JSON-LD schema
# - Lazy-loading images, reduced motion support
# ========================================================= -->
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NeuralNomadAI — AI Imagery & Creative Automation</title>
<!-- SEO -->
<meta name="description" content="NeuralNomadAI crafts stunning AI-generated visuals, prompt engineering, and creative automation for creators, brands, and marketers." />
<meta name="keywords" content="AI images, prompt engineering, creative automation, Stable Diffusion, Midjourney, DALL·E, brand assets" />
<link rel="canonical" href="https://example.com/" />
<!-- Open Graph -->
<meta property="og:title" content="NeuralNomadAI — AI Imagery & Creative Automation" />
<meta property="og:description" content="Get stunning AI images, documented prompts, and automation. Fast turnaround, unlimited revisions." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="NeuralNomadAI — AI Imagery & Creative Automation" />
<meta name="twitter:description" content="Get stunning AI images, documented prompts, and automation. Fast turnaround, unlimited revisions." />
<meta name="twitter:image" content="https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop" />
<!-- Favicon (replace with your own) -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Ctext y='1em' font-size='96'%3E🤖%3C/text%3E%3C/svg%3E">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
<!-- Tailwind (CDN) -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { display: ['Space Grotesk', 'system-ui', 'ui-sans-serif', 'sans-serif'] },
colors: {
primary: '#1193d4',
bgLight: '#f6f7f8',
bgDark: '#0c1418'
},
boxShadow: {
soft: '0 8px 30px rgba(2, 12, 27, 0.08)'
}
}
}
};
</script>
<!-- Base styles -->
<link rel="stylesheet" href="styles.css" />
<!-- Prefers reduced motion -->
<style>
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
</style>
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"ProfessionalService",
"name":"NeuralNomadAI",
"url":"https://example.com/",
"description":"AI image generation, prompt engineering, and creative automation.",
"areaServed":"Worldwide",
"image":"https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop",
"sameAs": ["https://www.instagram.com/","https://www.linkedin.com/","https://www.fiverr.com/"],
"offers": { "@type":"Offer","priceCurrency":"USD","availability":"https://schema.org/InStock" }
}
</script>
</head>
<body class="bg-bgLight text-slate-800 dark:bg-bgDark dark:text-slate-200 font-display">
<!-- Theme Boot: prevent flash -->
<script>
(function(){
const ls = localStorage.getItem('nnai-theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (ls === 'dark' || (!ls && prefersDark)) document.documentElement.classList.add('dark');
})();
</script>
<!-- Header -->
<header class="sticky top-0 z-50 backdrop-blur bg-bgLight/80 dark:bg-bgDark/80 border-b border-slate-200/60 dark:border-slate-700/50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<a href="#home" class="flex items-center gap-3 group" data-route>
<svg width="32" height="32" viewBox="0 0 48 48" class="text-primary group-hover:scale-105 transition" aria-hidden="true">
<path fill="currentColor" d="M39.6 34.1V13.9c0 1.9-2.7 3.5-6.8 4.5-2.5.6-5.5 1-8.8 1s-6.3-.4-8.8-1c-4.1-1-6.8-2.6-6.8-4.5v20.3c0 1.9 2.7 3.5 6.8 4.5 2.5.6 5.5 1 8.8 1s6.3-.4 8.8-1c4.1-1 6.8-2.6 6.8-4.5z"/>
</svg>
<span class="text-lg font-bold">NeuralNomadAI</span>
</a>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-6" aria-label="Primary">
<a class="nav-link" href="#home" data-route>Home</a>
<a class="nav-link" href="#services" data-route>Services</a>
<a class="nav-link" href="#portfolio" data-route>Portfolio</a>
<a class="nav-link" href="#pricing" data-route>Pricing</a>
<a class="nav-link" href="#testimonials" data-route>Testimonials</a>
<a class="nav-link" href="#about" data-route>About</a>
<a class="nav-link" href="#contact" data-route>Contact</a>
</nav>
<div class="flex items-center gap-3">
<button id="themeToggle" class="rounded-full p-2 hover:bg-slate-200/60 dark:hover:bg-slate-700/40" aria-label="Toggle dark mode">
<span class="sr-only">Toggle theme</span>
<svg class="h-5 w-5 hidden dark:block" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.64 13A9 9 0 1111 2.36 7 7 0 0021.64 13z"/></svg>
<svg class="h-5 w-5 dark:hidden" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.79 1.8-1.79zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.03 2.03l1.79-1.79-1.79-1.79-1.79 1.79 1.79 1.79zM20 11v2h3v-2h-3zm-8 9h2v3h-2v-3zM4.22 18.36l-1.79 1.79 1.79 1.79 1.79-1.79-1.79-1.79zM17.24 19.16l1.79 1.79 1.79-1.79-1.79-1.79-1.79 1.79z"/></svg>
</button>
<a href="#contact" data-route class="hidden sm:inline-block rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white shadow hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">Get Started</a>
<!-- Mobile menu -->
<button id="menuBtn" class="md:hidden p-2 rounded hover:bg-slate-200/60 dark:hover:bg-slate-700/40" aria-expanded="false" aria-controls="mobileMenu" aria-label="Toggle menu">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>
</button>
</div>
</div>
<!-- Mobile Drawer -->
<div id="mobileMenu" class="md:hidden hidden border-t border-slate-200 dark:border-slate-700">
<nav class="px-4 py-2 flex flex-col gap-1" aria-label="Mobile">
<a class="mobile-link" href="#home" data-route>Home</a>
<a class="mobile-link" href="#services" data-route>Services</a>
<a class="mobile-link" href="#portfolio" data-route>Portfolio</a>
<a class="mobile-link" href="#pricing" data-route>Pricing</a>
<a class="mobile-link" href="#testimonials" data-route>Testimonials</a>
<a class="mobile-link" href="#about" data-route>About</a>
<a class="mobile-link" href="#contact" data-route>Contact</a>
</nav>
</div>
</header>
<main id="app" class="min-h-[70vh]">
<!-- ======================== HOME ======================== -->
<section id="home" class="section pt-12 sm:pt-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-2xl shadow-soft">
<img
src="https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop"
alt="Abstract neural aesthetic"
class="w-full aspect-[16/7] object-cover"
loading="lazy"
/>
<div class="absolute inset-0 bg-black/50 backdrop-blur-[1px]"></div>
<div class="absolute inset-0 flex items-center justify-center text-center p-6">
<div class="max-w-3xl text-white">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">Get Stunning AI Images That Match Your Brief — Fast</h1>
<p class="mt-4 text-lg opacity-90">AI-powered visuals, custom prompts & creative automation — delivered with unlimited revisions until you’re thrilled.</p>
<div class="mt-6 flex flex-wrap justify-center gap-3">
<a href="https://formspree.io/f/your-id" class="btn-primary" rel="noopener">🔥 Hire on Fiverr →</a>
<a href="#portfolio" data-route class="btn-secondary">View Portfolio →</a>
</div>
</div>
</div>
</div>
<!-- Trust row -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-center mt-10">
<div class="pill">✓ 5-Star Rated</div>
<div class="pill">✓ 100+ Projects</div>
<div class="pill">✓ 24-48 Hour Delivery</div>
<div class="pill">✓ Unlimited Revisions</div>
<div class="pill col-span-2 md:col-span-1">✓ Commercial License</div>
</div>
<!-- Mini showcase -->
<div class="py-16">
<h2 class="h2 text-center">Visual Showcase</h2>
<div class="mt-10 grid gap-6 md:grid-cols-3">
<button class="gallery-card" data-lightbox="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1600&auto=format&fit=crop" aria-label="Open Fantasy Landscape">
<img class="gallery-img" alt="AI Illustration — Fantasy Landscape" loading="lazy"
src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1200&auto=format&fit=crop" />
<span class="gallery-caption">AI Illustration — Fantasy Landscape</span>
</button>
<button class="gallery-card" data-lightbox="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop" aria-label="Open Product Mockup">
<img class="gallery-img" alt="Product Photography Mockup" loading="lazy"
src="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1200&auto=format&fit=crop" />
<span class="gallery-caption">Product Photography — Tech Device</span>
</button>
<button class="gallery-card" data-lightbox="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?q=80&w=1600&auto=format&fit=crop" aria-label="Open Brand Assets">
<img class="gallery-img" alt="Brand Asset Pack" loading="lazy"
src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?q=80&w=1200&auto=format&fit=crop" />
<span class="gallery-caption">Brand Asset Pack — Logo Variations</span>
</button>
</div>
<div class="callout mt-12 text-center">
<h3 class="h3">Fast & Reliable. Perfectly Tailored. Full Commercial Rights.</h3>
<p class="mt-2 opacity-80">Based in UAE timezone (GST) with responsive support and clear revisions.</p>
<a href="#services" data-route class="btn-primary mt-5">View Services & Packages</a>
</div>
</div>
</div>
</section>
<!-- ======================== SERVICES ======================== -->
<section id="services" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">Services & Packages</h2>
<p class="mt-3 text-lg opacity-80">Choose the perfect package. Every gig includes unlimited revisions and commercial licensing.</p>
</div>
<div class="grid gap-6 lg:grid-cols-2 mt-12">
<!-- Cards -->
<article class="card">
<h3 class="h4">Custom AI Image Generation</h3>
<p>Create stunning, unique AI images tailored to your brief. Ideal for marketing, social, product visuals, and concepting.</p>
<a class="link-chip" href="https://formspree.io/f/your-id">Hire on Fiverr →</a>
</article>
<article class="card">
<h3 class="h4">Professional Prompt Engineering</h3>
<p>Get expertly crafted prompts that generate exactly what you envision—repeatable and documented.</p>
<a class="link-chip" href="https://formspree.io/f/your-id">Hire on Fiverr →</a>
</article>
<article class="card">
<h3 class="h4">AI-Powered Image Transformations</h3>
<p>Elevate existing images with style transfers, background changes, upscaling, and enhancements.</p>
<a class="link-chip" href="https://formspree.io/f/your-id">Hire on Fiverr →</a>
</article>
<article class="card">
<h3 class="h4">Complete AI Brand Asset Packages</h3>
<p>Build a cohesive visual identity: logos, icons, social templates, and more—matched to your aesthetic.</p>
<a class="link-chip" href="https://formspree.io/f/your-id">Hire on Fiverr →</a>
</article>
<article class="card lg:col-span-2">
<h3 class="h4">Custom AI Workflow Automation</h3>
<p>Stop repetitive tasks. We’ll build custom automation that generates images, processes content, and scales output.</p>
<a class="link-chip" href="#contact" data-route>Contact for Custom Quote →</a>
</article>
</div>
<!-- Prompt Ideator (client-side only, mock) -->
<div class="mt-16 text-center">
<h3 class="h3">✨ AI Prompt Ideator</h3>
<p class="opacity-80">Have an idea? Expand it into a rich, detailed prompt (client-side demo).</p>
<div class="mt-6 flex flex-col sm:flex-row gap-3 max-w-xl mx-auto">
<input id="promptInput" class="input" type="text" placeholder="e.g., a cat astronaut on Mars" autocomplete="off" />
<button id="promptBtn" class="btn-primary">Generate Prompt</button>
</div>
<output id="promptOut" class="mt-4 hidden p-4 bg-primary/10 dark:bg-primary/20 rounded text-left whitespace-pre-wrap"></output>
</div>
</div>
</section>
<!-- ======================== PORTFOLIO ======================== -->
<section id="portfolio" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">Featured Work</h2>
<p class="mt-3 opacity-80">Real projects. Real results. See what NeuralNomadAI can create for you.</p>
</div>
<!-- Filters -->
<div class="mt-8 flex flex-wrap gap-2 justify-center">
<button class="filter-chip active" data-filter="*">All</button>
<button class="filter-chip" data-filter="illustration">Illustration</button>
<button class="filter-chip" data-filter="photoreal">Photoreal</button>
<button class="filter-chip" data-filter="logo">Logo/Icon</button>
<button class="filter-chip" data-filter="ui">UI Mockups</button>
</div>
<!-- Grid -->
<div id="portfolioGrid" class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Item -->
<button class="portfolio-card" data-cat="illustration" data-lightbox="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=1600&auto=format&fit=crop" aria-label="Fantasy Character Set">
<img alt="Fantasy Game Character Set" loading="lazy"
src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">Fantasy Game Character Set</h3>
<p class="text-sm opacity-80">Complete character design for an indie game.</p>
</div>
</button>
<button class="portfolio-card" data-cat="photoreal" data-lightbox="https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1600&auto=format&fit=crop" aria-label="E-commerce Product Photos">
<img alt="E-commerce Product Photos" loading="lazy"
src="https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">E-commerce Product Photos</h3>
<p class="text-sm opacity-80">Photorealistic product shots for Shopify.</p>
</div>
</button>
<button class="portfolio-card" data-cat="logo" data-lightbox="https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=1600&auto=format&fit=crop" aria-label="Tech Startup Brand Kit">
<img alt="Tech Startup Brand Kit" loading="lazy"
src="https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">Tech Startup Brand Kit</h3>
<p class="text-sm opacity-80">Complete logo + identity system.</p>
</div>
</button>
<button class="portfolio-card" data-cat="ui" data-lightbox="https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=1600&auto=format&fit=crop" aria-label="SaaS UI Mockups">
<img alt="SaaS UI Mockups" loading="lazy"
src="https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">SaaS UI Mockups</h3>
<p class="text-sm opacity-80">Dashboard + onboarding visuals.</p>
</div>
</button>
<button class="portfolio-card" data-cat="illustration" data-lightbox="https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=1600&auto=format&fit=crop" aria-label="Editorial Illustration Pack">
<img alt="Editorial Illustration" loading="lazy"
src="https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">Editorial Illustration Pack</h3>
<p class="text-sm opacity-80">Magazine-friendly art direction.</p>
</div>
</button>
<button class="portfolio-card" data-cat="photoreal" data-lightbox="https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=1600&auto=format&fit=crop" aria-label="Lifestyle Photos">
<img alt="Lifestyle Photos" loading="lazy"
src="https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=1200&auto=format&fit=crop" />
<div class="p-3">
<h3 class="font-semibold">Lifestyle Photos</h3>
<p class="text-sm opacity-80">Brand-consistent live sets.</p>
</div>
</button>
</div>
</div>
</section>
<!-- ======================== PRICING ======================== -->
<section id="pricing" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">Transparent Pricing, Exceptional Value</h2>
<p class="mt-3 opacity-80">Pick a tier that matches your project. Unlimited revisions, commercial license across the board.</p>
</div>
<div class="overflow-x-auto mt-10">
<table class="w-full min-w-[720px] border-separate border-spacing-0 rounded-xl overflow-hidden">
<thead>
<tr class="bg-primary/10 dark:bg-primary/20">
<th class="th">Package Tier</th>
<th class="th text-center">Basic</th>
<th class="th text-center">Standard</th>
<th class="th text-center">Premium</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
<tr><td class="td-section" colspan="4">Deliverables</td></tr>
<tr><td class="td">Image Count</td><td class="td text-center">3–5</td><td class="td text-center">10–15</td><td class="td text-center">20–30</td></tr>
<tr><td class="td">Resolution</td><td class="td text-center">Up to 2K</td><td class="td text-center">Up to 4K</td><td class="td text-center">Up to 8K</td></tr>
<tr><td class="td-section" colspan="4">Included</td></tr>
<tr><td class="td">Commercial License</td><td class="td text-center">✓</td><td class="td text-center">✓</td><td class="td text-center">✓</td></tr>
<tr><td class="td">Unlimited Revisions</td><td class="td text-center">✓</td><td class="td text-center">✓</td><td class="td text-center">✓</td></tr>
<tr><td class="td">Prompt Documentation</td><td class="td text-center">—</td><td class="td text-center">✓</td><td class="td text-center">✓</td></tr>
<tr><td class="td-section" colspan="4">Delivery & Support</td></tr>
<tr><td class="td">Turnaround Time</td><td class="td text-center">48–72h</td><td class="td text-center">24–48h</td><td class="td text-center">24h</td></tr>
<tr><td class="td">Priority Support</td><td class="td text-center">—</td><td class="td text-center">—</td><td class="td text-center">✓</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ======================== TESTIMONIALS ======================== -->
<section id="testimonials" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">What Clients Say</h2>
<p class="mt-3 opacity-80">Real feedback from real projects. Your success is the north star.</p>
</div>
<div class="grid gap-6 md:grid-cols-3 mt-10">
<blockquote class="quote">
<p>“NeuralNomadAI delivered exactly what I envisioned—faster than expected. Unlimited revisions got us to perfect.”</p>
<footer>— Sarah M., Marketing Director</footer>
</blockquote>
<blockquote class="quote">
<p>“First time someone truly nailed our brand aesthetic. Prompt docs help us reproduce the style. Worth it.”</p>
<footer>— James K., E-commerce Founder</footer>
</blockquote>
<blockquote class="quote">
<p>“The automation tool saves me 10+ hours every week. Absolute game-changer for content ops.”</p>
<footer>— Lisa R., Creator</footer>
</blockquote>
</div>
</div>
</section>
<!-- ======================== ABOUT ======================== -->
<section id="about" class="section">
<div class="container">
<div class="grid gap-10 lg:grid-cols-2 items-start">
<div>
<h2 class="h2">About NeuralNomadAI</h2>
<p class="mt-3 opacity-80">Where creativity shakes hands with cutting-edge AI. We craft custom imagery and automations that help brands stand out without breaking the laws of time or budget.</p>
<div class="grid mt-8 gap-4 sm:grid-cols-2">
<div class="about-card">
<h3 class="font-bold">AI Image Generation</h3>
<p class="text-sm opacity-80">Precision prompts across Midjourney, DALL·E, and Stable Diffusion.</p>
</div>
<div class="about-card">
<h3 class="font-bold">Style Adaptation</h3>
<p class="text-sm opacity-80">Photoreal, illustrative—any aesthetic, faithfully reproduced.</p>
</div>
<div class="about-card">
<h3 class="font-bold">Technical Excellence</h3>
<p class="text-sm opacity-80">High-res outputs and production-ready assets.</p>
</div>
<div class="about-card">
<h3 class="font-bold">Workflow Automation</h3>
<p class="text-sm opacity-80">Custom tooling to scale content production.</p>
</div>
</div>
</div>
<div class="relative">
<img class="rounded-xl shadow-soft" alt="Studio mood board"
src="https://images.unsplash.com/photo-1524145949-2e0ff4e04f68?q=80&w=1400&auto=format&fit=crop" loading="lazy" />
</div>
</div>
</div>
</section>
<!-- ======================== CONTACT ======================== -->
<section id="contact" class="section">
<div class="container">
<div class="text-center max-w-2xl mx-auto">
<h2 class="h2">Let’s Build Something Amazing</h2>
<p class="mt-3 opacity-80">Fastest path: hire on Fiverr. For custom projects, send a message below.</p>
<div class="mt-5">
<a href="https://formspree.io/f/your-id" class="btn-primary" rel="noopener">🔥 Browse My Fiverr Gigs →</a>
</div>
</div>
<form id="contactForm" class="mt-10 max-w-2xl mx-auto grid gap-4" action="https://formspree.io/f/your-id" method="POST" novalidate>
<div>
<label class="label" for="name">Name</label>
<input class="input" id="name" name="name" required autocomplete="name" />
</div>
<div>
<label class="label" for="email">Email</label>
<input class="input" id="email" name="email" type="email" required autocomplete="email" />
</div>
<div>
<label class="label" for="message">Project Brief</label>
<textarea class="input min-h-[140px]" id="message" name="message" required placeholder="Tell me about your goals, audience, visual style, and deliverables."></textarea>
</div>
<fieldset class="mt-2">
<legend class="label">Budget (USD)</legend>
<div class="flex flex-wrap gap-2 mt-2">
<label class="chip"><input type="radio" name="budget" value="500-1000" required /> <span>$500–$1k</span></label>
<label class="chip"><input type="radio" name="budget" value="1000-2500" /> <span>$1k–$2.5k</span></label>
<label class="chip"><input type="radio" name="budget" value="2500-5000" /> <span>$2.5k–$5k</span></label>
<label class="chip"><input type="radio" name="budget" value="5000+" /> <span>$5k+</span></label>
</div>
</fieldset>
<div class="flex items-center gap-3">
<button class="btn-primary" type="submit">Send Message</button>
<p id="formMsg" class="text-sm"></p>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200/60 dark:border-slate-700/50">
<div class="container py-10 text-center">
<nav class="flex items-center justify-center gap-5">
<a class="link muted" href="https://formspree.io/f/your-id" rel="noopener">Fiverr</a>
<a class="link muted" href="https://www.linkedin.com/" rel="noopener">LinkedIn</a>
<a class="link muted" href="https://www.instagram.com/" rel="noopener">Instagram</a>
</nav>
<p class="text-xs opacity-70 mt-4">© 2024–2025 NeuralNomadAI. All rights reserved.</p>
<p class="text-xs opacity-60">Client files remain strictly confidential. Work appears in portfolio only with explicit permission.</p>
</div>
</footer>
<!-- Lightbox Modal -->
<dialog id="lightbox" class="rounded-xl p-0 backdrop:bg-black/60">
<button id="lightboxClose" class="absolute top-3 right-3 bg-black/60 text-white rounded-full p-2" aria-label="Close image">
✕
</button>
<img id="lightboxImg" class="max-h-[90vh] w-auto object-contain rounded-xl" alt="Enlarged work sample" />
</dialog>
<!-- App Scripts -->
<script src="script.js" defer></script>
</body>
</html>