app/components/NumberedCard.js

@@ -0,0 +1,23 @@
+"use client";
+
+import SectionNumber from "./SectionNumber";
+
+const NumberedCard = ({ number, text, iconShape, iconColor }) => {
+  return (
+    <div className="bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4">
+      {/* Section Number - Top part */}
+      <div className="flex justify-end">
+        <SectionNumber number={number} />
+      </div>
+
+      {/* Card Content - Bottom part */}
+      <div>
+        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]">
+          {text}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberedCard;

app/components/NumberedCards.js

@@ -0,0 +1,40 @@
+"use client";
+
+import NumberedCard from "./NumberedCard";
+import SectionHeader from "./SectionHeader";
+import Button from "./Button";
+
+const NumberedCards = ({ title, subtitle, cards }) => {
+  return (
+    <section className="bg-transparent py-8 px-5">
+      <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+        {/* Section Header */}
+        <div className="mb-8">
+          <SectionHeader title={title} subtitle={subtitle} />
+        </div>
+
+        {/* Cards Container */}
+        <div className="space-y-8">
+          {cards.map((card, index) => (
+            <NumberedCard
+              key={index}
+              number={index + 1}
+              text={card.text}
+              iconShape={card.iconShape}
+              iconColor={card.iconColor}
+            />
+          ))}
+        </div>
+
+        {/* Call to Action Button */}
+        <div className="text-center mt-8">
+          <Button variant="default" size="large">
+            Create CommunityRule
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NumberedCards;

app/components/SectionHeader.js

@@ -0,0 +1,19 @@
+"use client";
+
+const SectionHeader = ({ title, subtitle }) => {
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      {/* Title - Bricolage Grotesque */}
+      <h2 className="font-bricolage-grotesque font-bold text-[28px] leading-[36px] text-[var(--color-content-default-primary)]">
+        {title}
+      </h2>
+
+      {/* Subtitle - Inter */}
+      <p className="font-inter font-normal text-[18px] leading-[130%] text-[#484848]">
+        {subtitle}
+      </p>
+    </div>
+  );
+};
+
+export default SectionHeader;

app/components/SectionNumber.js

@@ -0,0 +1,33 @@
+"use client";
+
+const SectionNumber = ({ number }) => {
+  const getImageSrc = (num) => {
+    switch (num) {
+      case 1:
+        return "/assets/SectionNumber_1.png";
+      case 2:
+        return "/assets/SectionNumber_2.png";
+      case 3:
+        return "/assets/SectionNumber_3.png";
+      default:
+        return "/assets/SectionNumber_1.png";
+    }
+  };
+
+  return (
+    <div className="relative size-[40px] overflow-visible -rotate-[15deg]">
+      <img
+        src={getImageSrc(number)}
+        alt={`Section ${number}`}
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"
+      />
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span className="text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]">
+          {number}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SectionNumber;

app/page.js

@@ -1,3 +1,31 @@
+import NumberedCards from "./components/NumberedCards";
+
 export default function Page() {
-  return <div>{/* home page content will go here */}</div>;
+  const numberedCardsData = {
+    title: "How CommunityRule works",
+    subtitle: "Here's a quick overview of the process, from start to finish.",
+    cards: [
+      {
+        text: "Document how your community makes decisions",
+        iconShape: "blob",
+        iconColor: "green",
+      },
+      {
+        text: "Build an operating manual for a successful community",
+        iconShape: "gear",
+        iconColor: "purple",
+      },
+      {
+        text: "Get a link to your manual for your group to review and evolve",
+        iconShape: "star",
+        iconColor: "orange",
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <NumberedCards {...numberedCardsData} />
+    </div>
+  );
 }