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:
- Go to
components/Company.jsx
file. - 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>
- Now cuatomize
<h6>
and<p>
tag value to edit title and details. - 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
- Go to
components/Company.jsx
file. - file the following code:
<h6>Jacob Pial</h6>
<p>CEO at Staticmania</p>
- 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.