MINOUJSS/multistore

Landing Page 與轉換率優化（CRO）技能

此技能提供全面的行銷框架、文案撰寫技巧、視覺層次規則及轉換率優化（CRO）策略，協助你建構並優化高轉換的 Landing Page 與促銷商店頁面。

---

1. 核心 CRO 原則與框架

A. 首屏（英雄區）規則

英雄區必須在 3 秒內達成 3 個目標：

1. 這是什麼？（清晰勝過巧妙）
2. 訪客能得到什麼好處？（直接的利益陳述）
3. 他們應該採取什麼行動？（明確的主要行動呼籲）

英雄區檢查清單：

• H1 標題：清晰、有力的利益導向鉤子（例如：用 AI 驅動自動化改造你的電商商店）。
• 副標題：延伸標題內容，針對客戶主要痛點並說明解決方案如何化解這些痛點。
• 主要 CTA 按鈕：高對比、行動導向的微型文案（例如：開始免費試用、立即獲取我的自訂商店、今天領取 50% 折扣，而非 提交 或 了解更多）。
• 社交證明片段：在主 CTA 下方直接放置星級評分、客戶數量或信任徽章（例如："⭐⭐⭐⭐⭐ 超過 5,000 位阿爾及利亞商家信賴"）。
• 英雄視覺：產品截圖、產品展示影片或高轉換的產品英雄圖片。

---

2. 文案撰寫框架

A. PAS 框架（問題 - 激化 - 解決方案）

• 問題：凸顯顧客面臨的確切挫折。
• 激化：強調不解決問題所帶來的情感或財務成本。
• 解決方案：將你的產品/服務呈現為最終的、無憂的解決方案。

B. AIDA 框架（注意力 - 興趣 - 渴望 - 行動）

• 注意力：用大膽的陳述或震撼的數據抓住讀者。
• 興趣：呈現符合他們目標的令人信服的事實、功能與好處。
• 渴望：透過社交證明、前後對比情境與保證來建立情感共鳴。
• 行動：提供清晰、低障礙的行動呼籲，並附帶急迫感或風險逆轉。

C. 功能到利益轉換矩陣

永遠不要單獨列出功能。每個功能都必須搭配直接的人性利益：

• ❌ 功能："整合 Yalidine 與 ZrExpress 快遞 API"
• ✅ 利益："一鍵自動發貨 —— 無需手動輸入資料"

---

3. 視覺層次與 UX 優化

A. 眼球追蹤模式（Z 模式與 F 模式）

• 將 Logo 放在左上角，導航/聯絡資訊放在右上角。
• 主要價值主張放在左側（LTR 語言）或右側（RTL 語言）。
• CTA 按鈕與背景顏色之間保持高視覺對比。

B. 降低認知摩擦

• 限制選擇：避免在同一區塊內放置互相競爭的 CTA。
• 最小化表單欄位：只要求提供必要資訊（例如：貨到付款 Landing Page 只需填寫姓名 + 電話號碼）。
• 手機版固定 CTA：在手機螢幕上，保持一個固定的底部 CTA 欄位在使用者滾動時可見。

---

4. 信任因素與轉換增強器

1. 風險逆轉：強調 100% 退款保證、貨到付款選項或免費試用期。
2. 真實社交證明：使用附有真實姓名、地點與個人照片的客戶評論。
3. 急迫感與稀缺性（合乎道德）：顯示限時折扣倒數計時器、庫存數量或特殊獎勵。
4. 安全與物流徽章：顯示付款圖示（CIB、EDAHABIA、PayPal、Stripe）與受信任的快遞商標誌（Yalidine、Mayastro、ZrExpress）。

---

5. 電子商務與多商店專屬 CRO 戰術

• 貨到付款（COD）表單優化：直接在 Landing Page 上放置簡單的姓名 + 電話號碼 + wilaya/commune 下拉式表單，實現無摩擦結帳。
• 訂單加購與升級銷售：在訂單確認前提供互補產品或套裝升級。
• 社交證明彈窗：顯示最近的訂單通知，創造動態購買動能。

---

6. HTML/Blade Landing Page 範本藍圖

<!-- 高轉換英雄區 -->
<section class="hero-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <span class="badge bg-primary-soft text-primary px-3 py-2 mb-3 rounded-pill">
                    🔥 限時特別優惠
                </span>
                <h1 class="display-4 fw-bold text-dark mb-3">
                    使用智慧自動化輕鬆擴展你的線上商店
                </h1>
                <p class="lead text-muted mb-4">
                    加入數千位賣家的行列，在幾分鐘內提升送貨率並自動化訂單出貨。
                </p>
                <div class="d-flex flex-column flex-sm-row gap-3 mb-4">
                    <a href="#order-form" class="btn btn-success btn-lg px-4 py-3 fw-bold text-uppercase shadow-sm">
                        立即領取折扣 &rarr;
                    </a>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <div class="stars text-warning fs-5">★★★★★</div>
                    <span class="text-muted small fw-semibold">4.9/5 由 1,200+ 位阿爾及利亞商家評分</span>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <img src="{{ asset('path/to/hero-product.png') }}" alt="產品展示" class="img-fluid rounded-4 shadow-lg">
            </div>
        </div>
    </div>
</section>