🎉 Improve UI

components/Banner.js

@@ -1,31 +1,37 @@
 import Image from "next/image";
-import bg from "../Images/bg.jpg";
-import Link from 'next/link'
-
+import bg from "../Images/banner.jpg";
+import Link from "next/link";
 
 function Banner() {
-
-    return (
-        <div className="relative h-[300px] sm:h-[400px] lg:h-[500px] xl:h-[600px] 2xl:h-[800px]">
-
-        <Image 
+  return (
+    <div className="relative h-[300px] sm:h-[400px] lg:h-[500px] xl:h-[600px] 2xl:h-[800px]">
+
+      <Image
         src={bg}
         alt="Picture of the author"
         layout="fill"
         objectFit="cover"
-        />
-    <div className="absolute top-1/2 w-full text-center">
-        <p className="text-lg text-white sm:text-2xl md:text-5xl">
-            Discover the world?
-        </p>
+        opacity="25"
+        className="opacity-60"
+      />
+
+      <div className="absolute top-1/4 w-full text-center space-y-5 md:space-y-20">
+        <div class="text-xl sm:text-3xl xl:text-4xl text-primary">
+          <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-green-700 md:text-9xl text-5xl font-extrabold uppercase">Paradise</span>
+          <br></br> Discover the world
+
+        </div>
+
         <Link href="/explore">
-        <button className="text-purple-500 bg-white px-10 py-3 shadow-md rounded-full font-bold my-5 hover:shadow-2xl active:scale-90 transition duration-150">
+          <button className="text-primary text-sm md:text-md lg:text-lg bg-white px-5 md:px-10 py-1 md:py-3 shadow-md rounded-full font-bold my-5 hover:shadow-2xl active:scale-90 transition duration-150">
             Lets Holiday
-        </button>
+          </button>
         </Link>
+        <div className="w-20 h-40 absolute bg-blue rounded-full bottom-20 left-20 transform rotate-45 hidden md:block"></div>
+      </div>
+
     </div>
-        </div>
-    )
+  );
 }
 
-export default Banner
+export default Banner;

components/Footer.js

