Upload 5 files

README (5).md

@@ -0,0 +1,75 @@
+
+# Hugging Face Space — Staticize Kit
+
+This kit converts a PHP-based Space into a **static** Space (HTML/CSS/JS), ready to upload.
+
+## What this does
+- Converts every `*.html` into `*.html` (same relative paths)
+- Strips PHP code blocks `<?php ... ?>`
+- Rewrites internal links from `.html` → `.html` across HTML/CSS/JS/MD
+- Ensures an `index.html` exists at repo root
+- Provides a tiny JS include system to replace PHP includes
+
+## Quick start
+
+1. **Clone your Space locally**
+   ```bash
+   git clone https://huggingface.co/spaces/oldmonk69/gemini-ui-redesign
+   cd gemini-ui-redesign
+   git checkout -b staticize
+   ```
+
+2. **Download and unpack this kit into the repo root**
+   - Place the contents of this folder into the repo root (you should see `convert.sh` at the same level as your existing files).
+
+3. **Run the converter**
+   ```bash
+   bash convert.sh
+   ```
+
+4. **Verify locally**
+   - Open the generated `.html` files in a browser (use a simple local server to avoid CORS issues):
+     ```bash
+     python3 -m http.server 5173
+     # then visit http://localhost:5173/
+     ```
+
+5. **Commit and push**
+   ```bash
+   git add -A
+   git commit -m "Staticize Space: convert PHP to HTML, update links"
+   git push -u origin staticize
+   ```
+
+6. **Switch Space runtime to Static** (if not already)
+   - In your Space: **Settings → Runtime → Static**
+   - Ensure the repo root has **index.html**
+
+7. **Restart Space** to rebuild.
+
+## Includes-based layout (optional)
+This kit ships `asset/include.js` and two partials:
+- `asset/partials/header.html`
+- `asset/partials/footer.html`
+
+To use them in your pages:
+```html
+<script src="/asset/include.js" defer></script>
+<div id="site-header"></div>
+<!-- page-specific content -->
+<div id="site-footer"></div>
+```
+
+Edit the partials once and every page will pick them up at runtime.
+
+## Notes & caveats
+- If your PHP *echoed* dynamic HTML (templating), that content won’t exist after stripping. Copy the intended HTML into the new `.html` files manually (the script keeps a `_backup_php/` folder for reference).
+- If you used server-side logic (forms, mailers, DB), you must replace it with client-side logic or move to a **Docker Space** running PHP.
+- Relative paths: when in doubt, use root-relative paths like `/asset/...` so links behave on every page.
+
+## Rollback
+Everything original is backed up under `_backup_php/`. To undo, just reset your branch:
+```bash
+git reset --hard HEAD~1
+git clean -fd
+```

convert.sh

