From 323a5665fed38b62380c324905c86be531ce93f9 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 17 Dec 2025 16:36:20 +0300
Subject: [PATCH] fix issue A tree hydrated but some attributes of the server
 rendered HTML didn't match the client properties. This won't be patched up.
 This can happen if a SSR-ed Client Component used: - A server/client branch
 `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()`
 or `Math.random()` which changes each time it's called. - Date formatting in
 a user's locale which doesn't match the server. - External changing data
 without sending a snapshot of it along with the HTML. - Invalid HTML tag
 nesting.

---
 src/app/page.tsx | 66 ++++++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4e1735f..69b90b2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ import {
   ProjectOutlined,
   RocketOutlined,
   StarOutlined,
-  TeamOutlined
+  TeamOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Statistic, Typography } from "antd";
 import { useEffect, useState } from "react";
@@ -22,21 +22,26 @@ import styles from "./page.module.css";
 const { Title, Paragraph } = Typography;
 
 export default function Home() {
-  const [userPreferences, setUserPreferences] = useState<string[]>(() => {
-    try {
-      const storedPreferences = localStorage.getItem("userPreferences");
-      return storedPreferences ? JSON.parse(storedPreferences) : [];
-    } catch {
-      return [];
-    }
-  });
-
-  const [showPreferences, setShowPreferences] = useState(
-    () => userPreferences.length === 0,
-  );
+  // Keep the initial render identical between server and client to avoid hydration mismatches.
+  // We'll read localStorage after mount.
+  const [, setUserPreferences] = useState<string[]>([]);
+  const [showPreferences, setShowPreferences] = useState(true);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    // Reading localStorage can only happen on the client; do it after mount.
+    try {
+      const storedPreferences = localStorage.getItem("userPreferences");
+      if (storedPreferences) {
+        /* eslint-disable react-hooks/set-state-in-effect */
+        setUserPreferences(JSON.parse(storedPreferences));
+        setShowPreferences(false);
+        /* eslint-enable react-hooks/set-state-in-effect */
+      }
+    } catch {
+      // ignore invalid JSON / access errors
+    }
+
     // Simulate loading of resources
     const timer = setTimeout(() => {
       setLoading(false);
@@ -61,7 +66,7 @@ export default function Home() {
           <div className={styles.loaderOrb2}></div>
           <div className={styles.loaderOrb3}></div>
         </div>
-        
+
         <div className={styles.loaderContent}>
           <div className={styles.logoContainer}>
             <div className={styles.logoIcon}>
@@ -72,7 +77,7 @@ export default function Home() {
               <span className={styles.logoSubtitle}>Masters</span>
             </div>
           </div>
-          
+
           <div className={styles.loaderAnimation}>
             <div className={styles.loaderDots}>
               <div className={styles.dot}></div>
@@ -80,7 +85,7 @@ export default function Home() {
               <div className={styles.dot}></div>
             </div>
           </div>
-          
+
           <div className={styles.loaderText}>
             <Title level={4} className={styles.loaderTitle}>
               Preparing Your Experience
@@ -113,10 +118,11 @@ export default function Home() {
                 Our Services
               </Title>
               <Paragraph className={styles.sectionSubtitle}>
-                We offer comprehensive solutions to transform your digital presence and drive business growth
+                We offer comprehensive solutions to transform your digital
+                presence and drive business growth
               </Paragraph>
             </div>
-            
+
             <Row gutter={[32, 32]} className={styles.servicesGrid}>
               <Col xs={24} sm={12} lg={8}>
                 <Card className={styles.serviceCard} hoverable>
@@ -127,7 +133,8 @@ export default function Home() {
                     Web Development
                   </Title>
                   <Paragraph className={styles.serviceDescription}>
-                    Custom web applications built with modern technologies and best practices for optimal performance and user experience.
+                    Custom web applications built with modern technologies and
+                    best practices for optimal performance and user experience.
                   </Paragraph>
                   <ul className={styles.serviceFeatures}>
                     <li>Responsive Design</li>
@@ -137,7 +144,7 @@ export default function Home() {
                   </ul>
                 </Card>
               </Col>
-              
+
               <Col xs={24} sm={12} lg={8}>
                 <Card className={styles.serviceCard} hoverable>
                   <div className={styles.serviceIcon}>
@@ -147,7 +154,8 @@ export default function Home() {
                     Mobile Development
                   </Title>
                   <Paragraph className={styles.serviceDescription}>
-                    Native and cross-platform mobile applications that deliver exceptional user experiences across all devices.
+                    Native and cross-platform mobile applications that deliver
+                    exceptional user experiences across all devices.
                   </Paragraph>
                   <ul className={styles.serviceFeatures}>
                     <li>iOS & Android Apps</li>
@@ -157,7 +165,7 @@ export default function Home() {
                   </ul>
                 </Card>
               </Col>
-              
+
               <Col xs={24} sm={12} lg={8}>
                 <Card className={styles.serviceCard} hoverable>
                   <div className={styles.serviceIcon}>
@@ -167,7 +175,8 @@ export default function Home() {
                     UI/UX Design
                   </Title>
                   <Paragraph className={styles.serviceDescription}>
-                    User-centered design solutions that create intuitive, engaging, and conversion-focused digital experiences.
+                    User-centered design solutions that create intuitive,
+                    engaging, and conversion-focused digital experiences.
                   </Paragraph>
                   <ul className={styles.serviceFeatures}>
                     <li>User Research</li>
@@ -189,10 +198,11 @@ export default function Home() {
                 Our Impact
               </Title>
               <Paragraph className={styles.sectionSubtitle}>
-                Numbers that speak for themselves - our commitment to excellence in every project
+                Numbers that speak for themselves - our commitment to excellence
+                in every project
               </Paragraph>
             </div>
-            
+
             <Row gutter={[48, 32]} className={styles.statsGrid}>
               <Col xs={12} sm={6}>
                 <div className={styles.statCard}>
@@ -207,7 +217,7 @@ export default function Home() {
                   />
                 </div>
               </Col>
-              
+
               <Col xs={12} sm={6}>
                 <div className={styles.statCard}>
                   <div className={styles.statIcon}>
@@ -221,7 +231,7 @@ export default function Home() {
                   />
                 </div>
               </Col>
-              
+
               <Col xs={12} sm={6}>
                 <div className={styles.statCard}>
                   <div className={styles.statIcon}>
@@ -236,7 +246,7 @@ export default function Home() {
                   />
                 </div>
               </Col>
-              
+
               <Col xs={12} sm={6}>
                 <div className={styles.statCard}>
                   <div className={styles.statIcon}>