fix: hero and header styling

This commit is contained in:
RizqiSyahrendra 2025-04-18 01:11:46 +07:00
parent 8b2f45c699
commit 20fad39322
7 changed files with 44 additions and 26 deletions

View File

@ -11555,7 +11555,6 @@ html.tablet .ui-to-top {
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-colorHeaderText);
}
.rd-dropdown-link,
@ -11968,16 +11967,18 @@ html.tablet .ui-to-top {
.rd-navbar-fixed .rd-navbar-toggle {
display: inline-block;
position: absolute;
}
.rd-navbar-fixed .rd-navbar-brand {
position: relative;
margin-left: 6px;
margin-left: auto;
margin-right: auto;
}
.rd-navbar-fixed .rd-navbar-brand img {
max-width: 160px;
max-height: 41px;
max-width: 90px;
max-height: 60px;
width: auto;
height: auto;
}
@ -12913,8 +12914,8 @@ html.rd-navbar-fixed-linked .page {
.rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
width: auto;
height: auto;
max-width: 200px;
max-height: 80px;
max-width: 220px;
max-height: 110px;
}
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav-wrap {
@ -12946,7 +12947,7 @@ html.rd-navbar-fixed-linked .page {
}
.rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand img, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand img {
max-height: 50px;
max-height: 74px;
}
.rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav-item > .rd-navbar-submenu, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav-item > .rd-navbar-submenu {
@ -13390,8 +13391,8 @@ html.rd-navbar-fixed-linked .page {
.rd-navbar-corporate.rd-navbar-static .rd-navbar-brand img {
width: auto;
height: auto;
max-width: 200px;
max-height: 80px;
max-width: 220px;
max-height: 110px;
}
.rd-navbar-corporate.rd-navbar-static .rd-navbar-nav-wrap {

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

BIN
public/images/logo2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -14,14 +14,22 @@
--color-colorExt1: #0a0a0a;
--color-colorExt2: #ffffff;
--color-colorExt3: #967244;
--color-colorExt4: #31323c;
--color-colorext4: #bc986b;
--color-colorExt5: #31323c;
--color-colorHeader: var(--color-colorExt1);
--color-colorHeaderText: var(--color-colorExt2);
--color-colorHeaderTextHover: var(--color-colorext4);
--color-colorFooter: var(--color-colorExt1);
--color-colorFooterText: var(--color-colorExt2);
--color-colorFooterTextHover: var(--color-colorExt3);
--color-colorFormInput: var(--color-colorExt2);
--color-colorContactForm: var(--color-colorExt4);
--color-colorContactForm: var(--color-colorExt5);
}
@layer components {
.rd-nav-link-custom {
@apply text-colorHeader! lg:text-colorHeaderText! lg:hover:text-colorHeaderTextHover!
}
}
@media (prefers-color-scheme: dark) {

View File

@ -1,13 +1,11 @@
import ContactFormBox from "@/components/ContactFormBox";
import GoogleReviewBox from "@/components/GoogleReviewBox";
import Hero from "@/components/Hero";
import Link from "next/link";
export default function Home() {
return (
<>
<section className="section bg-[url(/images/bg-header.webp)] flex! flex-row! justify-end!">
<ContactFormBox />
</section>
<Hero />
<section className="section section-lg bg-default">
<div className="container">

9
src/components/Hero.tsx Normal file
View File

@ -0,0 +1,9 @@
import ContactFormBox from "./ContactFormBox";
export default function Hero() {
return (
<section className="section bg-[url(/images/bg-header2.webp)] flex! flex-row! justify-end!">
<ContactFormBox />
</section>
);
}

View File

@ -70,28 +70,30 @@ export default function Header() {
<span></span>
</button>
<div className="rd-navbar-brand lg:flex lg:flex-col lg:items-center">
<div className="rd-navbar-brand">
<a className="brand" href="/">
<img
className="brand-logo-dark"
src="images/logo-default-142x41.png"
// src="images/logo-default-142x41.png"
src="images/logo2.png"
alt=""
width="142"
height="41"
srcSet="images/logo-default-284x82.png 2x"
srcSet="images/logo2.png 2x"
/>
<img
className="brand-logo-light"
src="images/logo-inverse-121x61.png"
// src="images/logo-inverse-121x61.png"\
src="images/logo2.png"
alt=""
width="121"
height="61"
srcSet="images/logo-inverse-284x82.png 2x"
srcSet="images/logo2.png 2x"
/>
</a>
<h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
{/* <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
Dynamic Realty
</h3>
</h3> */}
</div>
</div>
<div className="rd-navbar-nav-wrap">
@ -103,7 +105,7 @@ export default function Header() {
</li>
<li className="rd-nav-item">
<a
className="rd-nav-link"
className="rd-nav-link rd-nav-link-custom"
href="https://dynamicrealtyinc.managebuilding.com/Resident/public/rentals"
target="_blank"
>
@ -111,17 +113,17 @@ export default function Header() {
</a>
</li>
<li className="rd-nav-item">
<a className="rd-nav-link" href="/">
<a className="rd-nav-link rd-nav-link-custom" href="/">
LISTINGS FOR SALE
</a>
</li>
<li className="rd-nav-item">
<a className="rd-nav-link" href="/">
<a className="rd-nav-link rd-nav-link-custom" href="/">
LISTINGS FOR RENT
</a>
</li>
<li className="rd-nav-item">
<a className="rd-nav-link" href="/">
<a className="rd-nav-link rd-nav-link-custom" href="/">
BLOGS
</a>
</li>