1 مايو 2026

tailwind css نيوبروتاليزم دليل تعليمي تطوير الويب css

بناء موقع نيوبروتالي من الصفر باستخدام Tailwind CSS v4

تعلّم كيف تبني موقعًا نيوبروتاليًا كاملًا من الصفر باستخدام Tailwind CSS v4. يرافقك هذا الدرس العملي خطوة بخطوة عبر الإعداد والتهيئة وبناء كل مكوّن، مع أمثلة كود جاهزة للنسخ واللصق.

Dov Azencot

@DovAzencot

شارك على X

حسنًا أيها المطورون. لنبنِ شيئًا جريئًا.

بلا نظريات. بلا حشو. فقط أنت وأنا وطرفية. بحلول نهاية هذا الدرس، سيكون لديك موقع نيوبروتالي كامل الوظائف مبني باستخدام Tailwind CSS v4.

نحن نتحدث عن:

حدود سوداء سميكة
ظلال صلبة حادة
درجات إبراز صفراء براقة
طباعة ضخمة
صفر زوايا مستديرة

هذا ليس درس "إليك مكوّنًا". نحن نبني صفحة هبوط كاملة من الصفر، قسم البطل والمزايا والتسعير والتذييل، كل شيء. كل سطر من الكود مشروح. كل قرار تصميمي مبرَّر.

خذ قهوتك. افتح طرفيتك. لنصبح بروتاليين.

ما الذي سنبنيه

قبل أن نبدأ، إليك ما سننشئه:

صفحة هبوط لمنتج SaaS افتراضي باسم "BoldTask"، أداة لإدارة المشاريع لا تشبه كل أدوات إدارة المشاريع الأخرى.

ستتضمن الصفحة:

قسم البطل مع زر حث على الإجراء
بطاقات مزايا
جدول تسعير
قسم شهادات
تذييل

كل ذلك مع الأسلوب النيوبروتالي المميز: جريء، عالي التباين، ويستحيل تجاهله.

الحزمة التقنية:

Tailwind CSS v4 (الأحدث والأفضل)
HTML (أو React/Next.js إن كنت تفضّل)
Google Fonts (Archivo Black + Space Grotesk)

زمن الإنجاز: 45-60 دقيقة إذا تابعت خطوة بخطوة

الخطوة 1: إعداد المشروع (5 دقائق)

لنبدأ من الصفر. أستخدم إعداد HTML بسيطًا في هذا الدرس، لكن يمكنك بسهولة تكييف ذلك مع React أو Next.js أو أي إطار عمل آخر.

إنشاء المشروع

mkdir neobrutalism-website
cd neobrutalism-website

تهيئة npm وتثبيت Tailwind v4

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

ملاحظة: نحن نثبّت Tailwind v4 (حاليًا في الإصدار التجريبي، لكنه مستقر بما يكفي للإنتاج). الوسم @next يجلب لك الإصدار v4.

إنشاء بنية المشروع

mkdir src
touch src/index.html src/styles.css

يجب أن تبدو بنية مجلداتك كالتالي:

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

الخطوة 2: إعداد Tailwind v4 (3 دقائق)

يمتلك Tailwind v4 نظام إعداد جديدًا وأنظف. بدلًا من tailwind.config.js، نضبط كل شيء في CSS.

إنشاء ملف الأنماط

افتح src/styles.css وأضف:

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

ما الذي فعلناه للتو:

أعددنا لوحة ألوان مخصصة (أسود، أبيض، أصفر، وردي، سماوي)
ألغينا كل قيم استدارة الحدود (النيوبروتالية = حواف حادة)
أنشأنا أدوات ظلال صلبة (مُزاحة بلا ضبابية)
أضفنا تأثيرات تمرير مخصصة للأزرار تحاكي "الضغط" على الظل

الخطوة 3: بنية HTML (5 دقائق)

أنشئ بنية HTML الأساسية. افتح src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

إعداد خادم التطوير

نحتاج إلى طريقة لمعاينة عملنا. لنستخدم Vite:


