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

blog new responsived now

Browse Source
This commit is contained in:
parsa aghaei 2024-10-02 16:06:28 +03:30
parent 72767aadae
commit a0e2eb2bf4
4 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import React from "react";
export default function Footer() {
return (
<div className="absolute bottom-0 flex w-full items-center justify-around bg-white py-5">
<div className="absolute bottom-0 flex w-full flex-wrap items-center justify-around bg-white py-5">
<Image
src={"/images/blog/logo/logo-no-background.png"}
width={200}

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

@ -2,8 +2,8 @@ import Image from "next/image";
export default function New() {
return (
<div className="flex w-full flex-wrap justify-between gap-5">
<div className="relative flex w-[60%] flex-col overflow-hidden rounded-md border">
<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%]">
<Image
src={"/images/blog/posts/1.jpg"}
alt="parsaaghayi's blog logo"
@ -13,25 +13,33 @@ export default function New() {
<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-[16px] font-[400] text-white">BY</p>
<h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2>
<p className="text-[16px] font-[400] text-white">IN</p>
<h2 className="text-[16px] font-[400] text-white">CATEGORY</h2>
<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>
<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
</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
guide to why you should be doing it — and how to get started.
</p>
</div>
</div>
<div className="flex w-[35%] flex-col gap-10">
<div className="flex w-full items-center justify-between border-b-2 pb-10">
<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">
<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

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

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

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

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