section id added

olatunde1998 · Jan 19, 2025 · ec7a747 · ec7a747
1 parent f1f4949
commit ec7a747
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/app/components/landing-page-components/ContactUs.tsx b/app/components/landing-page-components/ContactUs.tsx
@@ -1,6 +1,6 @@
-"use client";
 import Image from "next/image";
 import Contact from "@/public/images/contact.png";
+import Link from "next/link";
 
 export default function ContactUs() {
   return (
@@ -25,13 +25,20 @@ export default function ContactUs() {
           <div className="text-base  font-bold lg:text-2xl xl:text-3xl text-[#014751] md:mt-3 md:w-[300px]">
             We&apos;ll Connect You With in 48hours.
           </div>
-          <div className="lg:flex  gap-3  h-fit mt-6 xl:ml-28">
-            <p className="p-3 lg:p-4 bg-[#014751] text-[#FFFFFF] rounded-xl w-[150px] md:w-[180px] text-center flex items-center justify-center cursor-pointer text-sm">
+          <div className="lg:flex gap-3 h-fit mt-6 xl:ml-28">
+            <a
+              href="https://api.whatsapp.com/send/?phone=2348133642798&text=Welcome+to+Geomatic+Connect%2C+please+ask+me+any+question+regarding+our+products+and+services&type=phone_number&app_absent=0"
+              target="_blank"
+              className="bg-[#014751] text-[#FFFFFF] rounded-xl w-[150px] md:w-[180px] text-center flex items-center justify-center cursor-pointer text-sm"
+            >
               Contact Us
-            </p>
-            <p className="p-3 lg:p-4 mt-2 md:mt-3 lg:mt-0 bg-[#FFFFFF] text-xs border-[1.3px] border-[#014751] text-[#014751] rounded-xl w-[150px] md:w-[180px] text-center flex items-center justify-center font-semibold cursor-pointer">
+            </a>
+            <Link
+              href="/signup"
+              className="p-3 lg:p-4 mt-2 md:mt-3 lg:mt-0 bg-[#FFFFFF] text-xs border-[1.3px] border-[#014751] text-[#014751] rounded-xl w-[150px] md:w-[180px] text-center flex items-center justify-center font-semibold cursor-pointer"
+            >
               Register Now
-            </p>
+            </Link>
           </div>
         </section>
       </main>

diff --git a/app/components/landing-page-components/Footer.tsx b/app/components/landing-page-components/Footer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { RiFacebookCircleFill } from "react-icons/ri";
 import { BsGithub } from "react-icons/bs";
 import { FaTwitter } from "react-icons/fa";
@@ -9,6 +10,13 @@ import GeomaticLogo from "@/public/images/geomatic-logo-white.png";
 export const Footer = () => {
   const today: Date = new Date();
   const currentYear: number = today.getFullYear();
+
+  const handleSmoothScroll = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
   return (
     <div className="px-6 text-white py-10">
       <section className="mb-2 md:flex justify-between pb-10 md:mb-20">
@@ -26,21 +34,25 @@ export const Footer = () => {
           <div>
             <p className="font-bold mb-8"> Quick Links</p>
             <ul className="cursor-pointer space-y-4 font-light text-base lg:text-lg">
-              <li>About </li>
-              <li>Contact Us </li>
-              <li>Blogs </li>
-              <li>Testimonial</li>
+              <li onClick={() => handleSmoothScroll(`about-id`)}>About </li>
+              <li onClick={() => handleSmoothScroll(`contactUs-id`)}>
+                Contact Us{" "}
+              </li>
+              <li onClick={() => handleSmoothScroll(`testimonial-id`)}>
+                Testimonial
+              </li>
               <li>Community </li>
             </ul>
           </div>
           <div className="my-10 md:my-0">
             <p className="font-bold mb-8"> Services</p>
             <ul className="cursor-pointer space-y-4 font-light text-base lg:text-lg">
-              <li>Faq </li>
-              <li>Our Services</li>
-              <li>Pricing </li>
+              <li onClick={() => handleSmoothScroll(`faq-id`)}>Faq </li>
+              <li onClick={() => handleSmoothScroll(`whoWeAre-id`)}>
+                Our Services
+              </li>
+              <li onClick={() => handleSmoothScroll(`pricing-id`)}>Pricing </li>
               <li>Career Paths</li>
-              <li>Free Resources</li>
             </ul>
           </div>
         </div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -23,7 +23,7 @@ export default function Home() {
           </div>
         </div>
         {/* === WHO WE ARE SECTION === */}
-        <div className="w-full text-sm  max-w-[1200px] mx-auto px-6 pb-16 md:px-10 md:pt-16 lg:py-20">
+        <div id="whoWeAre-id"  className="w-full text-sm  max-w-[1200px] mx-auto px-6 pb-16 md:px-10 md:pt-16 lg:py-20">
           <WhoWeAre />
         </div>
 
@@ -35,14 +35,17 @@ export default function Home() {
         </div>
 
         {/* === Testimonial === */}
-        <div className="w-full  flex-col items-center text-sm lg:flex">
+        <div
+          id="testimonial-id"
+          className="w-full  flex-col items-center text-sm lg:flex"
+        >
           <div className="w-full max-w-[1200px] text-sm ">
             <Testimonial />
           </div>
         </div>
 
         {/* === PRICING SECTION === */}
-        <div className="bg-[#F2F6F6] w-full text-sm">
+        <div id="pricing-id" className="bg-[#F2F6F6] w-full text-sm">
           <div className="max-w-[1200px] mx-auto text-sm md:px-6">
             <Pricing />
           </div>