pnpm add vite
npm install vite
yarn add vite
bun add vite

أضف هذا السكربت إلى ملف package.json:

{
  "scripts": {
    "dev": "vite src"
  }
}

الآن شغّل:


pnpm dev
npm run dev
yarn dev
bun dev

افتح http://localhost:5173 في متصفحك. من المفترض أن ترى شريط تنقّل أساسيًا يحمل هوية BoldTask.

الخطوة 4: بناء قسم البطل (10 دقائق)

الآن إلى نجم العرض. يجب أن يكون قسم البطل جريئًا.

أضف هذا مباشرة بعد وسم <main>:

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

ما الذي بنيناه:

خلفية صفراء بملء الشاشة (تأثير فوري)
عنوان رئيسي ضخم باستخدام Archivo Black
صندوق محتوى بحدّ سميك وظل صلب
أزرار حث على الإجراء مع تأثيرات تمرير (يتحرك الظل عند التمرير)
مقاييس إثبات اجتماعي
نموذج بصري للمنتج (تمثيل مجرّد)
بطاقة إبراز عائمة لإضافة العمق

قرارات التصميم:

الخلفية الصفراء = طاقة عالية، يستحيل تجاهلها
صندوق المحتوى الأبيض = يخلق التباين والتسلسل الهرمي
زر الحث الأسود على الأصفر = أقصى وضوح
البطاقة السماوية العائمة = تضيف اللاتناظر (مبدأ نيوبروتالي)

الخطوة 5: قسم المزايا (10 دقائق)

لنبنِ بطاقات المزايا. أضف هذا بعد قسم البطل:

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

ما الذي بنيناه:

6 بطاقات مزايا في شبكة متجاوبة
تجميع لوني (وردي، سماوي، أصفر، أبيض) لإثارة الاهتمام البصري
أيقونات إيموجي (بسيطة، مرحة، منسجمة مع الهوية)
تأثير تمرير (البطاقات ترتفع عند التمرير)
حدود سميكة وظلال صلبة متسقة

نمط التصميم: لاحظ كيف تستخدم البطاقات الثلاث الأولى ألوان إبراز (وردي، سماوي، أصفر) بينما تستخدم البطاقات الثلاث السفلية اللون الأبيض؟ يخلق هذا تسلسلًا هرميًا بصريًا، إذ يحظى الصف العلوي بمزيد من الانتباه.

الخطوة 6: قسم التسعير (12 دقيقة)

جداول التسعير حاسمة. لنجعلها مستحيلة التفويت:

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

ما الذي بنيناه:

ثلاث فئات تسعير بتمييز واضح
ترميز لوني (أبيض = مجاني، أصفر = شائع، سماوي = مميز)
البطاقة الوسطى مرفوعة وأكبر (تلفت الانتباه إلى الخطة الموصى بها)
شارة "Most Popular" على خطة Pro
علامات صح للمزايا (✓ و ✗) للوضوح
ضمان استرداد الأموال لبناء الثقة

استراتيجية التصميم:

الخلفية السوداء تجعل البطاقات الملونة تبرز
البطاقة الوسطى المرفوعة قليلًا تخلق تسلسلًا هرميًا بصريًا
تموضع أزرار الحث المتسق يسهّل المقارنة
أزرار الحث الملونة المختلفة تطابق خلفية البطاقة

الخطوة 7: قسم الشهادات (8 دقائق)

الإثبات الاجتماعي يبيع. لنضف الشهادات:

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

ما الذي بنيناه:

ثلاث بطاقات شهادات بتنسيق متسق
تقييمات بالنجوم (الأصفر = جذب الانتباه)
صور رمزية للمستخدمين (مربعات ملونة مجرّدة بدلًا من الصور)
أسماء وألقاب لتعزيز المصداقية

لماذا الصور الرمزية المجرّدة؟ الصور الحقيقية قد تبدو مؤسسية. المربعات الملونة تحافظ على الأسلوب النيوبروتالي المرح والهندسي.

