From fa26583823de6b95c0e3fdee3db52c9196d928ee Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Tue, 9 Jul 2024 11:03:13 -0400
Subject: [PATCH] Home properties

---
 app/page.jsx                  |  3 ++-
 components/HomeProperties.jsx | 40 +++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 components/HomeProperties.jsx

diff --git a/app/page.jsx b/app/page.jsx
index 89c302e..99bc869 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,13 +1,14 @@
-import Link from 'next/link';
 import Hero from '../components/Hero';
 import InfoBoxes from '@/components/InfoBoxes';
 import Footer from '@/components/Footer';
+import HomeProperties from '@/components/HomeProperties';
 
 const HomePage = () => {
   return (
     <>
       <Hero />
       <InfoBoxes />
+      <HomeProperties />
       <Footer />
     </>
   );
diff --git a/components/HomeProperties.jsx b/components/HomeProperties.jsx
new file mode 100644
index 0000000..e9445e2
--- /dev/null
+++ b/components/HomeProperties.jsx
@@ -0,0 +1,40 @@
+import properties from '@/properties.json';
+import Link from 'next/link';
+import PropertyCard from './PropertyCard';
+
+const HomeProperties = () => {
+  const recentProperties = properties
+    .sort(() => Math.random() - Math.random())
+    .slice(0, 3);
+
+  return (
+    <>
+      <section class='px-4 py-6'>
+        <div class='container-xl lg:container m-auto'>
+          <h2 class='text-3xl font-bold text-blue-500 mb-6 text-center'>
+            Recent Properties
+          </h2>
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+            {recentProperties.length === 0 ? (
+              <p>No Properties Found</p>
+            ) : (
+              recentProperties.map((property) => (
+                <PropertyCard key={property._id} property={property} />
+              ))
+            )}
+          </div>
+        </div>
+      </section>
+      <section className='m-auto max-w-lg my-10 px-6'>
+        <Link
+          href='/properties'
+          className='block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700'
+        >
+          View All Properties
+        </Link>
+      </section>
+    </>
+  );
+};
+
+export default HomeProperties;