lukaszraczylo/beat-delivery-methodology
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/beat-delivery-methodology.git synced 2026-06-09 23:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update user experience.

Browse Source
This commit is contained in:
Lukasz Raczylo
2025-12-13 01:38:45 +00:00
parent 2c35679bd8
commit c7dd4d0371
7 changed files with 255 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/src/assets/styles/main.css
+24 -6
View File
@@ -2,6 +2,19 @@
@tailwind components;
@tailwind utilities;
@layer base {
/* Ensure smooth scrolling */
html {
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
/* Better touch targets on mobile */
button, a {
touch-action: manipulation;
}
}
@layer components {
.glass {
@apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg border border-white/20 dark:border-gray-700/50;
@@ -20,23 +33,23 @@
}
.btn-primary {
@apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105;
@apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
}
.btn-secondary {
@apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105;
@apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
}
.section-title {
@apply text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4;
@apply text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4;
}
.section-subtitle {
@apply text-lg text-gray-600 dark:text-gray-300;
@apply text-base sm:text-lg text-gray-600 dark:text-gray-300 px-2 sm:px-0;
}
.card {
@apply glass p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
@apply glass p-4 sm:p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
}
.nav-link {
@@ -44,7 +57,12 @@
}
.icon-box {
@apply w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
@apply w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
}
/* Section spacing responsive */
.section-padding {
@apply py-10 sm:py-12 md:py-16;
}
}
public/src/components/layout/Footer.vue
+16 -16
View File
@@ -4,9 +4,9 @@ const currentYear = new Date().getFullYear()
<template>
<footer class="bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
<div class="grid md:grid-cols-3 gap-8">
<div>
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8">
<div class="sm:col-span-2 md:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
<span class="text-white font-bold text-lg">B</span>
@@ -22,25 +22,25 @@ const currentYear = new Date().getFullYear()
</div>
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Quick Links</h3>
<ul class="space-y-2 text-sm">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Quick Links</h3>
<ul class="grid grid-cols-2 sm:grid-cols-1 gap-2 text-sm">
<li>
<RouterLink to="/values" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<RouterLink to="/values" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
Core Values
</RouterLink>
</li>
<li>
<RouterLink to="/principles" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<RouterLink to="/principles" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
12 Principles
</RouterLink>
</li>
<li>
<RouterLink to="/framework" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<RouterLink to="/framework" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
Framework
</RouterLink>
</li>
<li>
<RouterLink to="/reference" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<RouterLink to="/reference" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
Quick Reference
</RouterLink>
</li>
@@ -48,15 +48,15 @@ const currentYear = new Date().getFullYear()
</div>
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Created By</h3>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Created By</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
The BEAT Manifesto was created by <strong>Lukasz Raczylo</strong>.
</p>
<div class="flex space-x-3">
<div class="flex space-x-1">
<a
href="https://github.com/lukaszraczylo"
target="_blank"
class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
aria-label="GitHub"
>
<i class="fab fa-github text-xl"></i>
@@ -64,7 +64,7 @@ const currentYear = new Date().getFullYear()
<a
href="https://www.linkedin.com/in/raczylo/"
target="_blank"
class="text-gray-500 hover:text-blue-600 transition-colors"
class="text-gray-500 hover:text-blue-600 transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
aria-label="LinkedIn"
>
<i class="fab fa-linkedin text-xl"></i>
@@ -73,9 +73,9 @@ const currentYear = new Date().getFullYear()
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
<p class="text-gray-500 dark:text-gray-500 text-sm">
<div class="mt-6 sm:mt-8 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700">
<div class="flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4 text-center sm:text-left">
<p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm">
&copy; {{ currentYear }} BEAT Manifesto by Lukasz Raczylo. Open for use and adaptation.
</p>
<p class="text-gray-400 dark:text-gray-600 text-xs">
public/src/components/ui/CodeBlock.vue
+4 -4
View File
@@ -25,17 +25,17 @@ const copyCode = async () => {
<template>
<div class="rounded-xl overflow-hidden bg-gray-900 dark:bg-gray-950">
<div v-if="title" class="flex items-center justify-between px-4 py-2 bg-gray-800 dark:bg-gray-900 border-b border-gray-700">
<span class="text-gray-400 text-sm font-medium">{{ title }}</span>
<div v-if="title" class="flex items-center justify-between px-3 sm:px-4 py-2 bg-gray-800 dark:bg-gray-900 border-b border-gray-700">
<span class="text-gray-400 text-xs sm:text-sm font-medium truncate mr-2">{{ title }}</span>
<button
@click="copyCode"
class="text-gray-400 hover:text-white transition-colors p-1"
class="text-gray-400 hover:text-white transition-colors p-2 min-w-[40px] min-h-[40px] flex items-center justify-center flex-shrink-0"
aria-label="Copy code"
>
<i v-if="copied" class="fas fa-check text-green-400"></i>
<i v-else class="fas fa-copy"></i>
</button>
</div>
<pre class="p-4 overflow-x-auto"><code ref="codeRef" class="text-sm text-gray-100 font-mono"><slot></slot></code></pre>
<pre class="p-3 sm:p-4 overflow-x-auto text-xs sm:text-sm"><code ref="codeRef" class="text-gray-100 font-mono whitespace-pre-wrap break-words sm:whitespace-pre sm:break-normal"><slot></slot></code></pre>
</div>
</template>
public/src/components/ui/TableCard.vue
+23 -5
View File
@@ -17,17 +17,35 @@ defineProps({
<template>
<div class="glass rounded-xl overflow-hidden">
<div v-if="title" class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ title }}</h3>
<div v-if="title" class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">{{ title }}</h3>
</div>
<div class="overflow-x-auto">
<!-- Mobile card view -->
<div class="block sm:hidden">
<div
v-for="(row, rowIndex) in rows"
:key="rowIndex"
class="p-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0"
>
<div
v-for="(cell, cellIndex) in row"
:key="cellIndex"
class="py-1"
>
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">{{ headers[cellIndex] }}: </span>
<span class="text-sm text-gray-700 dark:text-gray-300" v-html="cell"></span>
</div>
</div>
</div>
<!-- Desktop table view -->
<div class="hidden sm:block overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50 dark:bg-gray-800/50">
<th
v-for="header in headers"
:key="header"
class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider"
class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider"
>
{{ header }}
</th>
@@ -42,7 +60,7 @@ defineProps({
<td
v-for="(cell, cellIndex) in row"
:key="cellIndex"
class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300"
class="px-4 md:px-6 py-3 md:py-4 text-sm text-gray-700 dark:text-gray-300"
>
<span v-html="cell"></span>
</td>
public/src/views/FrameworkView.vue
+24 -2
View File
@@ -1,5 +1,4 @@
<script setup>
import CodeBlock from '@/components/ui/CodeBlock.vue'
import { roles, priorityBuckets, ceremonies, constraints } from '@/data/manifesto'
const workItems = [
@@ -169,7 +168,30 @@ const bucketColors = {
<p class="text-gray-600 dark:text-gray-400">A simple kanban with priority built in.</p>
</div>
<CodeBlock title="Board Flow">ICE → LATER → NEXT → IN PROGRESS → DONE</CodeBlock>
<!-- Visual Board Flow -->
<div class="glass p-4 sm:p-6 rounded-xl overflow-x-auto">
<div class="flex items-center justify-start sm:justify-center gap-2 sm:gap-3 min-w-max sm:min-w-0">
<div class="px-3 sm:px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">
ICE
</div>
<i class="fas fa-arrow-right text-gray-400 text-xs"></i>
<div class="px-3 sm:px-4 py-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium">
LATER
</div>
<i class="fas fa-arrow-right text-gray-400 text-xs"></i>
<div class="px-3 sm:px-4 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-xs sm:text-sm font-medium">
NEXT
</div>
<i class="fas fa-arrow-right text-gray-400 text-xs"></i>
<div class="px-3 sm:px-4 py-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs sm:text-sm font-medium">
IN PROGRESS
</div>
<i class="fas fa-arrow-right text-gray-400 text-xs"></i>
<div class="px-3 sm:px-4 py-2 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs sm:text-sm font-medium">
DONE
</div>
</div>
</div>
<div class="mt-8 grid sm:grid-cols-3 gap-4">
<div class="glass p-4 rounded-lg">
public/src/views/PracticesView.vue
+33 -13
View File
@@ -1,5 +1,4 @@
<script setup>
import CodeBlock from '@/components/ui/CodeBlock.vue'
import { ceremonies, incidentProtocol, technicalPractices, definitionOfDone } from '@/data/manifesto'
</script>
@@ -77,21 +76,42 @@ import { ceremonies, incidentProtocol, technicalPractices, definitionOfDone } fr
</div>
<div class="max-w-xl mx-auto">
<CodeBlock title="Check-in Template">Working on: [current task]
Blocked by: [nothing / specific issue]</CodeBlock>
<!-- Visual Check-in Template -->
<div class="glass p-5 sm:p-6 rounded-xl mb-6">
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-tasks text-white"></i>
</div>
<div>
<div class="text-xs text-blue-600 dark:text-blue-400 font-semibold uppercase tracking-wide">Working on</div>
<div class="text-sm text-gray-700 dark:text-gray-300">[current task]</div>
</div>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-hand-paper text-white"></i>
</div>
<div>
<div class="text-xs text-amber-600 dark:text-amber-400 font-semibold uppercase tracking-wide">Blocked by</div>
<div class="text-sm text-gray-700 dark:text-gray-300">[nothing / specific issue]</div>
</div>
</div>
</div>
</div>
<div class="mt-6 grid sm:grid-cols-3 gap-4">
<div class="glass p-4 rounded-lg text-center">
<i class="fas fa-clock text-blue-500 text-xl mb-2"></i>
<div class="text-sm text-gray-600 dark:text-gray-400">Post once daily</div>
<div class="grid grid-cols-3 gap-3 sm:gap-4">
<div class="glass p-3 sm:p-4 rounded-lg text-center">
<i class="fas fa-clock text-blue-500 text-lg sm:text-xl mb-2"></i>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Post once daily</div>
</div>
<div class="glass p-4 rounded-lg text-center">
<i class="fas fa-stopwatch text-purple-500 text-xl mb-2"></i>
<div class="text-sm text-gray-600 dark:text-gray-400">Two minutes</div>
<div class="glass p-3 sm:p-4 rounded-lg text-center">
<i class="fas fa-stopwatch text-purple-500 text-lg sm:text-xl mb-2"></i>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Two minutes</div>
</div>
<div class="glass p-4 rounded-lg text-center">
<i class="fas fa-users-slash text-green-500 text-xl mb-2"></i>
<div class="text-sm text-gray-600 dark:text-gray-400">No gathering required</div>
<div class="glass p-3 sm:p-4 rounded-lg text-center">
<i class="fas fa-users-slash text-green-500 text-lg sm:text-xl mb-2"></i>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">No gathering</div>
</div>
</div>
</div>
public/src/views/ReferenceView.vue
+131 -34
View File
@@ -1,6 +1,5 @@
<script setup>
import TableCard from '@/components/ui/TableCard.vue'
import CodeBlock from '@/components/ui/CodeBlock.vue'
import { coreValues, teamValues, constraints, priorityBuckets, roles, ceremonies, definitionOfDone, incidentProtocol } from '@/data/manifesto'
const coreValuesHeaders = ['We Value More', 'Over']
@@ -39,6 +38,20 @@ const ceremoniesRows = ceremonies.map(c => [
c.duration,
c.purpose
])
const spottedIssueFlow = [
{ question: 'Blocking your work?', answer: 'Fix now', icon: 'fas fa-ban', color: 'red' },
{ question: '5 minutes or less?', answer: 'Fix now', icon: 'fas fa-clock', color: 'amber' },
{ question: 'More than 5 minutes?', answer: 'Log it, continue', icon: 'fas fa-sticky-note', color: 'blue' },
{ question: 'Production critical?', answer: 'Flag team', icon: 'fas fa-exclamation-triangle', color: 'purple' }
]
const colorMap = {
red: 'from-red-500 to-red-600 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300',
amber: 'from-amber-500 to-amber-600 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300',
blue: 'from-blue-500 to-blue-600 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300',
purple: 'from-purple-500 to-purple-600 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800 text-purple-700 dark:text-purple-300'
}
</script>
<template>
@@ -55,45 +68,45 @@ const ceremoniesRows = ceremonies.map(c => [
</div>
<h1 class="section-title animate-fade-in-up animate-delay-100">Quick Reference</h1>
<p class="section-subtitle max-w-2xl mx-auto animate-fade-in-up animate-delay-200">
Everything you need at a glance. Print this page and keep it handy.
Everything you need at a glance.
</p>
</div>
</section>
<!-- Core Values -->
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
<TableCard :headers="coreValuesHeaders" :rows="coreValuesRows" />
</div>
</section>
<!-- Team Values -->
<section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Team Values</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Team Values</h2>
<TableCard :headers="teamValuesHeaders" :rows="teamValuesRows" />
</div>
</section>
<!-- The Numbers -->
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Numbers</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Numbers</h2>
<TableCard :headers="constraintsHeaders" :rows="constraintsRows" />
</div>
</section>
<!-- Buckets & Roles -->
<section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid md:grid-cols-2 gap-8">
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
<div>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Priority Buckets</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Priority Buckets</h2>
<TableCard :headers="bucketsHeaders" :rows="bucketsRows" />
</div>
<div>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Roles</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Roles</h2>
<TableCard :headers="rolesHeaders" :rows="rolesRows" />
</div>
</div>
@@ -101,56 +114,140 @@ const ceremoniesRows = ceremonies.map(c => [
</section>
<!-- Ceremonies -->
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Ceremonies</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Ceremonies</h2>
<TableCard :headers="ceremoniesHeaders" :rows="ceremoniesRows" />
</div>
</section>
<!-- Templates -->
<section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Templates</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Templates</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Daily Check-in</h3>
<CodeBlock>Working on: [task]
Blocked by: [nothing / issue]</CodeBlock>
<!-- Daily Check-in Card -->
<div class="glass p-5 sm:p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<i class="fas fa-calendar-check text-blue-500"></i>
Daily Check-in
</h3>
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-tasks text-white text-xs"></i>
</div>
<div>
<div class="text-xs text-blue-600 dark:text-blue-400 font-medium">Working on</div>
<div class="text-sm text-gray-700 dark:text-gray-300">[current task]</div>
</div>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-hand-paper text-white text-xs"></i>
</div>
<div>
<div class="text-xs text-amber-600 dark:text-amber-400 font-medium">Blocked by</div>
<div class="text-sm text-gray-700 dark:text-gray-300">[nothing / specific issue]</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Spotted Issue Decision</h3>
<CodeBlock>Blocking? → Fix now
≤5 min? → Fix now
>5 min? → Log it, continue
Critical? → Flag team</CodeBlock>
<!-- Spotted Issue Decision Flow -->
<div class="glass p-5 sm:p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<i class="fas fa-code-branch text-purple-500"></i>
Spotted Issue Decision
</h3>
<div class="space-y-2">
<div
v-for="(item, index) in spottedIssueFlow"
:key="index"
class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border"
:class="colorMap[item.color].split(' ').slice(2).join(' ')"
>
<div
class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br flex items-center justify-center flex-shrink-0"
:class="colorMap[item.color].split(' ').slice(0, 2).join(' ')"
>
<i :class="item.icon" class="text-white text-xs"></i>
</div>
<div class="flex-1 min-w-0">
<span class="text-xs sm:text-sm font-medium">{{ item.question }}</span>
</div>
<i class="fas fa-arrow-right text-xs opacity-50 hidden sm:block"></i>
<span class="text-xs sm:text-sm font-bold whitespace-nowrap">{{ item.answer }}</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Definition of Done -->
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Definition of Done (Code)</h2>
<CodeBlock>{{ definitionOfDone.code.map(item => '✓ ' + item).join('\n') }}</CodeBlock>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Definition of Done (Code)</h2>
<div class="glass p-5 sm:p-6 rounded-xl">
<div class="grid sm:grid-cols-2 gap-2 sm:gap-3">
<div
v-for="item in definitionOfDone.code"
:key="item"
class="flex items-center gap-3 p-2 sm:p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
>
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span class="text-sm text-gray-700 dark:text-gray-300">{{ item }}</span>
</div>
</div>
</div>
</div>
</section>
<!-- Incident Protocol -->
<section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Incident Protocol</h2>
<CodeBlock>{{ incidentProtocol.map(step => step.step + ' ' + step.description.split('.')[0]).join('\n') }}</CodeBlock>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Incident Protocol</h2>
<div class="glass p-5 sm:p-6 rounded-xl">
<div class="relative">
<!-- Flow line for desktop -->
<div class="hidden sm:block absolute left-5 top-8 bottom-8 w-0.5 bg-gradient-to-b from-red-500 via-amber-500 to-green-500"></div>
<div class="space-y-4">
<div
v-for="(step, index) in incidentProtocol"
:key="step.step"
class="flex items-start gap-3 sm:gap-4"
>
<div
class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 z-10"
:class="[
index === 0 ? 'bg-gradient-to-br from-red-500 to-red-600' :
index === 1 ? 'bg-gradient-to-br from-orange-500 to-orange-600' :
index === 2 ? 'bg-gradient-to-br from-amber-500 to-amber-600' :
index === 3 ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
'bg-gradient-to-br from-green-500 to-green-600'
]"
>
<span class="text-white font-bold text-sm">{{ index + 1 }}</span>
</div>
<div class="flex-1 pb-2">
<div class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">{{ step.step.replace(/^\d+\.\s*/, '') }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">{{ step.description }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Note -->
<section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
<div class="glass p-6 rounded-xl">
<div class="glass p-5 sm:p-6 rounded-xl">
<p class="text-gray-600 dark:text-gray-400 text-sm mb-2">
BEAT v1.0 by <strong>Lukasz Raczylo</strong>
</p>