الـHero هو أول شيء بيشوفه الزائر. في نبتون، هو مصمّم على 6 patterns ثابتة، وكل pattern عنده محرّكات قابلة للتخصيص.
#الـPatterns المتاحة
| — | "Pattern" | "Best |
|---|
split | منتج واحد + صورة جانبية |
centered | جملة بطولية + CTA |
carousel | مجموعة بنرات تتبدّل |
video | فيديو background + overlay |
product-grid | 3-6 منتجات featured |
split-feature | feature واحد + شرح |
#الإعدادات
| Prop | Type | Default | Description |
|---|
pattern | string | split | اختر من الـ6 patterns |
title_ar | string | — | العنوان (عربي) |
title_en | string | — | Title (English) |
subtitle_ar | string | — | الوصف تحت العنوان |
ctalabelar | string | تسوّق | نص الزر |
cta_href | string | /products | رابط الزر |
background | image | — | صورة background (recommended: 2880×1620) |
video_src | url | — | فيديو background (mp4 فقط) |
overlay_opacity | 0-100 | 60 | شفافية الـoverlay الأسود |
#مثال على JSON config
json
{
"pattern": "split",
"title_ar": "أزياء صيفية بأسلوبك",
"subtitle_ar": "كولكشن جديد، شحن مجاني فوق 200 ر.س",
"cta_label_ar": "تسوّقي الآن",
"cta_href": "/categories/summer-2026",
"background": "/uploads/hero-summer.jpg",
"overlay_opacity": 50
}
#Code: استخدام Hero في الكود
twig
{% include "@neptune/sections/hero.twig" with {
pattern: "split",
title: salla.store.name,
subtitle: "كولكشن الصيف",
cta_href: "/categories/summer-2026"
} %}
#أخطاء شائعة
