Added alternate background color and also aligned

Author: UdayRajSahai2

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

@@ -32,7 +32,7 @@ const Sectors = () => {
   const router = useRouter();
 
   return (
-    <div className="container pt-10 md:px-8 lg:pt-20">
+    <div className="container pt-10 pb-12 md:px-8 lg:pt-20 lg:pb-24">
       <div className="flex flex-wrap items-center justify-between gap-4 px-4 md:px-12 lg:gap-2 lg:px-12 ">
         <div className="flex flex-col gap-2">
           <Text variant="headingXl">Explore Sectors</Text>
@@ -41,7 +41,7 @@ const Sectors = () => {
             matters most to your domain.
           </Text>
         </div>
-        <div>
+        <div className="mr-8 lg:mr-12">
           <Button
             kind="tertiary"
             className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline"

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

@@ -60,9 +60,13 @@ export default async function Home() {
       <JsonLd json={jsonLd} />
       <div className="bg-surfaceDefault">
         <Content />
-        <UseCases />
+        <section className="w-full bg-alternateBackgroundColor pb-10 lg:pb-20">
+          <UseCases />
+        </section>
         <Sectors />
+        <section className="w-full bg-alternateBackgroundColor">
         <Datasets />
+        </section>
       </div>
     </>
   );

package-lock.json

@@ -23,6 +23,7 @@
   --base-blue-solid-10: #0081f1;
   --base-blue-solid-11: #006adc;
   --base-blue-solid-12: #00254d;
+  --base-blue-solid-14: #f9fcff;
   --base-violet-solid-1: #fdfcfe;
   --base-violet-solid-2: #fbfaff;
   --base-violet-solid-3: #f5f2ff;
@@ -174,6 +175,7 @@
   --action-secondary-basic-hovered: var(--base-violet-solid-4);
   --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6);
   --action-tertiary-basic-hover: var(--base-violet-alpha-2);
+  --alternate-background-color: var(--base-blue-solid-14);
   --base-indigo-alpha-1: #05058203;
   --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
   --base-indigo-alpha-2: #054cff08;

styles/tokens/_variables.css

@@ -166,6 +166,7 @@ module.exports = {
   actionSecondaryBasicHovered: 'var(--base-violet-solid-4)',
   actionSecondaryNeutralDepressed: 'var(--base-gray-slate-solid-6)',
   actionTertiaryBasicHover: 'var(--base-violet-alpha-2)',
+  alternateBackgroundColor: 'var(--alternate-background-color)',
   baseIndigoAlpha1: '#05058203',
   actionTertiaryInteractiveHover: 'var(--base-blue-alpha-2)',
   baseIndigoAlpha2: '#054CFF08',