Fix section sizing

Author: mustafasaifee42

src/routes/Countries/Components/keyFindings.tsx

@@ -25,7 +25,7 @@ export function KeyFindings({
 }) {
   const keyFindingContent = (
     <div className='flex flex-col gap-2'>
-      <P className='uppercase' size='xs' weight='bold' marginBottom='none'>
+      <P className='uppercase' size='xs' marginBottom='none'>
         Key finding {index}
       </P>
       <H5 weight='bold' marginBottom='none'>

src/routes/Countries/countryPage.tsx

@@ -29,7 +29,7 @@ export function CountryPage() {
       <section id='header' className='mx-auto w-full bg-primary-gray-200 py-20'>
         <div className='mx-auto max-w-[1920px] px-4 sm:px-6 lg:px-8'>
           <div className='w-full md:w-1/2'>
-            <P className='uppercase' size='xs' weight='bold' marginBottom='none'>
+            <P className='uppercase' size='xs' marginBottom='none'>
               Country report
             </P>
             <Spacer size='2xl' />

src/routes/aboutPage.tsx

@@ -5,7 +5,7 @@ import { H1, P } from '@undp/design-system-react/Typography';
 
 export function About() {
   return (
-    <div className='mx-auto my-8 w-full max-w-[1920px] px-4'>
+    <div className='mx-auto my-8 w-full max-w-[1920px] px-4 sm:px-6 lg:px-8'>
       <H1 size='sm'>About</H1>
       <Spacer size='2xl' />
       <P>

src/routes/dataExplorer.tsx

@@ -1,11 +1,35 @@
 import type { AnyRoute } from '@tanstack/react-router';
 import { createRoute } from '@tanstack/react-router';
-import { H1 } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import { Spacer } from '@undp/design-system-react/Spacer';
+import { H1, H4, P } from '@undp/design-system-react/Typography';
+import { DownloadIcon } from 'lucide-react';
 
 export function dataExplorer() {
   return (
-    <div className='mx-auto my-8 w-full max-w-[1920px] px-4'>
-      <H1 size='sm'>Data Explorer</H1>
+    <div className='mx-auto my-8 w-full'>
+      <section id='data-explorer' className='mx-auto w-full max-w-[1920px] px-4 sm:px-6 lg:px-8'>
+        <H1 size='sm'>Data Explorer</H1>
+        <Spacer size='2xl' />
+        <div className='h-[70vh] w-full bg-primary-gray-200 p-6 md:p-10' />
+      </section>
+      <Spacer size='2xl' />
+      <section id='download-data' className='mx-auto w-full max-w-[1920px] px-4 sm:px-6 lg:px-8'>
+        <button
+          type='button'
+          className='flex w-full flex-col bg-primary-gray-200 p-6 hover:bg-primary-gray-300 md:p-10'
+        >
+          <H4 weight='bold'>Download Data</H4>
+          <P size='lg' marginBottom='none'>
+            Lorem ipsum dolor sit amet consectetur. Consequat tempus.
+          </P>
+          <Spacer size='2xl' />
+          <Button variant='link-without-icon' padding='none' className='w-fit'>
+            Download <DownloadIcon className='text-accent-red' />
+          </Button>
+        </button>
+      </section>
+      <Spacer size='8xl' />
     </div>
   );
 }

src/routes/resourcesPage.tsx

@@ -41,7 +41,7 @@ export function Resource() {
     },
   ];
   return (
-    <div className='mx-auto my-8 w-full max-w-[1920px] px-4'>
+    <div className='mx-auto my-8 w-full max-w-[1920px] px-4 sm:px-6 lg:px-8'>
       <H1 size='sm'>Resources</H1>
       <Spacer size='2xl' />
       <Grid noOfCol={{ base: 1, sm: 2, md: 4, lg: 6 }}>