الخطوة 8: التذييل (5 دقائق)

كل موقع يحتاج إلى تذييل. لنجعل تذييلنا جريئًا:

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

ما الذي بنيناه:

تخطيط تذييل من أربعة أعمدة
الهوية والتنقّل والاشتراك في النشرة البريدية
تأثيرات تمرير (الروابط تتحول إلى الأصفر)
حقل بريد إلكتروني بتنسيق بروتالي
شريط حقوق نشر سفلي

الخطوة 9: إضافة اللمسات النهائية والتفاعلات (5 دقائق)

لنضف بعض اللمسات الأخيرة لجعل الموقع يبدو مصقولًا.

التمرير السلس

أضف هذا إلى ملف src/styles.css:

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

زر تبديل قائمة الجوال

أضف كود JavaScript هذا قبل وسم </body> الختامي:

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

تحسين الأداء

أضف وسوم الميتا هذه إلى <head> لديك:

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

الخطوة 10: الاختبار والتحسينات (5 دقائق)

الآن اختبر موقعك:

اختبار التجاوب

افتح أدوات المطور (F12) واختبر نقاط التوقف هذه:

الجوال (375px)
اللوحي (768px)
سطح المكتب (1280px)

تأكد من أن:

النص قابل للقراءة بجميع الأحجام
الأزرار قابلة للنقر على الجوال (بارتفاع 44px على الأقل)
تخطيطات الشبكة تنطوي بشكل صحيح
الظلال لا تُقتطع على الشاشات الصغيرة

فحص إمكانية الوصول

اعبر قائمة التحقق هذه:

جميع العناصر التفاعلية قابلة للوصول عبر لوحة المفاتيح (تنقّل بـ Tab عبر الصفحة)
تباين الألوان يفي بمعايير WCAG AA (أسود على أبيض ✓، أصفر على أبيض ✓)
الصور تحمل نصًا بديلًا (استخدمنا عناصر div، لكن إن أضفت صورًا، فأضف نصًا بديلًا)
حقول النماذج تحمل تسميات
حالات التركيز مرئية

فحص الأداء

افتح Lighthouse في أدوات مطوري Chrome وشغّل تدقيقًا. من المفترض أن ترى:

الأداء: 90+ (حد أدنى من CSS، بلا أطر عمل ثقيلة)
إمكانية الوصول: 90+ (تباين عالٍ، HTML دلالي)
أفضل الممارسات: 90+
تحسين محركات البحث: 90+

إذا كانت النتائج منخفضة، إليك حلولًا شائعة:

أضف width و height للصور
صغّر حجم CSS في الإنتاج
فعّل ترويسات التخزين المؤقت
اضغط الصور

إضافي: التحويل إلى React/Next.js

تريد استخدام هذا في تطبيق React؟ إليك كيفية تحويل قسم البطل:

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

ثم في ملف tailwind.config.ts:

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

أخطاء شائعة وكيفية تجنبها

بعد بناء عشرات المواقع النيوبروتالية، إليك المزالق التي أراها كثيرًا:

1. عرض حدود غير متسق

الخطأ: استخدام حدود بعرض 2px على بعض العناصر، و 5px على أخرى، و 3px في مكان آخر.

الحل: اختر عرضين أو ثلاثة للحدود (مثلًا 3px قياسي، 4px للتأكيد، 6px للعناصر الكبرى) والتزم بها في جميع أنحاء الموقع.

2. نسيان إزاحة الظلال على الجوال

الخطأ: إزاحات ظل بمقدار 10px على الجوال تُقتطع أو تسبب تمريرًا أفقيًا.

الحل: استخدم أدوات ظل متجاوبة:

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. الإفراط في ألوان الإبراز

الخطأ: استخدام 5 ألوان أو أكثر ظنًا أن "الأكثر = الأكثر بروتالية".

الحل: التزم بالأسود والأبيض إضافة إلى لونين أو ثلاثة للإبراز كحد أقصى. لوحتنا تستخدم الأصفر والوردي والسماوي، وهذا يقترب بالفعل من الحد.

