Hero: Btn added to hero + Res Mess

src/Components/Hero/Hero.tsx

@@ -1,31 +1,42 @@
 import React from "react";
 import HeroImg from "../../assets/HeroImg.svg";
 import Stars from "../../assets/Stars.svg";
+import { FaChevronDown } from "react-icons/fa";
 
 const Hero = () => {
   return (
     <div className="flex flex-col sm:flex-row">
-      <div className="w-1/2">
+      <div className="sm:w-1/2 w-full">
-        <img src={HeroImg} alt="hero" className="mt-95"></img>
+        <img src={HeroImg} alt="hero" className="sm:mt-16"></img>
       </div>
-      <div className="w-1/2 sm:ml-96">
+      <div className="sm:w-1/2 sm:ml-20">
         <div>
-          <img src={Stars} alt="hero" className="sm:mt-20 sm:ml-22"></img>
+          <img src={Stars} alt="hero" className="sm:mt-16 sm:ml-22"></img>
           <h1 className="text-4xl sm:text-8xl text-text-blue">GROW YOUR</h1>
           <h1 className="text-4xl sm:text-8xl text-text-blue sm:ml-24 ml-9">
             BUSINESS
           </h1>
         </div>
         <div className="flex flex-col">
-          <h2 className="text-xl sm:text-3xl mt-16">
+          <h2 className="text-xl sm:text-3xl mt-10">
             We do all the digital footprint for you,
           </h2>
           <h2 className="text-xl sm:text-3xl">
             so you can focus on what’s important!
           </h2>
+          <div className="flex w-20 h-14 mt-10 mr-8 ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+            <button className="flex-1 font-bold text-xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
+              Yes, I want that!
+            </button>
           </div>
         </div>
       </div>
+      <div className="w-full mb-4 h-12 absolute bottom-0">
+        <a href="javascript:void(0)">
+          <FaChevronDown className="text-text-gold text-5xl text-text-blue mx-auto"></FaChevronDown>
+        </a>
+      </div>
+    </div>
   );
 };
 

src/routes/Home.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Navbar from "../Components/Navbar/Navbar";
+import Navbar from "../components/Navbar/Navbar";
-import Hero from "../Components/Hero/Hero";
+import Hero from "../components/Hero/Hero";
 
 const Home = () => {
   return (

tailwind.config.js

@@ -7,12 +7,14 @@ export default {
         "custom-bglight": "#1C1C1F",
         "custom-bgdark": "#06060B",
         "text-gold": "#FACC97",
+        "gold-light": "#FACC97",
+        "gold-dark": "#54330F",
       },
       fontFamily: {
         baijam: ['"Bai Jamjuree"', "sans-serif"],
       },
       spacing: {
-        95: "8rem",
+        8: "8rem",
         20: "12rem",
         22: "22rem",
       },