Merge branch 'main' into explore-nav

package.json

@@ -26,6 +26,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
+    "react-grid-gallery": "^0.5.5",
     "react-multi-carousel": "^2.8.0",
     "styled-components": "^5.3.3"
   }

src/components/Callout/index.js

@@ -1,10 +1,14 @@
-import * as React from "react";
-import { H2, GREEN } from "../../styles/styles";
-import { Container, LargeButton } from "./styled";
-import Button from "../Button";
+import * as React from 'react';
+import { H2, GREEN } from '../../styles/styles';
+import { Container, LargeButton, LeftSprinkle, RightSprinkle } from './styled';
+import Button from '../Button';
+import LeftCollage from '../../images/about-collage.png';
+import RightCollage from '../../images/kicks.png';
 
 const CallOut = ({ label, header }) => (
   <Container>
+    <LeftSprinkle src={LeftCollage} alt="" />
+    <RightSprinkle src={RightCollage} alt="" />
     <H2>{header}</H2>
     <LargeButton>
       <Button to={`/submit`} color={GREEN} jumbo>

src/components/Callout/styled.js

@@ -1,6 +1,7 @@
-import styled from "styled-components";
-import { PINK, BLACK } from "../../styles/styles";
-import { min } from "../../styles/breakpoints";
+import styled from 'styled-components';
+import { PINK, BLACK } from '../../styles/styles';
+import { min } from '../../styles/breakpoints';
+import { css } from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
@@ -9,7 +10,9 @@ export const Container = styled.div`
   text-align: center;
   white-space: nowrap;
   color: ${BLACK};
-  padding-bottom: 5%;
+  position: relative;
+  overflow-x: clip;
+  padding: 3rem 0;
 `;
 
 export const LargeButton = styled.div`
@@ -24,3 +27,42 @@ export const LargeButton = styled.div`
     width: 33.33%;
   }
 `;
+
+export const sprinkleStyles = css`
+  position: absolute;
+  z-index: 1;
+`;
+
+export const LeftSprinkle = styled.img`
+  ${sprinkleStyles};
+  width: 248px;
+  top: -4rem;
+  left: -6rem;
+  ${min.tablet} {
+    width: 405px;
+    top: -9rem;
+    left: -7rem;
+  }
+  ${min.desktop} {
+    width: 374px;
+    top: -8rem;
+    left: -6rem;
+  }
+`;
+
+export const RightSprinkle = styled.img`
+  ${sprinkleStyles};
+  width: 129px;
+  top: -3rem;
+  right: -3rem;
+  ${min.tablet} {
+    width: 214px;
+    top: -6rem;
+    right: -3rem;
+  }
+  ${min.desktop} {
+    width: 198px;
+    top: -5rem;
+    right: 5rem;
+  }
+`;

src/components/ExploreCarousel/index.js

@@ -14,6 +14,7 @@ import {
   ItemContainer,
 } from "./styled";
 import Carousel from "react-multi-carousel";
+import ExploreGallery from "../ExploreGallery";
 import "react-multi-carousel/lib/styles.css";
 
 const ExploreCarousel = ({ section, id }) => {
@@ -123,12 +124,16 @@ const ExploreCarousel = ({ section, id }) => {
 
   return (
     <FlexContainer id={id}>
-      {sectionuid === "read" || sectionuid === "watch" ? (
-        <div>
-          <H2 bold>{title.text}</H2>
-          {sectionuid === "read" ? <StackedCarousel /> : <SingleCarousel />}
-        </div>
-      ) : null}
+      <div>
+        <H2 bold>{title.text}</H2>
+        {sectionuid === "read" ? (
+          <StackedCarousel />
+        ) : sectionuid === "watch" ? (
+          <SingleCarousel />
+        ) : (
+          <ExploreGallery works={works} />
+        )}
+      </div>
     </FlexContainer>
   );
 };

src/components/ExploreGallery/index.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import Gallery from "react-grid-gallery";
+import { ViewContainer, StyledH3 } from "./styled";
+import { navigate } from "gatsby";
+
+const ExploreGallery = ({ works }) => {
+  const [imageList, setImageList] = useState([]);
+
+  useEffect(() => {
+    const galleryImages = [];
+    works.forEach((work) => {
+      const {
+        work: {
+          document: {
+            uid,
+            data: { images, title },
+          },
+        },
+      } = work;
+      images.forEach((image) => {
+        let img = {
+          src: image.image.url,
+          thumbnail: image.image.url,
+          thumbnailHeight: image.image.dimensions.height,
+          thumbnailWidth: image.image.dimensions.width,
+          uid: work.work.document.uid,
+          customOverlay: (
+            <StyledH3>{work.work.document.data.title.text}</StyledH3>
+          ),
+        };
+        galleryImages.push(img);
+      });
+    });
+
+    const shuffledImages = galleryImages.sort((a, b) => 0.5 - Math.random()); //shuffle images
+    setImageList(shuffledImages);
+  }, []);
+
+  function imageStyle() {
+    return {
+      height: "100%",
+    };
+  }
+
+  function redirectGallery(index) {
+    return navigate("/works/" + imageList[index].uid);
+  }
+
+  return (
+    <ViewContainer>
+      <Gallery
+        images={imageList}
+        enableImageSelection={false}
+        enableLightbox={false}
+        rowHeight={300}
+        margin={5}
+        maxRows={3}
+        thumbnailStyle={imageStyle}
+        onClickThumbnail={redirectGallery}
+      />
+    </ViewContainer>
+  );
+};
+
+export default ExploreGallery;

src/components/ExploreGallery/styled.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Cursor from "../../images/cursor-pointer.svg";
+import { H3 } from "../../styles/styles";
+
+export const ViewContainer = styled.div`
+  margin-bottom: 6rem;
+  height: 900;
+  overflow: hidden;
+  cursor: url(${Cursor}) 20 20, pointer;
+`;
+
+export const StyledH3 = styled(H3)`
+  margin-top: 250px;
+  margin-left: 10px;
+`;

src/components/FeaturedContent/index.js

@@ -1,8 +1,18 @@
 import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
-import { H1, P, YELLOW } from '../../styles/styles';
-import { Description, Details, FlexContainer, Thumbnail } from './styled';
+import { H1, YELLOW } from '../../styles/styles';
+import {
+  BottomRightCollage,
+  Description,
+  Details,
+  FlexContainer,
+  OverflowContainer,
+  Thumbnail,
+  TopLeftCollage,
+} from './styled';
 import Button from '../Button';
+import Collage1 from '../../images/explore-collage-1.png';
+import Collage2 from '../../images/explore-collage-2.png';
 
 const FeaturedContent = () => {
   const query = useStaticQuery(graphql`
