Add hero section

src/components/gloabal-navbar/navbar.jsx

@@ -30,7 +30,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <div className="relative flex flex-wrap justify-between items-center px-12 global-navbar__container background-brand shadow-sm">
+    <div className="relative flex flex-wrap justify-between items-center px-12 global-navbar__container bg-brand brand-divider-bottom">
       <div className="flex">
         <img src={logo} alt="site logo" className="site-logo__img" />
       </div>

src/routes/home/Home.jsx

@@ -1,10 +1,11 @@
 import Navbar from '../../components/gloabal-navbar/navbar';
+import HeroCover from './components/hero-cover/HeroCover';
 
 const Home = () => {
   return (
     <>
       <Navbar />
-      <div className="container mx-auto"></div>
+      <HeroCover />
     </>
   );
 };

src/routes/home/components/hero-cover/HeroCover.jsx

@@ -0,0 +1,20 @@
+const HeroCover = () => {
+  return (
+    <div className="bg-brand min-h-60 text-slate-100 relative">
+      <div className="hero-content__container container mx-auto">
+        <></>
+        <div className="hero-content__text py-4">
+          <h3 className="text-4xl font-medium">Search hotels in Pune</h3>
+          <p className="my-1">
+            Enter your dates to see the latest prices and deals for Pune hotels
+          </p>
+        </div>
+        <div className="hero-content__search-box">
+          <input type="text"></input>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroCover;

src/styles/_utility.scss

@@ -1,5 +1,5 @@
-.background-brand {
-    background-color: $primary-color;
+.brand-divider-bottom {
+    border-bottom: 1px solid #053679;
 }
 
 // animations and effects

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'brand': '#074498'
+      }
+    },
   },
   plugins: [],
 };