Skip to content

Commit 9d621b1

Browse files
alelthomasalelthomas
committed
css filters and spacing
1 parent ec3c036 commit 9d621b1

File tree

5 files changed

+50
-97
lines changed

5 files changed

+50
-97
lines changed

‎docs/public/static/branding/companies/slider/nasa.png‎

-2.4 KB
Loading

‎docs/public/static/branding/companies/slider/samsung.png‎

-1.34 KB
Loading

‎docs/src/components/customers/CustomersLogoSlider.tsx‎

Lines changed: 42 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { useColorScheme, keyframes } from '@mui/material/styles';
66
interface CustomerLogo {
77
name: string;
88
lightLogo: string;
9-
darkLogo?: string;
109
}
1110

1211
interface CustomersLogoSliderProps {
@@ -19,68 +18,19 @@ const scroll = keyframes`
1918
`;
2019

2120
const defaultCustomerLogos: CustomerLogo[] = [
22-
{
23-
name: 'Spotify',
24-
lightLogo: '/static/branding/companies/slider/spotify.png',
25-
darkLogo: '/static/branding/companies/spotify-dark.svg',
26-
},
27-
{
28-
name: 'Amazon',
29-
lightLogo: '/static/branding/companies/slider/amazon.png',
30-
darkLogo: '/static/branding/companies/slider/amazon_dark.png',
31-
},
32-
{
33-
name: 'NASA',
34-
lightLogo: '/static/branding/companies/slider/nasa.png',
35-
},
36-
{
37-
name: 'Netflix',
38-
lightLogo: '/static/branding/companies/slider/netflix.png',
39-
},
40-
{
41-
name: 'Unity',
42-
lightLogo: '/static/branding/companies/slider/unity.png',
43-
darkLogo: '/static/branding/companies/slider/unity_dark.png',
44-
},
45-
{
46-
name: 'AT&T',
47-
lightLogo: '/static/branding/companies/slider/atnt.png',
48-
darkLogo: '/static/branding/companies/slider/atnt_dark.png',
49-
},
50-
{
51-
name: 'Apple',
52-
lightLogo: '/static/branding/companies/slider/apple.png',
53-
darkLogo: '/static/branding/companies/slider/apple_dark.png',
54-
},
55-
{
56-
name: 'Tesla',
57-
lightLogo: '/static/branding/companies/slider/tesla.png',
58-
darkLogo: '/static/branding/companies/slider/tesla_dark.png',
59-
},
60-
{
61-
name: 'Samsung',
62-
lightLogo: '/static/branding/companies/slider/samsung.png',
63-
},
64-
{
65-
name: 'Verizon',
66-
lightLogo: '/static/branding/companies/slider/verizon.png',
67-
darkLogo: '/static/branding/companies/slider/verizon.png',
68-
},
69-
{
70-
name: 'Shutterstock',
71-
lightLogo: '/static/branding/companies/slider/shutterstock.png',
72-
darkLogo: '/static/branding/companies/slider/shutterstock_dark.png',
73-
},
74-
{
75-
name: 'Volvo',
76-
lightLogo: '/static/branding/companies/slider/volvo.png',
77-
darkLogo: '/static/branding/companies/slider/volvo.png',
78-
},
79-
{
80-
name: 'Deloitte',
81-
lightLogo: '/static/branding/companies/slider/deloitte.png',
82-
darkLogo: '/static/branding/companies/slider/deloitte_dark.png',
83-
},
21+
{ name: 'Spotify', lightLogo: '/static/branding/companies/slider/spotify.png' },
22+
{ name: 'Amazon', lightLogo: '/static/branding/companies/slider/amazon.png' },
23+
{ name: 'NASA', lightLogo: '/static/branding/companies/slider/nasa.png' },
24+
{ name: 'Netflix', lightLogo: '/static/branding/companies/slider/netflix.png' },
25+
{ name: 'Unity', lightLogo: '/static/branding/companies/slider/unity.png' },
26+
{ name: 'AT&T', lightLogo: '/static/branding/companies/slider/atnt.png' },
27+
{ name: 'Apple', lightLogo: '/static/branding/companies/slider/apple.png' },
28+
{ name: 'Tesla', lightLogo: '/static/branding/companies/slider/tesla.png' },
29+
{ name: 'Samsung', lightLogo: '/static/branding/companies/slider/samsung.png' },
30+
{ name: 'Verizon', lightLogo: '/static/branding/companies/slider/verizon.png' },
31+
{ name: 'Shutterstock', lightLogo: '/static/branding/companies/slider/shutterstock.png' },
32+
{ name: 'Volvo', lightLogo: '/static/branding/companies/slider/volvo.png' },
33+
{ name: 'Deloitte', lightLogo: '/static/branding/companies/slider/deloitte.png' },
8434
];
8535

8636
export default function CustomersLogoSlider({
@@ -90,18 +40,14 @@ export default function CustomersLogoSlider({
9040

9141
React.useEffect(() => {
9242
logos.forEach((logo) => {
93-
const lightImg = new Image();
94-
lightImg.src = logo.lightLogo;
95-
96-
if (logo.darkLogo) {
97-
const darkImg = new Image();
98-
darkImg.src = logo.darkLogo;
99-
}
43+
const img = new Image();
44+
img.src = logo.lightLogo;
10045
});
10146
}, [logos]);
10247

103-
const logoWidth = 180;
104-
const totalWidth = logos.length * logoWidth;
48+
const logoWidth = 150;
49+
const gapSize = 24;
50+
const totalWidth = logos.length * logoWidth + (logos.length - 1) * gapSize;
10551

10652
return (
10753
<Container
@@ -133,8 +79,12 @@ export default function CustomersLogoSlider({
13379
sx={{
13480
display: 'flex',
13581
alignItems: 'center',
136-
gap: { xs: 4, sm: 6, md: 4 },
137-
animation: `${scroll} 50s linear infinite`,
82+
gap: 3,
83+
animation: {
84+
xs: `${scroll} 25s linear infinite`,
85+
sm: `${scroll} 35s linear infinite`,
86+
md: `${scroll} 50s linear infinite`,
87+
},
13888
width: `${totalWidth}px`,
13989
flexShrink: 0,
14090
}}
@@ -144,23 +94,22 @@ export default function CustomersLogoSlider({
14494
key={`first-${logo.name}-${index}`}
14595
component="img"
14696
alt={`${logo.name} logo`}
147-
src={mode === 'dark' && logo.darkLogo ? logo.darkLogo : logo.lightLogo}
97+
src={logo.lightLogo}
14898
sx={{
14999
height: { xs: 42, sm: 50, md: 70 },
150100
width: '150px',
151101
objectFit: 'contain',
152102
opacity: 0.7,
153-
transition: 'opacity 0.3s ease-in-out',
103+
transition: 'opacity 0.3s ease-in-out, filter 0.3s ease-in-out',
154104
flexShrink: 0,
105+
filter:
106+
mode === 'light'
107+
? 'none'
108+
: 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)',
155109
'&:hover': {
156110
opacity: 1,
157111
},
158112
}}
159-
onError={(err) => {
160-
if (mode === 'dark' && logo.darkLogo) {
161-
(err.target as HTMLImageElement).src = logo.lightLogo;
162-
}
163-
}}
164113
/>
165114
))}
166115
</Box>
@@ -169,8 +118,12 @@ export default function CustomersLogoSlider({
169118
sx={{
170119
display: 'flex',
171120
alignItems: 'center',
172-
gap: { xs: 4, sm: 6, md: 4 },
173-
animation: `${scroll} 50s linear infinite`,
121+
gap: 3,
122+
animation: {
123+
xs: `${scroll} 25s linear infinite`,
124+
sm: `${scroll} 35s linear infinite`,
125+
md: `${scroll} 50s linear infinite`,
126+
},
174127
width: `${totalWidth}px`,
175128
flexShrink: 0,
176129
}}
@@ -180,23 +133,22 @@ export default function CustomersLogoSlider({
180133
key={`second-${logo.name}-${index}`}
181134
component="img"
182135
alt={`${logo.name} logo`}
183-
src={mode === 'dark' && logo.darkLogo ? logo.darkLogo : logo.lightLogo}
136+
src={logo.lightLogo}
184137
sx={{
185138
height: { xs: 42, sm: 50, md: 70 },
186139
width: '150px',
187140
objectFit: 'contain',
188141
opacity: 0.7,
189-
transition: 'opacity 0.3s ease-in-out',
142+
transition: 'opacity 0.3s ease-in-out, filter 0.3s ease-in-out',
190143
flexShrink: 0,
144+
filter:
145+
mode === 'light'
146+
? 'none'
147+
: 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)',
191148
'&:hover': {
192149
opacity: 1,
193150
},
194151
}}
195-
onError={(err) => {
196-
if (mode === 'dark' && logo.darkLogo) {
197-
(err.target as HTMLImageElement).src = logo.lightLogo;
198-
}
199-
}}
200152
/>
201153
))}
202154
</Box>

‎docs/src/components/customers/CustomersSpotlight.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,8 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
2020
React.useEffect(() => {
2121
posts.forEach((post) => {
2222
if (post.image) {
23-
const lightImg = new Image();
24-
const darkImg = new Image();
25-
lightImg.src = post.image;
26-
darkImg.src = post.image.replace('light', 'dark');
23+
const img = new Image();
24+
img.src = post.image;
2725
}
2826
});
2927
}, [posts]);
@@ -73,7 +71,7 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
7371
<Box
7472
component="img"
7573
alt="Company Logo"
76-
src={mode === 'dark' ? post.image.replace('light', 'dark') : post.image}
74+
src={post.image}
7775
sx={{
7876
position: variant === 'primary' ? 'absolute' : 'relative',
7977
top: variant === 'primary' ? 30 : 'auto',
@@ -85,7 +83,10 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) {
8583
maxHeight: '50px',
8684
width: 'auto',
8785
zIndex: 1,
88-
filter: mode === 'light' ? 'brightness(0) saturate(100%)' : 'none',
86+
filter:
87+
mode === 'light'
88+
? 'brightness(0) saturate(100%)'
89+
: 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)',
8990
}}
9091
/>
9192
)}

‎docs/src/components/customers/CustomersTestimonials.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function CustomersTestimonials() {
1313
sx={{
1414
display: 'grid',
1515
m: 0,
16-
p: { xs: 2, sm: 4, md: 8, lg: 12 },
16+
p: { xs: 8, sm: 6, md: 8, lg: 12 },
1717
gap: 2,
1818
maxWidth: '1350px',
1919
mx: 'auto',

0 commit comments

Comments
 (0)