Skip to content

Commit fdba10e

Browse files
authored
style: update hero title and card styles to prevent layout shift (#478)
- Changed font size and weight for the hero title to enhance visual impact. - Adjusted media query styles for better responsiveness on smaller screens.
1 parent 935d71e commit fdba10e

1 file changed

Lines changed: 6 additions & 25 deletions

File tree

src/pages/index.js

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Suspense } from 'react';
1+
import React from 'react';
22
import clsx from 'clsx';
33
import Layout from '@theme/Layout';
44
import Link from '@docusaurus/Link';
@@ -9,10 +9,8 @@ import { Redirect } from '@docusaurus/router';
99
import ErrorBoundary from '../components/ErrorBoundary';
1010
import StructuredData from '../structured-data/schema';
1111

12-
// Lazy load non-critical components
13-
const HomeNavBoxes = React.lazy(
14-
() => import('../components/homepage/homeNavBoxes')
15-
);
12+
// Import HomeNavBoxes directly since it's above-the-fold critical content
13+
import HomeNavBoxes from '../components/homepage/homeNavBoxes';
1614

1715
function HomepageHeader() {
1816
return (
@@ -86,12 +84,12 @@ export default function Home() {
8684
{/* Inline critical CSS for above-the-fold content */}
8785
<style>{`
8886
.heroBanner_KU2A{padding:2rem 0 0 0;text-align:center;position:relative;overflow:hidden}
89-
.hero__title{font-size:3rem;font-weight:900;line-height:1.2;margin-bottom:0;color:var(--ifm-font-color-base)}
87+
.hero__title{font-size:62px;font-weight:700;line-height:115%;margin-bottom:0;color:var(--ifm-font-color-base);font-family:'Montserrat',sans-serif;margin-top:2rem}
9088
.theme-layout-footer{min-height:350px}
9189
.footer__links{min-height:200px}
9290
.footer__col{min-height:180px}
9391
.footer__bottom{min-height:50px}
94-
@media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:2rem}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
92+
@media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:48px}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
9593
`}</style>
9694

9795
{/* Prefetch important pages */}
@@ -105,24 +103,7 @@ export default function Home() {
105103
<HomepageHeader />
106104
<main>
107105
<ErrorBoundary>
108-
<Suspense
109-
fallback={
110-
<div
111-
style={{
112-
minHeight: '200px',
113-
display: 'flex',
114-
alignItems: 'center',
115-
justifyContent: 'center',
116-
fontSize: '14px',
117-
color: 'var(--ifm-color-emphasis-600)',
118-
}}
119-
>
120-
Loading navigation...
121-
</div>
122-
}
123-
>
124-
<HomeNavBoxes />
125-
</Suspense>
106+
<HomeNavBoxes />
126107
</ErrorBoundary>
127108
</main>
128109
</Layout>

0 commit comments

Comments
 (0)