adilallo
ca928e306b
Drop Cookies Settings from the footer, link the Home features that already have pages, and give leftover routes their own descriptions.
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Figma: "Section / Feature-Grid" (18632:10668)
|
|
*/
|
|
|
|
import { memo, useMemo } from "react";
|
|
import { featureIconPath, getAssetPath } from "../../../../lib/assetUtils";
|
|
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-invert-brand-lavender)]",
|
|
title: t("pages.home.featureGrid.features.decisionMaking.title"),
|
|
description: t(
|
|
"pages.home.featureGrid.features.decisionMaking.description",
|
|
),
|
|
descriptionClassName: "text-[var(--color-content-invert-brand-lavender)]",
|
|
iconSrc: getAssetPath(featureIconPath("git-branch")),
|
|
},
|
|
{
|
|
backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]",
|
|
title: t("pages.home.featureGrid.features.valuesAlignment.title"),
|
|
description: t(
|
|
"pages.home.featureGrid.features.valuesAlignment.description",
|
|
),
|
|
descriptionClassName: "text-[var(--color-content-invert-brand-lime)]",
|
|
iconSrc: getAssetPath(featureIconPath("arrow-left-right")),
|
|
href: "/how-it-works",
|
|
},
|
|
{
|
|
backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]",
|
|
title: t("pages.home.featureGrid.features.membershipGuidance.title"),
|
|
description: t(
|
|
"pages.home.featureGrid.features.membershipGuidance.description",
|
|
),
|
|
descriptionClassName: "text-[var(--color-content-invert-brand-rust)]",
|
|
iconSrc: getAssetPath(featureIconPath("door-open")),
|
|
href: "/blog/integrating-new-members-without-dilution",
|
|
},
|
|
{
|
|
backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]",
|
|
title: t("pages.home.featureGrid.features.conflictResolution.title"),
|
|
description: t(
|
|
"pages.home.featureGrid.features.conflictResolution.description",
|
|
),
|
|
descriptionClassName: "text-[var(--color-content-invert-brand-teal)]",
|
|
iconSrc: getAssetPath(featureIconPath("message-square-share")),
|
|
},
|
|
],
|
|
[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;
|