update Built for real-world environments

Author: huycozy

assets/css/style.css

@@ -244,20 +244,57 @@ header {
 
 /* Use Cases */
 .use-cases-list {
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
+	    list-style: none;
+	    display: grid;
+	    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	    gap: 1.5rem;
+	    margin-top: 3rem;
 }
 
-.use-case-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    padding: 1rem 1.5rem;
-    border-radius: 12px;
-    border-left: 3px solid var(--accent);
+.use-case-card {
+	    background: var(--card-bg);
+	    border: 1px solid var(--card-border);
+	    padding: 1.75rem;
+	    border-radius: 1.5rem;
+	    text-align: left;
+	    transition: transform 0.3s, border-color 0.3s;
+}
+
+.use-case-card:hover {
+	    transform: translateY(-4px);
+	    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.use-case-header {
+	    display: flex;
+	    align-items: center;
+	    gap: 0.75rem;
+	    margin-bottom: 0.75rem;
+}
+
+.use-case-icon {
+	    font-size: 1.75rem;
+	    line-height: 1;
+}
+
+.use-case-card h3 {
+	    margin: 0;
+	    font-size: 1.2rem;
+}
+
+.use-case-card p {
+	    margin: 0 0 0.75rem;
+	    color: var(--text-secondary);
+}
+
+.use-case-card ul {
+	    margin: 0;
+	    padding-left: 1.2rem;
+	    color: var(--text-secondary);
+}
+
+.use-case-card li {
+	    margin: 0.35rem 0;
 }
 
 /* Architecture */
@@ -387,4 +424,4 @@ footer {
     .policy-content {
         padding: 1.5rem;
     }
-}
+}

index.html

@@ -117,14 +117,53 @@ <h3>Cross-platform</h3>
             <div class="container">
                 <div class="arch-content">
                     <h2>Built for real-world environments</h2>
-                    <p>Whether you're a developer, a student, or working in a secure facility.</p>
+                    <p>Designed for LAN-first sharing in secure, offline, and policy-restricted networks.</p>
                 </div>
-                <div class="use-cases-list" style="margin-top: 3rem;">
-                    <div class="use-case-item">Share files between your phone and laptop</div>
-                    <div class="use-case-item">Development teams sharing builds and assets</div>
-                    <div class="use-case-item">Offices and companies with internal networks</div>
-                    <div class="use-case-item">Schools, labs, and secure environments</div>
-                    <div class="use-case-item">Anyone who values speed and privacy</div>
+                <div class="use-cases-list">
+                    <div class="use-case-card">
+                        <div class="use-case-header">
+                            <span class="use-case-icon">🏢</span>
+                            <h3>Internal enterprise</h3>
+                        </div>
+                        <p>Share files within the company when cloud tools are restricted or blocked.</p>
+                        <ul>
+                            <li>No Google Drive or external links required</li>
+                            <li>Perfect for HR docs, source code, and design files</li>
+                        </ul>
+                    </div>
+                    <div class="use-case-card">
+                        <div class="use-case-header">
+                            <span class="use-case-icon">🏭</span>
+                            <h3>Factories & industrial sites</h3>
+                        </div>
+                        <p>Built for isolated networks where devices may have no Internet access.</p>
+                        <ul>
+                            <li>Works on internal networks</li>
+                            <li>Reliable transfers in offline environments</li>
+                        </ul>
+                    </div>
+                    <div class="use-case-card">
+                        <div class="use-case-header">
+                            <span class="use-case-icon">🏥</span>
+                            <h3>Schools, labs & hospitals</h3>
+                        </div>
+                        <p>Keep sensitive data on-premises while still enabling fast collaboration.</p>
+                        <ul>
+                            <li>Designed for LAN-only setups</li>
+                            <li>Supports privacy-first workflows</li>
+                        </ul>
+                    </div>
+                    <div class="use-case-card">
+                        <div class="use-case-header">
+                            <span class="use-case-icon">🎬</span>
+                            <h3>Dev teams & studios</h3>
+                        </div>
+                        <p>Move large builds and assets quickly between machines on the same LAN.</p>
+                        <ul>
+                            <li>Share builds, exports, and media assets</li>
+                            <li>Avoid cloud upload time and bandwidth costs</li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </section>
@@ -230,4 +269,4 @@ <h4>Connect</h4>
     <script src="assets/js/main.js"></script>
 </body>
 
-</html>
+</html>