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

blog random is reponsive now

Browse Source
This commit is contained in:
parsa aghaei 2024-10-02 16:57:00 +03:30
parent 98ec9ff4fe
commit 7e243fdd4d
2 changed files with 78 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/app/(routes)/blog/components/home/random/random.tsx
View File

@ -2,14 +2,14 @@ import Image from "next/image";
export default function Random() {
return (
<div className="flex flex-col gap-10">
<div className="mb-10 flex w-full max-w-[90%] flex-wrap gap-10">
<div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default">
Random
</h2>
</div>
<div className="flex w-full flex-wrap justify-center gap-10">
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/2.jpg"}
width={580}
@ -17,17 +17,25 @@ export default function Random() {
alt="post title 2"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
RESOURCE
</h2>
<div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
<div className="flex w-full">
<p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
BY
</p>
<h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</div>
<div className="flex w-full">
<p className="me-2 text-[16px] font-[600] text-blog-text-passive">
IN
</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
RESOURCE
</h2>
</div>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
<h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">
@ -35,7 +43,7 @@ export default function Random() {
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}
@ -43,17 +51,25 @@ export default function Random() {
alt="post title 3"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
<div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
<div className="flex w-full">
<p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
BY
</p>
<h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</div>
<div className="flex w-full">
<p className="me-2 text-[16px] font-[600] text-blog-text-passive">
IN
</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
</div>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
<h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">
@ -61,7 +77,7 @@ export default function Random() {
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}
@ -69,17 +85,25 @@ export default function Random() {
alt="post title 3"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
<div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
<div className="flex w-full">
<p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
BY
</p>
<h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</div>
<div className="flex w-full">
<p className="me-2 text-[16px] font-[600] text-blog-text-passive">
IN
</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
</div>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
<h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">
@ -87,7 +111,7 @@ export default function Random() {
guide to why you should be doing it — and how to get started.
</p>
</div>
<div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
<Image
src={"/images/blog/posts/3.jpg"}
width={580}
@ -95,17 +119,25 @@ export default function Random() {
alt="post title 3"
className="w-full rounded-lg"
/>
<div className="z-10 flex w-full items-center justify-start gap-2">
<p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
TOMAS LAURINAVICIUS
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
<div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
<div className="flex w-full">
<p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
BY
</p>
<h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</div>
<div className="flex w-full">
<p className="me-2 text-[16px] font-[600] text-blog-text-passive">
IN
</p>
<h2 className="text-[16px] font-[400] text-blog-text-default">
ANNOUNCEMENTS
</h2>
</div>
</div>
<h1 className="text-[28px] font-[600] text-blog-text-default">
<h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
How to Fix Error 404 Not Found on Your WordPress Site
</h1>
<p className="text-[16px] font-[400] text-blog-text-passive">

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

@ -9,7 +9,7 @@ export default async function Blog() {
<New />
<ReadingList />
<FilteredPosts />
{/* <Random /> */}
<Random />
</div>
);
}