File size: 5,779 Bytes
172cff4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analytics Lifecycle | PromptCraft</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="style.css">
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
100: '#f0f9ff',
500: '#0284c7',
900: '#0c4a6e',
},
secondary: {
100: '#f5f3ff',
500: '#8b5cf6',
900: '#4c1d95',
},
accent: {
100: '#fff7ed',
500: '#f97316',
900: '#ea580c'
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8 max-w-md">
<!-- Header -->
<section class="text-center mb-8">
<h1 class="text-2xl font-bold text-primary-900 mb-2">Analytics Lifecycle</h1>
<p class="text-gray-600">Four-step framework for data-driven impact</p>
</section>
<!-- Lifecycle Steps -->
<section class="space-y-6">
<!-- Step 1 -->
<div class="bg-white rounded-2xl shadow-sm p-6 transition-all duration-300 hover:shadow-md">
<div class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mr-4">
<i data-feather="search" class="text-primary-500 w-6 h-6"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 mb-2">Problem Finding</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Intensive discussions with business teams to surface the highest-impact issues.
Avoid solving the familiar problem; focus on high control–high impact opportunities.
</p>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="bg-white rounded-2xl shadow-sm p-6 transition-all duration-300 hover:shadow-md">
<div class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mr-4">
<i data-feather="bar-chart-2" class="text-primary-500 w-6 h-6"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 mb-2">Rapid Analytic Prototypes</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Pull in relevant data (on-prem or cloud). Run rapid analytical iterations across multiple dimensions.
</p>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="bg-white rounded-2xl shadow-sm p-6 transition-all duration-300 hover:shadow-md">
<div class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-50 flex items-center justify-center mr-4">
<i data-feather="trending-up" class="text-accent-500 w-6 h-6"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 mb-2">Value Discovery</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Engage stakeholders, identify value pockets, build business case based on prototype insights.
</p>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="bg-white rounded-2xl shadow-sm p-6 transition-all duration-300 hover:shadow-md">
<div class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mr-4">
<i data-feather="server" class="text-primary-500 w-6 h-6"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 mb-2">Value @ Scale Through Technology</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Scalable technology platform enabling seamless, low-cost expansion.
Implement processes to realize value at scale.
</p>
</div>
</div>
</div>
</section>
<!-- Progress Indicator -->
<div class="mt-8 flex justify-center">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-primary-500"></div>
<div class="w-3 h-3 rounded-full bg-gray-300"></div>
<div class="w-3 h-3 rounded-full bg-gray-300"></div>
<div class="w-3 h-3 rounded-full bg-gray-300"></div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
</body>
</html> |