Desktop Hero v1

src/Components/Hero/Hero.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import HeroImg from "../../assets/HeroImg.svg";
+import Stars from "../../assets/Stars.svg";
+
+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>
+      <div className="w-1/2 sm:ml-96">
+        <div>
+          <img src={Stars} alt="hero" className="sm:mt-20 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">
+            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>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/Components/Navbar/Navbar.css

@@ -1,84 +0,0 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-  height: 90px;
-  z-index: 10;
-}
-
-.header h1 {
-  padding-top: 7px;
-}
-
-.logo {
-  width: 60px;
-  height: 60px;
-}
-
-.header-title-child {
-  float: left;
-  width: 30%;
-}
-
-.header-bg {
-  background-color: rgba(0, 0, 0, 0.85);
-  transition: 0.5s;
-}
-
-.nav-menu {
-  display: flex;
-}
-
-.nav-menu li {
-  padding: 0 1rem;
-}
-
-.nav-menu li a {
-  font-size: 1.2rem;
-  font-weight: 500;
-}
-
-.burger {
-  display: none;
-}
-
-@media screen and (max-width: 1040px) {
-  .nav-menu {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.9);
-    position: absolute;
-    top: 0;
-    left: -100%;
-    z-index: -3;
-    transition: 0.3s;
-  }
-
-  .nav-menu.active {
-    left: 0;
-  }
-
-  .logo {
-    padding-top: 7px;
-    width: 45px;
-    height: 45px;
-  }
-
-  .nav-menu li {
-    padding: 1rem 0;
-  }
-  .nav-menu li a {
-    font-size: 2rem;
-  }
-
-  .burger {
-    display: initial;
-    cursor: pointer;
-  }
-}

src/Components/Navbar/Navbar.tsx

@@ -19,7 +19,7 @@ export default () => {
 
   // Replace javascript:void(0) path with your path
   const navigation = [
-    { title: "Home", path: "/" },
+    { title: "Custom", path: "javascript:void(0)" },
     { title: "Services", path: "javascript:void(0)" },
     { title: "Work", path: "javascript:void(0)" },
     { title: "About Us", path: "javascript:void(0)" },
@@ -62,7 +62,7 @@ export default () => {
                 <li key={idx} className="hover:text-white">
                   <a
                     href={item.path}
-                    className="block py-2 md:py-0 md:px-4 text-lg font-medium$"
+                    className="block py-2 md:py-0 md:px-4 text-xl font-medium$"
                   >
                     {item.title}
                   </a>