Spaces:

oldmonk69
/

gemini-ui-redesign

Running

App Files Files Community

oldmonk69 commited on 29 days ago

Commit

d4c4db7

verified ·

1 Parent(s): e7c1029

Update index.html

Browse files

Files changed (1) hide show

index.html +449 -286

index.html CHANGED Viewed

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

 <!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 - HuggingFace Demo (index.html)</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" />
+  <!-- Tailwind CDN (keeps the original layout & utilities) -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+  <!-- Local CSS for small customizations -->
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 font-display text-gray-900 dark:text-gray-100">
+  <div class="flex min-h-screen w-full flex-col">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 border-b border-gray-200/50 dark:border-gray-700/50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
+      <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
+        <a href="#home" data-page="home" class="flex items-center gap-4 cursor-pointer">
+          <svg class="h-8 w-8 text-sky-600" 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></svg>
+          <h1 class="text-lg font-bold">NeuralNomadAI</h1>
+        </a>
+        <nav class="hidden md:flex items-center gap-6">
+          <a href="#home" data-page="home" class="nav-link text-sm font-medium">Home</a>
+          <a href="#services" data-page="services" class="nav-link text-sm font-medium">Services</a>
+          <a href="#portfolio" data-page="portfolio" class="nav-link text-sm font-medium">Portfolio</a>
+          <a href="#contact" data-page="contact" class="nav-link text-sm font-medium">Contact</a>
+        </nav>
+        <div class="flex items-center gap-4">
+          <a href="#contact" data-page="contact" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white">Get Started</a>
+        </div>
+      </div>
+    </header>
+    <main class="flex-grow">
+      <!-- HOME (brief) -->
+      <section id="home" class="page-content active">
+        <div class="mx-auto max-w-7xl px-4 py-12">
+          <div class="text-center">
+            <h2 class="text-3xl font-bold">AI Prompt & Image Playground — Hugging Face</h2>
+            <p class="mt-3 text-gray-600 dark:text-gray-300">This demo uses the Hugging Face Inference API. Replace the client token with a backend proxy token before production.</p>
+          </div>
+          <!-- Prompt Ideator -->
+          <div class="mt-10 max-w-xl mx-auto">
+            <h3 class="text-xl font-semibold mb-3">✨ AI Prompt Ideator</h3>
+            <div class="flex gap-3">
+              <input id="prompt-input" type="text" placeholder="e.g., a cat astronaut on Mars" aria-label="Prompt input"
+                class="w-full rounded-lg border border-gray-300 p-3 bg-white dark:bg-gray-800" />
+              <button id="generate-prompt-btn" type="button" class="rounded-lg bg-sky-600 px-4 py-2 text-white font-semibold">
+                <span class="btn-text">Generate Prompt</span>
+                <span class="btn-spinner hidden ml-2">⏳</span>
+              </button>
+            </div>
+            <div id="prompt-result" class="mt-4 result-box hidden" role="status" aria-live="polite"></div>
+          </div>
+          <!-- Image Playground -->
+          <div class="mt-12 max-w-xl mx-auto">
+            <h3 class="text-xl font-semibold mb-3">✨ AI Image Playground</h3>
+            <div class="flex gap-3">
+              <input id="image-prompt-input" type="text" placeholder="e.g., futuristic city at sunset" aria-label="Image prompt input"
+                class="w-full rounded-lg border border-gray-300 p-3 bg-white dark:bg-gray-800" />
+              <button id="generate-image-btn" type="button" class="rounded-lg bg-sky-600 px-4 py-2 text-white font-semibold">
+                <span class="btn-text">Generate Image</span>
+                <span class="btn-spinner hidden ml-2">⏳</span>
+              </button>
+            </div>
+            <div id="image-loading" class="mt-6 hidden text-sm text-gray-600 dark:text-gray-300">
+              <div class="flex items-center gap-3">
+                <svg class="animate-spin h-6 w-6 text-sky-600" 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 12h4z"></path>
+                </svg>
+                <span>Generating image — this may take 10–30s depending on the model.</span>
+              </div>
+            </div>
+            <div id="image-result" class="mt-6 result-box" role="status" aria-live="polite"></div>
+          </div>
+        </div>
+      </section>
+      <!-- SERVICES (placeholder) -->
+      <section id="services" class="page-content">
+        <div class="mx-auto max-w-7xl px-4 py-12">
+          <h2 class="text-2xl font-bold">Services</h2>
+          <p class="mt-3 text-gray-600 dark:text-gray-300">Sample content...</p>
+        </div>
+      </section>
+      <!-- PORTFOLIO (placeholder) -->
+      <section id="portfolio" class="page-content">
+        <div class="mx-auto max-w-7xl px-4 py-12">
+          <h2 class="text-2xl font-bold">Portfolio</h2>
+          <p class="mt-3 text-gray-600 dark:text-gray-300">Sample content...</p>
+        </div>
+      </section>
+      <!-- CONTACT (placeholder) -->
+      <section id="contact" class="page-content">
+        <div class="mx-auto max-w-7xl px-4 py-12">
+          <h2 class="text-2xl font-bold">Contact</h2>
+          <p class="mt-3 text-gray-600 dark:text-gray-300">Sample content...</p>
+        </div>
+      </section>
+    </main>
+    <footer class="border-t border-gray-200/50 dark:border-gray-700/50 bg-white/80 dark:bg-gray-900/80">
+      <div class="mx-auto max-w-7xl px-4 py-8 text-center text-sm text-gray-600 dark:text-gray-300">
+        © 2024 NeuralNomadAI — Hugging Face demo. Remember to proxy your API key on the server.
+      </div>
+    </footer>
+  </div>
+  <!-- JS: huggingface API integration + UI handling -->
+  <script>
+    // -------------------------
+    // IMPORTANT (security):
+    // Do NOT put real HF tokens in client-side code for production.
+    // For quick local testing you can paste a short-lived token here,
+    // but the recommended pattern is:
+    //   - Create a small backend endpoint (e.g. /api/hf/generate)
+    //   - The backend attaches your HF token to the request and forwards it to HF
+    // -------------------------
+    // If you still want to test client-side (ONLY FOR LOCAL TESTING), put a token here:
+    // const HF_TOKEN = 'HF_API_TOKEN_HERE';
+    // Otherwise set HF_TOKEN to empty and call a backend endpoint instead.
+    const HF_TOKEN = ''; // <-- REPLACE WITH '' FOR PRODUCTION. Use backend proxy.
+    // Backend proxy settings (recommended)
+    // If you implement a backend, set PROXY_BASE to your server endpoint:
+    // e.g. const PROXY_BASE = '/api/hf'; and implement endpoints /api/hf/text and /api/hf/image
+    const PROXY_BASE = ''; // e.g. '/api/hf'  (leave empty to call HF directly)
+    // Model choices (you can change these)
+    // Text generation: use a text generation model (make sure to check the model's capabilities)
+    const HF_TEXT_MODEL = 'gpt2'; // small example; swap with a better model for real usage
+    // Image generation: choose a model that returns image binary, e.g., "stabilityai/stable-diffusion-2"
+    const HF_IMAGE_MODEL = 'stabilityai/stable-diffusion-2';
+    // Utilities
+    const escapeHtml = (unsafe) => {
+      if (unsafe === null || unsafe === undefined) return '';
+      return String(unsafe)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    };
+    const formatSafeHtml = (text) => {
+      let out = escapeHtml(text);
+      out = out.replace(/\*\*(.+?)\*\*/g, (m, p1) => `<strong>${p1}</strong>`);
+      out = out.replace(/\r\n|\r|\n/g, '<br>');
+      return out;
+    };
+    // DOM
+    document.addEventListener('DOMContentLoaded', () => {
+      const promptInput = document.getElementById('prompt-input');
+      const generatePromptBtn = document.getElementById('generate-prompt-btn');
+      const promptResult = document.getElementById('prompt-result');
+      const imagePromptInput = document.getElementById('image-prompt-input');
+      const generateImageBtn = document.getElementById('generate-image-btn');
+      const imageLoading = document.getElementById('image-loading');
+      const imageResult = document.getElementById('image-result');
+      // Small helpers
+      const setButtonLoading = (button, loading = true, loadingText = 'Generating...') => {
+        if (!button) return;
+        const btnTextNode = button.querySelector('.btn-text');
+        const spinner = button.querySelector('.btn-spinner');
+        button.disabled = loading;
+        button.classList.toggle('opacity-60', loading);
+        button.setAttribute('aria-busy', String(loading));
+        if (btnTextNode && loading) btnTextNode.textContent = loadingText;
+        if (btnTextNode && !loading) {
+          if (button.id === 'generate-prompt-btn') btnTextNode.textContent = 'Generate Prompt';
+          if (button.id === 'generate-image-btn') btnTextNode.textContent = 'Generate Image';
         }
+        if (spinner) spinner.classList.toggle('hidden', !loading);
+      };
+      const showError = (el, message) => {
+        if (!el) return;
+        el.classList.remove('hidden');
+        el.innerHTML = `<div class="p-3 rounded bg-red-50 text-red-700 dark:bg-red-900/30">${escapeHtml(message)}</div>`;
+      };
+      const showHtml = (el, html) => {
+        if (!el) return;
+        el.classList.remove('hidden');
+        el.innerHTML = html;
+      };
+      // Generic function to call Hugging Face Inference API for text
+      // If PROXY_BASE is set, the code will call PROXY_BASE + '/text' instead.
+      // The backend should forward the request to HF with the Authorization header.
+      async function hfTextGenerate(prompt) {
+        if (!prompt) throw new Error('Empty prompt');
+        const payload = { inputs: prompt, options: { wait_for_model: true } };
+        if (PROXY_BASE) {
+          // call your backend proxy (recommended)
+          const resp = await fetch(`${PROXY_BASE}/text`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model: HF_TEXT_MODEL, payload }),
+          });
+          if (!resp.ok) throw new Error(`Proxy error: ${resp.status} ${await resp.text()}`);
+          return resp.json();
         }
