Improve featured products layout and add support CTA

components/MobileShowcase.tsx

@@ -1,21 +1,22 @@
 'use client';
 
-import Link from 'next/link';
+import {PhoneOutlined} from '@ant-design/icons';
 import {featuredMachines} from '@/data/products';
 import {useLanguage} from '@/app/context/LanguageContext';
 import {commerceCopy} from '@/data/commerce';
-import QuantityControl from './QuantityControl';
 
 export default function MobileShowcase() {
     const {t, dir, locale} = useLanguage();
+    const copy = commerceCopy[locale];
+    const contact = t.contactInfo;
 
     return (
         <section id="showcase" className="relative w-full py-8 px-4" dir={dir}>
-            <div className="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4">
+            <div className="flex flex-col gap-4 pb-4">
                 {featuredMachines(t.machines).map(machine => (
                     <article
                         key={machine.id}
-                        className="w-[90%] shrink-0 snap-start bg-surface border border-subtle rounded-2xl p-4"
+                        className="w-full bg-surface border border-subtle rounded-2xl p-4"
                     >
                         <div className="flex gap-4 items-center">
                             {/*<Link href={`/products/${machine.id}`} className="flex gap-4 items-center">*/}
@@ -31,12 +32,26 @@ export default function MobileShowcase() {
                         {/* <div className="flex flex-wrap justify-between items-center gap-3">
                             <QuantityControl product={machine} />
                             <Link href={`/products/${machine.id}`} className="text-sm text-brand-400 hover:underline">
-                                {commerceCopy[locale].details}
+                                {copy.details}
                             </Link>
                         </div>*/}
                     </article>
                 ))}
             </div>
+
+            <div className="mt-3 rounded-2xl border border-subtle bg-elevated p-5 text-center">
+                <h3 className="text-xl font-bold text-primary">{copy.supportOrderTitle}</h3>
+                <p className="mt-3 text-sm leading-7 text-secondary">{copy.supportOrderDescription}</p>
+                <a
+                    href={`tel:${contact.orderPhoneHref}`}
+                    className="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand px-5 py-3 font-bold text-ink-950 transition-colors hover:bg-brand-300"
+                    dir="ltr"
+                >
+                    <PhoneOutlined />
+                    <span>{copy.callSupport}</span>
+                    <span>{contact.orderPhone}</span>
+                </a>
+            </div>
         </section>
     );
 }

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 (
         <>