From a951b9b53f4e9be5bd497cb7ce3b508be43cedcd Mon Sep 17 00:00:00 2001
From: Fernando Videira <tragedy_twisty.0t@icloud.com>
Date: Sat, 13 Apr 2024 02:37:15 +0100
Subject: [PATCH] Hero: Btn added to hero + Res Mess

---
 src/Components/Hero/Hero.tsx | 21 ++++++++++++++++-----
 src/routes/Home.tsx          |  4 ++--
 tailwind.config.js           |  4 +++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Components/Hero/Hero.tsx b/src/Components/Hero/Hero.tsx
index f80afdc..4886ddd 100644
--- a/src/Components/Hero/Hero.tsx
+++ b/src/Components/Hero/Hero.tsx
@@ -1,30 +1,41 @@
 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">
-        <img src={HeroImg} alt="hero" className="mt-95"></img>
+      <div className="sm:w-1/2 w-full">
+        <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>
   );
 };
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 8be6931..5872be1 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import Navbar from "../Components/Navbar/Navbar";
-import Hero from "../Components/Hero/Hero";
+import Navbar from "../components/Navbar/Navbar";
+import Hero from "../components/Hero/Hero";
 
 const Home = () => {
   return (
diff --git a/tailwind.config.js b/tailwind.config.js
index 90b016d..ceb1627 100644
--- a/tailwind.config.js
+++ b/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",
       },