add comments for better understanding part 2

parfum-shop/src/App.css

@@ -4,6 +4,20 @@
   color: #1f1f1f;
 }
 
+/*
+  Hallo im CSS,
+  damit ihr euch hier nicht durch einen wilden Haufen aus Klassen kämpfen müsst,
+  versuche ich die Bereiche sauber zu kommentieren. So ist schneller sichtbar,
+  welche Styles wohin gehören und wo welche Section anfängt.
+
+  Euer Freund und Helfer Salih
+  
+  Bei Bugs, Verzweiflung oder akuten CSS-Zusammenbrüchen lesen Sie https://stackoverflow.com/questions 
+  oder fragen Sie Salih oder eine KI Ihres Vertrauens.
+   
+  Erreichbar unter salih.hasicic@stud.fhgr.ch oder telefonisch, fall Sie die Nummer haben*/
+
+
 /* HERO */
 .hero {
   position: relative;
@@ -24,6 +38,8 @@
     linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
 }
 
+/* NAVBAR */
+
 .navbar {
   position: relative;
   z-index: 2;
@@ -55,6 +71,8 @@
   background: rgba(255, 255, 255, 0.22);
 }
 
+/* --------------------------------------------------- */
+
 .hero-content {
   position: relative;
   z-index: 2;

parfum-shop/src/App.jsx

@@ -1,6 +1,20 @@
 import "./App.css";
 
-//Images for the grid
+// Hallo im Code,
+// ich streue hier bewusst Kommentare ein, damit ihr euch nicht auf eine jahrlange
+// archäologische Expedition begeben müsst. So bleibt besser sichtbar, wo
+// einzelne Sections anfangen und aufhören und wo wichtige Elemente oder
+// Funktionen liegen.
+
+// Euer Freund und Helfer Salih
+  
+// Bei Bugs, kleinen Krisen oder emotionalem Kontrollverlust bitte
+// https://stackoverflow.com/questions konsultieren
+// oder fragen Sie Salih oder eine KI Ihres Vertrauens.
+
+//Erreichbar unter salih.hasicic@stud.fhgr.ch oder telefonisch, falls ihr die Nummer habt*/
+
+//Elements and Images for the grid
 const perfumes = [
   {
     id: "01",
@@ -68,7 +82,7 @@ function App() {
             </a>
           </div>
         </nav>
-
+        {/* --- Navbar End --- */}
         <div className="hero-overlay" />
 
         <div className="hero-content">
@@ -90,6 +104,7 @@ function App() {
           </div>
         </div>
       </header>
+      {/* --- Hero End --- */}
 
       <main>
         {/* Grid with Core Collection */}
@@ -122,9 +137,10 @@ function App() {
             ))}
           </div>
         </section>
+           {/* --- Grid End --- */}
             
-        <section className="discovery-section" id="testen">
         {/* Dicovery Set Section */}
+        <section className="discovery-section" id="testen">
           <div className="discovery-copy">
             <h2>
               DER SICHERE EINSTIEG
@@ -148,6 +164,7 @@ function App() {
             <button className="banner-btn">Discovery Set bestellen</button>
           </div>
         </section>
+        {/* --- Dicovery Set Section End--- */}
       </main>
     </div>
   );