From 86ffbd6b3da962b472e0998f7d87fa355326d8d4 Mon Sep 17 00:00:00 2001
From: MarBert <41899883+MarBert@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:24:08 +0100
Subject: [PATCH] [DEV-1952][DEV-1782] Fix card shadow border and Add margin
 ecosystem (#1158)

* refactor card grid and ecosystem for card shadows

* add changeset

* add padding and margin for mobile version

* add changeset

* move padding for card grinds to parent container

* add mt and pt for shadows

* fix title spacing
---
 .changeset/giant-icons-kick.md                |  5 +++
 .changeset/three-walls-kick.md                |  5 +++
 .../atoms/TabComponent/TabComponent.tsx       | 21 ++++++++++---
 .../organisms/Ecosystem/Ecosystem.tsx         | 31 +++++++++++++------
 .../SolutionsShowcase/SolutionsShowcase.tsx   |  4 +++
 .../organisms/StartInfo/StartInfo.tsx         |  4 +++
 .../ApiDataListTemplate.tsx                   |  4 +++
 7 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/giant-icons-kick.md
 create mode 100644 .changeset/three-walls-kick.md

diff --git a/.changeset/giant-icons-kick.md b/.changeset/giant-icons-kick.md
new file mode 100644
index 000000000..6ba7dd635
--- /dev/null
+++ b/.changeset/giant-icons-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Add padding and margin to mobile version in ecosystem cards
diff --git a/.changeset/three-walls-kick.md b/.changeset/three-walls-kick.md
new file mode 100644
index 000000000..d68bb7e0f
--- /dev/null
+++ b/.changeset/three-walls-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix ecosystem and card grid for correct card box shadows
diff --git a/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx b/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx
index c25d9a4d9..107b7c214 100644
--- a/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx
+++ b/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx
@@ -53,8 +53,8 @@ export const TabComponent: FC<TabsProps> = ({
     <>
       <Box
         sx={{
-          borderBottom: 2,
-          borderColor: 'divider',
+          display: 'flex',
+          justifyContent: 'space-around',
           marginBottom: 6,
           position: 'relative',
           top: '2px',
@@ -67,10 +67,23 @@ export const TabComponent: FC<TabsProps> = ({
           onChange={(event, newValue: number) => {
             setCurrentTab(newValue);
           }}
-          sx={{ position: 'relative', top: '2px' }}
+          sx={{
+            flexGrow: '1',
+            position: 'relative',
+            top: '2px',
+            maxWidth: '1200px',
+          }}
         >
           {items.map((item, index) => (
-            <Tab key={index} label={item.title} />
+            <Tab
+              key={index}
+              label={item.title}
+              sx={{
+                maxWidth: '600px',
+                borderBottom: 2,
+                borderColor: 'divider',
+              }}
+            />
           ))}
         </Tabs>
       </Box>
diff --git a/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx b/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx
index f1059af2c..bd04ab5e6 100644
--- a/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx
+++ b/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx
@@ -1,11 +1,12 @@
 'use client';
 import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import TabComponent from '@/components/atoms/TabComponent/TabComponent';
 import CardsGrid from '@/components/molecules/CardsGrid/CardsGrid';
 import { ButtonNaked } from '@pagopa/mui-italia';
 import Link from 'next/link';
 import { HomepageProps } from '@/app/page';
+import SectionTitle from '@/components/molecules/SectionTitle/SectionTitle';
 
 const Ecosystem = ({
   title,
@@ -18,12 +19,14 @@ const Ecosystem = ({
   const theme = useTheme();
   return (
     <Box pt={10} pb={0} sx={{ backgroundColor: theme.palette.grey[50] }}>
-      <Box sx={{ maxWidth: '1200px', margin: 'auto' }}>
-        {title && (
-          <Typography variant='h4' sx={{ mb: 4, width: '100%' }}>
-            {title}
-          </Typography>
-        )}
+      {title && <SectionTitle margin={'0 0 1.75rem 0'} title={title} />}
+      <Box
+        sx={{
+          maxWidth: '1264px',
+          margin: 'auto',
+          paddingX: 4,
+        }}
+      >
         <TabComponent
           items={[
             {
@@ -32,7 +35,12 @@ const Ecosystem = ({
                 <CardsGrid
                   ctaButtonsVariant={'contained'}
                   cards={products}
-                  containerSx={{ px: 0, pb: '22px' }}
+                  containerSx={{
+                    px: '22px',
+                    py: '22px',
+                    mt: '-22px',
+                    mx: '-22px',
+                  }}
                 />
               ),
             },
@@ -44,7 +52,12 @@ const Ecosystem = ({
                     <CardsGrid
                       ctaButtonsVariant={'contained'}
                       cards={solutions}
-                      containerSx={{ px: 0, pb: '22px' }}
+                      containerSx={{
+                        px: '22px',
+                        py: '22px',
+                        mt: '-22px',
+                        mx: '-22px',
+                      }}
                     />
                   )}
                   {solutionsCta && (
diff --git a/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx b/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx
index 29b053a44..66349830a 100644
--- a/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx
+++ b/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx
@@ -33,6 +33,10 @@ const SolutionsShowcase = ({
           tags: card.tags,
           useSrc: true,
         }))}
+        containerSx={{
+          pt: '22px',
+          mt: '-22px',
+        }}
       />
     </Box>
   );
diff --git a/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx b/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx
index a39d08bf1..ab403c296 100644
--- a/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx
+++ b/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx
@@ -54,6 +54,10 @@ const StartInfo = ({
             iconColor: card.iconColor,
             useSrc: card.useSrc,
           }))}
+          containerSx={{
+            pt: '22px',
+            mt: '-22px',
+          }}
         />
       </Box>
       {cta && (
diff --git a/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx b/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx
index a78da1820..806b53096 100644
--- a/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx
+++ b/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx
@@ -64,6 +64,10 @@ const ApiDataListTemplate = ({
             ctaLabel: t('apiDataListPage.explore'),
           }))}
           cardSize={{ xs: 12, md: 4 }}
+          containerSx={{
+            pt: '22px',
+            mt: '-22px',
+          }}
         />
       </Box>
       <BannerLinks bannerLinks={bannerLinks} />