المزيد من تخطيطات دعوة لاتخاذ إجراء (2)
عرض الكل
https://neobrutalism.com/ar/blocks/call-to-action/newsletter-signup-cta-with-benefits
دعوة اشتراك نشرة بريدية
دعوة لاتخاذ إجراء · Pro source
قسم نشرة بريدية بعمودين يحاجج قبل أن يطلب. العمود الأيسر يحمل شارة مائلة، وعنواناً مبروزاً، وثلاثة أسباب ملموسة للاشتراك؛ والأيمن لوحة نموذج مرفوعة عن البطاقة بظل صلب مُزاح، بتسمية مرئية، وحقل بريد واحد، وسطر خصوصية تحت الزر. يجلس على شريط أساسي كامل الامتداد فينفصل بوضوح عن الأقسام حوله.
دعوة لاتخاذ إجراء
دعوة اشتراك نشرة بريديةفتح معاينة مباشرة
- Hero والتسعير وauth
- معاينة كل نقطة توقف
- انسخ النص الأصلي
- MCP جاهز للتثبيت
- Radix · Base UI · React Aria
- 158 الكتل الجاهزة
- أقسام الصفحة التي يتم تضمينها
- لوحات المعلومات والتسويق
- Pro يفتح الرمز
- تخطيطات قابلة للتعديل
محبوبة من المطوّرين والمصمّمين
وصنّاع المحتوى
صادفت عدة الـ UI بتاعتك وأخدتها على طول. جديدة ومصانة وبتتحسّن على طول — شغل رائع! 🤘
Ziv Reich, مطوّر برمجيات حبّيت بس أقول شغل ممتاز على neobrutalism.com. عاجبني جدًا. أنا فاشل في التصميم، فده كان إنقاذ. استخدمته في موقعي الشخصي.
Paul Bratslavsky, صاحب قناة Coding With Paul أخيرًا أعدت بناء موقعي الشخصي مع Neobrutalism.com — مكتبة ممتعة وسهلة جدًا للبدء!
Cameron Blackwood, صانع محتوى Neobrutalism.com من أفضل مكتبات مكوّنات الـ UI بأسلوب الرترو عندي — مكوّنات تقدر تشحنها فعليًا.
Zhengyang Hou, مطوّر مستقل من أفضل مكتبات الـ ui عندي للويب. شغل رائع — أتمنى لها كل التوفيق وأكتر.
Taseen Tanvir, مؤسّس ومصمّم جرّبت Neobrutalism.com Pro — عدة UI مش شبه كل حاجة تانية. البلوكات النيوبروتالية 🔥 خلّت تجربة اللايآوتات الغريبة أسرع بكتير.
Nitesh Padghan, كاتب بالنيابة تصميم صفحة هبوط جميل بتوازن وتدفّق مثاليين. لوحة الألوان مع الحركات تخلق تجربة مستخدم استثنائية.
Alan Obeng-Peprah, مصمم أول @ NativeXAI أنا معجب جدًا بالتصميم الذي سلّموه. المنتج النهائي طابق تمامًا ما تصوّرته.
Desmond, شريك مؤسس @ VectorlabsVentures كمالك وكالة، عادةً أقضي أسابيع في ضبط تخطيطات صفحات الهبوط للعملاء. مع Neobrutalism.com أُدرج قالبًا، أعدّل النصوص، وأكون جاهزًا للنشر.
Duke Opoku Amankwah, مؤسس @ Midas القوالب ليست مذهلة بصريًا فحسب، بل منظمة بشكل ممتاز أيضًا. وفّرت علينا أسابيع من وقت التطوير.
Abiola Braimah, مطوّر @ Studio IX جودة فائقة واهتمام بالتفاصيل. التصميم المتجاوب يعمل بلا عيوب على كل الأجهزة.
Acromond X., شريك مؤسس @ VectorlabsVentures دمج هذه القوالب في سير عملنا قلّص دورة التطوير بشكل ملحوظ. عمل ممتاز.
Raquib S., مطوّر خلفي أصبحت هذه القوالب مرجعنا الأساسي. الكود نظيف، موثّق جيدًا، وسهل التخصيص.
Hallic M., مطوّر @ AtlasLabs قوالب Neobrutalism.com تحقق التوازن المثالي بين الجمالية والوظيفة. نقلة حقيقية لمشاريعنا.
Ibrahim S., قائد الواجهة الأمامية @ ScaleUp دعم متميز وقوالب بجودة premium. العائد على هذه القوالب مذهل.
Kevin K., الرئيس التنفيذي @ WebCraft غيّرت قوالب Neobrutalism.com تمامًا طريقة تعاملنا مع مشاريع العملاء الجدد. جودة الكود استثنائية والتصاميم عالمية المستوى.
Danny G., مؤسس DevStack استخدمت مكتبات قوالب كثيرة، لكن Neobrutalism.com يتفوّق بالاهتمام بتحسين الأداء وبنية كود نظيفة.
Ian D., CTO في Wavelength الحركات والتفاعلات الدقيقة في هذه القوالب مذهلة تمامًا. أفضل استثمار لفريق التصميم لدينا.
Ben S., مصمم رئيسي في PixelPerfect كمؤسس غير تقني، ساعدتنا قوالب Neobrutalism.com على إطلاق MVP في وقت قياسي دون المساس بجودة التصميم. انبهر مستثمرونا.
Matthew I., مؤسس شركة ناشئة أقدّر مدى كون هذه المكوّنات معيارية وموثّقة جيدًا. تمكّنا من مزج أجزاء من قوالب مختلفة بسلاسة.
Garrett P., قائد الواجهة الأمامية في TechFusion عائد قوالب Neobrutalism.com مذهل. قلّصنا وقت التطوير بشكل كبير مع تسليم مواقع أعلى جودة لعملائنا.
Xavier C., مالك وكالة
أسئلة
متكررة
كيفية تجميع بلوك دعوة اشتراك نشرة بريدية، ما الذي يمكنك تغييره، ومتى تستخدمه بدلاً من التخطيطات الأخرى هنا.
أضِف action يشير إلى نقطة نهاية مزوّدك وmethod post على عنصر النموذج، ويبقى القسم مكوّن خادم بلا جافاسكريبت إطلاقاً. النسخة السابقة من هذا القسم زيّفته بـsetTimeout ينتقل إلى رسالة نجاح دون إرسال أي شيء، ولهذا اختفت آلة الحالة: عنصر تحكّم يبلّغ نجاحاً لا يستطيع ضمانه هو خلل تشحنه لمستخدميك. إن احتجت تحقّقاً مضمَّناً، حوّل الملف إلى مكوّن عميل وأضِف onSubmit.
حُذفتا مع المؤقّت المزيَّف. كانتا أيضاً خللاً في الرموز: لوحة النجاح كانت مطلية bg-chart-2، ورموز chart ألوان مختلفة في الفاتح والداكن، فكان التأكيد مقروءاً في ثيم وغير مرئي في الآخر. إن أضفت حالات حقيقية من جديد، استخدم bg-card بحدود للنجاح وbg-destructive بـtext-destructive-foreground للفشل، وامنحهما role=status وrole=alert على التوالي.
الشريط خلفها bg-primary text-primary-foreground ويتسلسل هذا اللون إلى كل شيء متداخل بداخله، بما فيه لوحة bg-card. دون استعادة text-foreground، تُرسم قائمة الفوائد وسطر الخصوصية بلون مقدّمة الشريط وتختفيان فعلياً في الثيم الداكن. تحقّق من هذا في كل شريط دعوة كامل الامتداد تبنيه — إنه الخلل الذي غالباً ما ينجو من مراجعة تقتصر على الوضع الفاتح.
ظل صلب واحد، shadow-[12px_12px_0px_0px_var(--color-border)]، بدلاً من div متموضعَين مطلقاً متراكبَين استخدمتهما النسخة السابقة. عنصر واحد يعني أن اللوحة يمكن أن تنمو مع محتواها دون أن ينحرف صندوق ثانٍ عن المحاذاة. غيّر قيمتَي 12px لتحريك الإزاحة، أو وجّه اللون إلى رمز آخر مثل var(--color-primary) — أبقه رمزاً كي يستمر بتتبع الثيم.
ثلاثة، والمصفوفة محدودة بذلك لسبب: يجب أن يبقى العمود بالارتفاع نفسه للوحة النموذج بجانبه، وسطر رابع يخلّ بتوازن الاثنين عند نقطة الكسر المتوسطة. أبقِ كل عنصر بأربع أو خمس كلمات كي لا يلتف أي منها. علامة الصح أيقونة lucide Check داخل مربّع مائل، aria-hidden لأن نص عنصر القائمة يقول كل شيء بالفعل.
استخدمه حين يكون الطلب عنوان بريد وتحتاج مساحة لتبريره — عمود الفوائد هو الفكرة كاملة. Free Trial Signup CTA Band شريط أفقي أقصر لتسجيل منتج بشريط ثقة، وApp Download CTA لتطبيق جوال أُطلق بوجهتَي متجر وبطاقات تقييم. الثلاثة تجلس على الشريط الأساسي نفسه، فيمكنها أن تتوالى في صفحة واحدة دون تصادم.