Add FAQ section and footer phone contact picker

components/layout/Footer.tsx

@@ -4,12 +4,15 @@ import { FaLinkedin } from "react-icons/fa6";
 import { SiGitea, SiViber, SiWhatsapp } from "react-icons/si";
 import type { Locale, Dictionary } from "@/lib/dictionaries";
 import { LogoMark } from "@/components/ui/Logo";
+import FooterPhoneLink from "@/components/layout/FooterPhoneLink";
 
 interface FooterProps {
   locale: Locale;
   dict: Dictionary;
 }
 
+const PHONE_NUMBER = "+387 66 644 094";
+
 export default function Footer({ locale, dict }: FooterProps) {
   const footerLinks = {
     [dict.footer.product]: [
@@ -23,7 +26,8 @@ export default function Footer({ locale, dict }: FooterProps) {
     [dict.footer.connect]: [
       { label: "Source Code", href: "https://git.ksan.dev/ksan", external: true },
       { label: "Email", href: "mailto:contact@ksan.dev", external: true },
-      { label: "+387 66 644 094", href: "tel:+38766644094", external: true },
+      // Opens the call / WhatsApp / Viber picker instead of jumping straight to tel:.
+      { label: PHONE_NUMBER, href: "tel:+38766644094", phone: true },
       { label: "LinkedIn", href: "https://www.linkedin.com/in/%C4%91or%C4%91e-k%C5%A1an-886871266", external: true },
     ],
   };
@@ -87,7 +91,9 @@ export default function Footer({ locale, dict }: FooterProps) {
               <ul className="space-y-3">
                 {links.map((link) => (
                   <li key={link.label}>
-                    {"external" in link && link.external ? (
+                    {"phone" in link && link.phone ? (
+                      <FooterPhoneLink number={link.label} dict={dict} />
+                    ) : "external" in link && link.external ? (
                       <a
                         href={link.href}
                         target={link.href.startsWith("http") ? "_blank" : undefined}