Skip to content

Commit ec847db

Browse files
Merge pull request #22 from abdullahrather/fix/heroHeadline
fix/heroHeadline
2 parents be0559d + 034c6f1 commit ec847db

File tree

2 files changed

+52
-0
lines changed

2 files changed

+52
-0
lines changed

src/components/Hero.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,37 @@ const Hero = () => {
225225
};
226226
}, []);
227227

228+
useEffect(() => {
229+
const handleResize = () => {
230+
const headline = document.getElementById("heroHeadline");
231+
if (!headline) return;
232+
233+
headline.innerHTML = `
234+
Transform your vision into
235+
<br />
236+
<span class='text-indigo-600 dark:text-indigo-400'>
237+
intelligent
238+
</span> solutions
239+
`;
240+
241+
if (window.innerWidth <= 640) {
242+
headline.innerHTML = `
243+
<span style="display: inline-block; white-space: nowrap;">Transform your</span>
244+
<span style="display: inline-block; white-space: nowrap;"> vision into</span>
245+
<br />
246+
<span class='text-indigo-600 dark:text-indigo-400' style="display: inline-block; white-space: nowrap;">intelligent</span>
247+
<span style="display: inline-block; white-space: nowrap;"> solutions</span>
248+
`;
249+
}
250+
};
251+
252+
// Run on mount and resize
253+
handleResize();
254+
window.addEventListener("resize", handleResize);
255+
256+
return () => window.removeEventListener("resize", handleResize);
257+
}, []);
258+
228259
return (
229260
<section
230261
id='hero'

src/styles.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1536,4 +1536,25 @@ button:hover,
15361536

15371537
.loading-screen * {
15381538
cursor: none !important;
1539+
}
1540+
1541+
/* hero headline character breaking */
1542+
#heroHeadline {
1543+
word-break: normal;
1544+
overflow-wrap: normal;
1545+
hyphens: none;
1546+
white-space: normal;
1547+
}
1548+
1549+
@media (max-width: 640px) {
1550+
#heroHeadline {
1551+
font-size: 2.25rem;
1552+
line-height: 1.2;
1553+
}
1554+
}
1555+
1556+
@media (max-width: 480px) {
1557+
#heroHeadline {
1558+
font-size: 2rem;
1559+
}
15391560
}

0 commit comments

Comments
 (0)