finalizing and finishing

Author: IamNaeto

public/img/apple.png

@@ -6,7 +6,7 @@ const Book = () => {
         <main className="px-[5%] py-20 grid grid-cols-1 md:grid-cols-2 items-center gap-6">
             <section className="grid grid-cols-1 gap-4">
                 <p className="text-[16px] text-litegrey font-bold text-center md:text-left special-font">Easy and Fast</p>
-                <h1 className="text-litedark text-5xl text-center md:text-left font-extrabold w-full md:max-w-[500px]">Book Your Next Trip in 3 Easy Steps</h1>
+                <h1 className="text-litedark text-3xl md:text-5xl text-center md:text-left font-extrabold w-full md:max-w-[500px]">Book Your Next Trip in 3 Easy Steps</h1>
 
                 <div className="flex items-center gap-2 special-font">
                     <div>

public/img/footer-logo.png

@@ -34,7 +34,7 @@ const Category = () => {
         <main className="relative w-full py-[100px] px-[5%] grid grid-cols-1 gap-4">
             <section className="flex flex-col items-center text-center gap-4">
                 <p className="text-[18px] text-litegrey font-bold special-font">CATEGORY</p>
-                <h1 className="text-5xl font-bold">We Offer Best Services</h1>
+                <h1 className="text-3xl md:text-5xl font-bold">We Offer Best Services</h1>
             </section>
 
             <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 place-items-center items-stretch gap-6 lg:gap-10 special-font">

public/img/google-play.png

@@ -37,7 +37,7 @@ const Destination = () => {
         <main className="relative w-full py-[50px] px-[5%] grid grid-cols-1 gap-6">
             <section className="flex flex-col items-center text-center gap-4">
                 <p className="text-[18px] text-litegrey font-bold special-font">Top Selling</p>
-                <h1 className="text-5xl font-bold">Top Destinations</h1>
+                <h1 className="text-3xl md:text-5xl font-bold">Top Destinations</h1>
             </section>
 
             <section className="grid grid-cols-1 sm:grid-cols-3 items-center gap-4 lg:gap-8 xl:gap-16 special-font">
@@ -57,7 +57,7 @@ const Destination = () => {
                         </div>
                     </div>
 
-                    {destinations.sideImg && <Image src={destinations.sideImg} width={80} height={80} alt="img" className="absolute right-[-20px] sm:right-[-30px] lg:right-[-50px] bottom-[90px]"/>}
+                    {destinations.sideImg && <Image src={destinations.sideImg} width={80} height={80} alt="img" className="absolute right-[-15px] sm:right-[-30px] lg:right-[-50px] bottom-[90px]"/>}
                 </div>
                 )}
             </section>

public/img/grid-bottom.png

@@ -0,0 +1,78 @@
+import Image from "next/image";
+import { FaFacebookF, FaTwitter } from "react-icons/fa6";
+import { CiInstagram } from "react-icons/ci";
+
+const Footer = () => {
+    return (
+        <main className="px-[5%] py-[70px] bg-white special-font">
+            <section className="">
+                <div className="flex items-center justify-between flex-wrap gap-2">
+                    <div className="flex flex-col gap-2 mb-5 md:mb-0 w-full md:w-auto">
+                        <Image src="/img/footer-logo.png" width={100} height={100} alt="logo" />
+                        <p className="text-[12px] text-litegrey font-semibold w-full md:max-w-[200px]">Book your trip in minute, get full Control for much longer. </p>
+                    </div>
+
+                    <div className="grid gap-4">
+                        <h1 className="text[18px] text-litedark font-extrabold">Company</h1>
+
+                        <div className="text-[15px] text-litegrey font-semibold flex flex-col gap-2">
+                            <a href="">About</a>
+                            <a href="">Careers</a>
+                            <a href="">Mobile</a>
+                        </div>
+                    </div>
+
+                    <div className="grid gap-4">
+                        <h1 className="text[18px] text-litedark font-extrabold">Contact</h1>
+
+                        <div className="text-[15px] text-litegrey font-semibold flex flex-col gap-2">
+                            <a href="">Help/FAQ</a>
+                            <a href="">Press</a>
+                            <a href="">Affilates</a>
+                        </div>
+                    </div>
+
+                    <div className="grid gap-4">
+                        <h1 className="text[18px] text-litedark font-extrabold">More</h1>
+
+                        <div className="text-[15px] text-litegrey font-semibold flex flex-col gap-2">
+                            <a href="">Airlinefees</a>
+                            <a href="">Airline</a>
+                            <a href="">Low fare tips</a>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-4 items-center md:items-start justify-center md:justify-start w-full md:w-auto mt-5 md:mt-0">
+                        <div className="flex items-center gap-4">
+                            <FaFacebookF className="text-4xl p-2 text-litedark bg-white rounded-full shadow-md" />
+                            <CiInstagram className="text-4xl p-2 text-litedark bg-white rounded-full shadow-md" />
+                            <FaTwitter className="text-4xl p-2 text-litedark bg-white rounded-full shadow-md" />
+                        </div>
+
+                        <p className="text-[20px] text-litegrey font-bold">Discover our app</p>
+
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center justify-center gap-1 bg-black py-2 px-5 rounded-full">
+                                <Image src="/img/google-play.png" width={20} height={20} alt="img" />
+                                <div>
+                                    <h3 className="text-[13px] font-extrabold text-white">GET IT ON</h3>
+                                    <p className="text-[11px] font-semi-bold text-white">GOOGLE PLAY</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center justify-center gap-1 bg-black py-2 px-5 rounded-full">
+                                <Image src="/img/apple.png" width={20} height={20} alt="img" />
+                                <div>
+                                    <h3 className="text-[11px] font-semibold text-white">Avalible on the</h3>
+                                    <p className="text-[13px] font-extrabold text-white">Apple Store</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+}
+
+export default Footer;

public/img/ring-bottom.png

@@ -44,7 +44,7 @@ const Header = () => {
     return ( 
         <nav className={`py-5 px-[5%] top-0 w-full fixed flex items-center justify-between z-20 ${headerBackground} special-font`}>
             <Link href="/" className="w-[80px]">
-                <Image src="/img/hero-logo.png" width={80} height={80} alt="logo" className="w-full"/>
+                <Image src="/img/hero-logo.png" width={80} height={80} alt="logo" className="w-full" loading="eager"/>
             </Link>
 
             <section className={`${isMenuOpen ? 'flex' : 'hidden'} absolute top-[68px] md:top-0 left-0 md:relative md:flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between gap-4 lg:gap-8 text-[16px] text-litedark font-bold bg-orange md:bg-transparent pl-[5%] md:pl-auto py-10 md:py-0 w-full md:w-auto`}>

public/img/ring-top.png

@@ -3,10 +3,10 @@ import { IoIosPlay } from "react-icons/io";
 
 const Hero = () => {
     return ( 
-        <main className="relative w-full flex flex-col md:flex-row items-center justify-between py-[100px] px-[5%] bg bg-right-top bg-no-repeat bg-contain h-screen">
+        <main className="relative w-full flex flex-col md:flex-row items-center justify-between py-[80px] md:py-[100px] px-[5%] bg bg-right-top bg-no-repeat bg-contain h-screen">
             <section className="w-full md:w-[50%] flex flex-col items-center md:items-start justify-center md:justify-start gap-3">
                 <p className="text-[14px] text-green font-bold special-font">BEST DESTINATIONS AROUND THE WORLD</p>
-                <h1 className="text-5xl xl:text-6xl text-blue font-extrabold w-full lg:w-[80%] text-center md:text-left">Travel, Enjoy and live a new and full life</h1>
+                <h1 className="text-4xl md:text-5xl xl:text-6xl text-blue font-extrabold w-full lg:w-[80%] text-center md:text-left">Travel, Enjoy and live a new and full life</h1>
                 <p className="text-[14px] text-litegrey font-bold w-full lg:w-[80%] xl:w-[65%] text-center md:text-left special-font">Built Wicket longer admire do barton vanity itself do in it. Preferred to sportsmen it engrossed listening. Park gate sell they west hard for the</p>
 
                 <div className="flex items-center gap-4 special-font">
@@ -15,8 +15,8 @@ const Hero = () => {
                 </div>
             </section>
 
-            <section className="relative">
-                <Image src="/img/hero-image.png" width={500} height={500} alt="heroimg" className="dangling-picture"/>
+            <section className="relative mt-10 md:mt-0">
+                <Image src="/img/hero-image.png" width={500} height={500} alt="heroimg" className="dangling-picture" loading="eager" />
             </section>
         </main>
      );

public/img/sub.png

@@ -25,7 +25,7 @@ const Sponsors = () => {
     return ( 
         <main className="px-[5%] py-[50px] flex items-center justify-center md:justify-between basis-56 flex-wrap gap-6">
             {sponsorsLogo.map((sponsors, index) =>
-            <div className="p-2 md:p-4 rounded-xl bg-white hover:shadow-md flex items-center justify-center h-[100px]" key={index}>
+            <div className="p-2 md:p-4 rounded-xl bg-white hover:shadow-md shadow-md md:shadow-none flex items-center justify-center h-[100px]" key={index}>
                 <Image src={sponsors.img} width={100} height={100} alt="img" className="object-contain h-full"/>
             </div>
             )}

src/app/components/Book.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import { IoMailOutline } from "react-icons/io5";
+
+const Subscribe = () => {
+    return (
+        <main className="relative py-[100px] px-[5%] special-font">
+            <section className="relative p-8 rounded-lg rounded-tl-3xl flex flex-col gap-10 items-center justify-center bg-gray-100 h-[300px] z-10">
+                <p className="text-xl md:text-3xl font-bold text-litegrey w-[80%] text-center relative z-10">Subscribe to get information, latest news and other interesting offers about Jadoo</p>
+
+                <div className="flex items-center justify-center gap-2 w-full relative z-10">
+                    <label htmlFor="" className="relative w-full md:w-[50%]">
+                        <input type="text" placeholder="Your email" className="relative border-none outline-none bg-white rounded-lg py-3 pl-12 pr-4 w-full text-[15px] font-normal" />
+                        <IoMailOutline className="absolute text-litedark text-3xl top-2 left-2" />
+                    </label>
+                    <button className="bg-[#FF7D68] text-[15px] py-3 px-5 text-white font-medium rounded-lg">Subscribe</button>
+                </div>
+
+                <Image src="/img/ring-bottom.png" width={300} height={300} alt="img" className="absolute bottom-0 left-[-60px]" />
+                <Image src="/img/ring-top.png" width={180} height={180} alt="img" className="absolute top-0 right-0" />
+                <Image src="/img/sub.png" width={40} height={40} alt="img" className="absolute top-[-15px] right-[-15px]" />
+            </section>
+
+            <Image src="/img/grid-bottom.png" width={80} height={80} alt="img" className="absolute bottom-[60px] right-0 md:right-[20px]" />
+
+        </main>
+    );
+}
+
+export default Subscribe;

src/app/components/Category.tsx

@@ -7,7 +7,7 @@ const Testimonials = () => {
         <main className="px-[5%] py-[100px] grid grid-cols-1 md:grid-cols-2 gap-6">
             <section className="grid gap-4">
                 <p className="text-[18px] text-litegrey font-semibold special-font text-center md:text-left">Testimonials</p>
-                <h1 className="text-5xl font-extrabold w-full md:max-w-[70%] text-center md:text-left">What People Say About Us.</h1>
+                <h1 className="text-3xl md:text-5xl font-extrabold w-full md:max-w-[70%] text-center md:text-left">What People Say About Us.</h1>
 
                 <div className="flex items-center gap-2 justify-center md:justify-start">
                     <GoDotFill className="text-2xl text-litedark"/>

src/app/components/Destination.tsx

@@ -4,8 +4,8 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
 
-
-/* *{
+/* 
+*{
   border: 2px solid red;
 } */
 
@@ -42,7 +42,5 @@
 
   .bg{
     background-image: url(/img/Decore.png);
-    background-attachment: scroll;
-  }
-
-  
+    background-attachment: fixed;
+  }

src/app/components/Footer.tsx

@@ -6,6 +6,8 @@ import Destination from "./components/Destination"
 import Book from "./components/Book"
 import Testimonials from "./components/Testimonials"
 import Sponsors from "./components/Sponsors"
+import Subscribe from "./components/Subscribe"
+import Footer from "./components/Footer"
 
 export default function Home() {
   return (
@@ -17,6 +19,8 @@ export default function Home() {
       <Book />
       <Testimonials />
       <Sponsors />
+      <Subscribe />
+      <Footer />
     </main>
   )
 }

src/app/components/Header.tsx

@@ -15,6 +15,7 @@ const config: Config = {
         blue: '#181e4b',
         litepurple: '#5e6282',
         litegrey: '#686d77',
+        grey: '#DFD7F9',
         litedark: '#212832',
         offwhite: '#F5F5F5',
        }