حان الوقت لإيصال مشروعك الناشئ إلى عملائك في 5 دقائق فقط ⚡️

سنقوم الآن ببناء صفحة هبوط جذابة وإضافة نموذج لجمع عناوين البريد الإلكتروني في قائمة الانتظار (اختياري).
أكمِل هذا الدليل ليتم عرض مشروعك على صفحتنا الرئيسية ⭐️

إذا لم تقم بذلك بعد، انسخ المستودع (repo) وشغّل الخادم محليًا. راجع دليل "البدء" ‫لنبدأ!‬.
ثم احذف كل المحتويات الموجودة داخل الملف /app/page.js والصق الكود التالي:

import { Suspense } from 'react'
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import Problem from "@/components/Problem";
import FeaturesAccordion from "@/components/FeaturesAccordion";
import Pricing from "@/components/Pricing";
import FAQ from "@/components/FAQ";
import CTA from "@/components/CTA";
import Footer from "@/components/Footer";

export default function Home() {
  return (
    <>
      <Suspense>
        <Header />
      </Suspense>
      <main>
        <Hero />
        <Problem />
        <FeaturesAccordion />
        <Pricing />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

---

✏️ قم بتعديل النصوص لتتناسب مع فكرة مشروعك

كل مكون يحتوي على ملاحظات تساعدك في كتابة محتوى تسويقي فعّال—راجع قسم المكوّنات.
مبروك! أصبح لديك الآن صفحة هبوط رائعة لعرض مشروعك 🎉

---

📨 (اختياري) جمع عناوين البريد الإلكتروني

إذا كنت ترغب في جمع عناوين البريد الإلكتروني لقائمة الانتظار:

1. قم بإعداد قاعدة بيانات.
2. أزل التعليق عن الكود الموجود في الملف /api/lead/route.js ليتم حفظ العناوين داخلها.

---

🚀 (اختياري) استبدال زر الدعوة الرئيسي

يمكنك أيضًا استبدال زر الدعوة الرئيسي (Call-to-Action) في أقسام Hero والتسعير والدعوة للانضمام بهذا الزر:

import ButtonLead from "@/components/ButtonLead";

  ...
  </div>

  {/* For the Hero & CTA use this 👇 */}
  <ButtonLead />

  {/* For the Pricing use this instead 👇 */}
  <ButtonLead extraStyle="!max-w-none !w-full" />

  <div>
  ...

---

حان وقت الإطلاق!

إذا احتجت لأي مساعدة، إليك دليل النشر يوضح لك خطوات النشر.

📊 (اختياري) لمتابعة حركة الزوار على موقعك، جرّب DataFast—خصم 30٪ خاص بأعضاء SaaSFast ❤️

---