Merge pull request #29 from reflexer-labs/develop

Develop

package.json

@@ -40,7 +40,8 @@
     "react-stickynode": "^3.0.4",
     "react-tooltip": "^4.2.15",
     "react-use": "^15.3.4",
-    "styled-components": "^5.2.0"
+    "styled-components": "^5.2.0",
+    "swiper": "^6.7.0"
   },
   "devDependencies": {
     "prettier": "2.1.2"

src/components/RaiUsage.js

@@ -0,0 +1,158 @@
+import React from "react"
+import styled from "styled-components"
+import { Swiper, SwiperSlide } from "swiper/react"
+// import Swiper core and required modules
+import SwiperCore, { Pagination } from "swiper/core"
+import "swiper/swiper.min.css"
+import "swiper/components/pagination/pagination.min.css"
+import useRaiUse from "../hooks/useRaiUse"
+
+// install Swiper modules
+SwiperCore.use([Pagination])
+const RaiUsage = () => {
+  const raiUsage = useRaiUse().map(item => item.node)
+
+  const items = raiUsage.reduce((acc, item) => {
+    acc[item.category.category]
+      ? acc[item.category.category].push(item)
+      : (acc[item.category.category] = [item])
+    return acc
+  }, {})
+  const pagination = {
+    clickable: true,
+    renderBullet: function (index, className) {
+      const cat = Object.keys(items).reverse()[index]
+      return '<span class="' + className + '">' + cat + "</span>"
+    },
+  }
+
+  return (
+    <Container>
+      <Content>
+        <Title>
+          <Dimmed>Try RAI</Dimmed>
+          Projects and interfaces that accept RAI
+        </Title>
+        <Swiper
+          className="mySwiper"
+          spaceBetween={50}
+          slidesPerView={1}
+          pagination={pagination}
+        >
+          {Object.keys(items)
+            .reverse()
+            .map(key => {
+              return (
+                <SwiperSlide style={{ background: "transparent" }}>
+                  <ItemsRow>
+                    {items[key].map(item => {
+                      return (
+                        <Link href={item.link.link} target="_blank">
+                          <ItemBox>
+                            <img src={item.image.file.url} alt="item.title" />
+                            <ItemTitle>{item.title.title}</ItemTitle>
+                            <ItemContent>{item.content.content}</ItemContent>
+                          </ItemBox>
+                        </Link>
+                      )
+                    })}
+                  </ItemsRow>
+                </SwiperSlide>
+              )
+            })}
+        </Swiper>
+      </Content>
+    </Container>
+  )
+}
+
+export default RaiUsage
+
+const Container = styled.div`
+  padding: 0 30px;
+  padding: 160px 0;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+   padding: 80px 0;
+  `}
+  background: ${props => props.theme.colors.foreground};
+`
+const Content = styled.div`
+  max-width: 1280px;
+  padding: 0 30px;
+  margin: 0 auto;
+`
+const Title = styled.div`
+  font-weight: bold;
+  margin: 0px 0 30px 0;
+  font-size: 35px;
+  font-weight: 600;
+  font-family: "Inter-Medium";
+  color: ${props => props.theme.colors.primary};
+  letter-spacing: -0.33px;
+  max-width: 400px;
+  width: 100%;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 22px;
+    text-align:center;
+    max-width:100%;
+  `}
+`
+
+const Dimmed = styled.div`
+  opacity: 0.4;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+   margin-bottom:20px;
+   
+  `}
+`
+const ItemsRow = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+   flex-direction: column;
+   
+  `}
+`
+
+const Link = styled.a`
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  flex: 0 0 33.3%;
+  min-width: 33.3%;
+  padding: 0 10px;
+  margin-bottom: 30px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+   flex: 0 0 100%;
+   min-width:100%;
+  `}
+`
+const ItemBox = styled.div`
+  border: 1px solid ${props => props.theme.colors.border};
+  border-radius: ${props => props.theme.global.borderRadius};
+  padding: 40px;
+  transition: all 0.3s ease;
+  img {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+  &:hover {
+    background: ${props => props.theme.colors.neutral};
+    box-shadow: 0px 16px 24px rgb(0 0 0 / 8%);
+  }
+`
+
+const ItemTitle = styled.h4`
+  text-align: left;
+`
+
+const ItemContent = styled.div`
+  text-align: left;
+  font-size: ${props => props.theme.font.small};
+  line-height: 1.6;
+`

src/components/ui/HeroBox.js

@@ -45,6 +45,7 @@ const Row = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin: 0 -10px;
+  justify-content: center;
 `
 
 const Col = styled.div`

src/hooks/useRaiUse.js

@@ -0,0 +1,33 @@
+import { graphql, useStaticQuery } from "gatsby"
+
+export default function useRaiUse() {
+  const { allContentfulRaiUsage } = useStaticQuery(graphql`
+    query RaiUsage {
+      allContentfulRaiUsage {
+        edges {
+          node {
+            title {
+              title
+            }
+            id
+            content {
+              content
+            }
+            image {
+              file {
+                url
+              }
+            }
+            link {
+              link
+            }
+            category {
+              category
+            }
+          }
+        }
+      }
+    }
+  `)
+  return allContentfulRaiUsage.edges
+}

src/pages/index.js

@@ -5,6 +5,7 @@ import FeaturesBlocks from "../components/ui/FeaturesBlocks"
 import FAQsCollapse from "../components/ui/FAQsCollapse"
 import HeroBox from "../components/ui/HeroBox"
 import HeroSeciton from "../components/ui/HeroSeciton"
+import RaiUsage from "../components/RaiUsage"
 
 const Home = () => {
   return (
@@ -18,6 +19,7 @@ const Home = () => {
         <HeroBox />
       </BoxesContainer>
       <FeaturesBlocks />
+      <RaiUsage />
       <FAQsCollapse />
     </Layout>
   )

src/styles/main.css

@@ -63,3 +63,75 @@ a {
   border: #eef3f9;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
 }
+
+/* slider */
+
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.swiper-pagination {
+  position: static !important;
+  margin-top: 30px;
+}
+
+.swiper-pagination-bullets {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+.swiper-pagination-bullet {
+  padding: 5px 15px;
+  width: auto !important;
+  height: auto !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  text-transform: capitalize;
+  border-bottom: 2px solid #999999;
+  margin: 0 !important;
+  cursor: pointer;
+  opacity: 0.3 !important;
+  font-weight: bold;
+  text-align: center !important;
+}
+
+.swiper-pagination-bullet-active {
+  color: #009c94;
+  border-bottom: 2px solid #009c94;
+  opacity: 1 !important;
+}
+
+@media (max-width: 500px) {
+  .swiper-pagination-bullet {
+    padding: 5px;
+    flex: 1;
+  }
+}

yarn.lock

@@ -4784,6 +4784,13 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
+dom7@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
+  integrity sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==
+  dependencies:
+    ssr-window "^3.0.0-alpha.1"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -12793,6 +12800,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^3.0.0, ssr-window@^3.0.0-alpha.1:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
+  integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
+
 ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
@@ -13281,6 +13293,14 @@ [email protected], svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@^6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.7.0.tgz#ec971e703d03ef6196354140fbb22b074642bf5c"
+  integrity sha512-zCfvWn7H7mCq7jgVurckhAwkjPUeMCkdC4rA7lagvaD3mIrNhKiaYYo2+nkxMVpiaWuCQ38e44Mya/dKb7HpyQ==
+  dependencies:
+    dom7 "^3.0.0"
+    ssr-window "^3.0.0"
+
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"