Spaces:

moreiraj93
/

mltxstudio

Running

App Files Files Community

moreiraj93 commited on Oct 24, 2025

Commit

fb763f8

verified ·

1 Parent(s): 8c6a321

AI Showcase Website Blueprint

Browse files

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:

Personal Use (lowest price)

Commercial Standard (default)

Exclusive / Extended (highest price)

Prompt pack: 100 prompts for $10.99 (digital product delivery).

Offer bundles (e.g., buy 3 assets get 10% off) and subscription for agencies (monthly credit usage).

Display price and license type prominently on product pages.

10 — Security, legal & ethical considerations

Copyright & IP: Clearly state who owns outputs and what buyers are allowed to do. Consider offering exclusive license add‑ons.

Content moderation: scan uploads and generated outputs for disallowed content (nudity, copyrighted logos, hate symbols). Implement manual review for flagged items.

User accounts: email verification, optional 2FA for high-value sellers.

Payment security: use Stripe (PCI compliant) and store no card data on your servers.

GDPR & privacy: provide data export/delete per user request.

11 — Performance & optimization

Use CDN for all media (S3 + CloudFront).

Generate web-optimized variants (webp, avif) and progressive/video thumbnails.

Lazy-load offs

Files changed (7) hide show

components/navbar.js +4 -1
gallery.html +116 -0
index.html +60 -24
marketplace.html +105 -0
processors.html +157 -0
script.js +19 -7
style.css +16 -1

components/navbar.js CHANGED Viewed

@@ -69,7 +69,10 @@ class CustomNavbar extends HTMLElement {
           align-items: center;
           justify-content: center;
         }
