Disable incomplete component cards with Coming Soon state

- Status Indicators: disabled with Coming Soon button
- Emergency Safe Space: disabled with Coming Soon button
- Icons: disabled with Coming Soon button
- Building Blocks: disabled with Coming Soon button

All cards now have opacity-50 styling and non-clickable disabled buttons
to indicate components are not yet available on GitHub Pages.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: babayomi

src/components/atomic-structure.html

@@ -142,7 +142,7 @@
 
           <!-- Building Blocks Card -->
           <div
-            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300"
+            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300 opacity-50"
           >
             <div class="flex flex-col items-center text-center space-y-6">
               <!-- Building Blocks Icon -->
@@ -185,13 +185,12 @@
                 Molecular components combining design foundations that work together.
               </p>
               <div class="w-full">
-                <a href="../components/building-blocks.html">
-                  <button
-                    class="w-full text-azurite-blue bg-transparent font-medium py-3 px-6 sm:py-2 sm:px-4 rounded-md transition-all duration-300 hover:bg-azurite-blue-50 hover:text-azurite-blue-700 focus:outline-none focus:ring-4 focus:ring-azurite-blue-200 active:bg-azurite-blue-100 text-base sm:text-sm underline underline-offset-2"
-                  >
-                    Explore building blocks
-                  </button>
-                </a>
+                <button
+                  disabled
+                  class="w-full border-2 border-grey-300 text-grey-400 bg-transparent font-medium py-2.5 px-5 sm:py-1.5 sm:px-3.5 rounded-md shadow-gentle text-base sm:text-sm cursor-not-allowed opacity-60"
+                >
+                  Coming Soon
+                </button>
               </div>
             </div>
           </div>

src/components/atoms/design-foundations.html

@@ -310,7 +310,7 @@
           </div>
           <!-- Status Indicators Card -->
           <div
-            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300"
+            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300 opacity-50"
           >
             <div class="flex flex-col items-center text-center space-y-6">
               <div class="bg-grey-100 p-6 rounded-full">
@@ -347,19 +347,18 @@
                 feedback.
               </p>
               <div class="w-full">
-                <a href="../../components/atoms/status-indicators.html">
-                  <button
-                    class="w-full text-azurite-blue bg-transparent font-medium py-3 px-6 sm:py-2 sm:px-4 rounded-md transition-all duration-300 hover:bg-azurite-blue-50 hover:text-azurite-blue-700 focus:outline-none focus:ring-4 focus:ring-azurite-blue-200 active:bg-azurite-blue-100 text-base sm:text-sm underline underline-offset-2"
-                  >
-                    View Status Indicators
-                  </button>
-                </a>
+                <button
+                  disabled
+                  class="w-full border-2 border-grey-300 text-grey-400 bg-transparent font-medium py-2.5 px-5 sm:py-1.5 sm:px-3.5 rounded-md shadow-gentle text-base sm:text-sm cursor-not-allowed opacity-60"
+                >
+                  Coming Soon
+                </button>
               </div>
             </div>
           </div>
           <!-- Safe Mode Toggle Card -->
           <div
-            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300"
+            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300 opacity-50"
           >
             <div class="flex flex-col items-center text-center space-y-6">
               <div class="bg-rhodochrosite-rose-50 p-6 rounded-full">
@@ -386,19 +385,18 @@
                 without cognitive load.
               </p>
               <div class="w-full">
-                <a href="../../components/atoms/safe-mode-toggle.html">
-                  <button
-                    class="w-full text-azurite-blue bg-transparent font-medium py-3 px-6 sm:py-2 sm:px-4 rounded-md transition-all duration-300 hover:bg-azurite-blue-50 hover:text-azurite-blue-700 focus:outline-none focus:ring-4 focus:ring-azurite-blue-200 active:bg-azurite-blue-100 text-base sm:text-sm underline underline-offset-2"
-                  >
-                    Explore Safe Space
-                  </button>
-                </a>
+                <button
+                  disabled
+                  class="w-full border-2 border-grey-300 text-grey-400 bg-transparent font-medium py-2.5 px-5 sm:py-1.5 sm:px-3.5 rounded-md shadow-gentle text-base sm:text-sm cursor-not-allowed opacity-60"
+                >
+                  Coming Soon
+                </button>
               </div>
             </div>
           </div>
           <!-- Icon Card -->
           <div
-            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300"
+            class="bg-selenite-white-100 rounded-lg border border-grey-200 p-8 hover:shadow-soft transition-all duration-300 opacity-50"
           >
             <div class="flex flex-col items-center text-center space-y-6">
               <div class="bg-sunstone-orange-50 p-6 rounded-full">
@@ -428,13 +426,12 @@
                 content categories.
               </p>
               <div class="w-full">
-                <a href="../../components/atoms/icons.html">
-                  <button
-                    class="w-full text-azurite-blue bg-transparent font-medium py-3 px-6 sm:py-2 sm:px-4 rounded-md transition-all duration-300 hover:bg-azurite-blue-50 hover:text-azurite-blue-700 focus:outline-none focus:ring-4 focus:ring-azurite-blue-200 active:bg-azurite-blue-100 text-base sm:text-sm underline underline-offset-2"
-                  >
-                    Explore Icon System
-                  </button>
-                </a>
+                <button
+                  disabled
+                  class="w-full border-2 border-grey-300 text-grey-400 bg-transparent font-medium py-2.5 px-5 sm:py-1.5 sm:px-3.5 rounded-md shadow-gentle text-base sm:text-sm cursor-not-allowed opacity-60"
+                >
+                  Coming Soon
+                </button>
               </div>
             </div>
           </div>