Centre logos

Author: tedspare

src/app/page.tsx

@@ -52,16 +52,22 @@ export default function Page() {
 			</Section>
 			<Section className="space-y-40">
 				<div className="flex w-full max-w-2xl flex-col items-center space-y-6">
-					<div className="flex w-full items-center justify-between gap-4">
-						<Link className="w-36" href="/work#Cal.com">
-							<Cal className="w-full" />
-						</Link>
-						<Link className="w-40" href="/work#Graphite">
-							<Graphite className="w-full" />
-						</Link>
-						<Link className="w-48" href="/work#Albertsons">
-							<Albertsons className="w-full" />
-						</Link>
+					<div className="grid w-full grid-cols-3 gap-4">
+						<div className="flex justify-start">
+							<Link className="w-36" href="/work#Cal.com">
+								<Cal className="w-full" />
+							</Link>
+						</div>
+						<div className="flex justify-center">
+							<Link className="w-40" href="/work#Graphite">
+								<Graphite className="w-full" />
+							</Link>
+						</div>
+						<div className="flex justify-end">
+							<Link className="w-48" href="/work#Albertsons">
+								<Albertsons className="w-full" />
+							</Link>
+						</div>
 					</div>
 					<Link
 						href="/work"
@@ -73,7 +79,6 @@ export default function Page() {
 				</div>
 				<Testimonials />
 				<Partners />
-
 				<div className="flex flex-col gap-8">
 					<h2 className="max-w-2xl text-7xl">{hook}</h2>
 					<div className="flex items-center gap-4">

src/ui/partners.tsx

@@ -16,7 +16,7 @@ const partners = [
 	},
 	{
 		name: 'Vercel',
-		className: 'w-40',
+		className: 'w-36',
 		Icon: (props: { className: string }) => <Vercel {...props} />,
 		href: 'https://vercel.com/partners/solution-partners/rubriclabs'
 	},
@@ -34,17 +34,28 @@ export const Partners = () => {
 	return (
 		<div className="flex w-full max-w-2xl flex-col items-center space-y-6">
 			<p className="text-secondary text-sm">Our partners</p>
-			<div className="flex w-full items-center justify-between gap-4">
-				{partners.map(({ name, href, Icon, className }) => (
-					<Link
+			<div className="grid w-full grid-cols-3 items-center justify-between gap-4">
+				{partners.map(({ name, href, Icon, className }, index) => (
+					<div
 						key={name}
-						href={href}
-						onClick={() => posthog.capture('partner.clicked', { name, href })}
-						target="_blank"
-						className={cn(className)}
+						className={cn(
+							'flex',
+							{
+								0: 'justify-start',
+								1: 'justify-center',
+								2: 'justify-end'
+							}[index]
+						)}
 					>
-						<Icon className="w-full" />
-					</Link>
+						<Link
+							href={href}
+							onClick={() => posthog.capture('partner.clicked', { name, href })}
+							target="_blank"
+							className={cn(className)}
+						>
+							<Icon className="w-full" />
+						</Link>
+					</div>
 				))}
 			</div>
 		</div>