Homepage Components

Homepage Components: Hero, InfoxBox, InfoBoxes, Footer

1. Create the Hero Component

a. Set Up the File

• In your components/ folder, create a file named Hero.jsx.

• Mark it as a React component (since it will display static content for now).

b. Extract and Convert the Markup

• Open your index.html and locate the hero section (the section with a background, a heading, a paragraph, and a search form).

• Copy the HTML markup for the hero section.

• In Hero.jsx, paste the markup inside a functional component and update the attributes:

  • Replace all instances of class with className.

  • Adjust any other HTML-specific syntax (e.g., self-closing tags).

Example Structure:

index.html

// index.html
    <!-- Hero -->
    <section class="bg-blue-700 py-20 mb-4">
      <div
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
      >
        <div class="text-center">
          <h1
            class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
          >
            Find The Perfect Rental
          </h1>
          <p class="my-4 text-xl text-white">
            Discover the perfect property that suits your needs.
          </p>
        </div>
        <form
          class="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center"
        >
          <div class="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
            <label for="location" class="sr-only">Location</label>
            <input
              type="text"
              id="location"
              placeholder="Enter Location (City, State, Zip, etc"
              class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
            />
          </div>
          <div class="w-full md:w-2/5 md:pl-2">
            <label for="property-type" class="sr-only">Property Type</label>
            <select
              id="property-type"
              class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
            >
              <option value="All">All</option>
              <option value="Apartment">Apartment</option>
              <option value="Studio">Studio</option>
              <option value="Condo">Condo</option>
              <option value="House">House</option>
              <option value="Cabin Or Cottage">Cabin or Cottage</option>
              <option value="Loft">Loft</option>
              <option value="Room">Room</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <button
            type="submit"
            class="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
          >
            Search
          </button>
        </form>
      </div>
    </section>

Hero.jsx

//components/Hero.jsx
export default function Hero() {
  return (
    <section className="bg-blue-700 py-20 mb-4">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center">
        <div className="text-center">
          <h1 className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl">
            Find The Perfect Rental
          </h1>
          <p className="my-4 text-xl text-white">
            Discover the perfect property that suits your needs.
          </p>
        </div>
        <form className="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center">
          {/* Input and select fields go here */}
          <div className="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
            <label htmlFor="location" className="sr-only">Location</label>
            <input
              type="text"
              id="location"
              placeholder="Enter Location (City, State, Zip, etc)"
              className="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
            />
          </div>
          <div className="w-full md:w-2/5 md:pl-2">
            <label htmlFor="property-type" className="sr-only">Property Type</label>
            <select
              id="property-type"
              className="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
            >
              <option value="All">All</option>
              <option value="Apartment">Apartment</option>
              <option value="Studio">Studio</option>
              <option value="Condo">Condo</option>
              <option value="House">House</option>
              <option value="Cabin Or Cottage">Cabin or Cottage</option>
              <option value="Loft">Loft</option>
              <option value="Room">Room</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <button
            type="submit"
            className="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
          >
            Search
          </button>
        </form>
      </div>
    </section>
  );
}

---

2. Create Reusable InfoBox Component

a. Set Up the File

• In the components/ folder, create InfoBox.jsx.

• This component will accept props (like heading text, background color, text color, and button configuration) so it can be reused.

b. Build the Component Structure

• Define a functional component that uses props to dynamically set its content and styling.

Example Structure:

//components/InfoBox.jsx
export default function InfoBox({
  heading,
  bgColor = 'bg-gray-100',
  textColor = 'text-gray-800',
  buttonInfo,
  children,
}) {
  return (
    <div className={`${bgColor} p-6 rounded-lg shadow-md`}>
      <h2 className={`text-2xl font-bold ${textColor}`}>{heading}</h2>
      <p className={`${textColor} mt-2 my-4`}>{children}</p>
      {buttonInfo && (
        <a
          href={buttonInfo.link}
          className={`inline-block ${buttonInfo.bgColor} ${buttonInfo.textColor} rounded-lg px-4 py-2 hover:opacity-80`}>
          {buttonInfo.text}
        </a>
      )}
    </div>
  )
}

Note: Customize default props as needed so that you can easily change backgrounds and text colors when using the component.

---

3. Create the InfoBoxes Container Component

a. Set Up the File

• In the components/ folder, create InfoBoxes.jsx.

