Refactor code structure for improved readability and maintainability

Author: huycozy

assets/css/style.css

@@ -180,6 +180,29 @@ header {
     margin: 0 auto;
 }
 
+.hero-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+.hero-title-row h1 {
+    margin: 0;
+    min-width: 0;
+}
+
+.hero-app-icon {
+    width: clamp(64px, 8vw, 88px);
+    height: clamp(64px, 8vw, 88px);
+    border-radius: 22%;
+    flex-shrink: 0;
+    object-fit: cover;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
+}
+
 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
@@ -702,6 +725,15 @@ footer {
         padding: calc(var(--header-height) + 2rem) 0 3rem;
     }
 
+    .hero-title-row {
+        gap: 0.75rem;
+    }
+
+    .hero-app-icon {
+        width: 56px;
+        height: 56px;
+    }
+
     .featured-badges {
         margin-top: 2.5rem;
     }

assets/images/app-icon.jpg

@@ -174,7 +174,10 @@
         <section class="hero">
             <div class="container hero-content">
                 <p class="hero-eyebrow">Safer way to share files on the same network</p>
-                <h1>A safer alternative to shared folders and SMB for local file sharing.</h1>
+                <div class="hero-title-row">
+                    <img src="assets/images/app-icon.jpg" alt="Netshare app icon" class="hero-app-icon">
+                    <h1>A safer alternative to shared folders and SMB for local file sharing.</h1>
+                </div>
                 <p class="hero-subtitle">
                     Netshare lets you transfer files between computers, phones, and tablets on the same network
                     without mounting shared folders, exposing cloud links, or relying on the internet.