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) => (
+
+

+
+ ))}
+
+
+
+
+ );
+};
+
+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: [],
+ },
+};