diff --git a/app/[locale]/(user)/components/Content.tsx b/app/[locale]/(user)/components/Content.tsx index 9fea2c38..58f91274 100644 --- a/app/[locale]/(user)/components/Content.tsx +++ b/app/[locale]/(user)/components/Content.tsx @@ -91,40 +91,57 @@ export const Content = () => { ]; return ( -
-
-
+
+
+
- - An Open-Source Platform for Collaborative Data-Driven Change + + Discover datasets, AI use cases, and civic knowledge - - Share datasets, knowledge resources, and AI use-cases for data changemakers. + + Open data and insights for public decision-making.
+
+ +
{Stats.isLoading ? ( -
+
) : ( -
+
{Metrics.map((item, index) => ( - -
- +
+ {item.count} - + {item.label}
@@ -132,17 +149,8 @@ export const Content = () => { ))}
)} -
- -
-
+ + {/*
{Sectors.map((item, index) => (
{
))} -
+
*/}
illustration
diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx index a4cc569e..09ec4af5 100644 --- 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. + {/* #TODO*/}
diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx index 21144e71..b446cc8b 100644 --- a/app/[locale]/(user)/components/ListingComponent.tsx +++ b/app/[locale]/(user)/components/ListingComponent.tsx @@ -443,8 +443,8 @@ const ListingComponent: React.FC = ({ onClear={(value) => handleSearch(value)} />
-
-
+
+ {/*
-
+
*/}
diff --git a/app/[locale]/(user)/components/UseCases.tsx b/app/[locale]/(user)/components/UseCases.tsx index 47b515eb..b2b67840 100644 --- a/app/[locale]/(user)/components/UseCases.tsx +++ b/app/[locale]/(user)/components/UseCases.tsx @@ -109,15 +109,18 @@ const UseCasesListingPage = () => {
diff --git a/app/[locale]/(user)/page.module.scss b/app/[locale]/(user)/page.module.scss index 4e1ef07e..2bd2ee48 100644 --- 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 new file mode 100644 index 00000000..e6a17126 Binary files /dev/null and b/public/Object.png differ diff --git a/public/hero-image.svg b/public/hero-image.svg new file mode 100644 index 00000000..e199f250 --- /dev/null +++ b/public/hero-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/styles/tokens/_variables.css b/styles/tokens/_variables.css index 9680de84..bba734b0 100644 --- 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 index 5267a97f..c4ed0506 100644 --- 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',