Default NumberedCards size implemented

2025-08-15 18:10:59 -06:00
parent 9952247e3e
commit a6add70067
8 changed files with 144 additions and 1 deletions
@@ -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;
@@ -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;
@@ -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;
@@ -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;