Unified Subscription UI: Leveraging DRY Components

• By Rich Martinez

Unifying Our Content Strategy: The Power of DRY Components

The Problem

As we built out the new subscription feature for "Production-Ready AI", we drifted into a common trap: code duplication. We had a beautiful subscription form on the home page, but the dedicated /subscribe page was lagging behind. It used a hardcoded HTML form that didn't talk to our new API, lacked the visual polish of our design system, and had inconsistent copy. We had two sources of truth for the same user action—never a good idea.

The Solution

We decided to lean into Astro's component-based architecture. Instead of maintaining two separate forms, we refactored the /subscribe page to use the exact same SubscribeForm.astro component we built for the home page.

This seemingly small change has big benefits:

  1. Single Source of Truth: Any updates to the form logic or API integration happen in one place.
  2. Shared Styling: The "Inner Circle" branding is now consistent across the site.
  3. Future Proofing: If we add HCaptcha or new fields later, we only do it once.

Here is how simple the /subscribe page became:

<section class="max-w-4xl mx-auto px-4 py-20 text-center">
    <div class="bg-bg-muted rounded-2xl p-12 border border-white/5">
        <h1 class="text-3xl font-bold text-text-base mb-4">
            Join the Inner Circle
        </h1>
        <SubscribeForm />
    </div>
</section>

The AI Angle

This refactor was a breeze with our AI pair programmer. I asked the agent to "update the subscribe page so that it works like the home page subscribe area," and it immediately identified the SubscribeForm component on the home page and the disparity in the subscribe page.

It didn't just copy-paste code; it understood the intent—unification. It swapped out the entire manual form block for a single component tag and aligned the copy. When I asked for a specific line break in the marketing text ("No fluff, just code."), it applied that fix to the subscribe.astro page.

Self-Correction: I realized after the fact that I should ensure the home page also shares this exact line break for total consistency. A quick check confirmed we should align them perfectly.

Key Takeaways

  • Reuse Early: If you write the same HTML twice, make it a component.
  • AI for Refactoring: AI agents excel at spotting patterns and applying them across files.
  • Visual Consistency: Users trust a platform that feels cohesive. Fragments of old UI erode that trust.