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

dev #12

Merged
RizqiSyahrendra merged 13 commits from dev into main 2025-04-28 20:55:27 +00:00
Conversation 0 Commits 13 Files Changed 34 +136 -248
9 changed files with 136 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 19b82640ee - Show all commits

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);

202
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>
<div className="col-md-6 col-lg-3"> </div>
<Link href="/"> <div className="col-md-12 col-lg-4">
<div>
<article className="box-modern"> <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"> <div className="box-modern-main">
<h4 className="box-modern-title">Sell</h4> <h4 className="box-modern-title">20 Years of Real Estate Excellence</h4>
<p> <p className="text-colorText3">
List your property with ease and reach potential buyers quickly with our expert marketing support. 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>
</div> </div>
</article> </article>
</Link>
</div> </div>
<div className="col-md-6 col-lg-3"> </div>
<Link href="/"> <div className="col-md-12 col-lg-4">
<div>
<article className="box-modern"> <article className="box-modern">
<span className="icon box-modern-icon fl-bigmug-line-timer35"></span> <div className="flex justify-center">
<div className="box-modern-main"> <span className="icon box-modern-icon fa-map"></span>
<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> </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"> <div className="box-modern-main">
<h4 className="box-modern-title">Need Help?</h4> <h4 className="box-modern-title">Expert Guidance, Stress-Free Journeys</h4>
<p> <p className="text-colorText3">
Have questions? Our support team is here to guide you through every step of your real estate We understand the real estate sector inside out & are committed to providing a professional
journey. service to our clients. We strive to make the process of reaching your real estate goals as easy &
stress-free as possible
</p> </p>
</div> </div>
</article> </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> </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>
))}
</>
);
}