Skip to content

S
Saddlemountain Page
Commit 06210240 authored by Verónica Silva's avatar Verónica Silva
Browse files
Options

Component Clients created with react-elastic-carousel

parent 2d098e0d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 1 deletion
package-lock.json
View file @ 06210240
......@@ -4375,6 +4375,11 @@
}
}
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"clean-css": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
......@@ -9463,6 +9468,14 @@
"object-visit": "^1.0.0"
}
},
"material-ui-image": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/material-ui-image/-/material-ui-image-3.3.2.tgz",
"integrity": "sha512-WE5QE0Rjdx9jPKuI0LWI7s8VQ9cifPIXObu8AUCRcidXGV3NqPI9C8c9A/C0MofKpkZ3buG8+IT9N7GgSmxXeg==",
"requires": {
"prop-types": "^15.5.8"
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......@@ -11995,6 +12008,17 @@
"scheduler": "^0.20.2"
}
},
"react-elastic-carousel": {
"version": "0.11.5",
"resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz",
"integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==",
"requires": {
"classnames": "^2.2.6",
"react-only-when": "^1.0.2",
"react-swipeable": "^5.5.1",
"resize-observer-polyfill": "1.5.0"
}
},
"react-error-overlay": {
"version": "6.0.9",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
......@@ -12005,6 +12029,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-only-when": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz",
"integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q=="
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
......@@ -12252,6 +12281,14 @@
}
}
},
"react-swipeable": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz",
"integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==",
"requires": {
"prop-types": "^15.6.2"
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
......@@ -12586,6 +12623,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
},
"resize-observer-polyfill": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
},
"resolve": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
......
public/assets/clients/hr.svg 0 → 100644
View file @ 06210240
This diff is collapsed.
public/assets/clients/ragasa.svg 0 → 100644
View file @ 06210240
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="200.000000pt" height="155.000000pt" viewBox="0 0 200.000000 155.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,155.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M991 1110 l-1 -95 32 33 32 32 -31 62 -32 63 0 -95z"/>
<path d="M1027 1015 c-36 -31 -38 -36 -35 -86 l3 -52 54 50 c54 49 55 50 42
82 -8 17 -16 33 -20 35 -3 2 -23 -11 -44 -29z"/>
<path d="M1085 919 c-17 -17 -45 -39 -62 -51 -31 -18 -33 -23 -33 -74 0 -39 4
-54 14 -54 19 0 76 41 98 71 23 30 34 99 21 123 -8 14 -13 12 -38 -15z"/>
<path d="M350 565 l0 -135 25 0 c24 0 25 3 25 55 0 51 2 55 24 55 30 0 41 -14
55 -67 10 -36 16 -43 36 -43 14 0 25 3 25 8 0 21 -24 89 -36 103 -12 14 -12
18 6 34 13 12 20 31 20 56 0 53 -26 69 -112 69 l-68 0 0 -135z m111 95 c21
-12 25 -50 7 -68 -7 -7 -25 -12 -40 -12 -26 0 -28 3 -28 38 0 53 17 65 61 42z"/>
<path d="M635 621 c-40 -17 -60 -51 -60 -102 0 -36 5 -54 22 -70 26 -26 67
-28 93 -4 18 16 20 17 20 2 0 -11 8 -17 23 -17 21 0 22 3 20 97 l-1 98 -49 2
c-26 1 -57 -2 -68 -6z m65 -74 c0 -41 -21 -87 -40 -87 -18 0 -40 32 -40 58 0
38 26 72 56 72 22 0 24 -4 24 -43z"/>
<path d="M832 612 c-33 -26 -46 -83 -28 -126 22 -53 59 -66 120 -41 16 7 17 5
11 -16 -11 -37 -35 -51 -76 -44 -28 5 -38 3 -43 -10 -7 -20 16 -30 72 -29 33
1 50 7 70 27 24 25 26 33 30 142 4 111 4 115 -16 115 -12 0 -24 -5 -27 -10 -4
-7 -12 -7 -25 0 -28 15 -62 12 -88 -8z m101 -57 c12 -43 -6 -85 -37 -85 -30 0
-49 23 -49 60 0 64 69 84 86 25z"/>
<path d="M1081 616 c-33 -18 -50 -54 -50 -101 0 -45 15 -70 50 -83 26 -10 69
1 69 18 0 5 5 10 10 10 6 0 10 -7 10 -15 0 -8 8 -15 18 -15 16 0 18 10 17 98
l-1 97 -50 2 c-27 2 -60 -3 -73 -11z m79 -55 c0 -15 -5 -42 -11 -59 -20 -59
-69 -48 -69 16 0 42 24 72 57 72 19 0 23 -5 23 -29z"/>
<path d="M1288 620 c-10 -6 -23 -20 -29 -31 -14 -27 8 -61 51 -79 45 -19 36
-45 -15 -45 -29 0 -40 -4 -40 -15 0 -23 91 -26 117 -4 30 28 20 64 -30 97 -34
23 -41 32 -32 43 8 8 22 11 42 7 26 -5 30 -3 26 13 -4 22 -62 31 -90 14z"/>
<path d="M1473 611 c-53 -33 -63 -133 -18 -171 22 -18 63 -15 85 5 18 16 20
17 20 2 0 -11 8 -17 23 -17 21 0 22 3 21 97 l-2 98 -48 3 c-35 2 -58 -3 -81
-17z m77 -69 c0 -37 -5 -54 -21 -68 -21 -19 -21 -18 -40 5 -23 28 -24 43 -4
81 11 21 23 30 40 30 23 0 25 -4 25 -48z"/>
</g>
</svg>
src/assets/styles/css/carousel.css 0 → 100644
View file @ 06210240
button.rec-dot.rec-dot_active{
background-color: rgb(21, 100, 112, 1);
box-shadow: 0 0 1px 3px rgba(21, 100, 112, 0.5);
}
button.rec-dot:hover, button.rec-dot:active, button.rec-dot:focus {
box-shadow: 0 0 1px 3px rgba(21, 100, 112, 0.5);
}
src/assets/styles/styled.js
View file @ 06210240
......@@ -29,4 +29,10 @@ export const FooterContainer = styled.footer`
width: 100%;
height: auto;
background-color: ${props => props.bg};
margin-top: 40px;
`
export const ClientImage = styled.img`
width: auto;
height: 70px;
`
src/components/ClientCarousel.jsx 0 → 100644
View file @ 06210240
import React from "react"
import Carousel, { consts } from "react-elastic-carousel"
import IconButton from "@mui/material/IconButton"
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"
import ChevronRightIcon from "@mui/icons-material/ChevronRight"
import { makeStyles } from "@material-ui/core"
import { ClientImage } from "../assets/styles/styled"
import "../assets/styles/css/carousel.css"
import { Typography } from "@mui/material"
import myTheme from "../assets/styles/myTheme"
const myPalette = myTheme.palette
const clientsSrc = [
"ads.png",
"GE.jpg",
"hr.svg",
"inoac.png",
"ragasa.svg",
"RQ.png",
"slide03.png",
"slide04.png",
"tupy.png",
"VDE.png",
"viba.png"
]
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2, itemsToScroll: 2 },
{ width: 850, itemsToShow: 3, itemsToScroll: 3 },
{ width: 1150, itemsToShow: 4, itemsToScroll: 2 },
{ width: 1450, itemsToShow: 5, itemsToScroll: 2 },
{ width: 1750, itemsToShow: 6, itemsToScroll: 2 },
]
const useStyles = makeStyles((theme) => ({
container: {
padding: "20px 20px",
margin: "20px 20px"
},
highlighter: {
color: myPalette.primary.main
}
}))
function ClientCarousel() {
const classes = useStyles()
function myArrow({ type, onClick, isEdge }) {
const pointer = type === consts.PREV ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)
return (
<IconButton onClick={onClick} disabled={isEdge}>
{pointer}
</IconButton>
)
}
return (
<div className={classes.container}>
<Typography id="carousel-title" variant="h5" component="h1" align="center" sx={{ mb: 3, color: "#404040" }}>
Ellos confían en <span className={classes.highlighter}>nosotros</span>
</Typography>
<Carousel
breakPoints={breakPoints}
enableAutoPlay
autoPlaySpeed={3000}
itemPadding={[10, 50]}
renderArrow={myArrow}
>
{
clientsSrc.map((src, index) => {
return (
<ClientImage key={index} src={`${process.env.PUBLIC_URL}/assets/clients/${src}`} />
)
})
}
</Carousel>
</div>
)
}
export default ClientCarousel
src/components/Footer.jsx
View file @ 06210240
......@@ -11,7 +11,6 @@ import ListItem from "@mui/material/ListItem"
import ListItemText from "@mui/material/ListItemText"
import ContactForm from "./ContactForm"
import ContactButton from "./ContactButton"
import { FooterContainer, NavLinkFooter } from "../assets/styles/styled"
import myTheme from "../assets/styles/myTheme"
......
src/views/Home.jsx
View file @ 06210240
import React from "react"
import Hero from "../components/Hero"
import ClientCarousel from "../components/ClientCarousel"
const Home = () => {
return (
<div>
<Hero />
<ClientCarousel />
</div>
)
}
......
Markdown is supported
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