1 במאי 2026

tailwind css נאו-ברוטליזם מדריך פיתוח web css

בניית אתר נאו-ברוטליסטי עם Tailwind CSS v4 - מדריך מלא

בונים אתר נאו-ברוטליסטי שלם מאפס עם Tailwind CSS v4. מדריך מעשי שמלווה אתכם מההתקנה, דרך ההגדרה ועד בניית כל קומפוננטה, עם דוגמאות קוד להעתקה והדבקה.

Dov Azencot

@DovAzencot

שיתוף ב-X

קדימה, מפתחים. בואו נבנה משהו נועז.

בלי תיאוריה. בלי מילוי סרק. רק אתם, אני וטרמינל. בסוף המדריך הזה יהיה לכם אתר נאו-ברוטליסטי מלא ופעיל, בנוי עם Tailwind CSS v4.

מדובר על:

מסגרות שחורות עבות
צללים קשיחים ומוזחים
הדגשות בצהוב זוהר
טיפוגרפיה מסיבית
אפס פינות מעוגלות

זה לא מדריך בסגנון "הנה קומפוננטה". אנחנו בונים דף נחיתה שלם מאפס - סקשן hero, פיצ'רים, תמחור, פוטר, הכול. כל שורת קוד מוסברת. כל החלטת עיצוב מנומקת.

קחו קפה. פתחו את הטרמינל. בואו נהיה ברוטליים.

מה אנחנו בונים

לפני שמתחילים, הנה מה שאנחנו יוצרים:

דף נחיתה למוצר SaaS דמיוני בשם "BoldTask" - כלי לניהול פרויקטים שלא נראה כמו כל שאר הכלים לניהול פרויקטים.

הדף יכלול:

סקשן hero עם CTA
כרטיסי פיצ'רים
טבלת תמחור
סקשן המלצות
פוטר

הכול עם האסתטיקה הנאו-ברוטליסטית האופיינית: נועזת, בעלת ניגודיות גבוהה, ובלתי אפשרית להתעלמות.

סטאק טכנולוגי:

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);
}

מה בדיוק עשינו:

הגדרנו פלטת צבעים מותאמת (שחור, לבן, צהוב, ורוד, ציאן)
ביטלנו את כל ערכי border-radius (נאו-ברוטליזם = פינות חדות)
יצרנו יוטיליטיז לצללים קשיחים (הזחה בלי טשטוש)
הוספנו אפקטי hover מותאמים לכפתורים שמחקים "לחיצה" של הצל

שלב 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: בניית סקשן ה-Hero (10 דקות)

עכשיו לכוכב של המופע. סקשן ה-hero חייב להיות נועז בלי פשרות.

הוסיפו את זה מיד אחרי התג <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
תיבת תוכן עם מסגרת עבה וצל קשיח
כפתורי CTA עם אפקטי hover (הצל זז במעבר עכבר)
מדדי הוכחה חברתית
מוקאפ ויזואלי של המוצר (ייצוג מופשט)
כרטיס הדגשה מרחף לתחושת עומק

החלטות עיצוב:

רקע צהוב = אנרגיה גבוהה, בלתי אפשרי להתעלם
תיבת תוכן לבנה = יוצרת ניגודיות והיררכיה
CTA שחור על צהוב = נראות מקסימלית
כרטיס ציאן מרחף = מוסיף אסימטריה (עיקרון נאו-ברוטליסטי)

שלב 5: סקשן הפיצ'רים (10 דקות)

בואו נבנה כרטיסי פיצ'רים. הוסיפו את זה אחרי סקשן ה-hero:

<!-- 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 כרטיסי פיצ'רים ברשת רספונסיבית
בלוקים של צבע (ורוד, ציאן, צהוב, לבן) לעניין ויזואלי
אייקוני אמוג'י (פשוטים, שובבים, נאמנים למותג)
אפקט hover (הכרטיסים מתרוממים במעבר עכבר)
מסגרות עבות וצללים קשיחים באופן עקבי

דפוס עיצוב: שמתם לב ששלושת הכרטיסים הראשונים משתמשים בצבעי הדגשה (ורוד, ציאן, צהוב) בעוד השלושה התחתונים לבנים? זה יוצר היררכיה ויזואלית - השורה העליונה מקבלת יותר תשומת לב.

