Skip to content

Correct home page font - Lab Grotesque #5894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 9, 2025
Merged

Correct home page font - Lab Grotesque #5894

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
16d699e
Correct home page font - Lab Grotesque
kimsauce Oct 9, 2025
6028270
indentation
kimsauce Oct 9, 2025
c775647
more indentation
kimsauce Oct 9, 2025
ff25209
Update src/pages/index.tsx
kimsauce Oct 9, 2025
f0f164e
Update src/pages/index.tsx
kimsauce Oct 9, 2025
7c57967
Merge branch 'main' into DOCS-1184
kimsauce Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 34 additions & 40 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,22 @@ export const Home = () => {
<Typography
bgcolor='#0045BE'
color='#e3e3e3'
fontFamily='Lab Grotesque'
fontSize={28}
fontWeight={700}
pt={3}
px={2}
pb={1}
sx={{
backgroundImage: 'linear-gradient(to right, rgb(0,0,153), rgb(0,70,190) 30%)',
fontFamily:
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
}}
textAlign='center'
>
<Box
component={SumoLogicDocsLogo}
alt="Sumo Logic Docs logo"
role="<img>"
aria-hidden="true"
role='img'
aria-label='Sumo Logic Docs logo'
height={{
md: 36,
xs: 28,
Expand All @@ -78,6 +78,8 @@ export const Home = () => {
md: '100% 200%',
xs: '100% 100%',
},
fontFamily:
'var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif)',
}}
height={{
md: 'auto',
Expand Down Expand Up @@ -111,19 +113,23 @@ export const Home = () => {
>
<Typography
color='white'
fontFamily='Lab Grotesque'
fontSize={32}
fontWeight={700}
variant='h2'
sx={{
fontFamily:
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
}}
>
New to Sumo?
</Typography>
<Typography
color='#e3e3e3'
fontFamily='Lab Grotesque'
pb={2}
textAlign='left'
variant='p'
component='p'
variant='body1'
sx={{ fontFamily: 'inherit' }}
>
Get started quickly with our search, visualization, analytics, and security capabilities.
</Typography>
Expand Down Expand Up @@ -151,12 +157,12 @@ export const Home = () => {
border: '.5px solid',
borderColor: '#e3e3e3',
borderRadius: 2,
fontFamily: 'Lab Grotesque',
textTransform: 'none',
width: {
md: 'auto',
xs: '100%',
},
fontFamily: 'inherit',
'&:hover': {
bgcolor: '#0045BE',
borderColor: '#0045BE',
Expand Down Expand Up @@ -201,7 +207,6 @@ export const Home = () => {
>
<Typography
component='h2'
fontFamily='Lab Grotesque'
fontWeight={900}
mb={{
md: 'inherit',
Expand All @@ -210,15 +215,19 @@ export const Home = () => {
}}
textAlign='center'
variant='h4'
sx={{
fontFamily:
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
}}
>
Explore our product guides
</Typography>
<Typography
component='p'
fontFamily='Lab Grotesque'
mb={4}
textAlign='center'
variant='subtitle1'
sx={{ fontFamily: 'inherit' }}
>
Ensure app reliability and security with modern cloud-native monitoring and observability.
</Typography>
Expand Down Expand Up @@ -268,46 +277,31 @@ export const Home = () => {
{
label: 'Other Solutions',
},
].map(({ label, ...rest }, index) => (
].map(({ label }, index) => (
<Tab
key={label}
value={String(index)}
label={label}
sx={{
color: 'grey.700',
fontFamily: 'Lab Grotesque',
fontWeight: 'bold',
fontFamily:
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
}}
value={String(index)}
{...rest}
/>
))}
</Tabs>
{features.map((feature, index) => tab === String(index) && (
<Grid
component={TabPanel}
container
direction='row'
justifyContent='center'
key={index}
py={6}
spacing={4}
value={String(index)}
>
{feature.map((config) => (
<Grid
item
key={config.link}
lg={4}
md={6}
xs={12}
>
<Feature
length={feature.length}
{...config}
/>
</Grid>
))}
</Grid>

{features.map((feature, index) => (
<TabPanel key={index} value={String(index)} sx={{ px: 0 }}>
<Grid container direction="row" justifyContent="center" spacing={4} py={6}>
{feature.map((config) => (
<Grid item key={config.link} lg={4} md={6} xs={12}>
<Feature length={feature.length} {...config} />
</Grid>
))}
</Grid>
</TabPanel>
))}
</TabContext>
</Stack>
Expand Down