@@ -0,0 +1,96 @@
+
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "==> Staticize: PHP → HTML conversion"
+
+# 1) Backup all PHP files preserving structure
+if [ -d "_backup_php" ]; then
+  echo "[skip] _backup_php already exists"
+else
+  echo "Backing up *.php to _backup_php/"
+  find . -type f -name "*.php" -print0 | tar --null -T - -cf - | (mkdir -p _backup_php && tar -xf - -C _backup_php)
+fi
+
+# 2) Convert each .php to .html stripping PHP blocks
+echo "Converting PHP to HTML (strip <?php ... ?> blocks)"
+php_count=0
+while IFS= read -r -d '' f; do
+  php_count=$((php_count+1))
+  rel="${f#./}"
+  out="${rel%.php}.html"
+  outdir="$(dirname "$out")"
+  mkdir -p "$outdir"
+  # Remove all PHP code blocks including multiline
+  # Note: GNU sed required. macOS: use 'gsed' (brew install gnu-sed) or run via Docker.
+  sed -E 's/<\?php[\s\S]*?\?>//g' "$f" > "$out"
+done < <(find . -type f -name "*.php" -print0)
+
+echo "Converted $php_count PHP files."
+
+# 3) Rewrite internal links .php → .html across common text assets
+echo "Rewriting internal links from .php to .html"
+files_to_patch=$(find . -type f \( -name "*.html" -o -name "*.htm" -o -name "*.css" -o -name "*.js" -o -name "*.md" -o -name "*.txt" -o -name "*.xml" -o -name ".htaccess" \) ! -path "./_backup_php/*")
+while IFS= read -r file; do
+  # Use in-place edit (GNU sed). macOS: gsed -i
+  sed -i -E 's/\.php\b/.html/g' "$file" || true
+done <<< "$files_to_patch"
+
+# 4) Ensure index.html at repo root
+if [ ! -f "./index.html" ]; then
+  if [ -f "./index.php" ]; then
+    echo "Creating index.html from index.php"
+    sed -E 's/<\?php[\s\S]*?\?>//g' "./index.php" > "./index.html"
+  else
+    echo "No index.php found; creating a minimal index.html"
+    cat > ./index.html <<'EOF'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Static Site</title>
+  <link rel="stylesheet" href="/styles.css">
+  <script src="/main.js" defer></script>
+  <script src="/asset/include.js" defer></script>
+</head>
+<body>
+  <div id="site-header"></div>
+  <main style="padding: 2rem;">
+    <h1>Static conversion complete</h1>
+    <p>This page was generated because no index.php existed.</p>
+    <p>Edit this file to match your layout.</p>
+  </main>
+  <div id="site-footer"></div>
+</body>
+</html>
+EOF
+  fi
+fi
+
+# 5) Provision include system if not present
+mkdir -p asset/partials
+if [ ! -f "asset/include.js" ]; then
+  cat > asset/include.js <<'EOF'
+async function inject(id, url){
+  const el = document.getElementById(id);
+  if (!el) return;
+  const html = await (await fetch(url)).text();
+  el.innerHTML = html;
+}
+document.addEventListener('DOMContentLoaded', () => {
+  inject('site-header', '/asset/partials/header.html');
+  inject('site-footer', '/asset/partials/footer.html');
+});
+EOF
+fi
+
+: > asset/partials/header.html
+: > asset/partials/footer.html
+
+# 6) Summary
+echo "==> Staticize complete."
+echo " - Backup of originals: _backup_php/"
+echo " - Entry point ensured: index.html"
+echo " - Include system: asset/include.js + asset/partials/{header,footer}.html"
+echo "Next: review pages, commit, push, and set Space runtime to Static."

gitattributes (1)

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

