Home Property Listings

Home Property Listings

1. Create a Dedicated Component for Home Page Listings

a. Set Up the Component File

• Location: In your components/ folder, create a new file named HomeProperties.jsx.

• Purpose: This component will handle displaying a subset of property cards on the home page.

b. Import Required Modules and Data

• Import React, the property JSON data, and the PropertyCard component (which you created earlier):

  "use client";
  import PropertyCard from '@/components/PropertyCard';
  import properties from '@/properties.json'; // Adjust path if needed
  import Link from 'next/link';

c. Randomize and Select Recent Listings

• Inside the component, use JavaScript to randomize the properties array and select only three listings:

  //components/HomeProperties.jsx
  import properties from '@/properties.json'
  import PropertyCard from './PropertyCard'
  import Link from 'next/link'
  
  const HomeProperties = () => {
    // Randomize the array using sort with Math.random, then select the first three properties
    const recentProperties = properties
      .sort(() => Math.random() - Math.random())
      .slice(0, 3)
  
    return (
      // <!-- Recent Properties -->
      <section className="px-4 py-6">
        <div className="container-xl lg:container m-auto">
          <h2 className="text-3xl font-bold text-blue-500 mb-6 text-center">
            Recent Properties
          </h2>
          <div className="">
            {recentProperties.length === 0 ? (
              <p className="text-center">No properties found.</p>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {recentProperties.map((property) => (
                  <PropertyCard key={property._id} property={property} />
                ))}
              </div>
            )}
          </div>
        </div>
  
        {/* Button to view all properties */}
        <div className="mt-10 flex justify-center">
          <Link
            href="/properties"
            className="bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700">
            View All Properties
          </Link>
        </div>
      </section>
    )
  }
  export default HomeProperties

---

2. Integrate the HomeProperties Component into the Home Page

a. Open Your Home Page File

• Location: In the app/ folder, open page.jsx (this is your home page component).

b. Import and Insert the Component

• At the top of page.jsx, import the HomeProperties component:

  jsxCopyimport HomeProperties from '../components/HomeProperties';

• Insert <HomeProperties /> into the home page's JSX where you want the property listings to appear. For example, below other home page content or info boxes:

  jsxCopyexport default function HomePage() {
    return (
      <main>
        {/* Other homepage sections (hero, info boxes, etc.) */}
        <Hero />
        <InfoBoxes />
        <HomeProperties />
        <Footer />
      </main>
    );
  }

---

3. Testing and Refinements

a. Run the Development Server

• Start your Next.js app with:

  bashCopynpm run dev

• Navigate to http://localhost:3000 and verify that:

  • The home page displays the heading for recent properties.

  • Three randomized property cards are rendered using dynamic data from properties.json.

  • The "View All Properties" button is visible and properly routes to /properties.

b. Adjust and Refine

• Styling: Tweak Tailwind CSS classes in HomeProperties.jsx (and in your PropertyCard component) to match your design.

• Responsiveness: Verify that the grid layout adapts well on different screen sizes (e.g., one column on mobile, two columns on larger screens).

• Data Integrity: Ensure that the JSON data is correctly parsed and that the image paths correctly point to files in your public folder.

---

Recap

1. Component Creation:

   • Created a dedicated HomeProperties.jsx component in the components/ folder.

2. Data Handling:

   • Imported property data from properties.json, randomized the array, and selected three listings.

3. Dynamic Rendering:

   • Mapped over the selected listings to render dynamic PropertyCard components.

4. Integration:

   • Inserted the HomeProperties component into the home page (app/page.jsx).

5. Testing:

   • Verified the feature with a live development server and refined CSS as needed.