ReactJS Full Page Layout – Displaying Components

import React from "react";
import "./index.css";

// Header Component
const Header = () => (
  <header className="header">
    <div>
      <div className="logo">Logo Here</div>
      <div className="slogan">Slogan Here</div>
    </div>
    <div className="contact">8583959528</div>
  </header>
);

// Navigation Component
const Nav = () => (
  <nav className="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Blog</a>
    <a href="#">Contacts</a>
  </nav>
);

// Sidebar Component
const Sidebar = () => (
  <aside className="sidebar">
    <a href="#">Menu 1</a>
    <a href="#">Menu 1</a>
    <a href="#">Menu 1</a>
    <a href="#">Menu 1</a>
  </aside>
);

// ContentBox Component
const ContentBox = ({ heading, text }) => (
  <div className="box">
    <div className="image">Use Here Image</div>
    <div className="text">
      <h2>{heading}</h2>
      <p>{text}</p>
    </div>
  </div>
);

// Content Section
const Content = () => {
  const data = [
    {
      heading: "This is heading 1",
      text: "Rajesh is upset, holding his head with one hand, looking stressed, surrounded by papers or job listings.",
    },
    {
      heading: "This is heading 1",
      text: "Rajesh is upset, holding his head with one hand, looking stressed, surrounded by papers or job listings.",
    },
    {
      heading: "This is heading 1",
      text: "Rajesh is upset, holding his head with one hand, looking stressed, surrounded by papers or job listings.",
    },
  ];

  return (
    <section className="content">
      {data.map((item, index) => (
        <ContentBox key={index} heading={item.heading} text={item.text} />
      ))}
    </section>
  );
};

// Footer Component
const Footer = () => (
  <footer className="footer">Home About Services Contact</footer>
);

// Main App Component
const App = () => {
  return (
    <>
      <Header />
      <Nav />
      <div className="container">
        <Sidebar />
        <Content />
      </div>
      <Footer />
    </>
  );
};

export default App;