Merge pull request 'fix: home layout and images' (#13) from dev into main

Reviewed-on: #13

src/app/(main)/page.tsx

@@ -1,5 +1,7 @@
+import ContactFormSection from "@/components/ContactFormSection";
 import GoogleReviewBox from "@/components/GoogleReviewBox";
 import HomeTopSection from "@/components/homes/HomeTopSection";
+import Image from "next/image";
 
 export default function Home() {
   return (
@@ -15,8 +17,16 @@ export default function Home() {
             <div className="col-md-12 col-lg-4">
               <div>
                 <article className="box-modern">
-                  <div className="flex justify-center">
+                  <div className="flex">
-                    <span className="icon box-modern-icon fa-home"></span>
+                    <div className="w-full h-44 bg-colorHeroOverlay relative">
+                      <Image
+                        className="object-cover"
+                        src="/images/why1.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>
@@ -31,8 +41,16 @@ export default function Home() {
             <div className="col-md-12 col-lg-4">
               <div>
                 <article className="box-modern">
-                  <div className="flex justify-center">
+                  <div className="flex">
-                    <span className="icon box-modern-icon fa-calendar"></span>
+                    <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>
@@ -47,8 +65,16 @@ export default function Home() {
             <div className="col-md-12 col-lg-4">
               <div>
                 <article className="box-modern">
-                  <div className="flex justify-center">
+                  <div className="flex">
-                    <span className="icon box-modern-icon fa-map"></span>
+                    <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>
@@ -66,6 +92,8 @@ export default function Home() {
       </section>
 
       <GoogleReviewBox />
+
+      <ContactFormSection />
     </>
   );
 }

src/components/HeroSlider.tsx

@@ -49,7 +49,7 @@ export default function HeroSlider() {
                 objectFit: "cover",
               }}
             />
-            <section className="section section-lg text-colorText2! bg-colorHeroOverlay/85 w-full h-full z-20">
+            <section className="section section-lg text-colorText2! bg-colorHeroOverlay/70 w-full h-full z-20">
               <div className="container">
                 <div className="row">
                   <div className="col-12 col-lg-4 flex justify-center">