CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix featured grid

Browse Source
This commit is contained in:
adilallo
2026-05-22 13:50:55 -06:00
parent 3dbb6b61d2
commit 5863a256f6
23 changed files with 243 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/cards/Mini/Mini.container.tsx
+8
View File
@@ -21,6 +21,10 @@ const MiniContainer = memo<MiniProps>(
onClick,
href,
ariaLabel,
featureGridShell = false,
panelWidth,
panelHeight,
panelImageClassName,
}) => {
const t = useTranslation("controlsChrome");
@@ -92,6 +96,10 @@ const MiniContainer = memo<MiniProps>(
computedAriaLabel={computedAriaLabel}
wrapperElement={wrapperElement}
wrapperProps={wrapperProps}
featureGridShell={featureGridShell}
panelWidth={panelWidth}
panelHeight={panelHeight}
panelImageClassName={panelImageClassName}
>
{children}
</MiniView>
app/components/cards/Mini/Mini.types.ts
+9
View File
@@ -9,6 +9,11 @@ export interface MiniProps {
onClick?: () => void;
href?: string;
ariaLabel?: string;
/** Figma Feature-Grid mini tile shell (18847:22410). */
featureGridShell?: boolean;
panelWidth?: number;
panelHeight?: number;
panelImageClassName?: string;
}
export interface MiniViewProps {
@@ -25,4 +30,8 @@ export interface MiniViewProps {
| React.AnchorHTMLAttributes<HTMLAnchorElement>
| React.ButtonHTMLAttributes<HTMLButtonElement>
| React.HTMLAttributes<HTMLDivElement>;
featureGridShell?: boolean;
panelWidth?: number;
panelHeight?: number;
panelImageClassName?: string;
}
app/components/cards/Mini/Mini.view.tsx
+36 -15
View File
@@ -2,6 +2,7 @@
import { memo } from "react";
import Image from "next/image";
import { SVG_GRAIN_MULTIPLY_FILTER } from "../../../../lib/svgGrainFilter";
import type { MiniViewProps } from "./Mini.types";
function MiniView({
@@ -15,39 +16,59 @@ function MiniView({
computedAriaLabel,
wrapperElement,
wrapperProps,
featureGridShell = false,
panelWidth,
panelHeight,
panelImageClassName,
}: MiniViewProps) {
const defaultPanelSize = featureGridShell ? 48 : 58;
const imageWidth = panelWidth ?? defaultPanelSize;
const imageHeight = panelHeight ?? defaultPanelSize;
const outerClass = featureGridShell
? `flex min-h-[159px] flex-col gap-[7px] ${className}`
: `h-[186px] flex flex-col gap-[7px] ${className}`;
const panelClass = featureGridShell
? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
: `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`;
const imageClass = featureGridShell
? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`
: "max-w-[58px] max-h-[58px] w-auto h-auto object-contain";
const cardContentElement = (
<div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
{/* Top part - Inner panel */}
<div
className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
>
{/* Content for the inner panel */}
<div className={outerClass}>
<div className={panelClass}>
{panelContent && (
<div className="flex items-center justify-center w-full h-full">
<div className="flex h-full w-full items-center justify-center">
<Image
src={panelContent}
alt={computedAriaLabel}
className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
width={58}
height={58}
className={imageClass}
width={imageWidth}
height={imageHeight}
sizes="(max-width: 768px) 50vw, 25vw"
loading="lazy"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
style={
featureGridShell
? {
filter: SVG_GRAIN_MULTIPLY_FILTER,
WebkitFilter: SVG_GRAIN_MULTIPLY_FILTER,
}
: undefined
}
/>
</div>
)}
{children}
</div>
{/* Bottom part - Text container */}
<div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
<div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]">
{labelLine1 && labelLine2 ? (
<>
<div>{labelLine1}</div>
<div>{labelLine2}</div>
<div>&nbsp;</div>
</>
) : (
label
app/components/sections/FeatureGrid/FeatureGrid.container.tsx
+10 -6
View File
@@ -1,11 +1,11 @@
"use client";
/**
* Figma: "Sections / FeatureGrid" (see registry)
* Figma: "Section / Feature-Grid" (18847:22410)
*/
import { memo, useMemo } from "react";
import { getAssetPath, featurePanelPath } from "../../../../lib/assetUtils";
import { getAssetPath, featurePanelLayout, featurePanelPath } from "../../../../lib/assetUtils";
import { useTranslation } from "../../../contexts/MessagesContext";
import FeatureGridView from "./FeatureGrid.view";
import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
@@ -17,7 +17,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
const features: Feature[] = useMemo(
() => [
{
backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
backgroundColor: "bg-[var(--color-surface-invert-brand-royal)]",
labelLine1: t(
"pages.home.featureGrid.features.decisionMaking.labelLine1",
),
@@ -25,11 +25,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
"pages.home.featureGrid.features.decisionMaking.labelLine2",
),
panelContent: getAssetPath(featurePanelPath("support")),
...featurePanelLayout("support"),
ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"),
href: "#decision-making",
},
{
backgroundColor: "bg-[#D1FFE2]",
backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]",
labelLine1: t(
"pages.home.featureGrid.features.valuesAlignment.labelLine1",
),
@@ -37,11 +38,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
"pages.home.featureGrid.features.valuesAlignment.labelLine2",
),
panelContent: getAssetPath(featurePanelPath("exercises")),
...featurePanelLayout("exercises"),
ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"),
href: "#values-alignment",
},
{
backgroundColor: "bg-[#F4CAFF]",
backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]",
labelLine1: t(
"pages.home.featureGrid.features.membershipGuidance.labelLine1",
),
@@ -49,11 +51,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
"pages.home.featureGrid.features.membershipGuidance.labelLine2",
),
panelContent: getAssetPath(featurePanelPath("guidance")),
...featurePanelLayout("guidance"),
ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"),
href: "#membership-guidance",
},
{
backgroundColor: "bg-[#CBDDFF]",
backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]",
labelLine1: t(
"pages.home.featureGrid.features.conflictResolution.labelLine1",
),
@@ -61,6 +64,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
"pages.home.featureGrid.features.conflictResolution.labelLine2",
),
panelContent: getAssetPath(featurePanelPath("tools")),
...featurePanelLayout("tools"),
ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"),
href: "#conflict-resolution",
},
app/components/sections/FeatureGrid/FeatureGrid.types.ts
+3
View File
@@ -9,6 +9,9 @@ export interface Feature {
labelLine1: string;
labelLine2: string;
panelContent: string;
panelWidth: number;
panelHeight: number;
panelImageClassName?: string;
ariaLabel: string;
href: string;
}
app/components/sections/FeatureGrid/FeatureGrid.view.tsx
+14 -8
View File
@@ -5,6 +5,7 @@ import ContentLockup from "../../type/ContentLockup";
import Mini from "../../cards/Mini";
import type { FeatureGridViewProps } from "./FeatureGrid.types";
/** Figma **Section / Feature-Grid** [18847:22410](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18847-22410&m=dev). */
function FeatureGridView({
title,
subtitle,
@@ -23,10 +24,12 @@ function FeatureGridView({
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">
<div
data-figma-node="18847-22410"
className="rounded-[var(--measures-radius-500,20px)] bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-020)] py-[var(--spacing-scale-032)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 md:px-[var(--spacing-scale-048)] md:pb-[var(--spacing-scale-048)] md:pt-[var(--spacing-scale-076)] lg:pb-[var(--spacing-scale-076)]"
>
<div className="mx-auto w-full gap-[var(--spacing-scale-048)] [container-type:inline-size] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)]">
<div className="lg:min-w-0 lg:shrink">
<ContentLockup
title={title}
subtitle={subtitle}
@@ -37,17 +40,20 @@ function FeatureGridView({
/>
</div>
{/* Mini 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">
<div className="mt-[var(--spacing-scale-048)] grid grid-cols-2 grid-rows-[repeat(2,minmax(0,1fr))] gap-x-[12px] gap-y-[12px] max-md:min-h-[384px] md:grid-cols-4 md:grid-rows-1 md:min-h-0 lg:mt-0 lg:shrink-0 lg:flex-grow">
{features.map((feature, index) => (
<Mini
key={index}
backgroundColor={feature.backgroundColor}
labelLine1={feature.labelLine1}
labelLine2={feature.labelLine2}
panelContent={feature.panelContent}
ariaLabel={feature.ariaLabel}
panelContent={feature.panelContent}
panelWidth={feature.panelWidth}
panelHeight={feature.panelHeight}
panelImageClassName={feature.panelImageClassName}
ariaLabel={feature.ariaLabel}
href={feature.href}
featureGridShell
/>
))}
</div>
app/components/sections/QuoteBlock/QuoteStatementDecor.tsx
+3 -5
View File
@@ -2,14 +2,12 @@
import { memo } from "react";
import { getAssetPath, quoteStatementShapePath } from "../../../../lib/assetUtils";
import { SVG_GRAIN_MULTIPLY_FILTER } from "../../../../lib/svgGrainFilter";
/** Figma: Section / Quote — **`shape-quote.svg`** (22137:890679). */
const EDGE_MASK =
"linear-gradient(to right, #fff 0%, #fff 14%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, #fff 86%, #fff 100%)";
const GRAIN_MULTIPLY_FILTER =
'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')';
const QuoteStatementDecor = memo<{ className?: string }>(({ className = "" }) => {
const src = getAssetPath(quoteStatementShapePath());
const bg = `url("${src}")`;
@@ -29,8 +27,8 @@ const QuoteStatementDecor = memo<{ className?: string }>(({ className = "" }) =>
maskSize: "100% 100%",
WebkitMaskRepeat: "no-repeat",
maskRepeat: "no-repeat",
filter: GRAIN_MULTIPLY_FILTER,
WebkitFilter: GRAIN_MULTIPLY_FILTER,
filter: SVG_GRAIN_MULTIPLY_FILTER,
WebkitFilter: SVG_GRAIN_MULTIPLY_FILTER,
}}
/>
);
app/components/type/ContentLockup/ContentLockup.container.tsx
+6 -6
View File
@@ -45,14 +45,14 @@ const ContentLockupContainer = memo<ContentLockupProps>(
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
},
feature: {
container: "flex flex-col gap-[var(--spacing-scale-012)] relative z-10",
textContainer: "flex flex-col gap-[var(--spacing-scale-012)]",
titleGroup: "flex flex-col gap-[var(--spacing-scale-012)]",
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
container: "flex flex-col gap-[var(--space-400,16px)] md:gap-[var(--space-500,20px)] relative z-10",
textContainer: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
titleGroup: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
titleContainer: "flex items-center",
title:
"font-bricolage-grotesque font-medium text-[32px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] md:text-[length:var(--sizing-600,24px)] md:leading-[32px] text-[var(--color-content-default-primary)]",
subtitle:
"font-space-grotesk font-normal text-[20px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
"font-inter font-normal text-[length:var(--sizing-350,14px)] leading-[20px] md:text-[length:var(--sizing-400,16px)] md:leading-[24px] text-[var(--color-content-default-secondary)]",
description:
"font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
shape:
app/components/type/ContentLockup/ContentLockup.view.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ function ContentLockupView({
{variant === "feature" && linkText && (
<a
href={linkHref || "#"}
className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
className="font-inter font-normal text-[length:var(--sizing-400,16px)] leading-[24px] underline text-[var(--color-content-default-primary)] hover:text-[var(--color-content-default-secondary)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-secondary)] rounded-sm px-1 py-0.5"
>
{linkText}
</a>