contact page and banner responsive design

Author: realstoman

src/components/contact/ContactDetails.js

@@ -20,7 +20,7 @@ const contacts = [
 
 const ContactDetails = () => {
 	return (
-		<div className="w-full sm:w-1/2">
+		<div className="w-full lg:w-1/2">
 			<div className="text-left max-w-xl px-6">
 				<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
 					Contact details

src/components/contact/ContactForm.js

@@ -1,6 +1,6 @@
 const ContactForm = () => {
 	return (
-		<div className="w-full sm:w-1/2">
+		<div className="w-full lg:w-1/2">
 			<div className="leading-loose">
 				<form
 					onSubmit={(e) => {

src/components/shared/AppBanner.js

@@ -7,12 +7,12 @@ const AppBanner = () => {
 	const [activeTheme] = useThemeSwitcher();
 
 	return (
-		<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2">
-			<div className="w-full sm:w-1/3 text-left">
-				<h1 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
+		<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2">
+			<div className="w-full md:w-1/3 text-left">
+				<h1 className="text-2xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
 					Hi, Iam Stoman
 				</h1>
-				<p className="mt-4 text-xl sm:text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
+				<p className="mt-4 text-lg sm:text-xl lg:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
 					A Full-Stack Developer & Design Enthusiast
 				</p>
 				<div className="flex justify-center sm:block">

src/components/shared/AppHeader.js

@@ -178,7 +178,7 @@ const AppHeader = () => {
 					{/* Header right section buttons start */}
 					<div className="hidden sm:flex justify-between items-center flex-col md:flex-row">
 						{/* Hire me button start */}
-						<div>
+						<div className="hidden md:flex">
 							<button
 								onClick={showHireMeModal}
 								className="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-5 py-2.5"

src/pages/Contact.js

@@ -3,7 +3,7 @@ import ContactForm from '../components/contact/ContactForm';
 
 const Contact = () => {
 	return (
-		<div className="container mx-auto sm:flex py-5 sm:py-10 mt-5 sm:mt-10">
+		<div className="container mx-auto flex flex-col-reverse lg:flex-row py-5 lg:py-10 lg:mt-10">
 			<ContactForm />
 			<ContactDetails />
 		</div>