blog/blog-section

pages/blog/[slug].js

@@ -0,0 +1,31 @@
+import Image from 'next/image';
+
+import AppLayout from '../../core/layout/AppLayout';
+
+const BlogArticle = () => (
+	<AppLayout>
+		<div className="py-16 text-malawi-black ">
+			<article className="w-full px-4 md:w-3/4 lg:w-2/5 mx-auto">
+				<Image
+					src="/blog-hero-open-book.jpg"
+					alt="Alt Text"
+					width={600}
+					height={400}
+					blurDataURL
+					placeholder="blur"
+				/>
+				<br />
+				<small className="text-md p-2 pl-0">Posted On: 8 August, 2022</small>
+				<div className="">
+					<h2 className="text-3xl font-bold py-4">Blog Title</h2>
+					<p className="text-sm md:text-md">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit quod voluptatibus sunt
+						dolore, distinctio necessitatibus aperiam saepe nemo recusandae mollitia!
+					</p>
+				</div>
+			</article>
+		</div>
+	</AppLayout>
+);
+
+export default BlogArticle;

pages/blog/components/BlogCardsContainer.js

@@ -0,0 +1,64 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Button from '../../../core/components/elements/button/index';
+
+const BlogCardsContainer = ({ dummyPostsData }) => (
+	<section className="w-full px-4 md:px-0 mx-auto py-16">
+		<div className="w-full md:w-5/6 mx-auto max-w-screen-lg">
+			<h1 className="text-4xl text-malawi-black-dark font-black text-center py-4">Recent Posts</h1>
+			<div className="flex flex-col w-full mx-auto sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:space-x-0 sm:gap-6 justify-between items-center py-6">
+				{dummyPostsData &&
+					dummyPostsData.map((post) => (
+						<div className="bg-malawi-black rounded-md my-4 sm:my-2">
+							<Link href={`/blog/${post.slug}`}>
+								<a title={post.title}>
+									<Image
+										src={post.postImage}
+										alt={post.title}
+										width={400}
+										height={200}
+										placeholder="blur"
+										blurDataURL
+									/>
+								</a>
+							</Link>
+							<div className="p-4 pb-6 text-malawi-white">
+								<div className="mt-2 mb-3">
+									<small className="mr-4">{post.date}</small>
+									{post &&
+										post.tags.map((tag) => (
+											<small key={tag}>
+												<Link href="/">
+													<a className="mr-2 text-malawi-blue bg-malawi-black-dark hover:text-malawi-white px-2 rounded-full text-xs">
+														{tag}
+													</a>
+												</Link>
+											</small>
+										))}
+								</div>
+								<hr />
+								<Link href={`/blog/${post.slug}`}>
+									<a className="font-montserrat sub-title-text inline-block py-4 hover:opacity-80">
+										{post.title}
+									</a>
+								</Link>
+								<div className="pb-4">
+									<p className="text-sm">{post.description}</p>
+								</div>
+								<Link href={`/blog/${post.slug}`}>
+									<a>
+										<Button title="Read More" variant="primary">
+											Read More
+										</Button>
+									</a>
+								</Link>
+							</div>
+						</div>
+					))}
+			</div>
+		</div>
+	</section>
+);
+
+export default BlogCardsContainer;

pages/blog/components/BlogHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BlogHeader = () => (
+	<section className="bg-blog-hero bg-cover bg-center w-full mx-auto h-[35vh]">
+		<div className="flex flex-col justify-center items-center text-white bg-black bg-opacity-70 w-full h-full text-center">
+			<h2 className="text-3xl md:text-4xl block font-black uppercase">Blog</h2>
+			<br />
+			<p className="text-md font-">
+				<em>&quot;Read various topics from various bloggers and contributors.&quot;</em>
+			</p>
+		</div>
+	</section>
+);
+
+export default BlogHeader;

pages/blog/index.js

@@ -1,8 +1,48 @@
 import AppLayout from '../../core/layout/AppLayout';
+import BlogCardsContainer from './components/BlogCardsContainer';
+import BlogHeader from './components/BlogHeader';
+
+// Dummy data to represent how data will be represented after API call
+const dummyPostsData = [
+	{
+		id: 1,
+		title: 'Tech Malawi: The Future is now',
+		slug: 'tech-malawi-the-future-is-now',
+		postImage: '/blog-hero-open-book.jpg',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloremque dolore officiisrecusandae ab nam eos explicabo.',
+		body: '',
+		date: '7 August, 2022',
+		tags: ['Tech', 'Malawi'],
+	},
+	{
+		id: 2,
+		title: 'Tech Malawi Community Launches Website',
+		slug: 'tech-malawi-community-launches-website',
+		postImage: '/blog-hero-open-book.jpg',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab nam eos explicabo ab nam eos explicabo ab nam eos explicaboab nam eos explicabo',
+		body: '',
+		date: '6 August, 2022',
+		tags: ['Tech', 'Next.js'],
+	},
+	{
+		id: 3,
+		title: 'The Buga of Malawian Tech',
+		slug: 'the-buga-of-malawian-tech',
+		postImage: '/blog-hero-open-book.jpg',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloremque dolore officiisrecusandae ab nam eos explicabo.',
+		body: '',
+		date: '4 August, 2022',
+		tags: ['Tech', 'Innovation'],
+	},
+];
 
 const Blog = () => (
 	<AppLayout>
-		<h4>Blog</h4>
+		<BlogHeader />
+		<BlogCardsContainer dummyPostsData={dummyPostsData} />
 	</AppLayout>
 );
 

tailwind.config.js

@@ -14,6 +14,10 @@ module.exports = {
 				'malawi-red': '#DA0037',
 				'malawi-white': '#FFFFFF',
 			},
+
+			backgroundImage: {
+				'blog-hero': "url('/blog-hero-open-book.jpg')",
+			},
 		},
 	},
 	plugins: [],