design title and footer and change mui
This commit is contained in:
Ehsan
@@ -142,4 +142,30 @@ body {
|
||||
100% {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-responsive {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.padding-responsive {
|
||||
padding-left: 52px;
|
||||
padding-right: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.padding-responsive {
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.padding-responsive {
|
||||
padding-left: 108px;
|
||||
padding-right: 108px;
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -26,8 +26,8 @@ const theme = createTheme({
|
||||
contrastText: "#EFEFEF",
|
||||
},
|
||||
secondary: {
|
||||
main: "#2F7BC6",
|
||||
contrastText: "#FFF",
|
||||
main: "#FAFAFA",
|
||||
contrastText: "#616161",
|
||||
},
|
||||
success: {
|
||||
main: "#FFB800",
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { frequentSearches } from "@/constans"
|
||||
import { Button } from "@mui/material"
|
||||
|
||||
function FrequentSearches() {
|
||||
return (
|
||||
<div className="flex mt-3 items-center justify-center gap-4">
|
||||
<p className="text-[#2F2F2F] text-[14px] font-normal">جستجوهای پر تکرار:</p>
|
||||
<ul className="flex items-center justify-center gap-[14px]">
|
||||
{frequentSearches.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
|
||||
>{item}</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FrequentSearches
|
||||
+18
-27
@@ -1,32 +1,23 @@
|
||||
import AText from "../icons/AText";
|
||||
import BText from "../icons/BText";
|
||||
|
||||
// Components
|
||||
import SearchBar from "./search";
|
||||
import FrequentSearches from "./FrequentSearches";
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<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 className="bg-banner-home padding-responsive pt-[120px] min-h-screen !bg-center !bg-no-repeat !bg-cover flex items-center justify-center flex-col gap-[64px]">
|
||||
<div>
|
||||
<p className="text-[#D15B56] text-center font-kalame text-[32px] font-bold">نوبت ۷۲۴</p>
|
||||
<p className="text-[#525252] text-center mt-2.5 font-kalame text-[36px] font-bold flex items-center gap-3">
|
||||
<BText />
|
||||
به راحتی پزشک پیدا کنی!
|
||||
<AText />
|
||||
</p>
|
||||
</div>
|
||||
<SearchBar />
|
||||
<FrequentSearches />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import Search from "@/components/icons/Search";
|
||||
import Location from "@/components/icons/Location";
|
||||
import { Button, ButtonGroup, TextField } from "@mui/material";
|
||||
|
||||
function SearchBar() {
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
|
||||
>
|
||||
<Button className="!border-none" color="secondary" variant="contained">
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<Location />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
|
||||
</Button>
|
||||
<span className="black w-px h-12 bg-[#EFEFEF]"></span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiInput-root': {
|
||||
padding: '9px 0',
|
||||
borderBottom: 'none',
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: '#6C757D'
|
||||
}
|
||||
}}
|
||||
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
|
||||
dir='rtl'
|
||||
className={`!shadow-none !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button className="!rounded-[4px] !gap-2.5">
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<Search />
|
||||
</div>
|
||||
<p>جستجو</p>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchBar
|
||||
@@ -0,0 +1,16 @@
|
||||
function AText() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<g clip-path="url(#clip0_209_1147)">
|
||||
<path d="M16.5 6.5C17.4183 6.49987 18.2999 6.86065 18.9546 7.50454C19.6093 8.14842 19.9848 9.02383 20 9.942C20.09 10.807 20.077 12.083 19.492 13.556C18.894 15.062 17.728 16.704 15.6 18.3C15.495 18.3788 15.3754 18.4361 15.2482 18.4687C15.121 18.5013 14.9886 18.5085 14.8586 18.49C14.596 18.4524 14.3591 18.3122 14.2 18.1C14.0409 17.8878 13.9726 17.6211 14.0101 17.3586C14.0476 17.096 14.1878 16.8591 14.4 16.7C15.964 15.527 16.86 14.387 17.373 13.39C16.8921 13.5135 16.3903 13.5333 15.9011 13.448C15.4119 13.3626 14.9465 13.1742 14.5358 12.8952C14.125 12.6162 13.7783 12.2529 13.5187 11.8296C13.2592 11.4063 13.0926 10.9326 13.0302 10.44C12.9678 9.94732 13.0109 9.44705 13.1567 8.97237C13.3025 8.49769 13.5476 8.05946 13.8758 7.6868C14.204 7.31415 14.6077 7.01559 15.0602 6.81097C15.5126 6.60635 16.0034 6.50034 16.5 6.5ZM7.50001 6.5C8.41831 6.49987 9.29987 6.86065 9.9546 7.50454C10.6093 8.14842 10.9848 9.02383 11 9.942C11.09 10.807 11.077 12.083 10.492 13.556C9.89501 15.062 8.72801 16.704 6.60001 18.3C6.49496 18.3788 6.37541 18.4361 6.24819 18.4687C6.12098 18.5013 5.98859 18.5085 5.85859 18.49C5.59604 18.4524 5.35914 18.3122 5.20001 18.1C5.04088 17.8878 4.97256 17.6211 5.01006 17.3586C5.04757 17.096 5.18784 16.8591 5.40001 16.7C6.96401 15.527 7.86001 14.387 8.37301 13.39C7.89205 13.5135 7.39031 13.5333 6.90113 13.448C6.41194 13.3626 5.94651 13.1742 5.53575 12.8952C5.12499 12.6162 4.77831 12.2529 4.51873 11.8296C4.25915 11.4063 4.09262 10.9326 4.0302 10.44C3.96778 9.94732 4.01091 9.44705 4.1567 8.97237C4.3025 8.49769 4.54763 8.05946 4.87582 7.6868C5.20401 7.31415 5.60774 7.01559 6.06019 6.81097C6.51263 6.60635 7.00345 6.50034 7.50001 6.5Z" fill="#D15B56" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_209_1147">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default AText
|
||||
@@ -0,0 +1,16 @@
|
||||
function BText() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<g clip-path="url(#clip0_209_1152)">
|
||||
<path d="M16.5 6.5C17.4183 6.49987 18.2999 6.86065 18.9546 7.50454C19.6093 8.14842 19.9848 9.02383 20 9.942C20.09 10.807 20.077 12.083 19.492 13.556C18.894 15.062 17.728 16.704 15.6 18.3C15.495 18.3788 15.3754 18.4361 15.2482 18.4687C15.121 18.5013 14.9886 18.5085 14.8586 18.49C14.596 18.4524 14.3591 18.3122 14.2 18.1C14.0409 17.8878 13.9726 17.6211 14.0101 17.3586C14.0476 17.096 14.1878 16.8591 14.4 16.7C15.964 15.527 16.86 14.387 17.373 13.39C16.8921 13.5135 16.3903 13.5333 15.9011 13.448C15.4119 13.3626 14.9465 13.1742 14.5358 12.8952C14.125 12.6162 13.7783 12.2529 13.5187 11.8296C13.2592 11.4063 13.0926 10.9326 13.0302 10.44C12.9678 9.94732 13.0109 9.44705 13.1567 8.97237C13.3025 8.49769 13.5476 8.05946 13.8758 7.6868C14.204 7.31415 14.6077 7.01559 15.0602 6.81097C15.5126 6.60635 16.0034 6.50034 16.5 6.5ZM7.50001 6.5C8.41831 6.49987 9.29987 6.86065 9.9546 7.50454C10.6093 8.14842 10.9848 9.02383 11 9.942C11.09 10.807 11.077 12.083 10.492 13.556C9.89501 15.062 8.72801 16.704 6.60001 18.3C6.49496 18.3788 6.37541 18.4361 6.24819 18.4687C6.12098 18.5013 5.98859 18.5085 5.85859 18.49C5.59604 18.4524 5.35914 18.3122 5.20001 18.1C5.04088 17.8878 4.97256 17.6211 5.01006 17.3586C5.04757 17.096 5.18784 16.8591 5.40001 16.7C6.96401 15.527 7.86001 14.387 8.37301 13.39C7.89205 13.5135 7.39031 13.5333 6.90113 13.448C6.41194 13.3626 5.94651 13.1742 5.53575 12.8952C5.12499 12.6162 4.77831 12.2529 4.51873 11.8296C4.25915 11.4063 4.09262 10.9326 4.0302 10.44C3.96778 9.94732 4.01091 9.44705 4.1567 8.97237C4.3025 8.49769 4.54763 8.05946 4.87582 7.6868C5.20401 7.31415 5.60774 7.01559 6.06019 6.81097C6.51263 6.60635 7.00345 6.50034 7.50001 6.5Z" fill="#D15B56" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_209_1152">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BText
|
||||
@@ -0,0 +1,11 @@
|
||||
function Instagram() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.50008 18.3334H12.5001C16.6667 18.3334 18.3334 16.6667 18.3334 12.5V7.50002C18.3334 3.33335 16.6667 1.66669 12.5001 1.66669H7.50008C3.33341 1.66669 1.66675 3.33335 1.66675 7.50002V12.5C1.66675 16.6667 3.33341 18.3334 7.50008 18.3334Z" stroke="#EFEFEF" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.99992 12.9166C11.6107 12.9166 12.9166 11.6108 12.9166 9.99998C12.9166 8.38915 11.6107 7.08331 9.99992 7.08331C8.38909 7.08331 7.08325 8.38915 7.08325 9.99998C7.08325 11.6108 8.38909 12.9166 9.99992 12.9166Z" stroke="#EFEFEF" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M14.6968 5.83335H14.7065" stroke="#EFEFEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Instagram
|
||||
@@ -0,0 +1,9 @@
|
||||
function Linkedin() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.16667 1.04169C3.55888 1.04169 2.97598 1.28313 2.54621 1.7129C2.11644 2.14267 1.875 2.72557 1.875 3.33335C1.875 3.94114 2.11644 4.52404 2.54621 4.95381C2.97598 5.38358 3.55888 5.62502 4.16667 5.62502C4.77445 5.62502 5.35735 5.38358 5.78712 4.95381C6.21689 4.52404 6.45833 3.94114 6.45833 3.33335C6.45833 2.72557 6.21689 2.14267 5.78712 1.7129C5.35735 1.28313 4.77445 1.04169 4.16667 1.04169ZM3.125 3.33335C3.125 3.05709 3.23475 2.79213 3.4301 2.59678C3.62545 2.40143 3.8904 2.29169 4.16667 2.29169C4.44293 2.29169 4.70789 2.40143 4.90324 2.59678C5.09859 2.79213 5.20833 3.05709 5.20833 3.33335C5.20833 3.60962 5.09859 3.87457 4.90324 4.06992C4.70789 4.26527 4.44293 4.37502 4.16667 4.37502C3.8904 4.37502 3.62545 4.26527 3.4301 4.06992C3.23475 3.87457 3.125 3.60962 3.125 3.33335ZM1.875 6.66669C1.875 6.50093 1.94085 6.34196 2.05806 6.22475C2.17527 6.10754 2.33424 6.04169 2.5 6.04169H5.83333C5.99909 6.04169 6.15807 6.10754 6.27528 6.22475C6.39249 6.34196 6.45833 6.50093 6.45833 6.66669V17.5C6.45833 17.6658 6.39249 17.8248 6.27528 17.942C6.15807 18.0592 5.99909 18.125 5.83333 18.125H2.5C2.33424 18.125 2.17527 18.0592 2.05806 17.942C1.94085 17.8248 1.875 17.6658 1.875 17.5V6.66669ZM3.125 7.29169V16.875H5.20833V7.29169H3.125ZM7.70833 6.66669C7.70833 6.50093 7.77418 6.34196 7.89139 6.22475C8.0086 6.10754 8.16757 6.04169 8.33333 6.04169H11.6667C11.8324 6.04169 11.9914 6.10754 12.1086 6.22475C12.2258 6.34196 12.2917 6.50093 12.2917 6.66669V7.02835L12.6542 6.87252C13.2792 6.60542 13.9423 6.4381 14.6192 6.37669C16.9317 6.16669 18.9583 7.98335 18.9583 10.3167V17.5C18.9583 17.6658 18.8925 17.8248 18.7753 17.942C18.6581 18.0592 18.4991 18.125 18.3333 18.125H15C14.8342 18.125 14.6753 18.0592 14.5581 17.942C14.4408 17.8248 14.375 17.6658 14.375 17.5V11.6667C14.375 11.3904 14.2653 11.1255 14.0699 10.9301C13.8746 10.7348 13.6096 10.625 13.3333 10.625C13.0571 10.625 12.7921 10.7348 12.5968 10.9301C12.4014 11.1255 12.2917 11.3904 12.2917 11.6667V17.5C12.2917 17.6658 12.2258 17.8248 12.1086 17.942C11.9914 18.0592 11.8324 18.125 11.6667 18.125H8.33333C8.16757 18.125 8.0086 18.0592 7.89139 17.942C7.77418 17.8248 7.70833 17.6658 7.70833 17.5V6.66669ZM8.95833 7.29169V16.875H11.0417V11.6667C11.0417 11.0589 11.2831 10.476 11.7129 10.0462C12.1427 9.61646 12.7255 9.37502 13.3333 9.37502C13.9411 9.37502 14.524 9.61646 14.9538 10.0462C15.3836 10.476 15.625 11.0589 15.625 11.6667V16.875H17.7083V10.3167C17.7083 8.73002 16.3242 7.47669 14.7333 7.62169C14.1868 7.67141 13.6514 7.80638 13.1467 8.02169L11.9133 8.55085C11.8182 8.59171 11.7144 8.6083 11.6113 8.59913C11.5082 8.58996 11.4089 8.55531 11.3225 8.4983C11.2361 8.44129 11.1652 8.36371 11.1162 8.27252C11.0671 8.18133 11.0415 8.07939 11.0417 7.97585V7.29169H8.95833Z" fill="#EFEFEF" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Linkedin
|
||||
@@ -0,0 +1,10 @@
|
||||
function Location() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.9999 11.1917C11.4358 11.1917 12.5999 10.0276 12.5999 8.59167C12.5999 7.15573 11.4358 5.99167 9.9999 5.99167C8.56396 5.99167 7.3999 7.15573 7.3999 8.59167C7.3999 10.0276 8.56396 11.1917 9.9999 11.1917Z" stroke="#616161" stroke-width="1.5" />
|
||||
<path d="M3.01675 7.075C4.65842 -0.141667 15.3501 -0.133334 16.9834 7.08333C17.9417 11.3167 15.3084 14.9 13.0001 17.1167C11.3251 18.7333 8.67508 18.7333 6.99175 17.1167C4.69175 14.9 2.05842 11.3083 3.01675 7.075Z" stroke="#616161" stroke-width="1.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Location
|
||||
@@ -0,0 +1,10 @@
|
||||
function Search() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.58341 17.5C13.9557 17.5 17.5001 13.9556 17.5001 9.58333C17.5001 5.21108 13.9557 1.66667 9.58341 1.66667C5.21116 1.66667 1.66675 5.21108 1.66675 9.58333C1.66675 13.9556 5.21116 17.5 9.58341 17.5Z" stroke="#EFEFEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M18.3334 18.3333L16.6667 16.6667" stroke="#EFEFEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search
|
||||
@@ -0,0 +1,9 @@
|
||||
function Telegram() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13.1299 19.346L10.7039 13.258L4.6149 10.792L4.5769 10.162L19.4229 4.53802L13.7619 19.346H13.1299ZM13.4349 17.377L17.7149 6.24703L6.5459 10.489L11.4459 12.477L13.4349 17.377Z" fill="#EFEFEF" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Telegram
|
||||
@@ -0,0 +1,10 @@
|
||||
function Whatsapp() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M5.75008 17.1667C7.00008 17.9167 8.50008 18.3334 10.0001 18.3334C14.5834 18.3334 18.3334 14.5834 18.3334 10C18.3334 5.41669 14.5834 1.66669 10.0001 1.66669C5.41675 1.66669 1.66675 5.41669 1.66675 10C1.66675 11.5 2.08341 12.9167 2.75008 14.1667L2.10719 16.6393C1.91247 17.3883 2.60567 18.0651 3.34973 17.8525L5.75008 17.1667Z" stroke="#EFEFEF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.75 12.3737C13.75 12.5087 13.72 12.6475 13.6561 12.7825C13.5923 12.9175 13.5096 13.045 13.4007 13.165C13.2167 13.3675 13.0139 13.5138 12.7848 13.6075C12.5595 13.7013 12.3153 13.75 12.0525 13.75C11.6694 13.75 11.26 13.66 10.8281 13.4763C10.3962 13.2925 9.96432 13.045 9.53618 12.7338C9.10428 12.4188 8.69492 12.07 8.30433 11.6837C7.9175 11.2937 7.56823 10.885 7.25651 10.4575C6.94855 10.03 6.70068 9.6025 6.52041 9.17875C6.34014 8.75125 6.25 8.3425 6.25 7.9525C6.25 7.6975 6.29507 7.45375 6.3852 7.22875C6.47534 7 6.61805 6.79 6.8171 6.6025C7.05746 6.36625 7.32036 6.25 7.59827 6.25C7.70343 6.25 7.80859 6.2725 7.90248 6.3175C8.00013 6.3625 8.0865 6.43 8.15411 6.5275L9.02541 7.75375C9.09301 7.8475 9.14184 7.93375 9.17564 8.01625C9.20944 8.095 9.22822 8.17375 9.22822 8.245C9.22822 8.335 9.20193 8.425 9.14935 8.51125C9.10053 8.5975 9.02917 8.6875 8.93903 8.7775L8.65361 9.07375C8.61229 9.115 8.59352 9.16375 8.59352 9.22375C8.59352 9.25375 8.59727 9.28 8.60478 9.31C8.61605 9.34 8.62732 9.3625 8.63483 9.385C8.70243 9.50875 8.81885 9.67 8.9841 9.865C9.1531 10.06 9.33337 10.2588 9.52867 10.4575C9.73147 10.6563 9.92677 10.84 10.1258 11.0087C10.3211 11.1737 10.4826 11.2862 10.6103 11.3537C10.6291 11.3612 10.6516 11.3725 10.6779 11.3837C10.7079 11.395 10.738 11.3987 10.7718 11.3987C10.8356 11.3987 10.8845 11.3763 10.9258 11.335L11.2112 11.0538C11.3051 10.96 11.3952 10.8887 11.4816 10.8438C11.568 10.7912 11.6544 10.765 11.7482 10.765C11.8196 10.765 11.8947 10.78 11.9773 10.8138C12.06 10.8475 12.1463 10.8963 12.2402 10.96L13.4834 11.8412C13.581 11.9087 13.6486 11.9875 13.6899 12.0812C13.7275 12.175 13.75 12.2687 13.75 12.3737Z" stroke="#EFEFEF" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Whatsapp
|
||||
@@ -1,6 +1,79 @@
|
||||
import { footerL, footerR } from "@/constans";
|
||||
import Image from "next/image";
|
||||
import Linkedin from "../icons/Linkedin";
|
||||
import Telegram from "../icons/Telegram";
|
||||
import Whatsapp from "../icons/Whatsapp";
|
||||
import Instagram from "../icons/Instagram";
|
||||
|
||||
const socialMedias = [
|
||||
<Linkedin />,
|
||||
<Telegram />,
|
||||
<Whatsapp />,
|
||||
<Instagram />
|
||||
]
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<div>Footer</div>
|
||||
<div>
|
||||
<span className="h-px bg-[#D7D7D7] w-full block"></span>
|
||||
<div className="pt-[30px] pb-[60px] flex items-center justify-between">
|
||||
{/* Right */}
|
||||
<div className="flex gap-[30px] flex-col items-start">
|
||||
{/* Icon */}
|
||||
<div className="flex items-center justify-start gap-[5px]">
|
||||
<Image
|
||||
alt="logo"
|
||||
width={30}
|
||||
height={30}
|
||||
src='/assets/images/logo.png'
|
||||
/>
|
||||
<p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
|
||||
</div>
|
||||
<p
|
||||
className="text-[#616161] text-[14px] font-normal"
|
||||
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است. </p>
|
||||
</div>
|
||||
|
||||
{/* Center */}
|
||||
<ul className="flex flex-col gap-3">
|
||||
{footerR.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`
|
||||
${idx === 0 ? 'text-[#3B3B3B] font-bold border-b border-b-[#EFEFEF] pb-1' : 'text-[#616161] font-normal'}
|
||||
text-[16px] w-fit`}
|
||||
>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{footerL.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`
|
||||
${idx === 0 ? 'text-[#3B3B3B] font-bold border-b border-b-[#EFEFEF] pb-1' : 'text-[#616161] font-normal'}
|
||||
text-[16px] w-fit`}
|
||||
>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Left */}
|
||||
<div className="flex flex-col justify-center gap-[50px]">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-bold border-b border-b-[#EFEFEF] pb-1">
|
||||
ما را در شبکه های اجتماعی دنبال کنید:
|
||||
</p>
|
||||
<ul className="flex items-center gap-[15px]">
|
||||
{socialMedias.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-2.5 bg-[#A5B4D7] rounded-full w-fit"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ 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)] w-[85%] mx-auto"
|
||||
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full 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]">
|
||||
|
||||
@@ -8,14 +8,14 @@ function Layout({ children, title }) {
|
||||
<title>{`${title} | نوبت ۷۲۴`}</title>
|
||||
</head> */}
|
||||
<main className="w-full min-h-screen">
|
||||
<header className="w-full fixed top-10 right-0">
|
||||
<header className="w-full fixed top-10 right-0 padding-responsive z-[10]">
|
||||
<Header />
|
||||
</header>
|
||||
<section>
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
<footer className=" bg-[#F5F5F5]">
|
||||
<footer className="bg-[#F5F5F5] mt-[250px] padding-responsive">
|
||||
<Footer />
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
+13
-1
@@ -4,4 +4,16 @@ export const listNav = [
|
||||
{ id: 3, name: 'بلاگ', link: '/blog' },
|
||||
{ id: 4, name: 'تماس با ما', link: '/contact-us' },
|
||||
{ id: 5, name: 'درباره ما', link: '/about-us' },
|
||||
];
|
||||
];
|
||||
|
||||
export const frequentSearches = [
|
||||
'چشم پزشکی',
|
||||
'قلب و عروق',
|
||||
'پوست، مو و زیبایی',
|
||||
'روان پزشکی',
|
||||
'مغز و اعصاب'
|
||||
]
|
||||
|
||||
export const footerR = ['خدمات', 'ثبت نام', 'تخصص ها', 'بلاگ'];
|
||||
|
||||
export const footerL = ['دسترسی سریع', 'درباره ما', 'تماس با ما', 'سوالات متداول'];
|
||||
Reference in New Issue
Block a user