+        // Direct client-side call to HF Inference
+        if (!HF_TOKEN) throw new Error('No HF token set (use a backend proxy in production)');
+        const url = `https://api-inference.huggingface.co/models/${encodeURIComponent(HF_TEXT_MODEL)}`;
+        const resp = await fetch(url, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${HF_TOKEN}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(payload),
+        });
+        if (!resp.ok) {
+          const txt = await resp.text().catch(() => '');
+          throw new Error(`Hugging Face API error: ${resp.status} ${txt}`);
         }
+        return resp.json();
+      }
+      // Generic function to call Hugging Face Inference API for images
+      // Many HF image models return binary image data (image/png). We handle binary responses and JSON fallbacks.
+      async function hfImageGenerate(prompt) {
+        if (!prompt) throw new Error('Empty prompt');
+        if (PROXY_BASE) {
+          const resp = await fetch(`${PROXY_BASE}/image`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model: HF_IMAGE_MODEL, prompt }),
+          });
+          if (!resp.ok) throw new Error(`Proxy error: ${resp.status} ${await resp.text()}`);
+          // Proxy might forward binary image or JSON with base64; try to detect
+          const contentType = resp.headers.get('content-type') || '';
+          if (contentType.startsWith('image/')) {
+            const blob = await resp.blob();
+            return { blob };
+          } else {
+            return resp.json();
+          }
         }
