fix: header styling and nav prefetch

This commit is contained in:
RizqiSyahrendra 2025-03-13 15:39:23 +07:00
parent 37e7efd8d7
commit 8ed94a3a4d
3 changed files with 13 additions and 8 deletions

View File

@ -13,7 +13,7 @@ const shareIcons: Record<string, any> = {
dom: ( dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1"> <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<Image src="/assets/icons/phone.png" alt="Phone" width={30} height={25} /> <Image src="/assets/icons/phone.png" alt="Phone" width={30} height={25} />
<b className="text-[17px]">(520) 803-6644</b> <b className="text-[17px] hover:!text-extColorPrimary3 transition-all duration-300">(520) 803-6644</b>
</span> </span>
), ),
}, },
@ -21,7 +21,7 @@ const shareIcons: Record<string, any> = {
link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823", link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823",
dom: ( dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1"> <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaFacebook size={25} /> <FaFacebook size={25} className="hover:!text-extColorPrimary3 transition-all duration-300" />
<b className="text-[17px] lg:hidden">Facebook</b> <b className="text-[17px] lg:hidden">Facebook</b>
</span> </span>
), ),
@ -30,7 +30,7 @@ const shareIcons: Record<string, any> = {
link: "https://linkedin.com/company/cochise-oncology", link: "https://linkedin.com/company/cochise-oncology",
dom: ( dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1"> <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaLinkedin size={25} /> <FaLinkedin size={25} className="hover:!text-extColorPrimary3" />
<b className="text-[17px] lg:hidden">Linkedin</b> <b className="text-[17px] lg:hidden">Linkedin</b>
</span> </span>
), ),
@ -65,8 +65,8 @@ export default function Header({ links }: { links: typeof navMenuData }) {
<Image <Image
src="/assets/images/demo-slick/logo-dark.webp" src="/assets/images/demo-slick/logo-dark.webp"
alt="Company Logo" alt="Company Logo"
width={165} width={204}
height={100} height={104}
className="dark-mode-logo" className="dark-mode-logo"
/> />
</Link> </Link>

View File

@ -45,6 +45,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<li> <li>
{!Array.isArray(link?.child) && ( {!Array.isArray(link?.child) && (
<Link <Link
prefetch={false}
href={link.href} href={link.href}
className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500" className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
> >
@ -64,6 +65,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{Array.isArray(link?.child) && ( {Array.isArray(link?.child) && (
<div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}> <div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}>
<Link <Link
prefetch={false}
href={link?.href ?? "#"} href={link?.href ?? "#"}
className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500" className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
onClick={() => toggleDropdown([link.text])} onClick={() => toggleDropdown([link.text])}
@ -82,6 +84,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
> >
{!Array.isArray(subLink?.child) && ( {!Array.isArray(subLink?.child) && (
<Link <Link
prefetch={false}
href={subLink?.href} href={subLink?.href}
onClick={() => toggleMobileMenu()} onClick={() => toggleMobileMenu()}
className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500" className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500"
@ -92,6 +95,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{Array.isArray(subLink?.child) && ( {Array.isArray(subLink?.child) && (
<> <>
<Link <Link
prefetch={false}
href={subLink?.href ?? "#"} href={subLink?.href ?? "#"}
className="mn-has-sub !flex !justify-between !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500" className="mn-has-sub !flex !justify-between !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)} onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)}
@ -106,6 +110,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{subLink.child.map((subLink2: any, subLinkIdx2: number) => ( {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}> <li key={subLinkIdx2}>
<Link <Link
prefetch={false}
href={subLink2?.href} href={subLink2?.href}
className="!text-[14px] !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500" className="!text-[14px] !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => toggleMobileMenu()} onClick={() => toggleMobileMenu()}

View File

@ -22,11 +22,11 @@ export default function Hero() {
<h2 className="hs-title-3">Healing Begins Here</h2> <h2 className="hs-title-3">Healing Begins Here</h2>
<h1 className="text-3xl md:text-6xl">Cochise Oncology</h1> <h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
<p className="text-xl">Southern Arizonas Only Complete Cancer Treatment Center in Sierra Vista.</p> <p className="text-xl">Southern Arizonas Only Complete Cancer Treatment Center in Sierra Vista.</p>
<a href="/contact" className="ext-btn-cta-md" data-btn-animate="y"> </div>
<a href="/contact" className="ext-btn-cta-md mt-7" data-btn-animate="y">
Request Consultation Request Consultation
</a> </a>
</div> </div>
</div>
{/* End Home Section Content */} {/* End Home Section Content */}
</div> </div>
</section> </section>