Featured properties

app/layout.jsx

@@ -1,4 +1,5 @@
 import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
 import AuthProvider from '@/components/AuthProvider';
 import { GlobalProvider } from '@/context/GlobalContext';
 import { ToastContainer } from 'react-toastify';
@@ -20,6 +21,7 @@ const MainLayout = ({ children }) => {
           <body>
             <Navbar />
             <main>{children}</main>
+            <Footer />
             <ToastContainer />
           </body>
         </html>

app/page.jsx

@@ -1,15 +1,15 @@
 import Hero from '../components/Hero';
 import InfoBoxes from '@/components/InfoBoxes';
-import Footer from '@/components/Footer';
 import HomeProperties from '@/components/HomeProperties';
+import FeaturedProperties from '@/components/FeaturedProperties';
 
 const HomePage = () => {
   return (
     <>
       <Hero />
       <InfoBoxes />
+      <FeaturedProperties />
       <HomeProperties />
-      <Footer />
     </>
   );
 };

components/FeaturedProperties.jsx

@@ -0,0 +1,27 @@
+import FeaturedPropertyCard from '@/components/FeaturedPropertyCard';
+import connectDB from '@/config/database';
+import Property from '@/models/Property';
+
+const FeaturedProperties = async () => {
+  await connectDB();
+
+  const properties = await Property.find({
+    is_featured: true,
+  }).lean();
+
+  return properties.length > 0 ? (
+    <section className='bg-blue-50 px-4 pt-6 pb-10'>
+      <div className='container-xl lg:container m-auto'>
+        <h2 className='text-3xl font-bold text-blue-500 mb-6 text-center'>
+          Featured Properties
+        </h2>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+          {properties.map((property) => (
+            <FeaturedPropertyCard key={property._id} property={property} />
+          ))}
+        </div>
+      </div>
+    </section>
+  ) : null;
+};
+export default FeaturedProperties;

components/FeaturedPropertyCard.jsx

@@ -0,0 +1,97 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import {
+  FaBed,
+  FaBath,
+  FaRulerCombined,
+  FaMoneyBill,
+  FaMapMarker,
+} from 'react-icons/fa';
+
+const FeaturedPropertyCard = ({ property }) => {
+  const getRateDisplay = () => {
+    const { rates } = property;
+
+    if (rates.monthly) {
+      return `${rates.monthly.toLocaleString()}/mo`;
+    } else if (rates.weekly) {
+      return `${rates.weekly.toLocaleString()}/wk`;
+    } else if (rates.nightly) {
+      return `${rates.nightly.toLocaleString()}/night`;
+    }
+  };
+
+  return (
+    <div className='bg-white rounded-xl shadow-md relative flex flex-col md:flex-row'>
+      <Image
+        src={property.images[0]}
+        alt=''
+        width={0}
+        height={0}
+        sizes='100vw'
+        className='object-cover rounded-t-xl md:rounded-tr-none md:rounded-l-xl w-full md:w-2/5'
+      />
+      <div className='p-6'>
+        <h3 className='text-xl font-bold'>{property.name}</h3>
+        <div className='text-gray-600 mb-4'>{property.type}</div>
+        <h3 className='absolute top-[10px] left-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right'>
+          ${getRateDisplay()}
+        </h3>
+        <div className='flex justify-center gap-4 text-gray-500 mb-4'>
+          <p>
+            <FaBed className='inline-block mr-2' /> {property.beds}{' '}
+            <span className='md:hidden lg:inline'>Beds</span>
+          </p>
+          <p>
+            <FaBath className='inline-block mr-2' /> {property.baths}{' '}
+            <span className='md:hidden lg:inline'>Baths</span>
+          </p>
+          <p>
+            <FaRulerCombined className='inline-block mr-2' />
+            {property.square_feet}{' '}
+            <span className='md:hidden lg:inline'>sqft</span>
+          </p>
+        </div>
+
+        <div className='flex justify-center gap-4 text-green-900 text-sm mb-4'>
+          {property.rates.nightly && (
+            <p>
+              <FaMoneyBill className='inline mr-2' /> Nightly
+            </p>
+          )}
+
+          {property.rates.weekly && (
+            <p>
+              <FaMoneyBill className='inline mr-2' /> Weekly
+            </p>
+          )}
+
+          {property.rates.monthly && (
+            <p>
+              <FaMoneyBill className='inline mr-2' /> Monthly
+            </p>
+          )}
+        </div>
+
+        <div className='border border-gray-200 mb-5'></div>
+
+        <div className='flex flex-col lg:flex-row justify-between'>
+          <div className='flex align-middle gap-2 mb-4 lg:mb-0'>
+            <FaMapMarker className='text-lg text-orange-700' />
+            <span className='text-orange-700'>
+              {' '}
+              {property.location.city} {property.location.state}
+            </span>
+          </div>
+          <Link
+            href={`/properties/${property._id}`}
+            className='h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm'
+          >
+            Details
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FeaturedPropertyCard;