Optimize for landing page mobile

antd.customize.less

@@ -21,3 +21,5 @@
 @layout-header-color: @black;
 @btn-primary-bg: @light-green;
 @border-radius-base: 4px;
+@carousel-dot-height: 10px;
+@carousel-dot-width: 50px;

src/colors.tsx

@@ -7,4 +7,5 @@ export const LIGHT_GREY = 'D9D9D9';
 export const DARK_GREEN = '#3A681A';
 export const MID_GREEN = '#61802E';
 export const LIGHT_GREEN = '#9AC356';
+export const PALE_GREEN = '#E5EBDA';
 export const WHITE = '#FFFFFF';

src/components/linkcard/LinkCard.tsx

@@ -1,28 +1,46 @@
 import React from 'react';
-import './linkcard.less';
 import styled from 'styled-components';
 import { Card } from 'antd';
 import { LinkButton } from '../LinkButton';
-import { LIGHT_GREEN, WHITE } from '../../colors';
+import { LIGHT_GREEN, PALE_GREEN, WHITE } from '../../colors';
+import bkg1 from './bkg1.png';
+import bkg2 from './bkg2.png';
+import bkg3 from './bkg3.png';
+import bkg4 from './bkg4.png';
 
 interface LinkCardProps {
   readonly text: string;
   readonly path: string;
   readonly background: string;
 }
 
-const StyledCard = styled(({ ...props }) => <Card {...props} />)`
-  width: 265px;
+const StyledCard = styled(Card)`
+  display: inline-block;
   height: 265px;
-  padding-top: 183px;
-  border-radius: 6px;
+  width: 265px;
+  margin: auto;
   text-align: center;
+  border-radius: 6px;
+  border-color: ${PALE_GREEN};
+  background-size: 100%;
+  &.img1 {
+    background: url(${bkg1}) no-repeat;
+  }
+  &.img2 {
+    background: url(${bkg2}) no-repeat;
+  }
+  &.img3 {
+    background: url(${bkg3}) no-repeat;
+  }
+  &.img4 {
+    background: url(${bkg4}) no-repeat;
+  }
 `;
 
 const StyledLinkButton = styled(LinkButton)`
-  width: 202px;
   height: 40px;
-  padding: 0px;
+  min-width: 90%;
+  margin-top: 80%;
   border: ${LIGHT_GREEN} 4px;
   background: ${LIGHT_GREEN};
   color: ${WHITE};

src/components/linkcarousel/LinkCarousel.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Carousel } from 'antd';
+import styled from 'styled-components';
+import { LIGHT_GREEN } from '../../colors';
+import LinkCard from '../linkcard/LinkCard';
+import useWindowDimensions, { WindowTypes } from '../window-dimensions';
+
+const StyledCarousel = styled(Carousel)`
+  max-width: 1350px;
+  margin: auto;
+  border: solid;
+  border-radius: 10px;
+  border-width: 5px 5px 5px 5px;
+  border-color: ${LIGHT_GREEN};
+`;
+
+const CarouselSlide = styled.div`
+  padding: 10px;
+  border: solid;
+  border-width: 0px 0px 50px 0px;
+  border-color: ${LIGHT_GREEN};
+  text-align: center;
+`;
+
+const LinkCarousel: React.FC = () => {
+  const { windowType } = useWindowDimensions();
+  const slidesPerPage = Number(
+    `${
+      windowType === WindowTypes.Desktop
+        ? 4
+        : `${
+            windowType === WindowTypes.NarrowDesktop
+              ? 3
+              : `${windowType === WindowTypes.Mobile ? 1 : 2}`
+          }`
+    }`,
+  );
+  return (
+    <>
+      <StyledCarousel
+        {...{
+          slidesToShow: slidesPerPage,
+          slidesToScroll: slidesPerPage,
+          autoplay: true,
+        }}
+      >
+        <CarouselSlide>
+          <LinkCard text="My Blocks" path="/" background="img1" />
+        </CarouselSlide>
+        <CarouselSlide>
+          <LinkCard text="View Teams" path="/" background="img2" />
+        </CarouselSlide>
+        <CarouselSlide>
+          <LinkCard text="Volunteer Leaderboard" path="/" background="img3" />
+        </CarouselSlide>
+        <CarouselSlide>
+          <LinkCard text="Team Leaderboard" path="/" background="img4" />
+        </CarouselSlide>
+        <CarouselSlide>
+          <LinkCard text="5th Card" path="/" background="img1" />
+        </CarouselSlide>
+        <CarouselSlide>
+          <LinkCard text="6th Card" path="/" background="img2" />
+        </CarouselSlide>
+      </StyledCarousel>
+    </>
+  );
+};
+
+export default LinkCarousel;

