Skip to content

Commit 2ed07ee

Browse files
BlargianBlargian
committed
improve mobile styling and add banners
1 parent 6805da0 commit 2ed07ee

File tree

1 file changed

+67
-72
lines changed

1 file changed

+67
-72
lines changed

‎src/pages/index.js‎

Lines changed: 67 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -200,70 +200,72 @@ const HeroSection = () => {
200200
return (
201201
<Box sx={{
202202
display: 'grid',
203-
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
203+
gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' },
204204
alignItems: 'center',
205205
minHeight: '260px',
206-
padding: '10px 16px 0px 16px',
206+
padding: { xs: '60px 24px 30px 24px', md: '10px 16px 0px 16px' },
207207
maxWidth: '1000px',
208208
margin: '0 auto',
209-
gap: 3,
210-
'@media (max-width: 768px)': {
211-
gridTemplateColumns: '1fr',
212-
textAlign: 'center',
213-
padding: '60px 24px 30px 24px',
214-
gap: 3
215-
}
209+
gap: { xs: 2, md: 3 }
216210
}}>
217211
{/* Left side - Logo and Text (matches Get Started column width) */}
218-
<Box sx={{
219-
'@media (max-width: 768px)': {
220-
gridColumn: '1'
221-
}
212+
<Box sx={{
213+
display: 'flex',
214+
flexDirection: 'column',
215+
alignItems: { xs: 'center', md: 'flex-start' }
222216
}}>
223-
<Box sx={{ marginBottom: 2 }}>
217+
<Box sx={{
218+
marginBottom: 2,
219+
display: 'flex',
220+
alignItems: 'center',
221+
justifyContent: { xs: 'center', md: 'flex-start' },
222+
width: '100%',
223+
'& svg': {
224+
width: { xs: '260px', md: 'auto' },
225+
height: 'auto'
226+
}
227+
}}>
224228
<ClickHouseLogo />
225229
</Box>
226-
<Typography
227-
variant="h5"
228-
sx={{
229-
fontSize: { xs: '1rem', sm: '1.1rem', md: '1.2rem' },
230+
<Typography
231+
variant="h5"
232+
sx={{
233+
fontSize: { xs: '0.9rem', sm: '1.1rem', md: '1.2rem' },
230234
fontWeight: 400,
231235
color: 'text.secondary',
232236
lineHeight: 1.4,
233-
fontFamily: 'Inter, system-ui, -apple-system, sans-serif'
237+
fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
238+
textAlign: { xs: 'center', md: 'left' }
234239
}}
235240
>
236241
Documentation for the fastest and most resource efficient real-time data warehouse and open-source database.
237242
</Typography>
238243
</Box>
239-
244+
240245
{/* Right side - Search and Ask AI (spans Learn and Reference columns) */}
241-
<Box sx={{
242-
gridColumn: { xs: '1', sm: '1 / span 2', md: '2 / span 2' },
246+
<Box sx={{
247+
gridColumn: { md: '2 / span 2' },
243248
display: 'flex',
244249
alignItems: 'center',
245-
gap: 2,
246-
padding: '0 60px',
247-
'@media (max-width: 768px)': {
248-
gridColumn: '1',
249-
flexDirection: 'column',
250-
alignItems: 'stretch',
251-
gap: 2,
252-
padding: '0'
253-
}
250+
gap: { xs: 1, md: 2 },
251+
padding: { xs: '0', md: '0 60px' },
252+
width: { xs: '100%', md: 'auto' }
254253
}}>
255-
<Box sx={{ flex: 1, maxWidth: '500px' }}>
254+
<Box sx={{
255+
flex: 1,
256+
maxWidth: { xs: 'none', md: '500px' }
257+
}}>
256258
<SearchBar/>
257259
</Box>
258-
<p>or</p>
260+
<p style={{ margin: '0 4px', fontSize: '14px' }}>or</p>
259261
<Button
260262
variant="contained"
261263
onClick={handleAskAIClick}
262264
sx={{
263265
height: '36px',
264-
minWidth: '100px',
266+
minWidth: { xs: '90px', md: '100px' },
265267
borderRadius: '8px',
266-
padding: '8px 20px',
268+
padding: { xs: '8px 12px', md: '8px 20px' },
267269
display: 'flex',
268270
alignItems: 'center',
269271
justifyContent: 'center',
@@ -320,10 +322,10 @@ const ExploreDocs = () => {
320322
margin: '0 auto'
321323
}}>
322324
{/* Unified Grid Layout */}
323-
<Box sx={{
325+
<Box sx={{
324326
display: 'grid',
325-
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
326-
gridTemplateRows: 'auto auto auto auto auto',
327+
gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' },
328+
gridTemplateRows: 'auto',
327329
gap: 3
328330
}}>
329331
{/* Get Started Card - Row 1, Column 1 */}
@@ -465,8 +467,8 @@ const ExploreDocs = () => {
465467

466468
{/* Migrate Card - Row 2, Full Width (spans all 3 columns) */}
467469
<Card sx={{
468-
gridColumn: { xs: '1', sm: '1 / span 2', md: '1 / span 3' },
469-
height: '180px',
470+
gridColumn: { xs: '1', md: '1 / span 3' },
471+
height: { xs: 'auto', md: '180px' },
470472
backgroundColor: 'background.paper',
471473
color: 'text.primary',
472474
boxShadow: 3,
@@ -476,39 +478,39 @@ const ExploreDocs = () => {
476478
boxShadow: 6,
477479
},
478480
display: 'flex',
479-
flexDirection: 'row',
481+
flexDirection: { xs: 'column', md: 'row' },
480482
overflow: 'hidden'
481483
}}>
482484
{/* Left side - Full height image outside padding */}
483485
<CardMedia
484486
component="img"
485-
sx={{
486-
width: 120,
487-
height: '100%',
487+
sx={{
488+
width: { xs: '100%', md: 120 },
489+
height: { xs: '100px', md: '100%' },
488490
objectFit: 'cover',
489491
flexShrink: 0
490492
}}
491493
image={useBaseUrl('/images/homepage/migration_icon.png')}
492494
alt="Migration"
493495
/>
494496

495-
<CardContent sx={{
497+
<CardContent sx={{
496498
backgroundColor: 'background.paper',
497499
color: 'text.primary',
498500
flex: 1,
499501
display: 'flex',
500-
flexDirection: 'row',
502+
flexDirection: { xs: 'column', md: 'row' },
501503
padding: '16px',
502504
gap: 3
503505
}}>
504506
{/* Text content */}
505-
<Box sx={{
506-
flex: '0 0 auto',
507+
<Box sx={{
508+
flex: { xs: '1', md: '0 0 auto' },
507509
display: 'flex',
508510
flexDirection: 'column',
509511
justifyContent: 'flex-start',
510-
minWidth: '160px',
511-
maxWidth: '180px'
512+
minWidth: { xs: 'auto', md: '160px' },
513+
maxWidth: { xs: 'none', md: '180px' }
512514
}}>
513515
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontFamily: 'Inter, system-ui, -apple-system, sans-serif' }}>Migrate</h3>
514516
<p style={{ fontSize: '13px', margin: '0 0 0 0', color: 'text.secondary', lineHeight: 1.3, fontFamily: 'Inter, system-ui, -apple-system, sans-serif' }}>
@@ -527,21 +529,21 @@ const ExploreDocs = () => {
527529
</ClickHouseArrowButton>
528530
</Box>
529531

530-
{/* Right side - 3x2 Grid of square gradient cards */}
531-
<Box sx={{
532-
flex: 1,
533-
display: 'flex',
534-
justifyContent: 'flex-end',
532+
{/* Right side - Grid of migration options */}
533+
<Box sx={{
534+
flex: 1,
535+
display: 'flex',
536+
justifyContent: { xs: 'center', md: 'flex-end' },
535537
alignItems: 'center'
536538
}}>
537539
<Box sx={{
538540
display: 'grid',
539-
gridTemplateColumns: 'repeat(7, 1fr)',
540-
gridTemplateRows: '1fr',
541+
gridTemplateColumns: { xs: 'repeat(4, 1fr)', md: 'repeat(7, 1fr)' },
542+
gridTemplateRows: { xs: 'repeat(4, 1fr)', md: '1fr' },
541543
gap: 1,
542544
width: '100%',
543-
maxWidth: '480px',
544-
height: '100%'
545+
maxWidth: { xs: '320px', md: '480px' },
546+
height: { xs: 'auto', md: '100%' }
545547
}}>
546548
<MigrationOptionButton
547549
icon="/docs/images/logo-postgres.svg"
@@ -632,10 +634,9 @@ const ExploreDocs = () => {
632634
</CardContent>
633635
</Card>
634636

635-
{/* Featured Section Title - Row 3, spans all 3 columns */}
636-
<Box sx={{
637-
gridRow: 3,
638-
gridColumn: { xs: '1', sm: '1 / span 2', md: '1 / span 3' },
637+
{/* Featured Section Title - spans all columns */}
638+
<Box sx={{
639+
gridColumn: { xs: '1', md: '1 / span 3' },
639640
marginBottom: 1,
640641
marginTop: 2
641642
}}>
@@ -644,13 +645,11 @@ const ExploreDocs = () => {
644645
</Typography>
645646
</Box>
646647

647-
{/* Featured Card 1 - Row 4, Column 1 */}
648+
{/* Featured Card 1 */}
648649
<Card
649650
component={Link}
650651
to="/integrations/clickpipes/mongodb"
651652
sx={{
652-
gridRow: 4,
653-
gridColumn: 1,
654653
height: '350px',
655654
backgroundColor: 'background.paper',
656655
color: 'text.primary',
@@ -717,13 +716,11 @@ const ExploreDocs = () => {
717716
</CardActionArea>
718717
</Card>
719718

720-
{/* Featured Card 2 - Row 4, Column 2 */}
719+
{/* Featured Card 2 */}
721720
<Card
722721
component={Link}
723722
to="/use-cases/AI/MCP/remote_mcp"
724723
sx={{
725-
gridRow: 4,
726-
gridColumn: 2,
727724
height: '350px',
728725
backgroundColor: 'background.paper',
729726
color: 'text.primary',
@@ -790,13 +787,11 @@ const ExploreDocs = () => {
790787
</CardActionArea>
791788
</Card>
792789

793-
{/* Featured Card 3 - Row 4, Column 3 */}
790+
{/* Featured Card 3 */}
794791
<Card
795792
component={Link}
796793
to="/best-practices/use-json-where-appropriate"
797794
sx={{
798-
gridRow: 4,
799-
gridColumn: 3,
800795
height: '350px',
801796
backgroundColor: 'background.paper',
802797
color: 'text.primary',

0 commit comments

Comments
 (0)