make footer

MuhammadHassanRaza25 · Dec 1, 2024 · cdfc2d2 · cdfc2d2
1 parent e0b98ff
commit cdfc2d2
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 20 deletions.
diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx
@@ -1,8 +1,53 @@
+import { FaFacebook } from "react-icons/fa";
+import { FaInstagram } from "react-icons/fa";
+import { FaTwitter } from "react-icons/fa";
+import { IoMdCall } from "react-icons/io";
+import { MdEmail } from "react-icons/md";
+import { FaGlobe } from "react-icons/fa";
+import { FaRegCopyright } from "react-icons/fa";
 
 export default function Footer(){
     return(
-        <div>
-            <h1>This is Footer</h1>
+        <div className="bg-gray-50 border-t px-24 mt-20 pt-5 pb-5">
+
+            <div className="flex flex-wrap justify-between items-baseline">
+
+                <div className="flex flex-col mt-5 w-[20vw]">
+                   <h1 className="font-bold text-2xl">QuickHealth</h1>
+                   <p className="mt-5">QuickHealth your fast, easy, and reliable solution for seamless doctor appointments and better healthcare access.</p>
+                    <p className="flex gap-4 mt-3">
+                      <FaFacebook className="text-4xl p-1.5 bg-black text-white hover:text-blue-300 rounded-full"/>
+                      <FaInstagram className="text-4xl p-1.5 bg-black text-white hover:text-blue-300 rounded-full"/>
+                      <FaTwitter className="text-4xl p-1.5 bg-black text-white hover:text-blue-300 rounded-full"/>
+                    </p>
+               </div>
+
+               <div className="flex flex-col mt-5 w-[25vw]">
+                   <h1 className="font-bold text-2xl">About Us</h1>
+                   <p className="mt-5">QuickHealth is an efficient doctor appointment system designed to streamline the process of booking, managing, and tracking appointments. It aims to enhance patient convenience and improve healthcare accessibility through its user-friendly platform.</p>
+               </div>
+
+               <div className="flex flex-col mt-5 w-[15vw]">
+                   <h1 className="font-bold text-2xl">Our Services</h1>
+                   <p className='mt-5'>24/7 Emergency Care</p>
+                   <p className='mt-2'>Instant Online Consultations</p>
+                   <p className='mt-2'>Dental Care & Hygiene</p>
+                   <p className='mt-2'>Expert Doctors</p>
+                   <p className='mt-2'>Easy Doctor Appointments</p>
+               </div>
+
+               <div className="flex flex-col mt-5">
+                   <h1 className="font-bold text-2xl">Contact Us</h1>
+                   <p className='flex items-center gap-2 mt-5'><IoMdCall /> +1 321 123-4567</p>
+                   <p className='flex items-center gap-2 mt-2'><MdEmail />  contact@quickhealth.com</p>
+                   <p className='flex items-center gap-2 mt-2'><FaGlobe /> +1 321 123-4567</p>
+               </div>
+           </div>
+
+           <div className='mt-10 border-t-2'>
+              <h1 className='mt-5 flex justify-center items-center gap-1'>CopyRight <FaRegCopyright /> 2025 All rights reserved | This project is made by Muhammad Hassan Raza</h1>
+           </div>
+
         </div>
     )
 }
diff --git a/src/app/components/Header.jsx b/src/app/components/Header.jsx
@@ -96,7 +96,7 @@ export default function Header() {
                     <h1 className="link font-semibold text-gray-500 hover:text-gray-700 p-3 relative group">
                         Contact Us
                     </h1>
-                    <button className="bg-blue-500 text-white hover:bg-green-500 hover:text-white w-40 py-3 rounded-md font-bold mt-3 mb-3">
+                    <button className="bg-blue-500 text-white hover:bg-green-500 hover:text-white w-32 py-3 rounded-md font-bold mt-3 mb-3">
                         Login
                     </button>
                 </div>

diff --git a/src/app/components/HeroSection.jsx b/src/app/components/HeroSection.jsx
@@ -4,7 +4,7 @@ import DoctorImage from "../images/doctor.jpg"
 export default function HeroSection(){
     return(
        <>
-           <div className="heroSection mt-28 flex  px-24 justify-between items-center bg-white">
+           <div className="heroSection mt-28 flex px-24 justify-between items-center bg-white">
 
               <div className="heroDetail flex flex-col gap-9">
                  <h1 className="heroHeading font-bold">Welcome to QuickHealth</h1>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -6,21 +6,6 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.serviceBox{
-  transition: all 0.1s ease-in;
-  cursor: pointer;
-}
-.serviceBox:hover{
-  transform: scale(1.06);
-}
-
-/* .heroSection{
-  background-image: url(images/bgstyle3.png);
-  background-size: cover;
-  background-position-y: 15%;
-  background-attachment: fixed;
-} */
-
 .transitionBtn{
   transition: all 0.2s;
 }
@@ -33,6 +18,7 @@ body {
   position: sticky;
   top: 0%;
   background-color: rgb(255, 255, 255);
+  z-index: 99999;
 }
 .link{
   cursor: pointer;
@@ -53,13 +39,31 @@ body {
   width: 100%; /* Final width 100% ho jayega */
 }
 /* Header End */
-
+/* Hero Section Start */
+.heroImgDiv{
+  padding-top: 1%;
+}
 .heroHeading{
   font-size: 40px;
 }
 .heroDesc{
   font-size: 16px;
 }
+/* Hero Section Start */
+/* our services start */
+.serviceBox{
+  transition: all 0.1s ease-in;
+  cursor: pointer;
+  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 6px 0px; */
+}
+.serviceBox:hover{
+  transform: scale(1.06);
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 6px 0px;
+}
+/* our services end */
+/* Footer Start */
+
+/* Footer End */
 
 /* Responsiveness Start */
 

diff --git a/src/app/page.js b/src/app/page.js
@@ -1,3 +1,4 @@
+import Footer from "./components/Footer";
 import Header from "./components/Header";
 import HeroSection from "./components/HeroSection";
 import OurServices from "./components/OurServices";
@@ -8,6 +9,7 @@ export default function Home() {
        <Header/>
        <HeroSection/>
        <OurServices/>
+       <Footer/>
     </>
   )
 }