File size: 7,182 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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!DOCTYPE html>
<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> |