Skip to content

Commit b1ca8e3

Browse files
MMeschMMesch
committed
Logos: replace carousel with dense flex-wrap grid showing all partners
1 parent 5cba40a commit b1ca8e3

3 files changed

Lines changed: 83 additions & 442 deletions

File tree

‎src/components/home/Hero/LogosTableBy8.tsx‎

Lines changed: 42 additions & 340 deletions
Original file line numberDiff line numberDiff line change
@@ -35,348 +35,50 @@ import CNESLogoUrl from "@site/static/img/logos/CNES.png";
3535
import GatesFoundationLogoUrl from "@site/static/img/logos/GatesFoundation.png";
3636
import SovereignTechAgencyLogoUrl from "@site/static/img/logos/SovereignTechAgency.png";
3737

38-
import Slider from "react-slick";
39-
// Import css files
40-
import "slick-carousel/slick/slick.css";
41-
import "slick-carousel/slick/slick-theme.css";
38+
const logos = [
39+
{ src: BloombergLogoUrl, alt: "Bloomberg" },
40+
{ src: SGLogoUrl, alt: "Société Générale" },
41+
{ src: AirbusLogoUrl, alt: "Airbus" },
42+
{ src: DEShawLogoUrl, alt: "DE Shaw" },
43+
{ src: HarvardLogoUrl, alt: "Harvard University" },
44+
{ src: GatesFoundationLogoUrl, alt: "Gates Foundation" },
45+
{ src: SovereignTechAgencyLogoUrl, alt: "Sovereign Tech Agency" },
46+
{ src: NatixisLogoUrl, alt: "Natixis" },
47+
{ src: CFMLogoUrl, alt: "CFM" },
48+
{ src: NumfocusLogoUrl, alt: "NumFocus" },
49+
{ src: INRIALogoUrl, alt: "INRIA" },
50+
{ src: EngieLogoUrl, alt: "Engie" },
51+
{ src: EMBLLogoUrl, alt: "EMBL" },
52+
{ src: ESALogoUrl, alt: "ESA" },
53+
{ src: CEALogoUrl, alt: "CEA" },
54+
{ src: EcolePolytechniqueLogoUrl, alt: "École Polytechnique" },
55+
{ src: UniversiteParisCiteLogoUrl, alt: "Université Paris Cité" },
56+
{ src: UniversiteParisSaclayLogoUrl, alt: "Université Paris-Saclay" },
57+
{ src: CNAMLogoUrl, alt: "CNAM" },
58+
{ src: CalPolyLogoUrl, alt: "Cal Poly" },
59+
{ src: RapyutaLogoUrl, alt: "Rapyuta" },
60+
{ src: VoltronDataLogoUrl, alt: "Voltron Data" },
61+
{ src: QuantCoUrl, alt: "QuantCo" },
62+
{ src: EnthoughtLogoUrl, alt: "Enthought" },
63+
{ src: SafranLogoUrl, alt: "Safran" },
64+
{ src: UnitedRoboticsLogoUrl, alt: "United Robotics" },
65+
{ src: RobocorpLogoUrl, alt: "Robocorp" },
66+
{ src: TDKLogoUrl, alt: "TDK" },
67+
{ src: CressetLogoUrl, alt: "Cresset" },
68+
{ src: MaxFordhamLogoUrl, alt: "MaxFordham" },
69+
{ src: GainTheoryUrl, alt: "Gain Theory" },
70+
{ src: JRCLogoUrl, alt: "JRC" },
71+
{ src: ERDCLogoUrl, alt: "ERDC" },
72+
{ src: PandaLogoUrl, alt: "Panda" },
73+
{ src: CNESLogoUrl, alt: "CNES" },
74+
];
4275

