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,82 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
+import FeatureGridView from "./FeatureGrid.view";
+import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
+
+const FeatureGridContainer = memo<FeatureGridProps>(
+  ({ title, subtitle, className = "" }) => {
+    const t = useTranslation();
+
+    const features: Feature[] = useMemo(
+      () => [
+        {
+          backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
+          labelLine1: t(
+            "pages.home.featureGrid.features.decisionMaking.labelLine1",
+          ),
+          labelLine2: t(
+            "pages.home.featureGrid.features.decisionMaking.labelLine2",
+          ),
+          panelContent: "/assets/Feature_Support.png",
+          ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"),
+          href: "#decision-making",
+        },
+        {
+          backgroundColor: "bg-[#D1FFE2]",
+          labelLine1: t(
+            "pages.home.featureGrid.features.valuesAlignment.labelLine1",
+          ),
+          labelLine2: t(
+            "pages.home.featureGrid.features.valuesAlignment.labelLine2",
+          ),
+          panelContent: "/assets/Feature_Exercises.png",
+          ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"),
+          href: "#values-alignment",
+        },
+        {
+          backgroundColor: "bg-[#F4CAFF]",
+          labelLine1: t(
+            "pages.home.featureGrid.features.membershipGuidance.labelLine1",
+          ),
+          labelLine2: t(
+            "pages.home.featureGrid.features.membershipGuidance.labelLine2",
+          ),
+          panelContent: "/assets/Feature_Guidance.png",
+          ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"),
+          href: "#membership-guidance",
+        },
+        {
+          backgroundColor: "bg-[#CBDDFF]",
+          labelLine1: t(
+            "pages.home.featureGrid.features.conflictResolution.labelLine1",
+          ),
+          labelLine2: t(
+            "pages.home.featureGrid.features.conflictResolution.labelLine2",
+          ),
+          panelContent: "/assets/Feature_Tools.png",
+          ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"),
+          href: "#conflict-resolution",
+        },
+      ],
+      [t],
+    );
+
+    const labelledBy = title ? "feature-grid-headline" : undefined;
+
+    return (
+      <FeatureGridView
+        title={title}
+        subtitle={subtitle}
+        className={className}
+        features={features}
+        labelledBy={labelledBy}
+      />
+    );
+  },
+);
+
+FeatureGridContainer.displayName = "FeatureGrid";
+
+export default FeatureGridContainer;
@@ -0,0 +1,19 @@
+export interface FeatureGridProps {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+export interface Feature {
+  backgroundColor: string;
+  labelLine1: string;
+  labelLine2: string;
+  panelContent: string;
+  ariaLabel: string;
+  href: string;
+}
+
+export interface FeatureGridViewProps extends FeatureGridProps {
+  features: Feature[];
+  labelledBy?: string;
+}
@@ -0,0 +1,60 @@
+"use client";
+
+import { useTranslation } from "../../../contexts/MessagesContext";
+import ContentLockup from "../../type/ContentLockup";
+import MiniCard from "../../MiniCard";
+import type { FeatureGridViewProps } from "./FeatureGrid.types";
+
+function FeatureGridView({
+  title,
+  subtitle,
+  className = "",
+  features,
+  labelledBy,
+}: FeatureGridViewProps) {
+  const t = useTranslation();
+  const ariaLabel = t("featureGrid.ariaLabel");
+  const linkText = t("featureGrid.linkText");
+  const linkHref = t("featureGrid.linkHref");
+
+  return (
+    <section
+      className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : ariaLabel}
+    >
+      <div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
+        <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
+          {/* Feature Content Lockup */}
+          <div className="lg:shrink lg:min-w-0">
+            <ContentLockup
+              title={title}
+              subtitle={subtitle}
+              variant="feature"
+              linkText={linkText}
+              linkHref={linkHref}
+              titleId={labelledBy}
+            />
+          </div>
+
+          {/* MiniCard Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
+            {features.map((feature, index) => (
+              <MiniCard
+                key={index}
+                backgroundColor={feature.backgroundColor}
+                labelLine1={feature.labelLine1}
+                labelLine2={feature.labelLine2}
+                panelContent={feature.panelContent}
+                ariaLabel={feature.ariaLabel}
+                href={feature.href}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default FeatureGridView;
@@ -0,0 +1,2 @@
+export { default } from "./FeatureGrid.container";
+export * from "./FeatureGrid.types";