Skip to content

Revert "Redesign homepage below-hero sections" #151

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
Blargian merged 1 commit into from
Jun 9, 2026
Merged

Revert "Redesign homepage below-hero sections" #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 0 additions & 32 deletions _site/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,6 @@
locks body scroll and the scrollbar disappears. react-remove-scroll
compensates with margin-right on body, but that double-compensates when
the gutter is already reserved — zero it out. */
/* Hero cards on the home page */
.ch-hero-card {
transition: background-color 0.12s ease, border-color 0.12s ease !important;
}
.dark .ch-hero-card {
background-color: #191919 !important;
border-color: #2B2B2B !important;
}
.ch-hero-card:hover {
background-color: #f0f0f0 !important;
border-color: #d1d5db !important;
}
.dark .ch-hero-card:hover {
background-color: #272727 !important;
border-color: #535353 !important;
}
/* Use case section dividers */
.ch-usecase-divider {
border: none !important;
border-top: 1px solid #e5e7eb !important;
}
.dark .ch-usecase-divider {
border-top-color: #2B2B2B !important;
}
/* Use case card arrows */
.ch-usecase-arrow {
color: #000000;
}
.dark .ch-usecase-arrow {
color: #FCFF74;
}

html {
scrollbar-gutter: stable;
}
Expand Down
89 changes: 28 additions & 61 deletions es/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,34 +44,7 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
);
}

export const FullWidthDivider = ({ style }) => {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
const update = () => {
requestAnimationFrame(() => {
el.style.marginLeft = '';
el.style.width = '';
const elRect = el.getBoundingClientRect();
const sidebar = document.getElementById('sidebar');
const sidebarRect = sidebar?.getBoundingClientRect();
const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
const rightEdge = document.documentElement.clientWidth;
const ml = Math.max(0, elRect.left - leftEdge);
const mr = Math.max(0, rightEdge - elRect.right);
el.style.marginLeft = `-${ml}px`;
el.style.width = `calc(100% + ${ml + mr}px)`;
});
};
update();
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
return <hr ref={ref} className="ch-usecase-divider" style={{ border: 'none', ...style }} />;
};

export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
const [isDark, setIsDark] = useState(false);

useEffect(() => {
Expand All @@ -95,10 +68,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
display: 'block',
textDecoration: 'none',
color: 'inherit',
position: 'relative',
overflow: 'hidden',
transition: 'background-color 0.12s ease, border-color 0.12s ease'
color: 'inherit'
};

const content = (
Expand Down Expand Up @@ -137,24 +107,22 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
</>
)}
<h3 style={{
marginTop: (icon || !filename) ? '0' : '20px',
marginTop: icon ? '0' : '20px',
color: isDark ? '#FFFFFF' : '#111827',
fontSize: '20px',
fontWeight: '600',
lineHeight: '1.3'
}}>
{title}
</h3>
{body ? body : (
<span style={{
display: 'block',
marginTop: '16px',
fontSize: '14px',
fontWeight: '400',
color: isDark ? '#a1a1aa' : '#6b7280',
minHeight: '3rem'
}}>{description}</span>
)}
<span style={{
display: 'block',
marginTop: '16px',
fontSize: '14px',
fontWeight: '400',
color: isDark ? '#a1a1aa' : '#6b7280',
minHeight: '3rem'
}}>{description}</span>
{links && links.length > 0 && (
<ul style={{ marginTop: '24px', listStyle: 'none', padding: 0 }}>
{links.map((link, index) => (
Expand All @@ -177,21 +145,14 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
))}
</ul>
)}
{showArrow && (
<div className="ch-usecase-arrow" style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
)}
</>
);

if (links && links.length > 0) {
return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
return <div style={cardStyle}>{content}</div>;
}

return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
return <a style={cardStyle} href={href}>{content}</a>;
};

{/*
Expand Down Expand Up @@ -225,7 +186,8 @@ export const ContentSwitcher = () => {
<div className="flex flex-col items-center lg:flex-row lg:justify-between lg:items-center mt-8 gap-4">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
{selected === 'goal' && 'Explore by goal'}
{selected === 'product' && 'Explore by product area'}
{selected === 'usecase' && 'Explore by use case'}
{selected === 'product' && 'Explore by product area'}
</h2>
<ButtonGroup
options={[
Expand Down Expand Up @@ -301,10 +263,12 @@ export const ContentSwitcher = () => {

{showUsecase && (
<>
<FullWidthDivider style={{ margin: '40px 0 40px' }} />
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-0">Explore by use case</h2>
<p className="text-sm text-gray-500 dark:text-zinc-500" style={{ marginBottom: "24px" }}>Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.</p>
<div className="grid sm:grid-cols-2 min-[1300px]:grid-cols-4 gap-x-6 gap-y-4" style={{ marginTop: "24px" }}>
{CONTENT_MODE === 'stacked' && (
<div className="flex flex-col items-center lg:flex-row lg:justify-between lg:items-center mt-8 gap-4">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">Explore by use case</h2>
</div>
)}
<div className="mt-6 grid sm:grid-cols-2 min-[1300px]:grid-cols-4 gap-x-6 gap-y-4">
<HeroCard
filename="use-cases/rt-analytics-light.png"
darkFilename="use-cases/rt-analytics.png"
Expand All @@ -313,10 +277,11 @@ export const ContentSwitcher = () => {
href="/get-started/use_cases/real-time-analytics"
/>
<HeroCard
filename="use-cases/observability-light.png"
darkFilename="use-cases/observability.png"
title="Observability"
description="Store and query logs, metrics and traces at scale using ClickStack, the open source observability stack powered by ClickHouse."
href="/clickstack/overview"
showArrow
/>
<HeroCard
filename="use-cases/data-warehousing-light.png"
Expand All @@ -338,20 +303,23 @@ export const ContentSwitcher = () => {

{showProduct && (
<>
{CONTENT_MODE === 'stacked' && (
<div className="flex flex-col items-center lg:flex-row lg:justify-between lg:items-center mt-8 gap-4">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">Explore by product area</h2>
</div>
)}
<div className="mt-6 grid sm:grid-cols-2 min-[1300px]:grid-cols-4 gap-x-6 gap-y-4">
<HeroCard
filename="product-cloud-light.png"
title="ClickHouse Cloud"
description="Explore product docs for ClickHouse Cloud, a serverless offering that takes care of the details so you can spend more time getting insight from your data."
href="/products/cloud/getting-started/intro"
showArrow
/>
<HeroCard
filename="product-clickstack-light.png"
title="ClickStack"
description="Explore product docs for ClickStack, the all in one observability stack powered by ClickHouse, which gives you lightning-fast queries and powerful aggregations on logs, metrics, traces, session replays and errors with unmatched resource efficiency for even your highest-cardinality OTel data."
href="/clickstack/overview"
showArrow
/>
<HeroCard
filename="product-chdb-light.png"
Expand All @@ -376,7 +344,6 @@ export const ContentSwitcher = () => {
title="Agentic Data Stack"
description="The open-source stack for agentic analytics. Your chat, your models, your data. Powered by ClickHouse, LibreChat and Langfuse."
href="/products/agentic-data-stack/overview"
showArrow
/>
</div>
</>
Expand Down
Loading