Refactor code structure for improved readability and maintainability

src/App.js

@@ -1,25 +1,134 @@
-import logo from './logo.svg';
+import { useRef, useState } from 'react';
 import './App.css';
 
 function App() {
+  const formSectionRef = useRef(null);
+  const [customNumber, setCustomNumber] = useState();
+  const [email, setEmail] = useState("");
+
+
+  const scrollToForm = () => {
+    const formSection = formSectionRef.current;
+    formSection.classList.add('visible', 'bounce'); // Füge Bounce-Klasse hinzu
+    setTimeout(() => {
+      formSection.scrollIntoView({ behavior: 'smooth' });
+      formSection.classList.remove('bounce'); // Entferne Bounce-Klasse nach der Animation
+    }, 190); // Wartezeit für die Bounce-Animation
+  };
+
+  const handleCustomInputChange = (e) => {
+    setCustomNumber(e.target.value);
+  };
+
+  const handleRadioChange = (e) => {
+    setCustomNumber(e.target.value === 'custom' ? '' : e.target.value);
+  };
+
+  const submit = (e) => {
+    e.preventDefault(); // Verhindert das Standardverhalten des Formulars
+    if (email === ""){
+      
+    }
+  }
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+      <div id="intro">
+        <h1>Willkommen zum Skatabend des Skat-Profils</h1>
+        <div className="facts">
+          <div className="fact-row">
+            <span className="fact-label">Zeit:</span>
+            <span className="fact-value">18:00</span>
+          </div>
+          <div className="fact-row">
+            <span className="fact-label">Ort:</span>
+            <span className="fact-value">Samuel-von-Pufendorf-Gymnasium in Flöha</span>
+          </div>
+          <div className="fact-row">
+            <span className="fact-label">Datum:</span>
+            <span className="fact-value">25.06.2025</span>
+          </div>
+        </div>
+        <button onClick={scrollToForm}>Jetzt Anmelden</button>
+      </div>
+      <div id="form-section" ref={formSectionRef}>
+        <form>
+          <label>E-Mail:</label>
+          <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} />
+          <br />
+          <label>Anzahl der Personen</label>
+          <div className="radio-group">
+            <label>
+              <input
+                type="radio"
+                name="number"
+                value="1"
+                onChange={handleRadioChange}
+                checked={customNumber === '1'}
+              />
+              1 Person
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="number"
+                value="2"
+                onChange={handleRadioChange}
+                checked={customNumber === '2'}
+              />
+              2 Personen
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="number"
+                value="3"
+                onChange={handleRadioChange}
+                checked={customNumber === '3'}
+              />
+              3 Personen
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="number"
+                value="4"
+                onChange={handleRadioChange}
+                checked={customNumber === '4'}
+              />
+              4 Personen
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="number"
+                value="custom"
+                onChange={handleRadioChange}
+                checked={customNumber === ''}
+              />
+              Andere
+            </label>
+          </div>
+          {customNumber === '' && (
+            <input
+              type="number"
+              name="customNumber"
+              placeholder="Anzahl der Personen"
+              onChange={handleCustomInputChange}
+              value={customNumber}
+            />
+          )}
+          <br />
+          <button type="submit" onClick={submit}>Anmelden</button>
+        </form>
+      </div>
+      <footer>
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Bildquelle Hintergrund: <a href="https://store-images.s-microsoft.com/image/apps.42739.13510798887965433.cf25521d-d390-432c-8007-cbc0aa3ebe97.53ed75d0-4a6a-4c11-a3ae-fd528ef6444a?h=1280" target="_blank" rel="noopener noreferrer">hier klicken</a>
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      </footer>
     </div>
   );
 }
 
-export default App;
+export default App;