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>
This commit is contained in:
adilallo
2026-08-18 18:24:54 -06:00
co-authored by Cursor
parent 7b50c92ad3
commit 3cdf4174d0
12 changed files with 89 additions and 75 deletions
@@ -1,10 +1,12 @@
"use client";
/**
* Figma: "Sections / LogoWall" (see registry)
* Figma: "Section / Logo Wall" (18847:22366)
* Index frames: 320429 2×3 grid, 430639 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}
/>