diff --git a/_site/styles.css b/_site/styles.css
index 4ce11a18a..4fa18ba33 100644
--- a/_site/styles.css
+++ b/_site/styles.css
@@ -2,6 +2,38 @@
    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;
 }
diff --git a/es/index.mdx b/es/index.mdx
index 61a136d2a..7b0304490 100644
--- a/es/index.mdx
+++ b/es/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>
diff --git a/index.mdx b/index.mdx
index 13e3afa12..3951d1a73 100644
--- a/index.mdx
+++ b/index.mdx
@@ -42,10 +42,36 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
-    const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
+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 }} />;
+};
 
-    const cardClassName = "ch-hero-card block p-4 rounded-lg no-underline bg-[#f9f9f9] border border-[#e5e7eb]";
+export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
+    const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
+    const cardClassName = `ch-hero-card ${arrowBottom ? 'flex flex-col' : 'block'} p-4 rounded-lg no-underline bg-[#f9f9f9] border border-[#e5e7eb]`;
 
     const content = (
         <>
@@ -53,7 +79,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 <div style={{ marginBottom: '24px' }}>
                     {icon}
                 </div>
-            ) : (
+            ) : filename ? (
                 <>
                     <img
                         src={`/images/${filename}`}
@@ -81,26 +107,28 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                         }}
                     />
                 </>
-            )}
+            ) : null}
             <h3 className="text-[#111827] dark:text-white" style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 fontSize: '18px',
                 fontWeight: '600',
                 lineHeight: '1.3'
             }}>
                 {title}
             </h3>
-            <span className="text-[#6b7280] dark:text-[#a1a1aa]" style={{
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-                marginTop: '8px',
-                fontSize: '14px',
-                fontWeight: '400',
-                lineHeight: '1.5',
-                height: '42px'
-            }}>{description}</span>
+            {body ? body : (
+                <span className="text-[#6b7280] dark:text-[#a1a1aa]" style={{
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    marginTop: '8px',
+                    fontSize: '14px',
+                    fontWeight: '400',
+                    lineHeight: '1.5',
+                    height: '42px'
+                }}>{description}</span>
+            )}
             {links && links.length > 0 && (
                 <ul style={{ marginTop: '24px', listStyle: 'none', padding: 0 }}>
                     {links.map((link, index) => (
@@ -120,14 +148,24 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                     ))}
                 </ul>
             )}
