| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Testimonials - Phantom Digital</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 900: '#1e3a8a', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
| body { font-family: 'Inter', sans-serif; } |
| .gradient-text { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| </style> |
| </head> |
| <body class="bg-white dark:bg-slate-900 text-slate-900 dark:text-white transition-colors duration-300"> |
|
|
| |
| <nav class="fixed w-full z-50 top-0 transition-all duration-300 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md shadow-lg" id="navbar"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-20"> |
| <a href="index.html" class="flex items-center space-x-2"> |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> |
| <i data-lucide="zap" class="text-white w-6 h-6"></i> |
| </div> |
| <span class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> |
| Phantom Digital |
| </span> |
| </a> |
|
|
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="index.html#features" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a> |
| <a href="index.html#about" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">About</a> |
| <a href="testimonials.html" class="text-blue-600 dark:text-blue-400 font-medium">Testimonials</a> |
| <a href="contact.html" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Contact</a> |
| |
| <button onclick="toggleDarkMode()" class="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"> |
| <i data-lucide="sun" class="hidden dark:block w-5 h-5 text-yellow-400"></i> |
| <i data-lucide="moon" class="block dark:hidden w-5 h-5 text-slate-600"></i> |
| </button> |
|
|
| <a href="app.html" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full font-medium transition-all transform hover:scale-105 shadow-lg hover:shadow-blue-500/30"> |
| Get Started |
| </a> |
| </div> |
|
|
| <button onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"> |
| <i data-lucide="menu" class="w-6 h-6 text-slate-600 dark:text-slate-300" id="menuIcon"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-slate-900 border-t dark:border-slate-800 shadow-lg"> |
| <div class="px-4 pt-2 pb-6 space-y-2"> |
| <a href="index.html#features" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">Features</a> |
| <a href="index.html#about" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">About</a> |
| <a href="testimonials.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 dark:text-blue-400 bg-slate-100 dark:bg-slate-800">Testimonials</a> |
| <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">Contact</a> |
| <a href="app.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 dark:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-800">Launch App</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="pt-32 pb-20 lg:pt-48 lg:pb-32 bg-slate-50 dark:bg-slate-800/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h1 class="text-5xl lg:text-7xl font-bold mb-6"> |
| Loved by <span class="gradient-text">builders</span> |
| </h1> |
| <p class="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-12"> |
| See what our customers have to say about their experience with Phantom Digital and how it transformed their workflow. |
| </p> |
| |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"> |
| <div class="text-center"> |
| <p class="text-4xl font-bold text-slate-900 dark:text-white mb-2">4.9/5</p> |
| <p class="text-slate-600 dark:text-slate-400">Average Rating</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-4xl font-bold text-slate-900 dark:text-white mb-2">10K+</p> |
| <p class="text-slate-600 dark:text-slate-400">Happy Users</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-4xl font-bold text-slate-900 dark:text-white mb-2">98%</p> |
| <p class="text-slate-600 dark:text-slate-400">Would Recommend</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-4xl font-bold text-slate-900 dark:text-white mb-2">150+</p> |
| <p class="text-slate-600 dark:text-slate-400">Countries</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 lg:py-32"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 hover:shadow-xl transition-shadow"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed text-lg">"Phantom Digital has completely transformed how we build and deploy AI models. The multi-model support with free tiers from Groq and DeepSeek saves us thousands monthly."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/1" alt="Sarah Chen" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Sarah Chen</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">CTO, TechCorp</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 hover:shadow-xl transition-shadow"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed text-lg">"The integrated canvas with AI chat is genius. I can sketch an idea, and the AI immediately generates code. Cerebras speed is incredible for real-time collaboration."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/2" alt="Marcus Johnson" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Marcus Johnson</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">Lead Developer, StartupXYZ</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 hover:shadow-xl transition-shadow"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed text-lg">"Best-in-class support and features. We've scaled our AI operations 10x since switching to Phantom Digital. SambaNova's 405B model handles our complex enterprise needs."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/3" alt="Emily Rodriguez" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Emily Rodriguez</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">AI Director, Enterprise Inc</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 lg:py-32 bg-slate-50 dark:bg-slate-800/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-bold text-center mb-12">More Success Stories</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-3 mb-3"> |
| <img src="http://static.photos/people/200x200/4" alt="User" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-semibold text-sm">David Kim</p> |
| <p class="text-xs text-slate-500">Indie Hacker</p> |
| </div> |
| </div> |
| <p class="text-sm text-slate-600 dark:text-slate-400">"The free tier models are better than most paid alternatives. DeepSeek V3 blows GPT-4 out of the water for coding tasks."</p> |
| </div> |
|
|
| <div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-3 mb-3"> |
| <img src="http://static.photos/people/200x200/5" alt="User" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-semibold text-sm">Lisa Thompson</p> |
| <p class="text-xs text-slate-500">Product Designer</p> |
| </div> |
| </div> |
| <p class="text-sm text-slate-600 dark:text-slate-400">"Canvas + AI chat workflow is revolutionary for UI/UX design. I prototype and get feedback in one seamless loop."</p> |
| </div> |
|
|
| <div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-3 mb-3"> |
| <img src="http://static.photos/people/200x200/6" alt="User" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-semibold text-sm">James Wilson</p> |
| <p class="text-xs text-slate-500">ML Engineer</p> |
| </div> |
| </div> |
| <p class="text-sm text-slate-600 dark:text-slate-400">"Being able to switch between Groq for speed and Gemini for multimodal tasks in one interface is a game changer."</p> |
| </div> |
|
|
| <div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-3 mb-3"> |
| <img src="http://static.photos/people/200x200/7" alt="User" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="font-semibold text-sm">Anna Martinez</p> |
| <p class="text-xs text-slate-500">Content Creator</p> |
| </div> |
| </div> |
| <p class="text-sm text-slate-600 dark:text-slate-400">"Phantom Digital replaced 5 different tools for me. The all-in-one workspace with AI is exactly what creators need."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 lg:py-32 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700"></div> |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div> |
| |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> |
| <h2 class="text-4xl lg:text-5xl font-bold text-white mb-6">Ready to experience the difference?</h2> |
| <p class="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">Join thousands of satisfied users building the future with Phantom Digital.</p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="app.html" class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-blue-50 transition-all transform hover:scale-105 shadow-xl"> |
| Start Free Trial |
| </a> |
| <a href="contact.html" class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white/10 transition-all"> |
| Contact Sales |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-slate-900 text-slate-300 py-12 border-t border-slate-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div class="col-span-2"> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> |
| <i data-lucide="zap" class="text-white w-5 h-5"></i> |
| </div> |
| <span class="text-xl font-bold text-white">Phantom Digital</span> |
| </div> |
| <p class="text-slate-400 mb-4 max-w-sm">Empowering developers to build intelligent applications with cutting-edge AI infrastructure and tools.</p> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Product</h4> |
| <ul class="space-y-2"> |
| <li><a href="app.html" class="hover:text-blue-400 transition-colors">Launch App</a></li> |
| <li><a href="index.html#features" class="hover:text-blue-400 transition-colors">Features</a></li> |
| <li><a href="testimonials.html" class="hover:text-blue-400 transition-colors">Testimonials</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="index.html#about" class="hover:text-blue-400 transition-colors">About</a></li> |
| <li><a href="contact.html" class="hover:text-blue-400 transition-colors">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> |
| <p class="text-sm text-slate-500">© 2024 Phantom Digital. All rights reserved.</p> |
| <div class="flex gap-6 text-sm text-slate-500"> |
| <a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a> |
| <a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| lucide.createIcons(); |
| |
| function toggleDarkMode() { |
| const html = document.documentElement; |
| if (html.classList.contains('dark')) { |
| html.classList.remove('dark'); |
| localStorage.setItem('theme', 'light'); |
| } else { |
| html.classList.add('dark'); |
| localStorage.setItem('theme', 'dark'); |
| } |
| } |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobileMenu'); |
| const icon = document.getElementById('menuIcon'); |
| |
| if (menu.classList.contains('hidden')) { |
| menu.classList.remove('hidden'); |
| icon.setAttribute('data-lucide', 'x'); |
| } else { |
| menu.classList.add('hidden'); |
| icon.setAttribute('data-lucide', 'menu'); |
| } |
| lucide.createIcons(); |
| } |
| </script> |
| </body> |
| </html> |
