Merge pull request adrianhajdin#1 from adrianhajdin/hero_section

Hero section + Acomplishment section done

src/components/Acomplishments/Acomplishments.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Section, SectionTitle } from '../../styles/GlobalComponents';
+import { Box, Boxes, BoxNum, BoxText } from './AcomplishmentsStyles';
+const data = [
+  {
+    number: 20,
+    text: 'Open Source Projects',
+    text2: '10 Pull Requests',
+  },
+  {
+    number: 1000,
+    text: 'Students',
+  },
+  {
+    number: 10,
+    text: 'Github Followers',
+  },
+  {
+    number: 400,
+    text: 'Github Stars',
+  },
+];
+
+const Acomplishments = () => {
+  return (
+    <Section>
+      <SectionTitle>Personal Achievements</SectionTitle>
+      <Boxes>
+        {data.map((card, index) => {
+          return (
+            <Box key={index}>
+              <BoxNum>{`${card.number}+`}</BoxNum>
+              <BoxText>{card.text}</BoxText>
+              {card.text2 && <BoxText>{card.text2}</BoxText>}
+            </Box>
+          );
+        })}
+      </Boxes>
+    </Section>
+  );
+};
+
+export default Acomplishments;

src/components/Acomplishments/AcomplishmentsStyles.js

@@ -0,0 +1,130 @@
+import styled from "styled-components"
+
+export const Boxes = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin: 24px 0 40px;
+
+  @media ${props => props.theme.breakpoints.md}{
+    gap: 16px;
+    margin: 20px 0 32px;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  }
+
+  @media ${props => props.theme.breakpoints.sm}{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    max-width: 500px;
+    margin: 24px auto;
+  }
+`
+
+export const Box = styled.div`
+  background: #212D45;
+  border-radius: 12px;
+  height: 144px;
+  padding: 24px;
+
+  @media ${props => props.theme.breakpoints.md} {
+    height: 112px;
+    padding: 16px;
+  }
+
+  @media ${props => props.theme.breakpoints.sm} {
+    height: 82px;
+    padding: 12px;
+    
+    &:nth-child(2n){
+      grid-row:2;
+    }
+  }
+`
+export const BoxNum = styled.h5`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 40px;
+  letter-spacing: 0.01em;
+  color: #FFFFFF;
+  margin-bottom: 8px;
+
+  @media ${props => props.theme.breakpoints.md} {
+    font-size: 28px;
+    line-height: 32px;
+  }
+  @media ${props => props.theme.breakpoints.sm} {
+    font-size: 24px;
+    line-height: 26px;
+}
+`
+
+export const BoxText = styled.p`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.75);
+
+  @media ${props => props.theme.breakpoints.md}{
+    font-size: 16px;
+    line-height: 20px;
+  };
+
+  @media ${props => props.theme.breakpoints.sm} {
+    font-size: 10px;
+    line-height: 14px;
+  }
+`
+
+export const Join = styled.div`
+  display: flex;
+  max-width: 1040px;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 80px;
+
+  @media ${props => props.theme.breakpoints.md}{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 64px;
+  }
+
+  @media ${props => props.theme.breakpoints.sm}{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 32px;
+  }
+`
+
+export const JoinText = styled.h5`
+  display: flex;
+  font-size: 24px;
+  line-height: 40px;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.5);
+
+@media ${props => props.theme.breakpoints.md}{
+  line-height: 32px;
+  font-size: 20px;
+};
+
+@media ${props => props.theme.breakpoints.sm}{
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 0 16px;
+}
+`
+
+export const IconContainer = styled.div`
+  display: flex;
+
+  @media ${props => props.theme.breakpoints.sm}{
+    width: 160px;
+    justify-content: space-between;
+  }
+`

src/components/Header/HeaderStyles.js

@@ -112,6 +112,8 @@ export const NavProductsIcon = styled(IoIosArrowDropdown)`
 export const SocialIcons = styled.a`
 transition: 0.3s ease;
 color: white;
+border-radius: 50px;
+  padding: 8px;
 &:hover {
     background-color: #212d45;
     transform: scale(1.2);

src/components/Hero/Hero.js

@@ -0,0 +1,61 @@
+import Image from 'next/image';
+import React from 'react';
+import {
+  SectionDivider,
+  SectionText,
+  SectionTitle
+} from '../../styles/GlobalComponents';
+import Button from '../../styles/GlobalComponents/Button';
+import { HeroSection, LeftSection, RightSection } from './HeroStyles';
+
+const Hero = (props) => {
+  return (
+    <>
+      <HeroSection>
+        <LeftSection>
+          <SectionTitle main>
+            Welcome To <br />
+            My Personal Portfolio
+          </SectionTitle>
+          <SectionText>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. At
+            auctor urna nunc id cursus metus aliquam eleifend mi.
+          </SectionText>
+          <Button onClick={props.handleClick}>Learn More</Button>
+        </LeftSection>
+        <RightSection>
+          <Image
+            src="/images/profile.jpeg"
+            alt="this is my profile"
+            width="500"
+            height="600"
+          />
+        </RightSection>
+      </HeroSection>
+      <SectionDivider />
+    </>
+  );
+};
+
+export default Hero;
+
+// <Section flexrow>
+//   <HeroBG
+//     alt="none"
+//     src="https://images.unsplash.com/photo-1622028026821-cb2acfc38bf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80"
+//   />
+//   <div>
+// <SectionTitle main>
+//   Welcome To <br />
+//   My Personal Portfolio
+// </SectionTitle>
+// <SectionText>
+//   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+//   eiusmod tempor incididunt ut labore et dolore magna aliqua. At auctor
+//   urna nunc id cursus metus aliquam eleifend mi.
+// </SectionText>
+//     <Button onClick={props.handleClick}>Request a Demo</Button>
+//     <SectionDivider />
+//   </div>
+// </Section>

src/components/Hero/HeroStyles.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+
+
+export const HeroSection = styled.section`
+display: flex;
+flex-direction: row;
+padding: 2rem;
+padding-top: 3rem;
+`
+
+export const RightSection = styled.div`
+width: 40%;
+display:flex;
+justify-content: center;
+padding: 1rem;
+
+`
+
+export const LeftSection = styled.div`
+width: 60%;
+`
+
+export const HeroBG = styled.img`
+`
+
+export const HeroSponsorsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 80px;
+
+  @media ${(props) => props.theme.breakpoints.md} {
+    margin-bottom: 64px;
+  }
+
+  @media ${(props) => props.theme.breakpoints.sm} {
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+  }
+`
+
+export const HeroSponsorLogo = styled.img`
+  width: 1fr;
+  height: 80px; 
+
+  @media ${(props) => props.theme.breakpoints.lg} {
+    height: 50px;
+  }
+
+  @media ${(props) => props.theme.breakpoints.md} {
+    height: 32px;
+    flex-basis: 33%;
+    margin-bottom: 8px;
+  }
+`

