parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog FilteredPosts is linked now

Browse Source
This commit is contained in:
parsa aghaei 2024-10-07 15:06:33 +03:30
parent d167019d76
commit b705de169f
1 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
View File

@ -1,8 +1,9 @@
import Image from "next/image";
import Link from "next/link";
export default function FilteredPosts() {
return (
<div className="flex max-w-[95%] flex-wrap gap-10 mb-5">
<div className="mb-5 flex max-w-[95%] flex-wrap gap-10">
<div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default">
Popular
@ -15,39 +16,53 @@ export default function FilteredPosts() {
<div className="flex w-full flex-wrap justify-center gap-5">
<div className="flex w-full flex-wrap justify-center gap-5 lg:w-[37%]">
<div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
<h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
<h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
FREELANCING
</h2>
<h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
</h3>
<Link
href={"/blog/posts/Affiliate Systems Suck, So We Rolled Our Own"}
>
<h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
Affiliate Systems Suck, So We Rolled Our Own
</h1>
</h2>
</Link>
</div>
<div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
<h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
<h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
RESOURCE
</h2>
<h1 className="text-[15px] font-[600] text-blog-text-hover sm:text-[18px]">
</h3>
<Link href={"/blog/posts/How not to design web forms"}>
<h2 className="text-[15px] font-[600] text-blog-text-hover sm:text-[18px]">
How not to design web forms
</h1>
</h2>
</Link>
</div>
<div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
<h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
<h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
DESIGN PROCESS
</h2>
<h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
</h3>
<Link
href={
"/blog/posts/B2B Lead Generation – Tips and Strategies for 2018"
}
>
<h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
B2B Lead Generation – Tips and Strategies for 2018
</h1>
</h2>
</Link>
</div>
<div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
<h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
<h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
INSPIRATION
</h2>
<h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
</h3>
<Link href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}>
<h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
8 Best WordPress Ecommerce Plugins
</h1>
</h2>
</Link>
</div>
</div>
@ -75,9 +90,14 @@ export default function FilteredPosts() {
</h2>
</div>
<h1 className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]">
<Link
href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
className="z-10 w-full"
>
<h2 className="text-[18px] font-[600] text-white sm:text-[28px]">
How to accept rejection gracefully — and use it to grow
</h1>
</h2>
</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