mirror of
https://github.com/lukaszraczylo/beat-delivery-methodology.git
synced 2026-10-23 06:57:07 +00:00
kimi-changes
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
<script setup>
|
||||
import IconCard from '@/components/ui/IconCard.vue'
|
||||
import TableCard from '@/components/ui/TableCard.vue'
|
||||
import { coreValues, teamValues } from '@/data/manifesto'
|
||||
|
||||
@@ -13,27 +12,31 @@ const coreValuesRows = coreValues.map(v => [
|
||||
<template>
|
||||
<div>
|
||||
<!-- Hero -->
|
||||
<section class="relative pt-24 sm:pt-32 pb-12 sm:pb-16 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-red-50 via-pink-50 to-purple-50 dark:from-gray-900 dark:via-red-900/10 dark:to-pink-900/10 transition-colors duration-300"></div>
|
||||
<div class="absolute top-0 -left-4 w-72 h-72 bg-red-300 dark:bg-red-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float"></div>
|
||||
<div class="absolute top-0 -right-4 w-72 h-72 bg-pink-300 dark:bg-pink-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float animate-delay-1000"></div>
|
||||
<section class="relative pt-32 sm:pt-40 pb-16 sm:pb-20 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-rose-50 via-pink-50 to-purple-50 dark:from-gray-900 dark:via-rose-950/20 dark:to-pink-950/20 transition-colors duration-300"></div>
|
||||
<div class="absolute top-20 -left-20 w-96 h-96 bg-rose-400/20 dark:bg-rose-500/20 rounded-full filter blur-3xl animate-float"></div>
|
||||
<div class="absolute top-40 -right-20 w-80 h-80 bg-pink-400/20 dark:bg-pink-500/20 rounded-full filter blur-3xl animate-float animate-delay-2000"></div>
|
||||
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6 text-center">
|
||||
<div class="w-16 h-16 rounded-xl bg-gradient-to-br from-red-500 to-pink-500 flex items-center justify-center mx-auto mb-6 animate-fade-in-up">
|
||||
<i class="fas fa-heart text-white text-2xl"></i>
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 text-sm font-medium mb-6 animate-fade-in-up">
|
||||
<i class="fas fa-heart"></i>
|
||||
Foundation
|
||||
</div>
|
||||
<h1 class="section-title animate-fade-in-up animate-delay-100">Values</h1>
|
||||
<p class="section-subtitle max-w-2xl mx-auto animate-fade-in-up animate-delay-200">
|
||||
<div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-rose-500 to-pink-500 flex items-center justify-center mx-auto mb-8 animate-fade-in-up animate-delay-100 shadow-glow-blue">
|
||||
<i class="fas fa-heart text-white text-3xl"></i>
|
||||
</div>
|
||||
<h1 class="section-title animate-fade-in-up animate-delay-200">Values</h1>
|
||||
<p class="section-subtitle max-w-2xl mx-auto animate-fade-in-up animate-delay-300">
|
||||
The foundation of everything we do. What we value in our work and how we treat each other.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Values -->
|
||||
<section class="py-16 bg-white dark:bg-gray-900 transition-colors duration-300">
|
||||
<section class="py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
|
||||
<div class="text-center mb-14">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
While there is value in the items on the right, we value the items on the left more.
|
||||
</p>
|
||||
@@ -44,18 +47,19 @@ const coreValuesRows = coreValues.map(v => [
|
||||
<!-- Visual Cards -->
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
|
||||
<div
|
||||
v-for="value in coreValues"
|
||||
v-for="(value, index) in coreValues"
|
||||
:key="value.valueMore"
|
||||
class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300"
|
||||
class="card group"
|
||||
:style="{ animationDelay: `${index * 100}ms` }"
|
||||
>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<i :class="value.icon" class="text-white text-sm"></i>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center group-hover:scale-110 transition-all duration-300">
|
||||
<i :class="value.icon" class="text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ value.valueMore }}</h3>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">{{ value.valueMore }}</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-500">
|
||||
over {{ value.over }}
|
||||
over <span class="text-gray-700 dark:text-gray-300">{{ value.over }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,10 +67,12 @@ const coreValuesRows = coreValues.map(v => [
|
||||
</section>
|
||||
|
||||
<!-- Team Values -->
|
||||
<section class="py-16 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="text-center mb-12">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Five Team Values</h2>
|
||||
<section class="py-20 bg-gray-50 dark:bg-gray-800/30 transition-colors duration-300 relative overflow-hidden">
|
||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/10 rounded-full filter blur-3xl"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 relative">
|
||||
<div class="text-center mb-14">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Five Team Values</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Beyond what we value in our work, we hold these values in how we treat each other.
|
||||
</p>
|
||||
@@ -74,20 +80,21 @@ const coreValuesRows = coreValues.map(v => [
|
||||
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="value in teamValues"
|
||||
v-for="(value, index) in teamValues"
|
||||
:key="value.name"
|
||||
class="glass p-6 rounded-xl group hover:shadow-lg transition-all duration-300"
|
||||
class="card group p-8"
|
||||
:style="{ animationDelay: `${index * 100}ms` }"
|
||||
>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-5 mb-5">
|
||||
<div
|
||||
class="w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center group-hover:scale-110 transition-transform duration-300"
|
||||
class="w-16 h-16 rounded-2xl bg-gradient-to-br flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-300"
|
||||
:class="value.gradient"
|
||||
>
|
||||
<i :class="value.icon" class="text-white"></i>
|
||||
<i :class="value.icon" class="text-white text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ value.name }}</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ value.name }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
{{ value.description }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -96,11 +103,13 @@ const coreValuesRows = coreValues.map(v => [
|
||||
</section>
|
||||
|
||||
<!-- Summary -->
|
||||
<section class="py-16 bg-white dark:bg-gray-900 transition-colors duration-300">
|
||||
<section class="py-20 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-8 rounded-2xl">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Values in Action</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<div class="glass p-10 sm:p-14 rounded-3xl relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-rose-500 via-pink-500 to-purple-500"></div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Values in Action</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed text-lg">
|
||||
These values are not just words on a page. They guide our daily decisions, how we interact with each other, and how we approach every piece of work. When in doubt, return to these values.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user