diff --git a/app/blogs/page.js b/app/blogs/page.js new file mode 100644 index 0000000..6a82c98 --- /dev/null +++ b/app/blogs/page.js @@ -0,0 +1,12 @@ +import BlogsPage from '@/components/blogs' +import Layout from '@/components/layout' + +function Blogs() { + return ( + + + + ) +} + +export default Blogs \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index ecd3c15..edde379 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; diff --git a/app/layout.js b/app/layout.js index 470b948..461ccec 100644 --- a/app/layout.js +++ b/app/layout.js @@ -10,7 +10,7 @@ export default function RootLayout({ children }) { return ( - {children} + {children} ); diff --git a/app/specialties/page.js b/app/specialties/page.js index 3b37acb..99db238 100644 --- a/app/specialties/page.js +++ b/app/specialties/page.js @@ -1,7 +1,7 @@ import Layout from '@/components/layout'; import SpecialtiesPage from '@/components/specialties'; -function Doctors() { +function Specialties() { return ( @@ -9,4 +9,4 @@ function Doctors() { ) } -export default Doctors \ No newline at end of file +export default Specialties \ No newline at end of file diff --git a/components/blogs/Head.js b/components/blogs/Head.js new file mode 100644 index 0000000..e1c14b7 --- /dev/null +++ b/components/blogs/Head.js @@ -0,0 +1,47 @@ +import Image from 'next/image' +import React from 'react' + +function Head() { + return ( +
+
+ +

روش های خانگی محافظت از پوست در تابستان

+
+
+
+
+ +

فواید نوشیدن آب برای سلامتی

+
+
+ +

راهکارهای ساده برای درمان سر درد

+
+
+
+ +

تغذیه مناسب برای کاهش فشار خون

+
+
+
+ ) +} + +export default Head \ No newline at end of file diff --git a/components/blogs/index.js b/components/blogs/index.js new file mode 100644 index 0000000..1e82359 --- /dev/null +++ b/components/blogs/index.js @@ -0,0 +1,15 @@ +import Head from "./Head"; +import Title from "./title"; +import LatestArticles from "./latestArticles"; + +function BlogsPage() { + return ( +
+ + <Head /> + <LatestArticles /> + </div> + ) +} + +export default BlogsPage \ No newline at end of file diff --git a/components/blogs/latestArticles/Article.js b/components/blogs/latestArticles/Article.js new file mode 100644 index 0000000..b6854b1 --- /dev/null +++ b/components/blogs/latestArticles/Article.js @@ -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; \ No newline at end of file diff --git a/components/blogs/latestArticles/index.js b/components/blogs/latestArticles/index.js new file mode 100644 index 0000000..a39cf5c --- /dev/null +++ b/components/blogs/latestArticles/index.js @@ -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 \ No newline at end of file diff --git a/components/blogs/title/ItemTitle.js b/components/blogs/title/ItemTitle.js new file mode 100644 index 0000000..45633c5 --- /dev/null +++ b/components/blogs/title/ItemTitle.js @@ -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 \ No newline at end of file diff --git a/components/blogs/title/index.js b/components/blogs/title/index.js new file mode 100644 index 0000000..8153ac2 --- /dev/null +++ b/components/blogs/title/index.js @@ -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 \ No newline at end of file diff --git a/components/layout/Footer.js b/components/layout/Footer.js index 5f7973c..325a4d5 100644 --- a/components/layout/Footer.js +++ b/components/layout/Footer.js @@ -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> diff --git a/components/layout/index.js b/components/layout/index.js index 0e97f63..ac1309a 100644 --- a/components/layout/index.js +++ b/components/layout/index.js @@ -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> diff --git a/data/articles.json b/data/articles.json new file mode 100644 index 0000000..4fb70b9 --- /dev/null +++ b/data/articles.json @@ -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": "۱۰ دقیقه" + } +] \ No newline at end of file diff --git a/public/assets/images/article-1.png b/public/assets/images/article-1.png new file mode 100644 index 0000000..dacc196 Binary files /dev/null and b/public/assets/images/article-1.png differ diff --git a/public/assets/images/article-2.png b/public/assets/images/article-2.png new file mode 100644 index 0000000..8f77d78 Binary files /dev/null and b/public/assets/images/article-2.png differ diff --git a/public/assets/images/article-3.png b/public/assets/images/article-3.png new file mode 100644 index 0000000..d9a7f01 Binary files /dev/null and b/public/assets/images/article-3.png differ diff --git a/public/assets/images/article-4.png b/public/assets/images/article-4.png new file mode 100644 index 0000000..e6cab56 Binary files /dev/null and b/public/assets/images/article-4.png differ diff --git a/public/assets/images/article-5.png b/public/assets/images/article-5.png new file mode 100644 index 0000000..9868994 Binary files /dev/null and b/public/assets/images/article-5.png differ diff --git a/public/assets/images/article-6.png b/public/assets/images/article-6.png new file mode 100644 index 0000000..a712412 Binary files /dev/null and b/public/assets/images/article-6.png differ diff --git a/public/assets/images/article-7.png b/public/assets/images/article-7.png new file mode 100644 index 0000000..b44ef06 Binary files /dev/null and b/public/assets/images/article-7.png differ diff --git a/public/assets/images/article-8.png b/public/assets/images/article-8.png new file mode 100644 index 0000000..86a0a96 Binary files /dev/null and b/public/assets/images/article-8.png differ diff --git a/public/assets/images/article-9.png b/public/assets/images/article-9.png new file mode 100644 index 0000000..f6fb9d8 Binary files /dev/null and b/public/assets/images/article-9.png differ diff --git a/public/assets/images/head-blogs-1.png b/public/assets/images/head-blogs-1.png new file mode 100644 index 0000000..4d19b5b Binary files /dev/null and b/public/assets/images/head-blogs-1.png differ diff --git a/public/assets/images/head-blogs-2.png b/public/assets/images/head-blogs-2.png new file mode 100644 index 0000000..dc9fa2d Binary files /dev/null and b/public/assets/images/head-blogs-2.png differ diff --git a/public/assets/images/head-blogs-3.png b/public/assets/images/head-blogs-3.png new file mode 100644 index 0000000..a9f94ff Binary files /dev/null and b/public/assets/images/head-blogs-3.png differ diff --git a/public/assets/images/head-blogs-4.png b/public/assets/images/head-blogs-4.png new file mode 100644 index 0000000..7d1189e Binary files /dev/null and b/public/assets/images/head-blogs-4.png differ