Home

src/App.js

@@ -7,13 +7,15 @@ import About from "./Components/Aboutpage/About"
 import CreateProfile from './pages/CreateProfile/CreateProfile';
 import Home from './pages/Home';
 
+import Blog from './pages/Blog/Blog/Blog';
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
 	    <Route path='/signUp' element={<SignUp/>}/>
 	    <Route path='/login' element={<SignIn/>}/>
       <Route path="/createProfile" element={<CreateProfile />} />
+	  <Route path='/blog' element={<Blog/>}/>
       <Route path='/About' element={<About/>}/>
     </Routes>
   );

src/pages/Blog/Blog/Blog.js

@@ -0,0 +1,228 @@
+import React from "react";
+import "./blog.css";
+import BlogCard from "./BlogCard";
+import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from "react-icons/md";
+import Nav from "react-bootstrap/Nav";
+import { Link } from "react-router-dom";
+
+import img1 from "./images/Image-1.png";
+import img2 from "./images/Image-2.png";
+import img3 from "./images/Image-3.png";
+import img4 from "./images/Image-4.png";
+import img5 from "./images/Image-5.png";
+import img6 from "./images/Image-6.png";
+import img7 from "./images/Image-7.png";
+import img8 from "./images/Image-8.png";
+import img0 from "./images/Image-0.png";
+import AppLayout from "../../../layout/AppLayout";
+
+const Blog = () => {
+  const Data = [
+    {
+      id: 1,
+      cardImage: img0,
+      title: "How to live a mindful life",
+      author: "Alade Oluwaseyi",
+      date: "Oct 28, 2022",
+      cardText:
+        "Life has its way of creeping unto us constantly. How do we manage the stresses of life....",
+      buttonFirst: "Productivity",
+      buttonSecond: "Lifestyle",
+    },
+    {
+      id: 2,
+      cardImage: img1,
+      title: "Gut health",
+      author: "Isioma Joshua",
+      date: "Dec 24, 2021",
+      cardText:
+        "An overlooked but important part of the body's general health; the gut. A lot of us....",
+      buttonFirst: "Health",
+    },
+    {
+      id: 3,
+      cardImage: img2,
+      title: "Motivate yourself to success",
+      author: "Chizoba Miracle",
+      date: "Jul 10, 2022",
+      cardText:
+        "Success is attainable by everyone. A lot of times, we wait for external sources of  motivation to be....",
+      buttonFirst: "Productivity",
+      buttonSecond: "Lifestyle",
+    },
+    {
+      id: 4,
+      cardImage: img3,
+      title: "How education can significantly reduce crime",
+      author: "Simisola David",
+      date: "Jan. 12, 2023",
+      cardText:
+        "Success is attainable by everyone. A lot of times, we wait for external sources of  motivation to be....",
+      buttonFirst: "Social",
+      buttonSecond: "Education",
+    },
+    {
+      id: 5,
+      cardImage: img4,
+      title: "The future of tech",
+      author: "Damilola Adeniyan",
+      date: "Jan. 16, 2021",
+      cardText:
+        "An overlooked but important part of the body's general health; the gut. A lot of us....",
+      buttonFirst: "Health",
+    },
+    {
+      id: 6,
+      cardImage: img5,
+      title: "How to find remote jobs",
+      author: "Adedayo Kayode",
+      date: "Feb. 25, 2022",
+      cardText:
+        "Life has its way of creeping unto us constantly. How do we manage the stresses of life....",
+      buttonFirst: "Career",
+    },
+    {
+      id: 7,
+      cardImage: img6,
+      title: "Diversity & Inclusion",
+      author: "Aminu Saheed",
+      date: "Aug. 18, 2022",
+      cardText:
+        "Life has its way of creeping unto us constantly. How do we manage the stresses of life....",
+      buttonFirst: "Social",
+      buttonSecond: "Lifestyle",
+    },
+    {
+      id: 8,
+      cardImage: img7,
+      title: "Future of commercial space flight",
+      author: "Rasheedah Clare",
+      date: "Jul. 21, 2020",
+      cardText:
+        "Success is attainable by everyone. A lot of times, we wait for external sources of  motivation to be....",
+      buttonFirst: "Technology",
+    },
+    {
+      id: 9,
+      cardImage: img8,
+      title: "Limiting Screen Time",
+      author: "Habiba Jamiu",
+      date: "Mar. 15, 2022",
+      cardText:
+        "An overlooked but important part of the body's general health; the gut. A lot of us....",
+      buttonFirst: "Health",
+    },
+  ];
+  return (
+    <AppLayout>
+      <div className="container">
+          <main className="blog">
+            <div className="text-center">
+              <p className="blog-quote">
+                <q>
+                  The liberty of speaking and writing guards our other liberties.
+                </q>
+                <cite className="d-block">-Thomas Jefferson</cite>
+              </p>
+              <h1 className="blog-title"> Our Blog</h1>
+            </div>
+            <Nav
+              variant="tabs"
+              defaultActiveKey="#first"
+              className="justify-content-between align-items-center"
+            >
+              <Nav.Item>
+                <Nav.Link href="#first" className="blogLink">All</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Health" className="blogLink">Health</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Lifestyle" className="blogLink">Lifestyle</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Technology" className="blogLink">Technology</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Leadership" className="blogLink">Leadership</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Finance" className="blogLink">Finance</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#Art" className="blogLink">Art</Nav.Link>
+              </Nav.Item>
+              <Link to="#">
+                <MdKeyboardArrowRight />
+              </Link>
+            </Nav>
+            {/* <nav>
+              <ul className="blog-nav d-flex justify-content-between">
+                <li className="text-decoration-none">All</li>
+                <li className="text-decoration-none">Health</li>
+                <li className="text-decoration-none">Lifestyle</li>
+                <li className="text-decoration-none">Technology</li>
+                <li className="text-decoration-none">Leadership</li>
+                <li className="text-decoration-none">Finance</li>
+                <li className="text-decoration-none">Art</li>
+                <MdKeyboardArrowRight />
+              </ul>
+            </nav> */}
+            <div className="row main-row">
+              {Data.map((item) => {
+                return (
+                  <BlogCard
+                    key={item.id}
+                    title={item.title}
+                    cardImage={item.cardImage}
+                    author={item.author}
+                    date={item.date}
+                    cardText={item.cardText}
+                    buttonFirst={item.buttonFirst}
+                    buttonSecond={item.buttonSecond}
+                  />
+                );
+              })}
+            </div>
+            <div>
+              <Nav
+                variant="tabs"
+                defaultActiveKey="#first"
+                className="justify-content-between align-items-center"
+              >
+                <Link to="#">
+                  <MdKeyboardArrowLeft />
+                </Link>
+                <Nav.Item>
+                  <Nav.Link href="#first" className="blogLink">1</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Health" className="blogLink">2</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Lifestyle" className="blogLink">3</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Technology" className="blogLink">4</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Leadership" className="blogLink">5</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Finance" className="blogLink">6</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link href="#Art" className="blogLink">7</Nav.Link>
+                </Nav.Item>
+                <Link to="#">
+                  <MdKeyboardArrowRight />
+                </Link>
+              </Nav>
+            </div>
+          </main>
+      </div>
+    </AppLayout>
+  );
+};
+
+export default Blog;

src/pages/Blog/Blog/BlogCard.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import Card from "react-bootstrap/Card";
+import { FiArrowUpRight } from "react-icons/fi";
+import "./blog.css";
+import { Link } from "react-router-dom";
+
+function BlogCard(props) {
+  const buttonSecond = props.buttonSecond;
+  return (
+    <Card style={{ width: "22.5rem" }}>
+      <Card.Img variant="top" src={props.cardImage} />
+      <Card.Body className="d-flex justify-content-between flex-column">
+        <div className="card-main-text">
+          <Card.Title className="card-title1">{props.title}</Card.Title>
+          <div className="d-flex card-text1 card-text2">
+            <span>{props.author} </span>
+            <span> . </span>
+            <span>{props.date}</span>
+          </div>
+          <Card.Text className="card-text1">{props.cardText}</Card.Text>
+          <Link to="#" className="card-link1 d-block pb-3 text-decoration-none">
+            Read more <FiArrowUpRight />
+          </Link>
+        </div>
+        <div className="button-group d-flex">
+          <Button variant="outline-secondary" className="button1">
+            {props.buttonFirst}
+          </Button>
+          {buttonSecond && (
+            <Button variant="outline-secondary" className="button1">
+              {buttonSecond}
+            </Button>
+          )}
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default BlogCard;

src/pages/Blog/Blog/blog.css

@@ -0,0 +1,107 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.blog {
+  font-family: "Montserrat";
+  font-style: normal;
+  margin: 6.25rem 0;
+}
+.blog a {
+  color: #000000;
+}
+.blog-quote {
+  font-style: italic;
+  font-weight: 500;
+  font-size: 30px;
+  line-height: 37px;
+  color: #111010;
+}
+
+.blog-title {
+  font-weight: 500;
+  font-size: 70px;
+  line-height: 85px;
+  margin: 60px 0 80px;
+
+  color: #e3502f;
+}
+
+.blog-nav {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  color: #8b8989;
+}
+
+.card-title1 {
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 32px;
+
+  color: #000000;
+}
+
+.card-text1 {
+  font-family: "Inter";
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+
+  color: #5f5e73;
+}
+
+.card-text2 {
+  color: rgba(0, 0, 0, 0.6);
+  margin: 0.5rem 0 0.875rem;
+  gap: 0.5rem;
+}
+
+.card-link1 {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 15px;
+
+  color: #000000;
+}
+
+.main-row {
+  margin: 5rem 0;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.main-row > * {
+  padding: 0;
+}
+
+.button-group {
+  gap: 1rem;
+}
+.button1 {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  color: #000000;
+  border-radius: 15px;
+}
+
+.blogLink.active {
+  color: black !important;
+  padding: 0.6rem 1rem;
+  /* text-decoration: underline; */
+  border-bottom: 1px solid #000000 !important;
+  border-radius: 0;
+}
+.nav-tabs .nav-link {
+  border: none;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+
+  color: #8b8989;
+}
+.nav-tabs {
+  border: none;
+}