Community UI Improves (#10)

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