Improved Responsiveness

xB0t · Dec 11, 2023 · 08f0cf5 · 08f0cf5
1 parent f204a5b
commit 08f0cf5
Showing 1 changed file with 9 additions and 18 deletions.
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,12 +1,9 @@
-import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
 import CheemsPic from "../assets/cheems.png";
-import Footer from "../components/Footer";
 import Tools from "../components/Tools";
+import Button from "../components/Button";
 
 const Home = () => {
-  const navigate = useNavigate();
-
   return (
     <>
       <Title title="Home Page" />
@@ -20,29 +17,23 @@ const Home = () => {
             />
           </div>
           <div className="pb-8">
-            <h1 className="grid place-items-center text-4xl pb-4 text-white max-sm:text-3xl">
+            <h1 className="grid place-items-center text-4xl font-black pb-4 text-white max-sm:text-3xl">
               Hi, I am Yash.
             </h1>
-            <h2 className="grid place-items-center text-xl pb-4 text-white max-sm:text-lg">
+            <h2 className="grid place-items-center text-xl pb-4 font-medium text-white max-sm:text-lg">
               {" "}
               I am Cloud Engineer, Backend Web Developer.
             </h2>
           </div>
         </div>
-
-        <div className="grid place-items-center">
-          <button
-            type="button"
-            className="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-xl px-5 py-2.5 text-center me-2 mb-2"
-            onClick={() => navigate("/projects")}
-          >
-            Projects
-          </button>
-        </div>
       </div>
-
       <Tools />
-      <Footer />
+      <Button
+        name="Projects"
+        btnDivStyling="grid place-items-center max-sm:pb-28"
+        btnStyling="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-xl px-5 py-2.5 text-center me-2 mb-2"
+        navigateTo="/projects"
+      />
     </>
   );
 };