From 7fb368579ebffef28dfad0312b5b39e4948637c0 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Thu, 23 Apr 2026 12:22:25 +0800
Subject: [PATCH] feat(homepage): add Substack release-updates subscribe to
 Hero

Adds a collapsed "Subscribe to release updates" disclosure below the
Hero CTA row. Default state preserves the existing dark-luxury layout;
clicking expands the Substack embed iframe in place. Uses native
<details> to avoid runtime JS.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 homepage/src/components/Hero.astro | 89 ++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/homepage/src/components/Hero.astro b/homepage/src/components/Hero.astro
index db8deb6..63885a6 100644
--- a/homepage/src/components/Hero.astro
+++ b/homepage/src/components/Hero.astro
@@ -36,6 +36,27 @@ const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
         Star on GitHub
       </a>
     </div>
+
+    <details class="hero-subscribe anim anim-6">
+      <summary class="hero-subscribe-toggle">
+        <span>Subscribe to release updates</span>
+        <svg class="hero-subscribe-chevron" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </summary>
+      <div class="hero-subscribe-frame">
+        <p class="hero-subscribe-hint">No spam, unsubscribe anytime</p>
+        <iframe
+          src="https://yuxianglin.substack.com/embed"
+          title="Subscribe to release updates"
+          width="480"
+          height="150"
+          loading="lazy"
+          scrolling="no"
+          frameborder="0"
+        ></iframe>
+      </div>
+    </details>
   </div>
 </section>
 
@@ -217,6 +238,72 @@ const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
     text-decoration: none;
   }
 
+  /* Subscribe */
+  .hero-subscribe {
+    margin-top: 2rem;
+    width: 100%;
+    max-width: 480px;
+    text-align: center;
+  }
+
+  .hero-subscribe-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    cursor: pointer;
+    color: #8a8578;
+    font-size: 0.95rem;
+    list-style: none;
+    transition: color 0.2s ease;
+    user-select: none;
+  }
+
+  .hero-subscribe-toggle::-webkit-details-marker {
+    display: none;
+  }
+
+  .hero-subscribe-toggle:hover {
+    color: #d4a574;
+  }
+
+  .hero-subscribe-chevron {
+    transition: transform 0.25s ease;
+  }
+
+  .hero-subscribe[open] .hero-subscribe-chevron {
+    transform: rotate(180deg);
+  }
+
+  .hero-subscribe-frame {
+    margin-top: 1rem;
+    background: rgba(10, 10, 10, 0.6);
+    border: 1px solid rgba(212, 165, 116, 0.25);
+    border-radius: 10px;
+    padding: 6px 6px 0;
+    overflow: hidden;
+    animation: subscribeFadeIn 0.3s ease-out;
+  }
+
+  .hero-subscribe-hint {
+    font-size: 0.78rem;
+    color: #8a8578;
+    margin: 0.25rem 0 0.5rem;
+    text-align: center;
+  }
+
+  .hero-subscribe-frame iframe {
+    display: block;
+    width: 100%;
+    height: 150px;
+    border: 0;
+    background: transparent;
+  }
+
+  @keyframes subscribeFadeIn {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
   /* Staggered entrance */
   @keyframes heroIn {
     from {
@@ -239,6 +326,7 @@ const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
   .anim-3 { animation-delay: 0.55s; }
   .anim-4 { animation-delay: 0.75s; }
   .anim-5 { animation-delay: 0.95s; }
+  .anim-6 { animation-delay: 1.15s; }
 
   /* Responsive */
   @media (max-width: 768px) {
@@ -250,5 +338,6 @@ const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
     .hero-actions { flex-direction: column; gap: 1rem; }
     .hero-pillars { flex-direction: column; gap: 0.4rem; }
     .pillar-dot { display: none; }
+    .hero-subscribe-toggle { font-size: 0.85rem; }
   }
 </style>