Changed components folder to screens

frontend/src/screens/CreateStation.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+function CreateStation() {
+  const [joinMethod, setJoinMethod] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleCreateStation = () => {
+    // Handle station creation logic here
+    console.log('Creating station with password:', password);
+  };
+
+  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>
+          )}
+        </div>
+
+        <button 
+          className="create-station-final-btn"
+          onClick={handleCreateStation}
+          disabled={joinMethod !== 'password' || !password.trim()}
+        >
+          Create Radio Station
+        </button>
+      </main>
+    </div>
+  );
+}
+
+export default CreateStation;

frontend/src/screens/Home.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function Home() {
+  const navigate = useNavigate();
+
+  const handleCreateStation = () => {
+    navigate('/create-station');
+  };
+
+  const handleJoinStation = () => {
+    navigate('/join-station');
+  };
+
+  return (
+    <div className="home-container">
+      <div className="content">
+        <h1 className="title">Radio Station Hub</h1>
+        <p className="subtitle">Create or join a radio station to share music with friends</p>
+        
+        <div className="button-container">
+          <button 
+            className="action-button primary" 
+            onClick={handleCreateStation}
+          >
+            Create Radio Station
+          </button>
+          
+          <button 
+            className="action-button secondary" 
+            onClick={handleJoinStation}
+          >
+            Join Radio Station
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;

frontend/src/screens/JoinStation.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+function JoinStation() {
+  const [verifyMethod, setVerifyMethod] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleJoinStation = () => {
+    console.log('Joining station with password:', password);
+  };
+
+  return (
+    <div className="join-station">
+      <header className="join-station-header">
+        <h1>Join a Station on Serena</h1>
+      </header>
+
+      <main className="join-station-content">
+        <div className="verify-method-section">
+          <h2>How would you like to verify access?</h2>
+          
+          <div className="radio-option">
+            <label>
+              <input
+                type="radio"
+                name="verifyMethod"
+                value="password"
+                checked={verifyMethod === 'password'}
+                onChange={(e) => setVerifyMethod(e.target.value)}
+              />
+              Password
+            </label>
+          </div>
+
+          {verifyMethod === '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="join-station-final-btn"
+          onClick={handleJoinStation}
+          disabled={verifyMethod !== 'password' || !password.trim()}
+        >
+          Join Station
+        </button>
+      </main>
+    </div>
+  );
+}
+
+export default JoinStation;