hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page blogs title and head and list article & change footer hover mode

Browse Source
This commit is contained in:
Ehsan
2024-07-12 16:52:16 +03:30
parent c052e2d55e
commit 7b825e52c0
26 changed files with 263 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blogs/page.js
+12
View File
@@ -0,0 +1,12 @@
import BlogsPage from '@/components/blogs'
import Layout from '@/components/layout'
function Blogs() {
return (
<Layout title='وبلاگ ها' name='blogs'>
<BlogsPage />
</Layout>
)
}
export default Blogs
app/globals.css
+20
View File
@@ -193,6 +193,26 @@ body {
color: #EFEFEF;
}
.cover-head-blogs {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.07) 31.47%, rgba(0, 0, 0, 0.31) 59.72%, rgba(0, 0, 0, 0.70) 89.39%);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.cover-head-blogs img {
width: 100%;
}
.cover-head-blogs p {
position: absolute;
bottom: 32px;
right: 24px;
color: #FAFAFA;
font-size: 24px;
font-weight: 700;
}
@keyframes openx {
0% {
width: 0;
app/layout.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default function RootLayout({ children }) {
return (
<html lang="fa" dir='rtl'>
<ThemeRegistry>
<body className='bg-[#F5F5F5]'>{children}</body>
<body className='bg-[#FAFAFA]'>{children}</body>
</ThemeRegistry>
</html>
);
app/specialties/page.js
+2 -2
View File
@@ -1,7 +1,7 @@
import Layout from '@/components/layout';
import SpecialtiesPage from '@/components/specialties';
function Doctors() {
function Specialties() {
return (
<Layout title='تخصص ها' name='specialties'>
<SpecialtiesPage />
@@ -9,4 +9,4 @@ function Doctors() {
)
}
export default Doctors
export default Specialties
components/blogs/Head.js
+47
View File
@@ -0,0 +1,47 @@
import Image from 'next/image'
import React from 'react'
function Head() {
return (
<div className='flex mt-[40px] items-center justify-center gap-[24px]'>
<div className='cover-head-blogs'>
<Image
src='/assets/images/head-blogs-1.png'
width={600}
height={424}
/>
<p>روش های خانگی محافظت از پوست در تابستان</p>
</div>
<div className='flex flex-col items-center justify-center gap-[24px]'>
<div className='flex items-center justify-center gap-[24px]'>
<div className='cover-head-blogs'>
<Image
src='/assets/images/head-blogs-2.png'
width={600}
height={424}
/>
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
</div>
<div className='cover-head-blogs'>
<Image
src='/assets/images/head-blogs-3.png'
width={600}
height={424}
/>
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
</div>
</div>
<div className='cover-head-blogs'>
<Image
src='/assets/images/head-blogs-4.png'
width={600}
height={424}
/>
<p>تغذیه مناسب برای کاهش فشار خون</p>
</div>
</div>
</div>
)
}
export default Head
components/blogs/index.js
+15
View File
@@ -0,0 +1,15 @@
import Head from "./Head";
import Title from "./title";
import LatestArticles from "./latestArticles";
function BlogsPage() {
return (
<div className="padding-responsive pt-[168px]">
<Title />
<Head />
<LatestArticles />
</div>
)
}
export default BlogsPage
components/blogs/latestArticles/Article.js
+28
View File
@@ -0,0 +1,28 @@
import Image from 'next/image'
import Link from 'next/link';
function Article({ data }) {
return (
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
<Link href={`/blog/${data.id}`}>
<Image
src={data.src}
alt="article-img"
height={217}
width={392}
/>
</Link>
<div className='p-[16px]'>
<Link href={`/blog/${data.id}`}>
<p className='text-[#3B3B3B] mb-[16px] text-[16px] font-bold'>{data.title}</p>
</Link>
<div className='flex items-center justify-start gap-[35px]'>
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
</div>
</div>
</li>
)
}
export default Article;
components/blogs/latestArticles/index.js
+20
View File
@@ -0,0 +1,20 @@
import articles from '@/data/articles.json';
import Article from "./Article";
function LatestArticles() {
return (
<div>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[24px]">جدیدترین مقاله ها</p>
<ul className="grid grid-cols-3 gap-6">
{articles.map(item => (
<Article
data={item}
key={item.id}
/>
))}
</ul>
</div>
)
}
export default LatestArticles
components/blogs/title/ItemTitle.js
+20
View File
@@ -0,0 +1,20 @@
import { Button } from "@mui/material"
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
return (
<Button
className={`
!py-2 !px-4 !shadow-none !rounded-[8px]
${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
`}
onClick={() => setActiveBtn(idx)}
variant="contained"
color="secondary"
>
{name}
</Button>
)
}
export default ItemTitle
components/blogs/title/index.js
+26
View File
@@ -0,0 +1,26 @@
'use client';
import { useState } from "react";
import ItemTitle from "./ItemTitle";
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
function Title() {
const [activeBtn, setActiveBtn] = useState(0);
return (
<div className="flex items-center justify-start gap-4">
{listTitle.map((name, idx) => (
<ItemTitle
setActiveBtn={setActiveBtn}
activeBtn={activeBtn}
name={name}
idx={idx}
key={idx}
/>
))}
</div>
)
}
export default Title
components/layout/Footer.js
+6 -1
View File
@@ -9,6 +9,7 @@ import LocationF from "../icons/LocationF";
import CalendarAddF from "../icons/CalendarAddF";
import StethoscopeF from "../icons/StethoscopeF";
import Logo from "@/app/component/Logo";
import { Button } from "@mui/material";
const socialMedias = [
<Linkedin />,
@@ -34,7 +35,11 @@ function Footer() {
<div>
<div className="flex items-center justify-center gap-[100px]">
{head.map((item, idx) => (
<div key={idx} className="flex items-center justify-start gap-1">
<div
key={idx}
className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] hover:transition-all
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-transparent hover:bg-none hover:border-[#FDBD9F]"
>
{item.icon}
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
</div>
components/layout/index.js
+1 -1
View File
@@ -12,7 +12,7 @@ function Layout({ children, title, name }) {
{children}
</section>
</main>
<footer className="bg-[#F5F5F5] mt-[100px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
<footer className="bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
<div className='padding-responsive'>
<Footer />
</div>
data/articles.json
+65
View File
@@ -0,0 +1,65 @@
[
{
"id": 1,
"src": "/assets/images/article-1.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 2,
"src": "/assets/images/article-2.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 3,
"src": "/assets/images/article-3.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 4,
"src": "/assets/images/article-4.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 5,
"src": "/assets/images/article-5.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 6,
"src": "/assets/images/article-6.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 7,
"src": "/assets/images/article-7.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 8,
"src": "/assets/images/article-8.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
},
{
"id": 9,
"src": "/assets/images/article-9.png",
"title": "نشانه های کمبود ویتامین ب در زنان",
"date_of_release": "۱۴ تیر ۱۴۰۳",
"time": "۱۰ دقیقه"
}
]
public/assets/images/article-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

public/assets/images/article-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

public/assets/images/article-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

public/assets/images/article-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

public/assets/images/article-5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

public/assets/images/article-6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

public/assets/images/article-7.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

public/assets/images/article-8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

public/assets/images/article-9.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

public/assets/images/head-blogs-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 KiB

public/assets/images/head-blogs-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

public/assets/images/head-blogs-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

public/assets/images/head-blogs-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB