Hugging Face's logo

Spaces:
oldmonk69
/
neuralnomadai-studio
Running

App Files Community
oldmonk69 commited on
Commit
b6b0825
·
verified ·
1 Parent(s): 21ccea2

create a website with full working <!DOCTYPE html>

Browse files

<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&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: "#1193d4",
"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;
}
.page-content.active {
display: block;
}
</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" 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 dark:hover:text-primary transition-colors" href="#home" data-page="home">Home</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#services" data-page="services">Services</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#portfolio" data-page="portfolio">Portfolio</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#pricing" data-page="pricing">Pricing</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#testimonials" data-page="testimonials">Testimonials</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#about" data-page="about">About</a>
<a class="nav-link text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#contact" data-page="contact">Contact</a>
</nav>
<div class="flex items-center gap-4">
<a href="#contact" data-page="contact" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-bold text-white shadow-sm transition-all hover:opacity-90">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">Get Stunning AI Images That Match Your Brief — Fast</h1>
<p class="mt-4 text-lg text-gray-200">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">
<a href="#" class="rounded-lg bg-primary 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/10 p-4">
<p class="font-bold text-primary dark:text-white">✓ 5-Star Rated</p>
</div>
<div class="rounded-lg bg-primary/10 p-4">
<p class="font-bold text-primary dark:text-white">✓ 100+ Projects</p>
</div>
<div class="rounded-lg bg-primary/10 p-4">
<p class="font-bold text-primary dark:text-white">✓ 24-48 Hour Delivery</p>
</div>
<div class="rounded-lg bg-primary/10 p-4">
<p class="font-bold text-primary dark:text-white">✓ Unlimited Revisions</p>
<

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +801 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Neuralnomadai Studio
3
- emoji: 🏆
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: NeuralNomadAI Studio
3
+ colorFrom: gray
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,802 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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">AI-Powered Image Transformations</h3>
285
+ <p class="text-gray-600 dark:text-gray-400">Transform existing images into new styles, enhance quality, change backgrounds, or reimagine products. Your photos, elevated with AI precision.</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">Complete AI Brand Asset Packages</h3>
293
+ <p class="text-gray-600 dark:text-gray-400">Build your visual brand identity with cohesive AI-generated assets. Get logos, icons, social templates, and more — all matching your brand aesthetic perfectly.</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
+ <!-- Gig Card 5 -->
299
+ <div class="lg:col-span-2 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">
300
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white">Custom AI Workflow Automation</h3>
301
+ <p class="text-gray-600 dark:text-gray-400">Stop doing repetitive creative tasks manually. I'll build custom automation tools that generate images, process content, or streamline your creative workflow.</p>
302
+ <a href="#contact" data-page="contact" class="nav-link mt-auto flex items-center gap-2 self-start rounded bg-gradient-to-r from-primary-500/10 to-secondary-500/10 px-4 py-2 text-sm font-semibold text-primary-600 transition-colors hover:bg-primary-500/20">
303
+ Contact for Custom Quote →
304
+ </a>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Gemini AI Prompt Ideator -->
309
+ <div class="mt-16 sm:mt-24">
310
+ <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
311
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
312
+ ✨ AI Prompt Ideator
313
+ </h2>
314
+ <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
315
+ Have an idea? Let our AI expand it into a rich, detailed prompt perfect for any image generator.
316
+ </p>
317
+ <div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
318
+ <input id="prompt-input" type="text" class="form-input block w-full rounded-lg border-gray-300 dark:border-gray-700 bg-background-light p-3 text-base text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500 dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="e.g., a cat astronaut on Mars">
319
+ <button id="generate-prompt-btn" 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 shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
320
+ Generate Prompt
321
+ </button>
322
+ </div>
323
+ <div id="prompt-loading" class="mt-6 text-gray-500 dark:text-gray-400 hidden">
324
+ <div class="flex justify-center items-center">
325
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
326
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
327
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
328
+ </svg>
329
+ Generating...
330
+ </div>
331
+ </div>
332
+ <div id="prompt-result" class="mt-6 p-6 bg-primary-500/10 dark:bg-primary-500/20 rounded-lg text-left text-gray-700 dark:text-gray-300 hidden whitespace-pre-wrap font-mono"></div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Gemini AI Image Playground -->
337
+ <div class="mt-16 sm:mt-24">
338
+ <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
339
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
340
+ ✨ AI Image Playground
341
+ </h2>
342
+ <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
343
+ Try it yourself! Enter a prompt below and see what our AI can create.
344
+ </p>
345
+ <div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
346
+ <input id="image-prompt-input" type="text" class="form-input block w-full rounded-lg border-gray-300 dark:border-gray-700 bg-background-light p-3 text-base text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500 dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="e.g., photo of a futuristic city at sunset">
347
+ <button id="generate-image-btn" 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 shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
348
+ Generate Image
349
+ </button>
350
+ </div>
351
+ <div id="image-loading" class="mt-8 text-gray-500 dark:text-gray-400 hidden">
352
+ <div class="flex flex-col justify-center items-center">
353
+ <svg class="animate-spin h-8 w-8 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
354
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
355
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
356
+ </svg>
357
+ <p class="mt-4">Generating your image... this may take a moment.</p>
358
+ </div>
359
+ </div>
360
+ <div id="image-result" class="mt-8 mx-auto max-w-lg"></div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- PORTFOLIO PAGE -->
368
+ <section id="portfolio" class="page-content">
369
+ <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
370
+ <div class="max-w-3xl mx-auto text-center">
371
+ <h2 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Featured Work</h2>
372
+ <p class="mt-4 text-lg text-gray-500 dark:text-gray-400">Real projects. Real results. See what NeuralNomadAI can create for you.</p>
373
+ </div>
374
+ <div class="mt-10 flex flex-wrap items-center justify-center gap-2">
375
+ <button class="flex items-center gap-1 rounded-lg bg-primary-500/10 px-3 py-1.5 text-sm font-semibold text-primary-600 dark:bg-primary-500/20">All Projects</button>
376
+ <button class="flex items-center gap-1 rounded-lg bg-gray-200/50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-200/80 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700/80">Illustration</button>
377
+ <button class="flex items-center gap-1 rounded-lg bg-gray-200/50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-200/80 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700/80">Photoreal</button>
378
+ <button class="flex items-center gap-1 rounded-lg bg-gray-200/50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-200/80 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700/80">Logo/Icon</button>
379
+ <button class="flex items-center gap-1 rounded-lg bg-gray-200/50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-200/80 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700/80">UI Mockups</button>
380
+ </div>
381
+ <div class="mt-8 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
382
+ <div class="group relative cursor-pointer">
383
+ <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
384
+ <img alt="Fantasy Game Character Set" class="h-full w-full object-cover object-center transition-all duration-300 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvmGE_Zb6aPm670pgnpAw0KRDfSds0OYsFgEE6rmjvuivARi9h6IWaiVQW1ZWTDIjL2oBEcUSKn1ZjY095Ib5et_egVNlXW-0hgCV-FQxBoFg6vwYM5C-c_ZTFb-5iHUCf7ojvDirc7fJW8Qx2sUXXflh4SajNyEd-I8t53xE9KaMTYe8ezoOS58dcHCQihbQNPeRf03ouoRBbt3lBlSFI5IEW7yP70y25SWX7uzeD-HRwyCFPtxtDWIV-pUH5FYlrwXVr3_Qzx6A" />
385
+ </div>
386
+ <div class="mt-4">
387
+ <h3 class="text-base font-semibold text-gray-900 dark:text-white">Fantasy Game Character Set</h3>
388
+ <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Complete character design set for indie game studio.</p>
389
+ </div>
390
+ </div>
391
+ <div class="group relative cursor-pointer">
392
+ <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
393
+ <img alt="E-commerce Product Photos" class="h-full w-full object-cover object-center transition-all duration-300 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCf5Ps3QleE-F33B4KDZcflMUksI6HRREaJoudX0ZoG2Ue0fBI_ILCEwqFVQQIgd-oxbGik67Xg-W9F_u1bgmUO_9IV8kTjspAlKLlVoQ1nRx8pibtdHPxa_qMJuE4J832rz7cvGUACe2UGdoA57ht-XGTDUOqLwUPuct8mwYkaqwwbCNPIsUE3BJ8Y-ZMQZiNEOvBrihQmr33O9Kgn5Zn74Fs8sVv8cmwUbfw8aAZeW70Jn2xSFRD13ALBiUxEYxmq8cdu9tp6kmI" />
394
+ </div>
395
+ <div class="mt-4">
396
+ <h3 class="text-base font-semibold text-gray-900 dark:text-white">E-commerce Product Photos</h3>
397
+ <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Photorealistic product shots for Shopify store.</p>
398
+ </div>
399
+ </div>
400
+ <div class="group relative cursor-pointer">
401
+ <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
402
+ <img alt="Tech Startup Brand Kit" class="h-full w-full object-cover object-center transition-all duration-300 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA36P72EMqTe2X7fbfV_7VGqGS3FfPVNYFeWvJvxvIOqYdIMpyOFBxJYxZy8TjhnlW_XxKTG2Dp8PJWxK9TETDSEWhGJXwTjmRswFJZ1EOqMfO2dY3QbocVAS_xuNBn1hTnJsH1CVUTKp0xOhlU_JJ00Hmucc0AQgi1hBvSC-FCH3tv5CuRnlKyVPpkUagmJENVb9yEqgEpEnXnqHlKAzL7bmNvPFhauhbgcOM5G9xFa6LnHgXjXTLEsgONd57sE2x1lZm8bQM9fzc" />
403
+ </div>
404
+ <div class="mt-4">
405
+ <h3 class="text-base font-semibold text-gray-900 dark:text-white">Tech Startup Brand Kit</h3>
406
+ <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Complete visual identity for SaaS startup.</p>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- PRICING PAGE -->
414
+ <section id="pricing" class="page-content">
415
+ <div class="flex flex-1 justify-center py-10 sm:py-16 md:py-20">
416
+ <div class="flex flex-col max-w-7xl flex-1 px-4 sm:px-6 lg:px-8">
417
+ <div class="text-center mb-12">
418
+ <h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900 dark:text-white">Transparent Pricing, Exceptional Value</h1>
419
+ <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Choose the package that fits your project. All include unlimited revisions and commercial licensing.</p>
420
+ </div>
421
+
422
+ <div class="overflow-x-auto">
423
+ <table class="w-full min-w-max text-left">
424
+ <thead>
425
+ <tr class="bg-gradient-to-r from-primary-500/10 to-secondary-500/10">
426
+ <th class="p-4 font-bold">Package Tier</th>
427
+ <th class="p-4 font-bold text-center">Basic</th>
428
+ <th class="p-4 font-bold text-center">Standard</th>
429
+ <th class="p-4 font-bold text-center">Premium</th>
430
+ </tr>
431
+ </thead>
432
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
433
+ <tr><td class="p-4 font-bold bg-gray-100 dark:bg-gray-800" colspan="4">Deliverables</td></tr>
434
+ <tr><td class="p-4">Image Count</td><td class="p-4 text-center">3-5 images</td><td class="p-4 text-center">10-15 images</td><td class="p-4 text-center">20-30 images</td></tr>
435
+ <tr><td class="p-4">Resolution</td><td class="p-4 text-center">Up to 2K (2048px)</td><td class="p-4 text-center">Up to 4K (4096px)</td><td class="p-4 text-center">Up to 8K (8192px)</td></tr>
436
+ <tr><td class="p-4 font-bold bg-gray-100 dark:bg-gray-800" colspan="4">Included</td></tr>
437
+ <tr><td class="p-4">Commercial License</td><td class="p-4 text-center text-primary-600">✓</td><td class="p-4 text-center text-primary-600">✓</td><td class="p-4 text-center text-primary-600">✓</td></tr>
438
+ <tr><td class="p-4">Unlimited Revisions</td><td class="p-4 text-center text-primary-600">✓</td><td class="p-4 text-center text-primary-600">✓</td><td class="p-4 text-center text-primary-600">✓</td></tr>
439
+ <tr><td class="p-4">Prompt Documentation</td><td class="p-4 text-center">✗</td><td class="p-4 text-center text-primary-600">✓</td><td class="p-4 text-center text-primary-600">✓</td></tr>
440
+ <tr><td class="p-4 font-bold bg-gray-100 dark:bg-gray-800" colspan="4">Delivery & Support</td></tr>
441
+ <tr><td class="p-4">Turnaround Time</td><td class="p-4 text-center">48-72 hours</td><td class="p-4 text-center">24-48 hours</td><td class="p-4 text-center">24 hours</td></tr>
442
+ <tr><td class="p-4">Priority Support</td><td class="p-4 text-center">✗</td><td class="p-4 text-center">✗</td><td class="p-4 text-center text-primary-600">✓</td></tr>
443
+ </tbody>
444
+ </table>
445
+ </div>
446
+
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- TESTIMONIALS PAGE -->
452
+ <section id="testimonials" class="page-content">
453
+ <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
454
+ <div class="max-w-4xl mx-auto">
455
+ <div class="mb-16">
456
+ <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-2">What Clients Say</h2>
457
+ <p class="text-center text-lg text-gray-600 dark:text-gray-400 mb-8">Real feedback from real projects. Your success is my priority.</p>
458
+ <div class="space-y-8">
459
+ <div class="bg-background-light dark:bg-gray-800/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800 transition-all hover:shadow-lg">
460
+ <p class="text-gray-600 dark:text-gray-300 italic">"NeuralNomadAI delivered exactly what I envisioned — even better than I expected. The turnaround was incredibly fast, and the unlimited revisions meant we got it perfect. Highly recommend!"</p>
461
+ <p class="font-bold text-gray-900 dark:text-white mt-4">- Sarah M., Marketing Director</p>
462
+ </div>
463
+ <div class="bg-background-light dark:bg-gray-800/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800 transition-all hover:shadow-lg">
464
+ <p class="text-gray-600 dark:text-gray-300 italic">"I've worked with several AI artists, but this is the first time someone truly understood my brand aesthetic. The prompts were documented perfectly so I can replicate the style myself. Worth every penny."</p>
465
+ <p class="font-bold text-gray-900 dark:text-white mt-4">- James K., E-commerce Entrepreneur</p>
466
+ </div>
467
+ <div class="bg-background-light dark:bg-gray-800/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800 transition-all hover:shadow-lg">
468
+ <p class="text-gray-600 dark:text-gray-300 italic">"Fast, professional, and incredibly talented. The custom automation tool saves me 10+ hours every week. This was a game-changer for my content production workflow."</p>
469
+ <p class="font-bold text-gray-900 dark:text-white mt-4">- Lisa R., Content Creator</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ <div>
474
+ <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-8">Why Thousands Trust NeuralNomadAI</h2>
475
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 text-center">
476
+ <div class="bg-gradient-to-br from-primary-500/10 to-secondary-500/10 p-6 rounded-lg transition-all hover:shadow-lg">
477
+ <p class="text-2xl font-bold text-primary-600">🏆</p>
478
+ <p class="text-lg font-semibold text-gray-900 dark:text-white mt-2">Top Rated Seller</p>
479
+ <p class="text-gray-600 dark:text-gray-400">Consistently 5-star ratings</p>
480
+ </div>
481
+ <div class="bg-gradient-to-br from-primary-500/10 to-secondary-500/10 p-6 rounded-lg transition-all hover:shadow-lg">
482
+ <p class="text-2xl font-bold text-primary-600">✅</p>
483
+ <p class="text-lg font-semibold text-gray-900 dark:text-white mt-2">100+ Projects Completed</p>
484
+ <p class="text-gray-600 dark:text-gray-400">Proven track record</p>
485
+ </div>
486
+ <div class="bg-gradient-to-br from-primary-500/10 to-secondary-500/10 p-6 rounded-lg transition-all hover:shadow-lg">
487
+ <p class="text-2xl font-bold text-primary-600">🚀</p>
488
+ <p class="text-lg font-semibold text-gray-900 dark:text-white mt-2">24-Hour Response Time</p>
489
+ <p class="text-gray-600 dark:text-gray-400">Quick communication</p>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <!-- ABOUT PAGE -->
498
+ <section id="about" class="page-content">
499
+ <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
500
+ <div class="max-w-4xl mx-auto">
501
+ <div class="text-center mb-12">
502
+ <h2 class="text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-5xl">About NeuralNomadAI</h2>
503
+ <p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">Where creativity meets cutting-edge AI technology.</p>
504
+ </div>
505
+ <div class="space-y-12">
506
+ <div class="text-left">
507
+ <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Who We Are & Our Mission</h3>
508
+ <p class="text-slate-600 dark:text-slate-400 leading-relaxed">NeuralNomadAI is your partner in visual innovation. We specialize in creating stunning, custom AI-generated imagery that helps bold creators and ambitious brands stand out. Our mission is to democratize professional-quality visual content. Whether you're a solo entrepreneur, a growing startup, or an established brand, you deserve imagery that matches your vision — without the traditional barriers of cost, time, or access to top-tier designers.</p>
509
+ </div>
510
+ <div class="text-left">
511
+ <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-8">Core Capabilities</h3>
512
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
513
+ <div class="p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md transition-all hover:shadow-lg">
514
+ <h4 class="font-bold text-slate-900 dark:text-white mb-2">AI Image Generation</h4>
515
+ <p class="text-sm text-slate-600 dark:text-slate-400">Expert-level prompt engineering across Midjourney, DALL-E, & Stable Diffusion.</p>
516
+ </div>
517
+ <div class="p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md transition-all hover:shadow-lg">
518
+ <h4 class="font-bold text-slate-900 dark:text-white mb-2">Style Adaptation</h4>
519
+ <p class="text-sm text-slate-600 dark:text-slate-400">From photorealistic to illustrative, any aesthetic, perfectly executed.</p>
520
+ </div>
521
+ <div class="p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md transition-all hover:shadow-lg">
522
+ <h4 class="font-bold text-slate-900 dark:text-white mb-2">Technical Excellence</h4>
523
+ <p class="text-sm text-slate-600 dark:text-slate-400">High-resolution outputs, proper formatting, and commercial-ready deliverables.</p>
524
+ </div>
525
+ <div class="p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md transition-all hover:shadow-lg">
526
+ <h4 class="font-bold text-slate-900 dark:text-white mb-2">Workflow Automation</h4>
527
+ <p class="text-sm text-slate-600 dark:text-slate-400">Custom scripts that streamline repetitive creative tasks and scale content production.</p>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ <div class="text-left">
532
+ <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Tools & Technology</h3>
533
+ <p class="text-slate-600 dark:text-slate-400 leading-relaxed"><b>Primary AI Platforms:</b> Midjourney (v5-6), DALL-E 3, Stable Diffusion (XL, custom models), ComfyUI workflows. <br><b>Supporting Tools:</b> Adobe Photoshop, Python automation scripts, API integrations, and Quality upscaling.</p>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <!-- CONTACT PAGE -->
541
+ <section id="contact" class="page-content">
542
+ <div class="flex flex-1 justify-center py-12 sm:py-16 md:py-20">
543
+ <div class="container mx-auto flex max-w-7xl flex-col gap-12 px-4 sm:px-6">
544
+ <div class="text-center">
545
+ <h1 class="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">Let's Build Something Amazing</h1>
546
+ <p class="mx-auto mt-4 max-w-2xl text-gray-600 dark:text-gray-400">Ready to start? The fastest way is to hire me directly on Fiverr.</p>
547
+ <div class="mt-8">
548
+ <a href="#" class="glow-button rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-8 py-4 text-lg font-bold text-white shadow-lg hover:bg-primary/90 transition-all">
549
+ 🔥 Browse My Fiverr Gigs → <!-- FIVERR_PROFILE_URL -->
550
+ </a>
551
+ </div>
552
+ </div>
553
+
554
+ <!-- Gemini AI Project Ideator -->
555
+ <div class="my-12 text-center">
556
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
557
+ ✨ Need a Custom Project Quote?
558
+ </h2>
559
+ <p class="mx-auto mt-4 max-w-2xl text-gray-600 dark:text-gray-400">
560
+ For custom projects, enterprise solutions, or retainer arrangements, let my AI help you brainstorm, then reach out directly via email.
561
+ </p>
562
+ <div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
563
+ <select id="industry-select" class="form-select block w-full rounded-lg border-gray-300 dark:border-gray-700 bg-background-light p-3 text-base text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:bg-background-dark dark:text-white">
564
+ <option>E-commerce Store</option>
565
+ <option>Content Creator / YouTuber</option>
566
+ <option>Small Business Owner</option>
567
+ <option>Musician or Artist</option>
568
+ <option>Restaurant Owner</option>
569
+ </select>
570
+ <button id="generate-ideas-btn" 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 shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
571
+ Get Project Ideas
572
+ </button>
573
+ </div>
574
+ <div id="ideas-loading" class="mt-6 text-gray-500 dark:text-gray-400 hidden">
575
+ <div class="flex justify-center items-center">
576
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
577
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
578
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
579
+ </svg>
580
+ Generating ideas...
581
+ </div>
582
+ </div>
583
+ <div id="ideas-result" class="mt-6 p-6 bg-primary-500/10 dark:bg-primary-500/20 rounded-lg text-left text-gray-700 dark:text-gray-300 hidden"></div>
584
+ </div>
585
+
586
+ <div class="text-center">
587
+ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Direct Contact</h3>
588
+ <div class="mt-4 space-y-2">
589
+ <p class="font-medium text-lg"><strong>Email for custom quotes:</strong> <a class="text-primary-600 hover:underline" href="mailto:[email protected]">[email protected]</a></p> <!-- REPLACE_WITH_EMAIL -->
590
+ <p class="text-gray-600 dark:text-gray-400">Typical response time: Under 6 hours during business days (Sunday-Thursday, 9 AM - 6 PM GST)</p>
591
+ </div>
592
+ </div>
593
+
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ </main>
599
+
600
+ <!-- Unified Footer -->
601
+ <footer class="bg-background-light dark:bg-background-dark border-t border-gray-200/10">
602
+ <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
603
+ <div class="flex flex-col items-center justify-center gap-6">
604
+ <div class="flex items-center gap-4">
605
+ <a href="#" class="text-gray-500 hover:text-primary-500">Fiverr</a> <!-- FIVERR_PROFILE_URL -->
606
+ <a href="#" class="text-gray-500 hover:text-primary-500">LinkedIn</a> <!-- LINKEDIN_URL -->
607
+ <a href="#" class="text-gray-500 hover:text-primary-500">Instagram</a> <!-- INSTAGRAM_URL -->
608
+ </div>
609
+ <div class="text-center text-sm text-gray-500 dark:text-gray-400">
610
+ <p>© 2024-2025 NeuralNomadAI. All rights reserved.</p>
611
+ <p>Client files and project briefs remain strictly confidential. Your work is never used in my portfolio without explicit permission.</p>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </footer>
616
+ </div>
617
+
618
+ <!-- Navigation and Gemini API JavaScript -->
619
+ <script>
620
+ document.addEventListener('DOMContentLoaded', () => {
621
+ // --- Navigation Logic ---
622
+ const navLinks = document.querySelectorAll('.nav-link, [data-page]');
623
+ const pages = document.querySelectorAll('.page-content');
624
+
625
+ const showPage = (pageId) => {
626
+ pages.forEach(page => page.classList.remove('active'));
627
+ const activePage = document.getElementById(pageId);
628
+ if (activePage) {
629
+ activePage.classList.add('active');
630
+ } else {
631
+ document.getElementById('home').classList.add('active');
632
+ }
633
+ document.querySelectorAll('.nav-link').forEach(link => {
634
+ link.classList.remove('text-primary-500', 'font-bold');
635
+ link.classList.add('text-gray-600', 'dark:text-gray-300');
636
+ if (link.getAttribute('data-page') === pageId) {
637
+ link.classList.remove('text-gray-600', 'dark:text-gray-300');
638
+ link.classList.add('text-primary-500', 'font-bold');
639
+ }
640
+ });
641
+ window.scrollTo(0, 0);
642
+ };
643
+
644
+ navLinks.forEach(link => {
645
+ link.addEventListener('click', (e) => {
646
+ e.preventDefault();
647
+ const pageId = link.getAttribute('data-page');
648
+ history.pushState({ page: pageId }, pageId, `#${pageId}`);
649
+ showPage(pageId);
650
+ });
651
+ });
652
+
653
+ window.onpopstate = (event) => {
654
+ const pageId = event.state ? event.state.page : (window.location.hash.substring(1) || 'home');
655
+ showPage(pageId);
656
+ };
657
+
658
+ const initialPageId = window.location.hash.substring(1) || 'home';
659
+ showPage(initialPageId);
660
+
661
+ // --- Gemini API Integration ---
662
+ const callGeminiApi = async (prompt, resultElement, loadingElement) => {
663
+ loadingElement.style.display = 'flex';
664
+ resultElement.style.display = 'none';
665
+ resultElement.innerHTML = '';
666
+
667
+ const apiKey = ""; // Leave as-is
668
+ const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
669
+
670
+ const payload = { contents: [{ parts: [{ text: prompt }] }] };
671
+
672
+ try {
673
+ const response = await fetch(apiUrl, {
674
+ method: 'POST',
675
+ headers: { 'Content-Type': 'application/json' },
676
+ body: JSON.stringify(payload)
677
+ });
678
+ if (!response.ok) throw new Error(`API call failed with status: ${response.status}`);
679
+
680
+ const result = await response.json();
681
+ const candidate = result.candidates?.[0];
682
+
683
+ if (candidate && candidate.content?.parts?.[0]?.text) {
684
+ let htmlContent = candidate.content.parts[0].text;
685
+ htmlContent = htmlContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
686
+ resultElement.innerHTML = htmlContent;
687
+ } else {
688
+ resultElement.textContent = 'Sorry, the response was empty. Please try again.';
689
+ }
690
+ } catch (error) {
691
+ console.error('Gemini API call error:', error);
692
+ resultElement.textContent = `An error occurred: ${error.message}.`;
693
+ } finally {
694
+ loadingElement.style.display = 'none';
695
+ resultElement.style.display = 'block';
696
+ }
697
+ };
698
+
699
+ const callImagenApi = async (prompt, resultContainer, loadingElement) => {
700
+ loadingElement.style.display = 'flex';
701
+ resultContainer.innerHTML = '';
702
+
703
+ const apiKey = ""; // Leave as-is
704
+ const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
705
+
706
+ const payload = {
707
+ instances: [{ prompt: prompt }],
708
+ parameters: { "sampleCount": 1 }
709
+ };
710
+
711
+ try {
712
+ const response = await fetch(apiUrl, {
713
+ method: 'POST',
714
+ headers: { 'Content-Type': 'application/json' },
715
+ body: JSON.stringify(payload)
716
+ });
717
+
718
+ if (!response.ok) {
719
+ throw new Error(`API call failed with status: ${response.status}`);
720
+ }
721
+
722
+ const result = await response.json();
723
+ const prediction = result.predictions?.[0];
724
+
725
+ if (prediction && prediction.bytesBase64Encoded) {
726
+ const imageUrl = `data:image/png;base64,${prediction.bytesBase64Encoded}`;
727
+ resultContainer.innerHTML = `<img src="${imageUrl}" alt="AI generated image of ${prompt}" class="rounded-lg shadow-lg mx-auto">`;
728
+ } else {
729
+ resultContainer.innerHTML = `<p class="text-red-500">Sorry, the image could not be generated. The response might be empty or contain sensitive content.</p>`;
730
+ }
731
+ } catch (error) {
732
+ console.error('Imagen API call error:', error);
733
+ resultContainer.innerHTML = `<p class="text-red-500">An error occurred: ${error.message}.</p>`;
734
+ } finally {
735
+ loadingElement.style.display = 'none';
736
+ }
737
+ };
738
+
739
+ // Event Listener for Prompt Generator
740
+ document.getElementById('generate-prompt-btn')?.addEventListener('click', () => {
741
+ const userInput = document.getElementById('prompt-input').value;
742
+ if (!userInput.trim()) return;
743
+ const systemPrompt = `You are an expert prompt engineer for AI image generators. Take the user's simple idea and transform it into a rich, detailed, artistic prompt of about 50-70 words. The user's idea is: "${userInput}"`;
744
+ callGeminiApi(systemPrompt, document.getElementById('prompt-result'), document.getElementById('prompt-loading'));
745
+ });
746
+
747
+ // Event Listener for Project Idea Generator
748
+ document.getElementById('generate-ideas-btn')?.addEventListener('click', () => {
749
+ const industry = document.getElementById('industry-select').value;
750
+ const systemPrompt = `You are a creative strategist at NeuralNomadAI. A potential client from the "${industry}" industry is looking for project ideas. Generate 3 concise and exciting project ideas combining AI and creativity. Frame them as services NeuralNomadAI could provide. Format as a numbered list with bold titles.`;
751
+ callGeminiApi(systemPrompt, document.getElementById('ideas-result'), document.getElementById('ideas-loading'));
752
+ });
753
+
754
+ // Event Listener for Image Playground
755
+ document.getElementById('generate-image-btn')?.addEventListener('click', () => {
756
+ const userInput = document.getElementById('image-prompt-input').value;
757
+ if (!userInput.trim()) return;
758
+ callImagenApi(userInput, document.getElementById('image-result'), document.getElementById('image-loading'));
759
+ });
760
+
761
+ });
762
+ </script>
763
+ </body>
764
  </html>
