المكونات

🎨 جميع مكونات React مصممة باستخدام TailwindCSS

---

🌗 الثيمات

افتراضيًا، يتم تفعيل ثيمين: الضوء و الداكن.
يتم التبديل تلقائيًا بناءً على تفضيلات المستخدم.

لتغيير أو إضافة ثيمات:

1️⃣ أضف أو أزل الثيمات في ملف tailwind.config.js ضمن daisyui.themes
📌 (احتفظ بثيم واحد على الأقل)

2️⃣ أضف اسم الثيم إلى ملف config.js ضمن theme و main

• المسار: config.js
  

  colors: {
    theme: "YOUR_THEME",
    main: themes[`[data-theme=YOUR_THEME]`]["primary"],
  }
  

🗂️ إليك قائمة تضم أكثر من 20 ثيم متاح

---

🧩 المكونات المخصصة

جميع المكونات المخصصة موجودة داخل مجلد /components في مستودع SaaSFast الخاص بك.
كل مكون موثق بشكل مفصل داخل الكود وفي هذه الوثائق.

📸 مثال: هذا هو مكون Hero

---

🧱 مكونات daisyUI

يستخدم SaaSFast مكتبة daisyUI كمجموعة أدوات واجهة المستخدم (UI kit)
لمكونات بسيطة مثل الأزرار، المدخلات، التبويبات، وغيرها.
🔗 إليك جميع مكونات daisyUI

مثال:

Demo

لإظهار هذا الزر، أضف:

className: "btn btn-primary"

---

🎞️ الرسوم المتحركة

يمكنك استكشاف بعض الرسوم المتحركة المميزة في ملف config.tailwind.css:

className: "animate-opacity" className: "animate-wiggle" className: "animate-appearFromRight" className: "animate-popup"

---

🔤 الخط المخصص

1️⃣ توجه إلى ملف Layout.js في مجلد /components

2️⃣ استورد الخط المفضل لديك من next/font/google

import { Bricolage_Grotesque } from "next/font/google";

3️⃣ استبدل الخط الحالي المستخدم:

const font = Bricolage_Grotesque({ subsets: ["latin"] });