Skip to content

chore: Blog Section #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Xavier-Charles wants to merge 2 commits into
base: dev
Choose a base branch
from
Draft

chore: Blog Section #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0160c6c
create blog section
Xavier-Charles Jan 23, 2024
efa6025
Add blog section to home
Xavier-Charles Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions src/components/home/Blog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { Div, Section, Title } from "../../shared";

const posts = [
{
id: 1,
title: "Boost your conversion rate",
href: "#",
description:
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
imageUrl:
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80",
date: "Mar 16, 2020",
datetime: "2020-03-16",
category: { title: "Marketing", href: "#" },
author: {
name: "Michael Foster",
role: "Co-Founder / CTO",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
{
id: 2,
title: "Boost your conversion rate",
href: "#",
description:
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
imageUrl:
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80",
date: "Mar 16, 2020",
datetime: "2020-03-16",
category: { title: "Marketing", href: "#" },
author: {
name: "Michael Foster",
role: "Co-Founder / CTO",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
{
id: 3,
title: "Boost your conversion rate",
href: "#",
description:
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
imageUrl:
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80",
date: "Mar 16, 2020",
datetime: "2020-03-16",
category: { title: "Marketing", href: "#" },
author: {
name: "Michael Foster",
role: "Co-Founder / CTO",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
];

export default function Example() {
return (
<Section>
<Div className="pb-48">
<div>
<div className="flex justify-center w-full mb-6">
<Title className="">From the Blog</Title>
</div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{posts.map((post) => (
<article
key={post.id}
className="flex flex-col items-start justify-between"
>
<div className="relative w-full">
<img
src={post.imageUrl}
alt=""
className="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
/>
<div className="absolute inset-0 rounded-2xl" />
</div>
<div className="max-w-xl">
<div className="mt-8 flex items-center gap-x-4 text-xs text-platinum">
<time dateTime={post.datetime} className="text-gray-500">
{post.date}
</time>
<a
href={post.category.href}
className="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium hover:bg-gray-100"
>
{post.category.title}
</a>
</div>
<div className="group hover:cursor-pointer relative text-platinum">
<h3 className="mt-3 text-lg font-semibold leading-6 group-hover:text-aluminium">
<a href={post.href}>
<span className="absolute inset-0" />
{post.title}
</a>
</h3>
<p className="mt-5 line-clamp-3 text-sm leading-6">
{post.description}
</p>
</div>
<div className="relative mt-8 flex items-center gap-x-4">
<img
src={post.author.imageUrl}
alt=""
className="h-10 w-10 rounded-full bg-gray-100"
/>
<div className="text-sm leading-6 text-platinum">
<p className="font-semibold">
<a href={post.author.href}>
<span className="absolute inset-0" />
{post.author.name}
</a>
</p>
<p className="text-gray-600">{post.author.role}</p>
</div>
</div>
</div>
</article>
))}
</div>
</div>
</div>
</Div>
</Section>
);
}
1 change: 1 addition & 0 deletions src/components/home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export { default as Team } from "./Team";
export { default as FAQ } from "./FAQ";
export { default as Getfeatures } from "./Getfeatures";
export { default as Workflow } from "./WorkflowFrame";
export { default as Blog } from "./Blog";
3 changes: 2 additions & 1 deletion src/containers/HomeContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { Footer, Navbar } from '../components';
import { Hero, Partners, Backers, Team, FAQ, Getfeatures, Workflow } from '../components/home';
import { Hero, Partners, Backers, Team, FAQ, Blog, Getfeatures, Workflow } from '../components/home';

function HomeContainer() {
return (
Expand All @@ -12,6 +12,7 @@ function HomeContainer() {
<Backers />
<Team />
<FAQ />
<Blog />
<Getfeatures />
<Footer />
</>
Expand Down