add MR
This commit is contained in:
parent
434c5a6cfc
commit
eaa6543a3f
13466
package-lock.json
generated
Normal file
13466
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,13 +21,16 @@
|
||||
"clsx": "^2.1.1",
|
||||
"country-state-city": "^3.2.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"framer-motion": "^12.9.2",
|
||||
"graphql": "^16.8.1",
|
||||
"lucide-react": "^0.503.0",
|
||||
"next": "15.3.0",
|
||||
"payload": "^3.35.1",
|
||||
"qs-esm": "^7.0.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.56.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-select": "^5.10.1",
|
||||
"react-toastify": "^11.0.5",
|
||||
"swiper": "^11.2.6",
|
||||
|
||||
@ -11756,6 +11756,7 @@ html.tablet .ui-to-top {
|
||||
.rd-navbar-static .rd-megamenu-list > li > a {
|
||||
position: relative;
|
||||
padding-left: 17px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.rd-navbar-static .rd-navbar-dropdown > li > a::before,
|
||||
@ -12452,7 +12453,7 @@ html.rd-navbar-fixed-linked .page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
padding: 22px 60px 22px 0;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
|
||||
BIN
public/images/other/loading.gif
Normal file
BIN
public/images/other/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/images/other/oval_arrow_down.png
Normal file
BIN
public/images/other/oval_arrow_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/images/other/oval_arrow_up.png
Normal file
BIN
public/images/other/oval_arrow_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/images/other/payment1.png
Normal file
BIN
public/images/other/payment1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/images/other/payment2.png
Normal file
BIN
public/images/other/payment2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/images/other/payment3.png
Normal file
BIN
public/images/other/payment3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/images/other/payment4.png
Normal file
BIN
public/images/other/payment4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/images/other/payment5.png
Normal file
BIN
public/images/other/payment5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/images/other/payment6.png
Normal file
BIN
public/images/other/payment6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/images/photos.webp
Normal file
BIN
public/images/photos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@ -13,7 +13,7 @@
|
||||
--font-montserrat: var(--font-montserrat);
|
||||
--font-playfairdisplay: var(--font-playfairdisplay);
|
||||
--color-colorExt10: #0a0a0a;
|
||||
--color-colorExt20: #ffffff;
|
||||
--color-colorExt20: #ffffff;
|
||||
--color-colorExt21: #f3f4f9;
|
||||
--color-colorExt30: #967244;
|
||||
--color-colorext40: #bc986b;
|
||||
@ -44,12 +44,32 @@
|
||||
--color-colorLinkText2: var(--color-colorext40);
|
||||
}
|
||||
|
||||
@theme {
|
||||
/* Gold color palette */
|
||||
--color-gold-100: #faf3e0;
|
||||
--color-gold-500: #d4af37;
|
||||
--color-gold-600: #c9a227;
|
||||
--color-gold-700: #bd9717;
|
||||
|
||||
/* Dark color palette */
|
||||
--color-dark-800: #1a1a1a;
|
||||
--color-dark-900: #0d0d0d;
|
||||
|
||||
/* Animation durations and easing */
|
||||
--animation-fade-in-up: fadeInUp 0.6s ease-out;
|
||||
--animation-fade-in: fadeIn 0.8s ease-in;
|
||||
|
||||
/* Keyframe references (you'll still need to define these separately) */
|
||||
--keyframes-fade-in-up: fadeInUp;
|
||||
--keyframes-fade-in: fadeIn;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.rd-nav-link-custom {
|
||||
@apply text-colorHeader! lg:text-colorHeaderText! lg:hover:text-colorHeaderTextHover!
|
||||
@apply text-colorHeader! lg:text-colorHeaderText! lg:hover:text-colorHeaderTextHover!;
|
||||
}
|
||||
.rd-nav-link-custom.active {
|
||||
@apply text-colorHeader! lg:text-colorHeaderTextHover! lg:hover:text-colorHeaderTextHover!
|
||||
@apply text-colorHeader! lg:text-colorHeaderTextHover! lg:hover:text-colorHeaderTextHover!;
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,4 +86,65 @@ body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}
|
||||
.ie-panel {
|
||||
display: none;
|
||||
background: #212121;
|
||||
padding: 10px 0;
|
||||
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
clear: both;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
html.ie-10 .ie-panel,
|
||||
html.lt-ie-10 .ie-panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
.shimmer-effect {
|
||||
animation: shimmer 2s infinite linear;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0.05) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
.input-focus-effect:focus {
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
.transition-smooth {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.process_item:nth-child(odd)::before {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: -1.9rem;
|
||||
width: 7.5rem;
|
||||
height: 3.5rem;
|
||||
background: url('/images/other/oval_arrow_down.png') center / contain no-repeat;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.process_item:nth-child(even)::before {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
right: -1.9rem;
|
||||
width: 7.5rem;
|
||||
height: 3.5rem;
|
||||
background: url('/images/other/oval_arrow_up.png') center / contain no-repeat;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.process_item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
23
src/app/(main)/home2/page.tsx
Normal file
23
src/app/(main)/home2/page.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import RealEstateForm from "@/components/RealEstateForm";
|
||||
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
||||
import HomeTopSection from "@/components/homes/HomeTopSection";
|
||||
import RealEstateContent from "@/components/RealEstateContent";
|
||||
import AboutUs from "@/components/AboutUs";
|
||||
import ContactSection from "@/components/ContactSection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<HomeTopSection />
|
||||
<AboutUs />
|
||||
<section className="!flex !flex-row px-[5vw] bg-black py-16 gap-5">
|
||||
<div className="w-1/2">
|
||||
<RealEstateContent />
|
||||
</div>
|
||||
<RealEstateForm />
|
||||
</section>
|
||||
<GoogleReviewBox />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,99 +1,48 @@
|
||||
import ContactFormSection from "@/components/ContactFormSection";
|
||||
import RealEstateForm from "@/components/RealEstateForm";
|
||||
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
||||
import HomeTopSection from "@/components/homes/HomeTopSection";
|
||||
import Image from "next/image";
|
||||
import RealEstateContent from "@/components/RealEstateContent";
|
||||
import Category from "@/components/Categories";
|
||||
import Featured from "@/components/Featured";
|
||||
import AboutUs from "@/components/AboutUs";
|
||||
import ContactSection from "@/components/ContactSection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<HomeTopSection />
|
||||
|
||||
<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-12 col-lg-4">
|
||||
<div>
|
||||
<article className="box-modern">
|
||||
<div className="flex">
|
||||
<div className="w-full h-44 bg-colorHeroOverlay relative">
|
||||
<AboutUs />
|
||||
<section className="!flex !flex-row px-[5vw] bg-black py-16 gap-5">
|
||||
<div className="w-1/2">
|
||||
<RealEstateContent />
|
||||
</div>
|
||||
<RealEstateForm />
|
||||
</section>
|
||||
<Featured />
|
||||
<Category />
|
||||
<GoogleReviewBox />
|
||||
<ContactSection />
|
||||
{/* <Slider>
|
||||
{sliderData.map((q, idx) => (
|
||||
<article key={idx} className="!flex w-full shadow-md m-5">
|
||||
<div>
|
||||
<div className="w-[350px] h-[350px] relative">
|
||||
<Image
|
||||
className="object-cover"
|
||||
src="/images/why1.jpg"
|
||||
src={`/images/home${idx + 1}.jpg`}
|
||||
alt="Tailored Management, Trusted Care"
|
||||
quality={100}
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box-modern-main">
|
||||
<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 className="flex flex-col justify-center px-5">
|
||||
<h4 className="box-modern-title !text-2xl">{q.title}</h4>
|
||||
<p className="text-colorText3 !text-xl">{q.description}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div>
|
||||
<article className="box-modern">
|
||||
<div className="flex">
|
||||
<div className="w-full h-44 bg-colorHeroOverlay relative">
|
||||
<Image
|
||||
className="object-cover"
|
||||
src="/images/why2.jpg"
|
||||
alt="20 Years of Real Estate Excellence"
|
||||
quality={100}
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box-modern-main">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div>
|
||||
<article className="box-modern">
|
||||
<div className="flex">
|
||||
<div className="w-full h-44 bg-colorHeroOverlay relative">
|
||||
<Image
|
||||
className="object-cover"
|
||||
src="/images/why3.jpg"
|
||||
alt="Expert Guidance, Stress-Free Journeys"
|
||||
quality={100}
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<GoogleReviewBox />
|
||||
|
||||
<ContactFormSection />
|
||||
))}
|
||||
</Slider> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
53
src/components/AboutUs.tsx
Normal file
53
src/components/AboutUs.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
"use client"; // Required for animations and interactivity
|
||||
|
||||
import Image from "next/image";
|
||||
import WhyChooseUs from "./WhyChooseUs";
|
||||
|
||||
export default function AboutUs() {
|
||||
// Initialize animations
|
||||
|
||||
return (
|
||||
<section className="container bg-white py-16 px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="heading-decoration-1 pb-16">
|
||||
<span className="heading-inner">Why Dynamic Realty?</span>
|
||||
</h2>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-12">
|
||||
{/* Text Content (Left) */}
|
||||
<div className="lg:w-full space-y-6" data-aos="fade-right">
|
||||
<p className="text-lg text-gray-600">
|
||||
<span className="font-semibold text-gold-600">DYNAMIC REALTY</span> is a full-service veteran-owned real
|
||||
estate company based in Centerville, GA, established in 2004.
|
||||
</p>
|
||||
<p className="text-lg text-gray-600">
|
||||
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>
|
||||
|
||||
<div className="pt-2">
|
||||
<span className="text-lg italic font-medium text-gold-600">Making Moves, Building Trust.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image (Right) */}
|
||||
<div className="lg:w-full" data-aos="fade-left">
|
||||
<div className="relative rounded-lg overflow-hidden shadow-xl aspect-video">
|
||||
<Image
|
||||
src="/images/portrait-of-smiling-mature-couple-standing-in-fron-2024-09-21-17-43-42-utc.webp"
|
||||
alt="Dynamic Realty Team"
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 hover:scale-105 h-full"
|
||||
priority
|
||||
/>
|
||||
{/* Optional: Overlay for visual polish */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WhyChooseUs />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
93
src/components/Categories.tsx
Normal file
93
src/components/Categories.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
export default function Category() {
|
||||
return (
|
||||
<section className="section section-lg bg-default">
|
||||
<div className="container">
|
||||
<h2 className="heading-decoration-1">
|
||||
<span className="heading-inner">Categories</span>
|
||||
</h2>
|
||||
<div className="row row-30">
|
||||
<div className="col-md-6 col-lg-7">
|
||||
<article className="box-category-outer">
|
||||
<a className="box-category context-dark" href="search-results.html">
|
||||
<div
|
||||
className="box-category-image-outer"
|
||||
style={{ backgroundImage: "url(images/featured-properties-17-480x287.jpg)" }}
|
||||
></div>
|
||||
<div className="box-category-caption">
|
||||
<div className="box-category-caption-inner">
|
||||
<h3 className="box-category-title">Studio Apartments</h3>
|
||||
<p className="box-category-subtitle">8 Properties</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-5">
|
||||
<article className="box-category-outer">
|
||||
<a className="box-category context-dark" href="search-results.html">
|
||||
<div
|
||||
className="box-category-image-outer"
|
||||
style={{ backgroundImage: "url(images/featured-properties-17-480x287.jpg)" }}
|
||||
></div>
|
||||
<div className="box-category-caption">
|
||||
<div className="box-category-caption-inner">
|
||||
<h3 className="box-category-title">Swimming Pool</h3>
|
||||
<p className="box-category-subtitle">8 Properties</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="box-category-outer">
|
||||
<a className="box-category context-dark" href="search-results.html">
|
||||
<div
|
||||
className="box-category-image-outer "
|
||||
style={{ backgroundImage: "url(images/featured-properties-17-480x287.jpg)" }}
|
||||
></div>
|
||||
<div className="box-category-caption">
|
||||
<div className="box-category-caption-inner">
|
||||
<h3 className="box-category-title">Luxury Houses</h3>
|
||||
<p className="box-category-subtitle">8 Properties</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="box-category-outer">
|
||||
<a className="box-category context-dark" href="search-results.html">
|
||||
<div
|
||||
className="box-category-image-outer"
|
||||
style={{ backgroundImage: "url(images/featured-properties-17-480x287.jpg)" }}
|
||||
></div>
|
||||
<div className="box-category-caption">
|
||||
<div className="box-category-caption-inner">
|
||||
<h3 className="box-category-title">Extra Bedroom</h3>
|
||||
<p className="box-category-subtitle">8 Properties</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="box-category-outer">
|
||||
<a className="box-category context-dark" href="search-results.html">
|
||||
<div
|
||||
className="box-category-image-outer"
|
||||
style={{ backgroundImage: "url(images/featured-properties-17-480x287.jpg)" }}
|
||||
></div>
|
||||
<div className="box-category-caption">
|
||||
<div className="box-category-caption-inner">
|
||||
<h3 className="box-category-title">Cozy Houses</h3>
|
||||
<p className="box-category-subtitle">8 Properties</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
130
src/components/ContactSection.tsx
Normal file
130
src/components/ContactSection.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<section className="section mb-16 bg-default">
|
||||
<div className="container">
|
||||
<div className="layout-bordered !gap-16 mt-16">
|
||||
<div className="">
|
||||
<div className="">
|
||||
<h2>Contact Details</h2>
|
||||
<p>
|
||||
If you have any questions, just fill in the contact form, and we will answer you shortly. If you are
|
||||
living nearby, come visit our office.
|
||||
</p>
|
||||
<div className="my-3" style={{ position: "relative" }}>
|
||||
<div style={{ position: "relative", height: "300px", overflow: "hidden" }}>
|
||||
<iframe
|
||||
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: 0 }}
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
src="https://maps.google.com/maps?q=100+N+Houston+Lake+Blvd.+Ste.+V+Centerville%2C+GA+31028&output=embed"
|
||||
title="Google Map"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<dl className="text-md">
|
||||
<dd>
|
||||
<span className="icon mr-2 my-2 mdi-phone mdi"></span>
|
||||
<a className="" href="tel:+14782259061">
|
||||
(478) 225 9061
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl className="text-md">
|
||||
<dd>
|
||||
<span className="icon mr-2 my-2 mdi mdi-email-outline"></span>
|
||||
<a href="mailto:dynamic@dynamicrealtyga.com">dynamic@dynamicrealtyga.com</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl className="text-md">
|
||||
<dd>
|
||||
<span className="icon mr-2 my-2 mdi mdi-map-marker"></span>
|
||||
<a href="https://maps.app.goo.gl/rqwVSiSpP4UMn5un7">
|
||||
100 N Houston Lake Blvd. Centerville, GA 31028, United States
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-bordered-main">
|
||||
<div className="layout-bordered-main-inner">
|
||||
<h2>Get in Touch</h2>
|
||||
<form
|
||||
className="rd-form rd-mailform"
|
||||
data-form-output="form-output-global"
|
||||
data-form-type="contact"
|
||||
method="post"
|
||||
>
|
||||
<div className="row row-20">
|
||||
<div className="col-md-12">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="contact-name"
|
||||
type="text"
|
||||
name="name"
|
||||
data-constraints="@Required"
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="contact-email"
|
||||
type="email"
|
||||
name="email"
|
||||
data-constraints="@Email @Required"
|
||||
placeholder="Your Email Address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="contact-phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
placeholder="Your Phone Number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="subject"
|
||||
type="text"
|
||||
name="subject"
|
||||
placeholder="Your subject"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-wrap">
|
||||
<textarea
|
||||
className="form-input"
|
||||
id="contact-message"
|
||||
name="message"
|
||||
data-constraints="@Required"
|
||||
placeholder="Your Message"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<button className="button button-sm button-primary" type="submit">
|
||||
Send message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
300
src/components/Featured.tsx
Normal file
300
src/components/Featured.tsx
Normal file
@ -0,0 +1,300 @@
|
||||
export default function Featured() {
|
||||
return (
|
||||
<section className="section pt-36">
|
||||
<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="#">For Rent</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">For Sale</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row row-50">
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">401 Biscayne Boulevard, Miami</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>480 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>2 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$2500\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">923 Folsom St, San Francisco</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>535 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>9340\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">225 Maywood Dr, San Francisco</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>435 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>1 Bathroom</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>1 Bedroom</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5550\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">35 Pond St, New York</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>430 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$2520\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">182 3rd St, Seattle</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>630 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>3 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>2 Garages</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">623 Willow Rd, Dallas</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>530 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>2 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>2 Garages</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-12 text-center">
|
||||
<a className="button button-primary" href="properties-grid.html">
|
||||
View all properties
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
0
src/components/GetInTouchForm.tsx
Normal file
0
src/components/GetInTouchForm.tsx
Normal file
@ -1,9 +1,11 @@
|
||||
import { reviews } from "@/datas/reviews";
|
||||
|
||||
export default function GoogleReviewBox() {
|
||||
return (
|
||||
<section className="section section-lg bg-colorSection2">
|
||||
<div className="container">
|
||||
<h2 className="heading-decoration-1">
|
||||
<span className="heading-inner">Making Moves, Building Trust</span>
|
||||
<span className="heading-inner">What Our Residents Are Saying</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="container container-wide">
|
||||
@ -11,8 +13,8 @@ export default function GoogleReviewBox() {
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-md-items="2"
|
||||
data-lg-items="3"
|
||||
data-xl-items="4"
|
||||
data-lg-items="2"
|
||||
data-xl-items="3"
|
||||
data-dots="true"
|
||||
data-nav="false"
|
||||
data-stage-padding="0"
|
||||
@ -20,84 +22,31 @@ export default function GoogleReviewBox() {
|
||||
data-margin="30"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<article className="quote-modern">
|
||||
<div className="quote-modern-inner">
|
||||
<time className="quote-modern-time" dateTime="2021">
|
||||
March 15, 2021
|
||||
</time>
|
||||
<div className="quote-modern-main">
|
||||
<p>
|
||||
Your property managers have been active in their response to repairs and always patient with our
|
||||
frustrations. You have always found us wonderful tenants.
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Karen Sanders</h4>
|
||||
{reviews.map((q, idx) => (
|
||||
<article key={"review" + idx} className="!flex bg-white p-12 h-full">
|
||||
<div>
|
||||
<time className="quote-modern-time" dateTime="2021">
|
||||
{q.date}
|
||||
</time>
|
||||
<div className="quote-modern-main">
|
||||
<p>{q.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="quote-modern">
|
||||
<div className="quote-modern-inner">
|
||||
<time className="quote-modern-time" dateTime="2021">
|
||||
March 15, 2021
|
||||
</time>
|
||||
<div className="quote-modern-main">
|
||||
<p>
|
||||
We recently rented an apartment through your site, and have been looked after by James Thompson. He
|
||||
provided us with utmost support on every property issue.
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Walter Williams</h4>
|
||||
<h4 className="quote-modern-cite">{q.name}</h4>
|
||||
<p className="quote-modern-position">{q.job_title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="quote-modern">
|
||||
<div className="quote-modern-inner">
|
||||
<time className="quote-modern-time" dateTime="2021">
|
||||
March 15, 2021
|
||||
</time>
|
||||
<div className="quote-modern-main">
|
||||
<p>
|
||||
I have always found your team to be extremely prompt and professional with all dealings I have had
|
||||
with them. You always keep me updated on the progress.
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Kate Anderson</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="quote-modern">
|
||||
<div className="quote-modern-inner">
|
||||
<time className="quote-modern-time" dateTime="2021">
|
||||
March 15, 2021
|
||||
</time>
|
||||
<div className="quote-modern-main">
|
||||
<p>
|
||||
Your advice and support from our initial meeting through liaising with current tenants and a polished
|
||||
marketing program all contributed to a great sale process, thanks!
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta-outer">
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Peter Smith</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<img
|
||||
className="w-[200px] h-[200px] object-cover rounded-full"
|
||||
src={q.profile_pict}
|
||||
alt=""
|
||||
width="57"
|
||||
height="57"
|
||||
/>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -28,7 +28,7 @@ export default function HeroSlider() {
|
||||
]);
|
||||
|
||||
return (
|
||||
<section className="section flex! flex-row! justify-end! relative! min-h-[900px]! lg:min-h-[600px]!">
|
||||
<section className="section flex! flex-row! justify-center! relative! min-h-[900px]! lg:min-h-[700px]!">
|
||||
<Swiper
|
||||
className="absolute w-full h-full"
|
||||
modules={[Autoplay]}
|
||||
@ -49,7 +49,7 @@ export default function HeroSlider() {
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
<section className="section section-lg text-colorText2! bg-colorHeroOverlay/70 w-full h-full z-20">
|
||||
<section className="section section-lg text-colorText2! bg-colorHeroOverlay/70 w-full h-full z-20 !flex flex-col">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-4 flex justify-center">
|
||||
|
||||
188
src/components/ProcessStep.tsx
Normal file
188
src/components/ProcessStep.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
"use client";
|
||||
|
||||
const ProcessSteps = () => {
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
icon: "icon-consultation",
|
||||
image: "/images/process/1.jpg",
|
||||
title: "Your information",
|
||||
desc: "WInitial consultation to understand your needs, preferences, and budget.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: "icon-design",
|
||||
image: "/images/process/2.jpg",
|
||||
title: "Co-signer contact information",
|
||||
desc: "Financial review and co-signer verification if required.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: "icon-wrench",
|
||||
image: "/images/process/3.jpg",
|
||||
title: "Review Application",
|
||||
desc: "Property evaluation and document review with your agent.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: "icon-inspection",
|
||||
image: "/images/process/4.jpg",
|
||||
title: "Payment",
|
||||
desc: "Secure transaction processing and deposit handling.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
icon: "icon-inspection",
|
||||
image: "/images/process/4.jpg",
|
||||
title: "Fast Delivery & Project Success",
|
||||
desc: "We deliver exactly what you need, when you need it. From your first quote to your final stone, we’re here to make sure your job gets done—on time and on point.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={`section container process`}>
|
||||
<div className="box-info-aside">
|
||||
<div
|
||||
className="card-group-custom card-group-corporate"
|
||||
id="accordion1"
|
||||
role="tablist"
|
||||
aria-multiselectable="false"
|
||||
>
|
||||
<article className="card card-custom card-corporate">
|
||||
<div className="card-header" id="accordion1-heading-1" role="tab">
|
||||
<div className="card-title">
|
||||
<a
|
||||
className="card-link"
|
||||
role="button"
|
||||
data-toggle="collapse"
|
||||
href="#accordion1-collapse-1"
|
||||
aria-controls="accordion1-collapse-1"
|
||||
aria-expanded="true"
|
||||
>
|
||||
<span>Why should I refer to a MyHome salesperson?</span>
|
||||
<div className="card-arrow"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="collapse show"
|
||||
id="accordion1-collapse-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="accordion1-heading-1"
|
||||
data-parent="#accordion1"
|
||||
>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
A MyHome salesperson is more than just a “sales person.” They act on your behalf as your agent,
|
||||
providing you with advice and guidance and doing a job – helping you buy or sell a home. While it is
|
||||
true they get paid for what they do, so do other professions that provide advice, guidance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="card card-custom card-corporate">
|
||||
<div className="card-header" id="accordion1-heading-2" role="tab">
|
||||
<div className="card-title">
|
||||
<a
|
||||
className="card-link collapsed"
|
||||
role="button"
|
||||
data-toggle="collapse"
|
||||
href="#accordion1-collapse-2"
|
||||
aria-controls="accordion1-collapse-2"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span>Should I talk with a bank before looking at homes?</span>
|
||||
<div className="card-arrow"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="collapse"
|
||||
id="accordion1-collapse-2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="accordion1-heading-2"
|
||||
data-parent="#accordion1"
|
||||
>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
The answer to the question is YES! There are tons of reasons why you should talk with a bank and get
|
||||
pre-approved before looking at homes. First and foremost, talking with a bank before looking at homes
|
||||
can help you understand exactly how much you can afford. There is no reason to look at homes that are
|
||||
listed for $250,000 if you can only afford up to $200,000.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="card card-custom card-corporate">
|
||||
<div className="card-header" id="accordion1-heading-3" role="tab">
|
||||
<div className="card-title">
|
||||
<a
|
||||
className="card-link collapsed"
|
||||
role="button"
|
||||
data-toggle="collapse"
|
||||
href="#accordion1-collapse-3"
|
||||
aria-controls="accordion1-collapse-3"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span>Should I buy or continue to rent?</span>
|
||||
<div className="card-arrow"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="collapse"
|
||||
id="accordion1-collapse-3"
|
||||
role="tabpanel"
|
||||
aria-labelledby="accordion1-heading-3"
|
||||
data-parent="#accordion1"
|
||||
>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
Buying a home can be a very solid investment. This being said, renting can also be a better option for
|
||||
some, depending on the circumstances. The current interest rates are incredible. A 30-year FHA
|
||||
mortgage can be locked in at a rate of around 3.5%. Since the interest rates are so low, it actually
|
||||
can be cheaper to pay a mortgage right now than paying rent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article className="card card-custom card-corporate">
|
||||
<div className="card-header" id="accordion1-heading-4" role="tab">
|
||||
<div className="card-title">
|
||||
<a
|
||||
className="card-link collapsed"
|
||||
role="button"
|
||||
data-toggle="collapse"
|
||||
href="#accordion1-collapse-4"
|
||||
aria-controls="accordion1-collapse-4"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span>Can I find a rent-to-own property?</span>
|
||||
<div className="card-arrow"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="collapse"
|
||||
id="accordion1-collapse-4"
|
||||
role="tabpanel"
|
||||
aria-labelledby="accordion1-heading-4"
|
||||
data-parent="#accordion1"
|
||||
>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
Of course you can, but the probability isn’t very high. The same can be said about a rent-to-own
|
||||
property. A common question from home buyers is whether rent-to-owns exist or whether an owner would
|
||||
consider that option. They are out there, but there are somethings that you need to know before
|
||||
agreeing to a rent-to-own.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessSteps;
|
||||
50
src/components/RealEstateContent.tsx
Normal file
50
src/components/RealEstateContent.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
const RealEstateContent = () => {
|
||||
return (
|
||||
<div className="flex flex-col justify-center animate-fade-in-up">
|
||||
<div className="mb-6">
|
||||
<img
|
||||
src="/images/photos.webp"
|
||||
alt="Dynamic Realty Team"
|
||||
className="object-cover duration-500 hover:scale-105 !h-[450px] !w-full"
|
||||
/>
|
||||
<div className="w-16 h-1 bg-gold-500 mb-4"></div>
|
||||
<h1 className="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
|
||||
Discover Your <span className="text-gold-500">Dream</span> Residence
|
||||
</h1>
|
||||
<p className="text-gray-300 text-lg">
|
||||
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>
|
||||
|
||||
<button></button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureItem = ({ text }: { text: string }) => {
|
||||
return (
|
||||
<div className="flex items-end">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="w-5 h-5 text-gold-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="ml-3 text-gray-300">{text}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RealEstateContent;
|
||||
261
src/components/RealEstateForm.tsx
Normal file
261
src/components/RealEstateForm.tsx
Normal file
@ -0,0 +1,261 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
|
||||
const RealEstateForm = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
comments: "",
|
||||
subject: "",
|
||||
privacy: false,
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
const checked = type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted:", formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-dark rounded-xl shadow-2xl overflow-hidden border border-gray-700 animate-fade-in-up m-auto"
|
||||
style={{ animationDelay: "0.2s" }}
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="text-center mb-8">
|
||||
<img
|
||||
className="brand-logo-dark mb-3"
|
||||
src="/images/logo2.png"
|
||||
alt=""
|
||||
width="242"
|
||||
height="41"
|
||||
srcSet="/images/logo2.png 2x"
|
||||
/>
|
||||
<h2 className="text-2xl font-serif font-bold text-white mb-2">
|
||||
Interested in <span className="text-gold-500">buying or selling</span> ?
|
||||
</h2>
|
||||
<p className="text-gray-400">Leave us your info and we will get back to you.</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-dark-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-gold-500 input-focus-effect transition-smooth"
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-dark-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-gold-500 input-focus-effect transition-smooth"
|
||||
placeholder="Your Email Address"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-dark-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-gold-500 input-focus-effect transition-smooth"
|
||||
placeholder="Your Phone Number"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="subject"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-dark-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-gold-500 input-focus-effect transition-smooth"
|
||||
placeholder="Type the subject"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
id="comments"
|
||||
name="comments"
|
||||
rows={4}
|
||||
value={formData.comments}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-dark-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-gold-500 input-focus-effect transition-smooth"
|
||||
placeholder="Any specific requirements or questions?"
|
||||
/>
|
||||
<div className="absolute bottom-3 right-3 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-dark-900 bg-gold-500 hover:bg-gold-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500 transition-smooth transform hover:scale-[1.02]"
|
||||
>
|
||||
Request Consultation
|
||||
<svg
|
||||
className="ml-2 -mr-1 w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="bg-[rgb(0,0,0,0.5)] px-8 py-4 border-t border-gray-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg
|
||||
className="h-5 w-5 text-gold-500"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="text-sm text-gray-300">Dynamic Reality</span>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<a href="https://facebook.com" target="_blank" className="text-gray-400 hover:text-gold-500 transition-all">
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 12.07C22 6.48 17.52 2 12 2S2 6.48 2 12.07c0 4.84 3.44 8.84 7.94 9.74v-6.9H7.08v-2.84h2.86V9.84c0-2.83 1.69-4.39 4.27-4.39 1.24 0 2.54.22 2.54.22v2.8h-1.43c-1.41 0-1.84.88-1.84 1.78v2.14h3.13l-.5 2.84h-2.63v6.9c4.5-.9 7.94-4.9 7.94-9.74z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
className="text-gray-400 hover:text-gold-500 transition-all"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M7 2C4.2 2 2 4.2 2 7v10c0 2.8 2.2 5 5 5h10c2.8 0 5-2.2 5-5V7c0-2.8-2.2-5-5-5H7zm10 2c1.7 0 3 1.3 3 3v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V7c0-1.7 1.3-3 3-3h10zm-5 3c-2.2 0-4 1.8-4 4s1.8 4 4 4a4 4 0 0 0 0-8zm0 6.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM17.5 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RealEstateForm;
|
||||
20
src/components/Slider.tsx
Normal file
20
src/components/Slider.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function Slider({ children }) {
|
||||
return (
|
||||
<div
|
||||
className="owl-carousel owl-carousel-stretch"
|
||||
data-items="1"
|
||||
data-sm-items="1"
|
||||
data-md-items="1"
|
||||
data-dots="true"
|
||||
data-nav="false"
|
||||
data-stage-padding="1"
|
||||
data-loop="false"
|
||||
data-margin="30"
|
||||
data-autoplay="true"
|
||||
data-autoplay-speed="3000"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/components/WhyChooseUs.tsx
Normal file
49
src/components/WhyChooseUs.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
const points = [
|
||||
{
|
||||
title: "Personalized Approach",
|
||||
content:
|
||||
"Committed to providing a tailored structure to each client, with on-site management & a robust property management division.",
|
||||
icon: "👔", // or use an actual icon library
|
||||
},
|
||||
{
|
||||
title: "20 Years of Trust",
|
||||
content:
|
||||
"We strive to meet all our customers' needs and are proud to have helped people with real estate for the past two decades.",
|
||||
icon: "🏆",
|
||||
},
|
||||
{
|
||||
title: "Stress-Free Experience",
|
||||
content:
|
||||
"We understand real estate inside out and are committed to making your property journey as smooth as possible.",
|
||||
icon: "✨",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-white py-16 ">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{points.map((point, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="text-3xl mb-4">{point.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">{point.title}</h3>
|
||||
<p className="text-gray-600">{point.content}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -53,35 +53,19 @@ export default async function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
{/* <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
|
||||
<span className="heading-square-item"></span>Newsletter Signup
|
||||
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
|
||||
<span className="heading-square-item" style={{ top: "14px" }}></span>Hours of Operations
|
||||
</h3>
|
||||
<p className="rd-mailform-label">Enter your e-mail to get the latest news of MyHome</p>
|
||||
<form
|
||||
className="rd-form rd-mailform rd-form-inline-1"
|
||||
data-form-output="form-output-global"
|
||||
data-form-type="subscribe"
|
||||
method="post"
|
||||
action="bat/rd-mailform.php"
|
||||
>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="subscribe-form--email"
|
||||
type="email"
|
||||
name="email"
|
||||
data-constraints="@Email @Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="subscribe-form--email">
|
||||
Your e-mail
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-button">
|
||||
<button className="button button-primary button-square" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form> */}
|
||||
<div className="text-spacing-100" data-item=".icon">
|
||||
Mon-Thu: 10am-5pm
|
||||
</div>
|
||||
<div className="text-spacing-100" data-item=".icon">
|
||||
Fri: 10am-2pm
|
||||
</div>
|
||||
<div className="text-spacing-100" data-item=".icon">
|
||||
Sat & Sun: Closed
|
||||
</div>
|
||||
<ul className="list-inline-1 space-x-5">
|
||||
<li>
|
||||
<a target="_blank" className="icon fa-facebook text-4xl!" href={shareUrl.facebook}></a>
|
||||
|
||||
@ -22,7 +22,7 @@ export default function Header() {
|
||||
data-xl-stick-up="true"
|
||||
data-xxl-stick-up="true"
|
||||
>
|
||||
<div className="rd-navbar-aside-outer">
|
||||
{/* <div className="rd-navbar-aside-outer">
|
||||
<div className="rd-navbar-aside">
|
||||
<div
|
||||
className="rd-navbar-collapse-toggle rd-navbar-fixed-element-1"
|
||||
@ -52,22 +52,11 @@ export default function Header() {
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="rd-navbar-aside-item hidden lg:block">
|
||||
<div className="block-inline">
|
||||
<div className="unit unit-spacing-xs align-items-center">
|
||||
<span className="unit-left">
|
||||
<span className="icon text-middle mdi mdi-login"></span>
|
||||
</span>
|
||||
<span className="unit-body">
|
||||
<a href="/admin/login">Login</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="rd-navbar-main-outer">
|
||||
<div className="rd-navbar-main">
|
||||
<div className="rd-navbar-main !h-full">
|
||||
<div className="rd-navbar-panel">
|
||||
<button className="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
|
||||
<span></span>
|
||||
@ -337,6 +326,18 @@ export default function Header() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="rd-navbar-aside-item hidden lg:block">
|
||||
<div className="block-inline">
|
||||
<div className="unit unit-spacing-xs align-items-center">
|
||||
<span className="unit-left">
|
||||
<span className="icon text-middle mdi mdi-login"></span>
|
||||
</span>
|
||||
<span className="unit-body text-[16px]">
|
||||
<a href="/admin/login">Login</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -58,7 +58,7 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
|
||||
</a>
|
||||
<div className="pl-3 mt-2 space-y-2 collapse visible!" id={collapseId}>
|
||||
{item.child.map((itemChild, itemChildIdx) => (
|
||||
<a key={itemChildIdx} className={`rd-megamenu-list-link ${hrefClass}`} href={itemChild.href}>
|
||||
<a key={itemChildIdx} className={`rd-megamenu-list-link !pr-12 ${hrefClass}`} href={itemChild.href}>
|
||||
- {itemChild.title}
|
||||
</a>
|
||||
))}
|
||||
|
||||
@ -7,18 +7,15 @@ export default function HeaderFeaturedHomes() {
|
||||
"/images/home1.jpg",
|
||||
"/images/home2.jpg",
|
||||
"/images/home3.jpg",
|
||||
"/images/home4.jpg",
|
||||
"/images/home5.jpg",
|
||||
"/images/home6.jpg",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1">
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{images.map((src, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="overflow-hidden rounded-lg shadow hover:shadow-lg transition-shadow duration-300 relative h-16"
|
||||
className="overflow-hidden rounded-lg shadow hover:shadow-lg transition-shadow duration-300 relative h-[150px]"
|
||||
>
|
||||
<Image
|
||||
src={src}
|
||||
|
||||
76
src/components/services.tsx
Normal file
76
src/components/services.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Home, Star, Key, BarChart2, BookOpen } from "lucide-react";
|
||||
|
||||
export default function PremiumServices() {
|
||||
const services = [
|
||||
{
|
||||
icon: <Home className="w-6 h-6" />,
|
||||
title: "Tailored Recommendations",
|
||||
description: "Property selections matching your unique lifestyle and investment goals",
|
||||
},
|
||||
{
|
||||
icon: <Star className="w-6 h-6" />,
|
||||
title: "Exclusive VIP Access",
|
||||
description: "Priority access to off-market and premium listings",
|
||||
},
|
||||
{
|
||||
icon: <Key className="w-6 h-6" />,
|
||||
title: "Dedicated Consultant",
|
||||
description: "Your personal luxury property expert guiding every step",
|
||||
},
|
||||
{
|
||||
icon: <BarChart2 className="w-6 h-6" />,
|
||||
title: "Full-Service Solutions",
|
||||
description: "End-to-end services: buying, selling, rentals, and management",
|
||||
},
|
||||
{
|
||||
icon: <BookOpen className="w-6 h-6" />,
|
||||
title: "Educational Resources",
|
||||
description: "Insights and tools for buyers, sellers, and investors",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-gray-900">
|
||||
<span className="text-blue-600">Premium</span> Services
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Experience real estate redefined with our exclusive offerings
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-blue-200 transition-all hover:shadow-lg"
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 rounded-full bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
||||
{service.icon}
|
||||
</div>
|
||||
<h3 className="ml-4 text-xl font-semibold text-gray-800">{service.title}</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 pl-16">{service.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
38
src/datas/home-slide.ts
Normal file
38
src/datas/home-slide.ts
Normal file
@ -0,0 +1,38 @@
|
||||
export const sliderData = [
|
||||
{
|
||||
title: "Tailored Management, Trusted Care",
|
||||
description:
|
||||
"Committed to providing a personalized structure to each client, with on-site management & a robust property management",
|
||||
},
|
||||
{
|
||||
title: "20 Years of Real Estate Excellence",
|
||||
description:
|
||||
"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",
|
||||
},
|
||||
{
|
||||
title: "Expert Guidance, Stress-Free Journeys",
|
||||
description:
|
||||
"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",
|
||||
},
|
||||
{
|
||||
title: "Responsive Service, Real Results",
|
||||
description:
|
||||
"Our team is always ready to respond quickly and efficiently, ensuring you receive the attention and solutions you need at every stage of your property journey.",
|
||||
},
|
||||
{
|
||||
title: "Integrity at Every Step",
|
||||
description:
|
||||
"We believe in doing the right thing. Our transparent and ethical approach builds trust and long-term relationships with every client.",
|
||||
},
|
||||
{
|
||||
title: "Innovative Solutions, Proven Success",
|
||||
description:
|
||||
"By leveraging modern tools and market knowledge, we deliver smart strategies that produce tangible results for buyers, sellers, and investors.",
|
||||
},
|
||||
{
|
||||
title: "Client-Focused, Community-Driven",
|
||||
description:
|
||||
"We don’t just manage properties—we build community connections. Our focus is always on the people we serve and the neighborhoods we support.",
|
||||
},
|
||||
|
||||
];
|
||||
30
src/datas/process.ts
Normal file
30
src/datas/process.ts
Normal file
@ -0,0 +1,30 @@
|
||||
export const processData = [
|
||||
{
|
||||
id: "1",
|
||||
icon: "icon-consultation",
|
||||
image: "/images/process/1.jpg",
|
||||
title: "Personalized Quote & Material Guidance",
|
||||
desc: "We start by learning about your project and recommending the best rock, gravel, or hardscape materials. You’ll get a clear, customized quote with no surprises.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: "icon-design",
|
||||
image: "/images/process/2.jpg",
|
||||
title: "Easy Ordering & Scheduling",
|
||||
desc: "Once you’re ready, we lock in your materials and schedule delivery or pickup at a time that keeps your project on track.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: "icon-wrench",
|
||||
image: "/images/process/3.jpg",
|
||||
title: "Expert Tips & On-Site Support",
|
||||
desc: "We’re more than a supplier—we’re a partner. Our team offers installation tips, layout guidance, and product insights to help you get it done right.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: "icon-inspection",
|
||||
image: "/images/process/4.jpg",
|
||||
title: "Fast Delivery & Project Success",
|
||||
desc: "We deliver exactly what you need, when you need it. From your first quote to your final stone, we’re here to make sure your job gets done—on time and on point.",
|
||||
},
|
||||
];
|
||||
78
src/datas/reviews.ts
Normal file
78
src/datas/reviews.ts
Normal file
@ -0,0 +1,78 @@
|
||||
export const reviews = [
|
||||
{
|
||||
date: "2025-04-25",
|
||||
comment:
|
||||
"Dynamic Realty made buying my first investment property incredibly smooth. Their attention to detail was unmatched.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/men/32.jpg",
|
||||
name: "James Carter",
|
||||
job_title: "Real Estate Investor, Atlanta GA",
|
||||
},
|
||||
{
|
||||
date: "2025-03-19",
|
||||
comment:
|
||||
"Professional, responsive, and extremely knowledgeable. They helped me sell my home above asking price in just 10 days.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/women/45.jpg",
|
||||
name: "Stephanie Morales",
|
||||
job_title: "Marketing Director",
|
||||
},
|
||||
{
|
||||
date: "2025-02-11",
|
||||
comment:
|
||||
"Their team is top-notch. From property management to leasing, everything was handled efficiently and respectfully.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/men/41.jpg",
|
||||
name: "Derrick Hughes",
|
||||
job_title: "Landlord & Rental Property Owner",
|
||||
},
|
||||
{
|
||||
date: "2025-01-30",
|
||||
comment: "I’ve worked with several agencies, but Dynamic Realty’s boutique approach felt personal and trustworthy.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/women/62.jpg",
|
||||
name: "Clara Newton",
|
||||
job_title: "Interior Designer",
|
||||
},
|
||||
{
|
||||
date: "2024-12-22",
|
||||
comment: "Their team made relocation effortless. From property tours to closing, they were with us at every step.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/men/54.jpg",
|
||||
name: "Tommy Reaves",
|
||||
job_title: "Military Veteran",
|
||||
},
|
||||
{
|
||||
date: "2024-11-10",
|
||||
comment:
|
||||
"I appreciated their transparency and knowledge about local market trends. I felt empowered to make the right decision.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/women/24.jpg",
|
||||
name: "Meghan Alston",
|
||||
job_title: "Tech Entrepreneur",
|
||||
},
|
||||
{
|
||||
date: "2024-10-05",
|
||||
comment: "What stood out was how they educated me through the process. I never felt rushed or uninformed.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/men/29.jpg",
|
||||
name: "Carlos Dunn",
|
||||
job_title: "First-Time Homebuyer",
|
||||
},
|
||||
{
|
||||
date: "2024-09-17",
|
||||
comment:
|
||||
"Truly boutique. Their branding and professionalism made me feel I was working with a high-end firm without the fluff.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/women/39.jpg",
|
||||
name: "Rachel Levine",
|
||||
job_title: "Lifestyle Blogger",
|
||||
},
|
||||
{
|
||||
date: "2024-08-22",
|
||||
comment: "Dynamic Realty was a lifesaver when managing my rental properties while I was abroad. Highly recommend!",
|
||||
profile_pict: "https://randomuser.me/api/portraits/men/61.jpg",
|
||||
name: "Peter Kowalski",
|
||||
job_title: "Remote Consultant",
|
||||
},
|
||||
{
|
||||
date: "2024-07-11",
|
||||
comment:
|
||||
"A reliable partner in every sense. Their team helped me expand my real estate portfolio across Centerville.",
|
||||
profile_pict: "https://randomuser.me/api/portraits/women/19.jpg",
|
||||
name: "Angela Bryant",
|
||||
job_title: "Portfolio Manager",
|
||||
},
|
||||
];
|
||||
Loading…
x
Reference in New Issue
Block a user