Start organizational migration

2026-02-05 18:21:56 -07:00
parent 69074b23f3
commit db3c0274f6
161 changed files with 145 additions and 145 deletions
@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import { useSchemaData } from "../../../hooks";
+import NumberedCardsView from "./NumberedCards.view";
+import type { NumberedCardsProps } from "./NumberedCards.types";
+
+const NumberedCardsContainer = memo<NumberedCardsProps>(
+  ({ title, subtitle, cards }) => {
+    const schemaData = useSchemaData({
+      type: "HowTo",
+      name: title,
+      description: subtitle,
+      steps: cards.map((card) => ({
+        name: card.text,
+        text: card.text,
+      })),
+    });
+
+    const schemaJson = JSON.stringify(schemaData);
+
+    return (
+      <NumberedCardsView
+        title={title}
+        subtitle={subtitle}
+        cards={cards}
+        schemaJson={schemaJson}
+      />
+    );
+  },
+);
+
+NumberedCardsContainer.displayName = "NumberedCards";
+
+export default NumberedCardsContainer;
@@ -0,0 +1,15 @@
+export interface Card {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+export interface NumberedCardsProps {
+  title: string;
+  subtitle: string;
+  cards: Card[];
+}
+
+export interface NumberedCardsViewProps extends NumberedCardsProps {
+  schemaJson: string;
+}
@@ -0,0 +1,70 @@
+"use client";
+
+import { useTranslation } from "../../../contexts/MessagesContext";
+import SectionHeader from "../SectionHeader";
+import NumberCard from "../../cards/NumberCard";
+import Button from "../../buttons/Button";
+import type { NumberedCardsViewProps } from "./NumberedCards.types";
+
+function NumberedCardsView({
+  title,
+  subtitle,
+  cards,
+  schemaJson,
+}: NumberedCardsViewProps) {
+  const t = useTranslation();
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: schemaJson }}
+      />
+      <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
+        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+          <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
+            {/* Section Header */}
+            <div>
+              <SectionHeader
+                title={title}
+                subtitle={subtitle}
+                titleLg={t("numberedCards.titleLg")}
+              />
+            </div>
+
+            {/* Cards Container */}
+            <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
+              {cards.map((card, index) => (
+                <NumberCard
+                  key={index}
+                  number={index + 1}
+                  text={card.text}
+                  iconShape={card.iconShape}
+                  iconColor={card.iconColor}
+                />
+              ))}
+            </div>
+
+            {/* Call to Action Button */}
+            <div className="text-center sm:text-left lg:text-center">
+              {/* Filled button for xsm and sm breakpoints */}
+              <div className="block lg:hidden">
+                <Button variant="filled" size="large">
+                  {t("numberedCards.buttons.createCommunityRule")}
+                </Button>
+              </div>
+              {/* Outline button for lg and xlg breakpoints */}
+              <div className="hidden lg:block">
+                <Button variant="outline" size="large">
+                  {t("numberedCards.buttons.seeHowItWorks")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default NumberedCardsView;
@@ -0,0 +1,2 @@
+export { default } from "./NumberedCards.container";
+export * from "./NumberedCards.types";