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

Merge pull request #1405 from useautumn/cursor/logo-wall-redesign

Browse Source 
Redesign logo wall with responsive layout and updated styling
This commit is contained in:
Ayush
2026-04-29 14:02:47 +01:00
committed by GitHub
parent 30dd81e617 11ff47c57e
commit a1b28896df
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