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

blog readinglist updated

Browse Source
This commit is contained in:
parsa aghaei 2024-10-02 16:27:44 +03:30
parent a0e2eb2bf4
commit 162100b1a4
4 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(routes)/blog/components/home/new/new.tsx
View File

@ -3,7 +3,7 @@ import Image from "next/image";
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 md:h-auto md:w-[60%]">
<div className="relative flex h-[300px] sm:h-[400px] w-full flex-col justify-center overflow-hidden rounded-md border md:h-auto md:w-[60%]">
<Image
src={"/images/blog/posts/1.jpg"}
alt="parsaaghayi's blog logo"
@ -38,8 +38,8 @@ export default function New() {
</div>
</div>
<div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-10">
<div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:pb-6 xl:pb-10">
<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:pb-6 xl:pb-10 lg:gap-8">
<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

19
src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
View File

@ -2,7 +2,7 @@ import Image from "next/image";
export default function ReadingList() {
return (
<div className="flex flex-col gap-10">
<div className="mb-5 flex w-full flex-wrap gap-10 max-w-[95%]">
<div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default">
ReadingList
@ -11,8 +11,9 @@ export default function ReadingList() {
View all
</p>
</div>
<div className="flex items-center justify-between">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="flex w-full flex-wrap justify-center items-center gap-5">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-1.jpg"}
@ -26,7 +27,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-2.jpg"}
@ -40,7 +41,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-3.jpg"}
@ -52,7 +53,7 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
</div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-4.jpg"}
@ -66,7 +67,7 @@ export default function ReadingList() {
</h3>
</div>
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
<div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-5.jpg"}
@ -80,14 +81,14 @@ export default function ReadingList() {
</h3>
</div>
<div className="center-center flex h-full w-[80px] rounded-md bg-white">
{/* <div className="center-center hidden h-full w-[80px] rounded-md bg-white lg:flex">
<Image
src={"/images/blog/icons/right-arrow.svg"}
height={32}
width={32}
alt="right-arrow icon"
/>
</div>
</div> */}
</div>
</div>
);

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

@ -23,7 +23,7 @@ export default function RootLayout({
<Header />
<div className="main blog relative my-[100px] md:my-[150px] flex w-full flex-wrap justify-center overflow-hidden">
<div className="main blog relative my-[100px] flex w-full flex-wrap justify-center overflow-hidden md:my-[150px]">
{children}
</div>

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

@ -5,10 +5,10 @@ import ReadingList from "./components/home/reading-lists/readingList";
export default async function Blog() {
return (
<div className="flex w-[1280px] items-center flex-col gap-[150px]">
<div className="flex w-[1280px] items-center flex-col gap-[50px] md:gap-[100px]">
<New />
{/* <ReadingList />
<FilteredPosts />
<ReadingList />
{/* <FilteredPosts />
<Random /> */}
</div>
);