Match partner logo wall spacing and sizes to Figma on every breakpoint (CR-130).

Restore asset/Logo import casing so Turbopack can resolve the module, and align the site lockup gaps with the Figma Asset/Logo instances.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/sections/LogoWall/LogoWall.container.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 /**
- * Figma: "Sections / LogoWall" (see registry)
+ * Figma: "Section / Logo Wall" (18847:22366)
+ * Index frames: 320–429 2×3 grid, 430–639 3×2 grid, 640+ space-between row.
+ * Logo heights from those instances (1× / 1.25 at lg / 1.5625 at xl).
  */
 
-import { memo, useState, useEffect, useMemo } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import { getAssetPath, partnerLogoPath } from "../../../../lib/assetUtils";
 import LogoWallView from "./LogoWall.view";
@@ -12,39 +14,44 @@ import type { LogoWallProps } from "./LogoWall.types";
 
 const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
   const t = useTranslation("logoWall");
-  const [isVisible, setIsVisible] = useState(false);
 
   const defaultLogos = useMemo(
     () => [
       {
         src: getAssetPath(partnerLogoPath("food-not-bombs")),
         alt: t("partners.foodNotBombs"),
-        size: "h-11 lg:h-14 xl:h-[70px]",
+        size: "h-[48px] lg:h-[60px] xl:h-[74.6px]",
+        order: "sm:order-4 md:order-4",
       },
       {
         src: getAssetPath(partnerLogoPath("start-coop")),
         alt: t("partners.startCoop"),
-        size: "h-[42px] lg:h-[53px] xl:h-[66px]",
+        size: "h-[51.4px] lg:h-[64.2px] xl:h-[80.3px]",
+        order: "sm:order-1 md:order-3",
       },
       {
         src: getAssetPath(partnerLogoPath("metagov")),
         alt: t("partners.metagov"),
-        size: "h-6 lg:h-8 xl:h-[41px]",
+        size: "h-[26.2px] lg:h-[33px] xl:h-[41px]",
+        order: "sm:order-6 md:order-1",
       },
       {
         src: getAssetPath(partnerLogoPath("open-civics")),
         alt: t("partners.openCivics"),
-        size: "h-8 lg:h-10 xl:h-[50px]",
+        size: "h-[50.1px] lg:h-[61.1px] xl:h-[72px]",
+        order: "sm:order-5 md:order-2",
       },
       {
         src: getAssetPath(partnerLogoPath("mutual-aid-co")),
         alt: t("partners.mutualAidCo"),
-        size: "h-11 lg:h-14 xl:h-[70px]",
+        size: "h-[51.1px] lg:h-[63.6px] xl:h-[79.5px]",
+        order: "sm:order-2 md:order-5",
       },
       {
         src: getAssetPath(partnerLogoPath("cu-boulder")),
         alt: t("partners.cuBoulder"),
-        size: "h-10 lg:h-12 xl:h-[60px]",
+        size: "h-[44.6px] lg:h-[55.8px] xl:h-[69.7px]",
+        order: "sm:order-3 md:order-6",
       },
     ],
     [t],
@@ -55,18 +62,9 @@ const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
     [logos, defaultLogos],
   );
 
-  useEffect(() => {
-    // Trigger fade-in animation after component mounts
-    const timer = setTimeout(() => {
-      setIsVisible(true);
-    }, 100);
-
-    return () => clearTimeout(timer);
-  }, []);
-
   return (
     <LogoWallView
-      isVisible={isVisible}
+      heading={t("heading")}
       displayLogos={displayLogos}
       className={className}
     />

app/components/sections/LogoWall/LogoWall.types.ts

@@ -11,7 +11,7 @@ export interface LogoWallProps {
 }
 
 export interface LogoWallViewProps {
-  isVisible: boolean;
+  heading: string;
   displayLogos: Array<{
     src: string;
     alt: string;

app/components/sections/LogoWall/LogoWall.view.tsx

@@ -5,25 +5,24 @@ import Image from "next/image";
 import type { LogoWallViewProps } from "./LogoWall.types";
 
 function LogoWallView({
-  isVisible,
+  heading,
   displayLogos,
   className,
 }: LogoWallViewProps) {
   return (
     <section
-      className={`p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
+      className={`bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
     >
-      <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
-        <div
-          className={`transition-opacity duration-500 ${
-            isVisible ? "opacity-60" : "opacity-0"
-          }`}
-        >
-          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:flex-wrap md:justify-center md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
+      <div className="flex flex-col items-center gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
+        <p className="font-inter text-center text-[10px] font-medium uppercase leading-[12px] text-[var(--color-content-default-primary)] xl:text-[14px] xl:leading-[12px]">
+          {heading}
+        </p>
+        <div className="w-full opacity-60">
+          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:w-full md:flex-nowrap md:items-center md:justify-between gap-[38.4px] lg:gap-[var(--spacing-scale-048)]">
             {displayLogos.map((logo, index) => (
               <div
                 key={index}
-                className={`flex items-center justify-center ${
+                className={`flex items-center justify-center md:shrink-0 ${
                   logo.order || ""
                 }`}
               >