src/components/NavDropDown/index.js

@@ -13,7 +13,7 @@ const NavDropDown = (props) => {
         </DropDownIcon>
         <DropDownTextContainer>
           <DropDownItemTitle>Phone</DropDownItemTitle>
-          <DropDownItemDesc>Track andshare insights from ML projects</DropDownItemDesc>
+          <DropDownItemDesc>Let's get together and have a chat?'</DropDownItemDesc>
         </DropDownTextContainer>
       </DropDownItem>
       <DropDownItem href="#" target="_blank" rel="noreferrer">
@@ -22,7 +22,7 @@ const NavDropDown = (props) => {
         </DropDownIcon>
         <DropDownTextContainer>
           <DropDownItemTitle>Email</DropDownItemTitle>
-          <DropDownItemDesc>Open-source version control system for ML projects</DropDownItemDesc>
+          <DropDownItemDesc>If you want to talk jus send a message and I'll get back</DropDownItemDesc>
         </DropDownTextContainer>
       </DropDownItem>
       <DropDownItem href="#" target="_blank" rel="noreferrer">
@@ -32,7 +32,7 @@ const NavDropDown = (props) => {
         </DropDownIcon>
         <DropDownTextContainer>
           <DropDownItemTitle>Address</DropDownItemTitle>
-          <DropDownItemDesc>Open_source CI?CD for ML projects</DropDownItemDesc>
+          <DropDownItemDesc>1405, Angelus Dr, Florissant. Mo</DropDownItemDesc>
         </DropDownTextContainer>
       </DropDownItem>
     </DropDownContainer>

src/layout/Layout.js

@@ -6,7 +6,7 @@ export const Layout = ({children}) => {
   return (
     <Container>
      <Header/>
-     <div>{children}</div> 
+     <main>{children}</main> 
 
     </Container>
   )

src/pages/index.js

@@ -1,17 +1,14 @@
 
-import styled from 'styled-components'
+import Acomplishments from '../components/Acomplishments/Acomplishments'
+import Hero from '../components/Hero/Hero'
 import { Layout } from '../layout/Layout'
 
-const Title = styled.h1`
-  font-size: 50px;
-  color: ${({ theme }) => theme.colors.background1};
-`
 
 const Home = ()  => {
   return(
     <Layout>
-
-    <p>hello</p>
+    <Hero/>
+    <Acomplishments/>
     </Layout>
   )
 }

src/styles/GlobalComponents/index.js

@@ -1,9 +1,8 @@
 import styled from 'styled-components'
 
 export const Section = styled.section`
-  display: flex;
+  display: ${(props) => props.flex ? "row" : "column" };
   flex-direction: column;
-  width: calc(100vw - 96px);
   padding: 32px 48px 0;
   margin: 0 auto;
   max-width: 1040px;
@@ -23,7 +22,7 @@ export const Section = styled.section`
 
 export const SectionTitle = styled.h2`
   font-weight: 800;
-  font-size: ${(props) => props.main ? '72px' : '56px'};
+  font-size: ${(props) => props.main ? '65px' : '56px'};
   line-height: ${(props) => props.main ? '72px' : '56px'};
   width: max-content;
   max-width: 100%;
@@ -56,7 +55,7 @@ export const SectionText = styled.p`
   font-size: 24px;
   line-height: 40px;
   font-weight: 300;
-  padding-bottom: 32px;
+  padding-bottom: 3.6rem;
   color: rgba(255, 255, 255, 0.5);
 
   @media ${(props) => props.theme.breakpoints.md} {