🤝 Merge: Merge pull request #14 from waynemorphic/dev

dev -> master

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+yarn.lock
 
 # Editor directories and files
 .vscode/*

src/pages/home/Home.jsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import Footer from "../footer/Footer";
 import { useState } from "react";
 import ReactPlayer from "react-player";
+import Services from "../services/Services";
 
 const Index = ({ handleWatchVideo, clicked }) => {
   return (
@@ -65,6 +66,7 @@ export default function Home() {
     <div>
       <NavBar />
       <Index handleWatchVideo={handleWatchVideo} clicked={clicked} />
+      <Services />
       <Footer />
     </div>
   );

src/pages/services/Services.css

@@ -0,0 +1,68 @@
+.services {
+   display: flex;
+   text-align: center;
+   justify-content: center;
+   flex-direction: column;
+   padding: 2rem 0;
+}
+
+.services .leading-text {
+   font-weight: bold;
+}
+
+.services h2 {
+   font-size: 4rem;
+   font-family: "Quicksand", sans-serif;
+   line-height: 1.2;
+   padding-bottom: 20px;
+}
+
+.services h2 span {
+   color: #0fa98d;
+   font-family: "Cookie", cursive;
+   font-size: 4.5rem;
+}
+
+.services .service-card-container {
+   display: flex;
+   flex-direction: row;
+   /* flex-wrap: wrap;
+    justify-content: space-around; */
+   gap: 20px;
+}
+
+.services-card, p {
+   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+   font-size: 1.1rem;
+}
+
+.service-card h3{
+   font-family: "Quicksand", sans-serif;
+   color: #0fa98d;
+}
+
+@media only screen and (max-width: 790px) {
+   .services .service-card-container {
+      flex-wrap: wrap;
+      justify-content: center;
+   }
+}
+
+.services .service-card {
+   padding: 50px;
+   border-radius: 16px;
+   background: linear-gradient(to bottom, rgba(15, 15, 15, 0), rgba(15, 15, 15, 0.1) 100%);
+   transition: transform .65s cubic-bezier(.05, .2, .1, 1), box-shadow .65s cubic-bezier(.05, .2, .1, 1);
+}
+
+.services .service-card:hover {
+   box-shadow: 0 25px 55px rgba(0, 0, 0, .22);
+   background: #fff;
+   transform: translateY(-10px);
+   transition: transform .65s cubic-bezier(.05, .2, .1, 1), box-shadow .65s cubic-bezier(.05, .2, .1, 1);
+}
+
+.services .service-card img {
+   width: 250px;
+   height: auto;
+}

src/pages/services/Services.jsx

@@ -0,0 +1,58 @@
+import { useNavigate } from 'react-router-dom';
+
+import facial from "../../assets/facial.png";
+import haircut from "../../assets/haircut.png";
+import pedicure from "../../assets/pedicure.png";
+
+
+import "./Services.css";
+
+export default function Services() {
+
+  const navigate = useNavigate()
+
+  return (
+    <div className="services">
+      {/* <span className="leading-text">Our Services</span> */}
+      <h2>Our Barber <span>Services</span></h2>
+      <div className="service-card-container">
+        <div className="service-card"
+          onClick={() => navigate("/booking#haircuts")}>
+          <figure>
+            <img
+              src={haircut}
+              alt="Haircuts" />
+          </figure>
+          <h3>Haircuts</h3>
+          <p>
+            Full style and cut to suit your face shape, proffessionally styled
+          </p>
+        </div>
+        <div className="service-card"
+        onClick={() => navigate("/booking#facials")}>
+          <figure>
+            <img
+              src={facial}
+              alt="Facial Skincare" />
+          </figure>
+          <h3>Facial Skincare</h3>
+          <p>
+            Full style and cut to suit your face shape, proffessionally styled
+          </p>
+        </div>
+        <div className="service-card"
+         onClick={() => navigate("/booking#manipedi")}>
+          <figure>
+            <img
+              src={pedicure}
+              alt="Manicure & Pedicure" />
+          </figure>
+          <h3>Manicure & Pedicure</h3>
+          <p>
+            Full style and cut to suit your face shape, proffessionally styled
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}