mirror of
https://github.com/katanemo/plano.git
synced 2026-06-17 15:25:17 +02:00
a3ffbd3a42
* feat: redesign archgw -> plano + website * feat(www): refactor landing page sections, add new diagrams and UI improvements * feat(www): sections enhanced for clarify & diagrams added * feat(www): improvements to mobile design, layout of diagrams * feat(www): clean + typecheck * feat(www): feedback loop changes * feat(www): fix type error * fix lib/utils error * feat(www): ran biome formatting * feat(www): graphic changes * feat(www): web analytics * fea(www): changes * feat(www): introduce monorepo This change brings Turborepo monorepo to independently handle the marketing website, the docs website and any other future use cases for mutli-platform support. They are using internal @katanemo package handlers for the design system and logic. * fix(www): transpiler failure * fix(www): tsconfig issue * fix(www): next.config issue * feat(docs): hold off on docs * Delete next.config.ts * feat(www): content fix * feat(www): introduce blog * feat(www): content changes * Update package-lock.json * feat: update text * Update IntroSection.tsx * feat: Turbopack issue * fix * Update IntroSection.tsx * feat: updated Research page * refactor(www): text clarity, padding adj. * format(www) * fix: add missing lib/ files to git - fixes Vercel GitHub deployment - Updated .gitignore to properly exclude Python lib/ but include Next.js lib/ directories - Added packages/ui/src/lib/utils.ts (cn utility function) - Added apps/www/src/lib/sanity.ts (Sanity client configuration) - Fixes module resolution errors in Vercel GitHub deployments (case-sensitive filesystem) * Update .gitignore * style(www): favicon + metadata * fix(www): links * fix(www): add analytics * fix(www): add * fix(www): fix links + image * fix(www): fix links + image * fix(www): fix links * fix(www): remove from tools testing.md
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
const customerLogos = [
|
|
{
|
|
name: "HuggingFace",
|
|
src: "/logos/huggingface.svg",
|
|
},
|
|
{
|
|
name: "T-Mobile",
|
|
src: "/logos/tmobile.svg",
|
|
},
|
|
{
|
|
name: "HP",
|
|
src: "/logos/hp.svg",
|
|
},
|
|
{
|
|
name: "SanDisk",
|
|
src: "/logos/sandisk.svg",
|
|
},
|
|
{
|
|
name: "Chase",
|
|
src: "/logos/chase.svg",
|
|
},
|
|
];
|
|
|
|
export function LogoCloud() {
|
|
return (
|
|
<section className="relative py-6 sm:py-8 px-4 sm:px-6 lg:px-8 bg-transparent">
|
|
<div className="max-w-[81rem] mx-auto">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:flex lg:flex-row lg:justify-center lg:items-center gap-4 sm:gap-6 md:gap-8 lg:gap-0 place-items-center">
|
|
{customerLogos.map((logo, index) => {
|
|
const isLast = index === customerLogos.length - 1;
|
|
const isTMobile = index === 1; // T-Mobile is before HP
|
|
const isHP = index === 2; // HP is in center
|
|
const isSanDisk = index === 3; // SanDisk is after HP
|
|
|
|
// Custom spacing for logos around HP on large screens
|
|
let spacingClass = "lg:mx-6 xl:mx-8"; // Default spacing
|
|
if (isTMobile) {
|
|
spacingClass = "lg:mr-3 xl:mr-4 lg:ml-6 xl:ml-8"; // Smaller gap to HP
|
|
} else if (isHP) {
|
|
spacingClass = "lg:mx-3 xl:mx-4"; // Smaller gaps on both sides
|
|
} else if (isSanDisk) {
|
|
spacingClass = "lg:ml-3 xl:ml-4 lg:mr-6 xl:mr-8"; // Smaller gap from HP
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={logo.name}
|
|
className={`flex items-center justify-center opacity-60 hover:opacity-80 transition-opacity duration-300 w-full max-w-32 sm:max-w-40 md:max-w-48 h-10 sm:h-12 md:h-16 mx-auto ${spacingClass} ${
|
|
isLast ? "col-span-2 md:col-span-3 lg:col-span-none" : ""
|
|
}`}
|
|
>
|
|
<Image
|
|
src={logo.src}
|
|
alt={`${logo.name} logo`}
|
|
width={128}
|
|
height={40}
|
|
className="w-full h-full object-contain filter grayscale hover:grayscale-0 transition-all duration-300"
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|