Nav, hero section and cards completed

AliYar-Khan · May 28, 2023 · 47e7be3 · 47e7be3
1 parent 736312a
commit 47e7be3
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 28 deletions.
diff --git a/src/components/ButtonFill.jsx b/src/components/ButtonFill.jsx
@@ -1,9 +1,16 @@
-import React from 'react'
+/* eslint-disable react/prop-types */
+import React from "react";
 
-const ButtonFill = () => {
+const ButtonFill = ({ children }) => {
   return (
-    <div>ButtonFill</div>
-  )
-}
+    <button
+      className="bg-primary text-white rounded-full shadow-sm 
+    shadow-primary font-semibold md:text-sm 
+    text-xs tracking-wide md:px-9 px-7 py-3"
+    >
+      {children}
+    </button>
+  );
+};
 
-export default ButtonFill
+export default ButtonFill;
diff --git a/src/components/ButtonOutline.jsx b/src/components/ButtonOutline.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+
+const ButtonOutline = ({ children }) => {
+  return (
+    <button
+      className="bg-transparent border border-primary text-primary rounded-full font-semibold md:text-sm 
+    text-xs tracking-wide md:px-9 px-7 py-3"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ButtonOutline;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,25 +1,74 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable no-unused-vars */
-import React from 'react'
-import Nav from './Nav/Nav'
-import HeroImage from '../assets/Hero.png';
+import React from "react";
+import Nav from "./Nav/Nav";
+import HeroImage from "../assets/Hero.png";
+import ButtonFill from "./ButtonFill";
+import ButtonOutline from "./ButtonOutline";
+import Icon1 from "../assets/icon-1.png";
+import Icon2 from "../assets/icon-2.png";
+import Icon3 from "../assets/icon-3.png";
+
 const Header = () => {
+  const Info = [
+    {
+      icon: Icon1,
+      title: "Secret Locations",
+      des: "Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor.",
+    },
+    {
+      icon: Icon2,
+      title: "Safe Adventure",
+      des: "Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor.",
+    },
+    {
+      icon: Icon3,
+      title: "Professional Hikers",
+      des: "Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor.",
+    },
+  ];
   return (
-    <section className='bg-Hero bg-cover bg-center h-screen py-4 md:px-24 px-4'>
-        <Nav />
-        <div className='flex md:flex-row flex-col gap-5 pt-20'>
-            <div className='flex-1'>
-                <h1 className='md:text-5xl text-4xl font-semibold tracking-wide md:leading-tight leading-snug'>Be prepared for mountains and Beyond.</h1>
-                <p className='text-gray-600 md:w-2/3 md:py-4 py-2 leading-relaxed'>
-                    Are you looking for amazing hiking travel? Don't Worry! We got it for you!
-                </p>
-            </div>
-            <div className='flex-1 flex justify-center'>
-                <img src={HeroImage} alt='Hero Image' className='h-2/3'/>
-            </div>
+    <section className="bg-Hero bg-cover bg-center py-4 md:px-24 px-4">
+      <Nav />
+      <div className="flex md:flex-row flex-col gap-5 pt-20">
+        <div className="flex-1">
+          <h1 className="md:text-5xl text-4xl font-semibold tracking-wide md:leading-tight leading-snug">
+            Be prepared for mountains and Beyond.
+          </h1>
+          <p className="text-gray-600 md:w-2/3 md:py-4 py-2 leading-relaxed">
+            Are you looking for amazing hiking travel? Don't Worry! We got it
+            for you!
+          </p>
+          <br />
+          <div className="flex md:gap-4 gap-2 flex-wrap">
+            <ButtonFill>Contact Us</ButtonFill>
+            <ButtonOutline>Watch Video</ButtonOutline>
+          </div>
+        </div>
+        <div className="flex-1 flex justify-center">
+          <img src={HeroImage} alt="Hero Image" className="h-2/3" />
         </div>
+      </div>
+      <div className="bg-white shadow-2xl flex md:flex-row flex-col md:-mt-48 gap-10 md:p-14 p-10 mt-5 rounded-md">
+        {Info.map((info, index) => (
+          <div key={index}>
+            <img src={info.icon} alt="icon" className="h-16" />
+            <h1 className="font-semibold text-lg my-3">{info.title}</h1>
+            <p className="text-gray-600 text-sm leading-relaxed">{info.des}</p>
+            <button className="text-rose-600 font-medium text-sm my-1">
+              Read More
+            </button>
+          </div>
+        ))}
+      </div>
+      <p className="py-10 md:text-sm text-xs block text-gray-600 text-center">
+        Don’t hesitate to contact us to get better Information.
+        <span className="text-rose-600 font-semibold italic px-1">
+          EXPLORE ALL TREKKING.
+        </span>
+      </p>
     </section>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
@@ -11,17 +11,17 @@ const Nav = () => {
       </ul>
       {/*Mobile Nav Bar*/}
       <ul
-        className={`md:hidden flex flex-col gap-10 text-medium p-7 pt-20 fixed-top-0 z-50 bg-white w-2/3 h-screen shadow-2xl ${
-          openDrawer ? "visible" : "invisible"
-        } duration-500`}
+        className={`fixed top-0 z-50 bg-white w-2/3 h-screen shadow-2xl
+        md:hidden flex flex-col gap-10 text-medium  p-7 pt-20 duration-500
+        ${openDrawer ? "right-0" : "right-[-100%]"}`}
       >
         <NavLinks />
       </ul>
       <div
         className="text-2xl md:hidden z-50"
         onClick={() => setOpenDrawer(!openDrawer)}
       >
-        <ion-icon name="menu"></ion-icon>
+        <ion-icon name={openDrawer ? "close" : "menu"}></ion-icon>
       </div>
     </nav>
   );