+            {showArrow && (
+                <>
+                    {arrowBottom && <div style={{ flex: 1 }} />}
+                    <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 className={cardClassName} style={{ color: 'inherit' }}>{content}</div>;
+        return <div className={cardClassName} style={{ color: 'inherit', ...extraStyle }}>{content}</div>;
     }
 
-    return <a className={cardClassName} href={href} style={{ color: 'inherit' }} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
+    return <a className={cardClassName} href={href} style={{ color: 'inherit', ...extraStyle }} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 
@@ -232,7 +270,7 @@ 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 === 'usecase' && 'Explore by use case'}
+
                         {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
@@ -326,103 +364,126 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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' }}>
                         <HeroCard
-                            filename="use-cases/rt-analytics-light.png"
-                            darkFilename="use-cases/rt-analytics.png"
                             title="Real-time analytics"
                             description="Deliver instant insights and dashboards at scale. Analyze billions of rows in real time with millisecond results."
                             href="/get-started/use-cases/real-time-analytics"
+                            showArrow
                         />
                         <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"
-                            darkFilename="use-cases/data-warehousing.png"
                             title="Data warehousing"
                             description="Analyze and explore data instantly for insights and apps. Scale faster by offloading heavy workloads."
                             href="/get-started/use-cases/data-warehousing"
+                            showArrow
                         />
                         <HeroCard
-                            filename="use-cases/machine-learning-light.png"
-                            darkFilename="use-cases/machine-learning.png"
                             title="Agentic analytics"
                             description="Let AI agents query your real-time data directly to deliver instant, conversational insights and visualizations"
                             href="/get-started/use-cases/agentic-analytics"
+                            showArrow
                         />
                     </div>
+                    <FullWidthDivider style={{ margin: '40px 0 40px' }} />
                 </>
             )}
 
             {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>
+                    <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-0">Explore by product</h2>
+                    <p className="text-sm text-gray-500 dark:text-zinc-500" style={{ marginBottom: '24px' }}>Browse ClickHouse products and integrations, from the managed cloud service to open source projects.</p>
+                    <div className="space-y-4" style={{ marginTop: '24px' }}>
+                        {/* Row 1: ClickHouse Cloud (col-span-2) + 3 stacked cards (col-span-1) */}
+                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4" style={{ alignItems: 'stretch' }}>
+                            <div style={{ gridColumn: 'span 2' }}>
+                                <HeroCard
+                                    filename="product-cloud-light.png"
+                                    title="ClickHouse Cloud"
+                                    href="/products/cloud/getting-started/intro"
+                                    extraStyle={{ height: '100%' }}
+                                    body={<>
+                                        <p className="text-[#6b7280] dark:text-[#a1a1aa]" style={{ marginTop: '8px', fontSize: '14px', lineHeight: '1.6' }}>
+                                            This section shows how ClickHouse makes data warehousing fast, simple, and predictable. Instead of wrestling with fragile pipelines and slow query engines, you centralize data from your apps, services, and tools in minutes, not weeks. From there, you can power real-time dashboards, trigger alerts, analyze historical trends, and build event-driven products on top of the same platform.
+                                        </p>
+                                    </>}
+                                    links={[
+                                        { label: "How to ingest data from common sources with minimal work", href: "/integrations" },
+                                        { label: "Best practices for organizing data for analytics and growth", href: "/data-modeling/schema-design" },
+                                        { label: "Ways to query large datasets in real time", href: "/get-started/use-cases/real-time-analytics" },
+                                        { label: "How to build dashboards, alerts, and event-driven features on top", href: "/get-started/use-cases/data-warehousing" },
+                                        { label: "Tips to keep costs low while performance stays high", href: "/operations/best-practices" },
+                                    ]}
+                                />
+                            </div>
+                            <div className="flex flex-col gap-4">
+                                <HeroCard
+                                    title="ClickStack"
+                                    description="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."
+                                    href="/clickstack/overview"
+                                    extraStyle={{ flex: 1 }}
+                                    showArrow
+                                    arrowBottom
+                                />
+                                <HeroCard
+                                    title="Managed Postgres"
+                                    description="Fast, scalable, enterprise-grade Postgres service, natively integrated with ClickHouse. Easily combine Postgres for transactions and ClickHouse for analytics."
+                                    href="/products/managed-postgres/overview"
+                                    extraStyle={{ flex: 1 }}
+                                    showArrow
+                                    arrowBottom
+                                />
+                                <HeroCard
+                                    title="chDB"
+                                    description="A fast, reliable, and scalable in-process database. Experience the power of ClickHouse, in-process."
+                                    href="/products/chdb"
+                                    extraStyle={{ flex: 1 }}
+                                    showArrow
+                                    arrowBottom
+                                />
+                            </div>
+                        </div>
+                        {/* Row 2: 3 equal cards */}
+                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                            <HeroCard
+                                filename="product-langfuse-light.png"
+                                title="LangFuse"
+                                description="Open-source LLM engineering platform for observability, metrics, evaluations, and prompt management."
+                                href="https://langfuse.com/docs"
+                                showArrow
+                            />
+                            <HeroCard
+                                filename="product-cloud-light.png"
+                                title="Kubernetes Operator"
+                                description="Automates deploying, configuring, and managing ClickHouse and ClickHouse Keeper clusters on Kubernetes."
+                                href="/products/kubernetes-operator/overview"
+                                showArrow
+                            />
+                            <HeroCard
+                                filename="product-chdb-light.png"
+                                title="chDB"
+                                description="A fast, reliable, and scalable in-process database. Experience the power of ClickHouse, in-process."
+                                href="/products/chdb"
+                                showArrow
+                            />
                         </div>
-                    )}
-                    <div className="mt-6 grid sm:grid-cols-2 min-[1300px]:grid-cols-3 gap-x-6 gap-y-4">
-                        <HeroCard
-                            filename="product-cloud-light.png"
-                            title="ClickHouse Cloud"
-                            description="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"
-                        />
-                        <HeroCard
-                            filename="product-clickstack-light.png"
-                            title="ClickStack"
-                            description="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."
-                            href="/clickstack/overview"
-                        />
-                        <HeroCard
-                            filename="product-postgres-light.png"
-                            darkFilename="product-postgres-dark.png"
-                            title="Managed Postgres"
-                            description="Fast, scalable, enterprise-grade Postgres service, natively integrated with ClickHouse. Easily combine Postgres for transactions and ClickHouse for analytics."
-                            href="/products/managed-postgres/overview"
-                        />
-                        <HeroCard
-                            filename="product-agentic-analytics-light.png"
-                            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"
-                        />
-                        <HeroCard
-                            filename="product-langfuse-light.png"
-                            title="LangFuse"
-                            description="Open-source LLM engineering platform for observability, metrics, evaluations, and prompt management."
-                            href="https://langfuse.com/docs"
-                        />
-                        <HeroCard
-                            filename="product-chdb-light.png"
-                            title="chDB"
-                            description="A fast, reliable, and scalable in-process database. Experience the power of ClickHouse, in-process."
-                            href="/products/chdb"
-                        />
-                        <HeroCard
-                            filename="product-cloud-light.png"
-                            title="Kubernetes Operator"
-                            description="Automates deploying, configuring, and managing ClickHouse and ClickHouse Keeper clusters on Kubernetes."
-                            href="/products/kubernetes-operator/overview"
-                        />
                     </div>
