From d269983874d49001d331b24df9501552d8c6f978 Mon Sep 17 00:00:00 2001
From: Gray Zhang <ghuiii.zhang@gmail.com>
Date: Mon, 29 Sep 2025 19:24:48 +0800
Subject: [PATCH] feat: add Pease.day to related products section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added Pease product card with description
- Fixed border radius styling for all product cards
- Added no-bg class for logos with existing backgrounds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/RelatedProducts.astro | 13 +++++++++++++
 src/styles/related-products.css      | 23 +++++++++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/RelatedProducts.astro b/src/components/RelatedProducts.astro
index 1c60ccb..a7585bd 100644
--- a/src/components/RelatedProducts.astro
+++ b/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> 
\ No newline at end of file
diff --git a/src/styles/related-products.css b/src/styles/related-products.css
index 727b947..568ee43 100644
--- a/src/styles/related-products.css
+++ b/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;
+  }
 } 
\ No newline at end of file