AI Showcase Website Blueprint

Purpose: Build a modern, 3D-accented website to showcase and sell high‑quality AI images and videos. Features include galleries for images/videos, upload pipelines (image→image, image→video, text→image), a prompt processor and prompt-package product, a prompt marketplace, a product storefront (pricing $300–$6,300 for assets), cart + checkout, an admin dashboard, and ad‑style sidebar artwork. The color palette should prominently include red, green, and blue and the site should feel sleek, modern and slightly 3D.

1 — Goals & success metrics

Showcase the quality of your AI outputs and convert visitors into buyers.

Provide on-site tools so visitors can experiment (image→image, image→video, text→image, prompt processor).

Monetize via one‑time asset sales ($300–$6,300), prompt packs ($10.99), and optional licensing/ads.

Keep purchase flow tight: view → add to cart → checkout → deliver.

Maintain brand quality, fast media delivery, secure payments, easy admin upload + moderation.

Key metrics to track: conversion rate, average order value, number of prompt pack purchases, repeat buyers, page load time, gallery upload success rate.

2 — Target audience

Marketers and agencies buying ad‑grade images/videos.

Content creators and social advertisers needing quick, scalable creative.

Designers who want high-quality base assets.

3 — Information architecture (site map)

Home (hero, top selling assets, CTA to gallery, value props)

Gallery (browse images + videos, filters, search, collections)

Processors (subpages/tabs):

Image → Image (upload source image, choose style/preset, run)

Image → Video (upload image sequence or single image + animation presets)

Text → Image (text prompt input, presets, variations)

Prompt Processor (refine and test prompts, variables, batch runs)

Store / Marketplace (products, prompt packs, licensing details)

Product page (detailed media preview, price, license options, add to cart)

Upload / My Uploads (user dashboard: uploaded assets, drafts, purchases)

Checkout (cart, payment, licensing, download links)

Sell Your Art (page for other artists to submit/sell — optional)

About / Tech (explain your AI, ethics, how it’s “perfect”)

Admin (private: approval queue, orders, analytics, content moderation)

Legal (TOS, Privacy, Refunds, IP & Licenses)

Footer (contact, social, newsletter)

4 — Page-by-page functional blueprint
Home

Full-bleed hero with a looping promotional video (autoplay muted) + tagline.

Quick CTA buttons: Explore Gallery, Try Processors, Buy Prompt Pack.

Horizontal ad‑style sidebar component showing rotating art thumbnails (clickable).

Showcase carousel of "Top sellers" and "Latest uploads" with 3D card tilt effect.

Gallery

Grid of media cards (masonry or uniform grid) with lazy loading and infinite scroll / pagination.

Filters: Media type, Orientation, Color, Price range, Tags, Popularity, License type.

Quick preview modal on click (large image / video player, metadata, price, add to cart).

Upload button (for authenticated creators) wired to the Upload flow.

Bulk actions (for admin): feature/remove, flag, assign collection.

Product Page

High-resolution media viewer with zoom, fullscreen, and quick play for video.

Price selector (if multiple license tiers exist: personal, commercial, exclusive).

Purchase CTA and sample legal license text snippet.

Related media carousel and recommended bundles (e.g., the same style video + 3 stills).

Processors

Image→Image: Upload/drag-drop source photo, pick style preset (or custom), slider for strength, run button, result gallery of variations.

Image→Video: Upload image(s) or single image + animation presets (parallax, camera move, particle overlay). Output formats and frame rates selection.

Text→Image: Prompt textarea, prompt templates/presets, negative prompts, seed control, variation count, run.

All processors should support job queueing with progress UI and notifications (email or in‑app).

Prompt Processor & Prompt Pack Store

Visual prompt editor: named prompts, variables/slots, randomized variables, preview thumbnail generator.

Pack product page: description, price ($10.99), what's included (100 prompts), sample prompts, add to cart.

Allow one‑click apply of saved prompts into the Text→Image tool.

Upload / Dashboard

Upload wizard: metadata (title, tags, price, license, orientation, categories), preview, watermark toggle for marketplace display.

Orders and downloads: list of purchases with invoice links and download tokens.

Checkout & Payments

Cart page with editable quantities (if selling multiples/licensing), promo code input.

Stripe integration (Stripe Checkout + webhooks) for card & Apple/Google Pay.

