Merge pull request #45 from BreadchainCoop/sb-44

Add new projects to landing page

apps/website/astro.config.mjs

@@ -1,9 +1,9 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react(), tailwind()]
-});
+  integrations: [react(), tailwind()],
+});

apps/website/package.json

@@ -21,6 +21,7 @@
     "@types/react-dom": "^18.3.0",
     "astro": "^4.9.2",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.3",

apps/website/src/components/Icons/LinkIcon.tsx

@@ -0,0 +1,17 @@
+export function LinkIcon() {
+  return (
+    <div className="rounded-full w-5 h-5">
+      <svg
+        className="w-full h-full fill-current"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 5.33333V1.33333V0H10.6667H6.66667V1.33333H9.33333V2.66667H8V4H6.66667V5.33333H5.33333V6.66667H4V8H5.33333V6.66667H6.66667V5.33333H8V4H9.33333V2.66667H10.6667V5.33333H12ZM5.33333 1.33333H1.33333H0V2.66667V10.6667V12H1.33333H9.33333H10.6667V10.6667V6.66667H9.33333V10.6667H1.33333V2.66667H5.33333V1.33333Z"
+        />
+      </svg>
+    </div>
+  );
+}

apps/website/src/components/Icons/index.ts

@@ -5,3 +5,4 @@ export * from "./Message";
 export * from "./Eye";
 export * from "./Reload";
 export * from "./VerticalArrows";
+export * from "./LinkIcon";

apps/website/src/components/MembersSection.tsx

@@ -1,48 +1,100 @@
 import clsx from "clsx";
 import { WRAPPER_CLASSES } from "../utils";
 import { TertiaryButtonLink } from "./TertiaryButtonLink";
+import React, { useCallback, useState, useEffect } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { LinkIcon } from "./Icons/LinkIcon";
 
 import { memberProjects } from "@breadchain.xyz/shared";
 
-const { cca, laborDao, symbiota } = memberProjects;
+const { cca, laborDao, symbiota, citizenWallet, refiDao } = memberProjects;
 
 const homepageProjects = [
-  { ...cca, bannerSrc: "cca_banner.png" },
   { ...laborDao, bannerSrc: "labordao_banner.png" },
+  { ...cca, bannerSrc: "cca_banner.png" },
   { ...symbiota, bannerSrc: "symbiota_banner.png" },
+  { ...citizenWallet, bannerSrc: "citizen_wallet.png" },
+  { ...refiDao, bannerSrc: "refi_dao.png" },
 ];
 
