Skip to content

Commit 2092a3b

Browse files
BlargianBlargian
committed
add featured section
1 parent 64763c5 commit 2092a3b

File tree

4 files changed

+218
-6
lines changed

4 files changed

+218
-6
lines changed

‎src/pages/index.js‎

Lines changed: 218 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ const HeroSection = () => {
219219
lineHeight: 1.4
220220
}}
221221
>
222-
The fastest and most resource efficient real-time data warehouse and open-source database.
222+
Documentation for the fastest and most resource efficient real-time data warehouse and open-source database.
223223
</Typography>
224224
</Box>
225225

@@ -288,7 +288,7 @@ const NavatticDemoSection = () => {
288288
<NavatticDemo/>
289289
</div>
290290
)
291-
}
291+
};
292292

293293
const ExploreDocs = () => {
294294
const { colorMode } = useColorMode();
@@ -307,7 +307,7 @@ const ExploreDocs = () => {
307307
<Box sx={{
308308
display: 'grid',
309309
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
310-
gridTemplateRows: 'auto auto',
310+
gridTemplateRows: 'auto auto auto auto auto',
311311
gap: 3
312312
}}>
313313
{/* Get Started Card - Row 1, Column 1 */}
@@ -331,7 +331,6 @@ const ExploreDocs = () => {
331331
alt="Learn ClickHouse"
332332
/>
333333
<CardContent sx={{
334-
backgroundColor: 'background.paper',
335334
color: 'text.primary',
336335
flex: 1,
337336
display: 'flex',
@@ -373,7 +372,6 @@ const ExploreDocs = () => {
373372
alt="Learn ClickHouse"
374373
/>
375374
<CardContent sx={{
376-
backgroundColor: 'background.paper',
377375
color: 'text.primary',
378376
flex: 1,
379377
display: 'flex',
@@ -415,7 +413,6 @@ const ExploreDocs = () => {
415413
alt="ClickHouse Reference"
416414
/>
417415
<CardContent sx={{
418-
backgroundColor: 'background.paper',
419416
color: 'text.primary',
420417
flex: 1,
421418
display: 'flex',
@@ -568,9 +565,224 @@ const ExploreDocs = () => {
568565
</Box>
569566
</CardContent>
570567
</Card>
568+
569+
{/* Featured Section Title - Row 3, spans all 3 columns */}
570+
<Box sx={{
571+
gridRow: 3,
572+
gridColumn: { xs: '1', sm: '1 / span 2', md: '1 / span 3' },
573+
marginBottom: 1,
574+
marginTop: 2
575+
}}>
576+
<Typography variant="h4" sx={{ fontWeight: 600, fontSize: '24px' }}>
577+
Featured
578+
</Typography>
579+
</Box>
580+
581+
{/* Featured Card 1 - Row 4, Column 1 */}
582+
<Card sx={{
583+
gridRow: 4,
584+
gridColumn: 1,
585+
height: '300px',
586+
backgroundColor: 'background.paper',
587+
color: 'text.primary',
588+
boxShadow: 3,
589+
'&:hover': {
590+
boxShadow: 6,
591+
},
592+
display: 'flex',
593+
flexDirection: 'column'
594+
}}>
595+
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
596+
<CardMedia
597+
component="img"
598+
height="100"
599+
sx={{ width: '100%' }}
600+
image={useBaseUrl('/images/homepage/mongodb_feature.png')}
601+
alt="Feature 1"
602+
/>
603+
<CardContent sx={{
604+
color: 'text.primary',
605+
flex: 1,
606+
display: 'flex',
607+
flexDirection: 'column'
608+
}}>
609+
<div>
610+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginBottom: 1 }}>
611+
<Typography
612+
variant="caption"
613+
sx={{
614+
backgroundColor: '#e3f2fd',
615+
color: '#1976d2',
616+
padding: '1px 6px',
617+
borderRadius: '8px',
618+
fontSize: '9px',
619+
fontWeight: 600,
620+
textTransform: 'uppercase',
621+
letterSpacing: '0.3px'
622+
}}
623+
>
624+
Tutorial
625+
</Typography>
626+
</Box>
627+
<h3>MongoDB CDC to ClickHouse with Native JSON Support</h3>
628+
<p>We're excited to announce the private preview of the MongoDB Change Data Capture (CDC) connector in ClickPipes! Enabling customers to replicate their MongoDB collections to ClickHouse Cloud in just a few clicks. </p>
629+
</div>
630+
<Link
631+
to="/integrations/clickpipes/mongodb"
632+
style={{
633+
color: '#faff69',
634+
textDecoration: 'none',
635+
fontSize: '14px',
636+
fontWeight: 600,
637+
marginTop: 'auto',
638+
paddingTop: '8px',
639+
display: 'block'
640+
}}
641+
>
642+
Read more →
643+
</Link>
644+
</CardContent>
645+
</CardActionArea>
646+
</Card>
647+
648+
{/* Featured Card 2 - Row 4, Column 2 */}
649+
<Card sx={{
650+
gridRow: 4,
651+
gridColumn: 2,
652+
height: '300px',
653+
backgroundColor: 'background.paper',
654+
color: 'text.primary',
655+
boxShadow: 3,
656+
'&:hover': {
657+
boxShadow: 6,
658+
},
659+
display: 'flex',
660+
flexDirection: 'column'
661+
}}>
662+
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
663+
<CardMedia
664+
component="img"
665+
height="100"
666+
sx={{ width: '100%' }}
667+
image={useBaseUrl('/images/homepage/remote_mcp_featured.png')}
668+
alt="Feature 2"
669+
/>
670+
<CardContent sx={{
671+
color: 'text.primary',
672+
flex: 1,
673+
display: 'flex',
674+
flexDirection: 'column'
675+
}}>
676+
<div>
677+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginBottom: 1 }}>
678+
<Typography
679+
variant="caption"
680+
sx={{
681+
backgroundColor: '#fff3e0',
682+
color: '#f57c00',
683+
padding: '1px 6px',
684+
borderRadius: '8px',
685+
fontSize: '9px',
686+
fontWeight: 600,
687+
textTransform: 'uppercase',
688+
letterSpacing: '0.3px'
689+
}}
690+
>
691+
Guide
692+
</Typography>
693+
</Box>
694+
<h3>Enabling the ClickHouse Cloud Remote MCP Server</h3>
695+
<p>This guide explains how to enable and use the ClickHouse Cloud Remote MCP Server. We will use Claude Code as an MCP Client for this example.</p>
696+
</div>
697+
<Link
698+
to="/use-cases/AI/MCP/remote_mcp"
699+
style={{
700+
color: '#faff69',
701+
textDecoration: 'none',
702+
fontSize: '14px',
703+
fontWeight: 600,
704+
marginTop: 'auto',
705+
paddingTop: '8px',
706+
display: 'block'
707+
}}
708+
>
709+
Read more →
710+
</Link>
711+
</CardContent>
712+
</CardActionArea>
713+
</Card>
714+
715+
{/* Featured Card 3 - Row 4, Column 3 */}
716+
<Card sx={{
717+
gridRow: 4,
718+
gridColumn: 3,
719+
height: '300px',
720+
backgroundColor: 'background.paper',
721+
color: 'text.primary',
722+
boxShadow: 3,
723+
'&:hover': {
724+
boxShadow: 6,
725+
},
726+
display: 'flex',
727+
flexDirection: 'column'
728+
}}>
729+
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
730+
<CardMedia
731+
component="img"
732+
height="100"
733+
sx={{ width: '100%' }}
734+
image={useBaseUrl('/images/homepage/json_featured.png')}
735+
alt="Feature 3"
736+
/>
737+
<CardContent sx={{
738+
color: 'text.primary',
739+
flex: 1,
740+
display: 'flex',
741+
flexDirection: 'column'
742+
}}>
743+
<div>
744+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginBottom: 1 }}>
745+
<Typography
746+
variant="caption"
747+
sx={{
748+
backgroundColor: '#e8f5e8',
749+
color: '#2e7d32',
750+
padding: '1px 6px',
751+
borderRadius: '8px',
752+
fontSize: '9px',
753+
fontWeight: 600,
754+
textTransform: 'uppercase',
755+
letterSpacing: '0.3px'
756+
}}
757+
>
758+
Best Practice
759+
</Typography>
760+
</Box>
761+
<h3>Use JSON where appropriate</h3>
762+
<p>Wondering when to use the native JSON type over other types? In this guide we'll explain when you should and shouldn't make use of JSON.</p>
763+
</div>
764+
<Link
765+
to="/best-practices/use-json-where-appropriate"
766+
style={{
767+
color: '#faff69',
768+
textDecoration: 'none',
769+
fontSize: '14px',
770+
fontWeight: 600,
771+
marginTop: 'auto',
772+
paddingTop: '8px',
773+
display: 'block'
774+
}}
775+
>
776+
Read more →
777+
</Link>
778+
</CardContent>
779+
</CardActionArea>
780+
</Card>
571781

572782
{/* Changelog Cards Container - Row 2, Column 3 */}
573783
<Box sx={{
784+
gridRow: 2,
785+
gridColumn: 3,
574786
display: 'flex',
575787
flexDirection: 'column',
576788
gap: 2

‎static/images/homepage/json_featured.png‎

16.2 KB
Loading

‎static/images/homepage/mongodb_feature.png‎

34.6 KB
Loading

‎static/images/homepage/remote_mcp_featured.png‎

26.9 KB
Loading

0 commit comments

Comments
 (0)