https://aescripts.com/

README.md

@@ -1,10 +1,13 @@
 ---
-title: Plugin Paradise
-emoji: 📚
-colorFrom: purple
-colorTo: gray
+title: PlugIn Paradise 🎨
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/product-card.js

@@ -0,0 +1,115 @@
+class ProductCard extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        const title = this.getAttribute('title') || 'Product';
+        const price = this.getAttribute('price') || '0.00';
+        const category = this.getAttribute('category') || 'Plugin';
+        const image = this.getAttribute('image') || 'http://static.photos/technology/640x360/1';
+        const rating = this.getAttribute('rating') || '5.0';
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    background: white;
+                    border-radius: 0.75rem;
+                    overflow: hidden;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    transition: transform 0.2s, box-shadow 0.2s;
+                }
+                .card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                .card-image {
+                    width: 100%;
+                    height: 180px;
+                    object-fit: cover;
+                }
+                .card-body {
+                    padding: 1.25rem;
+                }
+                .card-title {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin-bottom: 0.5rem;
+                    color: #1a202c;
+                }
+                .card-category {
+                    display: inline-block;
+                    background-color: #ebf4ff;
+                    color: #4299e1;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 9999px;
+                    margin-bottom: 0.75rem;
+                }
+                .card-footer {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-top: 1rem;
+                }
+                .card-price {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #1a202c;
+                }
+                .card-rating {
+                    display: flex;
+                    align-items: center;
+                    color: #718096;
+                    font-size: 0.875rem;
+                }
+                .star-icon {
+                    color: #f6ad55;
+                    margin-right: 0.25rem;
+                }
+                
+                /* Dark mode styles */
+                .dark .card {
+                    background: #2d3748;
+                }
+                .dark .card-title {
+                    color: #f7fafc;
+                }
+                .dark .card-category {
+                    background-color: #2b6cb0;
+                    color: #ebf8ff;
+                }
+                .dark .card-price {
+                    color: #f7fafc;
+                }
+                .dark .card-rating {
+                    color: #cbd5e0;
+                }
+            </style>
+            
+            <div class="card">
+                <img src="${image}" alt="${title}" class="card-image">
+                <div class="card-body">
+                    <h3 class="card-title">${title}</h3>
+                    <span class="card-category">${category}</span>
+                    <div class="card-footer">
+                        <span class="card-price">$${price}</span>
+                        <span class="card-rating">
+                            <i data-feather="star" class="star-icon"></i>
+                            ${rating}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }
+}
+
+customElements.define('product-card', ProductCard);

index.html

@@ -1,19 +1,100 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PlugIn Paradise | Creative Tools Marketplace</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>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/theme-toggle.js"></script>
+    <script src="components/product-card.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Featured Plugins</h1>
+                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View all</a>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <product-card 
+                    title="Motion Tools" 
+                    price="49.99" 
+                    category="After Effects" 
+                    image="http://static.photos/technology/640x360/1"
+                    rating="4.8">
+                </product-card>
+                
+                <product-card 
+                    title="FX Console" 
+                    price="29.99" 
+                    category="After Effects" 
+                    image="http://static.photos/technology/640x360/2"
+                    rating="4.9">
+                </product-card>
+                
+                <product-card 
+                    title="Element 3D" 
+                    price="199.99" 
+                    category="3D Animation" 
+                    image="http://static.photos/technology/640x360/3"
+                    rating="4.7">
+                </product-card>
+                
+                <product-card 
+                    title="Saber" 
+                    price="Free" 
+                    category="Visual Effects" 
+                    image="http://static.photos/technology/640x360/4"
+                    rating="4.9">
+                </product-card>
+            </div>
+        </section>
+        
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-3xl font-bold text-gray-900 dark:text-white">New Releases</h2>
+                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View all</a>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <product-card 
+                    title="Overlord" 
+                    price="39.99" 
+                    category="Illustrator" 
+                    image="http://static.photos/technology/640x360/5"
+                    rating="4.8">
+                </product-card>
+                
+                <product-card 
+                    title="Newton 3" 
+                    title="149.99" 
+                    category="Physics" 
+                    image="http://static.photos/technology/640x360/6"
+                    rating="4.6">
+                </product-card>
+            </div>
+        </section>
+        
+        <section class="bg-blue-50 dark:bg-gray-800 rounded-xl p-8 mb-12">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Join Our Creative Community</h2>
+                <p class="text-gray-600 dark:text-gray-300 mb-6">Get access to exclusive plugins, tutorials, and resources for creative professionals.</p>
+                <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200">
+                    Sign Up Free
+                </button>
+            </div>
+        </section>
+    </main>
+    
+    <custom-footer></custom-footer>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>