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

blog FilteredPosts is responsive now

Browse Source
This commit is contained in:
parsa aghaei 2024-10-02 16:42:20 +03:30
parent d5f6b3ba5a
commit 98ec9ff4fe
2 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import Image from "next/image";
export default function FilteredPosts() { export default function FilteredPosts() {
return ( return (
<div className="flex flex-col gap-10"> <div className="flex max-w-[95%] flex-wrap gap-10 mb-5">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default"> <h2 className="text-[36px] font-[700] text-blog-text-default">
Popular Popular
@ -12,46 +12,46 @@ export default function FilteredPosts() {
</p> </p>
</div> </div>
<div className="flex w-full justify-between gap-10"> <div className="flex w-full flex-wrap justify-center gap-5">
<div className="flex w-[45%] flex-wrap justify-between gap-5"> <div className="flex w-full flex-wrap justify-center gap-5 lg:w-[37%]">
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"> <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-[16px] font-[400] text-blog-text-passive"> <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
FREELANCING FREELANCING
</h2> </h2>
<h1 className="text-[18px] font-[600] text-blog-text-default"> <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
Affiliate Systems Suck, So We Rolled Our Own Affiliate Systems Suck, So We Rolled Our Own
</h1> </h1>
</div> </div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"> <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-[16px] font-[400] text-blog-text-passive"> <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
RESOURCE RESOURCE
</h2> </h2>
<h1 className="text-[18px] font-[600] text-blog-text-hover"> <h1 className="text-[15px] font-[600] text-blog-text-hover sm:text-[18px]">
How not to design web forms How not to design web forms
</h1> </h1>
</div> </div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"> <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-[16px] font-[400] text-blog-text-passive"> <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
DESIGN PROCESS DESIGN PROCESS
</h2> </h2>
<h1 className="text-[18px] font-[600] text-blog-text-default"> <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
B2B Lead Generation – Tips and Strategies for 2018 B2B Lead Generation – Tips and Strategies for 2018
</h1> </h1>
</div> </div>
<div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"> <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-[16px] font-[400] text-blog-text-passive"> <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
INSPIRATION INSPIRATION
</h2> </h2>
<h1 className="text-[18px] font-[600] text-blog-text-default"> <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
8 Best WordPress Ecommerce Plugins 8 Best WordPress Ecommerce Plugins
</h1> </h1>
</div> </div>
</div> </div>
<div className="relative flex w-[55%] items-center overflow-hidden rounded-md"> <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] lg:h-auto lg:w-[60%]">
<Image <Image
src={"/images/blog/posts/2.jpg"} src={"/images/blog/posts/2.jpg"}
alt="parsaaghayi's blog logo" alt="parsaaghayi's blog logo"
@ -61,17 +61,25 @@ export default function FilteredPosts() {
<div className="absolute flex flex-wrap gap-5 p-10"> <div className="absolute flex flex-wrap gap-5 p-10">
<div className="z-10 flex w-full items-center justify-start gap-2"> <div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-white">BY</p> <p className="text-[15px] font-[400] text-white sm:text-[16px]">
<h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2> BY
<p className="text-[16px] font-[400] text-white">IN</p> </p>
<h2 className="text-[16px] font-[400] text-white">CATEGORY</h2> <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> </div>
<h1 className="z-10 w-full text-[28px] font-[600] text-white"> <h1 className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]">
How to accept rejection gracefully — and use it to grow How to accept rejection gracefully — and use it to grow
</h1> </h1>
<p className="z-10 w-full text-[16px] font-[400] text-white"> <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 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. guide to why you should be doing it — and how to get started.
</p> </p>

4
src/app/(routes)/blog/page.tsx
View File

@ -8,8 +8,8 @@ export default async function Blog() {
<div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]"> <div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
<New /> <New />
<ReadingList /> <ReadingList />
{/* <FilteredPosts /> <FilteredPosts />
<Random /> */} {/* <Random /> */}
</div> </div>
); );
} }