Anatomy

The section has two motion.div blocks inside a max-w-6xl container. The first contains the badge, h2 and optional subtitle. The second is a rounded div with a 1 px border that wraps two children: the map area (an iframe or a fallback MapPin icon when no URL is provided) and the info bar below, which uses flex-wrap to arrange contact items and pushes the CTA link to the far right with ml-auto.

How it works

Both blocks use the same Framer Motion pattern: initial={{ opacity: 0, y: 20 }}, whileInView={{ opacity: 1, y: 0 }}, viewport={{ once: true }}. The cubic-bezier ease [0.16, 1, 0.3, 1] gives each block a fast rise that decelerates smoothly, sharper than the default easeOut and closer to a spring without needing useSpring. The second block adds delay: 0.1 to create a light stagger. The iframe handles its own map rendering; React only manages the container and the surrounding UI.

How to build it in React

1. Create the section shell and header block

   Wrap everything in a section tag with a bg CSS token. Inside a max-w-6xl container, place a motion.div that slides up on scroll for the badge, h2 and subtitle. This block animates independently from the map so the heading has time to appear before the map follows.

   const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];
   
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.6, ease }}
     viewport={{ once: true }}
   >
     {badge && <span className="uppercase tracking-widest text-xs">{badge}</span>}
     <h2>{title}</h2>
   </motion.div>

2. Embed the map iframe with a fallback

   Render the iframe when a mapEmbedUrl prop is present; show a centered MapPin icon otherwise. Set loading='lazy' to defer the iframe until it is near the viewport. The iframe title attribute is required for accessibility, screen readers announce it as a landmark.

   {mapEmbedUrl ? (
     <iframe
       src={mapEmbedUrl}
       className="w-full h-full"
       style={{ border: 0 }}
       allowFullScreen
       loading="lazy"
       referrerPolicy="no-referrer-when-downgrade"
       title="Carte"
     />
   ) : (
     <div className="flex items-center justify-center h-full">
       <MapPin size={40} />
     </div>
   )}

3. Build the contact info bar

   Below the map, add a flex-wrap row with the three contact items (address, email, phone) conditionally rendered. Each item pairs a lucide icon with its text or anchor. Push the directions CTA link to the right with ml-auto. Phone links use tel: with whitespace stripped; email links use mailto:.

   <a href={`tel:${phone.replace(/\s/g, "")}`} className="text-sm hover:opacity-70">
     {phone}
   </a>
   <a href={ctaUrl} target="_blank" rel="noopener noreferrer" className="ml-auto flex items-center gap-2">
     {ctaLabel} <ExternalLink size={14} />
   </a>

4. Stagger the map block 100 ms

   Wrap the rounded map container in a second motion.div with the same initial/whileInView config but add delay: 0.1 to the transition. This creates a two-step reveal, header settles first, map follows, without any complex orchestration.

   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.6, ease, delay: 0.1 }}
     viewport={{ once: true }}
     className="rounded-xl overflow-hidden"
   >
     {/* map + info bar */}
   </motion.div>

When to use it

Use this section when physical location is a key conversion signal, restaurants, beauty salons, clinics, co-working spaces, any service that depends on foot traffic. Place it at the bottom of the page, after testimonials or FAQ, where visitors who have decided to visit go to confirm the address. Skip it for fully remote services, SaaS products or pages where a contact form alone is sufficient.

Used by

• Airbnb, Listing pages combine an embedded map with contact-style info bars showing host details and location.
• OpenTable, Restaurant profile pages display an interactive map alongside address, phone and directions CTA in a stacked layout.
• Doctolib, Practitioner pages show clinic location on a map next to an info strip with address and phone number.
• WeWork, Location pages embed maps above a bar summarising contact details and directions for each co-working space.

FAQ