basic style & add mui and aos & banner style
This commit is contained in:
@@ -1,6 +1,33 @@
|
||||
function HomePage() {
|
||||
return (
|
||||
<div>HomePage</div>
|
||||
<div className="bg-banner-home pt-[120px] min-h-screen !bg-center !bg-no-repeat !bg-cover">
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
+33
-29
@@ -5,36 +5,40 @@ import Link from "next/link";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<div className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] h-20 px-4 py-8 flex justify-between items-center">
|
||||
<div className="flex items-center justify-start gap-[5px]">
|
||||
<Image
|
||||
src='/assets/images/logo.png'
|
||||
width={30}
|
||||
height={30}
|
||||
alt="logo"
|
||||
/>
|
||||
<p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
|
||||
</div>
|
||||
<ul className="flex items-center justify-center gap-10">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className={`
|
||||
${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
|
||||
text-[16px] font-bold
|
||||
`}
|
||||
<div
|
||||
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-[85%] mx-auto"
|
||||
>
|
||||
<div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
|
||||
<div className="flex items-center justify-start gap-[5px]">
|
||||
<Image
|
||||
src='/assets/images/logo.png'
|
||||
width={30}
|
||||
height={30}
|
||||
alt="logo"
|
||||
/>
|
||||
<p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
|
||||
</div>
|
||||
<ul className="flex items-center justify-center gap-10">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
>
|
||||
{nav.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button>
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className={`
|
||||
${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
|
||||
text-[16px] font-medium
|
||||
`}
|
||||
>
|
||||
{nav.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button variant="contained" color="primary">
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ function Layout({ children, title }) {
|
||||
<title>{`${title} | نوبت ۷۲۴`}</title>
|
||||
</head> */}
|
||||
<main className="w-full min-h-screen">
|
||||
<header className="sticky top-0 w-full z-[60]">
|
||||
<header className="w-full fixed top-10 right-0">
|
||||
<Header />
|
||||
</header>
|
||||
<section>
|
||||
|
||||
Reference in New Issue
Block a user