# 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 *<mark style="color:orange;">hero</mark>* 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:**

{% tabs %}
{% tab title="index.html" %}

```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>
```

{% endtab %}

{% tab title="Hero.jsx" %}

```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>
  );
}
```

{% endtab %}
{% endtabs %}

***

### 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:**

```jsx
//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:**

```jsx
//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 Foote&#x72;**.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:**

```jsx
// 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:

  ```jsx
  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:

  ```jsx
  //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:

  ```bash
  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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://reactjs.koida.tech/backend-frameworks-next.js/hands-on-practice-2/homepage-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.