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 {
color: #151515;
background: #fdde52;
opacity: 0.8;
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-colorText1: var(--color-colorExt10);
--color-colorText2: var(--color-colorExt20);
--color-colorText3: var(--color-colorExt30);
--color-colorLoaderBackground: var(--color-colorExt20);
--color-colorPriceTag: var(--color-colorExt30);
--color-colorBtnPrimary: var(--color-colorext40);

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

@ -1,10 +1,5 @@
import GoogleReviewBox from "@/components/GoogleReviewBox";
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() {
return (
@ -13,95 +8,57 @@ export default function Home() {
<section className="section section-lg bg-colorSection1">
<div className="container">
<h2 className="heading-decoration-1">
<span className="heading-inner">Why Dynamic Realty?</span>
</h2>
<div className="row row-30">
<div className="col-md-6 col-lg-3">
<Link href="/">
<div className="col-md-12 col-lg-4">
<div>
<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">
<h4 className="box-modern-title">Buy</h4>
<p>
Discover a wide selection of properties available for purchase in prime locations at competitive
prices.
<h4 className="box-modern-title">Tailored Management, Trusted Care</h4>
<p className="text-colorText3">
Committed to providing a personalized structure to each client, with on-site management & a robust
property management
</p>
</div>
</article>
</Link>
</div>
<div className="col-md-6 col-lg-3">
<Link href="/">
</div>
<div className="col-md-12 col-lg-4">
<div>
<article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-label25"></span>
<div className="flex justify-center">
<span className="icon box-modern-icon fa-calendar"></span>
</div>
<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.
<h4 className="box-modern-title">20 Years of Real Estate Excellence</h4>
<p className="text-colorText3">
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
</p>
</div>
</article>
</Link>
</div>
<div className="col-md-6 col-lg-3">
<Link href="/">
</div>
<div className="col-md-12 col-lg-4">
<div>
<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 className="flex justify-center">
<span className="icon box-modern-icon fa-map"></span>
</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.
<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>
</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 className="mt-4 text-lg">
<p>
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 are
committed to providing a personalized structure to each client, with on-site management & a robust
property management division. 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.
</p>
<p>
At Dynamic Realty, we offer a comprehensive range of realty services to meet the needs of our
customers in Central Georgia. 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. Get in touch with us today to find out more.
</p>
</div>
</div>
</div>
@ -109,101 +66,6 @@ export default function Home() {
</section>
<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 { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
type HeroSliderProps = {
onClickBook?: () => void;
@ -19,25 +18,27 @@ type HeroSlideItem = {
export default function HeroSlider({ onClickBook }: HeroSliderProps) {
const [slideItems] = useState<HeroSlideItem[]>([
{
title: "Real Estate, Redefined",
description: "Where Southern Charm Meets Boutique Real Estate",
title: "Full-Service Veteran-Owned Real Estate Company",
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",
},
{
title: "Your Vision, Our Expertise",
description: "Discover a Smarter Way to Buy & Sell",
title: "Comprehensive Range of Realty Services",
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",
},
]);
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
className="absolute w-full h-full"
modules={[Autoplay]}
spaceBetween={50}
slidesPerView={1}
autoplay={{ delay: 4000 }}
autoplay={{ delay: 10000 }}
loop
>
{slideItems.map((slide, idx) => (
@ -52,21 +53,29 @@ export default function HeroSlider({ onClickBook }: HeroSliderProps) {
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="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="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}
</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}
</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">
BOOK APPOINTMENT
</button>
</div>
</div> */}
<div className="context-dark flex flex-row justify-center lg:hidden">
<a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
Call Us
@ -80,7 +89,7 @@ export default function HeroSlider({ onClickBook }: HeroSliderProps) {
))}
</Swiper>
<ContactFormBox />
{/* <ContactFormBox /> */}
</section>
);
}

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

@ -2,7 +2,6 @@
import HeroSlider from "@/components/HeroSlider";
import { useRef } from "react";
import ContactFormSection from "../ContactFormSection";
export default function HomeTopSection() {
const formRef = useRef<HTMLDivElement | null>(null);
@ -15,9 +14,9 @@ export default function HomeTopSection() {
<>
<HeroSlider onClickBook={scrollToForm} />
<div className="lg:hidden" ref={formRef}>
{/* <div className="lg:hidden" ref={formRef}>
<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";
import { useEffect } from "react";
import { useLatestPropertyQuery } from "../../services/hooks/property";
import { formatCurrency } from "@/utils/general";
export default async function Footer() {
const headersList = await headers();
const fullUrl = headersList.get("x-full-url");
export default function Footer() {
const { data, _fetch } = useLatestPropertyQuery();
useEffect(() => {
_fetch();
}, []);
const latestProperties = data ? data.slice(0, 2) : [];
const shareUrl = {
facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
};
return (
<>
@ -23,25 +20,7 @@ export default function Footer() {
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
<span className="heading-square-item"></span>Latest Properties
</h3>
{latestProperties && 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>
))
) : (
<div>Data Not Available</div>
)}
<ListOfFeaturedProperiesFooter />
</div>
<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">
@ -105,16 +84,13 @@ export default function Footer() {
</form> */}
<ul className="list-inline-1 space-x-5">
<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>
<a className="icon fa-twitter text-4xl!" href="#"></a>
<a target="_blank" className="icon fa-twitter text-4xl!" href={shareUrl.twitter}></a>
</li>
<li>
<a className="icon fa-google-plus text-4xl!" href="#"></a>
</li>
<li>
<a className="icon fa-pinterest-p text-4xl!" href="#"></a>
<a target="_blank" className="icon fa-linkedin text-4xl!" href={shareUrl.linkedin}></a>
</li>
</ul>
</div>
@ -133,11 +109,11 @@ export default function Footer() {
</p>
</div>
<div className="col-sm-6 text-sm-right">
<div className="right-1">
{/* <div className="right-1">
<a href="#">
<span className="icon mdi mdi-plus"></span>Book Appointment
</a>
</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">
<form>
<div className="form-wrap">
<input type="text" id="search" className="form-input" />
<label className="form-label" htmlFor="search">
Search
</label>
<input
type="text"
id="search"
className="form-input border-colorHeader!"
placeholder="Search"
/>
</div>
</form>
</div>
@ -118,7 +120,7 @@ export default function Header() {
<HeaderFeaturedHomes />
</div>
</HeaderDropdownGroup>
<HeaderDropdownGroup title="Why Dynamic?">
<HeaderDropdownGroup title="Why Dynamic Realty?">
<HeaderDropdownMenu
list={[
{
@ -214,10 +216,12 @@ export default function Header() {
<div className="pr-2">
<form>
<div className="form-wrap">
<input type="text" id="search" className="form-input" />
<label className="form-label" htmlFor="search">
Search
</label>
<input
type="text"
id="search"
className="form-input border-colorHeader!"
placeholder="Search"
/>
</div>
</form>
</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>
))}
</>
);
}