dynamic-realty/dynamic-realty-next
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: home UI total revamp

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-28 17:28:42 +07:00
parent eb78e44f1c
commit 19b82640ee
9 changed files with 136 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

@ -11353,7 +11353,7 @@ html:not(.lt-ie10) .not-animated {
.ui-to-top:hover { .ui-to-top:hover {
color: #151515; color: #151515;
background: #fdde52; opacity: 0.8;
text-decoration: none; text-decoration: none;
} }

BIN
public/images/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1
src/app/(main)/globals.css
View File

@ -33,6 +33,7 @@
--color-colorContactForm: var(--color-colorExt50); --color-colorContactForm: var(--color-colorExt50);
--color-colorText1: var(--color-colorExt10); --color-colorText1: var(--color-colorExt10);
--color-colorText2: var(--color-colorExt20); --color-colorText2: var(--color-colorExt20);
--color-colorText3: var(--color-colorExt30);
--color-colorLoaderBackground: var(--color-colorExt20); --color-colorLoaderBackground: var(--color-colorExt20);
--color-colorPriceTag: var(--color-colorExt30); --color-colorPriceTag: var(--color-colorExt30);
--color-colorBtnPrimary: var(--color-colorext40); --color-colorBtnPrimary: var(--color-colorext40);

226
src/app/(main)/page.tsx
View File

@ -1,10 +1,5 @@
import GoogleReviewBox from "@/components/GoogleReviewBox"; import GoogleReviewBox from "@/components/GoogleReviewBox";
import HomeTopSection from "@/components/homes/HomeTopSection"; import HomeTopSection from "@/components/homes/HomeTopSection";
import Loader from "@/components/loaders/Loader";
import ListOfFeaturedProperty from "@/components/properties/ListOfFeaturedProperty";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";
export default function Home() { export default function Home() {
return ( return (
@ -13,95 +8,57 @@ export default function Home() {
<section className="section section-lg bg-colorSection1"> <section className="section section-lg bg-colorSection1">
<div className="container"> <div className="container">
<h2 className="heading-decoration-1">
<span className="heading-inner">Why Dynamic Realty?</span>
</h2>
<div className="row row-30"> <div className="row row-30">
<div className="col-md-6 col-lg-3"> <div className="col-md-12 col-lg-4">
<Link href="/"> <div>
<article className="box-modern"> <article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-search74"></span> <div className="flex justify-center">
<span className="icon box-modern-icon fa-home"></span>
</div>
<div className="box-modern-main"> <div className="box-modern-main">
<h4 className="box-modern-title">Buy</h4> <h4 className="box-modern-title">Tailored Management, Trusted Care</h4>
<p> <p className="text-colorText3">
Discover a wide selection of properties available for purchase in prime locations at competitive Committed to providing a personalized structure to each client, with on-site management & a robust
prices. property management
</p> </p>
</div> </div>
</article> </article>
</Link>
</div>
<div className="col-md-6 col-lg-3">
<Link href="/">
<article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-label25"></span>
<div className="box-modern-main">
<h4 className="box-modern-title">Sell</h4>
<p>
List your property with ease and reach potential buyers quickly with our expert marketing support.
</p>
</div>
</article>
</Link>
</div>
<div className="col-md-6 col-lg-3">
<Link href="/">
<article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-timer35"></span>
<div className="box-modern-main">
<h4 className="box-modern-title">Rent</h4>
<p>Find the perfect rental home or apartment with flexible lease terms and no hidden fees.</p>
</div>
</article>
</Link>
</div>
<div className="col-md-6 col-lg-3">
<Link href="/">
<article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-big104"></span>
<div className="box-modern-main">
<h4 className="box-modern-title">Need Help?</h4>
<p>
Have questions? Our support team is here to guide you through every step of your real estate
journey.
</p>
</div>
</article>
</Link>
</div>
</div>
</div>
</section>
<section className="section relative!">
<Image
alt="Experience the Difference in Every Key Turn"
src={"/images/bg-header.webp"}
quality={100}
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
<div className="box-1-cell height-fill context-dark bg-colorHeader/80!">
<div className="cell-inner box-1-outer">
<div className="box-1">
<div className="text-center">
<h2>Experience the Difference in Every Key Turn</h2>
</div> </div>
<div className="mt-4 text-lg"> </div>
<p> <div className="col-md-12 col-lg-4">
Dynamic Realty is a full-service veteran-owned real estate company based in Centerville, GA, <div>
established in 2004. Our services include buying & selling, rentals, & property management. We are <article className="box-modern">
committed to providing a personalized structure to each client, with on-site management & a robust <div className="flex justify-center">
property management division. We strive to provide a service that meets the needs of all our customers <span className="icon box-modern-icon fa-calendar"></span>
& are proud to have been helping people with their real estate needs for the past 20 years. </div>
</p> <div className="box-modern-main">
<p> <h4 className="box-modern-title">20 Years of Real Estate Excellence</h4>
At Dynamic Realty, we offer a comprehensive range of realty services to meet the needs of our <p className="text-colorText3">
customers in Central Georgia. Our services include buying & selling, renting, & property management. We strive to provide a service that meets the needs of all our customers & are proud to have been
We understand the real estate sector inside out & are committed to providing a professional service to helping people with their real estate needs for the past 20 years
our clients. We strive to make the process of reaching your real estate goals as easy & stress-free as </p>
possible. Get in touch with us today to find out more. </div>
</p> </article>
</div>
</div>
<div className="col-md-12 col-lg-4">
<div>
<article className="box-modern">
<div className="flex justify-center">
<span className="icon box-modern-icon fa-map"></span>
</div>
<div className="box-modern-main">
<h4 className="box-modern-title">Expert Guidance, Stress-Free Journeys</h4>
<p className="text-colorText3">
We understand the real estate sector inside out & are committed to providing a professional
service to our clients. We strive to make the process of reaching your real estate goals as easy &
stress-free as possible
</p>
</div>
</article>
</div> </div>
</div> </div>
</div> </div>
@ -109,101 +66,6 @@ export default function Home() {
</section> </section>
<GoogleReviewBox /> <GoogleReviewBox />
<section className="section section-lg bg-colorSection2">
<div className="container">
<div className="layout-4">
<h2 className="heading-decoration-1">
<span className="heading-inner">Featured Properties</span>
</h2>
<div className="layout-4-item">
<ul className="list-inline-bordered heading-7">
<li>
<a href="/listings-for-rent">For Rent</a>
</li>
<li>
<a href="/listings-for-sale">For Sale</a>
</li>
</ul>
</div>
</div>
<div className="my-10!">
<Suspense
fallback={
<>
<div className="mt-5">
<Loader />
</div>
</>
}
>
<ListOfFeaturedProperty />
</Suspense>
</div>
</div>
</section>
<section className="section parallax-container" data-parallax-img="/images/bg-02-1920x916.jpg">
<div className="parallax-content section-lg context-dark text-center">
<div className="container">
<div className="row row-30">
<div className="col-6 col-md-3">
<article className="box-counter">
<div className="box-counter-main">
<span>860</span>
</div>
<p className="box-counter-title">Properties on Map</p>
</article>
</div>
<div className="col-6 col-md-3">
<article className="box-counter">
<div className="box-counter-main">
<div className="counter">29</div>
</div>
<p className="box-counter-title">Professional Agents</p>
</article>
</div>
<div className="col-6 col-md-3">
<article className="box-counter">
<div className="box-counter-main">
<div className="counter">10</div>
<span>k</span>
</div>
<p className="box-counter-title">Happy Clients</p>
</article>
</div>
<div className="col-6 col-md-3">
<article className="box-counter">
<div className="box-counter-main">
<div className="counter">15</div>
</div>
<p className="box-counter-title">New Apartments Daily</p>
</article>
</div>
</div>
</div>
</div>
</section>
<section className="section section-lg bg-colorSection1">
<div className="container">
<h2 className="heading-decoration-1">
<span className="heading-inner">Find Us</span>
</h2>
<div className="row row-30">
<div className="col-12">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3360.4823498818855!2d-83.68565822483802!3d32.61997607372962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f3e6ce99781991%3A0xabfd803ad30f6d12!2s100%20N%20Houston%20Lake%20Blvd%2C%20Centerville%2C%20GA%2031028%2C%20USA!5e0!3m2!1sen!2sid!4v1744883077476!5m2!1sen!2sid"
width={"100%"}
height={450}
style={{ border: 0 }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</div>
</section>
</> </>
); );
} }

35
src/components/HeroSlider.tsx
View File

@ -4,7 +4,6 @@ import Image from "next/image";
import { useState } from "react"; import { useState } from "react";
import { Autoplay } from "swiper/modules"; import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
type HeroSliderProps = { type HeroSliderProps = {
onClickBook?: () => void; onClickBook?: () => void;
@ -19,25 +18,27 @@ type HeroSlideItem = {
export default function HeroSlider({ onClickBook }: HeroSliderProps) { export default function HeroSlider({ onClickBook }: HeroSliderProps) {
const [slideItems] = useState<HeroSlideItem[]>([ const [slideItems] = useState<HeroSlideItem[]>([
{ {
title: "Real Estate, Redefined", title: "Full-Service Veteran-Owned Real Estate Company",
description: "Where Southern Charm Meets Boutique Real Estate", description:
"Dynamic Realty is a full-service veteran-owned real estate company based in Centerville, GA, established in 2004. Our services include buying & selling, rentals, & property management. We strive to provide a service that meets the needs of all our customers & are proud to have been helping people with their real estate needs for the past 20 years.",
img: "/images/bg-header2.jpg", img: "/images/bg-header2.jpg",
}, },
{ {
title: "Your Vision, Our Expertise", title: "Comprehensive Range of Realty Services",
description: "Discover a Smarter Way to Buy & Sell", description:
"Our services include buying & selling, renting, & property management. We understand the real estate sector inside out & are committed to providing a professional service to our clients. We strive to make the process of reaching your real estate goals as easy & stress-free as possible.",
img: "/images/bg-header3.jpg", img: "/images/bg-header3.jpg",
}, },
]); ]);
return ( return (
<section className="section flex! flex-row! justify-end! relative! min-h-96! lg:min-h-auto!"> <section className="section flex! flex-row! justify-end! relative! min-h-[900px]! lg:min-h-[600px]!">
<Swiper <Swiper
className="absolute w-full h-full" className="absolute w-full h-full"
modules={[Autoplay]} modules={[Autoplay]}
spaceBetween={50} spaceBetween={50}
slidesPerView={1} slidesPerView={1}
autoplay={{ delay: 4000 }} autoplay={{ delay: 10000 }}
loop loop
> >
{slideItems.map((slide, idx) => ( {slideItems.map((slide, idx) => (
@ -52,21 +53,29 @@ export default function HeroSlider({ onClickBook }: HeroSliderProps) {
objectFit: "cover", objectFit: "cover",
}} }}
/> />
<section className="section section-lg text-colorText2! bg-colorHeroOverlay/50 w-full h-full z-20"> <section className="section section-lg text-colorText2! bg-colorHeroOverlay/85 w-full h-full z-20">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12 col-lg-4 flex justify-center">
<div className="w-[200px] h-[200px] relative mb-4 lg:hidden">
<Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
</div>
<div className="w-[300px] h-[300px] relative mb-4 hidden lg:block">
<Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
</div>
</div>
<div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12"> <div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">
<div className="text-4xl lg:text-8xl! font-playfairdisplay text-center! lg:text-left!"> <div className="text-4xl lg:text-6xl! font-playfairdisplay text-center! lg:text-left!">
{slide.title} {slide.title}
</div> </div>
<div className="text-lg lg:text-5xl! font-montserrat text-center! lg:text-left!"> <div className="text-lg lg:text-xl! font-montserrat text-center! lg:text-left!">
{slide.description} {slide.description}
</div> </div>
<div className="context-dark flex flex-row justify-center lg:hidden"> {/* <div className="context-dark flex flex-row justify-center lg:hidden">
<button onClick={onClickBook} className="button button-xs button-primary-outline"> <button onClick={onClickBook} className="button button-xs button-primary-outline">
BOOK APPOINTMENT BOOK APPOINTMENT
</button> </button>
</div> </div> */}
<div className="context-dark flex flex-row justify-center lg:hidden"> <div className="context-dark flex flex-row justify-center lg:hidden">
<a href="tel:(478) 225 9061" className="button button-xs button-primary-outline"> <a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
Call Us Call Us
@ -80,7 +89,7 @@ export default function HeroSlider({ onClickBook }: HeroSliderProps) {
))} ))}
</Swiper> </Swiper>
<ContactFormBox /> {/* <ContactFormBox /> */}
</section> </section>
); );
} }

5
src/components/homes/HomeTopSection.tsx
View File

@ -2,7 +2,6 @@
import HeroSlider from "@/components/HeroSlider"; import HeroSlider from "@/components/HeroSlider";
import { useRef } from "react"; import { useRef } from "react";
import ContactFormSection from "../ContactFormSection";
export default function HomeTopSection() { export default function HomeTopSection() {
const formRef = useRef<HTMLDivElement | null>(null); const formRef = useRef<HTMLDivElement | null>(null);
@ -15,9 +14,9 @@ export default function HomeTopSection() {
<> <>
<HeroSlider onClickBook={scrollToForm} /> <HeroSlider onClickBook={scrollToForm} />
<div className="lg:hidden" ref={formRef}> {/* <div className="lg:hidden" ref={formRef}>
<ContactFormSection /> <ContactFormSection />
</div> </div> */}
</> </>
); );
} }

56
src/components/layouts/Footer.tsx
View File

@ -1,18 +1,15 @@
"use client"; import ListOfFeaturedProperiesFooter from "@/components/properties/ListOfFeaturedPropertiesFooter";
import { headers } from "next/headers";
import Image from "next/image"; export default async function Footer() {
import { useEffect } from "react"; const headersList = await headers();
import { useLatestPropertyQuery } from "../../services/hooks/property"; const fullUrl = headersList.get("x-full-url");
import { formatCurrency } from "@/utils/general";
export default function Footer() { const shareUrl = {
const { data, _fetch } = useLatestPropertyQuery(); facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
useEffect(() => { twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
_fetch(); };
}, []);
const latestProperties = data ? data.slice(0, 2) : [];
return ( return (
<> <>
@ -23,25 +20,7 @@ export default function Footer() {
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item"> <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
<span className="heading-square-item"></span>Latest Properties <span className="heading-square-item"></span>Latest Properties
</h3> </h3>
{latestProperties && latestProperties.length > 0 ? ( <ListOfFeaturedProperiesFooter />
latestProperties.map((property, index) => (
<a key={index} className="post-minimal" href={`single-property/${property.slug}`}>
<div className="post-minimal-image">
<Image src={property.images?.[0]?.url ?? ""} alt={property.title} width={161} height={136} />
</div>
<div className="post-minimal-body">
<div className="post-minimal-title">
<span className="text-colorFooterText! hover:text-colorFooterTextHover!">{property.title}</span>
</div>
<div className="post-minimal-text">
<span>From {formatCurrency(property.price)}/month</span>
</div>
</div>
</a>
))
) : (
<div>Data Not Available</div>
)}
</div> </div>
<div className="col-md-6 col-lg-4 col-xl-3 col-bordered"> <div className="col-md-6 col-lg-4 col-xl-3 col-bordered">
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item"> <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
@ -105,16 +84,13 @@ export default function Footer() {
</form> */} </form> */}
<ul className="list-inline-1 space-x-5"> <ul className="list-inline-1 space-x-5">
<li> <li>
<a className="icon fa-facebook text-4xl!" href="#"></a> <a target="_blank" className="icon fa-facebook text-4xl!" href={shareUrl.facebook}></a>
</li> </li>
<li> <li>
<a className="icon fa-twitter text-4xl!" href="#"></a> <a target="_blank" className="icon fa-twitter text-4xl!" href={shareUrl.twitter}></a>
</li> </li>
<li> <li>
<a className="icon fa-google-plus text-4xl!" href="#"></a> <a target="_blank" className="icon fa-linkedin text-4xl!" href={shareUrl.linkedin}></a>
</li>
<li>
<a className="icon fa-pinterest-p text-4xl!" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -133,11 +109,11 @@ export default function Footer() {
</p> </p>
</div> </div>
<div className="col-sm-6 text-sm-right"> <div className="col-sm-6 text-sm-right">
<div className="right-1"> {/* <div className="right-1">
<a href="#"> <a href="#">
<span className="icon mdi mdi-plus"></span>Book Appointment <span className="icon mdi mdi-plus"></span>Book Appointment
</a> </a>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>

22
src/components/layouts/Header.tsx
View File

@ -107,10 +107,12 @@ export default function Header() {
<div className="pr-2"> <div className="pr-2">
<form> <form>
<div className="form-wrap"> <div className="form-wrap">
<input type="text" id="search" className="form-input" /> <input
<label className="form-label" htmlFor="search"> type="text"
Search id="search"
</label> className="form-input border-colorHeader!"
placeholder="Search"
/>
</div> </div>
</form> </form>
</div> </div>
@ -118,7 +120,7 @@ export default function Header() {
<HeaderFeaturedHomes /> <HeaderFeaturedHomes />
</div> </div>
</HeaderDropdownGroup> </HeaderDropdownGroup>
<HeaderDropdownGroup title="Why Dynamic?"> <HeaderDropdownGroup title="Why Dynamic Realty?">
<HeaderDropdownMenu <HeaderDropdownMenu
list={[ list={[
{ {
@ -214,10 +216,12 @@ export default function Header() {
<div className="pr-2"> <div className="pr-2">
<form> <form>
<div className="form-wrap"> <div className="form-wrap">
<input type="text" id="search" className="form-input" /> <input
<label className="form-label" htmlFor="search"> type="text"
Search id="search"
</label> className="form-input border-colorHeader!"
placeholder="Search"
/>
</div> </div>
</form> </form>
</div> </div>

37
src/components/properties/ListOfFeaturedPropertiesFooter.tsx Normal file
View File

@ -0,0 +1,37 @@
"use client";
import { useLatestPropertyQuery } from "@/services/hooks/property";
import { formatCurrency } from "@/utils/general";
import Image from "next/image";
import { useEffect } from "react";
export default function ListOfFeaturedProperiesFooter() {
const { data, _fetch } = useLatestPropertyQuery();
useEffect(() => {
_fetch();
}, []);
const latestProperties = data ? data.slice(0, 2) : [];
return (
<>
{latestProperties.length > 0 &&
latestProperties.map((property, index) => (
<a key={index} className="post-minimal" href={`single-property/${property.slug}`}>
<div className="post-minimal-image">
<Image src={property.images?.[0]?.url ?? ""} alt={property.title} width={161} height={136} />
</div>
<div className="post-minimal-body">
<div className="post-minimal-title">
<span className="text-colorFooterText! hover:text-colorFooterTextHover!">{property.title}</span>
</div>
<div className="post-minimal-text">
<span>From {formatCurrency(property.price)}/month</span>
</div>
</div>
</a>
))}
</>
);
}