From a13a6b81b08d6b788ae30f37ce56d0b50085f0a7 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqi@rankrunners.dev>
Date: Fri, 18 Apr 2025 08:41:36 +0700
Subject: [PATCH] fix: responsive contact form position

---
 src/app/page.tsx                      |  5 ++
 src/components/ContactFormBox.tsx     |  2 +-
 src/components/ContactFormSection.tsx | 67 +++++++++++++++++++++++++++
 src/components/Hero.tsx               | 16 +++----
 4 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ContactFormSection.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index de68daa..7747a35 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+import ContactFormSection from "@/components/ContactFormSection";
 import GoogleReviewBox from "@/components/GoogleReviewBox";
 import Hero from "@/components/Hero";
 import Link from "next/link";
@@ -454,6 +455,10 @@ export default function Home() {
           </div>
         </div>
       </section>
+
+      <div className="lg:hidden">
+        <ContactFormSection />
+      </div>
     </>
   );
 }
diff --git a/src/components/ContactFormBox.tsx b/src/components/ContactFormBox.tsx
index fc953f3..9fbc71b 100644
--- a/src/components/ContactFormBox.tsx
+++ b/src/components/ContactFormBox.tsx
@@ -1,6 +1,6 @@
 export default function ContactFormBox() {
   return (
-    <div className="lg:w-1/3 box-1-cell height-fill context-dark bg-colorContactForm/80! z-20!">
+    <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>
diff --git a/src/components/ContactFormSection.tsx b/src/components/ContactFormSection.tsx
new file mode 100644
index 0000000..fb2e3eb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 53e1e89..a19bca4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,14 +6,12 @@ import { Autoplay } from "swiper/modules";
 
 export default function Hero() {
   return (
-    <section className="section flex! flex-row! justify-end! relative!">
+    <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}
-        onSlideChange={() => console.log("slide change")}
-        onSwiper={(swiper) => console.log(swiper)}
         autoplay={{ delay: 4000 }}
         loop
       >
@@ -21,9 +19,9 @@ export default function Hero() {
           <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
             <div className="container">
               <div className="row">
-                <div className="col-8 text-wrap">
-                  <div className="text-8xl!">Real Estate, Refined</div>
-                  <div className="text-5xl! mt-12">Where Southern Charm Meets Boutique Real Estate</div>
+                <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>
@@ -33,9 +31,9 @@ export default function Hero() {
           <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
             <div className="container">
               <div className="row">
-                <div className="col-8 text-wrap">
-                  <div className="text-8xl!">Your Vision, Our Expertise</div>
-                  <div className="text-5xl! mt-12">Discover a Smarter Way to Buy & Sell</div>
+                <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>