page blogs title and head and list article & change footer hover mode
This commit is contained in:
Ehsan
@@ -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
|
||||||
@@ -193,6 +193,26 @@ body {
|
|||||||
color: #EFEFEF;
|
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 {
|
@keyframes openx {
|
||||||
0% {
|
0% {
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|||||||
+1
-1
@@ -10,7 +10,7 @@ export default function RootLayout({ children }) {
|
|||||||
return (
|
return (
|
||||||
<html lang="fa" dir='rtl'>
|
<html lang="fa" dir='rtl'>
|
||||||
<ThemeRegistry>
|
<ThemeRegistry>
|
||||||
<body className='bg-[#F5F5F5]'>{children}</body>
|
<body className='bg-[#FAFAFA]'>{children}</body>
|
||||||
</ThemeRegistry>
|
</ThemeRegistry>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import Layout from '@/components/layout';
|
import Layout from '@/components/layout';
|
||||||
import SpecialtiesPage from '@/components/specialties';
|
import SpecialtiesPage from '@/components/specialties';
|
||||||
|
|
||||||
function Doctors() {
|
function Specialties() {
|
||||||
return (
|
return (
|
||||||
<Layout title='تخصص ها' name='specialties'>
|
<Layout title='تخصص ها' name='specialties'>
|
||||||
<SpecialtiesPage />
|
<SpecialtiesPage />
|
||||||
@@ -9,4 +9,4 @@ function Doctors() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Doctors
|
export default Specialties
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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;
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -9,6 +9,7 @@ import LocationF from "../icons/LocationF";
|
|||||||
import CalendarAddF from "../icons/CalendarAddF";
|
import CalendarAddF from "../icons/CalendarAddF";
|
||||||
import StethoscopeF from "../icons/StethoscopeF";
|
import StethoscopeF from "../icons/StethoscopeF";
|
||||||
import Logo from "@/app/component/Logo";
|
import Logo from "@/app/component/Logo";
|
||||||
|
import { Button } from "@mui/material";
|
||||||
|
|
||||||
const socialMedias = [
|
const socialMedias = [
|
||||||
<Linkedin />,
|
<Linkedin />,
|
||||||
@@ -34,7 +35,11 @@ function Footer() {
|
|||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-center gap-[100px]">
|
<div className="flex items-center justify-center gap-[100px]">
|
||||||
{head.map((item, idx) => (
|
{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}
|
{item.icon}
|
||||||
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
|
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ function Layout({ children, title, name }) {
|
|||||||
{children}
|
{children}
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</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'>
|
<div className='padding-responsive'>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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": "۱۰ دقیقه"
|
||||||
|
}
|
||||||
|
]
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Reference in New Issue
Block a user