Spaces:

Monter4
/

plugin-paradise

Running

App Files Files Community

Monter4 commited on Oct 30

Commit

f5c3796

verified ·

1 Parent(s): 3d16d09

https://aescripts.com/after-effects/

Browse files

Files changed (3) hide show

components/product-card.js +16 -4
index.html +11 -15
style.css +9 -11

components/product-card.js CHANGED Viewed

@@ -47,8 +47,10 @@ class ProductCard extends HTMLElement {
                     padding: 0.25rem 0.5rem;
                     border-radius: 9999px;
                     margin-bottom: 0.75rem;
                 }
-                .card-footer {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
@@ -59,7 +61,15 @@ class ProductCard extends HTMLElement {
                     font-weight: 700;
                     color: #1a202c;
                 }
-                .card-rating {
                     display: flex;
                     align-items: center;
                     color: #718096;
@@ -95,8 +105,10 @@ class ProductCard extends HTMLElement {
                     <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>

                     padding: 0.25rem 0.5rem;
                     border-radius: 9999px;
                     margin-bottom: 0.75rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
                 }
+.card-footer {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                     font-weight: 700;
                     color: #1a202c;
                 }
+                .free-badge {
+                    background-color: #48bb78;
+                    color: white;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.25rem;
+                    font-size: 0.75rem;
+                    font-weight: bold;
+                }
+.card-rating {
                     display: flex;
                     align-items: center;
                     color: #718096;
                     <h3 class="card-title">${title}</h3>
                     <span class="card-category">${category}</span>
                     <div class="card-footer">
+                        ${price === 'Free' ?
+                          '<span class="free-badge">FREE</span>' :
+                          `<span class="card-price">${price}</span>`}
+<span class="card-rating">
                             <i data-feather="star" class="star-icon"></i>
                             ${rating}
                         </span>

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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>
@@ -19,11 +19,10 @@
     <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"
@@ -57,14 +56,12 @@
                 </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"
@@ -82,17 +79,16 @@
                 </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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AE Scripts | Professional After Effects Plugins</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>
     <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">After Effects Plugins</h1>
+                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Browse All Plugins</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"
                 </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 & Updated</h2>
+                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">See What's New</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"
                 </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">AE Scripts Membership</h2>
+                <p class="text-gray-600 dark:text-gray-300 mb-6">Get unlimited access to all our plugins with a single membership.</p>
                 <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200">
+                    Learn About Membership
                 </button>
             </div>
         </section>
+</main>
     <custom-footer></custom-footer>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

style.css CHANGED Viewed

@@ -1,8 +1,10 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;
@@ -14,15 +16,11 @@ p {
 	margin-bottom: 10px;
 	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
 .card p:last-child {
 	margin-bottom: 0;
 }

 body {
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;
 	margin-bottom: 10px;
 	margin-top: 5px;
 }
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
 }
 .card p:last-child {
 	margin-bottom: 0;
 }