fix the bug

index.html

@@ -233,6 +233,71 @@
                                 </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-YyhwEqR8tclSG1xAL5o5M
+                                <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>