#5 Create component to reuse in different sections

src/components/NavbarCustom.jsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { PropTypes } from 'prop-types';
-import { NavLink } from 'react-router-dom';
+import { NavLink, Link } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
@@ -37,6 +37,9 @@ const NavbarCustom = ({
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="mx-auto">
+            <Nav.Link as={Link} to="/call-for-proposals">
+              Call for Proposals
+            </Nav.Link>
             {/* <Nav.Link href="#">Keynotes</Nav.Link>
             <Nav.Link href="#">Speakers</Nav.Link>
             <Nav.Link href="#link">Schedule</Nav.Link>

src/pages/CallForProposals/components/Intro.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+
+import { Col, Container, Image, Row } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+
+const Intro = ({ title, subtitle, buttonName, buttonLink }) => {
+  return (
+    <div className="intro-proposals">
+      <Container>
+        {title && (
+          <Row className="justify-content-center">
+            <Col xs={12} md={8}>
+              <h1 className="title">{title}</h1>
+            </Col>
+          </Row>
+        )}
+        <Row className="justify-content-center">
+          <Col md={9}>
+            <Row className="align-items-center">
+              <Col lg={6}>
+                <Image
+                  src="/images/content/call-speakers.webp"
+                  alt="Hero"
+                  width="100%"
+                  height="auto"
+                />
+              </Col>
+              <Col lg={6}>
+                {subtitle && <h3 className="subtitle">{subtitle}</h3>}
+                <p>
+                  Got a brilliant idea, a project you&apos;re proud of, or insights that could
+                  inspire others?
+                </p>
+                <p>
+                  We’re looking for passionate speakers to lead talks on development, security,
+                  Python, and beyond.
+                </p>
+                <p className="bold">Closes on April 6th 2025</p>
+                {buttonName && buttonLink && (
+                  <NavLink to={buttonLink} className="btn btn-primary">
+                    {buttonName}
+                  </NavLink>
+                )}
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
+};
+
+Intro.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  buttonName: PropTypes.string,
+  buttonLink: PropTypes.string
+};
+
+export default Intro;

src/pages/CallForProposals/index.jsx

@@ -1,42 +1,12 @@
 import Accordion from 'react-bootstrap/Accordion';
 import { Col, Container, Image, Row } from 'react-bootstrap';
+import Intro from '@/pages/CallForProposals/components/Intro';
 
 const CallForProposals = () => {
   return (
     <div className="generic-page">
       <div className="generic-page-wrapper">
-        <Container>
-          <Row className="justify-content-center">
-            <Col xs={12} md={8}>
-              <h1 className="title">Share Your Voice</h1>
-            </Col>
-          </Row>
-          <Row className="justify-content-center">
-            <Col md={9}>
-              <Row className="align-items-center">
-                <Col lg={6}>
-                  <Image
-                    src="/images/content/call-speakers.webp"
-                    alt="Hero"
-                    width="100%"
-                    height="auto"
-                  />
-                </Col>
-                <Col lg={6}>
-                  <p>
-                    Got a brilliant idea, a project you&apos;re proud of, or insights that could
-                    inspire others?
-                  </p>
-                  <p>
-                    We’re looking for passionate speakers to lead talks on development, security,
-                    Python, and beyond.
-                  </p>
-                </Col>
-              </Row>
-            </Col>
-          </Row>
-        </Container>
-
+        <Intro title={'Share Your Voice'} />
         <div className="talks-type">
           <div className="background-talks">
             <Container>

src/pages/LandingPage/index.jsx

@@ -4,6 +4,7 @@ import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Image from 'react-bootstrap/Image';
 import Row from 'react-bootstrap/Row';
+import Intro from '../CallForProposals/components/Intro';
 
 const LandingPage = ({ dataTranslate }) => {
   return (
@@ -85,6 +86,11 @@ const LandingPage = ({ dataTranslate }) => {
           </Row>
         </Container>
       </div>
+      <Intro
+        subtitle={'Become a Speaker'}
+        buttonLink={'/call-for-proposals'}
+        buttonName={'Apply to Speak'}
+      />
     </>
   );
 };

src/styles/main.css

@@ -24,6 +24,11 @@ h6 {
   font-weight: 400;
 }
 
+ul,
+ol {
+  padding-left: 15px;
+}
+
 a {
   text-decoration: none;
   transition:
@@ -43,3 +48,7 @@ a.btn:hover {
 .dropdown-toggle::after {
   vertical-align: 0.1em;
 }
+
+.bold {
+  font-weight: bold;
+}

src/styles/pages.css

@@ -147,25 +147,37 @@
 
 /* Generic Page */
 
-.generic-page {
+.generic-page,
+.intro-proposals {
   background-color: var(--purple);
   padding-bottom: 30px;
   padding-top: 150px;
 }
 
-.generic-page .generic-page-wrapper {
+.intro-proposals {
+  padding: 30px 0;
+}
+
+.intro-proposals .subtitle {
+  margin-bottom: 20px;
+}
+
+.generic-page .generic-page-wrapper,
+.intro-proposals {
   background-image: url('/images/background-3.svg');
   background-size: auto;
   background-repeat: no-repeat;
 }
 
-.generic-page .title {
+.generic-page .title,
+.intro-proposals .title {
   font-size: 40px;
   margin: 10px auto 50px auto;
   text-align: center;
 }
 
 /* Talks */
+
 .talks-type {
   background-color: var(--blue-dark);
   text-align: center;