Create a clean, modern mobile app screen visualizing a four-step analytics lifecycle. Use soft gradients, rounded cards, simple line icons, and a minimal professional color palette (blues, greys, and soft oranges). Arrange each step vertically as elegant cards with small icons on the left and text on the right. Include subtle shadows, smooth spacing, and a dashboard-style aesthetic.
172cff4
verified
| <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> |