RealStatic
Nextjs
About Page

About Page

Customize Sections

In the components folder, you will find the individual components that make up the sections of the About Page. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, Company, Counter, Team and BlogArea.

Hero Section

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

Title

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

<h1>Reimagining real estate to make it easier to unlock.</h1>

Description

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

<p>
  On the other hand, we denounce with righteous indignation and
  dislike men who are so beguiled and demoralized by the charms of
  pleasure of the moment, so blinded by desire, that they cannot
  foresee the pain and trouble.
</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.

<div className="about-thumbs">
  <div className="about-thumbs-item grid-col-span-2 order-1 order-sm-1">
    <Image
      src="/images/about/about1.png"
      alt="about"
      height={400}
      width={792}
      style={{
        maxWidth: "100%",
        height: "auto",
      }}
    />
  </div>
  <div className="about-thumbs-item order-3 order-sm-2">
    <Image
      src="/images/about/about2.png"
      alt="about"
      height={400}
      width={384}
      style={{
        maxWidth: "100%",
        height: "auto",
      }}
    />
  </div>
  <div className="about-thumbs-item order-4 order-sm-3">
    <Image
      src="/images/about/about3.png"
      alt="about"
      height={400}
      width={384}
      style={{
        maxWidth: "100%",
        height: "auto",
      }}
    />
  </div>
  <div className="about-thumbs-item grid-col-span-2 oreder-2 order-sm-4">
    <Image
      src="/images/about/about4.png"
      alt="about"
      height={400}
      width={792}
      style={{
        maxWidth: "100%",
        height: "auto",
      }}
    />
  </div>
</div>
 

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

Company Details

To edit Company Details at first go to components/company.jsx. Now follow the following steps.

Title

To change the Company details title, locate the following code and update the text within the <h3> tags:

<h3>
  A note from our <br /> founders.
</h3>
 

Description

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

<p>
  Lorem Ipsum is simply dummy text of the printing and
  typesetting industry. In a free hour,
</p>

Company History List

To company history list, follow the following steps:

  1. Go to components/Company.jsx file.
  2. file the following code:
<li>
  <div className="company-history--details">
    <h6>It all started in 1995</h6>
    <p>
      Lorem Ipsum is simply dummy text of the printing and
      typesetting industry. In a free hour, On the other hand,
      we denounce with righteous.
    </p>
  </div>
</li>
  1. Now cuatomize <h6> and <p> tag value to edit title and details.
  2. Add more <li> items to add more company details.

Company History Image

To change the image, find the following code and update the text within the img tags:

<Image
  src="/images/about/company-history1.png"
  alt="company-details1"
  width={589}
  height={537}
  style={{
    maxWidth: "100%",
    height: "auto",
  }}
/>

Now update the src value to add new image.

Company Vision

Title

To change the Company details title, locate the following code and update the text within the <h3> tags:

<h3>
  Our vision is simple.
</h3>
 

Description

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

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting
  industry. In a free hour, On the other hand, we denounce with
  righteous indignation and dislike men who are so beguiled and
  demoralized by the charms of pleasure of the moment.
  <br />
  <br />
  In a free hour, On the other hand, we denounce with righteous
  indignation and dislike men .
</p>

Author

  1. Go to components/Company.jsx file.
  2. file the following code:
<h6>Jacob Pial</h6>
<p>CEO at Staticmania</p>
  1. Now cuatomize <h6> and <p> tag value to edit author name and designation.

Image

To change the image, find the following code and update the text within the img tags:

<Image
  src="/images/about/company-history2.png"
  alt="company-details2"
  width={589}
  height={537}
  style={{
    maxWidth: "100%",
    height: "auto",
  }}
/>

Now update the src value to add new image.