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
1668438 verified
raw
history blame
26.4 kB
 <!-- =========================================================
# File: index.html
# NeuralNomadAI — Conversion-Focused Portfolio (per Google Sites draft)
# ========================================================= -->
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SEO (Home) -->
<title>NeuralNomadAI | Creative AI Imagery & Automation Tools</title>
<meta name="description" content="Get stunning AI images, custom prompts, and creative automation tools delivered in 24–72 hours. Top-rated AI services on Fiverr." />
<!-- Open Graph -->
<meta property="og:title" content="NeuralNomadAI — Creative AI Imagery & Automation Tools" />
<meta property="og:description" content="AI images, custom prompts, and automation tools—delivered in 24–72h. View portfolio and hire on Fiverr." />
<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 — Creative AI Imagery & Automation Tools" />
<meta name="twitter:description" content="Get stunning AI images, custom prompts, and automation tools—delivered in 24–72h." />
<meta name="twitter:image" content="https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop" />
<link rel="canonical" href="https://example.com/" />
<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,.08)' }
}
}
}
</script>
<link rel="stylesheet" href="styles.css" />
<style>
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
</style>
<!-- JSON-LD -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"ProfessionalService",
"name":"NeuralNomadAI",
"url":"https://example.com/",
"description":"Creative AI imagery, prompt engineering, and automation tools for creators and brands.",
"areaServed":"Worldwide",
"sameAs":["https://www.instagram.com/","https://www.linkedin.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">
<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" data-route class="flex items-center gap-3 group">
<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>
<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 & Pricing</a>
<a class="nav-link" href="#portfolio" data-route>Portfolio</a>
<a class="nav-link" href="#reviews" data-route>Trust & Reviews</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"><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"><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 class="hidden sm:inline-block rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white shadow hover:opacity-90 focus-visible:ring-2 focus-visible:ring-primary"
href="FIVERR_PROFILE_URL_HERE" rel="noopener">Hire on Fiverr</a>
<!-- Mobile toggle -->
<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>
<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">
<a class="mobile-link" href="#home" data-route>Home</a>
<a class="mobile-link" href="#services" data-route>Services & Pricing</a>
<a class="mobile-link" href="#portfolio" data-route>Portfolio</a>
<a class="mobile-link" href="#reviews" data-route>Trust & Reviews</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="container">
<!-- Hero with Slider -->
<div class="relative overflow-hidden rounded-2xl shadow-soft">
<div class="slider" aria-roledescription="carousel">
<!-- Slides (replace with your outputs/video) -->
<div class="slide is-active">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1600&auto=format&fit=crop" alt="Showcase image 1" loading="eager" class="w-full aspect-[16/7] object-cover">
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?q=80&w=1600&auto=format&fit=crop" alt="Showcase image 2" loading="lazy" class="w-full aspect-[16/7] object-cover">
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop" alt="Showcase image 3" loading="lazy" class="w-full aspect-[16/7] object-cover">
</div>
<!-- Optional demo video button -->
<a href="DEMO_VIDEO_MP4_URL_HERE" class="demo-pill" aria-label="Watch short demo video">▶ Demo Video</a>
</div>
<div class="absolute inset-0 bg-black/45"></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">Creative imagery & automation tools for bold creators</h1>
<p class="mt-4 text-lg opacity-90">
AI images, custom prompts, brand asset packs, and creator automation tools — delivered in 24–72 hours.
We transform your concepts into commercial-ready visuals that convert.
</p>
<div class="mt-6 flex flex-wrap justify-center gap-3">
<a href="FIVERR_PROFILE_URL_HERE" class="btn-primary">Hire on Fiverr</a>
<a href="#portfolio" data-route class="btn-secondary">View Portfolio</a>
</div>
</div>
</div>
<!-- Slider controls -->
<button class="slider-btn prev" aria-label="Previous slide">‹</button>
<button class="slider-btn next" aria-label="Next slide">›</button>
</div>
<!-- Trust badges -->
<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">⚡ 24–72h Delivery</div>
<div class="pill">🎯 Commercial License</div>
<div class="pill">💬 Fast Communication</div>
<div class="pill">📦 100+ Projects</div>
</div>
</div>
</section>
<!-- ======================== SERVICES & PRICING ======================== -->
<section id="services" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">AI Imagery and Automation Gigs</h2>
<p class="mt-3 text-lg opacity-80">Explore our core Fiverr services: AI image creation, prompt engineering, brand assets, and custom automation scripts.</p>
</div>
<div class="grid gap-6 lg:grid-cols-2 mt-12">
<!-- Gig 1 -->
<article class="card">
<h3 class="h4">Bespoke AI Image Creation</h3>
<p>Get stunning, commercially-licensed visuals tailored exactly to your brief. Perfect for product mockups, blog posts, or social media.</p>
<ul class="list mt-3">
<li><strong>Deliverables:</strong> High-res images, revisions, commercial use license.</li>
<li><strong>Turnaround:</strong> <span class="muted">[Hours (Basic)]</span></li>
<li><strong>Price Range:</strong> <span class="muted">[$ .. $]</span></li>
</ul>
</article>
<!-- Gig 2 -->
<article class="card">
<h3 class="h4">Prompt Engineering & Tuning</h3>
<p>Need a custom AI “voice” for your brand? We design and test highly effective prompts that produce consistent results.</p>
<ul class="list mt-3">
<li><strong>Deliverables:</strong> Master prompts, test runs, style guide snippet.</li>
<li><strong>Turnaround:</strong> <span class="muted">[Hours]</span></li>
<li><strong>Price Range:</strong> <span class="muted">[$ .. $]</span></li>
</ul>
</article>
<!-- Gig 3 -->
<article class="card">
<h3 class="h4">Image-to-Image Edits & Refining</h3>
<p>Breathe new life into existing images. Use AI to remix, upscale, style-transfer, or add elements seamlessly.</p>
<ul class="list mt-3">
<li><strong>Deliverables:</strong> Refined images, revisions, upscaled file.</li>
<li><strong>Turnaround:</strong> <span class="muted">[Hours]</span></li>
<li><strong>Price Range:</strong> <span class="muted">[$ .. $]</span></li>
</ul>
</article>
<!-- Gig 4 -->
<article class="card">
<h3 class="h4">Automation & Creator Tooling</h3>
<p>Custom scripts (e.g., batching, templating) to automate your content pipeline, data processing, or creative workflow.</p>
<ul class="list mt-3">
<li><strong>Deliverables:</strong> Custom script, walkthrough video, <span class="muted">[x]</span>-day support.</li>
<li><strong>Turnaround:</strong> <span class="muted">[1 Week+]</span></li>
<li><strong>Price Range:</strong> <span class="muted">[$ .. $]</span></li>
</ul>
</article>
</div>
<!-- Pricing Snapshot table -->
<div class="overflow-x-auto mt-12">
<h3 class="h3 text-center">Pricing Snapshot</h3>
<table class="w-full min-w-[760px] border-separate border-spacing-0 rounded-xl overflow-hidden mt-6">
<thead>
<tr class="bg-primary/10 dark:bg-primary/20">
<th class="th">Tier</th>
<th class="th">Includes</th>
<th class="th">Delivery</th>
<th class="th">Starting Price</th>
<th class="th">Fiverr Link</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
<tr>
<td class="td font-semibold">Basic</td>
<td class="td">1 Concept, <span class="muted">[x]</span> Revisions, <span class="muted">[y]</span> Images</td>
<td class="td"><span class="muted">[Hours]</span></td>
<td class="td"><span class="muted">[$]</span></td>
<td class="td"><a class="link" href="FIVERR_GIG_URL_BASIC">Open on Fiverr →</a></td>
</tr>
<tr>
<td class="td font-semibold">Standard</td>
<td class="td">2 Concepts, <span class="muted">[x]</span> Revisions, <span class="muted">[y]</span> Images, Custom Prompt</td>
<td class="td"><span class="muted">[Hours]</span></td>
<td class="td"><span class="muted">[$$]</span></td>
<td class="td"><a class="link" href="FIVERR_GIG_URL_STANDARD">Open on Fiverr →</a></td>
</tr>
<tr>
<td class="td font-semibold">Premium</td>
<td class="td">Full Brand Asset Pack, Unlimited Revisions, Source File (Prompt), Automation Option</td>
<td class="td"><span class="muted">[Hours]</span></td>
<td class="td"><span class="muted">[$$$]</span></td>
<td class="td"><a class="link" href="FIVERR_GIG_URL_PREMIUM">Open on Fiverr →</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ======================== PORTFOLIO ======================== -->
<section id="portfolio" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">AI Art Portfolio</h2>
<p class="mt-3 opacity-80">Illustration, photorealistic design, and logo/icon generation.</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/Icon">Logo/Icon</button>
<button class="filter-chip" data-filter="UI Mockups">UI Mockups</button>
</div>
<!-- Grid -->
<div id="portfolioGrid" class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Project 1 -->
<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="Neo-Tokyo Skyscraper">
<img alt="Neo-Tokyo Skyscraper — atmospheric concept art" 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">Neo-Tokyo Skyscraper</h3>
<p class="text-sm opacity-80">Atmospheric concept art for a cyberpunk game pitch. Tools: MJ v6.</p>
<a href="FIVERR_GIG_REF_ILLUSTRATION" class="link text-sm">Referenced Gig: Brand Asset Packs →</a>
</div>
</button>
<!-- Project 2 -->
<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="Vintage Product Shoot">
<img alt="Luxury watch photoreal render" 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">Vintage Product Shoot</h3>
<p class="text-sm opacity-80">High-fidelity photoreal render for an e-commerce brand. Tools: SD, MJ.</p>
<a href="FIVERR_GIG_REF_PHOTOREAL" class="link text-sm">View Gig →</a>
</div>
</button>
<!-- Project 3 -->
<button class="portfolio-card" data-cat="Logo/Icon" data-lightbox="https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=1600&auto=format&fit=crop" aria-label="Minimalist Financial Icon Set">
<img alt="Minimalist financial icon set" 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">Minimalist Financial Icon Set</h3>
<p class="text-sm opacity-80">Clean, vector-ready icons for a fintech mobile app. Tools: SD, Illustrator.</p>
<a href="FIVERR_GIG_REF_LOGO" class="link text-sm">View Gig →</a>
</div>
</button>
<!-- Project 4 -->
<button class="portfolio-card" data-cat="UI Mockups" data-lightbox="https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=1600&auto=format&fit=crop" aria-label="App Dark Mode Concept">
<img alt="Dark mode UI concept 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">App Dark Mode Concept</h3>
<p class="text-sm opacity-80">AI-generated UI to visualize a dark-mode transition. Tools: MJ v5.2, Figma.</p>
<a href="FIVERR_GIG_REF_UI" class="link text-sm">View Gig →</a>
</div>
</button>
</div>
</div>
</section>
<!-- ======================== TRUST & REVIEWS ======================== -->
<section id="reviews" class="section">
<div class="container">
<div class="text-center max-w-3xl mx-auto">
<h2 class="h2">Client Reviews & Trust Signals</h2>
<p class="mt-3 opacity-80">5-star rated seller for AI content. Here’s what clients say.</p>
</div>
<div class="grid gap-6 md:grid-cols-3 mt-10">
<blockquote class="quote">
<p>“The speed and quality were unmatched. NeuralNomadAI captured the exact mood I needed for my new book cover. Highly recommend!”</p>
<footer>— Sarah M. (Book Author)</footer>
</blockquote>
<blockquote class="quote">
<p>“Game-changer for our marketing. The custom prompts they engineered now save us hours a week on social content.”</p>
<footer>— David P. (Marketing Agency Lead)</footer>
</blockquote>
<blockquote class="quote">
<p>“Beyond expectations. The UI mockups gave us a perfect starting point for our dev team. Great communication.”</p>
<footer>— Omar K. (Startup CTO)</footer>
</blockquote>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-3 text-center mt-8">
<div class="pill">⭐ 5-Star Rating</div>
<div class="pill">⏱ On-Time Delivery</div>
<div class="pill">📈 100+ Projects</div>
<div class="pill">🔒 Confidential</div>
<div class="pill col-span-2 sm:col-span-1">🧾 Commercial Rights</div>
</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">Our Mission</h2>
<p class="mt-3 opacity-80">
NeuralNomadAI was founded on the principle that cutting-edge AI should be accessible and practical for every creator and business.
Our mission is to transform vague concepts into high-fidelity, commercially-viable digital assets—fast. We bridge the gap between
imagination and execution, leveraging deep knowledge of modern models to deliver assets that precisely match your brand.
</p>
<div class="grid mt-8 gap-4 sm:grid-cols-2">
<div class="about-card">
<h3 class="font-bold">Core Capabilities</h3>
<p class="text-sm opacity-80">AI Image Generation, Prompt Engineering, Automation, Tool Integration.</p>
</div>
<div class="about-card">
<h3 class="font-bold">Tools</h3>
<p class="text-sm opacity-80">Midjourney, Stable Diffusion, DALL·E, Figma (and more).</p>
</div>
<div class="about-card">
<h3 class="font-bold">Project Volume</h3>
<p class="text-sm opacity-80"><span class="muted">[500+]</span> gigs completed on <span class="muted">[platform]</span>.</p>
</div>
<div class="about-card">
<h3 class="font-bold">Timezone & Support</h3>
<p class="text-sm opacity-80">Based in <span class="muted">[Your Timezone]</span>, swift responses for <span class="muted">[Region]</span> clients. Premium: unlimited revisions.</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">Contact / Hire</h2>
<p class="mt-3 opacity-80">Ready to hire? Connect directly on Fiverr or submit a custom request.</p>
<div class="mt-5 flex flex-wrap gap-3 justify-center">
<a href="FIVERR_PROFILE_URL_HERE" class="btn-primary">HIRE US NOW</a>
<a href="mailto:custom@neuralnomadai.com" class="btn-secondary">Email</a>
<a href="INSTAGRAM_URL_HERE" class="btn-secondary">Instagram</a>
<a href="LINKEDIN_URL_HERE" class="btn-secondary">LinkedIn</a>
</div>
<p class="mt-4 text-sm opacity-70">
Response Time: Expect a reply within <span class="muted">[x]</span> business hours during <span class="muted">[days/hours]</span>.
</p>
</div>
<!-- Optional custom request form (kept for convenience) -->
<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="Goals, audience, visual style, deliverables."></textarea>
</div>
<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="FIVERR_PROFILE_URL_HERE" rel="noopener">Fiverr</a>
<a class="link muted" href="LINKEDIN_URL_HERE" rel="noopener">LinkedIn</a>
<a class="link muted" href="INSTAGRAM_URL_HERE" 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-70 mt-1">Privacy: We handle all client files with strict confidentiality. Final assets delivered with commercial rights. Custom form submissions are stored securely in a private database or Formspree.</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>
<script src="script.js" defer></script>
</body>
</html>