43-
export default function SimpleSlider() {
44-
let settings = {
45-
dots: true,
46-
infinite: true,
47-
speed: 1000,
48-
slidesToShow: 1,
49-
slidesToScroll: 1,
50-
arrows: false,
51-
autoplay: true,
52-
};
76+
export default function LogoGrid() {
5377
return (
54-
<Slider {...settings} style={{ maxWidth: "1500px", justifyContent: "center" }}>
55-
<div>
56-
<LogosTable1 />
57-
</div>
58-
<div>
59-
<LogosTable2 />
60-
</div>
61-
<div>
62-
<LogosTable3 />
63-
</div>
64-
<div>
65-
<LogosTable4 />
66-
</div>
67-
<div>
68-
<LogosTable5 />
69-
</div>
70-
</Slider>
71-
);
72-
}
73-
74-
export function LogosTable1() {
75-
return (
76-
<div className={"container" + " " + styles.table_with_8_customers}>
77-
<div className="row row--no-gutters">
78-
<div className={"col col--3 flex-full-centered"}>
79-
<img
80-
src={BloombergLogoUrl}
81-
className={styles.customer_logo}
82-
alt={"Logo of Bloomberg."}
83-
/>
84-
</div>
85-
<div className={"col col--3 flex-full-centered"}>
86-
<img
87-
src={SGLogoUrl}
88-
className={styles.customer_logo}
89-
alt={"Logo of Société Générale bank."}
90-
/>
91-
</div>
92-
<div className={"col col--3 flex-full-centered"}>
93-
<img
94-
src={RapyutaLogoUrl}
95-
className={styles.customer_logo}
96-
alt={"Logo of Rapyuta company."}
97-
/>
98-
</div>
99-
<div className="col col--3 flex-full-centered">
100-
<img
101-
src={CFMLogoUrl}
102-
className={styles.customer_logo}
103-
alt={"Logo of CFM) "}
104-
/>
105-
</div>
106-
</div>
107-
<div className="row row--no-gutters">
108-
<div className="col col--3 flex-full-centered">
109-
<img
110-
src={EngieLogoUrl}
111-
className={styles.customer_logo}
112-
alt={"Logo of Engie company."}
113-
/>
114-
</div>
115-
<div className="col col--3 flex-full-centered">
116-
<img
117-
src={JRCLogoUrl}
118-
className={styles.customer_logo}
119-
alt={"Logo of JRC."}
120-
style={{ width: "100px" }}
121-
/>
122-
</div>
123-
124-
<div className="col col--3 flex-full-centered">
125-
<img
126-
src={ERDCLogoUrl}
127-
className={styles.customer_logo}
128-
alt={"Logo of ERDC."}
129-
/>
130-
</div>
131-
<div className="col col--3 flex-full-centered">
132-
<img
133-
src={PandaLogoUrl}
134-
className={styles.customer_logo}
135-
alt={"Logo of Panda company."}
136-
/>
137-
</div>
138-
</div>
139-
</div>
140-
);
141-
}
142-
143-
export function LogosTable2() {
144-
return (
145-
<div className={"container" + " " + styles.table_with_8_customers}>
146-
<div className="row row--no-gutters">
147-
<div className="col col--3 flex-full-centered">
148-
<img
149-
src={UniversiteParisCiteLogoUrl}
150-
className={styles.customer_logo}
151-
alt={"Logo of Paris Cité Université."}
152-
/>
153-
</div>
154-
<div className="col col--3 flex-full-centered">
155-
<img
156-
src={AirbusLogoUrl}
157-
className={styles.customer_logo}
158-
alt={"Logo of Airbus company."}
159-
/>
160-
</div>
161-
<div className="col col--3 flex-full-centered">
162-
<img
163-
src={INRIALogoUrl}
164-
className={styles.customer_logo}
165-
alt={"Logo of INRIA."}
166-
/>
167-
</div>
168-
<div className="col col--3 flex-full-centered">
169-
<img
170-
src={CNAMLogoUrl}
171-
className={styles.customer_logo}
172-
alt={"Logo of CNAM."}
173-
/>
174-
</div>
175-
</div>
176-
<div className="row row--no-gutters">
177-
<div className="col col--3 flex-full-centered">
178-
<img
179-
src={NatixisLogoUrl}
180-
className={styles.customer_logo}
181-
alt={"Logo of Natixis bank."}
182-
/>
183-
</div>
184-
<div className="col col--3 flex-full-centered">
185-
<img
186-
src={NumfocusLogoUrl}
187-
className={styles.customer_logo}
188-
alt={"Logo of Numfocus foundation."}
189-
/>
190-
</div>
191-
<div className="col col--3 flex-full-centered">
192-
<img
193-
src={RobocorpLogoUrl}
194-
className={styles.customer_logo}
195-
alt={"Logo of Robocorp company."}
196-
/>
197-
</div>
198-
<div className="col col--3 flex-full-centered">
199-
<img
200-
src={CalPolyLogoUrl}
201-
className={styles.customer_logo}
202-
alt={"Logo of CalPoly University."}
203-
/>
204-
</div>
205-
</div>
206-
</div>
207-
);
208-
}
209-
210-
export function LogosTable3() {
211-
return (
212-
<div className={"container" + " " + styles.table_with_8_customers}>
213-
<div className="row row--no-gutters">
214-
<div className="col col--3 flex-full-centered">
215-
<img
216-
src={MaxFordhamLogoUrl}
217-
className={styles.customer_logo}
218-
alt={"Logo of MaxFordham company."}
219-
/>
220-
</div>
221-
<div className="col col--3 flex-full-centered">
222-
<img
223-
src={GainTheoryUrl}
224-
className={styles.customer_logo}
225-
alt={"Logo of Gain Theory company."}
226-
style={{ width: "60px" }}
227-
/>
228-
</div>
229-
230-
<div className="col col--3 flex-full-centered">
231-
<img
232-
src={EnthoughtLogoUrl}
233-
className={styles.customer_logo}
234-
alt={"Logo of Enthought company."}
235-
/>
236-
</div>
237-
<div className="col col--3 flex-full-centered">
238-
<img
239-
src={CressetLogoUrl}
240-
className={styles.customer_logo}
241-
alt={"Logo of Cresset company."}
242-
/>
243-
</div>
244-
</div>
245-
<div className="row row--no-gutters">
246-
<div className="col col--3 flex-full-centered">
247-
<img
248-
src={TDKLogoUrl}
249-
className={styles.customer_logo}
250-
alt={"Logo of TDK company."}
251-
style={{ width: "60px" }}
252-
/>
253-
</div>
254-
<div className="col col--3 flex-full-centered">
255-
<img
256-
src={HarvardLogoUrl}
257-
className={styles.customer_logo}
258-
alt={"Logo of Harvard University."}
259-
/>
260-
</div>
261-
<div className="col col--3 flex-full-centered">
262-
<img
263-
src={EMBLLogoUrl}
264-
className={styles.customer_logo}
265-
alt={"Logo of EMBL."}
266-
/>
267-
</div>
268-
<div className="col col--3 flex-full-centered">
269-
<img
270-
src={QuantCoUrl}
271-
className={styles.customer_logo}
272-
alt={"Logo of QuantCo company."}
273-
/>
274-
</div>
275-
</div>
276-
</div>
277-
);
278-
}
279-
280-
export function LogosTable4() {
281-
return (
282-
<div className={"container" + " " + styles.table_with_8_customers}>
283-
<div className="row row--no-gutters">
284-
<div className="col col--3 flex-full-centered">
285-
<img
286-
src={VoltronDataLogoUrl}
287-
className={styles.customer_logo}
288-
alt={"Logo of Voltron Data company."}
289-
style={{ width: "140px" }}
290-
/>
291-
</div>
292-
<div className="col col--3 flex-full-centered">
293-
<img
294-
src={SafranLogoUrl}
295-
className={styles.customer_logo}
296-
alt={"Logo of Safran company."}
297-
/>
298-
</div>
299-
<div className="col col--3 flex-full-centered">
300-
<img
301-
src={DEShawLogoUrl}
302-
className={styles.customer_logo}
303-
alt={"Logo of DE Shaw company."}
304-
/>
305-
</div>
306-
<div className="col col--3 flex-full-centered">
307-
<img
308-
src={UniversiteParisSaclayLogoUrl}
309-
className={styles.customer_logo}
310-
alt={"Logo of Université Paris Saclay."}
311-
/>
312-
</div>
313-
</div>
314-
<div className="row row--no-gutters">
315-
<div className="col col--3 flex-full-centered">
316-
<img
317-
src={UnitedRoboticsLogoUrl}
318-
className={styles.customer_logo}
319-
alt={"Logo of United Robotics company."}
320-
/>
321-
</div>
322-
<div className="col col--3 flex-full-centered">
323-
<img
324-
src={CEALogoUrl}
325-
className={styles.customer_logo}
326-
style={{ width: "60px" }}
327-
alt={"Logo of CEA."}
328-
/>
329-
</div>
330-
<div className="col col--3 flex-full-centered">
331-
<img
332-
src={EcolePolytechniqueLogoUrl}
333-
className={styles.customer_logo}
334-
alt={"Logo of Ecole Polytechnique."}
335-
style={{ width: "80px" }}
336-
/>
337-
</div>
338-
<div className="col col--3 flex-full-centered">
339-
<img
340-
src={ESALogoUrl}
341-
className={styles.customer_logo}
342-
alt={"Logo of ESA."}
343-
style={{ width: "80px" }}
344-
/>
345-
</div>
346-
</div>
347-
</div>
348-
);
349-
}
350-
351-
export function LogosTable5() {
352-
return (
353-
<div className={"container" + " " + styles.table_with_8_customers}>
354-
<div className="row row--no-gutters">
355-
<div className="col col--3 flex-full-centered">
356-
<img
357-
src={CNESLogoUrl}
358-
className={styles.customer_logo}
359-
alt={"Logo of CNES."}
360-
style={{ width: "80px" }}
361-
/>
362-
</div>
363-
<div className="col col--3 flex-full-centered">
364-
<img
365-
src={GatesFoundationLogoUrl}
366-
className={styles.customer_logo}
367-
alt={"Logo of Gates Foundation."}
368-
style={{ width: "120px" }}
369-
/>
370-
</div>
371-
<div className="col col--3 flex-full-centered">
372-
<img
373-
src={SovereignTechAgencyLogoUrl}
374-
className={styles.customer_logo}
375-
alt={"Logo of the Sovereign Tech Agency."}
376-
style={{ width: "100px" }}
377-
/>
378-
</div>
379-
</div>
78+
<div className={styles.logo_grid}>
79+
{logos.map(({ src, alt }) => (
80+
<img key={alt} src={src} alt={`Logo of ${alt}`} className={styles.customer_logo} />
81+
))}
38082
</div>
38183
);
38284
}

0 commit comments

Comments
 (0)