Merge pull request #1794 from 4GeeksAcademy/landings

Landings

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "githubPullRequests.ignoredPullRequestBranches": ["master"]
+  "githubPullRequests.ignoredPullRequestBranches": ["master"],
+  "editor.tabSize": 2
 }

gatsby-config.js

@@ -109,7 +109,7 @@ module.exports = {
       resolve: "gatsby-plugin-web-font-loader",
       options: {
         custom: {
-          families: ["Lato"],
+          families: ["Lato", "Inter"],
           urls: ["/fonts/fonts.css"],
         },
       },

package.json

@@ -80,6 +80,7 @@
     "gatsby-transformer-remark": "^6.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-transformer-yaml": "^5.11.0",
+    "inter": "^2.1.0",
     "lazysizes": "^5.2.2",
     "node-fetch": "^2.6.1",
     "prismjs": "^1.25.0",

src/assets/css/utils.css

@@ -39,3 +39,94 @@
 .capitalize {
   text-transform: capitalize;
 }
+
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dotss
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dotss li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 3px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dotss li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dotss li button:hover,
+.slick-dotss li button:focus
+{
+    outline: none;
+}
+.slick-dotss li button:hover:before,
+.slick-dotss li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dotss li button:before
+{
+    font-family: 'slick';
+    font-size: 11px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dotss li.slick-active button:before
+{
+    opacity: .75;
+    color: #0097CD;
+}

src/components/AlumniProjects/index.js

@@ -8,6 +8,7 @@ import ReactPlayer from "../ReactPlayer";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import "../../assets/css/utils.css"
 
 const AlumniProjects = ({
   lang,
@@ -17,6 +18,7 @@ const AlumniProjects = ({
   playerHeight,
   title,
   paragraph,
+  yml
 }) => {
   const [projects, setProjects] = useState(
     lang[0].node.projects.slice(0, limit || lang[0].node.projects.length)
@@ -62,6 +64,7 @@ const AlumniProjects = ({
   };
   const settings = {
     dots: true,
+    dotsClass: "slick-dotss",
     infinite: true,
     autoplay: true,
     autoplaySpeed: 6000,
@@ -101,22 +104,28 @@ const AlumniProjects = ({
   //         }
   //     }
   // };
-
   return (
-    <Div flexDirection="column" style={containerStyle}>
-      {title !== undefined && paragraph !== undefined && (
-        <GridContainer margin="6rem 0">
+    <Div 
+      flexDirection="column" 
+      style={containerStyle} 
+      maxWidth_lg="1366px"
+      maxWidth_md="1024px"
+      maxWidth_tablet="768px" 
+      margin_tablet="0px auto 60px auto" 
+      zIndex="1" 
+    >
+      {(title !== undefined && paragraph !== undefined) || yml && (
+        <GridContainer margin="50px 0 50px 0">
           <Div display="flex" flexDirection="column" alignItems="center">
-            <H2 margin="0 0 15px 0" fontWeight="900">
-              {title}
+            <H2 margin="0 0 15px 0" fontWeight="700" lineHeight="36px">
+              {yml.heading || title}
             </H2>
             <Paragraph padding="0" padding_tablet="0 16%">
-              {paragraph}
+              {yml.sub_heading || paragraph}
             </Paragraph>
           </Div>
         </GridContainer>
       )}
-
       <Slider {...settings}>
         {projects?.map((item, index) => {
           return (
@@ -128,21 +137,26 @@ const AlumniProjects = ({
               gridGap_tablet="0"
               margin_tablet="0 0 36px 0"
               margin="0 0 50px 0"
-              padding_tablet="0"
+              padding_tablet="0 40px"
+              height_tablet="414px"
             >
               <Div
-                background={Colors.lightGray}
-                height_tablet="auto"
+                height_tablet="414px"
                 padding="0"
-                padding_tablet="17px 51px"
-                gridColumn_tablet="1 / 9"
+                //padding_tablet="17px 51px"
+                padding_tablet="0"
+                gridColumn_tablet="1 / 7"
               >
                 {item.project_video === "" ? (
                   <StyledBackgroundSection
-                    height={`500px`}
                     image={item.project_image.childImageSharp.gatsbyImageData}
                     bgSize={`cover`}
                     alt="Cnn Logo"
+                    style={{
+                      width: "100%",
+                      height: "342px",
+                      margin: "36px 15%",
+                    }}
                   />
                 ) : (
                   <ReactPlayer
@@ -152,20 +166,30 @@ const AlumniProjects = ({
                     imageSize="maxresdefault"
                     right_tablet="-93px"
                     left_tablet="unset"
+                    margin_tablet="36px 15%"
                     switched={switched}
-                    videoHeight="500px"
+                    videoHeight="342px"
+                    width_play="92px"
+                    height_play="92px"
+                    fontSize_play="28px"
+                    background_play="black"
+                    opacity_play="1"
+                    leftPlay_tablet="121.5%"
+                    transformPlay_tablet="translateX(-115%%) translateY(-50%)"
+                    transformPlay_md="translateX(-51%) translateY(-50%)"
+                    transformPlay_lg="translateX(-50%) translateY(-50%)"
                     style={{
                       width: "100%",
-                      height: "500px",
+                      height: "342px",
                     }}
                   />
                 )}
               </Div>
-              <Div flexDirection="column" gridColumn_tablet="10 / 15 ">
+              <Div flexDirection="column" gridColumn_tablet="8 / 15 ">
                 <H3 textAlign="left" margin={`10px 0`}>
                   Project: {`${item.project_name}`}
                 </H3>
-                <H4 textAlign="left" fontWeight="900" margin={`24px 0 9px 0`}>
+                <H4 textAlign="left" fontWeight="900" lineHeight="19px" margin={`24px 0 9px 0`}>
                   {" "}
                   {`> MADE BY:`}
                 </H4>
@@ -183,6 +207,7 @@ const AlumniProjects = ({
                         fontWeight={`400`}
                         width="fit-content"
                         margin="0 20px 0 0"
+                        lineHeight="22px"
                       >
                         {`${alumni.first_name} ${alumni.last_name}`}
                       </H4>
@@ -225,12 +250,13 @@ const AlumniProjects = ({
                   textAlign="left"
                   fontWeight="900"
                   margin={`20px 0 6px 0`}
+                  lineHeight="19px"
                   style={{ borderTop: "1px solid #ebebeb" }}
                 >
                   {" "}
                   {`> DESCRIPTION:`}
                 </H4>
-                <Paragraph color={Colors.gray} textAlign="left">
+                <Paragraph color={Colors.gray} textAlign="left" lineHeight="22px">
                   {item.project_content}
                 </Paragraph>
               </Div>

src/components/BackgroundDrawing/index.js

@@ -36,6 +36,8 @@ const Figure = styled.div`
     width: ${(props) => props.width_tablet};
     height: ${(props) => props.height_tablet};
     display: ${(props) => props.display_tablet};
+    top: ${(props) => props.top_tablet};
+    left: ${(props) => props.left_tablet};
   }
   @media ${Devices.md} {
     width: ${(props) => props.width_md};