package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "15.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

public/css/style.css

@@ -11555,7 +11555,6 @@ html.tablet .ui-to-top {
 	font-weight: 600;
 	letter-spacing: .14em;
 	text-transform: uppercase;
-	color: var(--color-colorHeaderText);
 }
 
 .rd-dropdown-link,
@@ -11968,16 +11967,18 @@ html.tablet .ui-to-top {
 
 .rd-navbar-fixed .rd-navbar-toggle {
 	display: inline-block;
+	position: absolute;
 }
 
 .rd-navbar-fixed .rd-navbar-brand {
 	position: relative;
-	margin-left: 6px;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .rd-navbar-fixed .rd-navbar-brand img {
-	max-width: 160px;
+	max-width: 90px;
-	max-height: 41px;
+	max-height: 60px;
 	width: auto;
 	height: auto;
 }
@@ -12913,8 +12914,8 @@ html.rd-navbar-fixed-linked .page {
 .rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
 	width: auto;
 	height: auto;
-	max-width: 200px;
+	max-width: 220px;
-	max-height: 80px;
+	max-height: 110px;
 }
 
 .rd-navbar-classic.rd-navbar-static .rd-navbar-nav-wrap {
@@ -12946,7 +12947,7 @@ html.rd-navbar-fixed-linked .page {
 }
 
 .rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand img, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand img {
-	max-height: 50px;
+	max-height: 74px;
 }
 
 .rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav-item > .rd-navbar-submenu, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav-item > .rd-navbar-submenu {
@@ -13390,8 +13391,8 @@ html.rd-navbar-fixed-linked .page {
 .rd-navbar-corporate.rd-navbar-static .rd-navbar-brand img {
 	width: auto;
 	height: auto;
-	max-width: 200px;
+	max-width: 220px;
-	max-height: 80px;
+	max-height: 110px;
 }
 
 .rd-navbar-corporate.rd-navbar-static .rd-navbar-nav-wrap {
@@ -13539,7 +13540,7 @@ html.rd-navbar-fixed-linked .page {
 	align-self: stretch;
 	align-items: stretch;
 	width: 100%;
-	height: auto;
+	height: 100%;
 	min-height: inherit;
 	transition-property: transform;
 	box-sizing: content-box;
@@ -13766,8 +13767,8 @@ html.rd-navbar-fixed-linked .page {
 .swiper-slide {
 	position: relative;
 	display: flex;
-	align-items: center;
+	/* align-items: center; */
-	justify-content: center;
+	/* justify-content: center; */
 	flex-shrink: 0;
 	width: 100%;
 	height: 100%;

src/app/globals.css

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

src/app/page.tsx

@@ -1,13 +1,12 @@
-import ContactFormBox from "@/components/ContactFormBox";
+import ContactFormSection from "@/components/ContactFormSection";
 import GoogleReviewBox from "@/components/GoogleReviewBox";
+import Hero from "@/components/Hero";
 import Link from "next/link";
 
 export default function Home() {
   return (
     <>
-      <section className="section bg-[url(/images/bg-header.webp)] flex! flex-row! justify-end!">
+      <Hero />
-        <ContactFormBox />
-      </section>
 
       <section className="section section-lg bg-default">
         <div className="container">
@@ -73,7 +72,7 @@ export default function Home() {
           <div className="cell-inner box-1-outer">
             <div className="box-1">
               <div className="text-center">
-                <h2>About Us</h2>
+                <h2>Experience the Difference in Every Key Turn</h2>
               </div>
               <div className="mt-4 text-lg">
                 <p>
@@ -456,6 +455,10 @@ export default function Home() {
           </div>
         </div>
       </section>
+
+      <div className="lg:hidden">
+        <ContactFormSection />
+      </div>
     </>
   );
 }

src/components/ContactFormBox.tsx

@@ -1,12 +1,12 @@
 export default function ContactFormBox() {
   return (
-    <div className="lg:w-1/3 box-1-cell height-fill context-dark bg-colorContactForm/80!">
+    <div className="lg:w-1/3 box-1-cell height-fill hidden! lg:flex! context-dark bg-colorContactForm/80! z-20!">
       <div className="box-1-bg-shape">
         <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
       </div>
       <div className="cell-inner box-1-outer">
         <div className="box-1">
-          <h2>Find Your Property</h2>
+          <h2>Get in Touch with Us Today!</h2>
           <form className="rd-form">
             <div className="row row-x-20 row-20">
               <div className="col-sm-6 col-lg-12 col-xl-6">

src/components/ContactFormSection.tsx

@@ -0,0 +1,67 @@
+export default function ContactFormSection() {
+  return (
+    <div className="box-1-cell height-fill context-dark bg-colorContactForm z-20!">
+      <div className="box-1-bg-shape">
+        <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
+      </div>
+      <div className="cell-inner box-1-outer">
+        <div className="box-1">
+          <h2>Get in Touch with Us Today!</h2>
+          <form className="rd-form">
+            <div className="row row-x-20 row-20">
+              <div className="col-sm-6 col-lg-12 col-xl-6">
+                <div className="form-wrap form-wrap-validation">
+                  <input className="form-input" placeholder="First Name" name="first_name" />
+                </div>
+              </div>
+              <div className="col-sm-6 col-lg-12 col-xl-6">
+                <div className="form-wrap form-wrap-validation">
+                  <input className="form-input" placeholder="Last Name" name="last_name" />
+                </div>
+              </div>
+              <div className="col-sm-6 col-lg-12 col-xl-6">
+                <div className="form-wrap form-wrap-validation">
+                  <input type="email" className="form-input" placeholder="E-Mail" name="email" />
+                </div>
+              </div>
+              <div className="col-sm-6 col-lg-12 col-xl-6">
+                <div className="form-wrap form-wrap-validation">
+                  <input className="form-input" placeholder="Phone Number" name="phone" />
+                </div>
+              </div>
+              <div className="col-sm-12 col-lg-12 col-xl-12">
+                <div className="form-wrap form-wrap-validation">
+                  <select
+                    className="form-input select-filter"
+                    name="interest"
+                    data-style="modern"
+                    data-classname="select-dropdown-context-dark"
+                    data-placeholder="I'm interested in"
+                    data-minimum-results-for-search="Infinity"
+                    data-constraints="@Required"
+                  >
+                    <option label="placeholder"></option>
+                    <option value="2">Buying</option>
+                    <option value="3">Selling</option>
+                    <option value="4">Renting</option>
+                  </select>
+                  <span className="select-arrow"></span>
+                </div>
+              </div>
+              <div className="col-sm-12 col-lg-12 col-xl-12">
+                <div className="form-wrap form-wrap-validation">
+                  <textarea className="form-input" placeholder="Questions/Comments" name="question"></textarea>
+                </div>
+              </div>
+              <div className="col-sm-6 col-lg-12 col-xl-6">
+                <a className="button button-primary-outline min-w-[150px]" href="search-results.html">
+                  Send
+                </a>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/GoogleReviewBox.tsx

@@ -34,8 +34,9 @@ export default function GoogleReviewBox() {
                 </p>
               </div>
               <div className="quote-modern-meta-outer">
-                <img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
+                <div className="quote-modern-meta">
-                <StarRating value={5} />
+                  <h4 className="quote-modern-cite">Karen Sanders</h4>
+                </div>
               </div>
             </div>
           </article>
@@ -51,8 +52,11 @@ export default function GoogleReviewBox() {
                 </p>
               </div>
               <div className="quote-modern-meta-outer">
-                <img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
+                <div className="quote-modern-meta-outer">
-                <StarRating value={5} />
+                  <div className="quote-modern-meta">
+                    <h4 className="quote-modern-cite">Walter Williams</h4>
+                  </div>
+                </div>
               </div>
             </div>
           </article>
@@ -68,8 +72,11 @@ export default function GoogleReviewBox() {
                 </p>
               </div>
               <div className="quote-modern-meta-outer">
-                <img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
+                <div className="quote-modern-meta-outer">
-                <StarRating value={4} />
+                  <div className="quote-modern-meta">
+                    <h4 className="quote-modern-cite">Kate Anderson</h4>
+                  </div>
+                </div>
               </div>
             </div>
           </article>
@@ -85,8 +92,11 @@ export default function GoogleReviewBox() {
                 </p>
               </div>
               <div className="quote-modern-meta-outer">
-                <img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
+                <div className="quote-modern-meta-outer">
-                <StarRating value={4.5} />
+                  <div className="quote-modern-meta">
+                    <h4 className="quote-modern-cite">Peter Smith</h4>
+                  </div>
+                </div>
               </div>
             </div>
           </article>

src/components/Hero.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import ContactFormBox from "./ContactFormBox";
+import { Autoplay } from "swiper/modules";
+
+export default function Hero() {
+  return (
+    <section className="section flex! flex-row! justify-end! relative! min-h-80! lg:min-h-auto!">
+      <Swiper
+        className="absolute w-full h-full"
+        modules={[Autoplay]}
+        spaceBetween={50}
+        slidesPerView={1}
+        autoplay={{ delay: 4000 }}
+        loop
+      >
+        <SwiperSlide className="bg-[url(/images/bg-header2.webp)]">
+          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
+            <div className="container">
+              <div className="row">
+                <div className="col-12 col-lg-8 text-wrap">
+                  <div className="text-4xl lg:text-8xl!">Real Estate, Refined</div>
+                  <div className="text-2xl lg:text-5xl! mt-12">Where Southern Charm Meets Boutique Real Estate</div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </SwiperSlide>
+        <SwiperSlide className="bg-[url(/images/bg-header3.webp)]">
+          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
+            <div className="container">
+              <div className="row">
+                <div className="col-12 col-lg-8 text-wrap">
+                  <div className="text-4xl lg:text-8xl!">Your Vision, Our Expertise</div>
+                  <div className="text-2xl lg:text-5xl! mt-12">Discover a Smarter Way to Buy & Sell</div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </SwiperSlide>
+      </Swiper>
+
+      <ContactFormBox />
+    </section>
+  );
+}

src/components/layouts/Footer.tsx

@@ -117,7 +117,7 @@ export default function Footer() {
           </div>
         </div>
       </section>
-      <footer className="section footer-classic context-dark bg-colorFooter">
+      <footer className="section footer-classic context-dark bg-colorFooter2">
         <div className="container">
           <div className="row row-10 justify-content-sm-between">
             <div className="col-sm-6">
@@ -130,9 +130,9 @@ export default function Footer() {
             </div>
             <div className="col-sm-6 text-sm-right">
               <div className="right-1">
-                {/* <a href="#">
+                <a href="#">
-                  <span className="icon mdi mdi-plus"></span>Submit Property
+                  <span className="icon mdi mdi-plus"></span>Book Appointment
-                </a> */}
+                </a>
               </div>
             </div>
           </div>

src/components/layouts/Header.tsx

@@ -49,7 +49,7 @@ export default function Header() {
                   </div>
                 </li>
               </ul>
-              <div className="rd-navbar-aside-item">
+              <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">
@@ -70,28 +70,30 @@ export default function Header() {
                   <span></span>
                 </button>
 
-                <div className="rd-navbar-brand lg:flex lg:flex-col lg:items-center">
+                <div className="rd-navbar-brand">
                   <a className="brand" href="/">
                     <img
                       className="brand-logo-dark"
-                      src="images/logo-default-142x41.png"
+                      // src="images/logo-default-142x41.png"
+                      src="images/logo2.png"
                       alt=""
                       width="142"
                       height="41"
-                      srcSet="images/logo-default-284x82.png 2x"
+                      srcSet="images/logo2.png 2x"
                     />
                     <img
                       className="brand-logo-light"
-                      src="images/logo-inverse-121x61.png"
+                      // src="images/logo-inverse-121x61.png"\
+                      src="images/logo2.png"
                       alt=""
                       width="121"
                       height="61"
-                      srcSet="images/logo-inverse-284x82.png 2x"
+                      srcSet="images/logo2.png 2x"
                     />
                   </a>
-                  <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
+                  {/* <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
                     Dynamic Realty
-                  </h3>
+                  </h3> */}
                 </div>
               </div>
               <div className="rd-navbar-nav-wrap">
@@ -103,7 +105,7 @@ export default function Header() {
                   </li>
                   <li className="rd-nav-item">
                     <a
-                      className="rd-nav-link"
+                      className="rd-nav-link rd-nav-link-custom"
                       href="https://dynamicrealtyinc.managebuilding.com/Resident/public/rentals"
                       target="_blank"
                     >
@@ -111,20 +113,25 @@ export default function Header() {
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       LISTINGS FOR SALE
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       LISTINGS FOR RENT
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       BLOGS
                     </a>
                   </li>
+                  <li className="rd-nav-item block lg:hidden!">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/login">
+                      LOGIN
+                    </a>
+                  </li>
                   {/* <li className="rd-nav-item">
                     <a className="rd-nav-link" href="#">
                       Properties
@@ -280,8 +287,8 @@ export default function Header() {
                     </a>
                   </li> */}
                 </ul>
-                <div className="rd-navbar-main-item">
+                <div className="rd-navbar-main-item context-dark">
-                  <a className="button button-sm button-primary" href="#">
+                  <a className="button button-sm button-primary-outline" href="#">
                     BOOK APPOINTMENT
                   </a>
                 </div>

src/middleware.ts

@@ -8,7 +8,8 @@ export function middleware(request: NextRequest) {
   const host = request.headers.get("x-forwarded-host") || request.nextUrl.hostname;
   const path = request.nextUrl.pathname + request.nextUrl.search;
   const siteName = "Dynamic Realty";
-  const metaDesc = "Lorem ipsum dolor sit amet.";
+  const metaDesc =
+    "Dynamic Realty is a full-service veteran-owned real estate company based in Centerville, GA, established in 2004.";
 
   // Construct the full URL
   const mainUrl = `${protocol}://${host}`;

yarn.lock

@@ -1450,6 +1450,7 @@ __metadata:
     prettier: "npm:^3.5.3"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
+    swiper: "npm:^11.2.6"
     tailwindcss: "npm:^4"
     typescript: "npm:^5"
   languageName: unknown
@@ -3705,6 +3706,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.2.6":
+  version: 11.2.6
+  resolution: "swiper@npm:11.2.6"
+  checksum: 10c0/36ba63e2d1c5045f647f0f07b3a25c164393fb89b17db63f57fa9f776eb61bc5cb2c34634f80cf69caaddc209a174d0cd7be23c580785534569ea4a098b3a42c
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.11.0":
   version: 0.11.4
   resolution: "synckit@npm:0.11.4"