שלב 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>

מה בנינו:

שלוש רמות תמחור עם בידול ברור
קידוד צבעים (לבן = חינם, צהוב = פופולרי, ציאן = פרימיום)
הכרטיס האמצעי מוגבה וגדול יותר (מושך תשומת לב לתוכנית המומלצת)
תג "הכי פופולרי" על תוכנית ה-Pro
סימוני פיצ'רים (✓ ו-✗) לבהירות
אחריות להחזר כספי לבניית אמון

אסטרטגיית עיצוב:

רקע שחור גורם לכרטיסים הצבעוניים לבלוט
הכרטיס האמצעי מעט מורם ויוצר היררכיה ויזואלית
מיקום עקבי של ה-CTA מקל על ההשוואה
כפתורי CTA בצבעים שונים תואמים לרקע הכרטיס

שלב 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>

מה בנינו:

פריסת פוטר בארבע עמודות
מיתוג, ניווט, והרשמה לניוזלטר
אפקטי hover (הקישורים הופכים לצהובים)
שדה אימייל בעיצוב ברוטלי
סרגל זכויות יוצרים תחתון

שלב 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>

אופטימיזציית ביצועים

הוסיפו את תגי ה-meta האלה ל-<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 דקות)

עכשיו בדקו את האתר שלכם:

בדיקת רספונסיביות

פתחו את DevTools (F12) ובדקו את נקודות השבירה האלה:

מובייל (375px)
טאבלט (768px)
דסקטופ (1280px)

ודאו ש:

הטקסט קריא בכל הגדלים
הכפתורים ניתנים ללחיצה במובייל (לפחות 44px גובה)
פריסות הרשת מתקפלות כמו שצריך
הצללים לא נחתכים במסכים קטנים

בדיקת נגישות

עברו על הצ'קליסט הזה:

כל האלמנטים האינטראקטיביים נגישים במקלדת (Tab לאורך הדף)
ניגודיות הצבעים עומדת בתקני WCAG AA (שחור על לבן ✓, צהוב על לבן ✓)
לתמונות יש טקסט alt (השתמשנו ב-divs, אבל אם אתם מוסיפים תמונות, הוסיפו טקסט alt)
לשדות הטופס יש תוויות
מצבי focus נראים

בדיקת ביצועים

פתחו את Lighthouse ב-Chrome DevTools והריצו בדיקה. אתם אמורים לראות:

ביצועים: 90+ (CSS מינימלי, בלי פריימוורקים כבדים)
נגישות: 90+ (ניגודיות גבוהה, HTML סמנטי)
שיטות עבודה מומלצות: 90+
SEO: 90+

אם הציונים נמוכים, תיקונים נפוצים:

הוסיפו width ו-height לתמונות
מזערו CSS בפרודקשן
הפעילו כותרות caching
דחסו תמונות

בונוס: המרה ל-React/Next.js

רוצים להשתמש בזה באפליקציית React? הנה איך להמיר את סקשן ה-hero:

// 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 במקום אחר.

