CivicDataLab · Deepthi-Chand · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026
diff --git a/app/[locale]/(user)/components/Content.tsx b/app/[locale]/(user)/components/Content.tsx
@@ -91,58 +91,66 @@ export const Content = () => {
   ];
 
   return (
-    <main className="bg-primaryBlue py-6 md:px-8 md:py-10 lg:py-20">
-      <div className="container flex items-center justify-around gap-20 px-10 md:px-12 lg:px-8 ">
-        <div className="flex flex-col gap-11 lg:w-[49%]">
+    <main className="py-6 md:px-6 md:py-10 lg:py-16 ">
+      <div className=" flex justify-around gap-8 px-4 md:px-8 lg:px-18">
+        <div className="flex flex-col gap-11 lg:w-[60%]">
           <div className="flex flex-col gap-2">
-            <Text variant="heading3xl" color="onBgDefault">
-              An Open-Source Platform for Collaborative Data-Driven Change
+            <Text variant="heading3xl" color="onBgDefault" className='text-textOnBGDefault1'>
+            Discover datasets, AI use cases, and civic knowledge
             </Text>
-             <Text variant="headingLg" color="onBgDefault">
-              Share datasets, knowledge resources, and AI use-cases for data changemakers.
+             <Text variant="headingLg" color="onBgDefault" className='text-textOnBGDefault2'>
+             Open data and insights for public decision-making.
             </Text>
           </div>
+          <div className="w-full" data-tour="search-bar">
+            <SearchInput
+              className={cn(Styles.Search)}
+              onSubmit={handleSearch}
+              label={''}
+              placeholder="Search for any data"
+              name={''}
+              withButton
+            />
+          </div>
           {Stats.isLoading ? (
-            <div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
+            <div className="flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
               <Spinner />
             </div>
           ) : (
-            <div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
+            <div className="flex w-full flex-wrap items-center gap-4 md:flex-nowrap md:gap-5">
               {Metrics.map((item, index) => (
-                <Link 
-                  key={`${item.label}_${index}`} 
+                <Link
+                  key={`${item.label}_${index}`}
                   href={item.link}
-                  data-tour={index === 0 ? 'datasets-link' : index === 1 ? 'usecases-link' : index === 2 ? 'publishers-link' : undefined}
+                  className="w-[177px] md:basis-[177px]"
+                  data-tour={
+                    index === 0
+                      ? 'datasets-link'
+                      : index === 1
+                        ? 'usecases-link'
+                        : index === 2
+                          ? 'publishers-link'
+                          : undefined
+                  }
                 >
-                  <div
-                    key={index}
-                    className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
-                  >
-                    <Text
-                      variant="heading3xl"
-                      className=" text-secondaryOrange"
-                    >
+                  <div className="flex h-[100px] flex-col text-start justify-center rounded-[8px] bg-surfaceStats px-10 py-10 text-center">
+                    <Text variant="heading3xl" className="text-primaryBlue">
                       {item.count}
                     </Text>
-                    <Text color="onBgDefault" className=" w-20 ">
+                    <Text
+                      color="onBgDefault"
+                      fontWeight="semibold"
+                      className="uppercase text-xs text-textSurfaceStats"
+                    >
                       {item.label}
                     </Text>
                   </div>
                 </Link>
               ))}
             </div>
           )}
-          <div className="w-full" data-tour="search-bar">
-            <SearchInput
-              className={cn(Styles.Search)}
-              onSubmit={handleSearch}
-              label={''}
-              placeholder="Search for any data"
-              name={''}
-              withButton
-            />
-          </div>
-          <div className="flex flex-wrap gap-4">
+
+          {/* <div className="flex flex-wrap gap-4">
             {Sectors.map((item, index) => (
               <div key={index}>
                 <Tag
@@ -158,13 +166,13 @@ export const Content = () => {
                 </Tag>
               </div>
             ))}
-          </div>
+          </div> */}
         </div>
         <div className=" hidden lg:block">
           <Image
-            src="/homepage_illustration.png"
-            width={500}
-            height={400}
+            src="/hero-image.svg"
+            width={354}
+            height={275}
             alt="illustration"
           />
         </div>

diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx
@@ -60,18 +60,22 @@ const Datasets = () => {
             Discover high-impact datasets that are helping users power research,
             analysis, and action.
           </Text>
+          {/* #TODO*/}
         </div>
         <div>
           <Button
-            kind="primary"
-            className=" bg-secondaryOrange text-basePureBlack"
+            kind="tertiary"
+            className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline"
             onClick={() => {
               router.push('/datasets');
             }}
           >
-            <Text variant="bodyLg" fontWeight="semibold">
-              Explore all Datasets
-            </Text>
+            <span className="flex items-center gap-2">
+              <Text variant="bodyLg" fontWeight="semibold" color="inherit">
+                Explore all Datasets
+              </Text>
+              <Icons.arrowRight size={18} />
+            </span>
           </Button>
         </div>
       </div>

diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx
@@ -443,8 +443,8 @@ const ListingComponent: React.FC<ListingProps> = ({
                     onClear={(value) => handleSearch(value)}
                   />
                 </div>
-                <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap lg:justify-normal lg:gap-5">
-                  <div className="hidden items-center gap-2 lg:flex">
+                <div className="flex flex-wrap justify-between gap-2 lg:flex-nowrap lg:justify-normal lg:gap-5">
+                  {/* <div className="hidden items-center gap-2 lg:flex">
                     <ButtonGroup noWrap spacing="tight">
                       <Button
                         kind={'tertiary'}
@@ -467,7 +467,7 @@ const ListingComponent: React.FC<ListingProps> = ({
                         />
                       </Button>
                     </ButtonGroup>
-                  </div>
+                  </div> */}
                   <div className="flex items-center gap-2">
                     <Button
                       onClick={() =>

diff --git a/app/[locale]/(user)/components/Sectors.tsx b/app/[locale]/(user)/components/Sectors.tsx
@@ -9,6 +9,7 @@ import { Button, Text } from 'opub-ui';
 import { GraphQL } from '@/lib/api';
 import { buildSectorSlugParam } from '@/lib/utils';
 import { SectorListingSkeleton } from '@/components/loading';
+import { Icons } from '@/components/icons';
 import { SectorCard } from '@/components/SectorCard';
 
 const sectorDetails = graphql(`
@@ -42,15 +43,18 @@ const Sectors = () => {
         </div>
         <div>
           <Button
-            kind="primary"
-            className=" bg-secondaryOrange text-basePureBlack"
+            kind="tertiary"
+            className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline"
             onClick={() => {
               router.push('/sectors');
             }}
           >
-            <Text variant="bodyLg" fontWeight="semibold">
-              Explore all Sectors
-            </Text>
+            <span className="flex items-center gap-2">
+              <Text variant="bodyLg" fontWeight="semibold" color="inherit">
+                Explore all Sectors
+              </Text>
+              <Icons.arrowRight size={18} />
+            </span>
           </Button>
         </div>
       </div>

diff --git a/app/[locale]/(user)/components/UseCases.tsx b/app/[locale]/(user)/components/UseCases.tsx
@@ -109,15 +109,18 @@ const UseCasesListingPage = () => {
         </div>
         <div>
           <Button
-            kind="primary"
-            className=" bg-secondaryOrange text-basePureBlack"
+            kind="tertiary"
+            className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline"
             onClick={() => {
               router.push('/usecases');
             }}
           >
-            <Text variant="bodyLg" fontWeight="semibold">
-              Explore all Use Cases
-            </Text>
+            <span className="flex items-center gap-2">
+              <Text variant="bodyLg" fontWeight="semibold" color="inherit">
+                Explore all Use Cases
+              </Text>
+              <Icons.arrowRight size={18} />
+            </span>
           </Button>
         </div>
       </div>

diff --git a/app/[locale]/(user)/page.module.scss b/app/[locale]/(user)/page.module.scss
@@ -1,4 +1,6 @@
 .Search {
+  max-width: 770px;      /* or whatever width you want */
+  width: 100%;     
   input {
     width: 100%;
     height: 36px;
@@ -11,4 +13,8 @@
     border-top-color: var(--border-subdued);
     border-radius: 8px;
   }
+  button {
+    background-color: #EBF9FC;  /* same as surface-stats */
+    border-radius: 8px;
+  }
 }
diff --git a/public/Object.png b/public/Object.png
diff --git a/public/hero-image.svg b/public/hero-image.svg
diff --git a/styles/tokens/_variables.css b/styles/tokens/_variables.css
@@ -47,6 +47,8 @@
   --base-gray-slate-solid-10: #7e868c;
   --base-gray-slate-solid-11: #687076;
   --base-gray-slate-solid-12: #11181c;
+  --base-gray-slate-solid-13:#111111;
+  --base-gray-slate-solid-14:#545456;
   --base-red-solid-1: #fffcfc;
   --base-red-solid-2: #fff8f8;
   --base-red-solid-3: #ffefef;
@@ -83,7 +85,7 @@
   --base-amber-solid-10: #ffa01c;
   --base-amber-solid-11: #ad5700;
   --base-amber-solid-12: #4e2009;
-  --base-pure-white: #ffffff;
+  --base-pure-white: #ffffff ;
   --base-pure-black: #000000;
   --blue-primary-color: #0b3865;
   --orange-secondary-color: #fdb557;
@@ -102,6 +104,8 @@
   --text-highlight: var(--base-violet-solid-11);
   --text-interactive: var(--base-blue-solid-11);
   --text-onbg-default: var(--base-gray-slate-solid-1);
+  /* Text color for stats on surface-stats background */
+  --text-surface-stats: #4a7d75;
   --text-onbg-disabled: var(--base-gray-slate-solid-9);
   --border-default: var(--base-gray-slate-solid-8);
   --border-subdued: var(--base-gray-slate-solid-7);
@@ -189,6 +193,8 @@
   --background-solid-default: var(--base-indigo-solid-3);
   --surface-default: var(--base-pure-white);
   --surface-subdued: var(--base-gray-slate-solid-2);
+  /* Stats cards background */
+  --surface-stats: #ebf9fc;
   --base-indigo-alpha-10: #002cbdc4;
   --surface-selected: var(--base-blue-solid-2);
   --base-indigo-alpha-11: #00259ecc;

diff --git a/styles/tokens/tailwind/color.js b/styles/tokens/tailwind/color.js
@@ -83,7 +83,7 @@ module.exports = {
   baseAmberSolid10: '#FFA01C',
   baseAmberSolid11: '#AD5700',
   baseAmberSolid12: '#4E2009',
-  basePureWhite: '#FFFFFF',
+  basePureWhite: '#F2F7FE',
   basePureBlack: '#000000',
   textDefault: 'var(--base-gray-slate-solid-12)',
   textMedium: 'var(--base-gray-slate-solid-11)',
@@ -95,6 +95,10 @@ module.exports = {
   textHighlight: 'var(--base-violet-solid-11)',
   textInteractive: 'var(--base-blue-solid-11)',
   textOnBGDefault: 'var(--base-gray-slate-solid-1)',
+  textOnBGDefault1: 'var(--base-gray-slate-solid-13)',
+  textOnBGDefault2: 'var(--base-gray-slate-solid-14)',
+  // Text color for stats on surface-stats background
+  textSurfaceStats: 'var(--text-surface-stats)',
   textOnBGDisabled: 'var(--base-gray-slate-solid-9)',
   borderDefault: 'var(--base-gray-slate-solid-8)',
   borderSubdued: 'var(--base-gray-slate-solid-7)',
@@ -181,6 +185,8 @@ module.exports = {
   backgroundSolidDefault: 'var(--base-indigo-solid-3)',
   surfaceDefault: 'var(--base-pure-white)',
   surfaceSubdued: 'var(--base-gray-slate-solid-2)',
+  // Stats cards background
+  surfaceStats: 'var(--surface-stats)',
   baseIndigoAlpha10: '#002CBDC4',
   surfaceSelected: 'var(--base-blue-solid-2)',
   baseIndigoAlpha11: '#00259ECC',