765
+
766
+
767
+ ## Key Improvements Made:
768
+
769
+ ### 1. **Color System Enhancement**
770
+ - Added complete primary color palette (blue-based) with all Tailwind shades
771
+ - Added complete secondary color palette (violet-based) with all Tailwind shades
772
+ - Updated all color references to use the new system (primary-500, secondary-600, etc.)
773
+
774
+ ### 2. **Visual Enhancements**
775
+ - Added smooth fade-in animations for content
776
+ - Implemented card hover effects with subtle elevation
777
+ - Created gradient backgrounds for key sections
778
+ - Added glow effect to important buttons
779
+ - Improved scrollbar styling for both light/dark modes
780
+
781
+ ### 3. **User Experience Improvements**
782
+ - Enhanced button interactions with hover animations
783
+ - Added transition effects for smoother page navigation
784
+ - Improved form element styling with consistent focus states
785
+ - Better visual hierarchy with updated typography
786
+
787
+ ### 4. **Performance Optimizations**
788
+ - Added CSS animations instead of heavy JavaScript libraries
789
+ - Optimized hover effects with CSS transforms
790
+ - Reduced unnecessary DOM manipulations
791
+
792
+ ### 5. **Accessibility Improvements**
793
+ - Better contrast ratios for text elements
794
+ - Consistent focus states for interactive elements
795
+ - Semantic HTML structure maintained
796
+
797
+ ### 6. **Code Organization**
798
+ - Cleaned up CSS with organized custom styles
799
+ - Removed redundant classes
800
+ - Improved class naming consistency
801
+
802
+ The site now has a more cohesive design language with the new color scheme while maintaining all functionality. The visual enhancements make the interface more engaging without compromising performance.