src/components/pageheader/PageHeader.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Typography } from 'antd';
 import { DARKGREY } from '../../colors';
 import styled from 'styled-components';
+import useWindowDimensions, { WindowTypes } from '../window-dimensions';
 const { Paragraph } = Typography;
 
 interface PageHeaderProps {
@@ -35,9 +36,16 @@ const PageHeader: React.FC<PageHeaderProps> = ({
   pageSubtitle,
   subtitleColor,
 }) => {
+  const { windowType } = useWindowDimensions();
   return (
     <div>
-      <StyledTitle>{pageTitle}</StyledTitle>
+      <StyledTitle
+        style={{
+          marginTop: `${windowType === WindowTypes.Mobile ? '0vh' : '1vh'}`,
+        }}
+      >
+        {pageTitle}
+      </StyledTitle>
       <StyledSubtitle textColor={subtitleColor}>{pageSubtitle}</StyledSubtitle>
     </div>
   );

src/components/window-dimensions.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+
+const breakpointDesktop = 1150;
+const breakpointTablet = 900;
+const breakpointMobile = 650;
+
+export enum WindowTypes {
+  Mobile = 'MOBILE',
+  Tablet = 'TABLET',
+  NarrowDesktop = 'NARROW',
+  Desktop = 'DESKTOP',
+}
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  const windowType = `${
+    width < breakpointMobile
+      ? WindowTypes.Mobile
+      : width < breakpointTablet
+      ? WindowTypes.Tablet
+      : `${
+          width < breakpointDesktop
+            ? WindowTypes.NarrowDesktop
+            : WindowTypes.Desktop
+        }`
+  }`;
+  return {
+    width,
+    height,
+    windowType,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions(),
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}

src/containers/home/Home.tsx

@@ -1,23 +1,31 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import './home.less';
 import styled from 'styled-components';
 import { DARKGREY, MID_GREEN } from '../../colors';
+import { Typography } from 'antd';
 import PageHeader from '../../components/pageheader/PageHeader';
-import LinkCard from '../../components/linkcard/LinkCard';
-import { Col, Row, Typography } from 'antd';
+import LinkCarousel from '../../components/linkcarousel/LinkCarousel';
+import useWindowDimensions, {
+  WindowTypes,
+} from '../../components/window-dimensions';
+import HomeBackground from '../../SFTTicon_GREY.png';
 const { Paragraph } = Typography;
 
-const cSpan = 6;
-
 const StyledSubtitle = styled(Paragraph)`
   color: ${MID_GREEN};
   font-size: 20px;
   font-weight: bold;
-  margin-top: 56px;
+`;
+
+const HomeContainer = styled.div`
+  max-width: 1400px;
+  margin: auto;
+  padding: 24px;
+  background: url(${HomeBackground}) no-repeat top right;
 `;
 
 const Home: React.FC = () => {
+  const { windowType } = useWindowDimensions();
   return (
     <>
       <Helmet>
@@ -27,35 +35,21 @@ const Home: React.FC = () => {
           content="The user's home page after logging in, has links directing them to the blocks, teams, and leaderboard pages."
         />
       </Helmet>
-      <div className="homeContainer">
+      <HomeContainer
+        className="home-container"
+        style={{
+          marginTop: `${windowType === WindowTypes.Mobile ? '0vh' : '10vh'}`,
+        }}
+      >
         <PageHeader
           pageTitle="Welcome back, Jack!"
           pageSubtitle="Let's get back to those trees, why don't we?"
           subtitleColor={DARKGREY}
         />
 
         <StyledSubtitle>Quick Links</StyledSubtitle>
-        <div>
-          <Row>
-            <Col span={cSpan}>
-              <LinkCard text="My Blocks" path="/" background="img1" />
-            </Col>
-            <Col span={cSpan}>
-              <LinkCard text="View Teams" path="/" background="img2" />
-            </Col>
-            <Col span={cSpan}>
-              <LinkCard
-                text="Volunteer Leaderboard"
-                path="/"
-                background="img3"
-              />
-            </Col>
-            <Col span={cSpan}>
-              <LinkCard text="Team Leaderboard" path="/" background="img4" />
-            </Col>
-          </Row>
-        </div>
-      </div>
+        <LinkCarousel />
+      </HomeContainer>
     </>
   );
 };