Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2ed07ee

Browse files
committed
improve mobile styling and add banners
1 parent6805da0 commit2ed07ee

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
<Boxsx={{
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-
<Boxsx={{
219-
'@media (max-width: 768px)':{
220-
gridColumn:'1'
221-
}
212+
<Boxsx={{
213+
display:'flex',
214+
flexDirection:'column',
215+
alignItems:{xs:'center',md:'flex-start'}
222216
}}>
223-
<Boxsx={{marginBottom:2}}>
217+
<Boxsx={{
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-
<Boxsx={{
242-
gridColumn:{xs:'1',sm:'1 / span 2',md:'2 / span 2'},
246+
<Boxsx={{
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-
<Boxsx={{flex:1,maxWidth:'500px'}}>
254+
<Boxsx={{
255+
flex:1,
256+
maxWidth:{xs:'none',md:'500px'}
257+
}}>
256258
<SearchBar/>
257259
</Box>
258-
<p>or</p>
260+
<pstyle={{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:'8px12px',md:'8px20px'},
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-
<Boxsx={{
325+
<Boxsx={{
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
<Cardsx={{
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-
<CardContentsx={{
497+
<CardContentsx={{
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-
<Boxsx={{
506-
flex:'0 0 auto',
507+
<Boxsx={{
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
<h3style={{margin:'0 0 16px 0',fontSize:'18px',fontFamily:'Inter, system-ui, -apple-system, sans-serif'}}>Migrate</h3>
514516
<pstyle={{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 -3x2Grid ofsquare gradient cards */}
531-
<Boxsx={{
532-
flex:1,
533-
display:'flex',
534-
justifyContent:'flex-end',
532+
{/* Right side - Grid ofmigration options */}
533+
<Boxsx={{
534+
flex:1,
535+
display:'flex',
536+
justifyContent:{xs:'center',md:'flex-end'},
535537
alignItems:'center'
536538
}}>
537539
<Boxsx={{
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-
<Boxsx={{
637-
gridRow:3,
638-
gridColumn:{xs:'1',sm:'1 / span 2',md:'1 / span 3'},
637+
{/* Featured Section Title - spans all columns */}
638+
<Boxsx={{
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)
[8]ページ先頭
©2009-2025 Movatter.jp