src/app/page.tsx

@@ -9,10 +9,15 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Zap, Clock, Heart, Star } from 'lucide-react';
+import { Zap, Clock, Heart, Star, MapPin, Phone, Clock3 } from 'lucide-react';
 
 export default function LandingPage() {
+  const handleContactSubmit = (data: Record<string, string>) => {
+    console.log('Contact form submitted:', data);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -33,6 +38,7 @@ export default function LandingPage() {
             { name: "Home", id: "hero" },
             { name: "Menu", id: "menu" },
             { name: "About", id: "about" },
+            { name: "Location", id: "location" },
             { name: "Contact", id: "contact" }
           ]}
         />
@@ -204,6 +210,33 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="location" data-section="location">
+        <ContactSplitForm
+          title="Visit Us"
+          description="Find us at our location in Sibu. Open daily at 6 PM. Easy access, ample parking, and a warm welcome awaits."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Name",              required: true
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Your Inquiry (e.g., reservations, catering, feedback)",            rows: 5,
+            required: false
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-vector/creative-black-menu-template_23-2147751385.jpg?_wi=2"
+          imageAlt="Lung Ching Cafe location map"
+          mediaAnimation="blur-reveal"
+          mediaPosition="left"
+          buttonText="Send Inquiry"
+          onSubmit={handleContactSubmit}
+          ariaLabel="Location and inquiry section"
+        />
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactSplit
           tag="Get in Touch"
@@ -246,6 +279,7 @@ export default function LandingPage() {
                 { label: "Home", href: "#hero" },
                 { label: "Menu", href: "#menu" },
                 { label: "About", href: "#about" },
+                { label: "Location", href: "#location" },
                 { label: "Contact", href: "#contact" }
               ]
             }
@@ -254,6 +288,35 @@ export default function LandingPage() {
           ariaLabel="Footer section"
         />
       </div>
+
+      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 z-40 md:hidden">
+        <div className="flex justify-around p-3">
+          <a
+            href="tel:+60xxxxxxxxx"
+            className="flex flex-col items-center justify-center flex-1 py-2 px-1 text-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+            aria-label="Call now"
+          >
+            <Phone className="w-5 h-5 mb-1" />
+            <span className="text-xs font-medium">Call</span>
+          </a>
+          <a
+            href="https://maps.google.com/?q=Lung+Ching+Cafe+Sibu"
+            className="flex flex-col items-center justify-center flex-1 py-2 px-1 text-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+            aria-label="Get directions"
+          >
+            <MapPin className="w-5 h-5 mb-1" />
+            <span className="text-xs font-medium">Location</span>
+          </a>
+          <a
+            href="#contact"
+            className="flex flex-col items-center justify-center flex-1 py-2 px-1 text-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+            aria-label="Contact us"
+          >
+            <Clock3 className="w-5 h-5 mb-1" />
+            <span className="text-xs font-medium">Contact</span>
+          </a>
+        </div>
+      </div>
     </ThemeProvider>
   );
 }