first commit for mobile home design

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "3d-react-carousal": "^4.0.2",
     "@babel/core": "7.12.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
@@ -67,6 +68,7 @@
     "react-redux": "^7.2.5",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
+    "react-spring-3d-carousel": "^1.2.1",
     "react-toastify": "^8.0.2",
     "redux": "^4.1.1",
     "redux-devtools-extension": "^2.13.9",

public/index.html

@@ -18,6 +18,8 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/GradeFilter/index.scss

@@ -6,6 +6,9 @@
   background-color: #383838;
   border-radius: 6px;
   height: 36px;
+  &__box{
+    display: none;
+  }
   h1{
     margin: 0px;
     padding: 0px 15px;
@@ -70,3 +73,65 @@
   }
 
 }
+
+@media screen and (max-width: 640px){
+  .grade-filter{
+    max-width: 500px;
+    height: 42px;
+    position: relative;
+    h1{
+      font-size: calc(100vw / 30);
+      background-color: #9CDF52;
+      box-shadow: 0px 0px 24px #9CDF52;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      padding: 12px 15px;
+      color: white;
+    }
+    &__box{
+      flex: 1;
+      display : flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      height: 42px;
+      & img{
+        position: absolute;
+        left: 5px;
+        top: 9px;
+      }
+      span{
+        color: #6C6C6C;
+        font-size: calc(100vw / 34);
+      }
+      h2{
+        font-size: calc(100vw / 27);
+        color: #9CDF52;
+      }
+    }
+    &__list{
+      z-index: 100;
+      width: 100%;
+      position: absolute;
+      left: 0px;
+      top: 45px;
+      background : #383838;
+      padding: 10px 20px;
+      border-radius: 10px;
+      li{
+        width: calc(100% / 4.5) !important;
+        margin: 8px 5px;
+        font-size: calc(100vw / 28);
+        padding: 5px 0px;
+        border: 1px solid #666666;
+        border-radius: 5px;
+      }
+      &--active{
+        border-color: #9CDF52 !important;
+        color: #9CDF52;
+      }
+    }
+
+  }
+
+}

src/components/GradeFilter/index.tsx

@@ -1,20 +1,64 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./index.scss";
 
