|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sally - AI Customer Support</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://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.chat-bubble { |
|
|
border-radius: 20px 20px 20px 0; |
|
|
} |
|
|
.chat-bubble.user { |
|
|
border-radius: 20px 20px 0 20px; |
|
|
} |
|
|
.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); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-sm fixed w-full z-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="message-circle" class="text-purple-600 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">Sally</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8"> |
|
|
<a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-sm font-medium">Home</a> |
|
|
<a href="#features" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a> |
|
|
<a href="#how-it-works" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">How it works</a> |
|
|
<a href="/login.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Login</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> |
|
|
<a href="#how-it-works" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How it works</a> |
|
|
<a href="/login.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Login</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg pt-24 pb-32"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
|
|
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> |
|
|
<span class="block">AI-Powered</span> |
|
|
<span class="block text-purple-200">Customer Support</span> |
|
|
</h1> |
|
|
<p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
|
|
Sally provides instant, accurate, and personalized responses to your customers 24/7, reducing support workload while improving customer satisfaction. |
|
|
</p> |
|
|
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
|
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="/login.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
|
|
Get Started |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
|
<a href="#demo" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
|
|
Live Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> |
|
|
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> |
|
|
<div class="bg-white rounded-lg shadow-xl overflow-hidden"> |
|
|
<div class="bg-gray-800 px-4 py-3 flex items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="ml-4 text-sm text-white font-medium">Chat with Sally</div> |
|
|
</div> |
|
|
<div class="p-4 h-64 overflow-y-auto"> |
|
|
<div class="flex mb-4"> |
|
|
<div class="bg-gray-100 chat-bubble p-3 max-w-xs"> |
|
|
<p class="text-sm">Hi there! I'm Sally, your AI support assistant. How can I help you today?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex mb-4 justify-end"> |
|
|
<div class="bg-purple-500 text-white chat-bubble user p-3 max-w-xs"> |
|
|
<p class="text-sm">How do I reset my password?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex mb-4"> |
|
|
<div class="bg-gray-100 chat-bubble p-3 max-w-xs"> |
|
|
<p class="text-sm">You can reset your password by going to the login page and clicking "Forgot Password". I can send you a direct link if you'd like?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 p-4"> |
|
|
<div class="flex"> |
|
|
<input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> |
|
|
<button class="bg-purple-500 text-white px-4 py-2 rounded-r-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
|
|
<i data-feather="send" class="h-5 w-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
A better way to handle customer support |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Sally combines AI intelligence with human expertise to deliver exceptional customer experiences. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-20"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
|
|
|
|
|
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out"> |
|
|
<div class="absolute -top-6 left-6 bg-purple-500 rounded-lg p-3 text-white"> |
|
|
<i data-feather="message-square"></i> |
|
|
</div> |
|
|
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Intelligent Chat</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Sally understands context and provides accurate responses from your knowledge base, reducing repetitive questions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out"> |
|
|
<div class="absolute -top-6 left-6 bg-purple-500 rounded-lg p-3 text-white"> |
|
|
<i data-feather="users"></i> |
|
|
</div> |
|
|
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Role-Based Access</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Granular permissions ensure the right people have the right access, from guests to super admins. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out"> |
|
|
<div class="absolute -top-6 left-6 bg-purple-500 rounded-lg p-3 text-white"> |
|
|
<i data-feather="book"></i> |
|
|
</div> |
|
|
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Knowledge Management</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Comprehensive knowledge base with versioning, categories, and easy content updates. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out"> |
|
|
<div class="absolute -top-6 left-6 bg-purple-500 rounded-lg p-3 text-white"> |
|
|
<i data-feather="bar-chart-2"></i> |
|
|
</div> |
|
|
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Analytics & Reporting</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Track unanswered questions, response times, and customer satisfaction to continuously improve. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="how-it-works" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">How It Works</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Simple yet powerful workflow |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<div class="lg:grid lg:grid-cols-3 lg:gap-8"> |
|
|
|
|
|
<div class="mb-10 lg:mb-0" data-aos="fade-up"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<span class="text-xl font-bold">1</span> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Customer Asks Question</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Guests and customers interact with Sally through a simple chat interface, asking questions in natural language. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-10 lg:mb-0" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<span class="text-xl font-bold">2</span> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Sally Analyzes Request</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Our AI determines if the user is a guest or customer, checks permissions, and searches the appropriate knowledge base. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<span class="text-xl font-bold">3</span> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Personalized Response</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Sally provides an accurate, context-aware response or escalates to human support if needed. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
<span class="block">Ready to transform your customer support?</span> |
|
|
<span class="block text-purple-600">Start using Sally today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="/register.html" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700"> |
|
|
Get started |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<a href="#demo" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50"> |
|
|
Live demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> |
|
|
<div class="xl:grid xl:grid-cols-3 xl:gap-8"> |
|
|
<div class="space-y-8 xl:col-span-1"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="message-circle" class="text-purple-400 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-white">Sally</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-base"> |
|
|
The intelligent customer support platform that combines AI with human expertise to deliver exceptional customer experiences. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> |
|
|
<div class="md:grid md:grid-cols-2 md:gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Solutions |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Customer Support |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Knowledge Management |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Ticketing System |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-12 md:mt-0"> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Support |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Documentation |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Guides |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
API Status |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:grid md:grid-cols-2 md:gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Company |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
About |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Blog |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Careers |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-12 md:mt-0"> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Legal |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Privacy |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Terms |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-700 pt-8"> |
|
|
<p class="text-base text-gray-400 text-center"> |
|
|
© 2023 Sally AI. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('button[aria-controls="mobile-menu"]').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
