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

Match the 3 Nov color ramps and size-based strokes, and replace leftover palette hex with tokens.

Browse Source 
Drop Cookies Settings from the footer, link the Home features that already have pages, and give leftover routes their own descriptions.
This commit is contained in:
adilallo committed 2026-11-05 15:37:55 -07:00
1 parent 8d07e00667
commit ca928e306b
32 files changed
+276 -213
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/sections/FeatureGrid/FeatureGrid.container.tsx
+2
View File
@@ -33,6 +33,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
),
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)]",
@@ -42,6 +43,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
),
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)]",
app/components/sections/FeatureGrid/FeatureGrid.types.ts
+1
View File
@@ -10,6 +10,7 @@ export interface Feature {
description: string;
descriptionClassName: string;
iconSrc: string;
href?: string;
}
export interface FeatureGridViewProps extends FeatureGridProps {
app/components/sections/FeatureGrid/FeatureGrid.view.tsx
+45 -27
View File
@@ -1,8 +1,35 @@
"use client";
import Link from "next/link";
import { useTranslation } from "../../../contexts/MessagesContext";
import ContentLockup from "../../type/ContentLockup";
import type { FeatureGridViewProps } from "./FeatureGrid.types";
import type { Feature, FeatureGridViewProps } from "./FeatureGrid.types";
function FeatureTileBody({ feature }: { feature: Feature }) {
return (
<>
<div className="size-[40px] shrink-0 overflow-clip">
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */}
<img
src={feature.iconSrc}
alt=""
width={40}
height={40}
className="size-full object-contain"
role="presentation"
/>
</div>
<div className="flex w-full flex-col gap-[var(--space-200)]">
<p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-invert-primary)]">
{feature.title}
</p>
<p className={`text-small-paragraph ${feature.descriptionClassName}`}>
{feature.description}
</p>
</div>
</>
);
}
/** Figma **Section / Feature-Grid** [18632:10668](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18632-10668&m=dev). */
function FeatureGridView({
@@ -41,34 +68,25 @@ function FeatureGridView({
</div>
<div className="grid w-full grid-cols-1 gap-[var(--space-200)] md:grid-cols-2 md:gap-[var(--space-400)] lg:flex-1">
{features.map((feature) => (
<div
key={feature.title}
className={`flex flex-col gap-[var(--space-400)] p-[var(--space-600)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-500)]`}
>
<div className="size-[40px] shrink-0 overflow-clip">
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */}
<img
src={feature.iconSrc}
alt=""
width={40}
height={40}
className="size-full object-contain"
role="presentation"
/>
</div>
<div className="flex w-full flex-col gap-[var(--space-200)]">
<p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-invert-primary)]">
{feature.title}
</p>
<p
className={`text-small-paragraph ${feature.descriptionClassName}`}
{features.map((feature) => {
const tileClassName = `flex flex-col gap-[var(--space-400)] p-[var(--space-600)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-500)]`;
if (feature.href) {
return (
<Link
key={feature.title}
href={feature.href}
className={`${tileClassName} no-underline touch-manipulation [-webkit-tap-highlight-color:transparent] hover:opacity-90 focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-invert)]`}
>
{feature.description}
</p>
<FeatureTileBody feature={feature} />
</Link>
);
}
return (
<div key={feature.title} className={tileClassName}>
<FeatureTileBody feature={feature} />
</div>
</div>
))}
);
})}
</div>
</div>
</div>
app/components/sections/QuoteBlock/QuoteBlock.view.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ function QuoteBlockView({
role="region"
>
<div
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--space-500)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--space-500)] bg-[var(--color-surface-invert-brand-primary)] px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
>
<QuoteStatementDecor />
<div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">