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

Drop Cookies Settings from the footer, link the Home features that already have pages, and give leftover routes their own descriptions.

app/components/sections/FeatureGrid/FeatureGrid.container.tsx

@@ -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

@@ -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

@@ -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>