forked from WebXDAO/WebXDAO.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update Blog page (WebXDAO#479)
* updating blog page * adding scrollable cards * removing unnecessary code Signed-off-by: Tushar Saini <s2sharpit@gmail.com> * removing cursor-pointer from blog cards Signed-off-by: Tushar Saini <s2sharpit@gmail.com> --------- Signed-off-by: Tushar Saini <s2sharpit@gmail.com>
- Loading branch information
Showing
12 changed files
with
264 additions
and
75 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import Image from "next/image"; | ||
import Link from "next/link"; | ||
|
||
async function getData() { | ||
const res = await fetch("https://dev.to/api/articles?username=webxdao"); | ||
// The return value is *not* serialized | ||
// You can return Date, Map, Set, etc. | ||
|
||
// Recommendation: handle errors | ||
if (!res.ok) { | ||
// This will activate the closest `error.js` Error Boundary | ||
throw new Error("Failed to fetch data"); | ||
} | ||
|
||
return res.json(); | ||
} | ||
|
||
export default async function Blog() { | ||
// Initiate dev.to API request | ||
const blogData = getData(); | ||
|
||
// Wait for the promises to resolve | ||
const [dataT] = await Promise.all([blogData]); | ||
|
||
return ( | ||
<section className="mt-20"> | ||
<div className="mx-auto max-w-5xl md:px-8"> | ||
<h1 className="mt-10 text-xl font-bold">Get to know more</h1> | ||
<p className="mx-auto mt-5 max-w-sm text-center md:max-w-xl lg:max-w-3xl"> | ||
Discover the exciting world of blockchain technology as we come together to collaborate | ||
and expand our knowledge. | ||
</p> | ||
</div> | ||
<div className="mt-10 flex flex-wrap justify-center gap-16"> | ||
{dataT.map((curElem: any) => ( | ||
<div className="bg-whie flex max-w-xs flex-col rounded-lg bg-white/5 p-2 shadow-md shadow-purple-400/40 transition-all duration-200 ease-in hover:z-50 hover:shadow-lg hover:shadow-purple-400/60 sm:hover:-translate-y-1"> | ||
<Image | ||
className="w-full rounded-md border" | ||
src={curElem.cover_image} | ||
width={400} | ||
height={250} | ||
alt="" | ||
/> | ||
<div className="grow px-6 py-4"> | ||
<h3 className="mb-4 text-center text-sm font-bold uppercase leading-4 tracking-wider"> | ||
{curElem.title} | ||
</h3> | ||
<p className="text-justify text-sm text-gray-700 dark:text-gray-300"> | ||
{curElem.description} | ||
</p> | ||
</div> | ||
<div className="flex px-6 py-4"> | ||
<Link | ||
href={curElem.url} | ||
target="_blank" | ||
className="w-fit-content font-inter text-14.0418 group mb-0 mr-auto flex items-center gap-6 rounded border-2 border-solid border-black px-4 py-1 text-black transition delay-0 ease-in hover:border-slate-500 hover:bg-slate-500 hover:font-semibold dark:border-white/80 dark:text-white dark:hover:border-slate-500" | ||
> | ||
<Image | ||
src="/Arrow1.png" | ||
alt="arrow" | ||
width={15} | ||
height={15} | ||
className="my-auto flex items-center transition duration-100 ease-in group-hover:invert dark:invert" | ||
/> | ||
<span className="transition duration-100 ease-in group-hover:text-white"> | ||
Read More | ||
</span> | ||
</Link> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</section> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
"use client"; | ||
import Image from "next/image"; | ||
import Link from "next/link"; | ||
import { FaGithub,FaLinkedin,FaTwitter } from "react-icons/fa"; | ||
import pCardData from "./pCardData"; | ||
|
||
export default function PCard() { | ||
return ( | ||
<section className="my-8 md:ml-32"> | ||
<div | ||
className="no-scroll flex select-none gap-8 overflow-x-auto px-6" | ||
> | ||
{pCardData.map((data) => ( | ||
<div className="max-w-[20rem]"> | ||
<div className="relative flex w-80 overflow-hidden rounded-md"> | ||
<Image | ||
src={`/blog/${data.bgImg}.png`} | ||
width={320} | ||
height={420} | ||
alt="" | ||
className="h-[28rem] w-80 rounded-md border" | ||
/> | ||
<div className="absolute bottom-0 flex h-36 w-full items-center justify-center gap-6 rounded-md backdrop-blur"> | ||
<Image | ||
src={""} | ||
width={100} | ||
height={100} | ||
alt="" | ||
className="rounded-full border bg-gray-700" | ||
/> | ||
<div className="text-white"> | ||
<h3 className="font-bold leading-3">{data.name}</h3> | ||
<small className="text-xs font-light">{data.team}</small> | ||
<div className="mt-1 flex gap-4 text-lg"> | ||
<Link href={""}> | ||
<FaGithub /> | ||
</Link> | ||
<Link href={""}> | ||
<FaTwitter /> | ||
</Link> | ||
<Link href={""}> | ||
<FaLinkedin /> | ||
</Link> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="grow px-2 py-4"> | ||
<h3 className="text-sm font-bold"> | ||
{data.title} | ||
</h3> | ||
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">{data.desc}</p> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</section> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
const pCardData = [ | ||
{ | ||
bgImg: "1", | ||
profileImg: "", | ||
name: "Michael Angelo", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Blockchain: Disrupting Industries", | ||
desc: "Explore how blockchain revolutionizes traditional industries.", | ||
link: "", | ||
}, | ||
{ | ||
bgImg: "2", | ||
profileImg: "", | ||
name: "James Bond", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Secure Digital Assets with Blockchain", | ||
desc: "Discover the power of blockchain for securing digital assets.", | ||
link: "", | ||
}, | ||
{ | ||
bgImg: "3", | ||
profileImg: "", | ||
name: "Ron Smith", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Blockchain and Sustainability", | ||
desc: "Learn how blockchain drives positive change for sustainability.", | ||
link: "", | ||
}, | ||
{ | ||
bgImg: "4", | ||
profileImg: "", | ||
name: "Christian Pertti", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Blockchain: Future of Banking", | ||
desc: "Explore how blockchain reshapes banking with DeFi.", | ||
link: "", | ||
}, | ||
{ | ||
bgImg: "5", | ||
profileImg: "", | ||
name: "Chua Chan", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Blockchain in Healthcare", | ||
desc: "Transforming patient data management with blockchain.", | ||
link: "", | ||
}, | ||
{ | ||
bgImg: "6", | ||
profileImg: "", | ||
name: "Avendi Brucell", | ||
team: "WebXDAO Developer", | ||
github: "", | ||
twitter: "", | ||
linkedin: "", | ||
title: "Blockchain in Gaming", | ||
desc: "Powering the next generation of gaming with blockchain.", | ||
link: "", | ||
}, | ||
]; | ||
|
||
export default pCardData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,90 +1,64 @@ | ||
import Image from "next/image"; | ||
// import { Blogs } from '../components/Global' | ||
import Head from "next/head"; | ||
import Star from "@/components/star"; | ||
import { fontGilroy } from "@/lib/fonts"; | ||
import { cn } from "@/lib/utils"; | ||
import Blog from "./Blog"; | ||
import PCard from "./PCard"; | ||
// import { Blogs } from '@/components/Global' | ||
import { Metadata } from "next"; | ||
|
||
export const metadata: Metadata = { | ||
title: "Blog", | ||
}; | ||
|
||
|
||
async function getData() { | ||
const res = await fetch('https://dev.to/api/articles?username=webxdao'); | ||
// The return value is *not* serialized | ||
// You can return Date, Map, Set, etc. | ||
|
||
// Recommendation: handle errors | ||
if (!res.ok) { | ||
// This will activate the closest `error.js` Error Boundary | ||
throw new Error('Failed to fetch data'); | ||
} | ||
|
||
return res.json(); | ||
} | ||
|
||
export default async function BlogPage({ | ||
params: { data }, | ||
}:{ | ||
params: { data: [] }; | ||
}) { | ||
// Initiate dev.to API request | ||
const blogData = getData(); | ||
|
||
// Wait for the promises to resolve | ||
const [dataT] = await Promise.all([blogData]); | ||
export default function BlogPage() { | ||
|
||
return ( | ||
<> | ||
<section className="py-8"> | ||
<div className="container mx-auto max-w-5xl"> | ||
<h1 className="my-2 w-full text-center text-4xl font-bold leading-tight text-white"> | ||
Blogs | ||
<section className="w-full overflow-hidden py-8"> | ||
<div className="container mx-auto flex max-w-5xl flex-row flex-wrap justify-around lg:flex-nowrap "> | ||
<h1 | ||
className={cn( | ||
"w-max-content my-2 w-full text-center text-7xl font-semibold leading-tight text-slate-900 dark:text-white lg:text-left", | ||
fontGilroy.className | ||
)} | ||
> | ||
Dev Blog | ||
</h1> | ||
<div className="mt-9 hidden gap-20 lg:flex"> | ||
<div className="my-auto flex"> | ||
<Star height={40} width={40} /> | ||
</div> | ||
<Star height={90} width={90} /> | ||
</div> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="2" className="-mx-52 mb-11 mt-auto hidden lg:flex"> | ||
<line x1="0" y1="0" x2="1000" y2="0" strokeWidth="2" className="stroke-black dark:stroke-white"/> | ||
</svg> | ||
</div> | ||
<div className="ml-4 mr-1 mt-6 flex justify-center text-lg font-light leading-tight text-black dark:text-white sm:text-center md:text-xl lg:text-left "> | ||
Our primary emphasis is on cutting-edge platforms in the industry, ensuring that{" "} | ||
<br className="max-md:hidden" /> | ||
you are equipped with the necessary skills for your future endeavors. | ||
</div> | ||
</section> | ||
|
||
<section> | ||
<div className="z-2 relative mx-0 my-7 flex grid-cols-1 flex-wrap items-center justify-center"> | ||
|
||
{dataT.map((curElem: any) => { | ||
return ( | ||
<div | ||
className="grid-items z-2 justify-conten group relative m-7 flex h-min w-min items-center rounded-2xl bg-white/5 shadow-2xl backdrop-blur-md" | ||
key={curElem.id} | ||
> | ||
<div className="relative flex h-80 w-[17.5rem] flex-col items-center justify-center opacity-70 hover:opacity-100 sm:w-[15.5rem] md:w-[19rem] lg:w-[27rem]"> | ||
<div className="relative w-4/5 truncate rounded-2xl border-8 border-solid border-black/25 duration-500 group-hover:-translate-y-6"> | ||
<Image | ||
src={curElem.cover_image} | ||
width={400} | ||
height={250} | ||
alt="blog image" | ||
className="relative left-0 top-0 h-full w-full object-cover" | ||
/> | ||
</div> | ||
<div className="relative m-0 flex-wrap items-center justify-center text-center"> | ||
<h3 className="mx-2.5 mb-2.5 mt-5 text-center text-sm font-medium uppercase leading-4 tracking-wider text-white duration-500 group-hover:-translate-y-6"> | ||
<b>{curElem.title}</b> | ||
<br></br> | ||
<br></br> | ||
<span className="text-xs font-light lowercase">{curElem.description}</span> | ||
<br></br> | ||
<br></br> | ||
<a | ||
href={curElem.url} | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
className="inline-block rounded-md border border-transparent bg-green-500 px-8 py-3 text-center font-medium text-white" | ||
> | ||
<b>Read More</b> | ||
</a> | ||
</h3> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
})} | ||
<PCard /> | ||
|
||
<main className="mx-auto grid max-w-6xl gap-8 px-4"> | ||
<div className="mx-auto max-w-5xl"> | ||
<h1 className="my-10 text-center text-xl font-bold">Categories</h1> | ||
<div className="flex flex-wrap justify-center gap-9 sm:gap-14"> | ||
{["Dapp", "Open Source", "Blockchain", "Community", "Hackathons"].map((name) => ( | ||
<div className="w-40 rounded py-2 text-center shadow-md shadow-purple-400/40"> | ||
{name} | ||
</div> | ||
))} | ||
</div> | ||
</section> | ||
</section> | ||
</div> | ||
{/* @ts-expect-error Async Server Component */} | ||
<Blog /> | ||
</main> | ||
</> | ||
); | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,7 +10,7 @@ export const siteConfig = { | |
}, | ||
{ | ||
title: "Blog", | ||
href: "/", | ||
href: "/blogs", | ||
}, | ||
{ | ||
title: "Projects", | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters