From 32b8c2284b7eecd276688a5138aa4f5c8a186877 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Wed, 25 Feb 2026 12:49:12 +0000
Subject: [PATCH] Bob AI: Update contact section to another with image

---
 src/app/page.tsx | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 668fe6f..3292bce 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,7 +7,7 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { CheckCircle, Sparkles, Star } from 'lucide-react';
 
@@ -101,20 +101,34 @@ export default function LandingPage() {
         />
       </div>
       <div id="contact-section" data-section="contact-section">
-        <ContactText
-          text="We'd love to hear from you! Whether you have questions about our beans, want to book a private event, or just want to say hello, reach out to us. Our team is here to make your coffee experience unforgettable."
-          animationType="entrance-slide"
-          buttons={[{ "text": "Visit Us", "href": "#about-section" }, { "text": "Book a Table", "href": "#product-section" }]}
-          background={{ "variant": "radial-gradient" }}
+        <ContactSplit
+          title="Get in Touch with Bamboleya"
+          description="Visit our cozy café to experience the perfect blend of quality coffee and warm hospitality. We're open daily and ready to serve you the finest brews in town."
+          tag="Contact Us"
+          background={{ variant: "radial-gradient" }}
           useInvertedBackground={true}
-          ariaLabel="Contact section"
-          className="py-16 px-4 sm:px-6 lg:px-8"
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          imageAlt="Bamboleya Coffee Shop Interior"
+          mediaPosition="right"
+          mediaAnimation="entrance-slide"
+          inputPlaceholder="Enter your email"
+          buttonText="Send Message"
+          termsText="We'll get back to you within 24 hours"
+          ariaLabel="Contact Bamboleya Coffee Shop"
+          className="py-20 px-4 sm:px-6 lg:px-8"
           containerClassName="max-w-7xl mx-auto"
-          contentClassName="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg border border-gray-200"
-          textClassName="text-2xl font-semibold text-gray-800 mb-6"
-          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
-          buttonClassName="flex items-center justify-center px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-full transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-opacity-50"
-          buttonTextClassName="ml-2"
+          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
+          contactFormClassName="space-y-6"
+          tagClassName="inline-flex items-center px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-semibold mb-4"
+          titleClassName="text-4xl lg:text-5xl font-bold text-red-700 mb-4"
+          descriptionClassName="text-lg text-gray-700 mb-8 leading-relaxed"
+          formWrapperClassName="bg-white/90 backdrop-blur-sm rounded-2xl p-8 shadow-xl border border-green-200"
+          inputClassName="w-full px-4 py-3 bg-gray-50 border-2 border-green-300 rounded-lg focus:outline-none focus:border-red-500 focus:ring-2 focus:ring-red-200 transition-all"
+          buttonClassName="w-full px-6 py-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400"
+          buttonTextClassName="font-semibold"
+          termsClassName="text-sm text-gray-600 text-center"
+          mediaWrapperClassName="relative h-96 lg:h-full rounded-2xl overflow-hidden shadow-2xl border-4 border-green-300"
+          mediaClassName="w-full h-full object-cover"
         />
       </div>
       <div id="footer-section" data-section="footer-section">