4. إهمال إمكانية الوصول

الخطأ: نص أصفر على خلفية بيضاء (غير قابل للقراءة)، بلا حالات تركيز، تباين ضعيف.

الحل: اختبر التباين دائمًا. استخدم نصًا أسود على خلفيات صفراء/بيضاء، ونصًا أبيض على خلفيات سوداء/داكنة.

5. تسلّل الظلال الناعمة

الخطأ: استخدام ظلال Tailwind الافتراضية عن غير قصد (shadow-lg) التي تحتوي على ضبابية.

الحل: أنشئ أدوات ظل مخصصة وعطّل الظلال الافتراضية إن لزم الأمر.

الخطوات التالية والمصادر

تهانينا. لقد بنيت للتو موقعًا نيوبروتاليًا كاملًا من الصفر.

ماذا تفعل بعد ذلك

1. انشره

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. أضف وظائف

اربط نموذج النشرة البريدية بخدمة (ConvertKit، Mailchimp)
طبّق أزرار الحث في قسم التسعير عبر Stripe
أضف التحليلات (Plausible، Fathom)

3. وسّع نظام التصميم

أنشئ مزيدًا من المكوّنات (نوافذ منبثقة، قوائم منسدلة، تلميحات)
ابنِ صفحات إضافية (من نحن، مدونة، تواصل)
أضف الوضع الداكن (النيوبروتالية تعمل بشكل رائع في الوضع الداكن أيضًا)

4. حسّن أكثر

صغّر حجم CSS و HTML
أضف تحسين الصور
طبّق استراتيجيات التخزين المؤقت
فكّر في مولّد مواقع ثابتة لأداء أفضل

مصادر مفيدة

إلهام التصميم:

Brutalist Websites - مجموعة منتقاة
Gumroad - نيوبروتالية أُنجزت بشكل صحيح
Feastables - تجارة إلكترونية نيوبروتالية مرحة

الأدوات:

Neobrutalism - مكوّنات نيوبروتالية جاهزة
Tailwind CSS v4 Docs - التوثيق الرسمي
Google Fonts - خطوط مجانية (Archivo Black، Space Grotesk)

مولّدات لوحات الألوان:

Coolors - توليد أنظمة ألوان
Adobe Color - أدوات عجلة الألوان واللوحات

أفكار ختامية

لقد بنيت موقعًا نيوبروتاليًا من الصفر إلى النشر في أقل من ساعة. هذا إنجاز مثير للإعجاب حقًا.

النقاط الرئيسية:

النيوبروتالية = حدود سميكة + ظلال صلبة + ألوان جريئة + صفر استدارة للحدود
توجيه @theme في Tailwind v4 يجعل التخصيص أنظف
الاتساق حاسم (عرض الحدود، الظلال، الألوان)
إمكانية الوصول ما زالت مهمة (التباين العالي يساعد)
ابدأ بنظام تصميم متين، ثم ابنِ المكوّنات

هذا الموقع ليس مجرد عرض توضيحي، بل قالب يمكنك تكييفه لمشاريع حقيقية. غيّر الألوان، بدّل الخطوط، اضبط الظلال، اجعله لك.

أفضل ما في النيوبروتالية؟ إنها متسامحة. النقص جزء من الأسلوب. حدّك المنحرف قليلًا أو عنصرك غير المتمركز؟ هذا ليس خللًا، بل طابعًا مميزًا.

الآن اذهب وابنِ شيئًا جريئًا لا يشبه محفظة أعمال/منتج SaaS/صفحة هبوط أي شخص آخر.

وإن أردت مكوّنات جاهزة لتتحرك أسرع، فاطّلع على Neobrutalism. إنه هذا الأسلوب، معبّأ كمكوّنات للنسخ واللصق.

بناءً موفقًا. 🚀

لديك أسئلة؟ اترك تعليقًا أو تواصل عبر Twitter. أحب أن أرى ما يبنيه الناس بهذا الأسلوب.

