Spacing and alignments

Author: realstoman

src/components/AppBanner.js

@@ -9,10 +9,10 @@ const AppBanner = () => {
 	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-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
+				<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">
 					Hi, Iam Stoman
 				</h1>
-				<p className="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
+				<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">
 					A Full-Stack Developer & Design Enthusiast
 				</p>
 				<div className="flex justify-center sm:block">

src/components/ProjectsGrid.js

@@ -91,7 +91,7 @@ const ProjectsGrid = () => {
 			{/* Filter and search projects end */}
 
 			{/* Projects grid start */}
-			<div className="grid grid-cols-1 sm:grid-cols-3 mt-6 sm:gap-10">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
 				{/* <ProjectSingle
 				v-for="project in filteredProjects"
 				:key="project.id"

src/pages/Home.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import AppBanner from '../components/AppBanner';
 import ProjectsGrid from '../components/ProjectsGrid';
 
@@ -6,6 +7,15 @@ const Home = () => {
 		<div className="container mx-auto">
 			<AppBanner></AppBanner>
 			<ProjectsGrid></ProjectsGrid>
+			<div class="mt-10 sm:mt-15 flex justify-center">
+				<Link
+					to="/projects"
+					class="flex items-center px-6 py-3 rounded-lg shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl font-medium"
+					aria-label="More Projects"
+				>
+					More Projects
+				</Link>
+			</div>
 		</div>
 	);
 };