התיקון: בחרו 2-3 עוביי מסגרת (למשל 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 צבעים או יותר מתוך מחשבה ש"יותר = יותר ברוטלי".

התיקון: היצמדו לשחור + לבן + 2-3 צבעי הדגשה לכל היותר. הפלטה שלנו משתמשת בצהוב, ורוד וציאן - וזה כבר על הגבול.

4. הזנחת נגישות

הטעות: טקסט צהוב על רקע לבן (בלתי קריא), בלי מצבי focus, ניגודיות ירודה.

התיקון: תמיד בדקו ניגודיות. השתמשו בטקסט שחור על רקעים צהובים/לבנים, וטקסט לבן על רקעים שחורים/כהים.

5. צללים רכים שמתגנבים פנימה

הטעות: שימוש בטעות בצללי ברירת המחדל של Tailwind (shadow-lg) שיש בהם טשטוש.

התיקון: צרו יוטיליטיז מותאמים לצל ובטלו את צללי ברירת המחדל אם צריך.

הצעדים הבאים ומשאבים

כל הכבוד. בדיוק בניתם אתר נאו-ברוטליסטי שלם מאפס.

מה לעשות עכשיו

1. פרסמו אותו

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

2. הוסיפו פונקציונליות

חברו את טופס הניוזלטר לשירות (ConvertKit, Mailchimp)
ממשו את כפתורי ה-CTA של התמחור עם Stripe
הוסיפו אנליטיקס (Plausible, Fathom)

3. הרחיבו את מערכת העיצוב

צרו עוד קומפוננטות (מודלים, dropdowns, tooltips)
בנו דפים נוספים (אודות, בלוג, יצירת קשר)
הוסיפו מצב כהה (נאו-ברוטליזם עובד מצוין גם במצב כהה)

4. אופטמו עוד

מזערו CSS ו-HTML
הוסיפו אופטימיזציה לתמונות
ממשו אסטרטגיות caching
שקלו מחולל אתרים סטטי לביצועים טובים עוד יותר

משאבים שימושיים

השראה לעיצוב:

Brutalist Websites - אוסף אצור
Gumroad - נאו-ברוטליזם שנעשה נכון
Feastables - מסחר אלקטרוני נאו-ברוטליסטי ושובב

כלים:

Neobrutalism - קומפוננטות נאו-ברוטליסטיות מוכנות
Tailwind CSS v4 Docs - תיעוד רשמי
Google Fonts - פונטים חינמיים (Archivo Black, Space Grotesk)

מחוללי פלטות צבעים:

Coolors - יצירת ערכות צבעים
Adobe Color - גלגל צבעים וכלי פלטות

מחשבות לסיום

בדיוק בניתם אתר נאו-ברוטליסטי מאפס ועד פרסום בפחות משעה. זה ממש מרשים.

נקודות מפתח:

נאו-ברוטליזם = מסגרות עבות + צללים קשיחים + צבעים נועזים + אפס border-radius
הדירקטיבה @theme של Tailwind v4 הופכת את ההתאמה לנקייה יותר
עקביות היא קריטית (עוביי מסגרת, צללים, צבעים)
נגישות עדיין חשובה (ניגודיות גבוהה עוזרת)
התחילו ממערכת עיצוב מוצקה, ואז בנו קומפוננטות

האתר הזה הוא לא רק דמו - הוא תבנית שאפשר להתאים לפרויקטים אמיתיים. שנו את הצבעים, החליפו את הפונטים, כווננו את הצללים, הפכו אותו לשלכם.

החלק הכי טוב בנאו-ברוטליזם? הוא סלחני. חוסר שלמות הוא חלק מהאסתטיקה. המסגרת שמעט לא מיושרת או האלמנט שלא ממש במרכז? זה לא באג, זה אופי.

עכשיו לכו ובנו משהו נועז שלא נראה כמו הפורטפוליו/ה-SaaS/דף הנחיתה של כולם.

ואם אתם רוצים קומפוננטות מוכנות כדי להתקדם עוד יותר מהר, הציצו ב-Neobrutalism. זו בדיוק האסתטיקה הזו, ארוזה כקומפוננטות להעתקה והדבקה.

בנייה מהנה. 🚀

יש שאלות? השאירו תגובה או פנו אלי בטוויטר. אני אוהב לראות מה אנשים בונים עם הסגנון הזה.

רוצים את הקוד המלא? קובץ ה-HTML המלא זמין כ-GitHub Gist (קישור בתגובות).

היה מועיל? שתפו עם מפתח שצריך לברוח ממלכודת העיצוב המשעמם.

→ חזרה לבלוג

בניית אתר נאו-ברוטליסטי עם Tailwind CSS v4 - מדריך מלא

מה אנחנו בונים

שלב 1: הקמת הפרויקט (5 דקות)

יצירת הפרויקט

אתחול npm והתקנת Tailwind v4

יצירת מבנה הפרויקט

שלב 2: הגדרת Tailwind v4 (3 דקות)

יצירת קובץ הסגנונות

שלב 3: מבנה ה-HTML (5 דקות)

הקמת שרת פיתוח

שלב 4: בניית סקשן ה-Hero (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: בניית סקשן ה-Hero (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 דקות

נאו-ברוטליזם מול מינימליזם: מתי להשתמש בכל אחד (ומתי לא)