Embedded Files
Exercise Topic: Create an About Page with a team section
Exercise Topic: Create an About Page with a team section
Overview
In this exercise, you will create an About Page for a company or organization. The page will include a section showcasing the team members of the organization. You will use React and PrimeReact to build the page and the team section.
Requirements
Create a new React component named AboutPage.
Import the following components from PrimeReact:
Panel to create a container for the About Page content.
Divider to separate the team section from the rest of the content.
Image to display the profile pictures of the team members.
Create an aboutContent object with the following properties:
title: the title of the About Page.
description: a brief description of the company or organization.
foundedYear: the year the company or organization was founded.
founders: an array of objects representing the founders of the company or organization. Each object should have the following properties:
name: the name of the founder.
position: the position of the founder in the company or organization.
profilePicture: the URL of the profile picture of the founder.
Create a TeamSection component that takes the founders array as a prop and displays the profile pictures and names of the team members.
Add the aboutContent to the AboutPage component using the Panel component.
Add a Divider component to separate the team section from the rest of the content.
Add the TeamSection component to the AboutPage component.
Example with Prime
Example with Prime
import React from "react";
import { Panel } from "primereact/panel";
import { Divider } from "primereact/divider";
import { Image } from "primereact/image";
import { Card } from "primereact/card";
const MyAboutPage = () => {
const aboutContent = {
title: "About Our Company",
description: "We are a company that does great things.",
foundedYear: 2020,
founders: [
{
name: "John Doe",
position: "Founder and CEO",
profilePicture: "https://picsum.photos/200/200",
},
{
name: "Jane Smith",
position: "Founder and CTO",
profilePicture: "https://picsum.photos/200/201",
},
{
name: "Darmandran",
position: "Programmer",
profilePicture: "https://picsum.photos/200/202",
},
],
};
return (
<div>
<Panel header={aboutContent.title}>
<p>{aboutContent.description}</p>
<p>Founded in {aboutContent.foundedYear}</p>
</Panel>
<Divider />
<TeamSection founders={aboutContent.founders} />
</div>
);
};
const TeamSection = ({ founders }) => {
return (
<div>
<h2>Our Team</h2>
{founders.map((founder, index) => (
<div key={index} className="p-col-12 p-md-4">
<Card title={founder.name} style={{ backgroundColor: "#f2f2f2" }} className="p-p-3">
<Image src={founder.profilePicture} alt={founder.name} width="200" />
<p>{founder.name}</p>
<p>{founder.position}</p>
</Card>
<Divider />
</div>
))}
</div>
);
};
export default MyAboutPage;
Page updated
Report abuse