Skip to content

Commit b5eea03

Browse files
reeshabh90reeshabh90
committed
Added Clients Banner. Moreover CSS now supports multiple media screens.
1 parent 13073b6 commit b5eea03

5 files changed

Lines changed: 189 additions & 2 deletions

File tree

‎src/containers/components/home/ClientsBanner.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import './clientsBanner.css';
2+
import React from 'react';
3+
import HarpoLogo from '../../../assets/Harpo logo.png'
4+
import TausightLogo from '../../../assets/Tausight.png'
5+
import PwCLogo from '../../../assets/PWC logo.png'
6+
7+
8+
const clients = [
9+
{ name: 'Harpo', url: 'https://int.harpo.com.pl/', image: HarpoLogo },
10+
{ name: 'Tausight', url: 'https://www.tausight.com/', image: TausightLogo },
11+
{ name: 'PwC Singapore', url: 'https://www.pwc.com/', image: PwCLogo },
12+
];
13+
14+
const doubled = [...clients, ...clients];
15+
16+
function ClientsBanner() {
17+
return (
18+
<div className="docwire__clients-banner">
19+
<p className="docwire__clients-banner__label">Trusted by</p>
20+
21+
<div className="docwire__clients-banner__track-wrap">
22+
<div className="docwire__clients-banner__track">
23+
{doubled.map((client, i) => (
24+
<a
25+
key={i}
26+
href={client.url}
27+
className="docwire__clients-banner__item"
28+
target="_blank"
29+
rel="noopener noreferrer"
30+
aria-label={client.name}
31+
// Hide duplicates from screen readers and keyboard navigation
32+
aria-hidden={i >= clients.length ? 'true' : undefined}
33+
tabIndex={i >= clients.length ? -1 : 0}
34+
>
35+
{client.image
36+
? <img src={client.image} alt={client.name} />
37+
: <span>{client.name}</span>
38+
}
39+
</a>
40+
))}
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
}
46+
47+
export default ClientsBanner;

‎src/containers/components/home/clientsbanner.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
2+
.docwire__clients-banner {
3+
width: 100%;
4+
padding: 2.5rem 0 3rem;
5+
overflow: hidden;
6+
background: transparent;
7+
}
8+
9+
10+
.docwire__clients-banner__label {
11+
text-align: center;
12+
font-family: var(--font-family-ui);
13+
font-size: 0.78rem;
14+
font-weight: 600;
15+
letter-spacing: 0.12em;
16+
text-transform: uppercase;
17+
color: var(--color-subtext);
18+
margin-bottom: 1.5rem;
19+
}
20+
21+
22+
.docwire__clients-banner__track-wrap {
23+
position: relative;
24+
}
25+
26+
.docwire__clients-banner__track-wrap::before,
27+
.docwire__clients-banner__track-wrap::after {
28+
content: '';
29+
position: absolute;
30+
top: 0;
31+
bottom: 0;
32+
width: 120px;
33+
z-index: 2;
34+
pointer-events: none;
35+
}
36+
37+
.docwire__clients-banner__track-wrap::before {
38+
left: 0;
39+
background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
40+
}
41+
42+
.docwire__clients-banner__track-wrap::after {
43+
right: 0;
44+
background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
45+
}
46+
47+
48+
.docwire__clients-banner__track {
49+
display: flex;
50+
align-items: center;
51+
width: max-content;
52+
animation: docwire-marquee 28s linear infinite;
53+
}
54+
55+
.docwire__clients-banner__track:hover {
56+
animation-play-state: paused;
57+
}
58+
59+
@keyframes docwire-marquee {
60+
from { transform: translateX(0); }
61+
to { transform: translateX(-50%); }
62+
}
63+
64+
65+
.docwire__clients-banner__item {
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
padding: 0 3rem;
70+
flex-shrink: 0;
71+
text-decoration: none;
72+
opacity: 0.5;
73+
transition: opacity 0.25s ease, transform 0.2s ease;
74+
}
75+
76+
.docwire__clients-banner__item:hover {
77+
opacity: 1;
78+
transform: scale(1.08);
79+
}
80+
81+
.docwire__clients-banner__item img {
82+
height: 36px;
83+
width: auto;
84+
display: block;
85+
86+
filter: grayscale(1) brightness(0.65) contrast(1.1);
87+
transition: filter 0.25s ease;
88+
}
89+
90+
.docwire__clients-banner__item:hover img {
91+
/* Reveal full colour on hover in both modes */
92+
filter: grayscale(0) brightness(1) contrast(1);
93+
}
94+
95+
html[data-theme='dark'] .docwire__clients-banner__item img {
96+
filter: grayscale(1) brightness(0) invert(1) opacity(0.7);
97+
}
98+
99+
html[data-theme='dark'] .docwire__clients-banner__item:hover img {
100+
filter: grayscale(0) brightness(1.1) invert(0);
101+
}
102+
103+
104+
.docwire__clients-banner__item span {
105+
font-family: var(--font-family-ui);
106+
font-size: 1.05rem;
107+
font-weight: 700;
108+
white-space: nowrap;
109+
letter-spacing: 0.03em;
110+
111+
color: var(--brand-black);
112+
transition: color 0.25s ease;
113+
}
114+
115+
html[data-theme='dark'] .docwire__clients-banner__item span {
116+
color: var(--brand-white);
117+
}
118+
119+
.docwire__clients-banner__item:hover span {
120+
color: var(--brand-violet);
121+
}
122+
123+
124+
@media screen and (max-width: 750px) {
125+
.docwire__clients-banner__item {
126+
padding: 0 2rem;
127+
}
128+
129+
.docwire__clients-banner__item img {
130+
height: 28px;
131+
}
132+
133+
.docwire__clients-banner__track-wrap::before,
134+
.docwire__clients-banner__track-wrap::after {
135+
width: 60px;
136+
}
137+
}

‎src/containers/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ export {default as WingsSection} from './components/home/WingsSection'
99
export {default as Contact} from './components/contactUs/Contact'
1010
export {default as NoPageComponent} from './components/noPage/NoPageComponent'
1111
export {default as ShowcaseTemplate} from './usecases/ShowcaseTemplate'
12+
export {default as ClientsBanner} from './components/home/ClientsBanner'

‎src/css/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ p {
302302
max-width: var(--container-max-width);
303303
margin-left: auto;
304304
margin-right: auto;
305-
margin-bottom: 10vh;
305+
margin-bottom: 1vh;
306306
}
307307

308308
/* Card Utility */

‎src/pages/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
HomeHaveYouEver,
1111
CTA,
1212
HomeHeader,
13-
SupportedFormats
13+
SupportedFormats,
14+
ClientsBanner
1415
} from "../containers";
1516

1617
export default function Home() {
@@ -22,6 +23,7 @@ export default function Home() {
2223
<main>
2324
{/* Nav is handled by Docusaurus Layout */}
2425
<HomeHeader/>
26+
<ClientsBanner />
2527
<HomeHaveYouEver/>
2628
<SupportedFormats/>
2729
<UnlockThePower/>

0 commit comments

Comments
 (0)