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

@@ -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[]>(() => {
+  // Keep the initial render identical between server and client to avoid hydration mismatches.
-    try {
+  // We'll read localStorage after mount.
-      const storedPreferences = localStorage.getItem("userPreferences");
+  const [, setUserPreferences] = useState<string[]>([]);
-      return storedPreferences ? JSON.parse(storedPreferences) : [];
+  const [showPreferences, setShowPreferences] = useState(true);
-    } catch {
-      return [];
-    }
-  });
-
-  const [showPreferences, setShowPreferences] = useState(
-    () => userPreferences.length === 0,
-  );
   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);
@@ -113,7 +118,8 @@ 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>
 
@@ -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>
@@ -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>
@@ -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,7 +198,8 @@ 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>