Hero WIP

src/Components/Hero/Hero.tsx

@@ -5,27 +5,27 @@ import { FaChevronDown } from "react-icons/fa";
 
 const Hero = () => {
   return (
-    <div className="flex flex-col sm:flex-row">
-      <div className="sm:w-1/2 w-full">
-        <img src={HeroImg} alt="hero" className="sm:mt-16"></img>
+    <div className="flex flex-col lg:flex-row md:flex-row">
+      <div className="lg:w-1/2 w-full md:w-1/2">
+        <img src={HeroImg} alt="hero" className="lg:mt-8 md:mt-8"></img>
       </div>
-      <div className="sm:w-1/2 sm:ml-20">
-        <div>
-          <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="text-center lg:w-1/2 ml-auto md:w-1/2 md:ml-auto md:mr-auto">
+        <img
+          src={Stars}
+          alt="hero"
+          className="lg:ml-auto lg:mr-48 lg:mt-8"
+        ></img>
+        <h1 className="text-4xl sm:text-6xl md:text-8xl">GROW YOUR</h1>
+        <h1 className="text-4xl sm:text-6xl md:text-8xl">BUSINESS</h1>
         <div className="flex flex-col">
-          <h2 className="text-xl sm:text-3xl mt-10">
+          <h2 className="lg:text-3xl lg:ml-10 mt-10 md:text-sm">
             We do all the digital footprint for you,
           </h2>
-          <h2 className="text-xl sm:text-3xl">
+          <h2 className="lg:text-3xl lg:ml-6 md:text-sm">
             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">
+          <div className="flex w-full lg:w-21 lg:h-4-75 mt-12 lg:ml-auto lg:mr-48 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+            <button className="flex-1 font-bold text-3xl 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>
@@ -33,7 +33,7 @@ const Hero = () => {
       </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>
+          <FaChevronDown size={40} className="text-text-gold mx-auto" />
         </a>
       </div>
     </div>

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 (

tailwind.config.js

@@ -14,8 +14,11 @@ export default {
         baijam: ['"Bai Jamjuree"', "sans-serif"],
       },
       spacing: {
+        "4-75": "4.75rem",
         8: "8rem",
+        "13-62": "13.625rem",
         20: "12rem",
+        21: "21rem",
         22: "22rem",
       },
     },