@@ -11,6 +11,7 @@ import PayPalWordmark from "./logos/PayPal.svg?svgr"
11
11
import NewYorkTimesWordmark from "./logos/NewYorkTimes.svg?svgr"
12
12
import StarbucksWordmark from "./logos/Starbucks.svg?svgr"
13
13
import ShopifyLockup from "./logos/Shopify.svg?svgr"
14
+ import ShopifyMonotoneLockup from "./logos/ShopifyMonotone.svg?svgr"
14
15
import GitHubLockup from "./logos/GitHub.svg?svgr"
15
16
16
17
import styles from "./style.module.css"
@@ -25,7 +26,10 @@ const logos: LogoListItem[] = [
25
26
href : "https://aws.amazon.com" ,
26
27
alt : "AWS" ,
27
28
component : props => (
28
- < AWSLogo { ...props } className = { clsx ( props . className , "w-[110px]" ) } />
29
+ < AWSLogo
30
+ { ...props }
31
+ className = { clsx ( props . className , "h-[48px] sm:w-[110px]" ) }
32
+ />
29
33
) ,
30
34
} ,
31
35
@@ -67,17 +71,26 @@ const logos: LogoListItem[] = [
67
71
{
68
72
href : "https://starbucks.com" ,
69
73
alt : "Starbucks" ,
70
- component : props => (
71
- < StarbucksWordmark
72
- { ...props }
73
- className = { clsx ( props . className , "w-[200px] -translate-x-1.5" ) }
74
- />
75
- ) ,
74
+ component : StarbucksWordmark ,
76
75
} ,
77
76
{
78
77
href : "https://shopify.com" ,
79
78
alt : "Shopify" ,
80
- component : ShopifyLockup ,
79
+ component : ( { className, ...rest } ) => (
80
+ < div
81
+ role = "img"
82
+ className = { clsx ( className , styles . shopify , "relative flex" ) }
83
+ >
84
+ < ShopifyLockup
85
+ className = "w-full opacity-0 group-hover:opacity-100 group-focus:opacity-100"
86
+ { ...rest }
87
+ />
88
+ < ShopifyMonotoneLockup
89
+ className = "absolute inset-0 w-full opacity-100 group-hover:opacity-0 group-focus:opacity-0"
90
+ { ...rest }
91
+ />
92
+ </ div >
93
+ ) ,
81
94
} ,
82
95
{
83
96
href : "https://github.com" ,
@@ -102,7 +115,7 @@ export function TrustedBy() {
102
115
</ div >
103
116
< div
104
117
className = { clsx (
105
- "mt -6 grid grid-cols-2 justify-center gap-px md:my-12 xl:my-16 xl: grid-cols-5" ,
118
+ "my -6 grid grid-cols-2 justify-center gap-px md:my-12 md: grid-cols-5 xl:my-16 " ,
106
119
styles . logos ,
107
120
) }
108
121
>
@@ -112,7 +125,7 @@ export function TrustedBy() {
112
125
href = { href }
113
126
target = "_blank"
114
127
rel = "noreferrer"
115
- className = "flex shrink-0 items-center justify-center bg-neu-0 p-4 hover:bg-neu-100 md:p-6 lg:p-8 xl:p-10 "
128
+ className = "group flex shrink-0 items-center justify-center bg-neu-0 p-10 before:inset-2 hover:before: bg-neu-100 dark:hover:before:bg-[#202219] "
116
129
>
117
130
< Component />
118
131
</ a >
0 commit comments