style: apply prettier formatting

app/components/BlogCard.tsx

@@ -18,7 +18,7 @@ export default function BlogCard({ article, compact }: BlogCardProps) {
       )}
     >
       <div className="min-w-0 flex-1">
-        <h3 className="font-serif text-lg font-bold transition-transform group-hover:translate-x-1">
+        <h3 className="font-serif text-base font-bold transition-transform group-hover:translate-x-1 md:text-lg">
           {title}
         </h3>
         <p className="pt-1 text-sm text-zinc-400">

app/components/BlogPreview.tsx

@@ -16,7 +16,7 @@ export default async function BlogPreview() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -right-32 animate-grow-and-shrink"
+          className="absolute -top-12 -right-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos derniers articles

app/components/Cover.tsx

@@ -38,7 +38,7 @@ export default function Cover() {
           </div>
         </div>
         <div className="flex flex-[4_4_0%] justify-center">
-          <div className="w-5/6 sm:max-md:h-72 max-sm:h-64 md:pb-32">
+          <div className="h-64 w-5/6 sm:h-72 md:h-auto md:pb-32">
             <Animation src="animations/laughing-smile.riv" />
           </div>
         </div>

app/components/CoverBackground.tsx

@@ -18,15 +18,15 @@ export default function CoverBackground({ children }: CoverBackgroundProps) {
       }}
     >
       <div
-        className="absolute inset-y-0 right-0 -left-32 -z-10"
+        className="absolute inset-y-0 right-0 left-0 -z-10 md:-left-32"
         style={{
           background:
             "linear-gradient(90deg, #f9fafb1a 1%, transparent 1%) 1px 0, transparent",
           backgroundSize: "200px 1px",
         }}
       />
       <div
-        className="absolute right-0 bottom-0 -top-32 -left-[126px] -z-10"
+        className="absolute right-0 bottom-0 top-0 left-0 -z-10 md:-top-32 md:-left-[126px]"
         style={{
           opacity: 0.1,
           background:

app/components/NotionRenderer.tsx

@@ -118,9 +118,9 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
     case "heading_2":
     case "heading_3": {
       const config = {
-        heading_1: { tag: "h2" as const, size: "text-2xl" },
-        heading_2: { tag: "h3" as const, size: "text-xl" },
-        heading_3: { tag: "h4" as const, size: "text-lg" },
+        heading_1: { tag: "h2" as const, size: "text-xl md:text-2xl" },
+        heading_2: { tag: "h3" as const, size: "text-lg md:text-xl" },
+        heading_3: { tag: "h4" as const, size: "text-base md:text-lg" },
       }[block.type];
       const richText = getBlockRichText(block);
       if (!richText) return null;
@@ -140,7 +140,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
               {block.code.language}
             </span>
           )}
-          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4">
+          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-2 md:p-4">
             <code className="text-sm text-zinc-100">
               {extractPlainText(block.code.rich_text)}
             </code>
@@ -185,7 +185,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
                 ? extractPlainText(block.image.caption)
                 : ""
             }
-            className="rounded-lg"
+            className="max-w-full rounded-lg"
           />
           {block.image.caption.length > 0 && (
             <figcaption className="pt-2 text-center text-sm text-zinc-500">

app/components/Portfolio.tsx

@@ -19,7 +19,7 @@ export default function Portfolio() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -left-32 animate-grow-and-shrink"
+          className="absolute -top-12 -left-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos dernières victoires

app/components/Stack.tsx

@@ -57,8 +57,8 @@ export default function Stack() {
         De Rails à l'IA, on maîtrise la stack qu'il vous
         faut.
       </p>
-      <div className="my-16 grid grid-cols-1 gap-8 md:max-xl:mx-8 xl:grid-cols-[13fr_7fr]">
-        <div className="px-10 pt-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+      <div className="my-16 grid grid-cols-1 gap-8 md:mx-8 md:grid-cols-[13fr_7fr] xl:mx-0">
+        <div className="px-4 pt-10 md:rounded-3xl md:border-[1px] md:border-black md:px-10 xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Notre arsenal favori
@@ -120,7 +120,7 @@ export default function Stack() {
             </StackGroup>
           </div>
         </div>
-        <div className="p-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+        <div className="p-4 md:rounded-3xl md:border-[1px] md:border-black md:p-10 xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Intelligence Artificielle

app/components/Team.tsx

@@ -85,26 +85,26 @@ export default function Team() {
               src={patioNicolas}
               alt="Picture of Nicolas from above in a the patio with a laptop looking surprised"
               placeholder="blur"
-              className="border-8 border-white object-cover drop-shadow-lg"
-              width={470}
+              className="w-full border-8 border-white object-cover drop-shadow-lg"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
             <Image
               src={officeMehdiNicolas}
               alt="Picture of Mehdi and Nicolas looking at code on a laptop screen in an office"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
             <Image
               src={patioAlexisLili}
               alt="Picture of Alexis and Lili with a laptop smiling in the patio"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
         </div>

app/components/Values.tsx

@@ -40,7 +40,7 @@ export default function Values() {
         <Image
           src={underline}
           alt="Handrawing of a strike through to mimic an underline"
-          className="absolute -bottom-4"
+          className="absolute -bottom-4 max-md:hidden"
         />
         <h3 className="pb-6 font-serif text-4xl font-bold text-[#0074dd]">
           Nos plus-values

components/Disclosure.client.tsx

@@ -20,7 +20,7 @@ export default function CustomDisclosure({
     <Disclosure {...props}>
       {({ open }) => (
         <div className="mb-6 rounded-md border-[1px] border-black text-zinc-900">
-          <Disclosure.Button className="flex w-full justify-between rounded-md px-4 py-2 text-2xl font-bold">
+          <Disclosure.Button className="flex w-full justify-between rounded-md px-3 py-2 text-lg font-bold md:px-4 md:text-2xl">
             <span className="text-left">{title}</span>
             <ChevronUpIcon
               className={`${open ? "" : "rotate-180 transform"} h-8 w-8`}