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>PromptCraft Library | AI Prompt Infographic</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/infographic-card.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', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-16"> | |
| <h1 class="text-5xl font-bold text-primary-900 mb-4">PromptCraft Library</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Your ultimate collection of AI prompts organized beautifully</p> | |
| <div class="mt-8"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="analytics-lifecycle.html" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600"> | |
| View Analytics Lifecycle | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Infographic Grid --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl font-bold text-center text-primary-900 mb-12">Core Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <infographic-card | |
| icon="book" | |
| title="Prompt Library" | |
| description="11+ categories including Writing, Coding, Banking AI, Risk Testing, and Data Analysis"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="bar-chart-2" | |
| title="Dashboard Analytics" | |
| description="User stats, favorites, activity timeline and system-wide metrics"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="activity" | |
| title="Activity Tracking" | |
| description="Monitor all actions (created, edited, viewed, favorited, exported)"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="search" | |
| title="Smart Search" | |
| description="Full-text search across titles, descriptions, tags and categories"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="filter" | |
| title="Advanced Filtering" | |
| description="Filter by category, favorites, sort by newest/oldest/rating"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="edit-3" | |
| title="CRUD Operations" | |
| description="Create, read, update, and delete prompts with ease"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="star" | |
| title="Favorites System" | |
| description="Mark prompts as favorites for quick access"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="code" | |
| title="Variable System" | |
| description="Dynamic variable insertion with {VARIABLE_NAME} syntax"> | |
| </infographic-card> | |
| <infographic-card | |
| icon="award" | |
| title="Prompt Scoring" | |
| description="Automatic quality scoring based on multiple factors"> | |
| </infographic-card> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-gradient-to-r from-primary-100 to-secondary-100 rounded-2xl p-8 mb-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-primary-900 mb-12">Prompt Library By The Numbers</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold text-primary-500 mb-2">11+</div> | |
| <div class="text-gray-600">Categories</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold text-secondary-500 mb-2">100+</div> | |
| <div class="text-gray-600">Variables per Prompt</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold text-primary-500 mb-2">5K+</div> | |
| <div class="text-gray-600">Prompt Templates</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold text-secondary-500 mb-2">5K+</div> | |
| <div class="text-gray-600">Contributors</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="bg-white rounded-2xl shadow-lg p-8 max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold text-primary-900 mb-4">Ready to Boost Your AI Workflow?</h2> | |
| <p class="text-lg text-gray-600 mb-8">Join thousands of professionals using PromptCraft Library to enhance their AI interactions</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-lg hover:bg-primary-600 transition-colors"> | |
| Get Started Free | |
| </a> | |
| <a href="#" class="px-6 py-3 border border-primary-500 text-primary-500 font-medium rounded-lg hover:bg-primary-50 transition-colors"> | |
| Learn More | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |