Improve Visual Design & UI Consistency of Landing Page

Author: hk2166

app/src/config/Config.tsx

@@ -248,7 +248,12 @@ export default function (props: {
 
   return (
     <div id="config-wrapper">
-      <p id="config-disclaimer">refresh webpage to go to main application page</p>
+      <div className="config-header">
+        <h2 className="config-title">Available Modules</h2>
+        <p className="config-description">
+          Enable or disable modules to customize your Music Blocks experience
+        </p>
+      </div>
 
       <ul id="config-module-list">
         {Object.entries(modules).map(([id, { name, desc, active, elements, flags }], i) => (

app/src/config/ConfigPage.tsx

@@ -22,7 +22,53 @@ export default function (props: {
 
   return (
     <div id="config-page">
+      <div id="config-page-hero">
+        <div className="config-page-hero-content">
+          <div className="config-page-logo">
+            <svg viewBox="0 0 100 100" className="logo-icon">
+              <circle cx="50" cy="50" r="45" fill="#1b9cfc" />
+              <path d="M35 40 L35 60 L55 50 Z" fill="white" />
+              <circle cx="70" cy="35" r="8" fill="#0652dd" />
+              <circle cx="70" cy="65" r="8" fill="#0652dd" />
+            </svg>
+          </div>
+          <h1 className="config-page-title">Music Blocks v4</h1>
+          <p className="config-page-subtitle">
+            Configure your Music Blocks experience by selecting the modules and features you
+            want to use
+          </p>
+          <div className="config-page-badge">
+            <span className="badge-icon">⚙️</span>
+            <span className="badge-text">Development Configuration</span>
+          </div>
+        </div>
+      </div>
+
       <div id="config-page-content-wrapper">
+        <div className="config-instructions">
+          <div className="instruction-card">
+            <span className="instruction-icon">1️⃣</span>
+            <div className="instruction-content">
+              <h3>Select Modules</h3>
+              <p>Toggle the modules you want to enable in your Music Blocks application</p>
+            </div>
+          </div>
+          <div className="instruction-card">
+            <span className="instruction-icon">2️⃣</span>
+            <div className="instruction-content">
+              <h3>Configure Features</h3>
+              <p>Customize elements and feature flags for each module</p>
+            </div>
+          </div>
+          <div className="instruction-card">
+            <span className="instruction-icon">3️⃣</span>
+            <div className="instruction-content">
+              <h3>Refresh to Apply</h3>
+              <p>Reload the page to launch Music Blocks with your configuration</p>
+            </div>
+          </div>
+        </div>
+
         <Config
           definitions={props.definitions}
           config={props.config}