+                    <FullWidthDivider style={{ margin: '40px 0 0' }} />
                 </>
             )}
 
-            <div id="mcp-setup" style={{ marginTop: '64px', paddingTop: '40px', borderTop: '1px solid rgba(255,255,255,0.08)', scrollMarginTop: '80px' }}>
-                <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-2">Set up docs MCP server</h2>
-                <p className="text-sm text-gray-500 dark:text-zinc-500 mb-6">Query the ClickHouse documentation directly from your AI tools using the Model Context Protocol.</p>
-                <McpSetup />
+            <div id="mcp-setup" style={{ marginTop: '64px', scrollMarginTop: '80px' }}>
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-0">Set up docs MCP server</h2>
+                <p className="text-sm text-gray-500 dark:text-zinc-500" style={{ marginBottom: '24px' }}>Query the ClickHouse documentation directly from your AI tools using the Model Context Protocol.</p>
+                <div style={{ marginTop: '24px' }}><McpSetup /></div>
             </div>
         </>
     );
diff --git a/ja/index.mdx b/ja/index.mdx
index 61a136d2a..7b0304490 100644
--- a/ja/index.mdx
+++ b/ja/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>
diff --git a/ko/index.mdx b/ko/index.mdx
index 61a136d2a..7b0304490 100644
--- a/ko/index.mdx
+++ b/ko/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>
diff --git a/pt-br/index.mdx b/pt-br/index.mdx
index 61a136d2a..7b0304490 100644
--- a/pt-br/index.mdx
+++ b/pt-br/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>
diff --git a/ru/index.mdx b/ru/index.mdx
index 61a136d2a..7b0304490 100644
--- a/ru/index.mdx
+++ b/ru/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>
diff --git a/zh/index.mdx b/zh/index.mdx
index 61a136d2a..7b0304490 100644
--- a/zh/index.mdx
+++ b/zh/index.mdx
@@ -44,7 +44,34 @@ export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false,
     );
 }
 
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, href, links, icon }) => {
+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 }) => {
     const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
@@ -68,7 +95,10 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
         border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
         display: 'block',
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'background-color 0.12s ease, border-color 0.12s ease'
     };
 
     const content = (
@@ -107,7 +137,7 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
                 </>
             )}
             <h3 style={{
-                marginTop: icon ? '0' : '20px',
+                marginTop: (icon || !filename) ? '0' : '20px',
                 color: isDark ? '#FFFFFF' : '#111827',
                 fontSize: '20px',
                 fontWeight: '600',
@@ -115,14 +145,16 @@ export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, desc
             }}>
                 {title}
             </h3>
-            <span style={{
-                display: 'block',
-                marginTop: '16px',
-                fontSize: '14px',
-                fontWeight: '400',
-                color: isDark ? '#a1a1aa' : '#6b7280',
-                minHeight: '3rem'
-            }}>{description}</span>
+            {body ? body : (
+                <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) => (
@@ -145,14 +177,21 @@ 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}>{content}</div>;
+        return <div style={{ ...cardStyle, ...extraStyle }}>{content}</div>;
     }
 
-    return <a style={cardStyle} href={href}>{content}</a>;
+    return <a style={{ ...cardStyle, ...extraStyle }} href={href} onClick={(e) => { e.preventDefault(); window.location.href = href; }}>{content}</a>;
 };
 
 {/*
@@ -186,8 +225,7 @@ 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 === 'usecase' && 'Explore by use case'}
-                        {selected === 'product' && 'Explore by product area'}
+                                                {selected === 'product' && 'Explore by product area'}
                     </h2>
                     <ButtonGroup
                         options={[
@@ -263,12 +301,10 @@ export const ContentSwitcher = () => {
 
             {showUsecase && (
                 <>
-                    {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">
+                    <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" }}>
                         <HeroCard
                             filename="use-cases/rt-analytics-light.png"
                             darkFilename="use-cases/rt-analytics.png"
@@ -277,11 +313,10 @@ 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"
@@ -303,23 +338,20 @@ 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"
@@ -344,6 +376,7 @@ 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>
                 </>