Spaces:

oldmonk69
/

gemini-ui-redesign

Running

App Files Files Community

oldmonk69 commited on 26 days ago

Commit

fee1b9f

verified ·

1 Parent(s): bf5d20a

Update index.html (#8)

Browse files

- Update index.html (4b51b4ce4253e32cdd960553d002bf1532f498a1)

Files changed (1) hide show

index.html +473 -249

index.html CHANGED Viewed

@@ -1,287 +1,511 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>NeuralNomadAI — Gemini Share Embed Demo</title>
-  <!-- Google fonts -->
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
-  <!-- Tailwind utilities CDN -->
-  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
-  <!-- Local CSS -->
-  <link rel="stylesheet" href="style.css">
-</head>
-<body class="font-display bg-gradient-to-b from-[#071017] to-[#07121a] text-gray-100">
-  <!-- Simple header -->
-  <header class="site-header">
-    <div class="container nav-inner">
-      <div class="brand">
-        <div class="logo" aria-hidden="true"></div>
-        <span class="brand-name">NeuralNomadAI</span>
-      </div>
-      <nav class="nav-links" aria-label="Primary Navigation">
-        <a href="#home" class="nav-link active">Home</a>
-        <a href="#services" class="nav-link">Services</a>
-        <a href="#portfolio" class="nav-link">Portfolio</a>
-        <a href="#contact" class="nav-link">Contact</a>
       </nav>
-      <div class="nav-cta">
-        <button class="btn btn-outline">Login</button>
-        <button class="btn btn-primary">Get Started</button>
       </div>
     </div>
   </header>
-  <!-- HERO -->
-  <section id="home" class="hero-section">
-    <div class="hero-overlay"></div>
-    <div class="container hero-inner">
-      <h1 class="hero-title">Unleash Your Creative Vision with AI</h1>
-      <p class="hero-sub">NeuralNomadAI empowers creators with cutting-edge AI tools for imagery and automation.</p>
-      <div class="hero-ctas mt-6">
-        <a href="#contact" class="btn btn-primary large">Get Started</a>
-        <a href="#services" class="btn btn-muted large">Explore Features</a>
-      </div>
-      <!-- Gemini share preview card (centered under CTAs) -->
-      <div class="mt-8 flex justify-center">
-        <div class="gemini-card" id="geminiCard" role="region" aria-labelledby="geminiTitle" aria-describedby="geminiDesc">
-          <div class="gemini-thumb" aria-hidden="true">
-            <!-- stylized thumbnail or icon -->
-            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" class="text-sky-400" xmlns="http://www.w3.org/2000/svg">
-              <rect width="24" height="24" rx="6" fill="currentColor" opacity="0.12"/>
-              <path d="M8 12h8M8 8h8M8 16h8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
           </div>
-          <div class="gemini-meta">
-            <h3 id="geminiTitle" class="gemini-title">View Gemini Share</h3>
-            <p id="geminiDesc" class="gemini-desc">Interactive preview — opens an in-page viewer that mirrors the shared Gemini conversation.</p>
-            <div class="gemini-actions">
-              <button id="openGeminiBtn" class="btn btn-primary small">Open Preview</button>
-              <a id="openGeminiNewTab" class="btn btn-outline small" target="_blank" rel="noopener">Open in new tab</a>
-              <button id="copyGeminiLink" class="btn btn-muted small">Copy Link</button>
-            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-  <main>
-    <!-- rest of the page content simplified for the demo -->
-    <section class="container section text-center">
-      <h2 class="section-title">Quick Pitch</h2>
-      <p class="lead">NeuralNomadAI — modern interface, Gemini share preview embedded for demonstration.</p>
     </section>
-  </main>
-  <!-- Footer -->
-  <footer class="site-footer">
-    <div class="container footer-row">
-      <div>© 2025 NeuralNomadAI. All rights reserved.</div>
-      <div class="footer-links">
-        <a>Terms</a>
-        <a>Privacy</a>
-        <a>Contact</a>
       </div>
-    </div>
-  </footer>
-  <!-- Modal for Gemini iframe -->
-  <div id="geminiModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true">
-    <div class="modal-backdrop" data-close="true"></div>
-    <div class="modal-panel" role="document">
-      <header class="modal-header">
-        <h3 id="modalTitle">Gemini Share Preview</h3>
-        <div class="modal-controls">
-          <button id="copyLinkModal" class="btn btn-muted small">Copy Link</button>
-          <a id="openNewTabModal" class="btn btn-outline small" target="_blank" rel="noopener">Open in new tab</a>
-          <button id="closeModal" class="btn btn-outline small" aria-label="Close preview">Close</button>
         </div>
-      </header>
-      <div class="modal-body">
-        <!-- lazy-loaded iframe -->
-        <div id="iframeContainer" class="iframe-container" aria-live="polite">
-          <div class="iframe-fallback">
-            Loading preview... If the preview cannot be shown, you can open it in a new tab.
-          </div>
-          <!-- iframe element will be created dynamically on demand -->
         </div>
       </div>
-    </div>
-  </div>
-  <script>
-    // ==== Gemini share integration script ====
-    (function () {
-      const GEMINI_URL = 'https://g.co/gemini/share/4388c23581b0'; // provided share URL
-      const openGeminiBtn = document.getElementById('openGeminiBtn');
-      const openGeminiNewTab = document.getElementById('openGeminiNewTab');
-      const copyGeminiLink = document.getElementById('copyGeminiLink');
-      const geminiModal = document.getElementById('geminiModal');
-      const iframeContainer = document.getElementById('iframeContainer');
-      const closeModalBtn = document.getElementById('closeModal');
-      const copyLinkModal = document.getElementById('copyLinkModal');
-      const openNewTabModal = document.getElementById('openNewTabModal');
-      // Set the anchor hrefs
-      openGeminiNewTab.href = GEMINI_URL;
-      openNewTabModal.href = GEMINI_URL;
-      // Copy helper
-      async function copyToClipboard(text) {
-        try {
-          await navigator.clipboard.writeText(text);
-          return true;
-        } catch (err) {
-          console.warn('Clipboard copy failed:', err);
-          return false;
-        }
-      }
-      // Create iframe lazily and inject to container
-      function createIframe(url) {
-        // remove any previous iframe
-        iframeContainer.querySelectorAll('iframe').forEach(n => n.remove());
-        const iframe = document.createElement('iframe');
-        iframe.className = 'gemini-iframe';
-        // set src only when creating (lazy)
-        iframe.src = url;
-        // sandbox to reduce risk; allow-same-origin if Gemini needs it
-        // You can adjust sandbox flags if needed.
-        iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
-        iframe.setAttribute('loading', 'lazy');
-        iframe.setAttribute('referrerpolicy', 'no-referrer');
-        iframe.setAttribute('title', 'Gemini share preview');
-        // optional: handle load / error states
-        iframe.addEventListener('load', () => {
-          // hide fallback message
-          const fb = iframeContainer.querySelector('.iframe-fallback');
-          if (fb) fb.style.display = 'none';
-        });
-        iframe.addEventListener('error', () => {
-          const fb = iframeContainer.querySelector('.iframe-fallback');
-          if (fb) fb.textContent = 'Preview failed to load. You can open the share in a new tab.';
-          // remove iframe to avoid confusion
-          iframe.remove();
-        });
-        iframeContainer.appendChild(iframe);
-        return iframe;
-      }
-      // Open modal (creates iframe if needed)
-      function openModal() {
-        // show modal
-        geminiModal.classList.remove('hidden');
-        geminiModal.setAttribute('aria-hidden', 'false');
-        // Focus management: focus the close button quickly
-        closeModalBtn.focus();
-        // If there's no iframe yet, create it lazily
-        if (!iframeContainer.querySelector('iframe')) {
-          createIframe(GEMINI_URL);
-        }
-        // add key listener for Esc
-        document.addEventListener('keydown', onKeyDown);
-        trapFocus(geminiModal);
-      }
-      // Close modal and clean up
-      function closeModal() {
-        geminiModal.classList.add('hidden');
-        geminiModal.setAttribute('aria-hidden', 'true');
-        // Optionally keep the iframe for faster reopen, or remove to free memory:
-        // iframeContainer.querySelectorAll('iframe').forEach(i => i.remove());
-        document.removeEventListener('keydown', onKeyDown);
-        releaseFocusTrap();
-      }
-      function onKeyDown(e) {
-        if (e.key === 'Escape') closeModal();
-      }
-      // Basic focus trap for accessibility
-      let previousActive = null;
-      function trapFocus(modal) {
-        previousActive = document.activeElement;
-        const focusable = modal.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        function handleTrap(e) {
-          if (e.key !== 'Tab') return;
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-        }
-        modal._trapHandler = handleTrap;
-        modal.addEventListener('keydown', handleTrap);
-      }
-      function releaseFocusTrap() {
-        const modal = geminiModal;
-        if (modal && modal._trapHandler) {
-          modal.removeEventListener('keydown', modal._trapHandler);
-          modal._trapHandler = null;
-        }
-        if (previousActive && previousActive.focus) previousActive.focus();
-      }
-      // clicking the backdrop closes modal
-      document.querySelectorAll('.modal-backdrop').forEach(b => {
-        b.addEventListener('click', closeModal);
-      });
-      // Event bindings
-      openGeminiBtn.addEventListener('click', openModal);
-      closeModalBtn.addEventListener('click', closeModal);
-      copyGeminiLink.addEventListener('click', async () => {
-        const ok = await copyToClipboard(GEMINI_URL);
-        const btn = copyGeminiLink;
-        const orig = btn.textContent;
-        btn.textContent = ok ? 'Copied!' : 'Copy failed';
-        setTimeout(() => btn.textContent = orig, 1600);
-      });
-      copyLinkModal.addEventListener('click', async () => {
-        const ok = await copyToClipboard(GEMINI_URL);
-        const btn = copyLinkModal;
-        const orig = btn.textContent;
-        btn.textContent = ok ? 'Copied!' : 'Copy failed';
-        setTimeout(() => btn.textContent = orig, 1600);
-      });
-      // If iframe is blocked by X-Frame-Options/CSP, the iframe will error and fallback message will show.
-      // The "Open in new tab" link remains available as a reliable fallback.
-      // Small enhancement: try to preconnect to the domain to reduce latency (non-blocking)
-      (function preconnect() {
-        try {
-          const l = document.createElement('link');
-          l.rel = 'preconnect';
-          l.href = 'https://g.co';
-          l.crossOrigin = 'anonymous';
-          document.head.appendChild(l);
-        } catch (e) { /* noop */ }
-      })();
-    })();
-  </script>
 </body>
 </html>

+<!-- =========================================================
+# 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>