+const navBtnClasses =
+  "opacity-0 md:opacity-100 h-[100px] rounded-xl px-4 border dark:border-breadgray-rye border-breadgray-grey disabled:border-breadgray-rye md:disabled:opacity-30 enabled:hover:border-none enabled:hover:dark:bg-breadpink-600 enabled:hover:bg-breadpink-200 mx-auto";
+
 export function MembersSection() {
+  const [prevIsActive, setPrevIsActive] = useState(false);
+  const [nextIsActive, setNextIsActive] = useState(true);
+  const [emblaRef, emblaApi] = useEmblaCarousel({});
+
+  const scrollPrev = () => {
+    if (emblaApi) {
+      emblaApi.scrollPrev();
+      setPrevIsActive(emblaApi.canScrollPrev());
+      setNextIsActive(emblaApi.canScrollNext());
+    }
+  };
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollNext();
+      setPrevIsActive(emblaApi.canScrollPrev());
+      setNextIsActive(emblaApi.canScrollNext());
+    }
+  }, [emblaApi]);
+
   return (
-    <section
-      id="projects"
-      className={clsx(WRAPPER_CLASSES, "relative pb-64 sm:pb-[22rem]")}
-    >
-      <div className="m-auto flex max-w-sm flex-col gap-4 justify-self-start md:max-w-full">
-        <h2 className="font-redhat m-auto flex w-full max-w-sm flex-col text-left text-5xl font-bold sm:max-w-full md:flex-row md:gap-4">
-          <span>Co-operative</span>
-          <span className="font-normal">by design</span>
-        </h2>
-        <div className="w-full">
-          Learn more about the project you would support.
+    <section id="values" className="sm:pb-42 pb-32 pt-20">
+      <div className="flex flex-col gap-4 px-4 pb-16 sm:items-center sm:text-left">
+        <div className="m-auto flex max-w-sm flex-col items-start gap-4 sm:max-w-full">
+          <h2 className="font-redhat flex w-full max-w-sm flex-col gap-3 text-left text-4xl font-bold sm:max-w-full sm:text-5xl md:flex-row md:gap-0">
+            <span className="inline-block pr-2 font-normal">Co-operative</span>
+            <span>by design</span>
+          </h2>
+          <div className="w-full">
+            Learn more about the people we get baked with.
+          </div>
         </div>
       </div>
-      <div className="grid grid-cols-3 place-items-start gap-24 pt-16 md:gap-12">
-        {homepageProjects.map(
-          ({ name, description, homepage, bannerSrc }, i) => {
-            return (
-              <MemberCard
-                key={`membercard_${i}`}
-                name={name}
-                info={description}
-                bannerSrc={bannerSrc}
-                link={homepage}
-              />
-            );
-          }
-        )}
+
+      <div className="embla grid grid-cols-9 items-center mx-auto">
+        <button
+          disabled={!prevIsActive}
+          className={clsx(navBtnClasses, "embla__prev")}
+          onClick={scrollPrev}
+        >
+          <PrevButton isActive={prevIsActive} />
+        </button>
+        <div
+          className="embla__viewport col-span-7 overflow-x-hidden"
+          ref={emblaRef}
+        >
+          <div className="embla__container items-stretch gap-6 flex">
+            {homepageProjects.map(
+              ({ name, description, homepage, bannerSrc }, i) => {
+                return (
+                  <div
+                    key={`membercard_${i}`}
+                    className="embla__slide flex-[0_0_87%] md:flex-[0_0_30%] min-w-0"
+                  >
+                    <MemberCard
+                      name={name}
+                      info={description}
+                      bannerSrc={bannerSrc}
+                      link={homepage}
+                    />
+                  </div>
+                );
+              }
+            )}
+          </div>
+        </div>
+        <button
+          disabled={!nextIsActive}
+          className={clsx(navBtnClasses, "embla__next")}
+          onClick={scrollNext}
+        >
+          <NextButton isActive={nextIsActive} />
+        </button>
       </div>
-      <MembersBackgroundGraphic />
     </section>
   );
 }
@@ -59,19 +111,67 @@ export function MemberCard({
   bannerSrc: string;
 }) {
   return (
-    <article className="col-span-3 m-auto flex h-full max-w-sm flex-col md:col-span-1">
+    <article className="col-span-3 flex h-full max-w-sm flex-col md:col-span-1">
       <img className="w-full" src={bannerSrc} alt="" />
-      <div className="flex grow flex-col gap-2 p-8 pb-12">
+      <div className="flex grow flex-col gap-2 py-2">
         <h3 className="font-redhat text-2xl font-medium">{name}</h3>
-        <p>{info}</p>
+        <p className="">{info}</p>
+      </div>
+      <div>
+        <TertiaryButtonLink href={link} isExternal>
+          <div className="flex items-center gap-2">
+            Learn More <LinkIcon />
+          </div>
+        </TertiaryButtonLink>
       </div>
-      <TertiaryButtonLink href={link} isExternal>
-        Learn More
-      </TertiaryButtonLink>
     </article>
   );
 }
 
