Upload 9 files (#11)

- Upload 9 files (07f3fdd64d2d760c0b35fac9994bd54549a0b6e0)

about.php

@@ -0,0 +1,25 @@
+<?php
+$pageSlug='about'; $pageTitle='About — NeuralNomadAI'; $pageDesc='Mission & capabilities.';
+ob_start(); ?>
+<div class="container">
+  <div class="row g-4 align-items-start">
+    <div class="col-lg-6">
+      <h2 class="fw-bold mb-3">Our Mission</h2>
+      <p class="text-secondary">We turn rough ideas into high-fidelity, commercial-ready assets—fast.</p>
+      <div class="row g-3 mt-1">
+        <?php foreach([
+          ['Capabilities','Generation, prompts, automation.'],
+          ['Tools','Midjourney, SD, DALL·E, Figma.'],
+          ['Volume','100+ projects delivered.'],
+          ['Support','Timezone-friendly & responsive.'],
+        ] as $c): ?>
+        <div class="col-sm-6"><div class="p-3 border rounded-3 bg-body h-100"><strong><?= $c[0] ?></strong><div class="small text-secondary mt-1"><?= $c[1] ?></div></div></div>
+        <?php endforeach; ?>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <img class="rounded-4 shadow w-100" src="https://images.unsplash.com/photo-1524145949-2e0ff4e04f68?q=80&w=1400&auto=format&fit=crop" alt="Studio board">
+    </div>
+  </div>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

contact.php

@@ -0,0 +1,23 @@
+<?php
+$pageSlug='contact'; $pageTitle='Contact — NeuralNomadAI'; $pageDesc='Hire us or request a quote.';
+ob_start(); ?>
+<div class="container">
+  <div class="text-center mb-4"><h2 class="fw-bold">Contact / Hire</h2><p class="text-secondary">Fastest path: Fiverr. Custom projects welcome.</p>
+    <div class="d-flex flex-wrap gap-2 justify-content-center">
+      <a class="btn btn-primary" href="FIVERR_PROFILE_URL_HERE">Hire Now</a>
+      <a class="btn btn-outline-secondary" href="mailto:custom@neuralnomadai.com">Email</a>
+      <a class="btn btn-outline-secondary" href="INSTAGRAM_URL_HERE">Instagram</a>
+      <a class="btn btn-outline-secondary" href="LINKEDIN_URL_HERE">LinkedIn</a>
+    </div>
+  </div>
+
+  <form id="contactForm" class="mx-auto needs-validation" style="max-width:720px" novalidate>
+    <div class="row g-3">
+      <div class="col-md-6"><label class="form-label" for="name">Name</label><input id="name" name="name" class="form-control" required><div class="invalid-feedback">Please enter your name.</div></div>
+      <div class="col-md-6"><label class="form-label" for="email">Email</label><input id="email" name="email" type="email" class="form-control" required><div class="invalid-feedback">Valid email required.</div></div>
+      <div class="col-12"><label class="form-label" for="message">Project Brief</label><textarea id="message" name="message" class="form-control" rows="5" required></textarea><div class="invalid-feedback">Tell us a bit about it.</div></div>
+      <div class="col-12 d-flex align-items-center gap-3"><button class="btn btn-primary" type="submit">Send Message</button><span id="formMsg" class="small text-secondary"></span></div>
+    </div>
+  </form>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

index.php

@@ -0,0 +1,44 @@
+<?php
+$pageSlug='home'; $pageTitle='NeuralNomadAI — Home'; $pageDesc='Creative AI imagery & automation.';
+ob_start(); ?>
+<div class="container">
+  <div id="hero" class="carousel slide mb-5" data-bs-ride="carousel">
+    <div class="carousel-inner rounded-4 shadow">
+      <div class="carousel-item active">
+        <img class="d-block w-100 object-fit-cover" style="aspect-ratio:16/7" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1600&auto=format&fit=crop" alt="">
+        <div class="carousel-caption">
+          <h1 class="display-5 fw-bold text-shadow">Creative imagery & automation</h1>
+          <p class="lead">Images, prompts & tools in 24–72h.</p>
+          <a class="btn btn-primary btn-lg me-2" href="services.php">Explore Services</a>
+          <a class="btn btn-outline-light btn-lg" href="portfolio.php">Portfolio</a>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <img class="d-block w-100 object-fit-cover" style="aspect-ratio:16/7" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?q=80&w=1600&auto=format&fit=crop" alt="">
+      </div>
+    </div>
+    <button class="carousel-control-prev" data-bs-target="#hero" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
+    <button class="carousel-control-next" data-bs-target="#hero" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
+  </div>
+
+  <div class="row g-3 text-center mb-5">
+    <?php foreach (['⭐ 5-Star Rated','⚡ 24–72h Delivery','🎯 Commercial License','💬 Fast Communication','📦 100+ Projects'] as $b): ?>
+      <div class="col-6 col-md"><div class="badge-pill"><?= $b ?></div></div>
+    <?php endforeach; ?>
+  </div>
+
+  <div class="text-center mb-4">
+    <h2 class="fw-bold">What we do</h2><p class="text-secondary">AI image creation, prompt engineering, and creator automation.</p>
+  </div>
+  <div class="row g-4">
+    <div class="col-md-6"><div class="card h-100 shadow-sm"><div class="card-body">
+      <h5 class="card-title">Bespoke AI Image Creation</h5><p class="card-text">High-res visuals tailored to your brief.</p>
+      <a class="link-primary" href="services.php">See pricing →</a>
+    </div></div></div>
+    <div class="col-md-6"><div class="card h-100 shadow-sm"><div class="card-body">
+      <h5 class="card-title">Prompt Engineering & Tuning</h5><p class="card-text">Consistency and brand fidelity at scale.</p>
+      <a class="link-primary" href="services.php">See pricing →</a>
+    </div></div></div>
+  </div>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

main.js

@@ -0,0 +1,55 @@
+(() => {
+  const $ = (s, r=document) => r.querySelector(s);
+  const $$ = (s, r=document) => [...r.querySelectorAll(s)];
+
+  // theme toggle (Bootstrap 5.3 data-bs-theme)
+  (function themeBoot(){
+    const saved = localStorage.getItem('nnai-theme');
+    if(saved) document.documentElement.setAttribute('data-bs-theme', saved);
+  })();
+  $('#themeToggle')?.addEventListener('click', ()=>{
+    const root = document.documentElement;
+    const cur = root.getAttribute('data-bs-theme') || 'light';
+    const next = cur === 'light' ? 'dark' : 'light';
+    root.setAttribute('data-bs-theme', next);
+    localStorage.setItem('nnai-theme', next);
+  });
+
+  // navbar scrolled shadow
+  const nav = document.querySelector('.navbar');
+  const toggle = () => nav?.classList.toggle('scrolled', window.scrollY > 50);
+  toggle(); window.addEventListener('scroll', toggle, {passive:true});
+
+  // portfolio filter + lightbox (on portfolio page)
+  const grid = $('#portfolioGrid') || document;
+  const buttons = $$('[data-filter]');
+  const items = $$('.portfolio-item');
+  buttons.forEach(btn=>{
+    btn.addEventListener('click', ()=>{
+      const f = btn.dataset.filter;
+      items.forEach(card=>{
+        const show = f==='*' || card.dataset.category===f;
+        card.style.display = show ? '' : 'none';
+        if(show) card.classList.add('animate-fade-in-up');
+      });
+    });
+  });
+  const modal = $('#portfolioModal'); const imgEl = $('#modalImage');
+  if(modal && imgEl){
+    modal.addEventListener('show.bs.modal', e=>{
+      const trigger = e.relatedTarget;
+      const src = trigger?.getAttribute('data-full') || trigger?.getAttribute('src') || '';
+      imgEl.src = src;
+    });
+    modal.addEventListener('hidden.bs.modal', ()=> imgEl.src = '');
+  }
+
+  // form validation (contact page)
+  const form = $('#contactForm'); const msg = $('#formMsg');
+  form?.addEventListener('submit', e=>{
+    e.preventDefault(); e.stopPropagation();
+    if(form.checkValidity()){ msg.textContent='Thanks! We’ll reply soon.'; msg.className='small text-success'; form.reset(); form.classList.remove('was-validated'); }
+    else { msg.textContent='Please fix the errors above.'; msg.className='small text-danger'; }
+    form.classList.add('was-validated');
+  });
+})();

portfolio.php

@@ -0,0 +1,49 @@
+<?php
+$pageSlug='portfolio'; $pageTitle='Portfolio — NeuralNomadAI'; $pageDesc='Selected work.';
+ob_start(); ?>
+<div class="container">
+  <div class="text-center mb-4"><h2 class="fw-bold">AI Art Portfolio</h2><p class="text-secondary">Illustration • Photoreal • Logo/Icon • UI</p></div>
+
+  <div class="text-center mb-4">
+    <div class="btn-group" role="group">
+      <input type="radio" class="btn-check" name="filter" id="f-all" checked>
+      <label class="btn btn-outline-primary" for="f-all" data-filter="*">All</label>
+      <input type="radio" class="btn-check" name="filter" id="f-ill">
+      <label class="btn btn-outline-primary" for="f-ill" data-filter="illustration">Illustration</label>
+      <input type="radio" class="btn-check" name="filter" id="f-photo">
+      <label class="btn btn-outline-primary" for="f-photo" data-filter="photoreal">Photoreal</label>
+      <input type="radio" class="btn-check" name="filter" id="f-logo">
+      <label class="btn btn-outline-primary" for="f-logo" data-filter="logo">Logo/Icon</label>
+      <input type="radio" class="btn-check" name="filter" id="f-ui">
+      <label class="btn btn-outline-primary" for="f-ui" data-filter="ui">UI Mockups</label>
+    </div>
+  </div>
+
+  <div id="portfolioGrid" class="row g-4">
+    <?php
+      $items = [
+        ['illustration','Editorial Illustration','https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=1600&auto=format&fit=crop'],
+        ['photoreal','Product Photos','https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1600&auto=format&fit=crop'],
+        ['logo','Minimal Icons','https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=1600&auto=format&fit=crop'],
+        ['ui','Dark Mode Concept','https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=1600&auto=format&fit=crop'],
+      ];
+      foreach($items as $it): ?>
+      <div class="col-sm-6 col-lg-4 portfolio-item" data-category="<?= $it[0] ?>">
+        <div class="card portfolio-card">
+          <img class="card-img-top" src="<?= $it[2] ?>" alt="<?= $it[1] ?>" data-bs-toggle="modal" data-bs-target="#portfolioModal" data-full="<?= $it[3] ?>">
+          <div class="card-body"><h6 class="card-title mb-1"><?= $it[1] ?></h6><span class="badge text-bg-secondary text-capitalize"><?= $it[0] ?></span></div>
+        </div>
+      </div>
+    <?php endforeach; ?>
+  </div>
+</div>
+
+<div class="modal fade" id="portfolioModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-xl">
+    <div class="modal-content bg-black">
+      <button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
+      <img id="modalImage" class="w-100" style="max-height:85vh;object-fit:contain" alt="">
+    </div>
+  </div>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

reviews.php

@@ -0,0 +1,21 @@
+<?php
+$pageSlug='reviews'; $pageTitle='Trust & Reviews — NeuralNomadAI'; $pageDesc='What clients say.';
+ob_start(); ?>
+<div class="container">
+  <div class="text-center mb-4"><h2 class="fw-bold">Client Reviews & Trust</h2><p class="text-secondary">5-star rated seller for AI content.</p></div>
+  <div class="row g-4">
+    <?php foreach([
+      ['“Perfect mood, fast delivery.”','— Sarah M.'],
+      ['“Prompt system saves hours weekly.”','— David P.'],
+      ['“Great comms & UI previews.”','— Omar K.'],
+    ] as $q): ?>
+    <div class="col-md-4">
+      <figure class="p-4 border rounded-3 h-100 shadow-sm bg-body">
+        <blockquote class="blockquote mb-0"><p><?= $q[0] ?></p></blockquote>
+        <figcaption class="blockquote-footer mt-2"><?= $q[1] ?></figcaption>
+      </figure>
+    </div>
+    <?php endforeach; ?>
+  </div>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

services.php

@@ -0,0 +1,36 @@
+<?php
+$pageSlug='services'; $pageTitle='Services & Pricing — NeuralNomadAI'; $pageDesc='AI image creation, prompts, automation.';
+ob_start(); ?>
+<div class="container">
+  <div class="text-center mb-4"><h2 class="fw-bold">Services & Pricing</h2><p class="text-secondary">Unlimited revisions • Commercial rights</p></div>
+  <div class="row g-4">
+    <?php
+      $cards = [
+        ['Bespoke AI Image Creation','High-res visuals tailored to your brief.',['High-res images','Revisions','Commercial use'],'FIVERR_GIG_URL_BASIC'],
+        ['Prompt Engineering & Tuning','Consistent outputs across tools.',['Master prompts','Test runs','Style snippet'],'FIVERR_GIG_URL_STANDARD'],
+        ['Image-to-Image Editing','Remix, upscale, style-transfer.',['Refined images','Upscaled file','24–48h'],'FIVERR_GIG_URL_PREMIUM'],
+        ['Automation & Creator Tools','Batching, templating, pipeline helpers.',['Custom script','Walkthrough video','7-day support'],'FIVERR_GIG_URL_AUTOMATION'],
+      ];
+      foreach($cards as $c): ?>
+      <div class="col-lg-6">
+        <div class="card h-100 shadow-sm"><div class="card-body">
+          <h5 class="card-title"><?= $c[0] ?></h5><p class="text-secondary"><?= $c[1] ?></p>
+          <ul class="small mb-3"><?php foreach($c[2] as $li) echo "<li>$li</li>"; ?></ul>
+          <a class="btn btn-outline-primary btn-sm" href="<?= $c[3] ?>">Open on Fiverr</a>
+        </div></div>
+      </div>
+    <?php endforeach; ?>
+  </div>
+
+  <div class="table-responsive mt-5">
+    <table class="table table-striped align-middle">
+      <thead class="table-primary"><tr><th>Tier</th><th>Includes</th><th>Delivery</th><th>Starting</th><th>Link</th></tr></thead>
+      <tbody>
+        <tr><td>Basic</td><td>1 concept, n revisions</td><td>48–72h</td><td>$</td><td><a href="FIVERR_GIG_URL_BASIC">Fiverr →</a></td></tr>
+        <tr><td>Standard</td><td>2 concepts, prompt doc</td><td>24–48h</td><td>$$</td><td><a href="FIVERR_GIG_URL_STANDARD">Fiverr →</a></td></tr>
+        <tr><td>Premium</td><td>Brand pack, automation opt.</td><td>24h</td><td>$$$</td><td><a href="FIVERR_GIG_URL_PREMIUM">Fiverr →</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+<?php $content=ob_get_clean(); include 'template.php'; ?>

styles.css

@@ -0,0 +1,10 @@
+html,body{font-family:"Space Grotesk",system-ui,ui-sans-serif,sans-serif}
+.object-fit-cover{object-fit:cover}
+.text-shadow{ text-shadow:0 2px 20px rgba(0,0,0,.45) }
+.badge-pill{background:rgba(17,147,212,.12);border:1px solid rgba(17,147,212,.18);color:#123;padding:.75rem 1rem;border-radius:12px;font-weight:600}
+.navbar.scrolled{backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,.06)}
+.nav-link.active{color:var(--bs-primary)!important; font-weight:600}
+.portfolio-card img{object-fit:cover; aspect-ratio:4/3}
+.card{border-radius:12px; box-shadow:0 8px 30px rgba(2,12,27,.08)}
+@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+.animate-fade-in-up{animation:fadeInUp .6s ease both}

template.php

@@ -1,4 +1,60 @@
+<?php
+$pageTitle = $pageTitle ?? 'NeuralNomadAI';
+$pageDesc  = $pageDesc  ?? 'Creative AI imagery & automation';
+$pageSlug  = $pageSlug  ?? 'home'; // home|services|portfolio|reviews|about|contact
+?>
+<!doctype html>
+<html lang="en" data-bs-theme="light">
+<head>
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><?= htmlspecialchars($pageTitle) ?></title>
+  <meta name="description" content="<?= htmlspecialchars($pageDesc) ?>">
+  <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">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
+  <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">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<nav class="navbar navbar-expand-lg bg-body border-bottom sticky-top">
+  <div class="container">
+    <a class="navbar-brand fw-bold" href="index.php"><i class="bi bi-cpu text-primary me-2"></i>NeuralNomadAI</a>
+    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav"><span class="navbar-toggler-icon"></span></button>
+    <div id="nav" class="collapse navbar-collapse">
+      <ul class="navbar-nav ms-auto align-items-lg-center">
+        <?php
+          function li($href,$label,$slug,$active){$a=$active===$slug?'active':'';echo "<li class='nav-item'><a class='nav-link $a' href='$href'>$label</a></li>";}
+          li('index.php','Home','home',$pageSlug);
+          li('services.php','Services & Pricing','services',$pageSlug);
+          li('portfolio.php','Portfolio','portfolio',$pageSlug);
+          li('reviews.php','Trust & Reviews','reviews',$pageSlug);
+          li('about.php','About','about',$pageSlug);
+          li('contact.php','Contact','contact',$pageSlug);
+        ?>
+        <li class="nav-item ms-lg-2"><a class="btn btn-primary btn-sm" href="FIVERR_PROFILE_URL_HERE">Hire</a></li>
+        <li class="nav-item ms-2"><button id="themeToggle" class="btn btn-outline-secondary btn-sm" type="button"><i class="bi bi-moon-stars"></i></button></li>
+      </ul>
+    </div>
+  </div>
+</nav>
 
-Tailwind is loaded via CDN in `index.html`:
-```html
-<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
+<main class="py-5">
+  <?= $content ?? '' ?>
+</main>
+
+<footer class="border-top py-4">
+  <div class="container text-center small">
+    <div class="mb-2">
+      <a class="link-secondary me-3" href="FIVERR_PROFILE_URL_HERE">Fiverr</a>
+      <a class="link-secondary me-3" href="LINKEDIN_URL_HERE">LinkedIn</a>
+      <a class="link-secondary" href="INSTAGRAM_URL_HERE">Instagram</a>
+    </div>
+    <div>© 2024–2025 NeuralNomadAI. All rights reserved.</div>
+  </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="main.js"></script>
+</body>
+</html>