From 9b1baf1048d00746d5f4d58dbbd67a80959634f3 Mon Sep 17 00:00:00 2001
From: hosead6168 <dominique11h@yahoo.com>
Date: Wed, 8 Sep 2021 08:44:56 -0500
Subject: [PATCH] refactor(styling): added more props

---
 src/Components/Hero/hero.jsx   |  2 +-
 src/Layout/Hero/styledHero.jsx | 37 ++++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/Components/Hero/hero.jsx b/src/Components/Hero/hero.jsx
index 965f5289..9423eef4 100644
--- a/src/Components/Hero/hero.jsx
+++ b/src/Components/Hero/hero.jsx
@@ -6,7 +6,7 @@ const Hero = (props) => {
   const {firstName, lastName} = props.username
   return (
     <>
-      <HeroContainer>
+      <HeroContainer Home>
         <HeroPositioning >
             <h1>
               <HeroText Left>{firstName}</HeroText>
diff --git a/src/Layout/Hero/styledHero.jsx b/src/Layout/Hero/styledHero.jsx
index 83372eb0..a655a38e 100644
--- a/src/Layout/Hero/styledHero.jsx
+++ b/src/Layout/Hero/styledHero.jsx
@@ -1,13 +1,9 @@
 import styled, {css} from 'styled-components';
 import breakpoint from '../../Utils/breakpoints.js';
+import wireframe from '../../Assets/Images/wireframe-min.jpg';
+import houston from '../../Assets/Images/besomeone-min.jpg';
 
 const HeroContainer = styled.div`
-  background-image: linear-gradient(
-      to right bottom,
-      rgba(119, 119, 119, 0.6),
-      rgba(119, 119, 119, 0.6)
-    ),
-    url("../../icons/wireframe.jpg");
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;
@@ -15,7 +11,28 @@ const HeroContainer = styled.div`
   position: relative;
   height: 70vh;
   padding-bottom: 55px;
-
+  ${props => props.Home && css`
+  background-image: linear-gradient(
+    to right bottom,
+    rgba(119, 119, 119, 0.6),
+    rgba(119, 119, 119, 0.6)
+  ),
+  url(${wireframe});  `}
+  ${props => props.About && css`
+    background-image: linear-gradient(
+        to right bottom,
+        rgba(119, 119, 119, 0.6),
+        rgba(119, 119, 119, 0.6)
+      ),
+      url(${houston});
+      background-position: center;
+    height: 40vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    `}
   @media only screen and ${breakpoint.devicemin.xs} and ${breakpoint.devicemax.lg} {
     height: 40vh;
     width: 100%;
@@ -76,4 +93,8 @@ const HeroText = styled.span`
   }
 `;
 
-export {HeroContainer, HeroPositioning, HeroText};
+const HeroCircleImage = styled.img.attrs({src: `${'https://i.imgur.com/dj1vhqzm.png?1'}`})`
+  border-radius: 50%;
+`;
+
+export {HeroContainer, HeroPositioning, HeroText, HeroCircleImage};