Fix RWD staff

opengento · Feb 1, 2025 · 42546a2 · 42546a2
1 parent abf7526
commit 42546a2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/public/locales/fr/staff.json b/public/locales/fr/staff.json
@@ -68,7 +68,7 @@
       "companyLogo": "/images/logo/opengento.svg",
       "companyUrl": "https://opengento.fr/",
       "linkedin": "https://www.linkedin.com/in/thomas-klein/",
-      "role": "Chargée de communication",
+      "role": "Secrétaire",
       "photo": "/images/staff/thomas_klein.jpeg",
       "biography": ""
     },

diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
@@ -68,7 +68,7 @@ export default function Page() {
           {t('staff:description')}
         </Typography>
       </ContentMedia>
-      <div className="grid grid-cols-3 gap-8 gap-y-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12">
         {staffMembers
           .map((staff) => (
             <div

diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx
@@ -29,31 +29,31 @@ const Person = ({ person }: { person: PersonProps }) => {
   return (
     <>
       {width < 768 ? (
-        <div className={classNames(
-          "flex flex-row gap-2 rounded-full",
-          bgClass
-        )}>
+        <div className="flex flex-row gap-2 rounded-full">
           <Image
             src={person.photo}
             alt={person.name}
             width={135}
             height={135}
-            className="min-w-[135px] rounded-full relative aspect-squareobject-cover overflow-hidden"
+            className={classNames(
+              "min-w-[135px] rounded-full relative aspect-squareobject-cover overflow-hidden",
+              bgClass
+            )}
           />
           <PersonCard person={person} />
         </div>
       ) : (
         <>
-          <div className={classNames(
-            "flex flex-col relative rounded-full",
-            bgClass
-          )}>
+          <div className="flex flex-col relative rounded-full">
             <Image
               src={person.photo}
               alt={person.name}
               width={165}
               height={165}
-              className="min-w-[165px] rounded-full relative aspect-square object-cover overflow-hidden"
+              className={classNames(
+                "min-w-[165px] rounded-full relative aspect-square object-cover overflow-hidden",
+                bgClass
+              )}
             />
             <div className="text-white font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
               <div className="flex flex-row items-center gap-1">