Refactor layout and spacing in Content, Datasets, and Sectors components for improved responsiveness

Author: sanjaypinna

app/[locale]/(user)/components/Content.tsx

@@ -44,8 +44,8 @@ export const Content = () => {
     'Urban Development',
   ];
   return (
-    <main className="bg-primaryBlue  py-10 md:px-8 lg:py-20">
-      <div className="container flex items-center justify-around gap-20 ">
+    <main className="bg-primaryBlue py-6 md:py-10 md:px-8 lg:py-20">
+      <div className="container md:px-12 px-10 lg:px-8 flex items-center justify-around gap-20 ">
         <div className="flex flex-col gap-11 lg:w-[49%]">
           <div className="flex flex-col">
             <Text variant="heading3xl" color="onBgDefault">

app/[locale]/(user)/components/Datasets.tsx

@@ -52,8 +52,8 @@ const Datasets = () => {
   const router = useRouter();
 
   return (
-    <div className=" container pt-10 md:px-8 lg:pt-20">
-      <div className="flex flex-col gap-2 p-3  md:p-0 lg:p-0 ">
+    <div className=" container py-10 md:px-8 lg:py-20">
+      <div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12">
         <Text variant="heading3xl">Popular Datasets</Text>
         <div className="flex flex-wrap justify-between gap-2 ">
           <Text variant="headingLg" fontWeight="medium">
@@ -70,11 +70,11 @@ const Datasets = () => {
           </Button>
         </div>
       </div>
-      <div className="mt-10 ">
+      <div className="mt-12">
         <Carousel className="flex  w-full justify-between">
           <CarouselPrevious />
 
-          <CarouselContent className="p-4 ">
+          <CarouselContent className="p-4">
             {isLoading ? (
               <div className="p-8">
                 <Spinner />

app/[locale]/(user)/components/Sectors.tsx

@@ -36,8 +36,8 @@ const Sectors = () => {
       .join('+'); // Join with '+'
   }
   return (
-    <div className="container py-10 lg:py-20 md:px-8">
-      <div className="flex flex-col gap-2 px-2 lg:px-0 md:px-0">
+    <div className="container pt-10 md:px-8 lg:pt-20">
+      <div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12 ">
         <Text variant="heading3xl">Explore Sectors</Text>
         <div className="flex flex-wrap justify-between gap-2">
           <Text variant="headingLg" fontWeight="medium">
@@ -60,7 +60,7 @@ const Sectors = () => {
           <Spinner />
         </div>
       ) : (
-        <div className="mt-10 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
           {data?.sectors.map((sectors: any) => (
             <Link
               href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}

app/[locale]/(user)/components/datasets.module.scss

@@ -3,8 +3,8 @@
     min-height: 280px;
     max-height: 280px;
     @media screen and (max-width: 1120px) {
-      min-height: 360px;
-      max-height: 360px;
+      min-height: 390px;
+      max-height: 390px;
     }
   }
 }