+        // Direct client-side call to HF Inference (NOT RECOMMENDED)
+        if (!HF_TOKEN) throw new Error('No HF token set (use a backend proxy in production)');
+        const url = `https://api-inference.huggingface.co/models/${encodeURIComponent(HF_IMAGE_MODEL)}`;
+        const resp = await fetch(url, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${HF_TOKEN}`,
+            'Content-Type': 'application/json',
+          },
+          // For some image models HF expects {"inputs":"<prompt>"} or a specialized payload
+          body: JSON.stringify({ inputs: prompt }),
+        });
+        if (!resp.ok) {
+          const txt = await resp.text().catch(() => '');
+          throw new Error(`Hugging Face image error: ${resp.status} ${txt}`);
         }
+        const contentType = resp.headers.get('content-type') || '';
+        if (contentType.startsWith('image/')) {
+          const blob = await resp.blob();
+          return { blob };
+        } else {
+          // JSON response (could contain base64 or URLs); parse it
+          const json = await resp.json().catch(() => null);
+          return json;
         }
+      }
+      // Handlers
+      const handlePromptGeneration = async () => {
+        const input = (promptInput.value || '').trim();
+        if (!input) {
+          showError(promptResult, 'Please enter a short idea to expand into a prompt.');
+          return;
         }
+        promptResult.classList.add('hidden');
+        setButtonLoading(generatePromptBtn, true, 'Generating...');
+        try {
+          const systemPrompt = `You are a senior prompt engineer. Expand the user's short idea into a detailed, artistic prompt suitable for image generation. The idea: "${input}"`;
+          // Use HF text generation
+          const resp = await hfTextGenerate(systemPrompt);
+          // Response shapes vary: HF text models often return an array like [{generated_text: "..."}]
+          let text = null;
+          if (Array.isArray(resp) && resp.length > 0 && resp[0].generated_text) {
+            text = resp[0].generated_text;
+          } else if (resp.generated_text) {
+            text = resp.generated_text;
+          } else if (typeof resp === 'string') {
+            text = resp;
+          } else if (Array.isArray(resp) && typeof resp[0] === 'string') {
+            text = resp[0];
+          } else if (resp && resp[0] && resp[0].text) {
+            text = resp[0].text;
+          }
+          if (!text) {
+            showError(promptResult, 'No text returned by the model (unexpected response shape). Check console for raw output.');
+            console.debug('HF text response (raw):', resp);
+          } else {
+            const safe = formatSafeHtml(text);
+            showHtml(promptResult, safe);
+          }
+        } catch (err) {
+          console.error('Prompt generation error:', err);
+          showError(promptResult, `Error: ${err.message || err}`);
+        } finally {
+          setButtonLoading(generatePromptBtn, false);
         }
