| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EduPrompt - Enhance Your Prompts</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> |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .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-primary-600 font-medium">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-gray-600 hover:text-primary-600">About</a> |
| </div> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 md:py-24 gradient-bg"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Enhance Your Prompt Then Run The Model</h1> |
| <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-10">Transform your basic prompts into expertly crafted instructions that get better results from AI models</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="/eduprompt.html" class="bg-white text-primary-600 font-semibold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300">Try It Now</a> |
| <a href="/concepts.html" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white/10 transition duration-300">Learn How It Works</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-16">Why EduPrompt Works</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300"> |
| <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Enhance First, Then Run</h3> |
| <p class="text-gray-600">Our prompt enhancer automatically transforms your input into expertly crafted instructions before sending to the model for better results.</p> |
| </div> |
| <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300"> |
| <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
| <i data-feather="code" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Unified API</h3> |
| <p class="text-gray-600">One simple API endpoint handles all prompt types with automatic enhancement, making integration seamless for developers.</p> |
| </div> |
| <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300"> |
| <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
| <i data-feather="server" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Free Model Hosting</h3> |
| <p class="text-gray-600">Access to lightweight language models without the hosting costs, powered by Hugging Face Spaces for experimentation.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-16">What Users Say</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div> |
| <div> |
| <h4 class="font-bold">Alex Johnson</h4> |
| <p class="text-gray-600 text-sm">Data Scientist</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"EduPrompt transformed how I interact with language models. My prompts now get consistent, high-quality results every time."</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div> |
| <div> |
| <h4 class="font-bold">Sarah Williams</h4> |
| <p class="text-gray-600 text-sm">Content Creator</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"The playground makes it so easy to experiment with different prompt structures. I've learned so much about effective prompting."</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div> |
| <div> |
| <h4 class="font-bold">Michael Chen</h4> |
| <p class="text-gray-600 text-sm">Developer</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic">"The unified API saved me hours of development time. Now I can focus on building features instead of crafting prompts."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-6"> |
| <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center"> |
| <i data-feather="zap" class="text-white text-sm"></i> |
| </div> |
| <span class="text-xl font-bold">EduPrompt</span> |
| </div> |
| <p class="text-gray-400">Enhance your prompts and get better results from AI models with our intelligent prompt engineering platform.</p> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Product</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="/eduprompt.html" class="hover:text-white transition">Playground</a></li> |
| <li><a href="/concepts.html" class="hover:text-white transition">Concepts</a></li> |
| <li><a href="/demos.html" class="hover:text-white transition">Demos</a></li> |
| <li><a href="/glossary.html" class="hover:text-white transition">Glossary</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Resources</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="/about.html" class="hover:text-white transition">About</a></li> |
| <li><a href="#" class="hover:text-white transition">Documentation</a></li> |
| <li><a href="#" class="hover:text-white transition">API Reference</a></li> |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Connect</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white transition">Twitter</a></li> |
| <li><a href="#" class="hover:text-white transition">GitHub</a></li> |
| <li><a href="#" class="hover:text-white transition">Discord</a></li> |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
| <p>© 2023 EduPrompt. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
