diff --git a/public/images/community/events/card01.png b/public/images/community/events/card01.png index 7e483f6..db4ea74 100644 Binary files a/public/images/community/events/card01.png and b/public/images/community/events/card01.png differ diff --git a/public/images/community/events/card02.png b/public/images/community/events/card02.png index cbecb58..52ecae7 100644 Binary files a/public/images/community/events/card02.png and b/public/images/community/events/card02.png differ diff --git a/public/images/community/events/card03.png b/public/images/community/events/card03.png index c89b9bb..886d890 100644 Binary files a/public/images/community/events/card03.png and b/public/images/community/events/card03.png differ diff --git a/public/images/community/events/card04.png b/public/images/community/events/card04.png index e94c603..568806a 100644 Binary files a/public/images/community/events/card04.png and b/public/images/community/events/card04.png differ diff --git a/public/images/community/hero/arrow.svg b/public/images/community/hero/arrow.svg index ff75bfa..5eb1943 100644 --- a/public/images/community/hero/arrow.svg +++ b/public/images/community/hero/arrow.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/public/images/community/hero/hero.png b/public/images/community/hero/hero.png index af427d8..cdae5e2 100644 Binary files a/public/images/community/hero/hero.png and b/public/images/community/hero/hero.png differ diff --git a/public/images/community/hero/hero2.png b/public/images/community/hero/hero2.png index b1e28ea..cdcab2e 100644 Binary files a/public/images/community/hero/hero2.png and b/public/images/community/hero/hero2.png differ diff --git a/public/images/community/socials/planet.png b/public/images/community/socials/planet.png index 38ac11a..806e423 100644 Binary files a/public/images/community/socials/planet.png and b/public/images/community/socials/planet.png differ diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss index 425bc8a..f902f2d 100644 --- a/src/components/sections/community/events/events.module.scss +++ b/src/components/sections/community/events/events.module.scss @@ -2,46 +2,56 @@ .section { display: flex; - place-content: center; align-items: center; + flex-direction: column; margin-top: tovw(55px, 'default', 20px); padding: tovw(220px, 'default', 72px) 0; + .slider__container { + width: calc(100% - tovw(305px, 'default', 16px)); + margin-right: 0; + margin-left: auto; + + @media screen and (max-width: 800px) { + width: calc(100% - tovw(16px, 'mobile')); + } + } + .heading { display: flex; align-items: center; justify-content: space-between; - border-bottom: tovw(1px, 'default', 1px) solid #fbfbfb; - padding-bottom: tovw(60px, 'default', 30px); margin-bottom: tovw(80px, 'default', 64px); + padding-bottom: tovw(60px, 'default', 30px); + border-bottom: tovw(1px, 'default', 1px) solid var(--color-white); @media screen and (max-width: 800px) { - flex-direction: column; align-items: flex-start; - border-bottom: unset; + flex-direction: column; padding-bottom: unset; + border-bottom: unset; gap: tovw(16px, 'mobile'); } h2 { - text-shadow: 0px 0px tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); + text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); } span { - line-height: 1.32; - font-size: tovw(24px, 'default', 18px); font-family: var(--font-tt-hoves), sans-serif; + font-size: tovw(24px, 'default', 18px); + line-height: 1.32; width: tovw(350px, 'default', 265px); } .gradient { position: absolute; z-index: -1; - left: 0; right: 0; - width: 100vw; - margin-left: 0; + left: 0; + width: 100%; height: tovw(500px, 'default', 250px); + margin-left: 0; content: ''; user-select: none; pointer-events: none; @@ -60,16 +70,12 @@ } .eventsContainer { - display: grid; - grid-auto-flow: column; - - &::after, - &::before { + &::after { position: absolute; - content: ''; - height: 100%; + right: tovw(-20px, 'default', -20px); width: tovw(280px, 'default', 150px); - right: 0; + height: 100%; + content: ''; background: linear-gradient( 90deg, rgb(3 3 3 / 0) 0%, @@ -78,42 +84,31 @@ ); @media screen and (max-width: 800px) { + width: tovw(20px, 'default', 20px); background: linear-gradient( 90deg, rgb(3 3 3 / 0) 0%, rgb(3 3 3 / 0.55) 35%, rgb(3 3 3 / 1) 95% ); - width: tovw(20px, 'default', 20px); } } - - &::before { - left: 0; - z-index: 1; - background: linear-gradient( - 270deg, - rgb(3 3 3 / 0) 0%, - rgb(3 3 3 / 0.95) 35%, - rgb(3 3 3 / 1) 65% - ); - } } .navigation { display: flex; - place-content: center; width: 100%; - gap: tovw(25px, 'default', 15px); padding-top: tovw(75px, 'default', 45px); + place-content: center; + gap: tovw(25px, 'default', 15px); @media screen and (max-width: 800px) { display: none; } .arrow { - cursor: pointer; width: tovw(50px, 'default', 30px); + cursor: pointer; &:first-child { transform: rotate(180deg); diff --git a/src/components/sections/community/events/index.tsx b/src/components/sections/community/events/index.tsx index e1bdb24..605ffa4 100644 --- a/src/components/sections/community/events/index.tsx +++ b/src/components/sections/community/events/index.tsx @@ -1,3 +1,5 @@ +import 'keen-slider/keen-slider.min.css' + import { useKeenSlider } from 'keen-slider/react' import { useState } from 'react' @@ -17,7 +19,8 @@ const Events = () => { const [sliderRef, slider] = useKeenSlider({ initial: 0, - loop: false, + loop: true, + mode: 'free-snap', slideChanged(slider) { setCurrentSlide(slider.track.details.rel) }, @@ -29,13 +32,13 @@ const Events = () => { }, breakpoints: { '(max-width: 1050px)': { - slides: { perView: 1, spacing: 12 } + slides: { perView: 1.12, spacing: 12 } }, '(min-width: 1050px)': { slides: { perView: 2, spacing: 22 } }, '(min-width: 1600px)': { - slides: { perView: 3, spacing: 26 } + slides: { perView: 3.69, spacing: 24 } } } }) @@ -52,11 +55,15 @@ const Events = () => {
+ +
{events.map((event, i) => ( ))}
+
+ {loaded && slider.current && (
{ const carouselRef = useRef(null) const { vw } = useRealViewport() const [ref] = useKeenSlider({ - // loop: true, mode: 'free-snap', slides: { perView: 1.2, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b7845fb..6bb85e9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import { Meta } from '~/components/common/meta' import { PageLayout } from '~/components/layout/page' +import Events from '~/components/sections/community/events' import Benefits from '~/components/sections/homepage/benefits' import Hero from '~/components/sections/homepage/hero' import WhatOthersSay from '~/components/sections/homepage/what-others-say' @@ -12,6 +13,7 @@ const HomePage: Page = () => { + ) diff --git a/yarn.lock b/yarn.lock index 5b8a595..ab81ecc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -691,9 +691,9 @@ camelcase@^5.3.1: integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317: - version "1.0.30001323" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz#a451ff80dec7033016843f532efda18f02eec011" - integrity sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA== + version "1.0.30001325" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606" + integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ== chalk@^2.0.0: version "2.4.2" @@ -1914,9 +1914,9 @@ is-negative-zero@^2.0.2: integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA== is-number-object@^1.0.4: - version "1.0.6" - resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0" - integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g== + version "1.0.7" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc" + integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ== dependencies: has-tostringtag "^1.0.0" @@ -1949,9 +1949,11 @@ is-regexp@^2.0.0: integrity sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA== is-shared-array-buffer@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6" - integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA== + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79" + integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA== + dependencies: + call-bind "^1.0.2" is-stream@^2.0.0: version "2.0.1"