• This component will serve as a grid/container that holds multiple InfoBox components.

b. Build the Component Structure

• Import the InfoBox component and use it to display different information blocks side-by-side.

Example Structure:

//components/InfoBoxes.jsx
import InfoBox from './InfoBox'

export default function InfoBoxes() {
  return (
    <section className="">
      <div className="container-xl lg:container m-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
          <InfoBox
            heading="For Renters"
            bgColor="bg-gray-200"
            textColor="text-gray-800"
            buttonInfo={{
              text: 'Browse Properties',
              link: '/properties',
              bgColor: 'bg-black',
              textColor: 'text-white',
            }}>
            Find your dream rental property. Bookmark properties and contact
            owners.
          </InfoBox>
          <InfoBox
            heading="For Property Owners"
            backgroundColor="bg-blue-200"
            textColor="text-blue-800"
            buttonInfo={{
              text: 'Add Property',
              link: '/property/add',
              bgColor: 'bg-blue-500',
              textColor: 'text-white',
            }}>
            List your properties and reach potential tenants. Rent as an Airbnb
            or long term.
          </InfoBox>
        </div>
      </div>
    </section>
  )
}

---

4. Create the Footer component

a. Set Up the File

• In the components/ folder, create Footer.jsx.

• This component will serve as a Footer components.

b. Build the Component Structure

• Copy the HTML markup for the footer section.

• In Footer.jsx, paste the markup inside a functional component and update the attributes:

  • Replace all instances of class with className.

  • Adjust any other HTML-specific syntax (e.g., self-closing tags).

Example Structure:

// Components/Footer.jsx
//  <!-- Footer -->
import Image from 'next/image'
import Link from 'next/link'
import logo from '@/assets/images/logo.png'
const Footer = () => {
    return (
      <footer className="bg-gray-200 py-4 mt-auto">
        <div className="container mx-auto flex flex-col md:flex-row items-center justify-between px-4">
          <div className="mb-4 md:mb-0">
            <Image src={logo} alt="Logo" className="h-8 w-auto" />
          </div>
          <div className="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0">
            <ul className="flex space-x-4">
              <li>
                <a href="/properties.html">Properties</a>
              </li>
              <li>
                <a href="/terms.html">Terms of Service</a>
              </li>
            </ul>
          </div>
          <div>
            <p className="text-sm text-gray-500 mt-2 md:mt-0">
              &copy; 2025 PropertyThere. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    )
}

export default Footer

5. Integrate Components into the Home Page

a. Update the Home Page File

• In the app/ folder, open page.jsx (your homepage component).

b. Import the Components

• Import the Hero and InfoBoxes components:

  import Hero from '@/components/Hero';
  import InfoBoxes from '@/components/InfoBoxes';

c. Insert the Components in the Home Page Layout

• Arrange your homepage by including the components. For example:

  //app/page.jsx
  import Hero from '@/components/Hero'
  import InfoBoxes from '@/components/InfoBoxes'
  
  export default function HomePage() {
    return (
      <>
        <Hero />
        <InfoBoxes />
        {/* Other components like property listings, footer, etc. */}
      </>
    );
  }

---

5. Test and Refine

a. Run the Development Server

• Start your application with:

  bashCopynpm run dev

• Navigate to http://localhost:3000 to see the home page with the Hero and InfoBoxes components.

b. Verify Responsiveness and Styling

• Check that:

  • The Hero section appears as designed with the search form.

  • The InfoBoxes grid displays two boxes side-by-side on larger screens and stacks on mobile.

  • The InfoBox component correctly applies the dynamic styles (background and text colors) and displays button links as configured.

c. Adjust as Needed

• Refine Tailwind CSS classes for spacing, responsiveness, and overall aesthetics.

• Update props or component logic as your design or functionality evolves.

---

Recap

1. Hero.jsx:

   • Created by extracting and converting the hero section from the theme in index.html.

2. InfoBox.jsx:

   • A reusable component that accepts props for dynamic headings, colors, and button configuration.

3. InfoBoxes.jsx:

   • A container grid that holds multiple InfoBox components.

4. Footer.jsx

5. Homepage Integration:

   • Imported and arranged the Hero and InfoBoxes components on the home page (app/page.jsx) to drive user engagement.

6. Testing:

   • Ran the development server, verified the layout and responsiveness, and refined styling as needed.