Skip to content

Commit 9c8d304

Browse files
tannerlinsleytannerlinsley
committed
partners: upgrade partner design on landing pages
1 parent b8126e3 commit 9c8d304

File tree

5 files changed

+78
-115
lines changed

5 files changed

+78
-115
lines changed

‎app/routes/_libraries.index.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -192,19 +192,17 @@ function Index() {
192192
<div className="h-12" />
193193
<div className={`px-4 lg:max-w-screen-lg md:mx-auto`}>
194194
<h3 className={`text-4xl font-light mb-4`}>Partners</h3>
195-
<div className={`grid grid-cols-1 gap-12 sm:grid-cols-2`}>
195+
<div className={`grid grid-cols-1 gap-6 sm:grid-cols-2`}>
196196
{partners.map((partner) => {
197197
return (
198198
<div
199199
key={partner.name}
200-
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg flex flex-col
201-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden dark:border border-gray-500/20
202-
dark:bg-gray-800 dark:shadow-none"
200+
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
203201
>
204-
<div className="flex-1 bg-white flex items-center justify-center">
202+
<div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
205203
{partner.homepageImg}
206204
</div>
207-
<div className="flex-1 p-4 text-sm flex flex-col gap-4 items-start">
205+
<div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
208206
{partner.content}
209207
</div>
210208
</div>

‎app/routes/_libraries.router.$version.index.tsx

+18-46
Original file line numberDiff line numberDiff line change
@@ -233,53 +233,25 @@ function RouterVersionIndex() {
233233
Partners
234234
</h3>
235235
<div className="h-8" />
236-
{partners.find((d) => d.libraries?.includes('router')) ? (
237-
<div className={`grid grid-cols-1 gap-12 sm:grid-cols-2`}>
238-
{partners
239-
.filter((d) => d.libraries?.includes('router'))
240-
.map((partner) => {
241-
return (
242-
<div
243-
key={partner.name}
244-
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg flex flex-col
245-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden dark:border border-gray-500/20
246-
dark:bg-gray-800 dark:shadow-none"
247-
>
248-
<div className="flex-1 bg-white flex items-center justify-center">
249-
{partner.homepageImg}
250-
</div>
251-
<div className="flex-1 p-4 text-sm flex flex-col gap-4 items-start">
252-
{partner.content}
253-
</div>
236+
<div className={`grid grid-cols-1 gap-6 sm:grid-cols-2`}>
237+
{partners
238+
.filter((d) => d.libraries?.includes('router'))
239+
.map((partner) => {
240+
return (
241+
<div
242+
key={partner.name}
243+
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
244+
>
245+
<div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
246+
{partner.homepageImg}
254247
</div>
255-
)
256-
})}
257-
</div>
258-
) : (
259-
<div
260-
className="flex-1 flex flex-col items-center text-sm text-center
261-
bg-white shadow-xl shadow-gray-500/20 rounded-lg
262-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
263-
dark:bg-gray-800 dark:shadow-none"
264-
>
265-
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
266-
Router <TbHeartHandshake /> You?
267-
</span>
268-
<div className="flex flex-col p-4 gap-4">
269-
<div>
270-
We're looking for a TanStack OSS Partner to go above and beyond
271-
the call of sponsorship. Are you as invested in TanStack as we
272-
are? Let's push boundaries together!
273-
</div>
274-
<a
275-
href="mailto:[email protected]?subject=TanStack Router Partnership"
276-
className="text-blue-500 uppercase font-black text-sm"
277-
>
278-
Let's chat
279-
</a>
280-
</div>
281-
</div>
282-
)}
248+
<div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
249+
{partner.content}
250+
</div>
251+
</div>
252+
)
253+
})}
254+
</div>
283255
</div>
284256

285257
<div className="px-4 sm:px-6 lg:px-8 mx-auto">

‎app/routes/_libraries.start.$version.index.tsx

+18-46
Original file line numberDiff line numberDiff line change
@@ -372,53 +372,25 @@ Check it out at https://tanstack.com/start/`
372372
Partners
373373
</h3>
374374
<div className="h-8" />
375-
{partners.find((d) => d.libraries?.includes('start')) ? (
376-
<div className={`grid grid-cols-1 gap-12 sm:grid-cols-2`}>
377-
{partners
378-
.filter((d) => d.libraries?.includes('start'))
379-
.map((partner) => {
380-
return (
381-
<div
382-
key={partner.name}
383-
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg flex flex-col
384-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden dark:border border-gray-500/20
385-
dark:bg-gray-800 dark:shadow-none"
386-
>
387-
<div className="flex-1 bg-white flex items-center justify-center">
388-
{partner.homepageImg}
389-
</div>
390-
<div className="flex-1 p-4 text-sm flex flex-col gap-4 items-start">
391-
{partner.content}
392-
</div>
375+
<div className={`grid grid-cols-1 gap-6 sm:grid-cols-2`}>
376+
{partners
377+
.filter((d) => d.libraries?.includes('router'))
378+
.map((partner) => {
379+
return (
380+
<div
381+
key={partner.name}
382+
className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
383+
>
384+
<div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
385+
{partner.homepageImg}
393386
</div>
394-
)
395-
})}
396-
</div>
397-
) : (
398-
<div
399-
className="flex-1 flex flex-col items-center text-sm text-center
400-
bg-white shadow-xl shadow-gray-500/20 rounded-lg
401-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
402-
dark:bg-gray-800 dark:shadow-none"
403-
>
404-
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
405-
Start <TbHeartHandshake /> You?
406-
</span>
407-
<div className="flex flex-col p-4 gap-4">
408-
<div>
409-
We're looking for a TanStack OSS Partner to go above and beyond
410-
the call of sponsorship. Are you as invested in TanStack as we
411-
are? Let's push boundaries together!
412-
</div>
413-
<a
414-
href="mailto:[email protected]?subject=TanStack Router Partnership"
415-
className="text-blue-500 uppercase font-black text-sm"
416-
>
417-
Let's chat
418-
</a>
419-
</div>
420-
</div>
421-
)}
387+
<div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
388+
{partner.content}
389+
</div>
390+
</div>
391+
)
392+
})}
393+
</div>
422394
</div>
423395

424396
<div className="relative text-lg overflow-hidden">

‎app/utils/partners.tsx

+38-17
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Library } from '~/libraries'
1919

2020
type Partner = {
2121
name: string
22+
id: string
2223
libraries?: Library['id'][]
2324
sidebarImgLight?: string
2425
sidebarImgDark?: string
@@ -34,6 +35,7 @@ export const partners: Partner[] = [
3435

3536
return {
3637
name: 'Vercel',
38+
id: 'vercel',
3739
href,
3840
libraries: ['start', 'router'],
3941
sidebarImgLight: vercelLightSvg,
@@ -59,7 +61,7 @@ export const partners: Partner[] = [
5961
),
6062
content: (
6163
<>
62-
<div>
64+
<div className="text-xs">
6365
TanStack Router/Start and Vercel are a match made in heaven.
6466
Vercel's{' '}
6567
<strong>cutting-edge deployment and serverless capabilities</strong>{' '}
@@ -85,6 +87,7 @@ export const partners: Partner[] = [
8587

8688
return {
8789
name: 'Clerk',
90+
id: 'clerk',
8891
href,
8992
libraries: ['start', 'router'],
9093
sidebarImgLight: clerkLightSvg,
@@ -110,7 +113,7 @@ export const partners: Partner[] = [
110113
),
111114
content: (
112115
<>
113-
<div>
116+
<div className="text-xs">
114117
Clerk and TanStack are partnering to elevate your application's
115118
<strong>security and user experience</strong> with industry-leading{' '}
116119
<strong>authentication and identity solutions</strong>. Paired with
@@ -135,13 +138,14 @@ export const partners: Partner[] = [
135138

136139
return {
137140
name: 'AG Grid',
141+
id: 'ag-grid',
138142
libraries: ['table'],
139143
sidebarImgLight: agGridDarkSvg,
140144
sidebarImgDark: agGridLightSvg,
141145
sidebarImgClass: 'py-5 scale-[1.1]',
142146
href,
143147
homepageImg: (
144-
<a href={href} target="_blank" className="px-8 py-6">
148+
<a href={href} target="_blank" className="px-8 py-8">
145149
<img
146150
src={agGridImage}
147151
alt="Enterprise Data Grid"
@@ -153,13 +157,13 @@ export const partners: Partner[] = [
153157
),
154158
content: (
155159
<>
156-
<div>
160+
<div className="text-xs">
157161
TanStack Table and AG Grid are respectfully the{' '}
158-
<strong>best table/datagrid libraries around</strong>, so we've
159-
teamed up to ensure the highest quality table/datagrid options are
160-
available for the entire JS/TS ecosystem and every use-case
161-
imaginable for UI/UX developers. If it's a table/datagrid, we've got
162-
you covered.
162+
<strong>best table/datagrid libraries around</strong> and together
163+
are working hard to ensure the highest quality table/datagrid
164+
experience for the entire JS/TS ecosystem. Whether it's a
165+
lightweight table or a complex datagrid, we've we've got you
166+
covered.
163167
</div>
164168
<Link
165169
to="/blog/$"
@@ -179,6 +183,7 @@ export const partners: Partner[] = [
179183

180184
return {
181185
name: 'Convex',
186+
id: 'convex',
182187
libraries: ['start', 'router'],
183188
sidebarImgLight: convexColorSvg,
184189
sidebarImgDark: convexWhiteSvg,
@@ -204,10 +209,12 @@ export const partners: Partner[] = [
204209
),
205210
content: (
206211
<>
207-
<div>
212+
<div className="text-xs">
208213
Convex has teamed up with TanStack to not only deliver a{' '}
209-
<strong>first-class end-to-end type-safe experience</strong> to
210-
TanStack developers, but to also ensure TanStack is ready for the
214+
<strong>
215+
first-class end-to-end type-safe database experience
216+
</strong>{' '}
217+
to TanStack developers, but to also ensure TanStack is ready for the
211218
real-time database arena. Convex's all-in-one platform delivers
212219
end-to-end type-safety via a{' '}
213220
<strong>revolutionary relational, real-time database</strong> and
@@ -230,10 +237,11 @@ export const partners: Partner[] = [
230237

231238
return {
232239
name: 'Sentry',
240+
id: 'sentry',
233241
libraries: ['start', 'router'],
234242
sidebarImgLight: sentryWordMarkDarkSvg,
235243
sidebarImgDark: sentryWordMarkLightSvg,
236-
sidebarImgClass: 'py-2 scale-[1.1]',
244+
sidebarImgClass: 'py-6 scale-[1.1]',
237245
href,
238246
homepageImg: (
239247
<a
@@ -255,7 +263,7 @@ export const partners: Partner[] = [
255263
),
256264
content: (
257265
<>
258-
<div>
266+
<div className="text-xs">
259267
Sentry and TanStack are on a mission to make sure your apps are
260268
<strong> error-free and high-performers</strong>. Sentry's
261269
best-in-class error monitoring and performance insights combined
@@ -279,10 +287,11 @@ export const partners: Partner[] = [
279287

280288
return {
281289
name: 'UI.dev',
290+
id: 'ui-dev',
282291
libraries: [],
283292
href,
284293
homepageImg: (
285-
<a href={href} target="_blank" className="py-6">
294+
<a href={href} target="_blank" className="py-4">
286295
<img
287296
src={bytesUidotdevImage}
288297
alt="Bytes Logo"
@@ -294,7 +303,7 @@ export const partners: Partner[] = [
294303
),
295304
content: (
296305
<>
297-
<div>
306+
<div className="text-xs">
298307
TanStack's priority is to make its users productive, efficient and
299308
knowledgeable about web dev. To help us on this quest, we've
300309
partnered with{' '}
@@ -331,6 +340,7 @@ export const partners: Partner[] = [
331340

332341
return {
333342
name: 'Nozzle.io',
343+
id: 'nozzle',
334344
href,
335345
sidebarImgLight: nozzleDarkSvg,
336346
sidebarImgDark: nozzleLightSvg,
@@ -348,7 +358,7 @@ export const partners: Partner[] = [
348358
),
349359
content: (
350360
<>
351-
<div>
361+
<div className="text-xs">
352362
Since its founding, Nozzle's SEO platform was the original home for
353363
almost all TanStack libraries. They were used to build the{' '}
354364
<strong>
@@ -371,3 +381,14 @@ export const partners: Partner[] = [
371381
}
372382
})(),
373383
] as const
384+
385+
if (typeof window !== 'undefined') {
386+
;(window as any).githubPartnersSnippet = partners
387+
.filter((d) => d.href && (d.sidebarImgLight || d.sidebarImgDark))
388+
.map((partner) => {
389+
return `<div><a href="${partner.href}">
390+
<img alt="${partner.name}" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/${partner.id}.svg" height="40"
391+
</a></div><br />`
392+
})
393+
.join('\n')
394+
}

‎media/brand.sketch

233 KB
Binary file not shown.

0 commit comments

Comments
 (0)