tech-masters/about-us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix issue

Browse Source 
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.
This commit is contained in:
Mohammed Al-yaseen
2025-12-17 16:36:20 +03:00
parent adcab9eb3c
commit 323a5665fe
1 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/page.tsx
View File

@@ -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}>