Improve featured products layout and add support CTA

.idea/workspace.xml

@@ -6,7 +6,9 @@
   <component name="ChangeListManager">
     <list default="true" id="bb7b50a5-be9c-4cd7-a05b-979f0e91b173" name="Changes" comment="FAZ1">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/components/ProductsPage.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/ProductsPage.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/MobileShowcase.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/MobileShowcase.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ShowcaseSection.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/ShowcaseSection.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/data/commerce.ts" beforeDir="false" afterPath="$PROJECT_DIR$/data/commerce.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -213,6 +215,7 @@
       <workItem from="1789618878095" duration="14000" />
       <workItem from="1789618912128" duration="2222000" />
       <workItem from="1789622601965" duration="2006000" />
+      <workItem from="1789963664956" duration="1333000" />
     </task>
     <task id="LOCAL-00001" summary="update">
       <option name="closed" value="true" />
@@ -550,7 +553,15 @@
       <option name="project" value="LOCAL" />
       <updated>1789900914642</updated>
     </task>
-    <option name="localTasksCounter" value="43" />
+    <task id="LOCAL-00043" summary="FAZ1">
+      <option name="closed" value="true" />
+      <created>1789900932562</created>
+      <option name="number" value="00043" />
+      <option name="presentableId" value="LOCAL-00043" />
+      <option name="project" value="LOCAL" />
+      <updated>1789900932562</updated>
+    </task>
+    <option name="localTasksCounter" value="44" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">

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

data/commerce.ts

@@ -25,6 +25,9 @@ const fa = {
     specifications: 'ویژگی‌های دستگاه',
     model: 'مدل دستگاه',
     gallery: 'تصاویر دستگاه',
+    supportOrderTitle: 'تماس با پشتیبانی و ثبت سفارش',
+    supportOrderDescription: 'برای مشاوره خرید، بررسی ظرفیت دستگاه و ثبت سفارش مستقیم با تیم فروش تماس بگیرید.',
+    callSupport: 'تماس برای خرید',
     baseImage: 'نمای اصلی',
     alternateImage: 'نمای جایگزین',
     developmentTitle: 'روبات مارکت در حال توسعه است',
@@ -60,6 +63,10 @@ export const commerceCopy: Record<Locale, Record<keyof typeof fa, string>> = {
         specifications: 'Machine features',
         model: 'Machine model',
         gallery: 'Machine images',
+        supportOrderTitle: 'Support and ordering',
+        supportOrderDescription:
+            'Call the sales team for purchase guidance, machine capacity review, and direct ordering.',
+        callSupport: 'Call to order',
         baseImage: 'Main view',
         alternateImage: 'Alternate view',
         developmentTitle: 'Robot Market is under development',