diff --git a/package-lock.json b/package-lock.json index d277f53..e264862 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,8 @@ "react-router": "^6.17.0", "react-router-dom": "^6.17.0", "react-scripts": "5.0.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -6647,6 +6649,12 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -7925,6 +7933,12 @@ "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==", + "license": "MIT" + }, "node_modules/entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -14683,6 +14697,15 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "license": "MIT", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -17835,6 +17858,23 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "license": "MIT", + "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/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -18071,6 +18111,12 @@ "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==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -18785,6 +18831,15 @@ "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==", + "license": "MIT", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -19063,6 +19118,12 @@ "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==", + "license": "MIT" + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index 9ee87c6..a801772 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "react-router": "^6.17.0", "react-router-dom": "^6.17.0", "react-scripts": "5.0.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index cb7d174..8cb62f6 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,9 @@ import {Games} from "./pages/Games"; import {Activities} from "./pages/Activities"; import {activities, games} from "./data/content"; import {Navbar} from './components/common/Navbar'; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; + function App() { return ( diff --git a/src/components/Home/CardItem.js b/src/components/Home/CardItem.js index f292637..4b0ec25 100644 --- a/src/components/Home/CardItem.js +++ b/src/components/Home/CardItem.js @@ -10,9 +10,14 @@ const CardItem = (props) => { height: '100%', }; + const cardStyle = { + width: '500px', + margin: '20px' + }; + return (
-
+
{ - return ( + // Slick settings for the carousel + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 3, // Number of cards to show at once + slidesToScroll: 1, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: true, + dots: true + } + }, + { + breakpoint: 600, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + } + } + ] + }; + return (
-
- + { label="Search Words" path='/activities/search-any-word' title='Search Words' /> - -
+
) } diff --git a/src/styles/pages/Home/CardItem.css b/src/styles/pages/Home/CardItem.css index 6e2bf78..029e8c8 100644 --- a/src/styles/pages/Home/CardItem.css +++ b/src/styles/pages/Home/CardItem.css @@ -1,5 +1,5 @@ .card-image{ - width: 100%; + width: 266px; height: 35vh; display: flex; justify-content: center; @@ -7,7 +7,7 @@ /* padding: 0 !important; */ } .card-body{ - width: 100%; + width: 266px; height: 22vh; display: flex; flex-direction: column; diff --git a/src/styles/pages/Home/Cards.css b/src/styles/pages/Home/Cards.css index 12756ae..731c689 100644 --- a/src/styles/pages/Home/Cards.css +++ b/src/styles/pages/Home/Cards.css @@ -1,62 +1,64 @@ .cards { - padding: 4rem; - background: #fff; - } - - h1 { - text-align: center; - } - - .cards__container { - display: flex; - flex-flow: column; - align-items: center; - max-width: 1120px; - width: 100%; - margin: 0 auto; - } - - .cards__wrapper { - position: relative; - margin: 50px 0 45px; - } - - .cards__items { - margin-bottom: 24px; - } - - .cards__item { - display: flex; - flex: 1; - margin: 0 1rem; - border-radius: 10px; - } - - .cards__item__link { - display: flex; - flex-flow: column; - width: 100%; - box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); - -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - border-radius: 10px; - overflow: hidden; - text-decoration: none; - } - - .cards__item__pic-wrap { - position: relative; - width: 100%; - padding-top: 67%; - overflow: hidden; - } - - .fade-img { - animation-name: fade-img; - animation-duration: 2s; - } - - /* .cards__item__pic-wrap::after { + padding: 4rem; + width: 300px; + background: #fff; +} + +h1 { + text-align: center; +} + +.cards__container { + display: flex; + flex-flow: column; + align-items: center; + max-width: 1120px; + width: 100%; + margin: 0 auto; +} + +.cards__wrapper { + position: relative; + margin: 50px 0 45px; +} + +.cards__items { + margin-bottom: 24px; +} + +.cards__item { + display: flex; + flex: 1; + width: 200px; + margin: 0 1rem; + border-radius: 10px; +} + +.cards__item__link { + display: flex; + flex-flow: column; + width: 100%; + box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); + -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); + filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); + border-radius: 10px; + overflow: hidden; + text-decoration: none; +} + +.cards__item__pic-wrap { + position: relative; + width: 100%; + padding-top: 67%; + overflow: hidden; +} + +.fade-img { + animation-name: fade-img; + animation-duration: 2s; +} + +/* .cards__item__pic-wrap::after { content: attr(data-category); position: absolute; bottom: 0; @@ -69,42 +71,42 @@ background-color: #1f98f4; box-sizing: border-box; } */ - .cards__item__img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - width: 100%; - max-width: 100%; - height: 100%; - max-height: 100%; - object-fit: cover; - transition: all 0.2s linear; - } - - .cards__item__img:hover { - transform: scale(1.1); - } - - .cards__item__info { - padding: 20px 30px 30px; - } - - .cards__item__text { - color: #252e48; - font-size: 18px; - line-height: 24px; - } - - @media only screen and (min-width: 1200px) { - .content__blog__container { - width: 84%; - } +.cards__item__img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + object-fit: cover; + transition: all 0.2s linear; +} + +.cards__item__img:hover { + transform: scale(1.1); +} + +.cards__item__info { + padding: 20px 30px 30px; +} + +.cards__item__text { + color: #252e48; + font-size: 18px; + line-height: 24px; +} + +@media only screen and (min-width: 1200px) { + .content__blog__container { + width: 84%; } - - /* @media screen and (max-width: 426px) { +} + +/* @media screen and (max-width: 426px) { .cards__item__pic-wrap::after { margin-left: -5.35rem; } @@ -117,38 +119,60 @@ } */ - @media only screen and (min-width: 600px) { - .cards__items { - display: flex; - } - .cards__item { - display: flex; - flex: 3; - margin: 1rem ; - border-radius: 10px; +@media only screen and (min-width: 600px) { + .cards__items { + display: flex; + } - } - /* .cards__item__pic-wrap { + .cards__item { + display: flex; + flex: 3; + margin: 1rem; + border-radius: 10px; + + } + + /* .cards__item__pic-wrap { padding-top: 70%; } */ - .cards__item__info { - padding: 10px 10px 10px; - } - .cards__item__text { - font-size: 0.9rem; - } - + .cards__item__info { + padding: 10px 10px 10px; } - - @media only screen and (min-width: 1024px) { - .cards__items { - display: flex; - } + .cards__item__text { + font-size: 0.9rem; } - - @media only screen and (max-width: 1024px) { - .cards__item { - margin-bottom: 2rem; - } - } \ No newline at end of file + +} + + +@media only screen and (min-width: 1024px) { + .cards__items { + display: flex; + } +} + +@media only screen and (max-width: 1024px) { + .cards__item { + margin-bottom: 2rem; + } +} + +/* SLIDER */ +.slick-slide { + padding: 10px; +} + +.slick-prev:before, +.slick-next:before { + color: rgb(255, 255, 255); +} + +.slick-dots li button:before { + font-size: 12px; + color: rgb(255, 255, 255); +} + +.slick-dots li.slick-active button:before { + color: red; +} \ No newline at end of file