+      };
+      const handleImageGeneration = async () => {
+        const prompt = (imagePromptInput.value || '').trim();
+        if (!prompt) {
+          showError(imageResult, 'Please enter an image prompt to generate an image.');
+          return;
         }
+        imageResult.innerHTML = '';
+        imageLoading.classList.remove('hidden');
+        setButtonLoading(generateImageBtn, true, 'Generating...');
+        try {
+          const resp = await hfImageGenerate(prompt);
+          // If backend or HF returned binary blob
+          if (resp && resp.blob) {
+            const url = URL.createObjectURL(resp.blob);
+            const img = document.createElement('img');
+            img.src = url;
+            img.alt = `AI generated: ${prompt}`;
+            img.loading = 'lazy';
+            img.decoding = 'async';
+            img.className = 'rounded-lg shadow-lg mx-auto';
+            imageResult.appendChild(img);
+            return;
+          }
+          // HF may return JSON containing base64 or an array of output URLs.
+          // Common shapes:
+          //  - [{generated_text: "..."}] (unlikely for images)
+          //  - { error: "..." }
+          //  - [{image_base64: "..."}, ...] or { images: ["data:image/png;..."] }
+          // - [{ "generated_image": "<base64>" }]
+          // We'll try a few possibilities defensively:
+          // If it's an array with objects containing 'image' or 'base64' fields
+          if (Array.isArray(resp)) {
+            // try to find a base64 string
+            const obj = resp.find(r => (r.image || r.base64 || r.image_base64 || r.generated_image));
+            const val = obj && (obj.image || obj.base64 || obj.image_base64 || obj.generated_image);
+            if (val && typeof val === 'string') {
+              // if it already begins with data:, use directly; else assume base64 png
+              const src = val.startsWith('data:') ? val : `data:image/png;base64,${val}`;
+              const img = document.createElement('img');
+              img.src = src;
+              img.alt = `AI generated: ${prompt}`;
+              img.loading = 'lazy';
+              img.decoding = 'async';
+              img.className = 'rounded-lg shadow-lg mx-auto';
+              imageResult.appendChild(img);
+              return;
             }
+          }
+          // If resp.images is an array of data URLs or URLs
+          if (resp && (resp.images || resp.output)) {
+            const arr = resp.images || resp.output;
+            if (Array.isArray(arr) && arr.length > 0) {
+              const imageUrl = arr[0];
+              const img = document.createElement('img');
+              img.src = imageUrl;
+              img.alt = `AI generated: ${prompt}`;
+              img.loading = 'lazy';
+              img.decoding = 'async';
+              img.className = 'rounded-lg shadow-lg mx-auto';
+              imageResult.appendChild(img);
+              return;
             }
+          }
+          // If resp contains a base64 string in top-level 'generated_image' or 'b64_json'
+          const b64 = resp && (resp.generated_image || resp.b64_json || resp.image_base64 || resp.base64);
+          if (b64 && typeof b64 === 'string') {
+            const src = b64.startsWith('data:') ? b64 : `data:image/png;base64,${b64}`;
+            const img = document.createElement('img');
+            img.src = src;
+            img.alt = `AI generated: ${prompt}`;
+            img.loading = 'lazy';
+            img.decoding = 'async';
+            img.className = 'rounded-lg shadow-lg mx-auto';
+            imageResult.appendChild(img);
+            return;
+          }
+          // As last resort, show the raw JSON for debugging
+          showHtml(imageResult, `<pre class="p-3 bg-white/80 dark:bg-gray-800/70 rounded">${escapeHtml(JSON.stringify(resp, null, 2))}</pre>`);
+          console.debug('HF image response (raw):', resp);
+        } catch (err) {
+          console.error('Image generation error:', err);
+          showError(imageResult, `Error: ${err.message || err}`);
+        } finally {
+          imageLoading.classList.add('hidden');
+          setButtonLoading(generateImageBtn, false);
         }
+      };
+      // Attach listeners
+      generatePromptBtn.addEventListener('click', handlePromptGeneration);
+      generateImageBtn.addEventListener('click', handleImageGeneration);
+      // Navigation (simple)
+      const navLinks = document.querySelectorAll('[data-page]');
+      const pages = document.querySelectorAll('.page-content');
+      const showPage = (id) => {
+        pages.forEach(p => p.classList.remove('active'));
+        const el = document.getElementById(id);
+        if (el) el.classList.add('active');
+      };
+      navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+          const page = link.getAttribute('data-page');
+          if (page) {
+            history.pushState({ page }, '', `#${page}`);
+            showPage(page);
+          }
+        });
+      });
+      window.addEventListener('popstate', (ev) => {
+        const page = (ev.state && ev.state.page) || (location.hash && location.hash.substring(1)) || 'home';
+        showPage(page);
+      });
+    });
+  </script>
 </body>
+</html>