chore: colored homepage

index.mdx

@@ -4,9 +4,9 @@
 ---
 
 import {CardComponent} from "/snippets/card.jsx"
 import { CTALink } from "/snippets/cta-link.jsx"
 
-<div className="px-6 md:px-12 md:py-8 prose">
+<div className="px-6 md:px-12 md:py-8 prose  max-w-8xl mx-auto relative">
 
 <Heading level={1} noAnchor className="font-bold text-4xl mb-4 dark:text-white">TigerData documentation</Heading>
 
@@ -16,15 +16,15 @@
 <Columns cols={2}>
 <CardComponent
     title={<>Get started with<br />Tiger Cloud</>}
-    icon="rocket" 
+    bgImage="/images/card-bg-purple.png"
     href="/cloud/tiger/get-started/get-started-with-tiger-cloud" 
     cta={<CTALink text="Learn how" href="/cloud/tiger/get-started/get-started-with-tiger-cloud" />}>
     Tiger Cloud is the fastest Postgres cloud, powered by Tiger Postgres. It enhances Postgres to handle time series, events, real-time analytics, and vector search—all in a single database alongside transactional workloads.
 </CardComponent>
 
 <CardComponent
     title={<>Get started with<br />TimescaleDB</>}
-    icon="play" 
+    bgImage="/images/card-bg-yellow.png"
     href="/manage-data/timescaledb/get-started/get-started-with-timescaledb" 
     cta={<CTALink text="Learn how" href="/manage-data/timescaledb/get-started/get-started-with-timescaledb" />}>
     TimescaleDB is an open-source Postgres extension designed for running real-time analytics on time-series data. It is engineered up from Postgres and maintains full SQL support.
@@ -151,7 +151,7 @@
 
 <Heading level={2} noAnchor className="font-semibold dark:text-white">Tutorials</Heading>
 
 See the other tutorials in our [tutorials section](/tutorials/), including bla and bla and bla.
 
 <CardGroup cols={3}>
     <Card

snippets/card.jsx

@@ -1,11 +1,9 @@
 
 
-export const CardComponent = ({children, icon, title, href, cta}) => {
+export const CardComponent = ({children, title, href, cta, bgImage}) => {
   return (
-    <a href={href} className="group/item flex gap-3 flex-col my-2 pt-6 px-6 pb-9 rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
-      <div className="bg-[#F8F9FF] inline-flex items-center justify-center rounded-lg self-start w-[50px] h-[50px]">
-        <Icon icon={icon} size={24} color="#6447FB" />
-      </div>
+    <a href={href} className="group/item flex gap-3 flex-col my-2 pt-6 px-6 pb-9 rounded-3xl bg-white dark:bg-background-dark overflow-hidden w-full cursor-pointer"
+    style={{backgroundImage: `url(${bgImage})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'bottom right', backgroundSize: 'cover'}}>
       <h2 className="text-3xl text-black dark:text-white font-semibold">{title}</h2>
       <div className="text-neutral-700 dark:text-neutral-400">{children}</div>
       {cta && <div className="mt-5">{cta}</div>}