| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>About - EduPrompt</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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| } |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-900 font-sans"> |
| |
| <nav class="bg-white shadow-sm py-4"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
| <i data-feather="zap" class="text-white"></i> |
| </div> |
| <span class="text-xl font-bold text-gray-900">EduPrompt</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="/" class="text-gray-600 hover:text-primary-600">Home</a> |
| <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a> |
| <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a> |
| <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a> |
| <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a> |
| <a href="/about.html" class="text-primary-600 font-medium">About</a> |
| </div> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl font-bold mb-6">About EduPrompt</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Teaching better prompting by showing the enhanced text next to the result</p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-white rounded-xl shadow-sm p-8"> |
| <h2 class="text-3xl font-bold mb-6">Our Mission</h2> |
| <p class="text-gray-700 text-lg mb-6"> |
| At EduPrompt, we believe that understanding how to communicate effectively with AI is a fundamental skill for the modern world. |
| Our mission is to make prompt engineering accessible, understandable, and teachable to everyone. |
| </p> |
| <p class="text-gray-700 text-lg mb-6"> |
| We're not just building tools - we're creating educational experiences that reveal the inner workings of AI systems. |
| By showing how prompts get enhanced before being sent to models, we help users understand what makes effective communication with AI. |
| </p> |
| <div class="flex flex-col md:flex-row gap-8 mt-12"> |
| <div class="flex-1"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4"> |
| <i data-feather="eye" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Transparency First</h3> |
| <p class="text-gray-600"> |
| We show exactly how your prompts are enhanced, making the AI's "thinking process" visible and learnable. |
| </p> |
| </div> |
| <div class="flex-1"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4"> |
| <i data-feather="book-open" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Education Focused</h3> |
| <p class="text-gray-600"> |
| Every interaction is designed to teach principles of effective prompting, not just produce results. |
| </p> |
| </div> |
| <div class="flex-1"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4"> |
| <i data-feather="tool" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Practical Tools</h3> |
| <p class="text-gray-600"> |
| Our playground and API provide real utility while demonstrating best practices in action. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">How EduPrompt Teaches Better Prompting</h2> |
| <p class="text-xl text-gray-600"> |
| Our unique approach shows the transformation process that turns basic prompts into expert instructions |
| </p> |
| </div> |
| <div class="max-w-5xl mx-auto"> |
| <div class="bg-white rounded-xl shadow-sm p-8"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="text-center"> |
| <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6"> |
| <span class="text-white text-2xl font-bold">1</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">User Input</h3> |
| <p class="text-gray-600"> |
| You enter a basic prompt with your task and parameters |
| </p> |
| </div> |
| <div class="text-center"> |
| <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6"> |
| <span class="text-white text-2xl font-bold">2</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Enhancement</h3> |
| <p class="text-gray-600"> |
| Our system transforms your input into an expert-level prompt using proven techniques |
| </p> |
| </div> |
| <div class="text-center"> |
| <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6"> |
| <span class="text-white text-2xl font-bold">3</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Learning</h3> |
| <p class="text-gray-600"> |
| You see both the enhanced prompt and result side-by-side to understand what works |
| </p> |
| </div> |
| </div> |
| <div class="mt-12 p-6 bg-gray-50 rounded-lg"> |
| <h3 class="text-lg font-bold mb-3">Why This Approach Works</h3> |
| <p class="text-gray-700"> |
| Traditional prompt engineering tools hide the enhancement process, making it difficult to learn. |
| EduPrompt's transparency shows exactly how effective prompts are structured, enabling users to |
| internalize best practices and apply them independently. This "show, don't tell" approach |
| accelerates learning and builds lasting skills. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Created by AI Educators</h2> |
| <p class="text-xl text-gray-600"> |
| Our team combines expertise in machine learning, education, and user experience design |
| </p> |
| </div> |
| <div class="max-w-5xl mx-auto"> |
| <div class="bg-white rounded-xl shadow-sm p-8"> |
| <div class="flex flex-col md:flex-row items-center gap-8"> |
| <div class="flex-shrink-0"> |
| <div class="w-32 h-32 rounded-full bg-gray-300 flex items-center justify-center"> |
| <i data-feather="user" class="text-white text-4xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold mb-2">The EduPrompt Team</h3> |
| <p class="text-gray-700 mb-4"> |
| We're a group of researchers, educators, and developers passionate about making AI |
| accessible and understandable. Our backgrounds span computational linguistics, |
| cognitive science, and software engineering. |
| </p> |
| <p class="text-gray-700"> |
| We created EduPrompt because we saw a gap between powerful AI capabilities and |
| people's ability to harness them effectively. Our goal is to bridge that gap through |
| education and transparent tools. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
