110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
|
||
export default function New() {
|
||
return (
|
||
<div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
|
||
<div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:h-auto md:w-[60%]">
|
||
<Image
|
||
src={"/images/blog/posts/1.jpg"}
|
||
alt="parsaaghayi's blog logo"
|
||
fill={true}
|
||
/>
|
||
<div className="absolute z-[1] h-full w-full bg-blog-purple opacity-80"></div>
|
||
|
||
<div className="absolute flex flex-wrap gap-5 p-10">
|
||
<div className="z-10 flex w-full items-center justify-start gap-2">
|
||
<p className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||
BY
|
||
</p>
|
||
<h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||
AUTHOR NAME
|
||
</h2>
|
||
<p className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||
IN
|
||
</p>
|
||
<h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||
CATEGORY
|
||
</h2>
|
||
</div>
|
||
|
||
<Link
|
||
href={"/blog/posts/Our 15 favorite websites from August 2018"}
|
||
className="z-10"
|
||
>
|
||
<h1 className="w-full text-[18px] font-[600] text-white sm:text-[28px]">
|
||
How to accept rejection gracefully — and use it to grow
|
||
</h1>
|
||
</Link>
|
||
|
||
<p className="z-10 w-full text-[14px] font-[400] text-white sm:text-[16px]">
|
||
User research is the reality check every project needs. Here’s our
|
||
guide to why you should be doing it — and how to get started.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-5">
|
||
<div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:gap-8 lg:pb-6 xl:pb-10">
|
||
<h2 className="text-[24px] font-[700] text-blog-text-default">New</h2>
|
||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||
View all new
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
|
||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||
SEP 04 2018
|
||
</p>
|
||
<Link href={"/blog/posts/Our 15 favorite websites from August 2018"}>
|
||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||
Our 15 favorite websites from August 2018
|
||
</h3>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
|
||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||
SEP 04 2018
|
||
</p>
|
||
<Link href={"/blog/posts/The beginners guide to user research"}>
|
||
<h3 className="text-[16px] font-[600] text-blog-text-hover">
|
||
The beginners guide to user research
|
||
</h3>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
|
||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||
SEP 04 2018
|
||
</p>
|
||
<Link
|
||
href={
|
||
"/blog/posts/Web page layout 101: website anatomy every designer needs to learn"
|
||
}
|
||
>
|
||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||
Web page layout 101: website anatomy every designer needs to learn
|
||
</h3>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
|
||
<p className="text-[16px] font-[400] text-blog-text-passive">
|
||
SEP 04 2018
|
||
</p>
|
||
<Link
|
||
href={
|
||
"/blog/posts/10 essential sections to a high-converting landing page"
|
||
}
|
||
>
|
||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||
10 essential sections to a high-converting landing page
|
||
</h3>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|