Create blog section ui/ux

src/components/Footer/Footer.js

@@ -138,6 +138,15 @@ const Footer = ({ isDark = true }) => {
                           </a>
                         </div>
                       </Col>
+                      <Col md={3} sm={6} xs={6}>
+                        <div className="mb-5 mb-lg-4">
+                          <a href="#blog">
+                            <TitleStyled variant="card" color="white">
+                              Blog
+                            </TitleStyled>
+                          </a>
+                        </div>
+                      </Col>
                       {/* <Col md={3} sm={6} xs={6}>
                         <div className="mb-5 mb-lg-4">
                           <a href="#how-to-buy">

src/components/Header/menuItems.js

@@ -30,6 +30,10 @@ export const menuItems = [
     name: "where-we-donate",
     label: "Where we Donate",
   },
+  {
+    name: "blog",
+    label: "Blog",
+  },
   // {
   //   name: "how-to-buy",
   //   label: "How to Buy",

src/components/PostCard/PostCard.js

@@ -115,7 +115,7 @@ const PostCard = ({
       </Text>
       {readMore && (
         <Box>
-          <Link href="/">
+          <Link href="/blog/1">
             <a>
               <Span color="primary">Continue Reading</Span>
             </a>

src/components/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { Title, Text, Box, Span } from "../Core";
 
 export const CardSidebar = ({ children, ...rest }) => (
-  <Box bg="ash" borderRadius="10px" mb="30px" p="25px" {...rest}>
+  <Box bg="purpleDark" borderRadius="10px" mb="30px" p="25px" {...rest}>
     {children}
   </Box>
 );

src/pages/blog/[postId].js

@@ -0,0 +1,55 @@
+import React from "react";
+import Link from "next/link";
+import { Container, Row, Col } from "react-bootstrap";
+
+import { Section, Title, Text, Box } from "../../components/Core";
+
+import PostDetails from "../../sections/blog/PostDetails";
+import Comments from "../../sections/blog/Comments";
+import Sidebar from "../../sections/blog/Sidebar";
+
+const BlogDetails = () =>  (
+  <>
+    <Section bg="#f7f7fb" className="pb-0">
+      <div className="pt-5"></div>
+      <Container>
+        <Row className="justify-content-center text-center">
+          <Col lg="12">
+            <Title variant="hero">
+              How To Blow Through Capital{" "}
+              <br className="d-none d-lg-block" /> At An Incredible Rate
+            </Title>
+            <Box className="d-flex justify-content-center">
+              <Text mr={3}>
+                <Link href="/">
+                  <a>Jan 14, 2020</a>
+                </Link>
+              </Text>
+              <Text mr={3}>
+                <Link href="/">
+                  <a>Technology</a>
+                </Link>
+              </Text>
+              <Text>
+                <Link href="/">
+                  <a>David Jones</a>
+                </Link>
+              </Text>
+            </Box>
+          </Col>
+        </Row>
+        <Row className="mt-4">
+          <Col lg="8" className="mb-5">
+            <PostDetails />
+          </Col>
+          <Col lg="4" className="">
+            <Sidebar />
+          </Col>
+        </Row>
+      </Container>
+      <Comments />
+    </Section>
+  </>
+);
+
+export default BlogDetails;

src/pages/index.js

@@ -4,6 +4,7 @@ import WhyApes from "../sections/landing1/Content1";
 import Tokenomics from "../sections/landing2/Feature1";
 import MeetTheDeveloper from "../sections/landing1/Content2";
 import WhereWeDonate from "../sections/landing1/Content1Version2";
+import Blog from "../sections/landing1/Blog";
 import Roadmap from "../sections/landing1/Roadmap";
 import PageWrapper from "../components/PageWrapper";
 
@@ -29,6 +30,9 @@ const LandingPage4 = () => {
         <div id="where-we-donate">
           <WhereWeDonate />
         </div>
+        <div id="blog">
+          <Blog />
+        </div>
         {/* <div id="how-to-buy">
           <FAQ />
         </div> */}

src/sections/blog/PostDetails.js

@@ -138,7 +138,7 @@ const PostDetails = () => (
         </p>
       </div>
     </Post>
-    <Box className="d-flex" mt={4}>
+    <Box className="d-flex flex-wrap" mt={4}>
       <BadgePost>Freelance</BadgePost>
       <BadgePost>Design</BadgePost>
       <BadgePost>Earning</BadgePost>

src/sections/landing1/Blog.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+
+import {Box, Section} from "../../components/Core";
+
+import BlogList from "../blog/BlogListSidebar";
+import Sidebar from "../blog/Sidebar";
+import imgL1FeatureCurve from "../../assets/image/svg/swish-bottom-black.svg";
+import styled from "styled-components";
+
+const ShapeBottmRight = styled(Box)`
+  position: absolute;
+  bottom: -3px;
+  left: -5px;
+  width: calc(100vw + 10px);
+  img {
+    min-width: 100%;
+  }
+`;
+
+const Blog = () => (
+  <>
+    <Section bg="#f7f7fb" className="position-relative">
+      <ShapeBottmRight>
+        <img src={imgL1FeatureCurve} alt="" className="img-fluid" />
+      </ShapeBottmRight>
+      <Container>
+        <Row>
+          <Col
+            lg="8"
+            className="mb-5"
+            data-aos="fade-left"
+            data-aos-duration="750"
+            data-aos-once="true"
+            data-aos-delay="500"
+          >
+            <BlogList />
+          </Col>
+          <Col
+            lg="4"
+            data-aos="fade-right"
+            data-aos-duration="750"
+            data-aos-once="true"
+            data-aos-delay="50"
+          >
+            <Sidebar />
+          </Col>
+        </Row>
+      </Container>
+    </Section>
+  </>
+)
+export default Blog;

src/sections/landing1/Content1Version2.js

@@ -3,21 +3,9 @@ import styled from "styled-components";
 import { Container, Row, Col } from "react-bootstrap";
 
 import { Title, Button, Section, Box, Text } from "../../components/Core";
-import { device, theme } from "../../utils";
 import ape2Image from "../../assets/image/png/ape-2.png";
-import imgL1FeatureCurve from "../../assets/image/svg/swish-bottom-black.svg";
 import cfga from "../../assets/image/svg/cfga.svg";
 
-const ShapeBottmRight = styled(Box)`
-  position: absolute;
-  bottom: -3px;
-  left: -5px;
-  width: calc(100vw + 10px);
-  img {
-    min-width: 100%;
-  }
-`;
-
 const Logo = styled.img`
   position: absolute;
   bottom: 20px;
@@ -41,9 +29,6 @@ const Content1 = () => (
   <>
     {/* <!-- Content section 1 --> */}
     <Section className="position-relative" bg="secondary">
-      <ShapeBottmRight>
-        <img src={imgL1FeatureCurve} alt="" className="img-fluid" />
-      </ShapeBottmRight>
       <Container>
         <Row className="align-items-center">
           <Col md="12" lg="6" className="order-lg-2">