@@ -1,8 +1,8 @@
 function Footer() {
     return (
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-y-10 bg-gray-300 text-gray-600 py-14 px-32">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-y-10 bg-primary bg-opacity-10 text-primary py-14 px-32">
 
-            <div className="space-y-4 text-xs text-gray-900">
+            <div className="space-y-4 text-xs text-black">
                 <h5 className="font-bold">ABOUT</h5>
                 <p>How Holidae works</p>
                 <p>Places</p>
@@ -11,7 +11,7 @@ function Footer() {
                 <p>Deluxe Bookings</p>
 
             </div>
-            <div className="space-y-4 text-xs text-gray-900">
+            <div className="space-y-4 text-xs text-black">
                 <h5 className="font-bold">OUR COMMUNITY</h5>
                 <p>Join Us</p>
                 <p>Contribute</p>
@@ -20,7 +20,7 @@ function Footer() {
 
 
             </div> 
-            <div className="space-y-4 text-xs text-gray-900">
+            <div className="space-y-4 text-xs text-black">
                 <h5 className="font-bold">HOST</h5>
                 <p>Sponsor</p>
                 <p>Details</p>
@@ -30,7 +30,7 @@ function Footer() {
 
             </div>
 
-            <div className="space-y-4 text-xs text-gray-900">
+            <div className="space-y-4 text-xs text-black">
                 <h5 className="font-bold">CONTACT US</h5>
                 <p>Email: holidae@businessenquires</p>
                 <p>Mail/Post: Post colony, Mumbai 19</p>

components/Header.js

@@ -38,42 +38,46 @@ function Header({ placeholder }) {
     return (
         <header className="sticky top-0 z-50 grid grid-cols-3 bg-white shadow-md py-5 px-5 md:px-10">
 
-            <div onClick={() => router.push("/")} className="relative flex items-center h-8 cursor-pointer my-auto">
-                <h1 className="text-gray-600 font-bold">Holidae</h1>
+            <div onClick={() => router.push("/")} className="relative flex items-center h-8 cursor-pointer my-auto text-primary space-x-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+</svg>
+                <h1 className="text-primary text-md sm:text-2xl font-semibold">Paradise</h1>
+
             </div>
             <div className="flex items-center md:border-2 rounded-full py-2 md:shadow-sm">
                 <input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="flex-grow pl-5 bg-transparent text-sm text-gray-600 outline-none" type="text" placeholder= {placeholder || "Start your search"} />
-                <SearchIcon className="hidden md:inline-flex h-8 bg-gray-600 text-white rounded-full p-2 cursor-pointer md:mx-2"/>
+                <SearchIcon className="hidden md:inline-flex h-8 bg-primary text-white rounded-full p-2 cursor-pointer md:mx-2"/>
             </div>
-            <div className="flex items-center justify-end space-x-4 text-gray-600">
-            <p className="cursor-pointer hidden md:inline">Become a host</p>
-            <GlobeAltIcon className="h-6 cursor-pointer"/>
-            <div className="flex items-center space-x-2 border-2 p-2 rounded-full">
-                <MenuIcon className="h-6 cursor-pointer" />
-                <UserCircleIcon className="h-6 cursor-pointer"/>
+            <div className="flex items-center justify-end space-x-4 text-blue-400">
+            <p className="text-primary cursor-pointer hidden md:inline font-medium">Become a host</p>
+            <GlobeAltIcon className="hidden h-6 cursor-pointer text-primary"/>
+            <div className="flex items-center space-x-2 border-2 p-2 rounded-full text-primary border-primary">
+                <MenuIcon className="h-5 cursor-pointer" />
+                <UserCircleIcon className="h-5 cursor-pointer"/>
             </div>
             </div>
             {searchInput && (
                 <div className="flex flex-col col-span-3 mx-auto mt-3 py-7">
                     <DateRangePicker 
                         ranges={[selectionRange]}
                         minDate={new Date()}
-                        rangeColors={[]}
+                        rangeColors={["#152D35"]}
                         onChange={handleSelect}
                     />
                     <div className="flex items-center border-b mb-4">
-                        <h2 className="text-2xl flex-grow font-semibold">Number of Guests</h2>
-                        <UsersIcon className="h-5" />
+                        <h2 className="text-2xl flex-grow font-semibold text-primary">Number of Guests</h2>
+                        <UsersIcon className="h-5 text-primary" />
                         <input value={noOfGuests} onChange={(e) => setNoOfGuests(e.target.value)} 
-                        className="w-12 pl-2 text-lg outline-node text-green-800" 
+                        className="w-12 pl-2 text-lg outline-node text-primary" 
                         type="number"
                         min={1}
                         />
                     </div>
                     <div className="flex">
-                        <button onClick={resetInput} className="flex-grow text-gray-600">Cancel
+                        <button onClick={resetInput} className="flex-grow text-primary">Cancel
                             </button>
-                            <button onClick={search} className="flex-grow text-gray-900">Search
+                            <button onClick={search} className="flex-grow text-primary">Search
 
                             </button>
                     </div>

components/LargeCard.js

@@ -10,10 +10,10 @@ function LargeCard({ img, title, description, buttonText }) {
             <Image src={img} layout="fill" objectFit="cover" className="rounded-2xl" />
         </div>
         <div className="absolute top-32 left-12">
-        <h3 className="text-4xl mb-3 w-64">
+        <h3 className="text-4xl mb-3 w-64 text-primary">
             {title}
         </h3>
-        <p>{description}</p>
+        <p className="text-gray-800">{description}</p>
         <button className="text-sm text-white bg-gray-900 py-2 px-4 rounded-2xl mt-5">
             {buttonText}
         </button>

components/MediumCard.js

@@ -8,7 +8,7 @@ function MediumCard({ img, title }) {
             <div className="relative h-80 w-80">
                 <Image src={img} layout="fill" className="rounded-xl" />
             </div>
-            <h3 className="text-2xl mt-3 mb-5">{title}</h3>
+            <h3 className="text-2xl mt-3 mb-5 text-primary">{title}</h3>
 
         </div>
         </Link>

components/SmallCard.js

@@ -9,7 +9,7 @@ function SmallCard({img, location, distance}) {
             <Image src={img} layout="fill" className="rounded-lg" />
         </div>
         <div>
-            <h2>{location}</h2>
+            <h2 className="text-primary font-semibold">{location}</h2>
             <h3>{distance}</h3>
         </div>
         </div>

global.css

@@ -2,6 +2,6 @@
 
 @layer components {
     .button {
-        @apply px-4 py-2 border rounded-full hover:cursor-pointer hover:shadow-lg active:scale-95 active:bg-gray-100 transition transform duration-150 ease-out;
+        @apply px-4 py-2 border rounded-full hover:cursor-pointer hover:shadow-lg active:scale-95 transition transform duration-150 ease-out;
     }
 }

pages/_app.js

@@ -5,7 +5,7 @@ import ProgressBar from "@badrap/bar-of-progress";
 
 const progress = new ProgressBar({
   size: 4,
-  color: "#FE595E",
+  color: "#152D35",
   className:'z-50',
   delay: 100,
 });

pages/index.js

@@ -12,15 +12,15 @@ export default function Home({ exploreData, cardsData }) {
   return (
     <div className="">
       <Head>
-        <title>Holidae</title>
+        <title>Paradise</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
      <Header />
      <Banner />
      <main className="max-w-7xl mx-auto px-8 sm:px-16">
        <section  className="pt-6">
-         <h2 className="text-4xl font-semibold pb-5">
+         <h2 className="text-2xl font-semibold pb-5 text-primary">
            Explore Nearby
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> 
@@ -32,7 +32,7 @@ export default function Home({ exploreData, cardsData }) {
          </div>
        </section>
        <section>
-         <h2 className="text-4xl font-semibold py-8">Live Anywhere</h2>
+         <h2 className="text-2xl font-semibold py-8 text-primary">Live Anywhere</h2>
          <div className="flex space-x-7 overflow-scroll scrollbar-hide p-3 -ml-3"> 
          {cardsData?.map((item) => (
            <MediumCard key={item.img} img={item.img} title={item.title} />

pages/search.js

@@ -18,9 +18,9 @@ export default function Search({ searchResults }) {
             <Header placeholder={`${location} | ${range} | ${noOfGuests} guests`}/>
             <main className="flex">
                 <section className="flex-grow pt-8 px-6">
-                    <p className="text-xs p-2">5000+ Stay - {range} - for {noOfGuests} guests</p>
-                <h1 className="text-3xl font-semibold mt-2 mb-6 p-2">Stays in {location}</h1>
-                <div className="hidden lg:inline-flex mb-5 ml-5 space-x-3 text-gray-800 whitespace-nowrap">
+                    <p className="text-xs p-2 text-primary">5000+ Stay - {range} - for {noOfGuests} guests</p>
+                <h1 className="text-3xl text-primary font-semibold mt-2 mb-6 p-2">Stays in {location}</h1>
+                <div className="hidden lg:inline-flex mb-5 ml-5 space-x-3 text-primary whitespace-nowrap">
                     <p className="button">Cancellation Flexibility</p>
                     <p className="button">Type of place</p>
                     <p className="button">Price</p>

tailwind.config.js

@@ -3,7 +3,19 @@ module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+
+    extend: {
+      colors: {
+        primary: '#152D35',
+
+    },
+    fontFamily: {
+      Lora : ['Lora', 'serif']
+     },
+
+
+    },
+
   },
   variants: {
     extend: {},