@@ -40,18 +50,22 @@ const FeaturedContent = () => {
   } = query;
 
   return (
-    <FlexContainer>
-      <Thumbnail src={thumbnail} alt={alt} />
-      <Details>
-        <H1>{title}</H1>
-        <Description>{description}</Description>
-        <Button
-          to={`/${type === 'project' ? 'projects' : 'works'}/${uid}`}
-          color={YELLOW}>
-          {type === 'video' ? 'watch' : type === 'article' ? 'read' : 'view'}
-        </Button>
-      </Details>
-    </FlexContainer>
+    <OverflowContainer>
+      <FlexContainer>
+        <Thumbnail src={thumbnail} alt={alt} />
+        <Details>
+          <H1>{title}</H1>
+          <Description>{description}</Description>
+          <Button
+            to={`/${type === 'project' ? 'projects' : 'works'}/${uid}`}
+            color={YELLOW}>
+            {type === 'video' ? 'watch' : type === 'article' ? 'read' : 'view'}
+          </Button>
+        </Details>
+        <TopLeftCollage src={Collage1} alt="" />
+        <BottomRightCollage src={Collage2} alt="" />
+      </FlexContainer>
+    </OverflowContainer>
   );
 };
 

src/components/FeaturedContent/styled.js

@@ -1,13 +1,20 @@
 import styled from 'styled-components';
-import { P } from '../../styles/styles';
+import { MarginContainer, P } from '../../styles/styles';
 import { min } from '../../styles/breakpoints';
+import { css } from 'styled-components';
 
-export const FlexContainer = styled.div`
+export const OverflowContainer = styled.div`
+  overflow-x: clip;
+`;
+
+export const FlexContainer = styled(MarginContainer)`
   margin-bottom: 3rem;
   display: flex;
+  position: relative;
   flex-direction: column;
   ${min.desktop} {
     flex-direction: row;
+    padding-top: 8rem;
   }
 `;
 
@@ -35,3 +42,24 @@ export const Description = styled(P)`
     width: 80%;
   }
 `;
+
+const sprinkleStyles = css`
+  position: absolute;
+  z-index: 1;
+  display: none;
+  ${min.desktop} {
+    display: block;
+  }
+`;
+
+export const TopLeftCollage = styled.img`
+  ${sprinkleStyles}
+  top: 0;
+  left: -6.5rem;
+`;
+
+export const BottomRightCollage = styled.img`
+  ${sprinkleStyles}
+  bottom: -6rem;
+  right: 0;
+`;

src/components/ProjectPreview/index.js

@@ -1,10 +1,21 @@
 import React from 'react';
-import { Container, FlexContainer, Overview, Content } from './styled';
+import {
+  Container,
+  FlexContainer,
+  Overview,
+  Content,
+  SprinkleCollage,
+} from './styled';
 import { H1, P, YELLOW } from '../../styles/styles';
 import Button from '../Button';
 import ProjectCarousel from '../ProjectCarousel';
+import Collage1 from '../../images/project-collage-1.png';
+import Collage2 from '../../images/project-collage-2.png';
+import Collage3 from '../../images/project-collage-3.png';
 
-const ProjectPreview = ({ project }) => {
+const sprinkles = [Collage1, Collage2, Collage3];
+
+const ProjectPreview = ({ project, i }) => {
   const {
     data: { name, description, works },
     uid,
@@ -23,6 +34,7 @@ const ProjectPreview = ({ project }) => {
         <Content>
           <ProjectCarousel works={works} />
         </Content>
+        <SprinkleCollage src={sprinkles[i % 3]} alt="" i={i % 3} />
       </FlexContainer>
     </Container>
   );