+import dropdown from "../../assets/icons/dropdown.png";
+
 export default function GradeFilter(props: any) {
+  const [arrowTop, setArrowTop] = useState(false);
   const { grades, grade, setGrade } = props;
+
+  useEffect(() => {
+    setArrowTop(false);
+  },[grade])
   return (
     <section className="grade-filter d-flex align-items-center">
       <h1 className="d-flex align-items-center">
-        پایه تحصیلی <span></span>
+        پایه تحصیلی
+        {window.innerWidth > 1007 ? <span></span> : null}
       </h1>
+      <div
+        className="grade-filter__box d-flex"
+        onClick={() => setArrowTop(!arrowTop)}
+      >
+        {
+          grade ? <h2>{grade}</h2> : <span>پایه تحصیلی خود را انتخاب نمائید</span>
+        }
+        <img
+          src={dropdown}
+          style={{ transform: !arrowTop ? "rotate(180deg)" : "rotate(0deg)" }}
+        />
+      </div>
+      {arrowTop ? (
+        <ul className="grade-filter__list d-flex flex-wrap">
+          {grades.map((item: String, i: any) => (
+            <li
+              key={i}
+              onClick={(e) =>
+                grade !== item ?  setGrade(item) : setGrade(null)
+              }
+              className={grade === item ? "grade-filter__list--active" : ""}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {window.innerWidth > 1007 ? (
         <ul className="d-flex align-items-center">
           {grades.map((item: String, i: any) => (
-          <li key={i} onClick={(e) => grade !== item ? setGrade(item) : setGrade(null)} className={grade === item ? "grade-filter__active" : ""}>
+            <li
+              key={i}
+              onClick={(e) =>
+                grade !== item ? setGrade(item) : setGrade(null)
+              }
+              className={grade === item ? "grade-filter__active" : ""}
+            >
               {item}
             </li>
           ))}
         </ul>
+      ) : null}
     </section>
   );
 }

src/components/HomeSearchBox/index.scss

@@ -1,59 +1,61 @@
-.home-search-box{
-  width : 100%;
+.home-search-box {
+  width: 100%;
   font-family: numeralLight;
   margin: 0px auto;
-  form{
-    button{
-        background-color : #39383D;
+  form {
+    button {
+      background-color: #39383d;
       margin-right: 3px;
       border-top-left-radius: 9px;
       border-bottom-left-radius: 9px;
       border: 0px;
     }
-      input{
-        width : 100%;
-        background-color: #46454A;
+    input {
+      width: 100%;
+      background-color: #46454a;
       border: 0px;
       border-top-right-radius: 9px;
       border-bottom-right-radius: 9px;
       color: #ddd;
-        &::placeholder{
+      &::placeholder {
         padding-right: 0px;
         color: #ddd;
         opacity: 0.4;
       }
-        &:focus{
-          outline: 2px solid #9CDF52 !important;
+      &:focus {
+        outline: 2px solid #9cdf52 !important;
       }
     }
   }
 }
 
-@media screen and (min-width: 1441px){
-  .home-search-box{
-    width : 100%;
+@media screen and (min-width: 1441px) {
+  .home-search-box {
+    width: 100%;
     max-width: 1250px;
     padding: 80px 0px 30px;
-    form{
-      width : 850px;
-      input{
+    &__voice {
+      display: none;
+    }
+    form {
+      width: 850px;
+      input {
         font-size: 20px;
         padding-right: 20px;
-        &::placeholder{
+        &::placeholder {
           font-size: 20px;
         }
       }
-      button{
-        width : 100px;
+      button {
+        width: 100px;
         height: 80px;
-        
       }
     }
-    ul{
-      width : 850px;
+    ul {
+      width: 850px;
       padding: 10px 0px !important;
-      li{
-        color: #A2B4CB;
+      li {
+        color: #a2b4cb;
         margin-left: 25px;
         font-size: 14px;
       }
@@ -61,30 +63,32 @@
   }
 }
 
-@media screen and (min-width: 1008px) and (max-width: 1440px){
-  .home-search-box{
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .home-search-box {
     max-width: 1250px;
     padding: 40px 0px 10px;
-    form{
-      width : 850px;
-      input{
+    &__voice {
+      display: none;
+    }
+    form {
+      width: 850px;
+      input {
         font-size: calc(100vw / 65);
         padding-right: 20px;
-        &::placeholder{
+        &::placeholder {
           font-size: calc(100vw / 75);
         }
       }
-      button{
-        width : 80px;
+      button {
+        width: 80px;
         height: 60px;
-        
       }
     }
-    ul{
-      width : 850px;
+    ul {
+      width: 850px;
       padding: 10px 0px !important;
-      li{
-        color: #A2B4CB;
+      li {
+        color: #a2b4cb;
         margin-left: 25px;
         font-size: calc(100vw / 90);
       }
@@ -92,30 +96,32 @@
   }
 }
 
-@media screen and (min-width: 641px) and (max-width: 1007px){
-  .home-search-box{
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .home-search-box {
     max-width: 900px;
     padding: 50px 0px 10px;
-    form{
-      width : 70%;
-      input{
+    &__voice {
+      display: none;
+    }
+    form {
+      width: 70%;
+      input {
         font-size: calc(100vw / 40);
         padding-right: 20px;
-        &::placeholder{
+        &::placeholder {
           font-size: calc(100vw / 45);
         }
       }
-      button{
-        width : 80px;
+      button {
+        width: 80px;
         height: 60px;
-        
       }
     }
-    ul{
-      width : 70%;
+    ul {
+      width: 70%;
       padding: 10px 0px !important;
-      li{
-        color: #A2B4CB;
+      li {
+        color: #a2b4cb;
         margin-left: 25px;
         font-size: calc(100vw / 80);
       }
@@ -123,34 +129,50 @@
   }
 }
 
-@media screen and (max-width: 640px){
-  .home-search-box{
+@media screen and (max-width: 640px) {
+  .home-search-box {
     max-width: 500px;
-    padding: 50px 0px 30px;
-    form{
-      width : 100%;
-      padding: 0px 10px;
-      input{
+    padding: 10px 0px;
+    flex: 1;
+    &__voice {
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      width: 55px;
+      background : inherit !important;
+      & img{
+        width: 35px;
+      }
+    }
+    &__searchIcon {
+      position: absolute;
+      left: 62px;
+      top: 6px;
+      width: 33px;
+    }
+    form {
+      width: 100%;
+      margin: 0px 10px !important;
+      position: relative;
+      border-radius: 8px;
+      input {
+        width: 100%;
+        padding: 10px 10px;
         font-size: calc(100vw / 25);
         padding-right: 20px;
-        &::placeholder{
+        border-radius: 8px;
+        background: #383838;
+        &::placeholder {
           font-size: calc(100vw / 30);
+          color: white !important;
         }
       }
-      button{
-        width : 60px;
-        height: 50px;
+      button {
+        display: none;
       }
     }
-    ul{
-      width : 100%;
-      padding: 10px 10px !important;
-      li{
-        color: #A2B4CB;
-        margin-left: 25px;
-        font-size: calc(100vw / 45);
-      }
+    ul {
+      display: none !important;
     }
   }
 }
-

src/components/HomeSearchBox/index.tsx

@@ -1,16 +1,21 @@
 import React from "react";
 import "./index.scss";
 import search from '../../assets/icons/search.png';
+import voice from "../../assets/icons/voice.png";
+
 export default function HomeSearchBox(props : any) {
   const {lastItems} = props;
   return (
     <section className="home-search-box d-flex flex-column align-items-center">
-      <form className="d-flex">
+      <form className="d-flex" onSubmit={(e) => e.preventDefault()}>
         <input type="search" placeholder="نام درس یا دوره را جستجو کنید" />
         <button type="submit">
           <img src={search} />
         </button>
+        <img className="home-search-box__searchIcon" src={search} />
+        <button className="home-search-box__voice"><img src={voice} /></button>
       </form>
+      
       <ul className="d-flex">
         {
           lastItems.map((item : any, i : any) => (

src/components/Navbar/index.scss

@@ -121,6 +121,7 @@
 
 @media screen and (max-width: 640px){
   .nav{
+    background-color: #010101;
     &__container{
       max-width: 500px;
       &--buttons{

src/types/comp.d.ts

@@ -0,0 +1 @@
+declare module '3d-react-carousal';

src/views/Home/AppDownload/index.tsx

@@ -1,18 +1,20 @@
-import React from 'react'
-import ar from '../../../assets/icons/ar.png';
-import download from '../../../assets/icons/download.png';
-import './index.scss';
+import React from "react";
+import ar from "../../../assets/icons/ar.png";
+import download from "../../../assets/icons/download.png";
+import "./index.scss";
 
 export default function AppDownload() {
   return (
     <section className="app-download d-flex justify-content-between align-items-end">
-      <h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1>
+      <h1>
+        اینجا جایگاه یک <br /> متن ویژه است که باید در این <br /> قسمت قرار
+        بگیرد.
+      </h1>
       <figure className="app-download__figure d-flex flex-column align-items-center">
-        <div className="app-download__figure--screen">
-        </div>
+        <div className="app-download__figure--screen"></div>
         <div className="app-download__figure--details d-flex justify-content-between align-items-center">
           <div className="d-flex align-items-center">
-            <img src={ar} alt={'واقعیت افزوده'} />
+            <img src={ar} alt={"واقعیت افزوده"} />
             <div className="d-flex flex-column">
               <h2>دانلود اپلیکیشن اندرویدی</h2>
               <p>به راحتی آب خوردن از کافه بازار و گوناگون</p>
@@ -22,5 +24,5 @@ export default function AppDownload() {
         </div>
       </figure>
     </section>
-  )
+  );
 }

src/views/Home/Blogs/Blog/index.scss

@@ -76,14 +76,15 @@
 
 @media screen and (max-width: 640px) {
   .home-blogs-blog {
-    img {
-      height: 150px;
-    }
+    width: 100vw;
+    height: calc(100vw / 2.2);
+    margin: 10px 0px 0px;
     h2 {
-      font-size: calc(100vw / 25);
+      font-family: numeralLight;
+      font-size: calc(100vw / 30);
     }
     p {
-      font-size: calc(100vw / 36);
+      display: none;
     }
   }
 }

src/views/Home/Blogs/index.scss

@@ -5,6 +5,9 @@
   margin-top: 30px;
   padding: 20px 10px 50px;
   font-family: numeralLight;
+  &__list{
+    width: 100%;
+  }
   header{
     margin-bottom: 20px;
     h1{
@@ -74,6 +77,9 @@
 @media screen and (max-width: 640px) {
   .home-blogs {
     max-width: 500px;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 20px;
     header{
       h1{
         font-size: calc(100vw / 25);
@@ -86,4 +92,16 @@
       font-size: calc(100vw / 30);
     }
   }
+  .slider-container{
+    position: static !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    & img{
+      height: 200px !important;
+    }
+    margin: 0px 0px 100px 0px !important;
+    width : 100% !important;
+  }
 }
+

src/views/Home/Blogs/index.tsx

@@ -1,38 +1,46 @@
-import React from "react";
-import Carousel from "react-elastic-carousel";
+import React, { useState } from "react";
+import Carousell from "react-elastic-carousel";
+import {Carousel} from "3d-react-carousal";
 import Blog from "./Blog/index";
 import { Link } from "react-router-dom";
+
 import "./index.scss";
 
 export default function Blogs(props: any) {
   const slideNumberHandler = () => {
-    if(window.innerWidth >= 1440){
+    if (window.innerWidth >= 1440) {
       return 3;
-    }else if(window.innerWidth >= 1008 && window.innerWidth < 1440){
+    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
       return 3;
-    }else if(window.innerWidth > 640 && window.innerWidth < 1008 ){
+    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
       return 2;
-    }else{
+    } else {
       return 1;
     }
-  }
+  };
   const { number, blogs } = props;
   return (
-    <section className="home-books d-flex flex-column">
+    <section className="home-blogs d-flex flex-column">
       <header className="d-flex flex-column">
         <h1>پیشنهادی برای شما</h1>
       </header>
-      <Carousel
+      {window.innerWidth > 1007 ? (
+        <Carousell
           itemsToShow={slideNumberHandler()}
           isRTL={true}
           enableTilt={false}
           showArrows={false}
           pagination={false}
         >
-        {blogs.map((item : Object, i : Number) => (
+          {blogs.map((item: Object, i: Number) => (
             <Blog data={item} key={i} />
           ))}
-      </Carousel>
+        </Carousell>
+      ) : (
+          <Carousel autoplay={false} arrows={false} slides={blogs.map((item: Object, i: Number) => (
+            <Blog data={item} key={i} />
+          ))} />
+      )}
     </section>
   );
 }

src/views/Home/Books/Book/index.scss

@@ -85,7 +85,9 @@
 @media screen and (max-width : 640px){
   .home-books-book{
     img{
-      height: 150px;
+      height: 200px;
+      width : calc(100vw / 2.8);
+      border-bottom-left-radius: 25px !important;
     }
     h2{
       font-size: calc(100vw / 25);

src/views/Home/Books/index.scss

@@ -81,6 +81,14 @@
 @media screen and (max-width: 640px) {
   .home-books {
     max-width: 500px;
+    &__list{
+      width: 100%;
+      overflow-x: scroll;
+      &::-webkit-scrollbar{
+        scrollbar-width: 0px;
+        display: none;
+      }
+    }
     header{
       h1{
         font-size: calc(100vw / 25);

src/views/Home/Books/index.tsx

@@ -7,19 +7,20 @@ import "./index.scss";
 
 export default function Courses(props: any) {
   const slideNumberHandler = () => {
-    if(window.innerWidth >= 1440){
+    if (window.innerWidth >= 1440) {
       return 5;
-    }else if(window.innerWidth >= 1008 && window.innerWidth < 1440){
+    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
       return 5;
-    }else if(window.innerWidth > 640 && window.innerWidth < 1008 ){
+    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
       return 4;
-    }else{
+    } else {
       return 2;
     }
-  }
+  };
   const { number, courses } = props;
   return (
     <section className="home-books d-flex flex-column">
+      {window.innerWidth > 1007 ? (
         <Carousel
           itemsToShow={slideNumberHandler()}
           isRTL={true}
@@ -27,10 +28,17 @@ export default function Courses(props: any) {
           showArrows={true}
           pagination={false}
         >
-        {courses.map((item : Object, i : Number) => (
+          {courses.map((item: Object, i: Number) => (
             <Book data={item} key={i} />
           ))}
         </Carousel>
+      ) : (
+        <div className="home-books__list d-flex">
+          {courses.map((item: Object, i: Number) => (
+            <Book data={item} key={i} />
+          ))}
+        </div>
+      )}
     </section>
   );
 }

src/views/Home/Courses/Course/index.scss

@@ -83,7 +83,8 @@
 @media screen and (max-width : 640px){
   .home-courses-course{
     img{
-      height: 150px;
+      width: 250px;
+      height: 180px;
     }
     h2{
       font-size: calc(100vw / 25);
@@ -92,6 +93,7 @@
       font-size: calc(100vw / 36);
     }
     li{
+      display: none !important;
       font-size: calc(100vw / 38);
     }
   }

src/views/Home/Courses/Course/index.tsx

@@ -8,10 +8,15 @@ export default function Course(props: any) {
     <article className="home-courses-course d-flex flex-column">
       <img src={data.imageUrl} alt={data.name} />
       <footer className="d-flex">
-        <Avatar src={data.user} />
+        <Avatar src={data.user} style={{width : 50, height : 50}} />
         <div className="home-courses-course__info d-flex flex-column">
           <h2>{data.name}</h2>
-          <p>{data.text.slice(0, 100)}</p>
+          {
+            window.innerWidth > 1007 ?
+            <p>{data.text.slice(0, 100)}</p> : <p>{data.text.slice(0, 50)}</p>
+          }
+          
+          
           <ul className="d-flex flex-wrap">
             {data.tags.length <= 2
               ? data.tags.map((item: String, i: any) => <li key={i}>{item}</li>)

src/views/Home/Courses/index.scss

@@ -87,6 +87,8 @@
 @media screen and (max-width: 640px) {
   .home-courses {
     max-width: 500px;
+    border: 0px !important;
+    padding: 0px !important;
     header{
       h1{
         font-size: calc(100vw / 25);
@@ -96,7 +98,14 @@
       }
     }
     &__more{
-      font-size: calc(100vw / 30);
+      display : none !important;
+    }
+    &__list{
+      overflow-x: scroll;
+      &::-webkit-scrollbar{
+        scrollbar-width: 0px;
+        display: none;
+      }
     }
   }
 }

src/views/Home/Courses/index.tsx

@@ -24,6 +24,8 @@ export default function Courses(props: any) {
         <h1>جدیدترین دوره‌ها</h1>
         <span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span>
       </header>
+      {
+        window.innerWidth > 1007 ?
         <Carousel
         itemsToShow={slideNumberHandler()}
         isRTL={true}
@@ -34,7 +36,14 @@ export default function Courses(props: any) {
         {courses.map((item : Object, i : Number) => (
           <Course data={item} key={i} />
         ))}
-      </Carousel>
+      </Carousel> : 
+      <div className="home-courses__list d-flex">
+        {courses.map((item : Object, i : Number) => (
+          <Course data={item} key={i} />
+        ))}
+      </div>
+      }
+      
       <Link
         className="home-courses__more d-flex align-items-center"
         to="/courses"

src/views/Home/index.scss

@@ -19,3 +19,9 @@
   overflow-x: hidden;
   padding-top: 60px;
 }
+
+@media screen and (max-width: 640px) {
+  .home{
+    padding: 60px 10px 0px;
+  }
+}

src/views/Home/index.tsx

@@ -24,14 +24,24 @@ export default function Home(props : any) {
   return (
     <div className="home d-flex flex-column">
       <Navbar />
-      <Header headerData={headerData} />
+      {
+        window.innerWidth > 1007 ?
+        <Header headerData={headerData} /> : null
+      }
       <HomeSearchBox />
       <Courses courses={courses} />
       <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
       <Books courses={courses} />
       <Blogs blogs={blogs} />
-      <AppDownload />
-      <Footer />
+      {
+        window.innerWidth > 1007 ?
+        <AppDownload /> : null
+      }
+      {
+        window.innerWidth > 1007 ?
+        <Footer /> : null
+      }
+      
     </div>
   );
 }

yarn.lock

@@ -2,6 +2,15 @@
 # yarn lockfile v1
 
 
+"3d-react-carousal@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/3d-react-carousal/-/3d-react-carousal-4.0.2.tgz#83f2dcbf1266fc4e3cd53902fefdf22f9c1cb65c"
+  integrity sha512-UDf76anUKCKw6od5Fb0PcrPxH0RsRXJKmi3wpulpDHt5a48w/bJBjYiE9bQfRJt9vwzGj1M7jFBEkKahQeuDrQ==
+  dependencies:
+    prop-types "^15.7.2"
+    react-fast-compare "^3.2.0"
+    react-swipeable "^6.1.2"
+
 "@babel/code-frame@7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz"
@@ -1265,12 +1274,43 @@
   resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@emotion/hash@^0.8.0":
+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.7":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
+  integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1282,16 +1322,60 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/stylis@^0.8.4":
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/styled-base@^10.0.27":
+  version "10.0.31"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/styled@^10.0.7":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
+  dependencies:
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@^0.7.4":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz"
@@ -2876,6 +2960,22 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-emotion@^10.0.27:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
+  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-import-directory@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-import-directory/-/babel-plugin-import-directory-1.1.0.tgz#69c3f630418cae8d97fec35211a6a538f6bb4df6"
@@ -2904,7 +3004,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0:
   version "2.8.0"
   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -3837,6 +3937,13 @@ convert-source-map@^0.3.3:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
+convert-source-map@^1.5.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
@@ -4244,6 +4351,11 @@ csstype@^2.5.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz"
   integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
 
+csstype@^2.5.7:
+  version "2.6.18"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
+  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
+
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
@@ -5388,6 +5500,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
@@ -9343,7 +9460,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9573,6 +9690,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -9639,6 +9761,23 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-spring-3d-carousel@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-spring-3d-carousel/-/react-spring-3d-carousel-1.2.1.tgz#25d5d94e76a212b6e791c2543f61c7c87763e8e9"
+  integrity sha512-T3Z75ShB613b/y9+DEfWE7ny6w9NKRD5/3bZoU53lUfSc1/JhdfpZ2uDQ5UvdskISQqol1RfqFdoDWuDgMT1NA==
+  dependencies:
+    "@emotion/core" "^10.0.7"
+    "@emotion/styled" "^10.0.7"
+    react-spring "^8.0.5"
+
+react-spring@^8.0.5:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-swipeable@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.5.1.tgz#48ae6182deaf62f21d4b87469b60281dbd7c4a76"
@@ -9646,6 +9785,11 @@ react-swipeable@^5.5.1:
   dependencies:
     prop-types "^15.6.2"
 
+react-swipeable@^6.1.2:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.0.tgz#057271cb7a6fb4af9d2a3f6d80ccdf33e2f64d47"
+  integrity sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==
+
 react-toastify@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.0.2.tgz#11f73b3a847fcffeb47b1823e8974e9895f98fae"
@@ -10565,7 +10709,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=