add container to every section and fix padding

Author: sanjaypinna

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

@@ -14,9 +14,9 @@ export const Content = () => {
     }
   };
   return (
-    <main className='bg-primaryBlue p-8 lg:p-16'>
+    <main className='bg-primaryBlue  py-10 lg:py-20 md:px-8'>
       <div className="flex items-center container justify-center gap-20 ">
-        <div className="flex flex-col gap-11">
+        <div className="flex flex-col lg:w-2/5 gap-11">
           <div className="flex flex-col">
             <Text variant="heading3xl" color="onBgDefault">
               Collaborate to advance

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

@@ -52,7 +52,7 @@ const Datasets = () => {
   const router = useRouter();
 
   return (
-    <div className=" container my-5 lg:p-16">
+    <div className=" container pt-10 lg:pt-20 md:px-8">
       <div className="flex flex-col gap-2 p-3  lg:p-0 md:p-0 ">
         <Text variant="heading3xl">Recent Datasets</Text>
         <div className="flex flex-wrap justify-between gap-2 ">

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

@@ -276,10 +276,11 @@ const ListingComponent: React.FC<ListingProps> = ({
   return (
     <div className="bg-basePureWhite">
       <BreadCrumbs data={breadcrumbData} />
+      <div className='container'>
 
       {/* Optional Category Header */}
       {(categoryName || categoryDescription || categoryImage) && (
-        <div className="m-auto flex w-11/12 flex-wrap items-center gap-6 lg:gap-10 p-6 lg:flex-nowrap lg:items-start lg:pb-10 lg:pt-16">
+        <div className="flex  flex-wrap items-center justify-center gap-6 lg:gap-10 p-6 lg:flex-nowrap lg:items-start lg:pb-10 lg:pt-14">
           {categoryImage && (
             <div className="flex flex-col items-center justify-center rounded-2 bg-baseGraySlateSolid2 p-2">
               <Image
@@ -316,7 +317,7 @@ const ListingComponent: React.FC<ListingProps> = ({
       {/* Optional Header Component */}
       {headerComponent}
 
-      <div className="m-5 md:m-8 lg:m-10">
+      <div className="py-8 lg:py-10">
         <div className="flex flex-wrap items-center justify-between gap-5 rounded-2 p-2 lg:flex-nowrap">
           <div className="w-full md:block">
             <SearchInput
@@ -489,6 +490,7 @@ const ListingComponent: React.FC<ListingProps> = ({
         </div>
       </div>
     </div>
+    </div>
   );
 };
 

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

@@ -36,7 +36,7 @@ const Sectors = () => {
       .join('+'); // Join with '+'
   }
   return (
-    <div className="container my-5 p-8 lg:p-16">
+    <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">
         <Text variant="heading3xl">Explore Sectors</Text>
         <div className="flex flex-wrap justify-between gap-2">

app/[locale]/(user)/sectors/page.tsx

@@ -63,7 +63,7 @@ const SectorsListingPage = () => {
           <>
             <div className="w-full">
               <div className=" bg-primaryBlue">
-                <div className="m-auto flex w-11/12 flex-col-reverse  items-center gap-8  p-6 lg:flex-row ">
+                <div className=" container flex flex-col-reverse items-center gap-8 py-10 lg:flex-row ">
                   <div className="flex flex-col gap-6 ">
                     <Text variant="heading3xl" color="onBgDefault">
                       Our Sectors
@@ -108,7 +108,7 @@ const SectorsListingPage = () => {
                   </div>
                 </div>
               </div>
-              <div className=" m-auto my-10 flex w-11/12 flex-col gap-5 p-6 lg:gap-10">
+              <div className="container flex flex-col gap-5 py-10 lg:gap-10">
                 <div className="flex w-full flex-col justify-center gap-6">
                   <Text variant="heading3xl">Explore Sectors</Text>
                   <div className="flex flex-wrap gap-6 lg:flex-nowrap">

app/[locale]/(user)/usecases/[useCaseSlug]/page.tsx

@@ -121,22 +121,22 @@ const UseCaseDetailPage = () => {
             ]}
           />
           <div className=" bg-onSurfaceDefault">
-            <div className="flex flex-row">
-              <div className="w-full border-r-2 border-solid border-greyExtralight p-8 lg:w-3/4 lg:p-10">
+            <div className="flex flex-row container">
+              <div className="w-full border-r-2 border-solid border-greyExtralight py-8 lg:pr-8 pr-8 lg:w-3/4 lg:py-10">
                 <PrimaryDetails data={UseCaseDetails} isLoading={isLoading} />
               </div>
               <div className="hidden lg:block lg:w-1/4">
                 <Metadata data={UseCaseDetails} />
               </div>
             </div>
-            <div className="p-8 lg:p-14">
-              <div className=" flex flex-col gap-1">
+            <div className="py-8 lg:py-14 container">
+              <div className=" flex flex-col gap-1 ">
                 <Text variant="heading3xl">Datasets in this Use Case</Text>
                 <Text variant="headingLg" fontWeight="regular">
                   All Datasets related to this Use Case
                 </Text>
               </div>
-              <div className="grid w-full grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid  grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
                 {datasets.length > 0 &&
                   datasets.map(
                     (dataset: TypeDataset) => (

app/[locale]/(user)/usecases/components/Details.tsx

@@ -63,7 +63,7 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
           className="h-full w-full"
         />
       </div>
-      <div className=' lg:p-4'>
+      <div className=' lg:pr-4'>
         <div className="mt-6 lg:mt-10">
           <Text variant="heading2xl">GEOGRAPHIES</Text>
           <div className="mt-4">

app/[locale]/dashboard/components/main-nav.tsx

@@ -78,8 +78,8 @@ export function MainNav({ hideSearch = false }) {
   ];
 
   return (
-    <nav className='pt-6 px-6 lg:px-10 lg:pt-6 '>
-      <div className="flex items-center justify-between gap-4 pb-0 lg:pb-6 ">
+    <nav className='lg:p-10 lg:pb-6 p-6 '>
+      <div className="flex items-center justify-between gap-4  ">
         <div className="flex items-center gap-1">
           <div className="lg:hidden">
             <Sidebar