تريد الكود الكامل؟ ملف HTML الكامل متاح كـ GitHub Gist (الرابط في التعليقات).

وجدت هذا مفيدًا؟ شاركه مع مطوّر يحتاج إلى الهروب من فخ التصميم الممل.

→ العودة إلى المدوّنة

بناء موقع نيوبروتالي من الصفر باستخدام Tailwind CSS v4

ما الذي سنبنيه

الخطوة 1: إعداد المشروع (5 دقائق)

إنشاء المشروع

تهيئة npm وتثبيت Tailwind v4

إنشاء بنية المشروع

الخطوة 2: إعداد Tailwind v4 (3 دقائق)

إنشاء ملف الأنماط

الخطوة 3: بنية HTML (5 دقائق)

إعداد خادم التطوير

الخطوة 4: بناء قسم البطل (10 دقائق)

الخطوة 5: قسم المزايا (10 دقائق)

الخطوة 6: قسم التسعير (12 دقيقة)

الخطوة 7: قسم الشهادات (8 دقائق)

الخطوة 8: التذييل (5 دقائق)

الخطوة 9: إضافة اللمسات النهائية والتفاعلات (5 دقائق)

التمرير السلس

زر تبديل قائمة الجوال

تحسين الأداء

الخطوة 10: الاختبار والتحسينات (5 دقائق)

اختبار التجاوب

فحص إمكانية الوصول

فحص الأداء

إضافي: التحويل إلى React/Next.js

أخطاء شائعة وكيفية تجنبها

1. عرض حدود غير متسق

2. نسيان إزاحة الظلال على الجوال

3. الإفراط في ألوان الإبراز

4. إهمال إمكانية الوصول

5. تسلّل الظلال الناعمة

الخطوات التالية والمصادر

ماذا تفعل بعد ذلك

مصادر مفيدة

أفكار ختامية

20 لوحة ألوان نيوبروتالية مع أكواد Hex جاهزة للنسخ

حوّل أي مشروع React إلى النيوبروتالية في 10 دقائق

النيوبروتالية مقابل المينيمالية: متى تستخدم كل أسلوب

بناء موقع نيوبروتالي من الصفر باستخدام Tailwind CSS v4

ما الذي سنبنيه

الخطوة 1: إعداد المشروع (5 دقائق)

إنشاء المشروع

تهيئة npm وتثبيت Tailwind v4

إنشاء بنية المشروع

الخطوة 2: إعداد Tailwind v4 (3 دقائق)

إنشاء ملف الأنماط

الخطوة 3: بنية HTML (5 دقائق)

إعداد خادم التطوير

الخطوة 4: بناء قسم البطل (10 دقائق)

الخطوة 5: قسم المزايا (10 دقائق)

الخطوة 6: قسم التسعير (12 دقيقة)

الخطوة 7: قسم الشهادات (8 دقائق)

الخطوة 8: التذييل (5 دقائق)

الخطوة 9: إضافة اللمسات النهائية والتفاعلات (5 دقائق)

التمرير السلس

زر تبديل قائمة الجوال

تحسين الأداء

الخطوة 10: الاختبار والتحسينات (5 دقائق)

اختبار التجاوب

فحص إمكانية الوصول

فحص الأداء

إضافي: التحويل إلى React/Next.js

أخطاء شائعة وكيفية تجنبها

1. عرض حدود غير متسق

2. نسيان إزاحة الظلال على الجوال

3. الإفراط في ألوان الإبراز

4. إهمال إمكانية الوصول

5. تسلّل الظلال الناعمة

الخطوات التالية والمصادر

ماذا تفعل بعد ذلك

مصادر مفيدة

أفكار ختامية

مقالات ذات صلة

20 لوحة ألوان نيوبروتالية مع أكواد Hex جاهزة للنسخ

حوّل أي مشروع React إلى النيوبروتالية في 10 دقائق

النيوبروتالية مقابل المينيمالية: متى تستخدم كل أسلوب