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

fix: responsive contact form position

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-18 08:41:36 +07:00
parent d470eb5037
commit a13a6b81b0
4 changed files with 80 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/page.tsx
View File

@ -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>
</>
);
}

2
src/components/ContactFormBox.tsx
View File

@ -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>

67
src/components/ContactFormSection.tsx Normal file
View File

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

16
src/components/Hero.tsx
View File

@ -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>