Hugging Face's logo

Spaces:
oldmonk69
/
gemini-ui-redesign
Running

App Files Community
12

html

#12
by oldmonk69 - opened
base: refs/heads/main
←
from: refs/pr/12
Discussion Files changed
+55
-427
Files changed (7) hide show
  1. gitattributes → .gitattributes +0 -0
  2. README.md +1 -0
  3. convert.sh +0 -96
  4. index.html +0 -303
  5. index.php +44 -0
  6. style.css +0 -28
  7. styles.css +10 -0
gitattributes → .gitattributes RENAMED
File without changes
README.md CHANGED
@@ -47,3 +47,4 @@ neuralnomadai/
47
  ├── styles.css
48
  └── assets/
49
  └── images/
 
 
47
  ├── styles.css
48
  └── assets/
49
  └── images/
50
+
convert.sh DELETED
@@ -1,96 +0,0 @@
1
-
2
- #!/usr/bin/env bash
3
- set -euo pipefail
4
-
5
- echo "==> Staticize: PHP → HTML conversion"
6
-
7
- # 1) Backup all PHP files preserving structure
8
- if [ -d "_backup_php" ]; then
9
- echo "[skip] _backup_php already exists"
10
- else
11
- echo "Backing up *.php to _backup_php/"
12
- find . -type f -name "*.php" -print0 | tar --null -T - -cf - | (mkdir -p _backup_php && tar -xf - -C _backup_php)
13
- fi
14
-
15
- # 2) Convert each .php to .html stripping PHP blocks
16
- echo "Converting PHP to HTML (strip <?php ... ?> blocks)"
17
- php_count=0
18
- while IFS= read -r -d '' f; do
19
- php_count=$((php_count+1))
20
- rel="${f#./}"
21
- out="${rel%.php}.html"
22
- outdir="$(dirname "$out")"
23
- mkdir -p "$outdir"
24
- # Remove all PHP code blocks including multiline
25
- # Note: GNU sed required. macOS: use 'gsed' (brew install gnu-sed) or run via Docker.
26
- sed -E 's/<\?php[\s\S]*?\?>//g' "$f" > "$out"
27
- done < <(find . -type f -name "*.php" -print0)
28
-
29
- echo "Converted $php_count PHP files."
30
-
31
- # 3) Rewrite internal links .php → .html across common text assets
32
- echo "Rewriting internal links from .php to .html"
33
- 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/*")
34
- while IFS= read -r file; do
35
- # Use in-place edit (GNU sed). macOS: gsed -i
36
- sed -i -E 's/\.php\b/.html/g' "$file" || true
37
- done <<< "$files_to_patch"
38
-
39
- # 4) Ensure index.html at repo root
40
- if [ ! -f "./index.html" ]; then
41
- if [ -f "./index.php" ]; then
42
- echo "Creating index.html from index.php"
43
- sed -E 's/<\?php[\s\S]*?\?>//g' "./index.php" > "./index.html"
44
- else
45
- echo "No index.php found; creating a minimal index.html"
46
- cat > ./index.html <<'EOF'
47
- <!DOCTYPE html>
48
- <html lang="en">
49
- <head>
50
- <meta charset="utf-8" />
51
- <meta name="viewport" content="width=device-width, initial-scale=1" />
52
- <title>Static Site</title>
53
- <link rel="stylesheet" href="/styles.css">
54
- <script src="/main.js" defer></script>
55
- <script src="/asset/include.js" defer></script>
56
- </head>
57
- <body>
58
- <div id="site-header"></div>
59
- <main style="padding: 2rem;">
60
- <h1>Static conversion complete</h1>
61
- <p>This page was generated because no index.php existed.</p>
62
- <p>Edit this file to match your layout.</p>
63
- </main>
64
- <div id="site-footer"></div>
65
- </body>
66
- </html>
67
- EOF
68
- fi
69
- fi
70
-
71
- # 5) Provision include system if not present
72
- mkdir -p asset/partials
73
- if [ ! -f "asset/include.js" ]; then
74
- cat > asset/include.js <<'EOF'
75
- async function inject(id, url){
76
- const el = document.getElementById(id);
77
- if (!el) return;
78
- const html = await (await fetch(url)).text();
79
- el.innerHTML = html;
80
- }
81
- document.addEventListener('DOMContentLoaded', () => {
82
- inject('site-header', '/asset/partials/header.html');
83
- inject('site-footer', '/asset/partials/footer.html');
84
- });
85
- EOF
86
- fi
87
-
88
- : > asset/partials/header.html
89
- : > asset/partials/footer.html
90
-
91
- # 6) Summary
92
- echo "==> Staticize complete."
93
- echo " - Backup of originals: _backup_php/"
94
- echo " - Entry point ensured: index.html"
95
- echo " - Include system: asset/include.js + asset/partials/{header,footer}.html"
96
- echo "Next: review pages, commit, push, and set Space runtime to Static."
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
index.html DELETED
@@ -1,303 +0,0 @@
1
- <!DOCTYPE html>
2
- <html class="dark" lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
6
- <title>NeuralNomadAI - Integrated Website</title>
7
-
8
- <!-- Google Fonts -->
9
- <link href="https://fonts.googleapis.com" rel="preconnect" />
10
- <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
11
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet" />
12
- <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
13
-
14
- <!-- Tailwind CSS -->
15
- <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
16
- <script>
17
- // Tailwind CSS Configuration
18
- tailwind.config = {
19
- darkMode: "class",
20
- theme: {
21
- extend: {
22
- colors: {
23
- primary: {
24
- 50: '#f0f9ff',
25
- 100: '#e0f2fe',
26
- 200: '#bae6fd',
27
- 300: '#7dd3fc',
28
- 400: '#38bdf8',
29
- 500: '#0ea5e9',
30
- 600: '#0284c7',
31
- 700: '#0369a1',
32
- 800: '#075985',
33
- 900: '#0c4a6e',
34
- },
35
- secondary: {
36
- 50: '#f5f3ff',
37
- 100: '#ede9fe',
38
- 200: '#ddd6fe',
39
- 300: '#c4b5fd',
40
- 400: '#a78bfa',
41
- 500: '#8b5cf6',
42
- 600: '#7c3aed',
43
- 700: '#6d28d9',
44
- 800: '#5b21b6',
45
- 900: '#4c1d95',
46
- },
47
- "background-light": "#f6f7f8",
48
- "background-dark": "#101c22",
49
- },
50
- fontFamily: {
51
- display: ["Space Grotesk", "sans-serif"],
52
- },
53
- borderRadius: {
54
- DEFAULT: "0.25rem",
55
- lg: "0.5rem",
56
- xl: "0.75rem",
57
- full: "9999px",
58
- },
59
- },
60
- },
61
- };
62
- </script>
63
- <style>
64
- /* Helper class to ensure smooth transitions */
65
- .page-content {
66
- display: none;
67
- opacity: 0;
68
- transition: opacity 0.3s ease-in-out;
69
- }
70
- .page-content.active {
71
- display: block;
72
- opacity: 1;
73
- }
74
-
75
- /* Scrollbar styling */
76
- ::-webkit-scrollbar {
77
- width: 8px;
78
- }
79
-
80
- ::-webkit-scrollbar-track {
81
- background: #f1f1f1;
82
- }
83
-
84
- ::-webkit-scrollbar-thumb {
85
- background: #c7d2fe;
86
- border-radius: 4px;
87
- }
88
-
89
- ::-webkit-scrollbar-thumb:hover {
90
- background: #8b5cf6;
91
- }
92
-
93
- .dark ::-webkit-scrollbar-track {
94
- background: #1e293b;
95
- }
96
-
97
- .dark ::-webkit-scrollbar-thumb {
98
- background: #4c1d95;
99
- }
100
-
101
- .dark ::-webkit-scrollbar-thumb:hover {
102
- background: #7c3aed;
103
- }
104
-
105
- /* Animation for cards */
106
- @keyframes fadeInUp {
107
- from {
108
- opacity: 0;
109
- transform: translateY(20px);
110
- }
111
- to {
112
- opacity: 1;
113
- transform: translateY(0);
114
- }
115
- }
116
-
117
- .animate-fade-in-up {
118
- animation: fadeInUp 0.6s ease-out forwards;
119
- }
120
-
121
- /* Glow effect for buttons */
122
- .glow-button {
123
- position: relative;
124
- overflow: hidden;
125
- }
126
-
127
- .glow-button::before {
128
- content: '';
129
- position: absolute;
130
- top: 0;
131
- left: -100%;
132
- width: 100%;
133
- height: 100%;
134
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
135
- transition: 0.5s;
136
- }
137
-
138
- .glow-button:hover::before {
139
- left: 100%;
140
- }
141
- </style>
142
- </head>
143
-
144
- <body class="bg-background-light dark:bg-background-dark font-display text-gray-800 dark:text-gray-200">
145
- <div class="flex min-h-screen w-full flex-col">
146
-
147
- <!-- Unified Header/Navigation -->
148
- <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">
149
- <div class="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3">
150
- <a href="#home" data-page="home" class="flex items-center gap-4 cursor-pointer">
151
- <svg class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
152
- <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>
153
- <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>
154
- </svg>
155
- <h1 class="text-xl font-bold text-gray-900 dark:text-white">NeuralNomadAI</h1>
156
- </a>
157
- <nav class="hidden items-center gap-8 md:flex">
158
- <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>
159
- <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>
160
- <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>
161
- <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>
162
- <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>
163
- <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>
164
- <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>
165
- </nav>
166
- <div class="flex items-center gap-4">
167
- <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>
168
- </div>
169
- </div>
170
- </header>
171
-
172
- <main class="flex-grow">
173
- <!-- Page Content Sections -->
174
-
175
- <!-- HOME PAGE -->
176
- <section id="home" class="page-content active">
177
- <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
178
- <div class="py-16 sm:py-24">
179
- <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");'>
180
- <div class="absolute inset-0 flex flex-col items-center justify-center gap-6">
181
- <div class="max-w-3xl">
182
- <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>
183
- <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>
184
- </div>
185
- <div class="mt-4 flex flex-wrap justify-center gap-4 animate-fade-in-up delay-200">
186
- <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 -->
187
- <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>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
192
- <div class="py-16 text-center sm:py-24">
193
- <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>
194
- <p class="mx-auto mt-4 max-w-3xl text-lg text-gray-600 dark:text-gray-400">
195
- 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.
196
- </p>
197
- </div>
198
- <div class="py-8">
199
- <div class="mx-auto max-w-7xl">
200
- <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
201
- <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up">
202
- <p class="font-bold text-primary-600 dark:text-white">✓ 5-Star Rated</p>
203
- </div>
204
- <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-100">
205
- <p class="font-bold text-primary-600 dark:text-white">✓ 100+ Projects</p>
206
- </div>
207
- <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-200">
208
- <p class="font-bold text-primary-600 dark:text-white">✓ 24-48 Hour Delivery</p>
209
- </div>
210
- <div class="rounded-lg bg-primary-500/10 p-4 animate-fade-in-up delay-300">
211
- <p class="font-bold text-primary-600 dark:text-white">✓ Unlimited Revisions</p>
212
- </div>
213
- <div class="rounded-lg bg-primary-500/10 p-4 col-span-2 md:col-span-1 animate-fade-in-up delay-400">
214
- <p class="font-bold text-primary-600 dark:text-white">✓ Commercial License</p>
215
- </div>
216
- </div>
217
- </div>
218
- </div>
219
-
220
- <div class="py-16 sm:py-24">
221
- <h2 class="text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Visual Showcase</h2>
222
- <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-12">
223
- <div class="flex flex-col gap-4 animate-fade-in-up">
224
- <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>
225
- <div>
226
- <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">AI Illustration Sample - Fantasy Landscape</h3>
227
- </div>
228
- </div>
229
- <div class="flex flex-col gap-4 animate-fade-in-up delay-100">
230
- <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>
231
- <div>
232
- <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">Product Photography Mockup - Tech Device</h3>
233
- </div>
234
- </div>
235
- <div class="flex flex-col gap-4 animate-fade-in-up delay-200">
236
- <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>
237
- <div>
238
- <h3 class="text-lg font-bold text-gray-900 dark:text-white text-center">Brand Asset Pack - Logo Variations</h3>
239
- </div>
240
- </div>
241
- </div>
242
- </div>
243
- <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">
244
- <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
245
- Fast & Reliable. Perfectly Tailored. Full Commercial Rights.
246
- </h2>
247
- <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>
248
- <div class="mt-8">
249
- <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">
250
- View Services & Packages
251
- </a>
252
- </div>
253
- </div>
254
- </div>
255
- </section>
256
-
257
- <!-- SERVICES PAGE -->
258
- <section id="services" class="page-content">
259
- <div class="py-16 sm:py-24 bg-background-light/50 dark:bg-background-dark/50">
260
- <div class="container mx-auto px-4 sm:px-6 lg:px-8">
261
- <div class="text-center">
262
- <h1 class="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl lg:text-6xl"> Services & Packages </h1>
263
- <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>
264
- </div>
265
- <div class="mt-20 grid gap-8 lg:grid-cols-2 lg:gap-12">
266
- <!-- Gig Card 1 -->
267
- <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">
268
- <h3 class="text-xl font-bold text-gray-900 dark:text-white">Custom AI Image Generation</h3>
269
- <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>
270
- <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">
271
- Hire on Fiverr → <!-- FIVERR_GIG_URL_1 -->
272
- </a>
273
- </div>
274
- <!-- Gig Card 2 -->
275
- <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">
276
- <h3 class="text-xl font-bold text-gray-900 dark:text-white">Professional Prompt Engineering</h3>
277
- <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>
278
- <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">
279
- Hire on Fiverr → <!-- FIVERR_GIG_URL_2 -->
280
- </a>
281
- </div>
282
- <!-- Gig Card 3 -->
283
- <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">
284
- <h3 class="text-xl font-bold text-gray-900 dark:text-white">Creative Automation Workflow</h3>
285
- <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>
286
- <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">
287
- Hire on Fiverr → <!-- FIVERR_GIG_URL_3 -->
288
- </a>
289
- </div>
290
- <!-- Gig Card 4 -->
291
- <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">
292
- <h3 class="text-xl font-bold text-gray-900 dark:text-white">Brand Visual Identity Pack</h3>
293
- <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>
294
- <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">
295
- Hire on Fiverr → <!-- FIVERR_GIG_URL_4 -->
296
- </a>
297
- </div>
298
- </div>
299
- </div>
300
- </div>
301
- </section>
302
- </body>
303
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
index.php ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ $pageSlug='home'; $pageTitle='NeuralNomadAI — Home'; $pageDesc='Creative AI imagery & automation.';
3
+ ob_start(); ?>
4
+ <div class="container">
5
+ <div id="hero" class="carousel slide mb-5" data-bs-ride="carousel">
6
+ <div class="carousel-inner rounded-4 shadow">
7
+ <div class="carousel-item active">
8
+ <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="">
9
+ <div class="carousel-caption">
10
+ <h1 class="display-5 fw-bold text-shadow">Creative imagery & automation</h1>
11
+ <p class="lead">Images, prompts & tools in 24–72h.</p>
12
+ <a class="btn btn-primary btn-lg me-2" href="services.php">Explore Services</a>
13
+ <a class="btn btn-outline-light btn-lg" href="portfolio.php">Portfolio</a>
14
+ </div>
15
+ </div>
16
+ <div class="carousel-item">
17
+ <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="">
18
+ </div>
19
+ </div>
20
+ <button class="carousel-control-prev" data-bs-target="#hero" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
21
+ <button class="carousel-control-next" data-bs-target="#hero" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
22
+ </div>
23
+
24
+ <div class="row g-3 text-center mb-5">
25
+ <?php foreach (['⭐ 5-Star Rated','⚡ 24–72h Delivery','🎯 Commercial License','💬 Fast Communication','📦 100+ Projects'] as $b): ?>
26
+ <div class="col-6 col-md"><div class="badge-pill"><?= $b ?></div></div>
27
+ <?php endforeach; ?>
28
+ </div>
29
+
30
+ <div class="text-center mb-4">
31
+ <h2 class="fw-bold">What we do</h2><p class="text-secondary">AI image creation, prompt engineering, and creator automation.</p>
32
+ </div>
33
+ <div class="row g-4">
34
+ <div class="col-md-6"><div class="card h-100 shadow-sm"><div class="card-body">
35
+ <h5 class="card-title">Bespoke AI Image Creation</h5><p class="card-text">High-res visuals tailored to your brief.</p>
36
+ <a class="link-primary" href="services.php">See pricing →</a>
37
+ </div></div></div>
38
+ <div class="col-md-6"><div class="card h-100 shadow-sm"><div class="card-body">
39
+ <h5 class="card-title">Prompt Engineering & Tuning</h5><p class="card-text">Consistency and brand fidelity at scale.</p>
40
+ <a class="link-primary" href="services.php">See pricing →</a>
41
+ </div></div></div>
42
+ </div>
43
+ </div>
44
+ <?php $content=ob_get_clean(); include 'template.php'; ?>
style.css DELETED
@@ -1,28 +0,0 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
styles.css ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ html,body{font-family:"Space Grotesk",system-ui,ui-sans-serif,sans-serif}
2
+ .object-fit-cover{object-fit:cover}
3
+ .text-shadow{ text-shadow:0 2px 20px rgba(0,0,0,.45) }
4
+ .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}
5
+ .navbar.scrolled{backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,.06)}
6
+ .nav-link.active{color:var(--bs-primary)!important; font-weight:600}
7
+ .portfolio-card img{object-fit:cover; aspect-ratio:4/3}
8
+ .card{border-radius:12px; box-shadow:0 8px 30px rgba(2,12,27,.08)}
9
+ @keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
10
+ .animate-fade-in-up{animation:fadeInUp .6s ease both}