Merge pull request #1 from v2er-app/feature/add-pease-product

Add Pease.day to related products section

Author: graycreate

src/components/RelatedProducts.astro

@@ -30,6 +30,19 @@
           <span>了解更多 →</span>
         </div>
       </a>
+
+      <a href="https://pease.day" class="product-card" target="_blank" rel="noopener">
+        <div class="product-content">
+          <div class="product-header">
+            <img src="https://pease.day/icon-128x128.png" alt="Pease Logo" class="product-logo no-bg" />
+            <h3>Pease</h3>
+          </div>
+          <p>美观简约的环境音混音器，为专注、放松或睡眠创造完美的声音环境</p>
+        </div>
+        <div class="cta">
+          <span>了解更多 →</span>
+        </div>
+      </a>
     </div>
   </div>
 </section> 

src/styles/related-products.css

@@ -20,17 +20,19 @@
 }
 
 .product-card {
-    @apply p-8 rounded-2xl bg-white/[0.02]
-    border border-zinc-800
-    transition-all relative
-    hover:bg-zinc-900 hover:border-zinc-700
-    transform hover:-translate-y-1;
-  transition: all 0.3s ease;
+    padding: 2rem;
+    border-radius: 1rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgb(39, 39, 42);
+    transition: all 0.3s ease;
+    position: relative;
 }
 
 .product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    background: rgb(24, 24, 27);
+    border-color: rgb(63, 63, 70);
 }
 
 .product-header {
@@ -49,6 +51,11 @@
   object-fit: contain;
 }
 
+.product-logo.no-bg {
+  background: transparent;
+  padding: 0;
+}
+
 .product-content h3 {
   font-size: 1.5rem;
   font-weight: 600;
@@ -102,4 +109,8 @@
     height: 40px;
     padding: 4px;
   }
+
+  .product-logo.no-bg {
+    padding: 0;
+  }
 }