comi-logic/cfw-autumn
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign logo wall with responsive layout and updated styling

Browse Source 
Update Browser Use SVG color to match other logos, rework mobile layout
to show 3+2 centered grid, match background and typography to hero section,
and add per-logo scale overrides for mobile/desktop.

Made-with: Cursor
This commit is contained in:
Ayush Rodrigues
2026-04-29 13:55:23 +01:00
parent ef9c77037c
commit 11ff47c57e
4 changed files with 40 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/components/hero.tsx
View File

@@ -128,7 +128,7 @@ export default function Hero() {
return (
<div ref={containerRef}>
<div className="relative hero-root flex flex-col items-stretch pb-0 md:pb-12 mb-0 bg-[#0F0F0F]">
<div className="relative hero-root flex flex-col items-stretch pb-0 mb-0 bg-[#0F0F0F]">
<div className="flex justify-between">
<div className="flex flex-col gap-6 px-4 xl:px-22.75 py-8 bg-[#0F0F0F] mt-26">
<h4 className="hero-reveal lg:opacity-0 relative uppercase font-mono tracking-[-2%] text-[12px] md:text-sm leading-sm text-white md:text-[#FFFFFF99] bg-[#2c2c2d] w-fit p-2 min-h-[30px] md:min-h-[36px] flex items-center">

11
apps/website/components/home-sections.tsx
View File

@@ -46,15 +46,8 @@ export default function HomeSections() {
return (
<>
<Hero />
{/*
<div className="flex flex-col gap-2.5 bg-[#000000]">
<div className="border-t border-[#292929] w-full" />
<div className="border-t border-[#292929] w-full" />
<div className="border-t border-[#292929] w-full" />
<div className="border-t border-[#292929] w-full" />
<div className="border-t border-[#292929] w-full" />
</div>
<LogoWall /> */}
<LogoWall />
<SectionDivider title="THE PROBLEM" />
<LazySection><Problem /></LazySection>
<SectionDivider title="THE SOLUTION" />

90
apps/website/components/logo-wall.tsx
View File

@@ -3,70 +3,52 @@
import { cn } from "@/lib/utils";
const LOGOS = [
{ id: 1, name: "Mintlify", src: "/images/logos/mintlify_logo.svg.svg" },
{ id: 2, name: "Browser Use", src: "/images/logos/Browser use.svg" },
{ id: 3, name: "Firecrawl", src: "/images/logos/Firecrawl.svg.svg" },
{ id: 4, name: "Mastra", src: "/images/logos/Mastra.svg.svg" },
{ id: 5, name: "T3.chat", src: "/images/logos/T3_svg.svg" },
{ id: 6, name: "", src: null },
{ id: 1, name: "Mintlify", src: "/images/logos/mintlify_logo.svg.svg", className: "scale-90 md:scale-70" },
{ id: 3, name: "Firecrawl", src: "/images/logos/Firecrawl.svg.svg", className: "scale-95 md:scale-75 -translate-y-0.5" },
{ id: 4, name: "Mastra", src: "/images/logos/Mastra.svg.svg", className: "scale-105 md:scale-95" },
{ id: 2, name: "Browser Use", src: "/images/logos/Browser use.svg", className: "scale-85 md:scale-65" },
{ id: 5, name: "T3.chat", src: "/images/logos/T3_svg.svg", className: "scale-65 md:scale-55" },
];
const NUM_MOBILE_COLS = 2;
const NUM_DESKTOP_COLS = 3;
const NUM_MOBILE_COLS = 3;
const NUM_DESKTOP_COLS = 5;
export default function LogoWall() {
return (
<section className="w-full bg-[#000000]">
<div className="flex flex-col md:flex-row">
{/* Left heading — full width on mobile, 42% on desktop */}
<div className="md:w-[42%] px-4 xl:px-22.75 py-8 md:py-0 flex items-center border-b md:border-b-0 md:border-r border-[#292929]">
<div>
<p className="font-sans text-[28px] md:text-[36px] xl:text-[40px] font-normal leading-[1.1] tracking-[-0.03em]">
<span className="text-[#FFFFFF66]">Trusted by </span>
<span className="text-white">AI teams</span>
</p>
<p className="font-sans text-[28px] md:text-[36px] xl:text-[40px] font-normal leading-[1.1] tracking-[-0.03em] text-white">
shipping fast
</p>
</div>
<section className="w-full bg-[#0F0F0F]"
style={{
backgroundImage:
"radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)",
backgroundSize: "14px 14px",
}}>
<div className="flex flex-col">
<div className="px-4 xl:px-22.75 pt-10.5 flex items-center justify-center">
<span className="font-sans text-[14px] font-light text-[#FFFFFF99] tracking-[-2%] leading-5">
Powering millions of customers for growing startups
</span>
</div>
{/* Logo grid — 2 cols on mobile, 3 cols on desktop */}
<div className="flex-1 grid grid-cols-2 md:grid-cols-3">
{LOGOS.map((logo, i) => {
const isLastMobileCol = (i + 1) % NUM_MOBILE_COLS === 0;
const isLastDesktopCol = (i + 1) % NUM_DESKTOP_COLS === 0;
const isLastMobileRow = i >= LOGOS.length - NUM_MOBILE_COLS;
const isLastDesktopRow = i >= LOGOS.length - NUM_DESKTOP_COLS;
return (
<div
key={logo.id}
<div className="flex-1 flex flex-wrap justify-center md:grid md:grid-cols-5 px-4 py-4 md:py-0">
{LOGOS.map((logo) => (
<div
key={logo.id}
className="flex items-center justify-center min-h-[50px] md:min-h-[100px] border-[#292929] w-1/3 md:w-auto"
>
{logo.src && (
<img
src={logo.src}
alt={logo.name}
className={cn(
"flex items-center justify-center min-h-[90px] md:min-h-[166px] border-[#292929]",
!isLastMobileCol && "border-r",
!isLastMobileRow && "border-b",
isLastDesktopCol ? "md:border-r-0" : "md:border-r",
isLastDesktopRow ? "md:border-b-0" : "md:border-b",
"h-5 md:h-7 w-auto max-w-full object-contain",
logo.className
)}
style={{
backgroundImage:
"radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)",
backgroundSize: "14px 14px",
}}
>
{logo.src && (
<img
src={logo.src}
alt={logo.name}
className="h-5 md:h-7 w-auto max-w-[110px] md:max-w-[150px] object-contain"
loading="lazy"
/>
)}
</div>
);
})}
</div>
loading="lazy"
/>
)}
</div>
))}
</div>
</div>
</section>
);

11
apps/website/public/images/logos/Browser use.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 21 KiB