Update hero text and add illustrations

components/Hero.tsx

@@ -1,16 +1,24 @@
-import { FC } from "react";
-import styled from "styled-components";
-import Typing from "react-typing-animation";
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../components/DarkMode';
+import styled from 'styled-components';
+import Image from 'next/image';
+import Typing from 'react-typing-animation';
 
 const Wrapper = styled.div`
 	min-height: 45vh;
 	display: grid;
+	grid-template-columns: repeat(2, 1fr);
 	align-items: center;
 	height: auto;
 	text-align: left;
 
 	@media (max-width: 768px) {
 		min-height: 65vh;
+		grid-template-columns: auto;
+
+		.illustration {
+			display: none;
+		}
 	}
 
 	h2 {
@@ -25,37 +33,39 @@ const Wrapper = styled.div`
 	.green {
 		color: #73d26b;
 	}
-
-	.orange {
-		color: #d6a356;
-	}
-
-	.red {
-		color: #d75050;
-	}
 `;
 
 const Hero: FC = () => {
+	const { dark } = useContext(DarkModeContext);
+
 	return (
 		<Wrapper>
-			<Typing speed={15} hideCursor={true} loop={false}>
-				<h2>Hi</h2>
+			<Typing speed={15} hideCursor={true} loop={false} className='intro'>
+				<h2>Hi, I am Hazem</h2>
 				<h2>I Like Building Things</h2>
-				<h2 className="green">
-					Software Developer ✔️<span className="small">check</span>
+				<h2 className='green'>
+					Software Developer ✔️<span className='small'>check</span>
 				</h2>
-				<h2 className="red">
-					Designer 🛑
-					<span className="small">error: need more practise and feedback</span>
+				<h2 className='green'>
+					Designer ✔️
+					<span className='small'>check</span>
 				</h2>
-				<h2 className="orange">
-					Hard Working ⚠️
-					<span className="small">warning: not always the case</span>
+				<h2 className='green'>
+					Hard Working ✔️
+					<span className='small'>check</span>
 				</h2>
-				<h2 className="green">
-					Life Long Learner ✔️<span className="small">check</span>
+				<h2 className='green'>
+					Life Long Learner ✔️<span className='small'>check</span>
 				</h2>
 			</Typing>
+			<div className='illustration'>
+				<Image
+					src={dark ? '/light-illustration.svg' : '/dark-illustration.svg'}
+					width='auto'
+					height='auto'
+					layout='responsive'
+				/>
+			</div>
 		</Wrapper>
 	);
 };