Bob AI: Add small Google Maps embeds to the footer section, ensuring

src/components/sections/footer/FooterSimpleCard.tsx

@@ -1,4 +1,5 @@
 import { useButtonClick } from "@/hooks/useButtonClick";
+import MapEmbed from "./MapEmbed";
 
 type FooterLink = {
   label: string;
@@ -66,6 +67,11 @@ const FooterSimpleCard = ({
           </div>
         </div>
 
+        <div className="flex flex-col md:flex-row gap-8 my-10">
+          <MapEmbed src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.81773959145!2d36.8219463152795!3d-1.28638999906423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f1172d84d49a7%3A0xf7cf0254b6ec4275!2sNairobi%2C%20Kenya!5e0!3m2!1sen!2sus!4v1620212088342!5m2!1sen!2sus" />
+          <MapEmbed src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260325503!2d106.8195623147693!3d-6.194420195514935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f42c9c5a6e5b%3A0x4e9c0b0c5e3a4b6!2sJakarta%2C%20Indonesia!5e0!3m2!1sen!2sus!4v1620212158756!5m2!1sen!2sus" />
+        </div>
+
         <div className="flex items-center justify-between pt-8 border-t border-foreground/20">
           <span className="text-sm opacity-50">{copyright}</span>
           <div className="flex items-center gap-3">

src/components/sections/footer/MapEmbed.tsx

@@ -0,0 +1,21 @@
+type MapEmbedProps = {
+  src: string;
+};
+
+const MapEmbed = ({ src }: MapEmbedProps) => {
+  return (
+    <div className="map-container">
+      <iframe
+        src={src}
+        width="100%"
+        height="100%"
+        style={{ border: 0 }}
+        allowFullScreen={false}
+        loading="lazy"
+        referrerPolicy="no-referrer-when-downgrade"
+      ></iframe>
+    </div>
+  );
+};
+
+export default MapEmbed;

src/index.css

@@ -187,3 +187,17 @@ h6 {
     2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.map-container {
+  width: 100%;
+  height: 200px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
+}
+
+.map-container iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}