After successful purchase, generate secure expiring download links or S3 signed URLs and an invoice.

Admin

Approval queue for uploaded content, flagging system, order management, user management, analytics view.

5 — Design system & UI guidelines
Colors

Three primary accent colors: Red (#E53935), Green (#00C853), and Blue (#1976D2) — use them as accents (buttons, highlights, badges). Keep main backgrounds neutral (very dark slate or near-white depending on dark/light theme).

Use gradients blending the three for hero areas (e.g., subtle diagonal gradient that transitions between blue→green→red).

Typography

Headline: bold, geometric sans (e.g., Inter / Poppins / Montserrat).

Body: a readable sans (Inter/Roboto). Large line-height for captions under images.

Visual Language

3D feel via soft shadows, card tilt on hover, subtle parallax backgrounds, and rotation for featured cards using transform: perspective().

Use subtle glassmorphism for overlays (blur + semi-transparent) to allow media to shine.

Buttons: rounded 2xl, subtle shadow, micro-interactions (press, hover glow using accent color).

Components

3D Media Card: image/video thumbnail, title, price, short tags, hover actions (preview, add to cart, favorite).

Preview Modal: large canvas, metadata sidebar, buy CTA, social share buttons.

Processor Console: prompt history, presets, run button, result thumbnails.

Ad Sidebar: vertically stacked cards with auto-scroll and manual controls.

6 — Data model (suggested)

User { id, name, email, role, stripeCustomerId, createdAt }

Asset { id, ownerId, title, description, type(image|video), src, thumbnail, tags[], price, licenseType, featured, createdAt, metadata{width,height,duration} }

Prompt { id, ownerId, title, promptText, variables[], tags[], examples[] }

Order { id, userId, items[{assetId, price, license}], total, status, stripePaymentId, createdAt }

PromptPack { id, title, price, promptIds[], description }

Job { id, userId, type, input, status(queued|running|done|error), resultLocation, createdAt }

7 — Tech stack recommendations

Frontend

Framework: Next.js (React) — for SSR/SEO and API routes.

Styling: Tailwind CSS + custom 3D utility classes.

3D / interactions: Three.js or Framer Motion + React Spring for cards and micro-3D.

Backend

Server: Node.js + Express or serverless functions (Vercel/Netlify/Cloudflare Workers).

DB: PostgreSQL (for transactional data) or MongoDB (if you prefer schemaless asset metadata).

Storage: AWS S3 (or DigitalOcean Spaces) + CloudFront for CDN.

Queue: BullMQ / Redis (for job queueing of AI processing) or managed worker queues.

AI / Inference

Option A — Self-hosted: use GPU servers (NVIDIA A100/RTX series) with containerized inference (Docker + Triton/torchserve) to run models like Stable Diffusion, ControlNet, or custom diffusion/video models.

Option B — API-first: use services like Replicate/RunPod/Third-party hosted inference to avoid infra overhead.

For video: use frame interpolation tools (RIFE) and video synthesis pipelines; consider using FFmpeg for encoding and packaging.

Payments & Billing

Stripe (Checkout + webhooks) for payments, subscriptions, and invoices.

Tax handling: Stripe Tax or manual tax integrations.

Monitoring & Analytics

Google Analytics / Plausible / Posthog for behavior analytics.

Sentry for error monitoring.

Deployment

Frontend on Vercel (Next.js) or Netlify; Backend on Vercel Serverless functions or a managed Node host. AI inference on dedicated GPU servers (AWS EC2 / GCP / Paperspace / Lambda GPU solutions).

8 — AI processing pipeline (high-level)

Receive job (user submits prompt or upload).

Validate & queue (rate limits, user quota, content filters).

Run inference (model + presets) on a GPU worker; for image→video chain: generate frames, compose, apply motion effects.

Postprocess (denoise, color grade, add watermark if preview mode, compress to target sizes via FFmpeg / imagemagick).

Store output (S3 + CDN) and update job status.

Notify user (in-app notification and optional email). Provide download link with limited lifetime for purchased assets.

Scaling note: separate GPU workers for heavy inference; use autoscaling groups or managed providers for burst capacity.

9 — Licensing & pricing strategy

Base price range: $300 — $6,300 per asset. Provide clear license tiers:

components/footer.js

@@ -80,10 +80,11 @@ class CustomFooter extends HTMLElement {
               <li><a href="/gallery.html">Gallery</a></li>
               <li><a href="/processors.html">AI Processors</a></li>
               <li><a href="/marketplace.html">Marketplace</a></li>
+              <li><a href="/prompt-packs.html">Prompt Packs</a></li>
               <li><a href="/about.html">About Us</a></li>
             </ul>
           </div>
-          <div class="footer-column">
+<div class="footer-column">
             <h3>Resources</h3>
             <ul>
               <li><a href="/blog.html">Blog</a></li>

components/navbar.js

@@ -69,10 +69,7 @@ class CustomNavbar extends HTMLElement {
           align-items: center;
           justify-content: center;
         }
-        .hidden {
-          display: none;
-        }
-@media (max-width: 768px) {
+        @media (max-width: 768px) {
           nav {
             flex-direction: column;
             padding: 1rem;
@@ -90,13 +87,14 @@ class CustomNavbar extends HTMLElement {
           <li><a href="/gallery.html"><i data-feather="image"></i> Gallery</a></li>
           <li><a href="/processors.html"><i data-feather="cpu"></i> Processors</a></li>
           <li><a href="/marketplace.html"><i data-feather="shopping-bag"></i> Marketplace</a></li>
+          <li><a href="/prompt-packs.html"><i data-feather="package"></i> Prompt Packs</a></li>
           <li><a href="/cart.html" class="cart-btn">
             <i data-feather="shopping-cart"></i>
             <span id="cart-count" class="cart-count hidden"></span>
           </a></li>
           <li><a href="/login.html"><i data-feather="user"></i> Login</a></li>
         </ul>
-      </nav>
+</nav>
     `;
 
     // Watch for cart updates

index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Visionary Vault | Premium AI-Generated Assets</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-<link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -39,38 +38,40 @@
         <section class="py-20 px-4 max-w-7xl mx-auto">
             <h2 class="text-3xl font-bold mb-8 text-center">Top Selling Assets</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 hover:rotate-1 card-tilt">
-                    <img src="http://static.photos/technology/1024x576/42" alt="AI Generated Art" class="w-full h-64 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Cyberpunk Cityscape</h3>
-                        <div class="flex justify-between items-center">
-                            <span class="text-rose-400 font-bold">$450</span>
-                        <button onclick="window.cart.addItem({id: 1, title: 'Cyberpunk Cityscape', price: 450})" class="text-red-400 hover:text-red-300">
+                <div class="card-tilt bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300">
+                <img src="http://static.photos/technology/1024x576/42" alt="Cyberpunk Cityscape" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Cyberpunk Cityscape</h3>
+                    <div class="flex justify-between items-center">
+                        <span class="text-rose-400 font-bold">$450</span>
+                        <button class="text-red-400 hover:text-red-300" onclick="window.cart.addItem({id: 1, title: 'Cyberpunk Cityscape', price: 450})">
                             <i data-feather="shopping-bag"></i>
                         </button>
                     </div>
                 </div>
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 hover:rotate-1 card-tilt">
-                    <img src="http://static.photos/green/1024x576/43" alt="AI Generated Art" class="w-full h-64 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Ethereal Forest</h3>
-                        <div class="flex justify-between items-center">
-                            <span class="text-green-400 font-bold">$850</span>
-                        <button onclick="window.cart.addItem({id: 2, title: 'Ethereal Forest', price: 850})" class="text-green-400 hover:text-green-300">
-                            <i data-feather="shopping-bag"></i>
-                        </button>
-                    </div>
+            </div>
+            <div class="card-tilt bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300">
+                <img src="http://static.photos/nature/1024x576/43" alt="Ethereal Landscape" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Ethereal Landscape</h3>
+                <div class="flex justify-between items-center">
+                    <span class="text-green-400 font-bold">$890</span>
+                    <button class="text-green-400 hover:text-green-300" onclick="window.cart.addItem({id: 2, title: 'Ethereal Landscape', price: 890})">
+                        <i data-feather="shopping-bag"></i>
+                    </button>
+                </div>
+                </div>
+            </div>
+            <div class="card-tilt bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300">
+                <img src="http://static.photos/abstract/1024x576/44" alt="Fractal Dreams" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Fractal Dreams</h3>
+                <div class="flex justify-between items-center">
+                    <span class="text-blue-400 font-bold">$1,200</span>
+                <button class="text-blue-400 hover:text-blue-300" onclick="window.cart.addItem({id: 3, title: 'Fractal Dreams', price: 1200})">
+                        <i data-feather="shopping-bag"></i>
+                    </button>
                 </div>
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 hover:rotate-1 card-tilt">
-                    <img src="http://static.photos/blue/1024x576/44" alt="AI Generated Art" class="w-full h-64 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Ocean Dreamscape</h3>
-                        <div class="flex justify-between items-center">
-                            <span class="text-blue-400 font-bold">$1,200</span>
-                        <button onclick="window.cart.addItem({id: 3, title: 'Ocean Dreamscape', price: 1200})" class="text-blue-400 hover:text-blue-300">
-                            <i data-feather="shopping-bag"></i>
-                        </button>
-                    </div>
                 </div>
             </div>
         </section>
@@ -79,27 +80,35 @@
             <div class="max-w-7xl mx-auto">
                 <h2 class="text-3xl font-bold mb-8 text-center">AI Processing Power</h2>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-rose-500 transition-colors card-tilt">
+                <div class="card-tilt bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-rose-500 transition-all">
                     <i data-feather="image" class="w-12 h-12 mb-4 text-rose-500"></i>
-                    <h3 class="text-xl font-bold mb-2">Image to Image</h3>
-                    <p class="mb-4 opacity-80">Transform your photos with AI-powered style transfer</p>
-                    <a href="/processors.html#image-to-image" class="text-rose-400 hover:text-rose-300 flex items-center">
+                <h3 class="text-xl font-bold mb-2">Image to Image</h3>
+                <p class="mb-4 opacity-80">Transform your photos with AI-powered style transfer</p>
+                <a href="/processors.html#image-to-image" class="text-rose-400 hover:text-rose-300 flex items-center">
+                        Try now <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
+                </div>
+                <div class="card-tilt bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-green-500 transition-all">
+                <i data-feather="video" class="w-12 h-12 mb-4 text-green-500"></i>
+                <h3 class="text-xl font-bold mb-2">Image to Video</h3>
+                <p class="mb-4 opacity-80">Animate still images with motion and effects</p>
+                <a href="/processors.html#image-to-video" class="text-green-400 hover:text-green-300 flex items-center">
                         Try now <i data-feather="arrow-right" class="ml-2"></i>
                     </a>
                 </div>
-                <div class="bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-green-500 transition-colors card-tilt">
-                    <i data-feather="video" class="w-12 h-12 mb-4 text-green-500"></i>
-                    <h3 class="text-xl font-bold mb-2">Image to Video</h3>
-                    <p class="mb-4 opacity-80">Bring your images to life with AI animation</p>
-                    <a href="/processors.html#image-to-video" class="text-green-400 hover:text-green-300 flex items-center">
+                <div class="card-tilt bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-blue-500 transition-all">
+                <i data-feather="type" class="w-12 h-12 mb-4 text-blue-500"></i>
+                <h3 class="text-xl font-bold mb-2">Text to Image</h3>
+                <p class="mb-4 opacity-80">Generate stunning visuals from text descriptions</p>
+                <a href="/processors.html#text-to-image" class="text-blue-400 hover:text-blue-300 flex items-center">
                         Try now <i data-feather="arrow-right" class="ml-2"></i>
                     </a>
                 </div>
-                <div class="bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-blue-500 transition-colors card-tilt">
-                    <i data-feather="type" class="w-12 h-12 mb-4 text-blue-500"></i>
-                    <h3 class="text-xl font-bold mb-2">Text to Image</h3>
-                    <p class="mb-4 opacity-80">Generate stunning visuals from text descriptions</p>
-                    <a href="/processors.html#text-to-image" class="text-blue-400 hover:text-blue-300 flex items-center">
+                <div class="card-tilt bg-gray-800 p-8 rounded-xl border border-gray-700 hover:border-rose-500 transition-all">
+                <i data-feather="code" class="w-12 h-12 mb-4 text-rose-500"></i>
+                <h3 class="text-xl font-bold mb-2">Prompt Processor</h3>
+                <p class="mb-4 opacity-80">Refine and optimize your AI prompts</p>
+                <a href="/processors.html#prompt-processor" class="text-rose-400 hover:text-rose-300 flex items-center">
                         Try now <i data-feather="arrow-right" class="ml-2"></i>
                     </a>
                 </div>
@@ -108,12 +117,13 @@
 </main>
 
     <custom-footer></custom-footer>
+
     <!-- Component Scripts -->
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/ad-sidebar.js"></script>
-    <ad-sidebar></ad-sidebar>
-<script src="script.js"></script>
+    
+    <script src="script.js"></script>
     <script>
         feather.replace();
         VANTA.GLOBE({
@@ -130,10 +140,6 @@
             size: 0.8
         });
     </script>
-    <script>
-        // Initialize cart count
-        window.cart = new ShoppingCart();
-        window.cart.updateCartCount();
-    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

prompt-packs.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prompt Packs | AI Visionary Vault</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow pt-20">
+        <!-- Hero Section -->
+        <section class="py-16 px-4 bg-gradient-to-r from-blue-900 via-green-900 to-red-900">
+            <div class="max-w-7xl mx-auto text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                    Premium Prompt Packs
+                </h1>
+                <p class="text-xl md:text-2xl mb-8 opacity-90">
+                    Unlock creative potential with expertly crafted AI prompts
+                </p>
+            </div>
+        </section>
+
+        <!-- Prompt Packs Grid -->
+        <section class="py-20 px-4 max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold mb-12 text-center">Featured Collections</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Prompt Pack 1 -->
+                <div class="card-tilt bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-500">
+                    <img src="http://static.photos/abstract/640x360/101" alt="Abstract Dreams Pack" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Abstract Dreams</h3>
+                            <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm">100 Prompts</span>
+                        </div>
+                        <p class="mb-4 opacity-80">Create mesmerizing abstract compositions and surreal landscapes</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-2xl font-bold text-red-400">$10.99</span>
+                            <button onclick="window.cart.addItem({id: 'pack-1', title: 'Abstract Dreams Prompt Pack', price: 10.99})" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-full font-bold transition-all transform hover:-translate-y-1">
+                                Add to Cart
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Prompt Pack 2 -->
+                <div class="card-tilt bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-500">
+                    <img src="http://static.photos/cityscape/640x360/102" alt="Urban Futures Pack" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                        <h3 class="text-xl font-bold">Urban Futures</h3>
+                        <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm">85 Prompts</span>
+                    </div>
+                    <p class="mb-4 opacity-80">Cyberpunk cities, futuristic architecture, and neon-lit streets</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-2xl font-bold text-green-400">$10.99</span>
+                        <button onclick="window.cart.addItem({id: 'pack-2', title: 'Urban Futures Prompt Pack', price: 10.99})" class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-full font-bold transition-all transform hover:-translate-y-1">
+                            Add to Cart
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Prompt Pack 3 -->
+            <div class="card-tilt bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-500">
+                <img src="http://static.photos/nature/640x360/103" alt="Natural Wonders Pack" class="w-full h-48 object-cover">
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <h3 class="text-xl font-bold">Natural Wonders</h3>
+                        <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm">120 Prompts</span>
+                    </div>
+                    <p class="mb-4 opacity-80">Stunning landscapes, wildlife, and nature photography prompts</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-2xl font-bold text-blue-400">$10.99</span>
+                        <button onclick="window.cart.addItem({id: 'pack-3', title: 'Natural Wonders Prompt Pack', price: 10.99})" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-bold transition-all transform hover:-translate-y-1">
+                            Add to Cart
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Value Proposition -->
+        <section class="py-20 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-8">Why Choose Our Prompt Packs?</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <i data-feather="zap" class="w-12 h-12 mx-auto mb-4 text-rose-500"></i>
+                    <h3 class="text-xl font-bold mb-2">Expertly Crafted</h3>
+                    <p>Each prompt is tested and optimized for best results</p>
+                </div>
+                <div class="text-center">
+                    <i data-feather="layers" class="w-12 h-12 mx-auto mb-4 text-green-500"></i>
+                    <h3 class="text-xl font-bold mb-2">Variable Support</h3>
+                    <p>Customize prompts with replaceable variables for endless variations</p>
+                </div>
+                <div class="text-center">
+                    <i data-feather="trending-up" class="w-12 h-12 mx-auto mb-4 text-blue-500"></i>
+                    <h3 class="text-xl font-bold mb-2">Consistent Quality</h3>
+                    <p>Maintain style consistency across all your generated assets</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+    <ad-sidebar></ad-sidebar>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/ad-sidebar.js"></script>
+    
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

script.js

@@ -46,7 +46,6 @@ class ShoppingCart {
         this.items.push(item);
         this.saveToLocalStorage();
         this.updateCartCount();
-        this.showAddToCartToast(item.title);
     }
     
     removeItem(index) {
@@ -61,26 +60,62 @@ class ShoppingCart {
     
     updateCartCount() {
         const count = this.items.length;
-        const cartCountElements = document.querySelectorAll('#cart-count');
-        cartCountElements.forEach(element => {
-            element.textContent = count;
-            count > 0 ? element.classList.remove('hidden') : element.classList.add('hidden');
-        });
-    }
-    
-    showAddToCartToast(itemTitle) {
-        // Create toast notification
-        const toast = document.createElement('div');
-        toast.className = 'fixed top-20 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
-        toast.textContent = `Added "${itemTitle}" to cart`;
-        document.body.appendChild(toast);
+        // Update navbar cart count
+        const cartCountElement = document.getElementById('cart-count');
+        if (cartCountElement) {
+            cartCountElement.textContent = count;
+            count > 0 ? cartCountElement.classList.remove('hidden') : cartCountElement.classList.add('hidden');
+        }
         
-        setTimeout(() => {
-            toast.remove();
-        }, 3000);
+        // Dispatch event for other components to listen to
+        document.dispatchEvent(new CustomEvent('cartUpdated', {
+            detail: { items: this.items, count: count }
+        }));
     }
 }
 
+// Enhanced card tilt effect with color accents
+document.addEventListener('DOMContentLoaded', function() {
+    // Lazy loading for images
+    const lazyImages = document.querySelectorAll('img[data-src]');
+    
+    const lazyLoad = (target) => {
+        const io = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    observer.unobserve(img);
+                }
+            });
+        });
+        io.observe(target);
+    };
+    
+    lazyImages.forEach(lazyLoad);
+    
+    // Add enhanced tilt effect to cards with color matching
+    document.querySelectorAll('.card-tilt').forEach(card => {
+        const accentColor = getComputedStyle(card).borderColor || '#f43f5e';
+        
+        card.addEventListener('mousemove', (e) => {
+            const x = e.clientX - card.getBoundingClientRect().left;
+            const y = e.clientY - card.getBoundingClientRect().top;
+            const midX = card.clientWidth / 2;
+            const midY = card.clientHeight / 2;
+            const angleX = (midY - y) / 15;
+            const angleY = (x - midX) / 15;
+            
+            card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale3d(1.02, 1.02, 1.02)`;
+            card.style.boxShadow = `0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px ${accentColor}`;
+        });
+        
+        card.addEventListener('mouseleave', () => {
+            card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
+            card.style.boxShadow = '0 10px 25px -3px rgba(0, 0, 0, 0.1)';
+        });
+    });
+});
 // Initialize cart on page load
 window.cart = new ShoppingCart();
-window.cart.updateCartCount();
+window.cart.updateCartCount();

style.css

@@ -22,6 +22,7 @@ html {
     background: #ff4777;
     border-radius: 4px;
 }
+
 /* Card tilt effect */
 .card-tilt {
     transform-style: preserve-3d;
@@ -32,22 +33,6 @@ html {
     transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-5px);
 }
 
-/* Enhanced color palette for red, green, blue accents */
-.text-rose-400 { color: #E53935; }
-.text-green-400 { color: #00C853; }
-.text-blue-400 { color: #1976D2; }
-
-.bg-rose-500 { background-color: #E53935; }
-.bg-green-500 { background-color: #00C853; }
-.bg-blue-500 { background-color: #1976D2; }
-
-.hover\:text-rose-300:hover { color: #ef5350; }
-.hover\:text-green-300:hover { color: #69f0ae; }
-.hover\:text-blue-300:hover { color: #42a5f5; }
-
-.border-rose-500 { border-color: #E53935; }
-.border-green-500 { border-color: #00C853; }
-.border-blue-500 { border-color: #1976D2; }
 /* Glass morphism */
 .glass {
     backdrop-filter: blur(10px);