[Feature] Bottom of the page

main-site/components/adventure-ahead-section/AdventureAheadSection.styles.ts

@@ -1,52 +1,93 @@
 import styled from '@emotion/styled';
-import { P } from '../../../shared-ui/style/typography';
+import { H3, P } from '../../../shared-ui/style/typography';
 import { max } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 
 const StyledAdventureAheadSectionContainer = styled.div`
   display: flex;
-  margin: 10em 8em;
-  @media ${max.tabletLg} {
-    margin: 10em 0;
-  }
+
   @media ${max.tablet} {
+    margin: 10em 0;
     flex-wrap: wrap;
-  }
+  };
+`;
+
+const StyledHeader = styled(H3)`
+  display: flex;
+
+  @media ${max.tablet} {
+    justify-content: center;
+  };
 `;
 
+const StyledHeaderDiv = styled.div`
+  width: 100%;
+`;
+
+
 const StyledParagraph = styled(P)`
-  padding: 2em 0;
-  color: ${colors.TEXT_BROWN};
+  margin-top: 1em;
+  color: ${colors.WHITE};
+
+  @media ${max.tablet} {
+    text-align: center;
+    margin-top: -1em;
+  }
 `;
-const StyledSignpost = styled.img`
-  padding: 2em;
-  vertical-align: top;
+
+const StyledImageCore = styled.img`
+  width: 40%;  
+  margin: auto;
+  margin-left: 2em;
+
   @media ${max.tablet} {
-    width: 13em;
-    height: auto;
-    margin: 0em;
+    width: 80%;
+    margin: auto;
   }
 `;
 
+const StyledShell = styled.img`
+  position: absolute;
+  width: 8%;
+  margin-top: clamp(15em, 20%, 19em);
+  margin-left: 1em;
+
+  @media ${max.tablet} {
+    width: 15%;
+    margin-top: clamp(15em, 45%, 22em);
+    margin-left: 3em;
+  }
+`;
+
+const StyledOceanLayers = styled.img`
+  width: 100%;
+  margin-bottom: -0.2em;
+`;
+
 const StyledTextContainer = styled.div`
-  margin: 2em 3em;
-    justify-content: center;
-    color: ${colors.TEXT_BROWN}
-    padding: 2em;
+  margin-top: 2em;
+  margin-right: 2em;
+  margin-left: 2em;
 `;
+
 const StyledButtonContainer = styled.div`
   margin-top: 0.5em;
 
   @media ${max.tablet} {
     justify-content: center;
     display: flex;
+    margin-top: 2em;
   }
 `;
 
 export {
   StyledParagraph,
-  StyledSignpost,
+  StyledImageCore,
+  StyledShell,
   StyledAdventureAheadSectionContainer,
   StyledTextContainer,
-  StyledButtonContainer
+  StyledButtonContainer,
+  StyledHeader,
+  StyledOceanLayers,
+  StyledHeaderDiv
 };

main-site/components/adventure-ahead-section/AdventureAheadSection.tsx

@@ -1,31 +1,36 @@
 import React from 'react';
 import PrimaryButton from '../../../shared-ui/components/primary-button/PrimaryButton';
-import { H3 } from '../../../shared-ui/style/typography';
-import { colors } from '../../../shared-ui/style/colors';
 
 import {
   StyledAdventureAheadSectionContainer,
   StyledParagraph,
-  StyledSignpost,
+  StyledImageCore,
   StyledTextContainer,
-  StyledButtonContainer
+  StyledButtonContainer,
+  StyledHeader,
+  StyledHeaderDiv,
+  StyledOceanLayers,
+  StyledShell
 } from './AdventureAheadSection.styles';
 
-import Signpost from '../../../shared-ui/images/signpost.svg';
+import GroupPhoto from '../../../shared-ui/images/meet-the-team/group.png';
+import OceanLayers from '../../../shared-ui/images/OceanLayers.svg';
+import shell1 from '../../../shared-ui/images/shell1.svg';
 import useMatchMedia from 'react-use-match-media';
 import { min } from '../../../shared-ui/lib/responsive';
 
 const AdventureAheadSection: React.FC = () => {
   const isDesktop = useMatchMedia(min.tablet);
   return (
+    <>
     <StyledAdventureAheadSectionContainer>
-      {isDesktop && <StyledSignpost src={Signpost} />}
+      {!isDesktop && <StyledHeaderDiv><StyledHeader>We can't wait to meet you!</StyledHeader></StyledHeaderDiv>};
+      <StyledShell src={shell1}/>
+      <StyledImageCore src={GroupPhoto}/>
       <StyledTextContainer>
-        <H3 color={colors.TEXT_BROWN}>We can't wait to meet you!</H3>
+      {isDesktop && <StyledHeader>We can't wait to meet you!</StyledHeader>}
         <StyledParagraph>
-          Stay up to date with all things Hackbeanpot like when we announce the{' '}
-          <br />
-          location, date, and when applications open! (no spam we promise!)
+          Stay up to date with all things HackBeanpot like when we announce the location, date, and when applications open! (no spam we promise!)
         </StyledParagraph>
         <StyledButtonContainer>
           <PrimaryButton
@@ -35,8 +40,9 @@ const AdventureAheadSection: React.FC = () => {
           />
         </StyledButtonContainer>
       </StyledTextContainer>
-      {!isDesktop && <StyledSignpost src={Signpost} />}
     </StyledAdventureAheadSectionContainer>
+    <StyledOceanLayers src={OceanLayers}/>
+    </>
   );
 };