Under the sea

live-site/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "live-site",
-  "version": "1.0.0",
-  "private": true,
-  "description": "live-site",
-  "author": "jzhzhang66",
-  "keywords": [
-    "gatsby"
-  ],
-  "scripts": {
-    "develop": "gatsby develop",
-    "start": "gatsby develop",
-    "build": "gatsby build",
-    "serve": "gatsby serve",
-    "clean": "gatsby clean",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "airtable": "^0.11.5",
-    "gatsby": "^4.20.0",
-    "gatsby-plugin-mailchimp": "^5.2.2"
-  }
-}
+    "name": "live-site",
+    "version": "1.0.0",
+    "private": true,
+    "description": "live-site",
+    "author": "jzhzhang66",
+    "keywords": [
+        "gatsby"
+    ],
+    "scripts": {
+        "develop": "gatsby develop",
+        "start": "gatsby develop",
+        "build": "gatsby build",
+        "serve": "gatsby serve",
+        "clean": "gatsby clean",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "airtable": "^0.11.5",
+        "gatsby": "^4.20.0",
+        "gatsby-plugin-mailchimp": "^5.2.2"
+    }
+}

main-site/components/about-section/AboutSection.styles.ts

@@ -1,20 +1,20 @@
 import styled from '@emotion/styled';
 import { H2, H3, P } from '../../../shared-ui/style/typography';
-import { min } from '../../../shared-ui/lib/responsive';
+import { max, min } from '../../../shared-ui/lib/responsive';
 
 const StyledAboutSectionContainer = styled.div`
-  margin-top: 2em;
+  margin-top: 10em;
   padding-bottom: 10em;
   position: relative;
   overflow: hidden;
   @media ${min.tablet} {
-    margin-top: 6em;
+    margin-top: 10em;
   }
 `;
 
 const StyledItemsContainer = styled.div`
   display: flex;
-  margin-top: 5em;
+  margin: 5em;
   justify-content: center;
 `;
 
@@ -36,6 +36,7 @@ const StyledItemTextContainer = styled.div`
 `;
 
 const StyledTitle = styled(H2)`
+  color: white;
   text-align: center;
 `;
 
@@ -53,9 +54,10 @@ const StyledItemImage = styled.img`
 `;
 
 const StyledItemDescription = styled(P)`
-  margin: 1em 2em 0 2em;
+  margin: 4em 2em 0 2em;
   @media ${min.tablet} {
     margin: 0;
+    font-size: 1.125em;
   }
 `;
 
@@ -93,20 +95,25 @@ const StyledCenterImage = styled(StyledMobileImage)`
 
 const StyledLeftImage = styled(StyledMobileImage)`
   left: -14em;
+
   @media ${min.tabletSm} {
     left: -20em;
   }
 `;
 
 const StyledRightImage = styled(StyledMobileImage)`
   right: -14em;
+
   @media ${min.tabletSm} {
     right: -20em;
   }
 `;
 
 const StyledArrowDescriptionContainer = styled.div`
   display: flex;
+  margin-left: -4.5em;
+  margin-right: -4.5em;
+  margin-top: -3.7em;
 `;
 
 const StyledRedRocks = styled.img`
@@ -126,6 +133,7 @@ const StyledRedRocks = styled.img`
 
 const StyledItemTitle = styled(H3)`
   font-size: 1.7em;
+  margin-bottom: 1em;
 `;
 
 export {

main-site/components/about-section/AboutSection.tsx

@@ -14,16 +14,14 @@ import {
   StyledLeftImage,
   StyledRightImage,
   StyledArrowDescriptionContainer,
-  StyledRedRocks,
   StyledItemTitle
 } from './AboutSection.styles';
 import { aboutSectionData } from '../../lib/data';
-import Community from '../../../shared-ui/images/community.png';
-import Exploration from '../../../shared-ui/images/exploration.png';
-import Growth from '../../../shared-ui/images/growth.png';
+import Community from '../../../shared-ui/images/communityShell.png';
+import Exploration from '../../../shared-ui/images/explorationShell.png';
+import Growth from '../../../shared-ui/images/growthShell.png';
 import { AboutSectionData } from '../../lib/types';
 import Arrow from '../../../shared-ui/components/arrow/Arrow';
-import RedRocks from '../../../shared-ui/images/red-rocks.svg';
 import { getLeftOrRight } from '../../lib/utils';
 
 function getImage(title: string): string {
@@ -56,7 +54,7 @@ const AboutSection: React.FC = () => {
             <StyledItemContainer>
               <StyledCenterImage src={getImage(currItem.title)} />
               <StyledItemTextContainer>
-                <StyledItemTitle color={colors.TEXT_BROWN}>
+                <StyledItemTitle color={colors.WHITE}>
                   {currItem.title}
                 </StyledItemTitle>
 
@@ -69,7 +67,7 @@ const AboutSection: React.FC = () => {
                       )
                     }
                   />
-                  <StyledItemDescription color={colors.TEXT_BROWN}>
+                  <StyledItemDescription color={colors.WHITE}>
                     {currItem.description}
                   </StyledItemDescription>
                   <Arrow
@@ -97,18 +95,17 @@ const AboutSection: React.FC = () => {
               <StyledItemContainer key={curr.title}>
                 <StyledItemImage src={getImage(curr.title)} />
                 <StyledItemTextContainer>
-                  <StyledItemTitle color={colors.TEXT_BROWN}>
+                  <StyledItemTitle color={colors.WHITE}>
                     {curr.title}
                   </StyledItemTitle>
-                  <StyledItemDescription color={colors.TEXT_BROWN}>
+                  <StyledItemDescription color={colors.WHITE}>
                     {curr.description}
                   </StyledItemDescription>
                 </StyledItemTextContainer>
               </StyledItemContainer>
             ))}
           </StyledItemsContainer>
         )}
-        <StyledRedRocks src={RedRocks} />
       </StyledAboutSectionContainer>
     </div>
   );

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}/>
+    </>
   );
 };