index.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html class="dark" lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>NeuralNomadAI - Integrated Website</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <script>
+        // Tailwind CSS Configuration
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        },
+                        "background-light": "#f6f7f8",
+                        "background-dark": "#101c22",
+                    },
+                    fontFamily: {
+                        display: ["Space Grotesk", "sans-serif"],
+                    },
+                    borderRadius: {
+                        DEFAULT: "0.25rem",
+                        lg: "0.5rem",
+                        xl: "0.75rem",
+                        full: "9999px",
+                    },
+                },
+            },
+        };
+    </script>
+    <style>
+        /* Helper class to ensure smooth transitions */
+        .page-content {
+            display: none;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+        }
+        .page-content.active {
+            display: block;
+            opacity: 1;
+        }
+        
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #c7d2fe;
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #8b5cf6;
+        }
+        
+        .dark ::-webkit-scrollbar-track {
+            background: #1e293b;
+        }
+        
+        .dark ::-webkit-scrollbar-thumb {
+            background: #4c1d95;
+        }
+        
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: #7c3aed;
+        }
+        
+        /* Animation for cards */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .animate-fade-in-up {
+            animation: fadeInUp 0.6s ease-out forwards;
+        }
+        
+        /* Glow effect for buttons */
+        .glow-button {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .glow-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: 0.5s;
+        }
+        
+        .glow-button:hover::before {
+            left: 100%;
+        }
+    </style>
+</head>
+
+<body class="bg-background-light dark:bg-background-dark font-display text-gray-800 dark:text-gray-200">
+    <div class="flex min-h-screen w-full flex-col">
+
+        <!-- Unified Header/Navigation -->
+        <header class="sticky top-0 z-50 border-b border-gray-200/50 dark:border-gray-700/50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm">
+            <div class="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3">
+                <a href="#home" data-page="home" class="flex items-center gap-4 cursor-pointer">
+                    <svg class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+                        <path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill-rule="evenodd"></path>
+                    </svg>
+                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">NeuralNomadAI</h1>
+                </a>
+                <nav class="hidden items-center gap-8 md:flex">
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#home" data-page="home">Home</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#services" data-page="services">Services</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#portfolio" data-page="portfolio">Portfolio</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#pricing" data-page="pricing">Pricing</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#testimonials" data-page="testimonials">Testimonials</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#about" data-page="about">About</a>
+                    <a class="nav-link text-sm font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors" href="#contact" data-page="contact">Contact</a>
+                </nav>
+                <div class="flex items-center gap-4">
+                    <a href="#contact" data-page="contact" class="glow-button rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg transition-all hover:opacity-90 hover:shadow-xl">Get Started</a>
+                </div>
+            </div>
+        </header>
+
+        <main class="flex-grow">
+            <!-- Page Content Sections -->
+
+            <!-- HOME PAGE -->
+            <section id="home" class="page-content active">
+                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div class="py-16 sm:py-24">
+                        <div class="relative min-h-[500px] rounded-xl bg-cover bg-center p-8 text-center text-white" style='background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url("https://lh3.googleusercontent.com/aida-public/AB6AXuCbtu27C_YAnpE3c6WE7xXhfkGRLzYL2k7jNepph6mi8Axf8XYGeVSSHz389ge_a12I7q5Z28_fnzQ_zKgbFOr6kTkUgcwkkewyLVvR5y5eTofYDggkxj8k1g5VEIWetKE4OeA5_6yJHLwh0ieg-bRUG6xjFZxyaRpkdwUuF0a5K4ZCHqJqK6e6UBae5SwYqcnymYoAaVJdSuEP1lcucgsnr8ORqdyBtUiV2U4YaE0UkMkPdr38q0jz1MvrLMCdHEZh1eUSk5BUkIA");'>
+                            <div class="absolute inset-0 flex flex-col items-center justify-center gap-6">
+                                <div class="max-w-3xl">
+                                    <h1 class="text-4xl font-bold tracking-tighter sm:text-5xl lg:text-6xl animate-fade-in-up">Get Stunning AI Images That Match Your Brief — Fast</h1>
+                                    <p class="mt-4 text-lg text-gray-200 animate-fade-in-up delay-100">AI-powered visuals, custom prompts & creative automation — delivered in 24–72 hours with unlimited revisions until you're thrilled.</p>
+                                </div>
+                                <div class="mt-4 flex flex-wrap justify-center gap-4 animate-fade-in-up delay-200">
+                                    <a href="#" class="glow-button rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-6 py-3 text-base font-bold text-white transition-opacity hover:opacity-90">🔥 Hire on Fiverr →</a> <!-- FIVERR_PROFILE_URL -->
+                                    <a href="#portfolio" data-page="portfolio" class="rounded-lg bg-white/10 px-6 py-3 text-base font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/20 nav-link">View Portfolio →</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="py-16 text-center sm:py-24">
+                        <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">What You Get & Who It's For</h2>
+                        <p class="mx-auto mt-4 max-w-3xl text-lg text-gray-600 dark:text-gray-400">
+                            Professional AI-generated images, custom prompt engineering, and automation tools built specifically for creators, marketers, and entrepreneurs who need stunning visuals without the designer price tag. It's for content creators, brand builders, marketing teams, and anyone who needs eye-catching imagery that converts.
+                        </p>
+                    </div>
+                    <div class="py-8">
+                         <div class="mx-auto max-w-7xl">
+                            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
+                                <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up">
+                                    <p class="font-bold text-primary-600 dark:text-white">✓ 5-Star Rated</p>
+                                </div>
+                                <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-100">
+                                    <p class="font-bold text-primary-600 dark:text-white">✓ 100+ Projects</p>
+                                </div>
+                                <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-200">
+                                    <p class="font-bold text-primary-600 dark:text-white">✓ 24-48 Hour Delivery</p>
+                                </div>
+                                <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-300">
+                                    <p class="font-bold text-primary-600 dark:text-white">✓ Unlimited Revisions</p>
+                                </div>
+                                 <div class="rounded-lg bg-primary-500/10 p-4 col-span-2 md:col-span-1 animate-fade-in-up delay-400">
+                                    <p class="font-bold text-primary-600 dark:text-white">✓ Commercial License</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="py-16 sm:py-24">
+                        <h2 class="text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Visual Showcase</h2>
+                        <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-12">
+                            <div class="flex flex-col gap-4 animate-fade-in-up">
+                                <div class="aspect-video w-full rounded-lg bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAdmGQeVEZqQ00q1jXG7uFFQiHsCazr49b_ty1jsEs1yMTF-fE2ecZPyD_zjVVKVe-wKYUklxpyiQACU_eEk2xxyIoIqCAb5oM0Z4Be5kWLYQnSnQtzxtAeo9lvvmp9yNDWRq7BOtFl9qucTSXPfvepXTVFzjr1EeF4jPLjdgp7kg1Yivp0oEDk8rKCbd-Htv0KgoQypdMEhVFLwIYaj4AUH5M_NIGNd-nBXJZkKzfHdEWrEQ2ZZksBJpL3KY4jLYsv7kYLPnKzPPs");'></div>
+                                <div>
+                                    <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">AI Illustration Sample - Fantasy Landscape</h3>
+                                </div>
+                            </div>
+                            <div class="flex flex-col gap-4 animate-fade-in-up delay-100">
+                                <div class="aspect-video w-full rounded-lg bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCXeH0ZBFxCjxfwcznootqxR1cDIHdBbS2Jsq6cO63JmEuy-F6OyJBtQHrvc77ZYiCcjPQYBQeEyiW7vB3dL0BgyVaM8lSvj5TCC3yPXvUwbuaF49T8HBSKA61s_JFOxTfnq7Cig7a7vJmZ7FHLgYN-7uQd0E90cM05GWrRWp0uF_32RKyDuqb8Nfm6-q5cVRVF5ooqMKwZNBen0_bod9YUZBQnQ-u9YV9HHvHgQyyKPMPL1qD2a5OqwXjrZrHKwVNwG4WyxmVBKSY");'></div>
+                                <div>
+                                    <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">Product Photography Mockup - Tech Device</h3>
+                                </div>
+                            </div>
+                            <div class="flex flex-col gap-4 animate-fade-in-up delay-200">
+                                <div class="aspect-video w-full rounded-lg bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAUSE9rGmoN7l48MyINrP0_sBfCC5EIGyjWZJ5BWCiZZA2fmSQl-YyhwEqR8tclSG1xAL5o5M5Tvqp9N4C_LxSpFZcPMVtf3USONL7hhp0y86s8OGWqX1YaK5xhSZxDCiNsr6oJ6mEBXrj10eQDUjkrIm1kycE-e-U7xyKx_jxptwwG7jG_1H-qlL20VXTLdu1l96AoPyBA-6zTXZNFamgPV13NQLnXX8mMAWthkSGWlkAybOAvVYJnNFxS-uloPjAW6MdsUdA9GWs");'></div>
+                                <div>
+                                    <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">Brand Asset Pack - Logo Variations</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                     <div class="my-16 flex flex-col items-center justify-center rounded-lg bg-gradient-to-r from-primary-500/10 to-secondary-500/10 py-16 text-center sm:my-24">
+                        <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                           Fast & Reliable. Perfectly Tailored. Full Commercial Rights.
+                        </h2>
+                         <p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">Based in UAE timezone with responsive support, quick communication, and clear revisions.</p>
+                        <div class="mt-8">
+                            <a href="#services" data-page="services" class="nav-link glow-button rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-8 py-3 text-base font-bold text-white transition-opacity hover:opacity-90">
+                                View Services & Packages
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- SERVICES PAGE -->
+            <section id="services" class="page-content">
+                 <div class="py-16 sm:py-24 bg-background-light/50 dark:bg-background-dark/50">
+                    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                        <div class="text-center">
+                            <h1 class="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl lg:text-6xl"> Services & Packages </h1>
+                            <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400"> Choose the perfect package for your project. All gigs include unlimited revisions and commercial-use licensing. </p>
+                        </div>
+                        <div class="mt-20 grid gap-8 lg:grid-cols-2 lg:gap-12">
+                            <!-- Gig Card 1 -->
+                            <div class="flex flex-col gap-4 overflow-hidden rounded-lg bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1 p-6">
+                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Custom AI Image Generation</h3>
+                                <p class="text-gray-600 dark:text-gray-400">From concept to final render — I'll create stunning, unique AI images tailored to your exact specifications. Perfect for marketing materials, social media content, product visuals, and creative projects.</p>
+                                <a href="#" class="mt-auto flex items-center gap-2 self-start rounded bg-primary-500/10 px-4 py-2 text-sm font-semibold text-primary-600 transition-colors hover:bg-primary-500/20">
+                                    Hire on Fiverr → <!-- FIVERR_GIG_URL_1 -->
+                                </a>
+                            </div>
+                            <!-- Gig Card 2 -->
+                            <div class="flex flex-col gap-4 overflow-hidden rounded-lg bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1 p-6">
+                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Professional Prompt Engineering</h3>
+                                <p class="text-gray-600 dark:text-gray-400">Get expertly crafted prompts that generate exactly what you envision. Perfect for teams running their own AI tools or creators who want repeatable, high-quality results.</p>
+                                <a href="#" class="mt-auto flex items-center gap-2 self-start rounded bg-primary-500/10 px-4 py-2 text-sm font-semibold text-primary-600 transition-colors hover:bg-primary-500/20">
+                                    Hire on Fiverr → <!-- FIVERR_GIG_URL_2 -->
+                                </a>
+                            </div>
+                            <!-- Gig Card 3 -->
+                            <div class="flex flex-col gap-4 overflow-hidden rounded-lg bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1 p-6">
+                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Creative Automation Workflow</h3>
+                                <p class="text-gray-600 dark:text-gray-400">Streamline your content creation with custom AI workflows. I'll build automated systems for batch image generation, style consistency, and seamless integration with your existing tools.</p>
+                                <a href="#" class="mt-auto flex items-center gap-2 self-start rounded bg-primary-500/10 px-4 py-2 text-sm font-semibold text-primary-600 transition-colors hover:bg-primary-500/20">
+                                    Hire on Fiverr → <!-- FIVERR_GIG_URL_3 -->
+                                </a>
+                            </div>
+                            <!-- Gig Card 4 -->
+                            <div class="flex flex-col gap-4 overflow-hidden rounded-lg bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1 p-6">
+                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Brand Visual Identity Pack</h3>
+                                <p class="text-gray-600 dark:text-gray-400">Complete visual branding package including logo variations, social media templates, and brand assets generated with consistent AI styling for cohesive brand identity.</p>
+                                <a href="#" class="mt-auto flex items-center gap-2 self-start rounded bg-primary-500/10 px-4 py-2 text-sm font-semibold text-primary-600 transition-colors hover:bg-primary-500/20">
+                                    Hire on Fiverr → <!-- FIVERR_GIG_URL_4 -->
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+</body>
+</html>

style.css

@@ -0,0 +1,28 @@
+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+
+.card p:last-child {
+	margin-bottom: 0;
+}