diff --git a/app/components/LogoWall.js b/app/components/LogoWall.js new file mode 100644 index 0000000..fe36a23 --- /dev/null +++ b/app/components/LogoWall.js @@ -0,0 +1,63 @@ +"use client"; + +const LogoWall = ({ logos = [] }) => { + // Default logos if none provided - ordered to match the screenshot + const defaultLogos = [ + { + src: "assets/Section/Logo_FoodNotBombs.png", + alt: "Food Not Bombs", + size: "h-11", + }, + { + src: "assets/Section/Logo_StartCOOP.png", + alt: "Start COOP", + size: "h-11", + }, + { src: "assets/Section/Logo_Metagov.png", alt: "Metagov", size: "h-7" }, + { + src: "assets/Section/Logo_OpenCivics.png", + alt: "Open Civics", + size: "h-7", + }, + { + src: "assets/Section/Logo_MutualAidCO.png", + alt: "Mutual Aid CO", + size: "h-11", + }, + { + src: "assets/Section/Logo_CUBoulder.png", + alt: "CU Boulder", + size: "h-11", + }, + ]; + + const displayLogos = logos.length > 0 ? logos : defaultLogos; + + return ( +
+
+ {/* Label */} +

+ Trusted by leading cooperators +

+ + {/* Logo Grid Container */} +
+
+ {displayLogos.map((logo, index) => ( +
+ {logo.alt} +
+ ))} +
+
+
+
+ ); +}; + +export default LogoWall; diff --git a/app/page.js b/app/page.js index 78c8ecb..5e07816 100644 --- a/app/page.js +++ b/app/page.js @@ -1,5 +1,6 @@ import NumberedCards from "./components/NumberedCards"; import HeroBanner from "./components/HeroBanner"; +import LogoWall from "./components/LogoWall"; export default function Page() { const heroBannerData = { @@ -36,6 +37,7 @@ export default function Page() { return (
+
); diff --git a/public/assets/Section/Logo_CUBoulder.png b/public/assets/Section/Logo_CUBoulder.png new file mode 100644 index 0000000..7802cbf Binary files /dev/null and b/public/assets/Section/Logo_CUBoulder.png differ diff --git a/public/assets/Section/Logo_FoodNotBombs.png b/public/assets/Section/Logo_FoodNotBombs.png new file mode 100644 index 0000000..b7e1369 Binary files /dev/null and b/public/assets/Section/Logo_FoodNotBombs.png differ diff --git a/public/assets/Section/Logo_Metagov.png b/public/assets/Section/Logo_Metagov.png new file mode 100644 index 0000000..f1e0816 Binary files /dev/null and b/public/assets/Section/Logo_Metagov.png differ diff --git a/public/assets/Section/Logo_MutualAidCO.png b/public/assets/Section/Logo_MutualAidCO.png new file mode 100644 index 0000000..43ec89e Binary files /dev/null and b/public/assets/Section/Logo_MutualAidCO.png differ diff --git a/public/assets/Section/Logo_OpenCivics.png b/public/assets/Section/Logo_OpenCivics.png new file mode 100644 index 0000000..7ac21a2 Binary files /dev/null and b/public/assets/Section/Logo_OpenCivics.png differ diff --git a/public/assets/Section/Logo_StartCOOP.png b/public/assets/Section/Logo_StartCOOP.png new file mode 100644 index 0000000..9e67a1a Binary files /dev/null and b/public/assets/Section/Logo_StartCOOP.png differ diff --git a/stories/LogoWall.stories.js b/stories/LogoWall.stories.js new file mode 100644 index 0000000..c5e5540 --- /dev/null +++ b/stories/LogoWall.stories.js @@ -0,0 +1,36 @@ +import LogoWall from "../app/components/LogoWall"; + +export default { + title: "Components/LogoWall", + component: LogoWall, + parameters: { + layout: "fullscreen", + }, + tags: ["autodocs"], + argTypes: { + logos: { + control: "object", + description: "Array of logo objects with src and alt properties", + }, + }, +}; + +export const Default = { + args: {}, +}; + +export const CustomLogos = { + args: { + logos: [ + { src: "assets/Section/Logo_CUBoulder.png", alt: "CU Boulder" }, + { src: "assets/Section/Logo_FoodNotBombs.png", alt: "Food Not Bombs" }, + { src: "assets/Section/Logo_Metagov.png", alt: "Metagov" }, + ], + }, +}; + +export const EmptyState = { + args: { + logos: [], + }, +};