Embedded Files
Exercise: Build a Home Page in React
Exercise: Build a Home Page in React
Create a React component that represents a home page for a website. The home page should include the following elements:
A hero section with a large image or video, and a call-to-action button
A section for highlighting featured content or products, with images and brief descriptions
A section for displaying recent blog posts or news articles, with images and brief summaries
A footer with links to social media profiles, and copyright information
Note:
A hero section is a key element of a website's home page that typically appears at the top and takes up a large portion of the screen. It often includes a prominent image or video, along with text and a call-to-action button. The goal of a hero section is to capture the attention of visitors and provide them with a clear message about the purpose or value of the website.
The term "hero" comes from the concept of a heroic image or message that commands attention and inspires action. Hero sections are commonly used on websites for businesses, organizations, and personal brands, and can be customized to fit the style and branding of the website. Some common features of hero sections include bold typography, high-quality images or videos, parallax scrolling effects, and interactive elements such as sliders or buttons
Example Code
Example Code
import React from 'react';
import product1 from "../../assets/example/product1.jpeg";
import product2 from "../../assets/example/product2.jpeg";
import product3 from "../../assets/example/product3.jpeg";
// import product4 from "../../assets/example/product4.jpeg";
const MyHomePage = () => {
return (
<div>
<header>
<h1>My MyHomePage</h1>
</header>
<main>
<section>
<h2>Welcome to My Site</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, libero sit amet suscipit scelerisque, lorem nisl iaculis lectus, sit amet porttitor odio est et eros. Praesent efficitur nibh in pharetra varius.</p>
<button>Get Started</button>
</section>
<section>
<h2>Featured Products</h2>
<ul>
<li>
<img src={product1} alt="Product 1" />
<h3>Product 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src={product2} alt="Product 2" />
<h3>Product 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src={product3} alt="Product 3" />
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
</section>
<section>
<h2>Recent Blog Posts</h2>
<ul>
<li>
<img src={require("../../assets/example/post1.jpeg")} alt="Post 1" />
<h3>Post 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src={require("../../assets/example/post2.jpeg")} alt="Post 2" />
<h3>Post 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src={require("../../assets/example/post3.jpeg")} alt="Post 3" />
<h3>Post 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
</section>
</main>
<footer>
<nav>
<ul>
<li><a href="https://twitter.com">Twitter</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
<li><a href="https://instagram.com">Instagram</a></li>
<li><a href="https://linkedin.com">LinkedIn</a></li>
</ul>
</nav>
<p>© 2023 My Site. All rights reserved.</p>
</footer>
</div>
);
};
export default MyHomePage;
Example with Prime
Example with Prime
import React from "react";
import { Button } from "primereact/button";
import { Card } from "primereact/card";
import { Divider } from "primereact/divider";
import { Image } from "primereact/image";
import { Panel } from "primereact/panel";
import { Carousel } from "primereact/carousel";
import product1 from "../../assets/example/product1.jpeg";
import product2 from "../../assets/example/product2.jpeg";
import product3 from "../../assets/example/product3.jpeg";
import post1 from "../../assets/example/post1.jpeg";
import post2 from "../../assets/example/post2.jpeg";
import post3 from "../../assets/example/post3.jpeg";
import banner1 from "../../assets/example/banner1.jpg";
import banner2 from "../../assets/example/banner2.jpg";
import banner3 from "../../assets/example/banner3.jpg";
const MyHomePage = () => {
const sliderItems = [
{
image: banner1,
header: "Slide 1 Header",
text: "Slide 1 Text",
},
{
image: banner2,
header: "Slide 2 Header",
text: "Slide 2 Text",
},
{
// image: 'https://www.example.com/image3.jpg',
image: banner3,
header: "Slide 3 Header",
text: "Slide 3 Text",
},
];
const itemTemplate = (item) => {
return (
<div className="p-grid p-nogutter p-justify-center">
<div className="p-col-12 p-md-6">
<img src={item.image} alt={item.header} />
</div>
<div className="p-col-12 p-md-6">
<h2>{item.header}</h2>
<p>{item.text}</p>
</div>
</div>
);
};
const featuredProducts = [
{
name: "Product 1",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: product1,
},
{
name: "Product 2",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: product2,
},
{
name: "Product 3",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: product3,
},
];
const recentBlogPosts = [
{
title: "Post 1",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: post1,
},
{
title: "Post 2",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: post2,
},
{
title: "Post 3",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
image: post3,
},
];
return (
<div>
<Carousel
value={sliderItems}
itemTemplate={itemTemplate}
numVisible={1}
numScroll={1}
responsiveOptions={[
{
breakpoint: "1024px",
numVisible: 1,
numScroll: 1,
},
{
breakpoint: "768px",
numVisible: 1,
numScroll: 1,
},
]}
/>
<h1>Welcome to My Site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, libero sit amet suscipit scelerisque, lorem nisl iaculis lectus, sit amet porttitor odio est et eros. Praesent efficitur nibh in pharetra varius.</p>
<Button label="Get Started" />
<main>
<section>
<Panel header="Featured Products">
<div className="p-grid p-nogutter">
{featuredProducts.map((product, index) => (
<div key={index} className="p-col-12 p-md-4">
<Card title={product.name}>
<Image src={product.image} alt={product.name} />
<p>{product.description}</p>
</Card>
</div>
))}
</div>
</Panel>
</section>
<section>
<Panel header="Recent Blog Posts">
{recentBlogPosts.map((post, index) => (
<div key={index} className="p-d-flex p-ai-center">
<Image src={post.image} alt={post.title} width="150" />
<div className="p-ml-3">
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
</div>
))}
</Panel>
</section>
</main>
<footer className="p-d-flex p-jc-between p-ai-center">
<nav>
<ul className="p-d-flex">
<li>
<a href="https://twitter.com">Twitter</a>
</li>
<li>
<a href="https://facebook.com">Facebook</a>
</li>
<li>
<a href="https://instagram.com">Instagram</a>
</li>
</ul>
</nav>
<div>
<p>© 2023 MySite. All rights reserved.</p>
</div>
</footer>
</div>
);
};
export default MyHomePage;
Page updated
Report abuse