feat: seal of reliability description page

messages/en.json

@@ -557,13 +557,18 @@
       "openSource": "An open source community actively working to improve the tools"
     }
   },
+  "sealOfReliability": {
+    "title": "Seal of Reliability",
+    "description": "The Seal of Reliability is an indicator of feed quality and consistency, helping you identify GTFS, GTFS Realtime, and GBFS feeds that are reliably maintained and up to date."
+  },
   "footer": {
     "tagline": "An open catalog of transit and mobility data feeds, serving the global transportation community.",
     "maintainedBy": "Maintained with 💙 by MobilityData",
     "copyright": "© {year} MobilityDatabase. All rights reserved.",
     "columns": {
       "platform": "Platform",
       "tools": "Tools",
+      "resources": "Resources",
       "company": "Company",
       "legal": "Legal"
     },
@@ -575,6 +580,7 @@
       "gtfsValidator": "GTFS Validator",
       "gtfsRtValidator": "GTFS-RT Validator",
       "gbfsValidator": "GBFS Validator",
+      "sealOfReliability": "Seal of Reliability",
       "about": "About",
       "faq": "FAQ",
       "contactUs": "Contact Us",

messages/fr.json

@@ -557,13 +557,18 @@
       "openSource": "Une communauté open source travaillant activement à améliorer les outils"
     }
   },
+  "sealOfReliability": {
+    "title": "Sceau de fiabilité",
+    "description": "Le Sceau de fiabilité est un indicateur de la qualité et de la cohérence des flux, qui vous aide à identifier les flux GTFS, GTFS Realtime et GBFS maintenus de manière fiable et à jour."
+  },
   "footer": {
     "tagline": "Le plus grand catalogue ouvert de flux de données de transit et de mobilité, au service de la communauté mondiale des transports.",
     "maintainedBy": "Maintenu avec 💙 par MobilityData",
     "copyright": "© {year} MobilityDatabase. Tous droits réservés.",
     "columns": {
       "platform": "Plateforme",
       "tools": "Outils",
+      "resources": "Ressources",
       "company": "Entreprise",
       "legal": "Légal"
     },
@@ -575,6 +580,7 @@
       "gtfsValidator": "Validateur GTFS",
       "gtfsRtValidator": "Validateur GTFS-RT",
       "gbfsValidator": "Validateur GBFS",
+      "sealOfReliability": "Sceau de fiabilité",
       "about": "À propos",
       "faq": "FAQ",
       "contactUs": "Contactez-nous",

src/app/Theme.ts

@@ -30,6 +30,12 @@ declare module '@mui/material/Typography' {
   }
 }
 
+declare module '@mui/material/Paper' {
+  interface PaperPropsVariantOverrides {
+    section: true;
+  }
+}
+
 export enum ThemeModeEnum {
   light = 'light',
   dark = 'dark',
@@ -246,6 +252,22 @@ export const theme = createTheme({
         }),
       },
     },
+    MuiCard: {
+      variants: [
+        {
+          props: { variant: 'section' },
+          style: ({ theme }) => ({
+            background: 'var(--mui-palette-background-default)',
+            border: 'none',
+            padding: theme.spacing(2),
+            marginBottom: theme.spacing(2),
+            '&:last-of-type': {
+              marginBottom: 0,
+            },
+          }),
+        },
+      ],
+    },
     MuiTypography: {
       variants: [
         {

src/app/[locale]/about/components/AboutPage.tsx

@@ -3,23 +3,15 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { type ReactElement } from 'react';
 import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
+import SectionContainer from '../../../components/SectionContainer';
 
 export default async function AboutPage(): Promise<ReactElement> {
   const t = await getTranslations('about');
 
   return (
     <Container component='main'>
       <Typography variant='h1'>{t('title')}</Typography>
-      <Container
-        sx={{
-          backgroundColor: 'background.paper',
-          borderRadius: '6px',
-          paddingTop: 3,
-          paddingBottom: 3,
-          mt: 3,
-        }}
-        maxWidth={false}
-      >
+      <SectionContainer sx={{ mt: 3 }} maxWidth={false}>
         <Typography sx={{ fontWeight: 700 }}>
           {t('description')}
           <br />
@@ -82,7 +74,7 @@ export default async function AboutPage(): Promise<ReactElement> {
             <li>{t('benefits.openSource')}</li>
           </ul>
         </Typography>
-      </Container>
+      </SectionContainer>
     </Container>
   );
 }

src/app/[locale]/contribute/FeedSubmission/FeedSubmission.tsx

@@ -15,7 +15,7 @@ import { selectIsAuthenticated } from '../../../store/profile-selectors';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import FeedSubmissionForm from './Form';
-import { ColoredContainer } from '../../../styles/PageLayout.style';
+import SectionContainer from '../../../components/SectionContainer';
 
 function Component(): React.ReactElement {
   const t = useTranslations('feeds');
@@ -57,7 +57,7 @@ function Component(): React.ReactElement {
               </Alert>
             )}
 
-            <ColoredContainer>
+            <SectionContainer>
               <Typography>
                 Do you have any questions about how to submit a feed?
                 <Button
@@ -86,7 +86,7 @@ function Component(): React.ReactElement {
                   GBFS systems catalog
                 </Button>
               </Typography>
-            </ColoredContainer>
+            </SectionContainer>
             <Container maxWidth='md'>
               <Typography variant='h1' sx={{ my: 3 }}>
                 Add or update a feed

src/app/[locale]/feeds/components/FeedsScreen.tsx

@@ -28,7 +28,7 @@ import {
   searchBarStyles,
   stickyHeaderStyles,
 } from '../../../screens/Feeds/Feeds.styles';
-import { ColoredContainer } from '../../../styles/PageLayout.style';
+import SectionContainer from '../../../components/SectionContainer';
 import AdvancedSearchTable from '../../../screens/Feeds/AdvancedSearchTable';
 import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
 import GridViewIcon from '@mui/icons-material/GridView';
@@ -269,7 +269,7 @@ export default function FeedsScreen(): React.ReactElement {
             </Button>
           </Container>
         </Box>
-        <ColoredContainer maxWidth={'xl'} sx={{ pt: 2 }}>
+        <SectionContainer maxWidth={'xl'} sx={{ pt: 2 }}>
           {isValidating && !isLoading && (
             <LinearProgress
               sx={{
@@ -654,7 +654,7 @@ export default function FeedsScreen(): React.ReactElement {
               )}
             </Grid>
           </Grid>
-        </ColoredContainer>
+        </SectionContainer>
       </Box>
     </Container>
   );