Merge pull request #135 from aceleradora-TW/115/refactor-transformar-…

…o-carrosel-da-galeria-de-fotos-da-home-em-pagina

115/galeria de fotos da home em pagina

src/App.js

@@ -7,20 +7,19 @@ import { EventsPageDescription } from './pages/events-description'
 import { DetailsTherapies } from './pages/therapies-description'
 import PageAbout from './pages/about-details'
 import { WorkshopDetails } from './pages/workshop-description'
+import { GalleryDetails } from './pages/gallery-details'
 
 export const App = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} exact />
+        <Route path="/gallerydetails" element={<GalleryDetails />} />
         <Route path="/events" element={<EventsPage />} />
         <Route path="/events/:id" element={<EventsPageDescription />} />
         <Route path="/therapies" element={<TherapiesPage />} exact />
-        <Route path="/artandculture" element={<TherapiesPage />} />
-        <Route path="/education" element={<TherapiesPage />} />
         <Route path="/workshops" element={<WorkshopsPage />} />
         <Route path="/workshops/:id" element={<WorkshopDetails />} />
-        <Route path="/projects" element={<TherapiesPage />} />
         <Route path="/therapies/:id" element={<DetailsTherapies />} />
         <Route path="/sobre" element={<PageAbout />} />
       </Routes>

src/pages/gallery-details/index.js

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react"
+import NavBar from "../../components/navbar"
+import { GalleryStyled } from "./styled"
+import { cms } from "../../client"
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
+
+import 'swiper/css'
+import 'swiper/css/free-mode'
+import 'swiper/css/navigation'
+import 'swiper/css/thumbs'
+
+export const GalleryDetails = () => {
+  const [thumbsSwiper, setThumbsSwiper] = useState(null)
+  const [gallery, setGallery] = useState([])
+
+  useEffect(() => {
+    cms
+      .get('api/gallery/?populate=fotos')
+      .then((response) => {
+        const images = response.data.data.attributes.fotos.data.map(
+          (image, id) => {
+            return {
+              id,
+              url: process.env.REACT_APP_URL_CMS + image.attributes.url
+            }
+          }
+        )
+
+        setGallery(images)
+      })
+      .catch((error) => {
+        throw new Error(error)
+      })
+  }, [])
+  return(
+    <>
+      <NavBar/>
+      <GalleryStyled>
+        <div className="container">
+              <div className="top">
+                <h2 className="h2-modal-galery">Fotos da Nossa Casa</h2>
+              </div>
+              <Swiper
+                style={{
+                  '--swiper-navigation-color': '#516B84',
+                  '--swiper-pagination-color': '#FFF',
+                  '--swiper-navigation-sides-offset': '10%',
+                  position: 'unset'
+                }}
+                loop={true}
+                spaceBetween={10}
+                navigation={true}
+                thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
+                modules={[FreeMode, Navigation, Thumbs]}
+                className="first-carousel"
+              >
+                  {gallery.map((fotos) =>
+                  (
+                    <SwiperSlide key={fotos.id}>
+                      <img src={fotos.url} />
+                    </SwiperSlide>
+                  ))}
+              </Swiper>
+              <Swiper
+                onSwiper={setThumbsSwiper}
+                loop={true}
+                spaceBetween={10}
+                freeMode={true}
+                watchSlidesProgress={true}
+                modules={[FreeMode, Navigation, Thumbs]}
+                className="second-carousel"
+                breakpoints={{
+                  320: {slidesPerView: 3},
+                  520: {slidesPerView: 4},
+                  700: {slidesPerView: 5},
+                  1100: {slidesPerView: 6}
+                }}
+              >
+                {gallery.map((image) => (
+                  <SwiperSlide key={image.id}>
+                    <img src={image.url} />
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+        </div>
+      </GalleryStyled>
+    </>
+  )
+}

src/pages/gallery-details/styled.js

@@ -0,0 +1,98 @@
+import styled from "styled-components";
+
+export const GalleryStyled = styled.div`
+  *{
+    margin: 0;
+    border: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .container{
+    height: calc(100vh - 100px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    
+    .top {
+    width: 100%;
+    margin: 1% 0;
+  }
+
+  .top > .h2-modal-galery {
+    font-size: 2.7rem;
+    color: #54636E;
+    text-align: center;
+  }
+  .swiper {
+    width: 70%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .first-carousel .swiper-slide {
+    height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .second-carousel {
+    margin-top: 1%;
+    margin-bottom: 1%;
+  }
+
+  .second-carousel .swiper-slide {
+    width: 90px;
+    max-height: 90px;
+    opacity: 0.5;
+  }
+  .second-carousel .swiper-slide-thumb-active {
+    opacity: 1;
+    border: 5px solid #f5bc4a;
+  }
+
+  .first-carousel img{
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      object-position: center;   
+
+  }
+  .second-carousel img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;  
+    }
+  }
+
+
+  @media (min-width: 320px) and (max-width: 767px) {
+  .container {
+
+    .top {
+      padding: 2% 0;
+    }
+
+    .top > .h2-modal-galery {
+    font-size: 1.9rem;
+  }
+
+    .swiper {
+      width: 99%;
+    }
+
+    .first-carousel .swiper-slide {
+      max-height: 100%;
+    }
+
+    .swiper-button-next,
+    .swiper-button-prev {
+      display: none;
+    }
+  }
+}
+
+`

src/pages/home/index.js

@@ -58,7 +58,6 @@ export function HomePage() {
     },
     width: '100%'
   }
-  console.log(attributes)
   return (
     <Home $background={mural}>
       <NavBar />
@@ -129,7 +128,7 @@ export function HomePage() {
               ))}
             </ul>
           </div>
-          <ModalGallery type={'gallery'} />
+          <Link className='button-galery' to={`/gallerydetails`}> Saber mais </Link>
         </section>
         <Parceires />
         <Footer />

src/pages/home/styled.js

@@ -211,18 +211,26 @@ const Home = styled.div`
         }
       }
     }
-    button {
-      background: #516b84;
-      border-radius: 3px;
-      color: #fafafa;
-      border: none;
-      font-size: 1rem;
-      width: 148px;
-      height: 56px;
-      cursor: pointer;
-      margin-top: 15px;
-      margin-bottom: 60px;
-    }
+      .button-galery {
+        text-decoration: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 600;
+        font-size: 1rem;
+        color: #fafafa;
+        background-color: #516b84;
+        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
+        border-radius: 3px;
+        border: none;
+        font-size: 1rem;
+        width: 163px;
+        height: 56px;
+        cursor: pointer;
+        padding: 10px;
+        margin-top: 1.6rem;
+        margin-bottom: 1.6rem;
+      }
   }
 
   .parceires {