-        @media (max-width: 768px) {
           nav {
             flex-direction: column;
             padding: 1rem;

           align-items: center;
           justify-content: center;
         }
+        .hidden {
+          display: none;
+        }
+@media (max-width: 768px) {
           nav {
             flex-direction: column;
             padding: 1rem;

gallery.html ADDED Viewed

	@@ -0,0 +1,116 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gallery | AI Visionary Vault</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</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 px-4">
+        <!-- Gallery Header -->
+        <div class="max-w-7xl mx-auto mb-8">
+            <h1 class="text-4xl font-bold mb-4">AI Gallery</h1>
+            <p class="text-lg opacity-80">Explore our premium collection of AI-generated images and videos</p>
+        </div>
+        <!-- Filters -->
+        <div class="max-w-7xl mx-auto mb-8">
+            <div class="flex flex-wrap gap-4">
+                <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                    <option>All Media Types</option>
+                    <option>Images</option>
+                    <option>Videos</option>
+            </select>
+            <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                    <option>All Categories</option>
+                    <option>Abstract</option>
+                    <option>Nature</option>
+                    <option>Technology</option>
+                    <option>Cityscape</option>
+                </select>
+                <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                    <option>Price: Low to High</option>
+                    <option>Price: High to Low</option>
+                    <option>Most Popular</option>
+                </select>
+                <input type="text" placeholder="Search..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                <button class="bg-rose-500 hover:bg-rose-600 px-6 py-2 rounded-lg transition-colors">
+                    Apply Filters
+                </button>
+            </div>
+        </div>
+        <!-- Gallery Grid -->
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <!-- Gallery Item 1 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                    <img src="http://static.photos/red/320x240/1" alt="AI Art" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold mb-2">Crimson Nebula</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-rose-400 font-bold">$300</span>
+                            <button onclick="window.cart.addItem({id: 101, title: 'Crimson Nebula', price: 300})" class="text-rose-400 hover:text-rose-300">
+                                <i data-feather="shopping-bag"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Gallery Item 2 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                    <img src="http://static.photos/green/320x240/2" alt="AI Art" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold mb-2">Emerald Forest</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-green-400 font-bold">$850</span>
+                            <button onclick="window.cart.addItem({id: 102, title: 'Emerald Forest', price: 850})" class="text-green-400 hover:text-green-300">
+                                <i data-feather="shopping-bag"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Gallery Item 3 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                    <img src="http://static.photos/blue/320x240/3" alt="AI Art" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold mb-2">Azure Ocean</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-blue-400 font-bold">$1,200</span>
+                            <button onclick="window.cart.addItem({id: 103, title: 'Azure Ocean', price: 1200})" class="text-blue-400 hover:text-blue-300">
+                                <i data-feather="shopping-bag"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Gallery Item 4 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                    <img src="http://static.photos/abstract/320x240/4" alt="AI Art" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold mb-2">Digital Dream</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-rose-400 font-bold">$2,500</span>
+                            <button onclick="window.cart.addItem({id: 104, title: 'Digital Dream', price: 2500})" class="text-rose-400 hover:text-rose-300">
+                                <i data-feather="shopping-bag"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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>

index.html CHANGED Viewed

@@ -4,7 +4,8 @@
     <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="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>
@@ -34,54 +35,85 @@
                 </div>
             </div>
         </section>
         <!-- Top Selling Section -->
         <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-shadow duration-300 transform hover:-translate-y-2 hover:rotate-1">
                     <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 class="text-red-400 hover:text-red-300">
-                                <i data-feather="shopping-bag"></i>
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <!-- Repeat for other top selling items -->
             </div>
         </section>
         <!-- Processors Preview Section -->
         <section class="py-20 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
             <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">
-                        <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">
-                            Try now <i data-feather="arrow-right" class="ml-2"></i>
-                        </a>
-                    </div>
-                    <!-- Repeat for other processor types -->
                 </div>
             </div>
         </section>
-    </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>
-    <script src="script.js"></script>
     <script>
         feather.replace();
         VANTA.GLOBE({
@@ -98,6 +130,10 @@
             size: 0.8
         });
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <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">
     <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>
                 </div>
             </div>
         </section>
         <!-- Top Selling Section -->
         <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">
+                            <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="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>
         <!-- Processors Preview Section -->
         <section class="py-20 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
             <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">
+                    <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">
+                        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">
+                        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">
+                        Try now <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
                 </div>
             </div>
         </section>
+</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>
         feather.replace();
         VANTA.GLOBE({
             size: 0.8
         });
     </script>
+    <script>
+        // Initialize cart count
+        window.cart = new ShoppingCart();
+        window.cart.updateCartCount();
+    </script>
 </body>
 </html>

marketplace.html ADDED Viewed

	@@ -0,0 +1,105 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marketplace | AI Visionary Vault</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</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 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h1 class="text-4xl font-bold mb-8 text-center">AI Marketplace</h1>
+            <!-- Product Categories -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+                <div class="bg-gradient-to-br from-rose-500/20 to-red-500/20 border border-rose-500 rounded-xl p-6 text-center card-tilt">
+                <i data-feather="image" class="w-16 h-16 mx-auto mb-4 text-rose-400"></i>
+                <h3 class="text-xl font-bold mb-2">AI Images</h3>
+                    <p class="mb-4">Premium AI-generated static images</p>
+                    <a href="#images" class="text-rose-400 hover:text-rose-300">
+                    Explore Collection
+                </a>
+            </div>
+            <div class="bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500 rounded-xl p-6 text-center card-tilt">
+                    <i data-feather="video" class="w-16 h-16 mx-auto mb-4 text-green-400"></i>
+                    <h3 class="text-xl font-bold mb-2">AI Videos</h3>
+                    <p class="mb-4">Dynamic AI-generated video content</p>
+                    <a href="#videos" class="text-green-400 hover:text-green-300">
+                        Browse Videos
+                    </a>
+                </div>
+                <div class="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500 rounded-xl p-6 text-center card-tilt">
+                        <i data-feather="package" class="w-16 h-16 mx-auto mb-4 text-blue-400"></i>
+                        <h3 class="text-xl font-bold mb-2">Prompt Packs</h3>
+                        <p class="mb-4">Curated prompt collections for consistent results</p>
+                        <a href="#prompts" class="text-blue-400 hover:text-blue-300">
+                            View Packs
+                        </a>
+                    </div>
+                </div>
+                <!-- Featured Products -->
+                <h2 class="text-3xl font-bold mb-6 text-center">Featured Assets</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Product 1 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                        <img src="http://static.photos/red/320x240/10" alt="Premium AI Asset" class="w-full h-48 object-cover">
+                        <div class="p-4">
+                            <h3 class="font-bold mb-2">Neon Dreams Collection</h3>
+                        <p class="text-sm opacity-80 mb-4">Complete set of cyberpunk-themed assets</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-rose-400 font-bold">$2,800</span>
+                            <button onclick="window.cart.addItem({id: 201, title: 'Neon Dreams Collection', price: 2800})" class="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg transition-colors">
+                                Add to Cart
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Product 2 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                            <img src="http://static.photos/green/320x240/11" alt="Premium AI Asset" class="w-full h-48 object-cover">
+                            <div class="p-4">
+                                <h3 class="font-bold mb-2">Prompt Master Pack</h3>
+                                <p class="text-sm opacity-80 mb-4">100 professional prompts for various styles</p>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-green-400 font-bold">$10.99</span>
+                                    <button onclick="window.cart.addItem({id: 202, title: 'Prompt Master Pack', price: 10.99})" class="px-4 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors">
+                                        Add to Cart
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- Product 3 -->
+                            <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 card-tilt">
+                                <img src="http://static.photos/blue/320x240/12" alt="Premium AI Asset" class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h3 class="font-bold mb-2">Exclusive Video Bundle</h3>
+                                <p class="text-sm opacity-80 mb-4">5 high-quality AI videos with commercial license</p>
+                                <div class="flex justify-between items-center">
+                                        <span class="text-blue-400 font-bold">$6,300</span>
+                                        <button onclick="window.cart.addItem({id: 203, title: 'Exclusive Video Bundle', price: 6300})" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors">
+                                            Add to Cart
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </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>

processors.html ADDED Viewed

	@@ -0,0 +1,157 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Processors | AI Visionary Vault</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</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 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h1 class="text-4xl font-bold mb-8 text-center">AI Processing Tools</h1>
+            <!-- Processor Tabs -->
+            <div class="flex flex-wrap gap-4 justify-center mb-8">
+                <a href="#image-to-image" class="px-6 py-3 bg-rose-500 hover:bg-rose-600 rounded-lg transition-colors">
+                Image to Image
+            </a>
+            <a href="#image-to-video" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
+                Image to Video
+            </a>
+            <a href="#text-to-image" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
+                Text to Image
+            </a>
+            <a href="#prompt-processor" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
+                Prompt Processor
+            </a>
+        </div>
+        <!-- Image to Image Processor -->
+        <section id="image-to-image" class="mb-16">
+            <div class="bg-gray-800 rounded-xl p-8">
+                <h2 class="text-2xl font-bold mb-6 text-rose-400">Image to Image</h2>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-lg font-bold mb-4">Upload Source Image</h3>
+                        <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center">
+                            <i data-feather="upload" class="w-12 h-12 mx-auto mb-4 text-rose-400"></i>
+                        <p class="mb-4">Drag & drop your image here or click to browse</p>
+                        <input type="file" class="hidden" id="image-upload">
+                        <button onclick="document.getElementById('image-upload').click()" class="px-6 py-3 bg-rose-500 hover:bg-rose-600 rounded-lg transition-colors">
+                            Select Image
+                        </button>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold mb-4">Style Presets</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <button class="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                            Cyberpunk
+                        </button>
+                        <button class="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                                Futuristic
+                            </button>
+                            <button class="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                            Abstract
+                        </button>
+                        <button class="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                            Vintage
+                        </button>
+                        <button class="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                            Natural
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <button class="px-8 py-4 bg-rose-500 hover:bg-rose-600 rounded-lg transition-colors">
+                            Transform Image
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Image to Video Processor -->
+        <section id="image-to-video" class="mb-16">
+            <div class="bg-gray-800 rounded-xl p-8">
+                    <h2 class="text-2xl font-bold mb-6 text-green-400">Image to Video</h2>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                        <div>
+                            <h3 class="text-lg font-bold mb-4">Upload Image Sequence</h3>
+                    <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center">
+                        <i data-feather="video" class="w-12 h-12 mx-auto mb-4 text-green-400"></i>
+                            <p class="mb-4">Upload multiple images for animation or a single image with motion presets</p>
+                            <input type="file" multiple class="hidden" id="video-upload">
+                            <button onclick="document.getElementById('video-upload').click()" class="px-6 py-3 bg-green-500 hover:bg-green-600 rounded-lg transition-colors">
+                                Select Files
+                            </button>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-bold mb-4">Animation Presets</h3>
+                            <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3">
+                                <option>Parallax Scroll</option>
+                                <option>Camera Pan</option>
+                                <option>Zoom Effect</option>
+                                <option>Particle Overlay</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <button class="px-8 py-4 bg-green-500 hover:bg-green-600 rounded-lg transition-colors">
+                                    Generate Video
+                                </button>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- Text to Image Processor -->
+                    <section id="text-to-image" class="mb-16">
+                        <div class="bg-gray-800 rounded-xl p-8">
+                            <h2 class="text-2xl font-bold mb-6 text-blue-400">Text to Image</h2>
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                            <div>
+                                <h3 class="text-lg font-bold mb-4">Enter Prompt</h3>
+                        <textarea placeholder="Describe the image you want to generate..." class="w-full h-32 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3" placeholder="A futuristic cityscape at sunset with flying cars and neon lights" class="w-full h-32 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3"></textarea>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold mb-4">Generation Settings</h3>
+                        <div class="space-y-4">
+                            <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3">
+                            <option>Standard Quality</option>
+                            <option>High Quality</option>
+                            <option>Ultra Quality</option>
+                        </select>
+                        <div class="flex items-center gap-4">
+                            <label>Variations:</label>
+                            <input type="number" value="4" min="1" max="8" class="w-20 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <button class="px-8 py-4 bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors">
+                                Generate Images
+                            </button>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </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 CHANGED Viewed

@@ -36,7 +36,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 });
 // Shopping cart functionality
 class ShoppingCart {
     constructor() {
@@ -47,6 +46,7 @@ class ShoppingCart {
         this.items.push(item);
         this.saveToLocalStorage();
         this.updateCartCount();
     }
     removeItem(index) {
@@ -61,14 +61,26 @@ class ShoppingCart {
     updateCartCount() {
         const count = this.items.length;
-        const cartCountElement = document.getElementById('cart-count');
-        if (cartCountElement) {
-            cartCountElement.textContent = count;
-            count > 0 ? cartCountElement.classList.remove('hidden') : cartCountElement.classList.add('hidden');
-        }
     }
 }
 // Initialize cart on page load
 window.cart = new ShoppingCart();
-window.cart.updateCartCount();

         });
     });
 });
 // Shopping cart functionality
 class ShoppingCart {
     constructor() {
         this.items.push(item);
         this.saveToLocalStorage();
         this.updateCartCount();
+        this.showAddToCartToast(item.title);
     }
     removeItem(index) {
     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);
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
     }
 }
 // Initialize cart on page load
 window.cart = new ShoppingCart();
+window.cart.updateCartCount();

style.css CHANGED Viewed

@@ -22,7 +22,6 @@ html {
     background: #ff4777;
     border-radius: 4px;
 }
 /* Card tilt effect */
 .card-tilt {
     transform-style: preserve-3d;
@@ -33,6 +32,22 @@ html {
     transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-5px);
 }
 /* Glass morphism */
 .glass {
     backdrop-filter: blur(10px);

     background: #ff4777;
     border-radius: 4px;
 }
 /* Card tilt effect */
 .card-tilt {
     transform-style: preserve-3d;
     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);