src/App.tsx

@@ -1,5 +1,5 @@
 import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
+import ContactFormMap from '@/components/sections/contact/ContactFormMap';
 import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
 import FooterBasic from '@/components/sections/footer/FooterBasic';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
@@ -99,14 +99,7 @@ export default function App() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCta
-          tag="Visit Us"
-          text="Stop by our storefront for fresh bread and coffee."
-          primaryButton={{
-            text: "Get Directions",            href: "#"}}
-          secondaryButton={{
-            text: "Call Now",            href: "tel:555123456"}}
-        />
+        <ContactFormMap />
       </div>
 
       <div id="footer" data-section="footer">

src/components/sections/contact/ContactFormMap.tsx

@@ -0,0 +1,94 @@
+import { motion } from "motion/react";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Button from "@/components/ui/Button";
+import { MapPin, Phone, Mail } from "lucide-react";
+import type { FormEvent } from "react";
+
+const ContactFormMap = () => {
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    // Handle form submission logic here
+    alert("Form submitted! (demo)");
+  };
+
+  return (
+    <section aria-label="Contact section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8">
+        <div className="flex flex-col items-center gap-3 md:gap-2">
+          <span className="px-3 py-1 text-sm card rounded">Get in Touch</span>
+          <TextAnimation
+            text="Contact Us"
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+          <TextAnimation
+            text="We'd love to hear from you. Send us a message or visit our bakery."
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-15%" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+          className="grid grid-cols-1 md:grid-cols-2 gap-8"
+        >
+          <div className="p-8 card rounded flex flex-col gap-6">
+            <h3 className="text-3xl font-medium">Send a Message</h3>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1">
+                <label htmlFor="name" className="text-sm font-medium opacity-80">Name</label>
+                <input type="text" id="name" name="name" className="bg-background rounded p-3 border border-transparent focus:border-accent/50 outline-none transition-colors" placeholder="Your Name" required />
+              </div>
+              <div className="flex flex-col gap-1">
+                <label htmlFor="email" className="text-sm font-medium opacity-80">Email</label>
+                <input type="email" id="email" name="email" className="bg-background rounded p-3 border border-transparent focus:border-accent/50 outline-none transition-colors" placeholder="Your Email" required />
+              </div>
+              <div className="flex flex-col gap-1">
+                <label htmlFor="message" className="text-sm font-medium opacity-80">Message</label>
+                <textarea id="message" name="message" rows={5} className="bg-background rounded p-3 border border-transparent focus:border-accent/50 outline-none transition-colors resize-none" placeholder="Your Message" required></textarea>
+              </div>
+              <Button text="Send Message" variant="primary" />
+            </form>
+          </div>
+
+          <div className="flex flex-col gap-8">
+            <div className="h-80 md:h-auto md:flex-1 card rounded overflow-hidden">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.617329342236!2d-73.98785368459395!3d40.74844097932817!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117429%3A0x9a6949c8a4a5a8e!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1620313963749!5m2!1sen!2sus"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={false}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Maps location of Artisan Bakery"
+              ></iframe>
+            </div>
+            <div className="p-8 card rounded flex flex-col gap-4">
+                <h3 className="text-2xl font-medium">Our Location</h3>
+                <div className="flex items-start gap-3">
+                    <MapPin className="text-accent size-5 mt-1 shrink-0" />
+                    <p className="leading-tight">123 Baking Lane, Pastryville, NY 10001</p>
+                </div>
+                <div className="flex items-center gap-3">
+                    <Phone className="text-accent size-5 shrink-0" />
+                    <p className="leading-tight">(555) 123-456</p>
+                </div>
+                <div className="flex items-center gap-3">
+                    <Mail className="text-accent size-5 shrink-0" />
+                    <p className="leading-tight">hello@artisanbakery.com</p>
+                </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactFormMap;