Spaces:

oldmonk69
/

gemini-ui-redesign

Running

App Files Files Community

oldmonk69 commited on 29 days ago

Commit

1668438

verified ·

1 Parent(s): a2347d1

Update index.html

Browse files

Files changed (1) hide show

index.html +216 -256

index.html CHANGED Viewed

@@ -1,44 +1,31 @@
 <!-- =========================================================
 # 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 -->
@@ -53,48 +40,36 @@
       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');
@@ -106,20 +81,16 @@
   <!-- 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>
@@ -127,26 +98,26 @@
       <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>
@@ -156,115 +127,144 @@
   <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>
@@ -273,136 +273,98 @@
     <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>
@@ -411,24 +373,29 @@
       <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>
@@ -444,13 +411,20 @@
     <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>
@@ -462,19 +436,8 @@
           </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>
@@ -488,24 +451,21 @@
   <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>

 <!-- =========================================================
 # 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 -->
       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');
   <!-- 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>
   <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>
     <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>
       <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>
     <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>
           </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>
   <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>