Customize Your Homepage 2

Customizing the homepage version 2 of RealStatic is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the components folder. Now, all that remains is to modify our data.

Finding Homepage 2

To locate the homepage version 2 components, navigate to the app/homepage2/page.js folder. In this file, you will find all the necessary components for the homepage. Here is the code snippet:

Customize Sections

In the components folder, you will find the individual components that make up the sections of the homepage 2. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, Services, PropertiesArea, Feature, Counter, Testimonialand BlogArea. All the section are same like homepage. Only Hero and Services secton are different from homepage.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the components/HeroTwo.jsx file:

Title

To change the Hero title, locate the following code and update the text within the <h1> tags:

<h1 className="hero-content-title">Find a perfect property Where you&rsquo;ll love to live</h1>

Description

To change the Hero description, find the following code and update the text within the <p> tags:

<p className="hero-content-description">
  We helps businesses customize, automate and scale up their ad production and delivery.
</p>

Image

To change the Hero image, you can replace the image files located in the specified paths. You can also adjust the width, height attributes as per your requirements.

<Image
  src="/images/hero/hero-bg-2.png"
  alt="hero-bg"
  height={605}
  width={1850}
  style={{
    maxWidth: "100%",
    height: "auto",
  }}
/>

Note: When making changes, ensure that the JSX syntax is maintained and that the modifications are within the appropriate tags and attributes.

Hero Filter option

Tab Title

There are three tabs in this section. To edit the tabs button folloe the following steps:

Go to components/HeroTwo.jsx file.
FInd the following codes:

<nav>
  <div
    className="nav nav-tabs justify-content-center"
    id="nav-tab"
    role="tablist"
  >
    <button
      className="nav-link active"
      id="nav-buy-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-buy"
      type="button"
      role="tab"
      aria-controls="nav-buy"
      aria-selected="true"
    >
      Buy
    </button>
    <button
      className="nav-link"
      id="nav-sell-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-sell"
      type="button"
      role="tab"
      aria-controls="nav-sell"
      aria-selected="false"
    >
      Sell
    </button>
    <button
      className="nav-link"
      id="nav-rent-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-rent"
      type="button"
      role="tab"
      aria-controls="nav-rent"
      aria-selected="false"
    >
      Rent
    </button>
  </div>
</nav>

Customize the text inside the `button tag.

Tab Items

Each tab has three option to filter. These are cities, property types and price. To customize these, follow the following steps.

Cities

Go to components/HeroTwo.jsx file.
FInd the following codes:

<ul className="dropdownMenu">
  <li onClick={() => handleCity("New York City")}>New York City</li>
  <li onClick={() => handleCity("Washington DC")}>Washington DC</li>
  <li onClick={() => handleCity("Florida")}>Florida</li>
  <li onClick={() => handleCity("Orlendo")}>Orlendo</li>
  <li onClick={() => handleCity("Alaska")}>Alaska</li>
  <li onClick={() => handleCity("Mexico City")}>Mexico City</li>
</ul>

Customize the value of the handleCity and inside li tags.
Add more li tags to add more items.

Properties

Go to components/HeroTwo.jsx file.
FInd the following codes:

<ul className="dropdownMenu">
  <li onClick={() => handleProperty("Duplex House")}>Duplex House</li>
  <li onClick={() => handleProperty("Single House")}>Single House</li>
  <li onClick={() => handleProperty("Multiplex House")}>Multiplex House</li>
</ul>

Customize the value of the handleProperty and inside li tags.
Add more li tags to add more items.

Prices

Go to components/HeroTwo.jsx file.
FInd the following codes:

<ul className="dropdownMenu">
  <li onClick={() => handlePrice("$15000 - $350000")}>$15000 - $350000</li>
  <li onClick={() => handlePrice("$10000 - $300000")}>$10000 - $30000</li>
  <li onClick={() => handlePrice("$20000 - $400000")}>$20000 - $40000</li>
</ul>

Customize the value of the handlePrice and inside li tags.
Add more li tags to add more items.

Services

Section Title

Open the components/Services.jsx file.
Locate the following code:

<h3>Simple &amp; easy way to find your dream apartment</h3>

Update the text within the <h3> tags to set the desired title for the section.

Section Description

Open the components/Services.jsx file.
Locate the following code:

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting
  industry.
</p>

Update the text within the <p> tags to set the desired description for the section.

Services Items

Open the components/Services.jsx file.
Locate the following code:

<div className="service-card">
  <Image
    src="/images/services/service1.png"
    alt="service"
    className="service-card--thumb"
    height={360}
    width={350}
    style={{
      maxWidth: "100%",
      height: "auto",
    }}
  />

  <div className="service-card--content">
    <h4>1. Search your location</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and
      typesetting industry.
    </p>
  </div>
</div>

Now, customize image src, <h4> and <p> tag to update the services.
follow the same steps to customize other services.
Update the text within the <h4> tags to set the desired title for the item.

Homepage About Page