From e7b29883e445c641d54c5a42cc4090f7e21d7f29 Mon Sep 17 00:00:00 2001
From: Pranav <pranavmendi@gmail.com>
Date: Thu, 14 Apr 2022 17:07:12 +0530
Subject: [PATCH] style: update Home page styles, responsivness

---
 src/components/Footer/Footer.css | 2 +-
 src/components/Hero/Hero.css     | 6 +++---
 src/pages/Home/Home.css          | 3 +++
 src/pages/Home/Home.tsx          | 5 +++--
 4 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Home/Home.css

diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
index 2eba16f..2482f4b 100644
--- a/src/components/Footer/Footer.css
+++ b/src/components/Footer/Footer.css
@@ -1,6 +1,6 @@
 .footer {
 	height: fit-content;
-	width: 99vw;
+	width: 100vw;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
diff --git a/src/components/Hero/Hero.css b/src/components/Hero/Hero.css
index ef47542..fe036a9 100644
--- a/src/components/Hero/Hero.css
+++ b/src/components/Hero/Hero.css
@@ -1,10 +1,9 @@
 .hero {
 	height: 100vh;
-	width: 99vw;
+	width: 100vw;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
-	overflow-x: hidden;
 }
 
 .row-reverse {
@@ -25,10 +24,11 @@
 @media screen and (max-width: 600px) {
 	.hero {
 		flex-direction: column;
+		text-align: center;
 	}
 	.hero img,
 	.text-container {
-		height: 30vh;
+		height: fit-content;
 		width: 80vw;
 	}
 }
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
new file mode 100644
index 0000000..ec207a4
--- /dev/null
+++ b/src/pages/Home/Home.css
@@ -0,0 +1,3 @@
+.home {
+	overflow-x: hidden;
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 4a4d81c..8b6fbe8 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Footer from '../../components/Footer/Footer';
 import Hero from '../../components/Hero/Hero';
 import { HeroDataInterface } from '../../database';
+import './Home.css';
 
 const Home: React.FC = () => {
 	const data: HeroDataInterface = {
@@ -19,7 +20,7 @@ const Home: React.FC = () => {
 		],
 	};
 	return (
-		<>
+		<div className='home'>
 			<Hero
 				imgPath={data.imgPath[0]}
 				heading={data.headings[0]}
@@ -32,7 +33,7 @@ const Home: React.FC = () => {
 				alternate={true}
 			/>
 			<Footer />
-		</>
+		</div>
 	);
 };