search bar, design update

frontend/src/screens/CreateStation.jsx

@@ -9,50 +9,78 @@ function CreateStation() {
   };
 
   return (
-    <div className="create-station">
-      <header className="create-station-header">
-        <h1>Create a Station on Serena</h1>
-      </header>
-
-      <main className="create-station-content">
-        <div className="join-method-section">
-          <h2>How should people be able to join your station?</h2>
-          
-          <div className="radio-option">
-            <label>
-              <input
-                type="radio"
-                name="joinMethod"
-                value="password"
-                checked={joinMethod === 'password'}
-                onChange={(e) => setJoinMethod(e.target.value)}
-              />
-              Password
-            </label>
-          </div>
-
-          {joinMethod === 'password' && (
-            <div className="password-input-section">
-              <label htmlFor="station-password">Station Password:</label>
-              <input
-                type="password"
-                id="station-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter station password"
-              />
+    <div className="create-station-container">
+      <div className="create-station-main">
+        {/* Left Section - Vinyl Animation */}
+        <div className="create-station-left-section">
+          <div className="create-station-vinyl-container">
+            <div className="create-station-vinyl-record">
+              <div className="vinyl-center"></div>
+              <div className="vinyl-grooves"></div>
             </div>
-          )}
+            
+            {/* Animated Music Notes */}
+            <div className="create-station-music-notes">
+              <div className="music-note note-1">♪</div>
+              <div className="music-note note-2">♫</div>
+              <div className="music-note note-3">♪</div>
+            </div>
+          </div>
         </div>
 
-        <button 
-          className="create-station-final-btn"
-          onClick={handleCreateStation}
-          disabled={joinMethod !== 'password' || !password.trim()}
-        >
-          Create Radio Station
-        </button>
-      </main>
+        {/* Right Section - Create Station Form */}
+        <div className="create-station-right-section">
+          <div className="create-station-content">
+            <header className="create-station-header">
+              <h1>Create a Station on Serena</h1>
+            </header>
+
+            <main className="create-station-form">
+              <div className="join-method-section">
+                <h2>How should people be able to join your station?</h2>
+                
+                <div className="radio-option">
+                  <label>
+                    <input
+                      type="radio"
+                      name="joinMethod"
+                      value="password"
+                      checked={joinMethod === 'password'}
+                      onChange={(e) => setJoinMethod(e.target.value)}
+                    />
+                    <span className="radio-custom"></span>
+                    Password
+                  </label>
+                </div>
+
+                {joinMethod === 'password' && (
+                  <div className="password-input-section">
+                    <label htmlFor="station-password">Station Password:</label>
+                    <input
+                      type="password"
+                      id="station-password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder="Enter station password"
+                    />
+                  </div>
+                )}
+              </div>
+
+              <button 
+                className="create-station-final-btn"
+                onClick={handleCreateStation}
+                disabled={joinMethod !== 'password' || !password.trim()}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+                </svg>
+                Create Radio Station
+              </button>
+            </main>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }