From a9557ddedf1e392cf77a156c6d96f8b89a1ea35e Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 13:57:56 -0600 Subject: [PATCH] Rule Stack Start --- app/components/RuleCard.js | 40 +++++++++++++++ app/components/RuleStack.js | 75 +++++++++++++++++++++++++++++ app/components/SectionHeader.js | 18 +++++-- app/globals.css | 5 ++ app/layout.js | 14 ++++-- app/page.js | 2 + public/assets/Icon_Consensus.svg | 10 ++++ public/assets/Icon_ElectedBoard.svg | 9 ++++ public/assets/Icon_Petition.svg | 13 +++++ public/assets/Icon_Sociocracy.svg | 3 ++ 10 files changed, 183 insertions(+), 6 deletions(-) create mode 100644 app/components/RuleCard.js create mode 100644 app/components/RuleStack.js create mode 100644 public/assets/Icon_Consensus.svg create mode 100644 public/assets/Icon_ElectedBoard.svg create mode 100644 public/assets/Icon_Petition.svg create mode 100644 public/assets/Icon_Sociocracy.svg diff --git a/app/components/RuleCard.js b/app/components/RuleCard.js new file mode 100644 index 0000000..aaa94f4 --- /dev/null +++ b/app/components/RuleCard.js @@ -0,0 +1,40 @@ +"use client"; + +const RuleCard = ({ + title, + description, + icon, + backgroundColor = "bg-[var(--color-community-teal-100)]", + className = "", +}) => { + return ( +
+ {/* Header Container */} +
+ {/* Icon Container */} + {icon && ( +
+ {icon} +
+ )} + {/* Title Container */} + {title && ( +
+

+ {title} +

+
+ )} +
+ {description && ( +

+ {description} +

+ )} +
+ ); +}; + +export default RuleCard; diff --git a/app/components/RuleStack.js b/app/components/RuleStack.js new file mode 100644 index 0000000..a6d67d6 --- /dev/null +++ b/app/components/RuleStack.js @@ -0,0 +1,75 @@ +"use client"; + +import SectionHeader from "./SectionHeader"; +import RuleCard from "./RuleCard"; +import Image from "next/image"; + +const RuleStack = ({ children, className = "" }) => { + return ( +
+ +
+ + } + backgroundColor="bg-[var(--color-community-kiwi-200)]" + /> + + } + backgroundColor="bg-[var(--color-community-red-200)]" + /> + + } + backgroundColor="bg-[var(--color-surface-default-brand-accent)]" + /> + + } + backgroundColor="bg-[var(--color-community-blue-300)]" + /> +
+
+ ); +}; + +export default RuleStack; diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js index e6dfe6c..0009f7d 100644 --- a/app/components/SectionHeader.js +++ b/app/components/SectionHeader.js @@ -1,11 +1,17 @@ "use client"; -const SectionHeader = ({ title, subtitle, titleLg }) => { +const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => { return (
{/* Title Container - Left side (lg breakpoint) */}
-

+

{title} {titleLg || title}

@@ -13,7 +19,13 @@ const SectionHeader = ({ title, subtitle, titleLg }) => { {/* Subtitle Container */}
-

+

{subtitle}

diff --git a/app/globals.css b/app/globals.css index bdc4871..a8c908b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -12,6 +12,11 @@ -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } +.font-space-grotesk { + font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; +} + /* Set default body text face */ html, body { diff --git a/app/layout.js b/app/layout.js index 18e97dc..34589a7 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,4 +1,4 @@ -import { Inter, Bricolage_Grotesque } from "next/font/google"; +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; import "./globals.css"; import HomeHeader from "./components/HomeHeader"; import Footer from "./components/Footer"; @@ -11,14 +11,22 @@ const inter = Inter({ const bricolageGrotesque = Bricolage_Grotesque({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "700"], variable: "--font-bricolage-grotesque", }); +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", +}); + export default function RootLayout({ children }) { return ( - +
{children}
diff --git a/app/page.js b/app/page.js index 5e07816..e6a48ad 100644 --- a/app/page.js +++ b/app/page.js @@ -1,6 +1,7 @@ import NumberedCards from "./components/NumberedCards"; import HeroBanner from "./components/HeroBanner"; import LogoWall from "./components/LogoWall"; +import RuleStack from "./components/RuleStack"; export default function Page() { const heroBannerData = { @@ -39,6 +40,7 @@ export default function Page() { +
); } diff --git a/public/assets/Icon_Consensus.svg b/public/assets/Icon_Consensus.svg new file mode 100644 index 0000000..0bcac3e --- /dev/null +++ b/public/assets/Icon_Consensus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/Icon_ElectedBoard.svg b/public/assets/Icon_ElectedBoard.svg new file mode 100644 index 0000000..1e4405c --- /dev/null +++ b/public/assets/Icon_ElectedBoard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/Icon_Petition.svg b/public/assets/Icon_Petition.svg new file mode 100644 index 0000000..ba2d443 --- /dev/null +++ b/public/assets/Icon_Petition.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/Icon_Sociocracy.svg b/public/assets/Icon_Sociocracy.svg new file mode 100644 index 0000000..85fc35f --- /dev/null +++ b/public/assets/Icon_Sociocracy.svg @@ -0,0 +1,3 @@ + + +