Community UI Improves (#10)

public/images/community/hero/arrow.svg

@@ -1,3 +1,3 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.75817 23H23L23 3.75817L20.4767 3.74743L20.4874 18.6835L1.80392 0L0 1.80392L18.6835 20.4874L3.74743 20.4767L3.75817 23Z" fill="#FBFBFB"/>
-</svg>
+<svg width="23" height="23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.75817 23H23V3.75817l-2.5233-.01074.0107 14.93607L1.80392 0 0 1.80392 18.6835 20.4874l-14.93607-.0107L3.75817 23Z" fill="#FBFBFB" />
+</svg>

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);

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<HTMLDivElement>({
     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 = () => {
           </span>
           <div className={s.gradient} />
         </div>
+      </Container>
+      <div className={s['slider__container']}>
         <div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
           {events.map((event, i) => (
             <Card key={i} data={event} className={`keen-slider__slide`} />
           ))}
         </div>
+      </div>
+      <Container>
         {loaded && slider.current && (
           <div className={s.navigation}>
             <ArrowSlider

src/components/sections/homepage/what-others-say/index.tsx

@@ -19,7 +19,6 @@ const WhatOthersSay = () => {
   const carouselRef = useRef<HTMLDivElement>(null)
   const { vw } = useRealViewport()
   const [ref] = useKeenSlider<HTMLDivElement>({
-    // loop: true,
     mode: 'free-snap',
     slides: {
       perView: 1.2,

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 = () => {
       <Meta />
       <Hero />
       <Benefits />
+      <Events />
       <WhatOthersSay />
     </PageLayout>
   )

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"