diff --git a/app/components/LogoWall.js b/app/components/LogoWall.js index fe36a23..6f12645 100644 --- a/app/components/LogoWall.js +++ b/app/components/LogoWall.js @@ -1,33 +1,43 @@ "use client"; const LogoWall = ({ logos = [] }) => { - // Default logos if none provided - ordered to match the screenshot + // Default logos if none provided - ordered for mobile (3 rows × 2 columns) const defaultLogos = [ { src: "assets/Section/Logo_FoodNotBombs.png", alt: "Food Not Bombs", size: "h-11", + order: "order-1 sm:order-4", // Mobile: row 1 col 1, SM: row 2 col 1 (bottom left) }, { src: "assets/Section/Logo_StartCOOP.png", alt: "Start COOP", size: "h-11", + order: "order-2 sm:order-2", // Mobile: row 1 col 2, SM: row 1 col 2 (top middle) + }, + { + src: "assets/Section/Logo_Metagov.png", + alt: "Metagov", + size: "h-7", + order: "order-3 sm:order-1", // Mobile: row 2 col 1, SM: row 1 col 1 (top left) }, - { src: "assets/Section/Logo_Metagov.png", alt: "Metagov", size: "h-7" }, { src: "assets/Section/Logo_OpenCivics.png", alt: "Open Civics", - size: "h-7", + size: "h-8", + order: "order-4 sm:order-5", // Mobile: row 2 col 2, SM: row 2 col 2 (bottom middle) }, { src: "assets/Section/Logo_MutualAidCO.png", alt: "Mutual Aid CO", size: "h-11", + order: "order-5 sm:order-6", // Mobile: row 3 col 1, SM: row 2 col 3 (bottom right) }, { src: "assets/Section/Logo_CUBoulder.png", alt: "CU Boulder", size: "h-11", + order: "order-6 sm:order-3", // Mobile: row 3 col 2, SM: row 1 col 3 (top right) }, ]; @@ -43,9 +53,14 @@ const LogoWall = ({ logos = [] }) => { {/* Logo Grid Container */}
-
+
{displayLogos.map((logo, index) => ( -
+