+export function NextButton({ isActive }: { isActive: boolean | undefined }) {
+  return (
+    <svg
+      width="16"
+      height="28"
+      viewBox="0 0 16 28"
+      className={clsx(
+        "fill-current dark:text-breadgray-ultra-white",
+        isActive && "text-breadviolet-violet",
+        !isActive && "text-breadgray-grey"
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 0L1.74846e-07 4L4 4L4 -1.74846e-07L0 0ZM8 8L8 4L4 4L4 8L8 8ZM12 12L12 8L8 8L8 12L12 12ZM12 16L16 16L16 12L12 12L12 16ZM8 20L8 16L12 16L12 20L8 20ZM4 24L8 24L8 20L4 20L4 24ZM4 24L1.04907e-06 24L1.22392e-06 28L4 28L4 24Z"
+      />
+    </svg>
+  );
+}
+
+export function PrevButton({ isActive }: { isActive: boolean | undefined }) {
+  return (
+    <svg
+      width="16"
+      height="28"
+      viewBox="0 0 16 28"
+      className={clsx(
+        "fill-current dark:text-breadgray-ultra-white",
+        isActive && "text-breadviolet-violet",
+        !isActive && "text-breadgray-grey"
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 28L16 24L12 24L12 28L16 28ZM8 20L8 24L12 24L12 20L8 20ZM4 16L4 20L8 20L8 16L4 16ZM4 12L2.54292e-07 12L4.29134e-07 16L4 16L4 12ZM8 8L8 12L4 12L4 8L8 8ZM12 4L8 4L8 8L12 8L12 4ZM12 4L16 4L16 0L12 1.74845e-07L12 4Z"
+      />
+    </svg>
+  );
+}
+
 export function MembersBackgroundGraphic() {
   return (
     <div className="absolute bottom-0 left-0 right-0 -z-20 flex justify-center">

apps/website/src/components/TertiaryButtonLink.tsx

@@ -10,7 +10,7 @@ export function TertiaryButtonLink({
   isExternal?: boolean;
 }) {
   const classes =
-    "rounded-lg inline-block dark:bg-breadgray-600 dark:text-white border-2 border-breadpink-300 font-redhat font-bold text-center px-4 py-2.5 md:px-6 md:py-3 md:text-xl";
+    "flex justify-center items-center rounded-lg inline-block bg-breadpink-200 dark:bg-breadpink-600 text-breadviolet-violet dark:text-breadpink-shaded border border-transparent hover:border-breadpink-300 font-redhat font-bold text-center px-4 py-2.5 md:px-6 md:py-3 md:text-xl";
 
   if (isExternal)
     return (

apps/website/src/pages/index.astro

@@ -10,7 +10,7 @@ import Layout from "../layouts/Layout.astro";
 <Layout title="Breadchain Cooperative.">
   <Hero />
   <InfoCards />
-  <MembersSection />
+  <MembersSection client:load />
   <ValuesSection />
   <CTASection />
 </Layout>

packages/shared/data/projects.ts

@@ -2,6 +2,8 @@ export type MemberProjectKeys =
   | "cca"
   | "laborDao"
   | "symbiota"
+  | "citizenWallet"
+  | "refiDao"
   | "breadchainCore"
   | "breadchainTreasury";
 
@@ -36,6 +38,20 @@ export const memberProjects: {
     description:
       "A collective of event-focused organisations devoted to new forms of culture and enquiry, structured as a not-for-profit worker co-operative.",
   },
+  citizenWallet: {
+    name: "Citizen Wallet",
+    account: "0x9c8C8513974d22E8eA9F74f2860833Db107111E6",
+    homepage: "https://citizenwallet.xyz/",
+    description:
+      "Citizen Wallet provides tools for communities to manage local currencies. We focus on simplicity, seamless onboarding, and accessibility—even for those without phones or apps.",
+  },
+  refiDao: {
+    name: "ReFi DAO",
+    account: "0x68060388C7D97B4bF779a2Ead46c86e5588F073f",
+    homepage: "https://www.refidao.com/",
+    description:
+      "A global network driving the Regenerative Finance (ReFi) movement, leveraging Web3 to regenerate ecosystems and foster economic systems that prioritize ecological and social well-being.",
+  },
   breadchainCore: {
     name: "Breadchain Core",
     account: "0xbDA5747bFD65F08deb54cb465eB87D40e51B197E",

packages/theme/index.js

@@ -29,10 +29,11 @@ module.exports = {
       pink: "#FF99E2",
       shaded: "#E873D3",
       100: "#C463CA",
-      200: "#FF99E2",
+      200: "#FFCCF1",
       300: "#E873D3",
       400: "#A416AD",
       500: "#D04EC5",
+      600: "#402639",
     },
     breadviolet: {
       shaded: "#D04EC5",