Hugging Face's logo

Spaces:
oldmonk69
/
gemini-ui-revamp
Running

App Files Community
gemini-ui-revamp / index.html
oldmonk69's picture
oldmonk69
To ensure proper alignment, formatting, line spacing and font selection are appropriate, one must pay close attention to details during the writing process.
50080a7 verified
raw
history blame
65.8 kB
 <!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: "#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>
/* Typography and Layout Improvements */
body {
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont,
sans-serif;
line-height: 1.6;
letter-spacing: 0.01em;
}
h1, h2, h3, h4 {
letter-spacing: -0.025em;
line-height: 1.2;
}
p {
max-width: 65ch;
}
/* Helper class to ensure smooth transitions */
.page-content {
display: none;
}
.page-content.active {
display: block;
}
/* Consistent spacing */
section {
padding: 4rem 0;
}
/* Better form controls */
input, textarea, select {
transition: all 0.2s ease;
padding: 0.75rem 1rem;
}
/* Improved button styling */
button {
transition: all 0.2s ease;
}
/* Grid and flex consistency */
.grid {
gap: 2rem;
}
.flex {
gap: 1rem;
}
</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">
<button 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</button>
</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">Unleash Your Creative Vision with AI</h1>
<p class="mt-4 text-lg text-gray-200">NeuralNomadAI empowers creators with cutting-edge AI tools for imagery and automation, transforming ideas into stunning visuals and streamlining workflows.</p>
</div>
<div class="mt-4 flex flex-wrap justify-center gap-4">
<button class="rounded-lg bg-primary px-6 py-3 text-base font-bold text-white transition-opacity hover:opacity-90">Get Started</button>
<button 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">Explore Features</button>
</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">Quick Pitch</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">NeuralNomadAI offers a suite of AI-powered tools designed to enhance your creative process. From generating unique images to automating repetitive tasks, our platform helps you focus on what matters most: your art.</p>
</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">
<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">AI-Powered Image Generation</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Create stunning, unique visuals with our advanced AI image generator.</p>
</div>
</div>
<div class="flex flex-col gap-4">
<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">Automated Workflow Tools</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Streamline your creative process with automated tasks and workflows.</p>
</div>
</div>
<div class="flex flex-col gap-4">
<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">Customizable AI Models</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tailor AI models to your specific needs and artistic style.</p>
</div>
</div>
</div>
<div class="mt-12">
<div class="relative aspect-video w-full rounded-xl bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCFd8Dgq3tctybT9TrJ-xRI942qYslTSvCEplzeuU5-xU3kBiO4YwAM8hv5v2XXRQP25KvPBURkGVqupZjbUse3UJ_hYWaiFxEtBSElnSjcm6HHHSZvBiSCUP7BhWfXiyvjxzYyP6_t9vAuZ4jtbxel6kRkcKj4K2zt8yS4kiDLfA2jbDwZyLWnqaGmL1VxrwEjxBt11kUFwIrYAR8jXwrhgSAH8phF3rxDjGsti4y0hJpKOqd0c1MQjFG9vd8IvpagypP1DjKlOzY");'>
<div class="absolute inset-0 flex items-center justify-center rounded-xl bg-black/30">
<button class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white transition-transform hover:scale-110">
<svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="my-16 flex flex-col items-center justify-center rounded-lg bg-primary/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">
Ready to Transform Your Creative Process?
</h2>
<div class="mt-8">
<button class="rounded-lg bg-primary px-8 py-3 text-base font-bold text-white transition-opacity hover:opacity-90">
Get Started Today
</button>
</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">
<h1 class="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl lg:text-6xl text-center"> AI-Powered Creative Services </h1>
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400 text-center"> Unlock the potential of AI for your creative projects. Our services range from AI image generation to automation, tailored to meet your unique needs. </p>
<h2 class="mt-20 mb-12 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"> Our Services </h2>
<div class="grid gap-8 lg:grid-cols-2 lg:gap-12">
<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-shadow hover:shadow-lg">
<div class="w-full h-64 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDxdnk_9dXVs3CTEU4uhZlc28-kEJW8bpgMrEhsx61zMl6s433itcZctuAAFxBisBEZzF-EhOegOVn8WNh47EQVl8nkId1pqBWObja8OUDxpKzCTuah94vyhms0-uncLVpaQ3ErraJl3HwtSJ8ZxWpigL98sLkpRR-tbEiNKkFsOOxHc_49XZlNTbfiX14kIcG4igLygO83hGkL0oqpNS2Qnfk0tRkCL1xr5vOKgYfyKM0AwD-v_KWPU5E8Nh_AHqLDoSIBHwbSiEY");'></div>
<div class="flex flex-1 flex-col justify-between p-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">AI Image Generation</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400"> Transform your ideas into stunning visuals. We use advanced AI models to create high-quality images from your descriptions. </p>
</div>
<button class="mt-4 flex items-center gap-2 self-start rounded bg-primary/10 px-4 py-2 text-sm font-semibold text-primary transition-colors hover:bg-primary/20">
Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
<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-shadow hover:shadow-lg">
<div class="w-full h-64 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCxa_wfucr9H3LutcjDqFpZ_nJZzy1Onuff_BgVPPmCTaRji6z1WhFTfpLn0Bc3VwrG5qJD2BsbNZnoG7JG-mayZE_4uqdT893MgFQsVbEQRk8tq02vBVnn513aENYDhIh6nCSqooYJ88Ek4mAQPZM_X47crZ7CGMlTKAf-Y98xw8-C5cpTSGX4Zds-tj0Io31teZyPfWw-wTolb49XSA5-vtY4HuTonVPOVZmAdnc-YYVbYTGre74Sh05xj0mNsP5l14eg-n_QVK0");'></div>
<div class="flex flex-1 flex-col justify-between p-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Prompt Engineering</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400"> Get the most out of AI image generators with expertly crafted prompts to achieve your desired results. </p>
</div>
<button class="mt-4 flex items-center gap-2 self-start rounded bg-primary/10 px-4 py-2 text-sm font-semibold text-primary transition-colors hover:bg-primary/20">
Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
<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-shadow hover:shadow-lg">
<div class="w-full h-64 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBw2YXausniugUalR47on7TsahcwDXWMWl1JEap4_Meto91lhu6PWU--NwxwiSzkQsaSa4p2KnX184cR7mHLIHAIt1_Vbm6CKyP9tR4kRo3EFTYVbr-mtLfz9UVdJEXGdn1cbi85YlK3PerbZWqNB3bCXq_zP1sylsidLEuM3B3-nlJl0KUDIk0U5b0sGxAiRkSBkv2ahiSrZ00ke2MF88a_xLu8QKFBueZdgEEek4mDM7JAiZH_XbbFXlKP_Vz6Ez2Vc7OwCjKD88");'></div>
<div class="flex flex-1 flex-col justify-between p-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Image-to-Image Edits</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400"> Refine and enhance your existing images with AI-powered edits, modifying styles, adding elements, and improving quality. </p>
</div>
<button class="mt-4 flex items-center gap-2 self-start rounded bg-primary/10 px-4 py-2 text-sm font-semibold text-primary transition-colors hover:bg-primary/20">
Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
<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-shadow hover:shadow-lg">
<div class="w-full h-64 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAbzRTSIBM1BfxbgI6f83jvA-2c68lszLUOu1WqaPdiuRnbxYI9pxMXqACeKUEBW-q8xfJwWsafhn07R9xLMxC3KE2hqan66hUkWiMNVMV3vNO2OcEeYqb9OVgoOKvFFOtlvmTk3a0tf9P_lYYaSw_XEr5UWrNIN_j0i_-jruO8m9W8vswXEcbpeB1aN9KDLBuhSkkJPhGqfm8tlT_9KxigqNcwFOZEmlp3vTVytM4pOv_s5qAvD_LOW4fZc64MMejlJ0rzfzBSYD8");'></div>
<div class="flex flex-1 flex-col justify-between p-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Brand Asset Packs</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400"> Create a cohesive visual identity with AI-generated asset packs including logos, social media graphics, and more. </p>
</div>
<button class="mt-4 flex items-center gap-2 self-start rounded bg-primary/10 px-4 py-2 text-sm font-semibold text-primary transition-colors hover:bg-primary/20">
Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
</div>
<!-- Gemini AI Prompt Ideator -->
<div class="mt-16 sm:mt-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
✨ AI Prompt Ideator
</h2>
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
Have an idea? Let our AI expand it into a rich, detailed prompt perfect for any image generator.
</p>
<div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
<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 focus:ring-primary dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="e.g., a cat astronaut on Mars">
<button id="generate-prompt-btn" class="rounded-lg bg-primary px-6 py-3 text-base font-bold text-white shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
Generate Prompt
</button>
</div>
<div id="prompt-loading" class="mt-6 text-gray-500 dark:text-gray-400 hidden">
<div class="flex justify-center items-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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>
</svg>
Generating...
</div>
</div>
<div id="prompt-result" class="mt-6 p-6 bg-primary/10 dark:bg-primary/20 rounded-lg text-left text-gray-700 dark:text-gray-300 hidden whitespace-pre-wrap font-mono"></div>
</div>
</div>
<!-- Gemini AI Image Playground -->
<div class="mt-16 sm:mt-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
✨ AI Image Playground
</h2>
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
Try it yourself! Enter a prompt below and see what our AI can create.
</p>
<div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
<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 focus:ring-primary dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="e.g., photo of a futuristic city at sunset">
<button id="generate-image-btn" class="rounded-lg bg-primary px-6 py-3 text-base font-bold text-white shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
Generate Image
</button>
</div>
<div id="image-loading" class="mt-8 text-gray-500 dark:text-gray-400 hidden">
<div class="flex flex-col justify-center items-center">
<svg class="animate-spin h-8 w-8 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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>
</svg>
<p class="mt-4">Generating your image... this may take a moment.</p>
</div>
</div>
<div id="image-result" class="mt-8 mx-auto max-w-lg"></div>
</div>
</div>
</div>
</div>
</section>
<!-- PORTFOLIO PAGE -->
<section id="portfolio" class="page-content">
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Featured Work</h2>
<p class="mt-4 text-lg text-gray-500 dark:text-gray-400">Explore our portfolio of innovative AI-driven projects, showcasing our expertise in creative imagery and automation tools for creators.</p>
</div>
<div class="mt-10 flex flex-wrap items-center justify-center gap-2">
<button class="flex items-center gap-1 rounded-lg bg-primary/10 px-3 py-1.5 text-sm font-semibold text-primary dark:bg-primary/20">All <span class="material-symbols-outlined text-base">expand_more</span></button>
<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">Creative Imagery</button>
<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">Automation Tools</button>
<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">Case Studies</button>
</div>
<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">
<div class="group relative cursor-pointer transition-all duration-300 hover:-translate-y-1">
<div class="aspect-square w-full overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800 shadow-md">
<img alt="AI-Enhanced Photography" 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" />
</div>
<div class="mt-4 px-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">AI-Enhanced Photography</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Enhancing photography with AI for stunning visuals through our proprietary algorithms.</p>
</div>
</div>
<div class="group relative cursor-pointer">
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
<img alt="Automated Content Creation" 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" />
</div>
<div class="mt-4">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Project: Automated Content Creation</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Automating content creation for efficient workflows.</p>
</div>
</div>
<div class="group relative cursor-pointer">
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
<img alt="Personalized Marketing Campaigns" 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" />
</div>
<div class="mt-4">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Project: Personalized Marketing Campaigns</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Creating personalized marketing campaigns with AI insights.</p>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING PAGE -->
<section id="pricing" class="page-content">
<div class="flex flex-1 justify-center py-10 sm:py-16 md:py-20">
<div class="flex flex-col max-w-6xl flex-1 px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900 dark:text-white">Transparent Pricing</h1>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Choose the plan that fits your creative needs. No hidden fees, just clear, upfront pricing.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="flex flex-1 flex-col gap-6 rounded-xl border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark p-6 shadow-lg">
<div class="flex flex-col gap-2">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Basic</h2>
<p class="flex items-baseline gap-1"><span class="text-4xl font-black tracking-tight text-gray-900 dark:text-white">$29</span><span class="text-base font-bold text-gray-600 dark:text-gray-400">/month</span></p>
</div>
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary/20 dark:bg-primary/30 text-primary text-sm font-bold hover:bg-primary/30 dark:hover:bg-primary/40"><span class="truncate">Choose Plan</span></button>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>100 AI Image Credits</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Basic Image Editing Tools</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Community Support</span></li>
</ul>
</div>
<div class="relative flex flex-1 flex-col gap-6 rounded-xl border-2 border-primary bg-background-light dark:bg-background-dark p-6 shadow-2xl">
<p class="absolute top-0 -translate-y-1/2 rounded-full bg-primary px-3 py-1 text-xs font-medium text-white">Popular</p>
<div class="flex flex-col gap-2">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Pro</h2>
<p class="flex items-baseline gap-1"><span class="text-4xl font-black tracking-tight text-gray-900 dark:text-white">$99</span><span class="text-base font-bold text-gray-600 dark:text-gray-400">/month</span></p>
</div>
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary text-white text-sm font-bold shadow-sm hover:opacity-90"><span class="truncate">Choose Plan</span></button>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Unlimited AI Image Credits</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Advanced Image Editing Tools</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Priority Support</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Commercial Use License</span></li>
</ul>
</div>
<div class="flex flex-1 flex-col gap-6 rounded-xl border border-primary/20 dark:border-primary/30 bg-background-light dark:bg-background-dark p-6 shadow-lg">
<div class="flex flex-col gap-2">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Enterprise</h2><span class="text-4xl font-black tracking-tight text-gray-900 dark:text-white">Custom</span>
</div>
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary/20 dark:bg-primary/30 text-primary text-sm font-bold hover:bg-primary/30 dark:hover:bg-primary/40"><span class="truncate">Contact Us</span></button>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Custom Solutions</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Dedicated Account Manager</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Tailored Features</span></li>
<li class="flex items-center gap-3 text-sm"><svg class="text-primary" fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Scalable Resources</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS PAGE -->
<section id="testimonials" class="page-content">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
<div class="max-w-4xl mx-auto">
<div class="mb-16">
<h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-8">What Our Clients Say</h2>
<div class="space-y-12">
<div class="bg-background-light dark:bg-gray-800/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
<div class="flex items-start gap-4">
<img alt="Sophia Bennett" class="h-12 w-12 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDnp_RrQGw8ihzLDH85n-eu-7FZorFwFWLGwdIzuYUCo0EPAD1-A5hPMTbwFHRYwJ_XUxBfbfU8JB6AzH1s6H1r6GSdSiBkapg0Eu1NIOVia07QX1k9Ylsjzicifxa2idSHaleTAVdbZAVSsW7L4oqyZCuK2cwuvdUAG91gZ5hFCIPYOEK-UxYMSdLxKRsEeZqxYC3zSfoOIHs93g8wmo5sOwRw-KmsPsnsg0yFXK3xfBOCPfBNAKWoUOISHHv-gDxkyt1QUNIE9-8" />
<div class="flex-1">
<p class="font-bold text-gray-900 dark:text-white">Sophia Bennett</p>
<p class="text-gray-600 dark:text-gray-300 italic mt-2">"NeuralNomadAI transformed my creative process. The AI imagery is stunning, and the automation tools have saved me countless hours. Highly recommend!"</p>
</div>
</div>
</div>
<div class="bg-background-light dark:bg-gray-800/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
<div class="flex items-start gap-4">
<img alt="Ethan Carter" class="h-12 w-12 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB03HQd0fryNarcskdejKWNQc21gNfMZw682PpBD9NhIiYn7-J3su8FiNwtps0PuPBq1Xkujl-l2KEQ5XrKuyrX8Vsoj2T0WUiSdgQhfYUtg459QUBiAyhQIEelYrkfj_w71ulkF4VoGlrcs0R5b7CsFqYt1OUtTfYS8uq2a7KCuEiyuSU6P5vVGhpJidX3CGymJnEPMoTKjx8XsUXHydXW4-wqWNIFnejAADN7pmt1LHVDEMdItxgSLypjqzPjU32BfR2SVqByyKY"/>
<div class="flex-1">
<p class="font-bold text-gray-900 dark:text-white">Ethan Carter</p>
<p class="text-gray-600 dark:text-gray-300 italic mt-2">"Exceptional service and results. NeuralNomadAI's AI tools are a game-changer for content creators. Their support team is also top-notch."</p>
</div>
</div>
</div>
</div>
</div>
<div>
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-8">Why Choose NeuralNomadAI?</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
<div class="bg-primary/10 dark:bg-primary/20 p-6 rounded-lg">
<p class="text-lg font-semibold text-gray-900 dark:text-white">5-Star Ratings</p>
<p class="text-3xl font-bold text-primary mt-2">4.9/5</p>
</div>
<div class="bg-primary/10 dark:bg-primary/20 p-6 rounded-lg">
<p class="text-lg font-semibold text-gray-900 dark:text-white">Projects Completed</p>
<p class="text-3xl font-bold text-primary mt-2">1,000+</p>
</div>
<div class="bg-primary/10 dark:bg-primary/20 p-6 rounded-lg">
<p class="text-lg font-semibold text-gray-900 dark:text-white">Fast Delivery</p>
<p class="text-3xl font-bold text-primary mt-2">24-48h</p>
</div>
<div class="bg-primary/10 dark:bg-primary/20 p-6 rounded-lg">
<p class="text-lg font-semibold text-gray-900 dark:text-white">Satisfaction</p>
<p class="text-3xl font-bold text-primary mt-2">100%</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT PAGE -->
<section id="about" class="page-content">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-5xl">About NeuralNomadAI</h2>
<p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">Pioneering the future of AI-driven creative solutions. We empower creators with cutting-edge tools that transform their visions into reality.</p>
</div>
<div class="space-y-16">
<div class="text-center">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Our Story</h3>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed max-w-3xl mx-auto">Founded in 2020, NeuralNomadAI emerged from a passion for blending art and technology. Our team of experts in AI, design, and creative industries recognized the potential of AI to revolutionize content creation. We started with a vision to build tools that not only automate tedious tasks but also inspire and enhance creative expression.</p>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-8 text-center">Core Capabilities</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="flex flex-col items-center text-center p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md">
<span class="material-symbols-outlined text-primary text-4xl mb-4">auto_awesome</span>
<h4 class="font-bold text-slate-900 dark:text-white mb-2">AI-Powered Imagery</h4>
<p class="text-sm text-slate-600 dark:text-slate-400">Generate stunning visuals with AI</p>
</div>
<div class="flex flex-col items-center text-center p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md">
<span class="material-symbols-outlined text-primary text-4xl mb-4">smart_toy</span>
<h4 class="font-bold text-slate-900 dark:text-white mb-2">Automation Tools</h4>
<p class="text-sm text-slate-600 dark:text-slate-400">Automate repetitive tasks for efficiency</p>
</div>
<div class="flex flex-col items-center text-center p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md">
<span class="material-symbols-outlined text-primary text-4xl mb-4">palette</span>
<h4 class="font-bold text-slate-900 dark:text-white mb-2">Creative Solutions</h4>
<p class="text-sm text-slate-600 dark:text-slate-400">Tailored solutions for diverse creative needs</p>
</div>
<div class="flex flex-col items-center text-center p-6 bg-background-light dark:bg-slate-800/50 rounded-xl shadow-md">
<span class="material-symbols-outlined text-primary text-4xl mb-4">speed</span>
<h4 class="font-bold text-slate-900 dark:text-white mb-2">Rapid Turnaround</h4>
<p class="text-sm text-slate-600 dark:text-slate-400">Fast delivery without compromising quality</p>
</div>
</div>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Our Technology</h3>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed max-w-3xl mx-auto">We leverage state-of-the-art AI models and algorithms to power our tools. Our technology is constantly evolving, incorporating the latest advancements in machine learning and computer vision to deliver unparalleled performance and results.</p>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT PAGE -->
<section id="contact" class="page-content">
<div class="flex flex-1 justify-center py-12 sm:py-16 md:py-20">
<div class="container mx-auto flex max-w-7xl flex-col gap-12 px-4 sm:px-6">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">Get in Touch</h1>
<p class="mx-auto mt-4 max-w-2xl text-gray-600 dark:text-gray-400">Whether you're ready to start a project or just have a few questions, we're here to help. Reach out to us, and we'll get back to you as soon as possible.</p>
</div>
<!-- Gemini AI Project Ideator -->
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
✨ Not Sure Where to Start?
</h2>
<p class="mx-auto mt-4 max-w-2xl text-gray-600 dark:text-gray-400">
Let our AI brainstorm some creative project ideas tailored to your industry.
</p>
<div class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-4">
<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 focus:ring-primary dark:bg-background-dark dark:text-white">
<option>E-commerce Store</option>
<option>Content Creator / YouTuber</option>
<option>Small Business Owner</option>
<option>Musician or Artist</option>
<option>Restaurant Owner</option>
</select>
<button id="generate-ideas-btn" class="rounded-lg bg-primary px-6 py-3 text-base font-bold text-white shadow-md hover:bg-primary/90 transition-all whitespace-nowrap">
Get Project Ideas
</button>
</div>
<div id="ideas-loading" class="mt-6 text-gray-500 dark:text-gray-400 hidden">
<div class="flex justify-center items-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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>
</svg>
Generating ideas...
</div>
</div>
<div id="ideas-result" class="mt-6 p-6 bg-primary/10 dark:bg-primary/20 rounded-lg text-left text-gray-700 dark:text-gray-300 hidden"></div>
</div>
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
<div class="space-y-8 rounded-xl bg-primary/10 p-8 dark:bg-primary/20">
<div class="space-y-4">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Requests</h3>
<p class="text-gray-600 dark:text-gray-400">Have a unique project? Fill out the form below with your details.</p>
<form class="space-y-4">
<label class="block"><span class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Your Name</span><input class="form-input block w-full rounded-lg border-transparent bg-background-light p-3 text-base text-gray-900 placeholder-gray-500 focus:border-primary focus:ring-primary dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="Enter your name" type="text" /></label>
<label class="block"><span class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Your Email</span><input class="form-input block w-full rounded-lg border-transparent bg-background-light p-3 text-base text-gray-900 placeholder-gray-500 focus:border-primary focus:ring-primary dark:bg-background-dark dark:text-white dark:placeholder-gray-400" placeholder="Enter your email" type="email" /></label>
<button class="flex w-full items-center justify-center rounded-lg bg-primary px-6 py-3 text-base font-bold text-white shadow-md hover:bg-primary/90">Send Message</button>
</form>
</div>
</div>
<div class="space-y-8">
<div class="space-y-4">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">Direct Contact & Info</h3>
<div class="space-y-2 rounded-lg bg-gray-100 p-6 dark:bg-gray-800/50">
<p class="font-medium"><strong>Email:</strong> <a class="text-primary hover:underline" href="mailto:[email protected]">[email protected]</a></p>
<p class="font-medium"><strong>Business Hours:</strong> Monday - Friday: 9 AM - 6 PM (GMT)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Unified Footer -->
<footer class="bg-background-light dark:bg-background-dark border-t border-gray-200/10">
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400" href="#">Terms of Service</a>
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400" href="#">Privacy Policy</a>
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400" href="#">Contact Us</a>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 tracking-wide">© 2025 NeuralNomadAI. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- Navigation and Gemini API JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- Navigation Logic ---
const navLinks = document.querySelectorAll('.nav-link, [data-page]');
const pages = document.querySelectorAll('.page-content');
const showPage = (pageId) => {
pages.forEach(page => page.classList.remove('active'));
const activePage = document.getElementById(pageId);
if (activePage) {
activePage.classList.add('active');
} else {
document.getElementById('home').classList.add('active');
}
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('text-primary', 'font-bold');
link.classList.add('text-gray-600', 'dark:text-gray-300');
if (link.getAttribute('data-page') === pageId) {
link.classList.remove('text-gray-600', 'dark:text-gray-300');
link.classList.add('text-primary', 'font-bold');
}
});
window.scrollTo(0, 0);
};
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const pageId = link.getAttribute('data-page');
history.pushState({ page: pageId }, pageId, `#${pageId}`);
showPage(pageId);
});
});
window.onpopstate = (event) => {
const pageId = event.state ? event.state.page : (window.location.hash.substring(1) || 'home');
showPage(pageId);
};
const initialPageId = window.location.hash.substring(1) || 'home';
showPage(initialPageId);
// --- Gemini API Integration ---
const callGeminiApi = async (prompt, resultElement, loadingElement) => {
loadingElement.style.display = 'flex';
resultElement.style.display = 'none';
resultElement.innerHTML = '';
const apiKey = ""; // Leave as-is
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
const payload = { contents: [{ parts: [{ text: prompt }] }] };
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) throw new Error(`API call failed with status: ${response.status}`);
const result = await response.json();
const candidate = result.candidates?.[0];
if (candidate && candidate.content?.parts?.[0]?.text) {
let htmlContent = candidate.content.parts[0].text;
htmlContent = htmlContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
resultElement.innerHTML = htmlContent;
} else {
resultElement.textContent = 'Sorry, the response was empty. Please try again.';
}
} catch (error) {
console.error('Gemini API call error:', error);
resultElement.textContent = `An error occurred: ${error.message}.`;
} finally {
loadingElement.style.display = 'none';
resultElement.style.display = 'block';
}
};
const callImagenApi = async (prompt, resultContainer, loadingElement) => {
loadingElement.style.display = 'flex';
resultContainer.innerHTML = '';
const apiKey = ""; // Leave as-is
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
const payload = {
instances: [{ prompt: prompt }],
parameters: { "sampleCount": 1 }
};
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`API call failed with status: ${response.status}`);
}
const result = await response.json();
const prediction = result.predictions?.[0];
if (prediction && prediction.bytesBase64Encoded) {
const imageUrl = `data:image/png;base64,${prediction.bytesBase64Encoded}`;
resultContainer.innerHTML = `<img src="${imageUrl}" alt="AI generated image of ${prompt}" class="rounded-lg shadow-lg mx-auto">`;
} else {
resultContainer.innerHTML = `<p class="text-red-500">Sorry, the image could not be generated. The response might be empty or contain sensitive content.</p>`;
}
} catch (error) {
console.error('Imagen API call error:', error);
resultContainer.innerHTML = `<p class="text-red-500">An error occurred: ${error.message}.</p>`;
} finally {
loadingElement.style.display = 'none';
}
};
// Event Listener for Prompt Generator
document.getElementById('generate-prompt-btn')?.addEventListener('click', () => {
const userInput = document.getElementById('prompt-input').value;
if (!userInput.trim()) return;
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}"`;
callGeminiApi(systemPrompt, document.getElementById('prompt-result'), document.getElementById('prompt-loading'));
});
// Event Listener for Project Idea Generator
document.getElementById('generate-ideas-btn')?.addEventListener('click', () => {
const industry = document.getElementById('industry-select').value;
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.`;
callGeminiApi(systemPrompt, document.getElementById('ideas-result'), document.getElementById('ideas-loading'));
});
// Event Listener for Image Playground
document.getElementById('generate-image-btn')?.addEventListener('click', () => {
const userInput = document.getElementById('image-prompt-input').value;
if (!userInput.trim()) return;
callImagenApi(userInput, document.getElementById('image-result'), document.getElementById('image-loading'));
});
});
</script>
</body>
</html>