Improve featured products layout and add support CTA

components/ShowcaseSection.tsx

@@ -2,6 +2,7 @@
 
 import {useEffect, useState} from 'react';
 import Link from 'next/link';
+import {PhoneOutlined} from '@ant-design/icons';
 import {useLanguage} from '@/app/context/LanguageContext';
 import {commerceCopy} from '@/data/commerce';
 import HorizontalShowcase from './HorizontalShowcase';
@@ -10,7 +11,7 @@ import MobileShowcase from './MobileShowcase';
 const MOBILE_BREAKPOINT = 768;
 
 export default function ShowcaseSection() {
-    const {locale} = useLanguage();
+    const {t, locale} = useLanguage();
     const copy = commerceCopy[locale];
     const [isMobile, setIsMobile] = useState<boolean | null>(null);
 
@@ -26,7 +27,29 @@ export default function ShowcaseSection() {
     }, []);
 
     if (isMobile === null) return null;
-    if (!isMobile) return <HorizontalShowcase />;
+    if (!isMobile)
+        return (
+            <>
+                <HorizontalShowcase />
+                <section className="px-6 md:px-16 py-14 bg-surface border-t border-subtle">
+                    <div className="max-w-5xl mx-auto flex flex-wrap items-center justify-between gap-6 rounded-2xl border border-subtle bg-elevated p-7">
+                        <div className="max-w-2xl">
+                            <h3 className="text-2xl font-bold text-primary">{copy.supportOrderTitle}</h3>
+                            <p className="mt-3 text-secondary leading-7">{copy.supportOrderDescription}</p>
+                        </div>
+                        <a
+                            href={`tel:${t.contactInfo.orderPhoneHref}`}
+                            className="inline-flex items-center justify-center gap-2 rounded-xl bg-brand px-6 py-3 font-bold text-ink-950 transition-colors hover:bg-brand-300"
+                            dir="ltr"
+                        >
+                            <PhoneOutlined />
+                            <span>{copy.callSupport}</span>
+                            <span>{t.contactInfo.orderPhone}</span>
+                        </a>
+                    </div>
+                </section>
+            </>
+        );
 
     return (
         <>