Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit bedf7aa4 authored by Celeste Robert's avatar Celeste Robert Committed by Christophe Chaudier
Browse files

feat: add testimony carousel section

parent 4774612b
No related branches found
No related tags found
1 merge request!6Resolve "feat: add testimony carousel section"
Hide whitespace changes
Inline Side-by-side
Showing
with 277 additions and 2 deletions
package-lock.json
+ 100
− 1
View file @ bedf7aa4
......@@ -15,7 +15,9 @@
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.7.1"
"react-icons": "^4.7.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.19.1",
......@@ -4739,6 +4741,11 @@
"node": ">=8"
}
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-css": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
......@@ -5895,6 +5902,11 @@
"node": ">=10.13.0"
}
},
"node_modules/enquire.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
},
"node_modules/entities": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
......@@ -8571,6 +8583,14 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
},
"node_modules/json2mq": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
"integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
"dependencies": {
"string-convert": "^0.2.0"
}
},
"node_modules/json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
......@@ -10818,6 +10838,22 @@
"react": ">=15"
}
},
"node_modules/react-slick": {
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
"integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
"dependencies": {
"classnames": "^2.2.5",
"enquire.js": "^2.1.6",
"json2mq": "^0.2.0",
"lodash.debounce": "^4.0.8",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-textarea-autosize": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
......@@ -11304,6 +11340,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"node_modules/resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......@@ -11921,6 +11962,14 @@
"node": ">=8"
}
},
"node_modules/slick-carousel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
"peerDependencies": {
"jquery": ">=1.8.0"
}
},
"node_modules/sockjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
......@@ -12042,6 +12091,11 @@
"safe-buffer": "~5.2.0"
}
},
"node_modules/string-convert": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
"integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
},
"node_modules/string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
......@@ -17295,6 +17349,11 @@
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz",
"integrity": "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w=="
},
"classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clean-css": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
......@@ -18115,6 +18174,11 @@
"tapable": "^2.2.0"
}
},
"enquire.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
},
"entities": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
......@@ -20044,6 +20108,14 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
},
"json2mq": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
"integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
"requires": {
"string-convert": "^0.2.0"
}
},
"json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
......@@ -21602,6 +21674,18 @@
"tiny-warning": "^1.0.0"
}
},
"react-slick": {
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
"integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
"requires": {
"classnames": "^2.2.5",
"enquire.js": "^2.1.6",
"json2mq": "^0.2.0",
"lodash.debounce": "^4.0.8",
"resize-observer-polyfill": "^1.5.0"
}
},
"react-textarea-autosize": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
......@@ -21970,6 +22054,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......@@ -22440,6 +22529,11 @@
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
},
"slick-carousel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
},
"sockjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
......@@ -22537,6 +22631,11 @@
"safe-buffer": "~5.2.0"
}
},
"string-convert": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
"integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
},
"string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
......
package.json
+ 3
− 1
View file @ bedf7aa4
......@@ -22,7 +22,9 @@
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.7.1"
"react-icons": "^4.7.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.19.1",
......
src/components/TestimoniesCarousel/index.js 0 → 100644
+ 55
− 0
View file @ bedf7aa4
import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Card from '../TestimonyCard'
import testimoniesList from '@site/static/testimoniesList.json'
import styles from './styles.module.css'
function SampleNextArrow(props) {
const { onClick } = props;
return (
<div
className={styles.arrow + ' ' + styles.right}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { onClick } = props;
return (
<div
className={styles.arrow + ' ' + styles.left}
onClick={onClick}
/>
)
}
export default function TestimoniesCarousel() {
// https://react-slick.neostack.com/docs/api/
const settings = {
accessibility: true,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
infinite: false,
autoplay: true,
dots: true,
speed: 500,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<section >
<div className={styles.section}>
<h2 className={styles.title}> Clients</h2>
<Slider {...settings}>
{testimoniesList.map((props, idx) => (
<Card key={idx} {...props} />
))}
</Slider>
</div>
</section>
);
}
src/components/TestimoniesCarousel/styles.module.css 0 → 100644
+ 55
− 0
View file @ bedf7aa4
.section {
max-width: 980px;
margin: auto;
margin-bottom: 2rem;
}
.title {
text-align: center;
margin: 2rem auto
}
.right {
right: 0;
}
.left {
left: 0;
}
.arrow {
z-index: 5;
cursor: pointer;
border: none;
width: 32px;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
top: 64px;
margin: 0 18px;
background-color: transparent;
}
.left::after, .right::after {
opacity: 0.4;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border: solid var(--ifm-color-primary);
border-width: 0 5px 5px 0;
}
.left:hover::after, .right:hover::after {
opacity: 1;
}
.left::after {
transform: translate(-50%, -50%) rotate(135deg);
}
.right::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
src/components/TestimonyCard/index.js 0 → 100644
+ 15
− 0
View file @ bedf7aa4
import React from 'react';
import styles from './styles.module.css'
import useBaseUrl from "@docusaurus/useBaseUrl";
export default function HomepageList(props) {
return (
<div className={styles.wholeCard}>
<p>{props.text}</p>
<img className='margin-vert--md' src={useBaseUrl(props.img)} />
<h3 className='margin-bottom--xs'>{props.title}</h3>
<span>{props.subtitle}</span>
</div>
)
}
src/components/TestimonyCard/styles.module.css 0 → 100644
+ 16
− 0
View file @ bedf7aa4
.wholeCard {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 1rem;
}
p {
text-align: center;
max-width: 680px;
}
img {
width: 140px;
border-radius: 100px;
}
src/css/custom.css
+ 11
− 0
View file @ bedf7aa4
......@@ -24,6 +24,7 @@
--ifm-color-highlight-dark: #a81279;
--ifm-footer-background-color: var(--ifm-color-primary-darker) !important;
--ifm-footer-color: #ffffff;
--alterning-bkg: #70707011;
/* FONTS */
--ifm-font-family-base: 'asap_regular';
--ifm-font-family-bold: 'asap_semi';
......@@ -50,6 +51,7 @@
--ifm-color-primary-lighter: #f37749;
--ifm-color-primary-lightest: #f69470;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
h1, h2, h3 {
......@@ -91,3 +93,12 @@ i, em {
width: 100%;
box-shadow: none;
}
.slick-dots li button::before {
color: var(--ifm-color-primary) !important;
}
section:nth-child(even) {
background-color: var(--alterning-bkg);
padding: 2rem 0;
}
src/pages/index.js
+ 2
− 0
View file @ bedf7aa4
......@@ -5,6 +5,7 @@ import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
import useBaseUrl from "@docusaurus/useBaseUrl";
import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
const pageTitle = "Home"
......@@ -39,6 +40,7 @@ export default function Home() {
<HomepageHeader />
<main>
<HomepageFeatures />
<TestimoniesCarousel/>
</main>
</Layout>
);
......
static/img/clients/bpi.png 0 → 100644
+ 0
− 0
View file @ bedf7aa4
static/img/clients/bpi.png

25.4 KiB

static/img/clients/funmoocfp.png 0 → 100644
+ 0
− 0
View file @ bedf7aa4
static/img/clients/funmoocfp.png

28 KiB

static/img/clients/nightswapping.png 0 → 100644
+ 0
− 0
View file @ bedf7aa4
static/img/clients/nightswapping.png

43.6 KiB

static/testimoniesList.json 0 → 100644
+ 20
− 0
View file @ bedf7aa4
[
{
"title": "BPIfrance - le Hub",
"subtitle": "Prestation Ops",
"text" : "Installation et infogérance de 3 plateformes OpenShift. Mise en place du déploiement continue.",
"img" : "img/clients/bpi.png"
},
{
"title": "NightSwapping",
"subtitle": "Samuel Paccoud (CTO)",
"text" : "Christophe a mis en place avec succès notre infrastructure technique sur Amazon AWS. Ses solides compétences en administration Linux et Bash, lui ont permis d'apprendre vite toutes les nouvelles technologies que nous utilisions. Son attitude volontaire lui a permis de résoudre tous les problèmes rencontrés, y compris les plus complexes.",
"img" : "img/clients/nightswapping.png"
},
{
"title": "FUN Mooc",
"subtitle": "Prestation Ops",
"text" : "Mise en place d'une plateforme d'intégration et de déploiement continue GitLab-ci. Participation au projet open source Arnold (https://github.com/openfun/arnold).",
"img" : "img/clients/funmoocfp.png"
}
]
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service