added a services section and started to add slug types ofr services b…

…uttons

src/app/contact/page.tsx

@@ -19,7 +19,7 @@ const ContactPage: React.FC = () => {
         </p>
 
         <div className="flex flex-col md:flex-row-reverse mt-14">
-          <div className="lg:w-full lg:flex lg:justify-evenly lg:h-[750px] hidden">
+          <div className="lg:w-full lg:flex lg:justify-evenly hidden">
             <Image
               src="/images/contact.png"
               alt="Commercial plastering img"

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Services from "@/components/BuildingTypes/page";
 import Carousel from "../components/Carousel";
 
 export default function Home() {
@@ -7,7 +8,9 @@ export default function Home() {
         <Carousel />
       </section>
       <section>
-        <div className="h-[600px] w-full bg-darkblue mt-8"></div>
+        <div className="w-full mt-8">
+          <Services />
+        </div>
       </section>
       <section>
         <div className="h-[600px] w-full bg-lightblue mt-8"></div>

src/components/BuildingTypes/page.tsx

@@ -0,0 +1,89 @@
+import Image from "next/image";
+import Button from "../Button/page";
+import Comm from "/public/images/comm.png";
+import Home from "/public/images/home.png";
+import Private from "/public/images/priv.png";
+
+export default function Services() {
+  return (
+    <section className="w-full h-auto mt-20">
+      <h1 className="mb-8 text-darkblue font-semibold text-5xl">
+        OUR SERVICES ENCOMPASS
+      </h1>
+      <div className="border-b-4 lg:border-b-8 border-orange w-full mb-8"></div>
+      <div className="flex flex-col md:flex-row justify-between w-auto">
+        <div>
+          <h2 className="mb-4 font-semibold text-2xl">COMMERCIAL SITES</h2>
+          <Image
+            src={Comm}
+            alt="Commercial Sites"
+            width={452}
+            height={208}
+            className="mb-4"
+          />
+          <p className="mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit
+            amet, consectetur porta, lectus sed. Qsit amet, consectetur
+            adipiscing elit.
+          </p>
+          <Button type="commercial" />
+        </div>
+        <div>
+          <h2 className="mb-4 font-semibold text-2xl">PRIVATE HOUSE</h2>
+          <Image
+            src={Private}
+            alt="Private House"
+            width={452}
+            height={208}
+            className="mb-4"
+          />
+          <p className="mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit
+            amet, consectetur porta, lectus sed. Qsit amet, consectetur
+            adipiscing elit.
+          </p>
+          <Button type="private" />
+        </div>
+        <div>
+          <h2 className="mb-4 font-semibold text-2xl">HOME OWNER</h2>
+          <Image
+            src={Home}
+            alt="Home Owner"
+            width={452}
+            height={208}
+            className="mb-4"
+          />
+          <p className="mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit
+            amet, consectetur porta, lectus sed. Qsit amet, consectetur
+            adipiscing elit.
+          </p>
+          <Button type="homeowner" />
+        </div>
+      </div>
+      <div className="border-4 border-orange w-full mt-8 h-auto rounded-md ">
+        <div className="w-[30%] mx-10 my-12">
+          <h2 className="mb-4 font-semibold text-4xl text-lightblue">
+            At Irwin, we handle all aspects of plastering
+          </h2>
+          <p className="mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit
+            amet, consectetur porta, lectus sed. Qsit amet, consectetur
+            adipiscing elit.
+          </p>
+          <ul className="text-xl">
+            <li className="text-darkblue font-semibold italic">• Plastering</li>
+            <li className="text-darkblue font-semibold italic">• K Rend</li>
+            <li className="text-darkblue font-semibold italic">
+              • Coloured Renders{" "}
+            </li>
+            <li className="text-darkblue font-semibold italic">
+              • Liquid Screed
+            </li>
+            <li className="text-darkblue font-semibold italic">• Renderins</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Button/page.tsx

@@ -3,11 +3,12 @@ import clsx from "clsx";
 
 type ButtonProp = {
   className?: string;
+  type?: "commercial" | "private" | "homeowner";
 };
 
-const Button = ({ className }: ButtonProp) => {
+const Button = ({ className, type }: ButtonProp) => {
   return (
-    <Link href="/contact">
+    <Link href={`/contact?type=${type}`}>
       <button
         className={clsx(
           "w-auto h-auto bg-lightblue text-white font-bold px-4 py-4 md:px-8 md:py-4 rounded-md hover:bg-darkblue drop-shadow-lg",

src/components/Footer/page.css

@@ -0,0 +1,10 @@
+.border-top-custom {
+  border-top: 2px solid white;
+}
+
+@media (max-width: 640px) {
+  .border-top-custom {
+    border-top: 1.5px solid white;
+    left: 55px;
+  }
+}

src/components/Footer/page.tsx

@@ -4,15 +4,17 @@ import Email from "/public/images/svg/🦆 icon _email_.svg";
 import Whatsapp from "/public/images/svg/🦆 icon _whatsapp_.svg";
 import Insta from "/public/images/svg/🦆 icon _instagram_.svg";
 import Link from "next/link";
+import "./page.css";
 
 export default function Footer({ className }: { className?: string }) {
   return (
     <footer className="w-full h-auto bg-darkblue text-white font-bold mt-8">
-      <section className="py-8 md:py-2">
-        <div className="flex md:ml-4 ml-2 mb-4 md:mb-0">
+      <section className="py-8 md:py-2 relative">
+        <div className="flex md:ml-4 ml-2 mb-4 md:mb-0 relative w-full">
           <Link href="/">
             <FooterLogo className="w-[188px] h-[80px] md:w-[288px] md:h-[180px] ml-1 mx-auto md:mt-0" />
           </Link>
+          <div className="border-top-custom absolute top-[60px] md:top-[120.5px] mx-auto w-[78%] md:w-[90%] md:left-24"></div>
         </div>
         <div className="gap-8 flex flex-col md:flex-row md:justify-evenly mx-12">
           <div className="mb-6 lg:mb-0">

src/components/NavBar/page.css

@@ -0,0 +1,10 @@
+.border-top-custom-head {
+  border-top: 2px solid darkblue;
+}
+
+@media (max-width: 640px) {
+  .border-top-custom-head {
+    border-top: 1.5px solid darkblue;
+    left: 55px;
+  }
+}

src/components/NavBar/page.tsx

@@ -3,6 +3,8 @@ import Logo2 from "/public/images/svg/logobullet.svg";
 import Button from "../Button/page";
 import Link from "next/link";
 import Phone from "/public/images/svg/phone.svg";
+import "./page.css";
+// import Hand from "../../../public/images/svg/handLogo.svg"; hand logo to be animated on page load
 
 export default function NavBar() {
   return (
@@ -15,6 +17,7 @@ export default function NavBar() {
         <Link href="/">
           <Logo2 className="w-full h-auto hidden md:block pt-2" />
         </Link>
+        <div className="border-top-custom-head absolute top-[60px] md:top-[102px] mx-auto w-[78%] md:w-[92.5%] md:left-24"></div>
       </div>
       <div className="md:hidden pr-2">
         <Button />
@@ -23,7 +26,7 @@ export default function NavBar() {
         <p className="text-white text-nowrap md:h-auto md:w-auto md:bg-lightblue md:py-1 md:px-2 md:rounded-md">
           <Link href={"/contact"}>Contact Us</Link>
         </p>
-        <Phone className="w-6 h-6" />
+        <Phone className="w-5 h-6" />
         <p className="text-orange">07746882369</p>
       </div>
     </nav>