cue / index.html
Netlogiccc's picture
now add css styling - Initial Deployment
f46725e verified
Raw History Blame Contribute Delete
40.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cue - Your Invisible Thinking Partner</title>
<script src="https://cdn.tailwindcss.com"></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/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<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',
},
secondary: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary-50: #f0f9ff;
--primary-600: #0284c7;
--primary-700: #0369a1;
--gray-50: #f9fafb;
--gray-900: #111827;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #1f2937;
scroll-behavior: smooth;
}
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(90deg, #0ea5e9, #8b5cf6);
}
.accessibility-toggle {
transition: all 0.3s ease;
}
.accessibility-toggle:hover {
transform: scale(1.1);
background-color: var(--primary-50);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.feature-card {
transition: all 0.3s ease;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.025em;
font-weight: 800;
}
/* Buttons & Links */
a {
transition: color 0.2s ease;
}
.btn-primary {
transition: all 0.2s ease;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Sections */
section {
padding: 5rem 0;
}
/* Cards */
.card {
border-radius: 0.5rem;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease forwards;
}
/* Responsive adjustments */
@media (max-width: 768px) {
section {
padding: 3rem 0;
}
.hero-text {
text-align: center;
}
}
/* Accessibility modes */
body.high-contrast {
background-color: #000;
color: #fff;
}
body.high-contrast .bg-white {
background-color: var(--gray-900) !important;
color: #fff;
}
body.high-contrast .bg-gray-50 {
background-color: #111 !important;
}
body.high-contrast .text-gray-500,
body.high-contrast .text-gray-400 {
color: #ccc !important;
}
body.high-contrast .text-gray-900 {
color: #fff !important;
}
body.large-font {
font-size: 18px;
}
body.large-font h1 {
font-size: 2.8rem !important;
}
body.large-font h2 {
font-size: 2.2rem !important;
}
body.large-font h3 {
font-size: 1.8rem !important;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Accessibility Controls -->
<div class="fixed bottom-4 right-4 z-50 flex space-x-2">
<button id="contrastToggle" class="accessibility-toggle bg-white p-3 rounded-full shadow-lg">
<i data-feather="eye"></i>
</button>
<button id="fontToggle" class="accessibility-toggle bg-white p-3 rounded-full shadow-lg">
<i data-feather="type"></i>
</button>
</div>
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-40">
<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">
<span class="text-xl font-bold gradient-text">Cue</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#features" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="#how-it-works" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">How It Works</a>
<a href="#privacy" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">Privacy</a>
<a href="#community" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">Community</a>
</div>
<div class="flex items-center">
<a href="#download" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Try Cue Free
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">Your Invisible</span>
<span class="block gradient-text">Thinking Partner</span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Real-time cognitive support for interviews, coding tests, and meetings - designed for how you actually think.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#download" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 md:py-4 md:text-lg md:px-10">
Download Now
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#how-it-works" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 md:py-4 md:text-lg md:px-10">
See How It Works
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="http://static.photos/technology/1024x576/42" alt="Minimal interface floating on screen">
</div>
</section>
<!-- Problem/Solution Section -->
<section id="problems" class="py-12 bg-gray-50" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">Challenges</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
We've been there too
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
High-pressure situations can make your brain work differently than you'd like.
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<div class="relative bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<div class="absolute -top-5 left-5 bg-primary-500 rounded-full p-3 text-white">
<i data-feather="mic"></i>
</div>
<h3 class="ml-16 text-lg leading-6 font-medium text-gray-900">Interview Nerves</h3>
<p class="mt-2 ml-16 text-base text-gray-500">
Your mind goes blank just when you need it most. Cue provides gentle prompts to keep you on track.
</p>
</div>
<div class="relative bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<div class="absolute -top-5 left-5 bg-primary-500 rounded-full p-3 text-white">
<i data-feather="code"></i>
</div>
<h3 class="ml-16 text-lg leading-6 font-medium text-gray-900">Coding Overwhelm</h3>
<p class="mt-2 ml-16 text-base text-gray-500">
Too many moving parts? Cue helps break problems into manageable steps without disrupting your flow.
</p>
</div>
<div class="relative bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<div class="absolute -top-5 left-5 bg-primary-500 rounded-full p-3 text-white">
<i data-feather="users"></i>
</div>
<h3 class="ml-16 text-lg leading-6 font-medium text-gray-900">Meeting Participation</h3>
<p class="mt-2 ml-16 text-base text-gray-500">
Struggling to jump in? Cue gives you subtle reminders when it's your turn to contribute.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Grid -->
<section id="features" class="py-12 bg-white" data-aos="fade-up">
<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-primary-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">
Designed for your cognitive style
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Tools that adapt to you, not the other way around.
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 lg:grid-cols-4">
<div class="feature-card bg-gray-50 p-6 rounded-lg">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
<i data-feather="clock"></i>
</div>
<h3 class="mt-4 text-lg leading-6 font-medium text-gray-900">Real-time Coaching</h3>
<p class="mt-2 text-base text-gray-500">
Context-aware suggestions appear exactly when you need them, then disappear when you don't.
</p>
</div>
<div class="feature-card bg-gray-50 p-6 rounded-lg">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
<i data-feather="activity"></i>
</div>
<h3 class="mt-4 text-lg leading-6 font-medium text-gray-900">Stress-aware</h3>
<p class="mt-2 text-base text-gray-500">
Detects when you're overwhelmed and adjusts its approach to reduce cognitive load.
</p>
</div>
<div class="feature-card bg-gray-50 p-6 rounded-lg">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
<i data-feather="lock"></i>
</div>
<h3 class="mt-4 text-lg leading-6 font-medium text-gray-900">Completely Private</h3>
<p class="mt-2 text-base text-gray-500">
Runs locally on your device. No data leaves your computer. Ever.
</p>
</div>
<div class="feature-card bg-gray-50 p-6 rounded-lg">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
<i data-feather="sliders"></i>
</div>
<h3 class="mt-4 text-lg leading-6 font-medium text-gray-900">Customizable</h3>
<p class="mt-2 text-base text-gray-500">
Adjust everything from timing to visual presentation to match your preferences.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Privacy Section -->
<section id="privacy" class="py-12 bg-gray-50" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">Privacy First</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Your thoughts stay yours
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
We believe cognitive support shouldn't require sacrificing privacy.
</p>
</div>
<div class="mt-10 bg-white shadow rounded-lg overflow-hidden">
<div class="px-4 py-5 sm:p-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Local Processing</h3>
<p class="mt-2 text-base text-gray-500">
All processing happens on your device. No cloud servers, no data collection, no tracking.
</p>
<div class="mt-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="cpu" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">On-device AI</h4>
<p class="text-sm text-gray-500">Models run entirely locally</p>
</div>
</div>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="eye-off" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">No Telemetry</h4>
<p class="text-sm text-gray-500">We don't track your usage</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 p-6 bg-gray-50">
<h3 class="text-lg leading-6 font-medium text-gray-900">Open Source</h3>
<p class="mt-2 text-base text-gray-500">
Everything is transparent and verifiable. Inspect, modify, or contribute to the code.
</p>
<div class="mt-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="github" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">GitHub</h4>
<p class="text-sm text-gray-500">View the complete source code</p>
</div>
</div>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="shield" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Security Audits</h4>
<p class="text-sm text-gray-500">Regularly reviewed by experts</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section class="py-12 bg-white" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">See it in action</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Subtle, unobtrusive support
</p>
</div>
<div class="mt-10 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 p-6">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-xl transform rotate-1">
<img class="w-full h-auto" src="http://static.photos/technology/640x360/123" alt="Cue interface demo">
</div>
</div>
<div class="md:w-1/2 p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Designed to stay out of your way</h3>
<p class="mt-2 text-base text-gray-500">
Cue appears as a small, customizable overlay that provides just enough support without becoming distracting. Adjust the size, position, and transparency to match your workflow.
</p>
<div class="mt-6">
<div class="flex">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-primary-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-gray-500">
<span class="font-medium text-gray-900">Minimal visual footprint</span> - Takes up less space than a chat window
</p>
</div>
</div>
<div class="mt-4 flex">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-primary-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-gray-500">
<span class="font-medium text-gray-900">Context-aware positioning</span> - Automatically moves to avoid your active work area
</p>
</div>
</div>
<div class="mt-4 flex">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-primary-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-gray-500">
<span class="font-medium text-gray-900">Optional haptic feedback</span> - For those who prefer physical cues
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Getting Started -->
<section id="download" class="py-12 bg-gray-50" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">Get Started</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Ready to try Cue?
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Download and be up and running in minutes.
</p>
</div>
<div class="mt-10">
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 p-6 border-b md:border-b-0 md:border-r border-gray-200">
<h3 class="text-lg leading-6 font-medium text-gray-900">1. Download</h3>
<p class="mt-2 text-base text-gray-500">
Get the latest version for your operating system.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">
<i data-feather="download" class="mr-2"></i> Download for macOS
</a>
<div class="mt-4">
<a href="#" class="text-sm text-primary-600 hover:text-primary-500">
Other platforms <span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
</div>
<div class="md:w-1/3 p-6 border-b md:border-b-0 md:border-r border-gray-200">
<h3 class="text-lg leading-6 font-medium text-gray-900">2. Customize</h3>
<p class="mt-2 text-base text-gray-500">
Set up your preferences for how and when Cue appears.
</p>
<div class="mt-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="settings" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Quick Setup</h4>
<p class="text-sm text-gray-500">Guided configuration takes 2 minutes</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/3 p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">3. Use Naturally</h3>
<p class="mt-2 text-base text-gray-500">
Cue learns from your usage and becomes more helpful over time.
</p>
<div class="mt-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-primary-500 rounded-md p-2">
<i data-feather="zap" class="text-white"></i>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Adaptive Learning</h4>
<p class="text-sm text-gray-500">Gets better the more you use it</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="py-12 bg-white" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">Community</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Join the conversation
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
We're building this together.
</p>
</div>
<div class="mt-10">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow">
<div class="px-4 py-5 sm:p-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Share Feedback</h3>
<p class="mt-2 text-base text-gray-500">
Help shape Cue's development by sharing your experiences and suggestions.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<i data-feather="message-square" class="mr-2"></i> Join Discussion
</a>
</div>
</div>
<div class="md:w-1/2 p-6 bg-white md:border-l border-gray-200">
<h3 class="text-lg leading-6 font-medium text-gray-900">Contribute</h3>
<p class="mt-2 text-base text-gray-500">
Developers, designers, and testers are all welcome to contribute to the project.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<i data-feather="github" class="mr-2"></i> View on GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-12 bg-gray-50" data-aos="fade-up">
<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-primary-600 font-semibold tracking-wide uppercase">Testimonials</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
What people are saying
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="Testimonial">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Jamie R.</div>
<div class="text-sm text-gray-500">Software Engineer</div>
</div>
</div>
<p class="mt-4 text-base text-gray-500">
"Cue has completely changed how I approach technical interviews. I no longer freeze up when put on the spot."
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="Testimonial">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Alex K.</div>
<div class="text-sm text-gray-500">UX Designer</div>
</div>
</div>
<p class="mt-4 text-base text-gray-500">
"As someone with ADHD, meetings used to be exhausting. Now I can participate without burning out."
</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="Testimonial">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Taylor M.</div>
<div class="text-sm text-gray-500">Product Manager</div>
</div>
</div>
<p class="mt-4 text-base text-gray-500">
"The privacy aspect was crucial for me. I can get support without worrying about my data being mined."
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-primary-700" data-aos="fade-up">
<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-white sm:text-4xl">
<span class="block">Ready to experience Cue?</span>
<span class="block text-primary-200">Download it today and see the difference.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a href="#download" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary-600 bg-white hover:bg-primary-50">
<i data-feather="download" class="mr-2"></i> Get Cue Free
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a href="#community" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 bg-opacity-60 hover:bg-opacity-70">
<i data-feather="users" class="mr-2"></i> Join Community
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-white">
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
<div class="px-5 py-2">
<a href="#features" class="text-base text-gray-500 hover:text-gray-900">Features</a>
</div>
<div class="px-5 py-2">
<a href="#privacy" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
</div>
<div class="px-5 py-2">
<a href="#community" class="text-base text-gray-500 hover:text-gray-900">Community</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Documentation</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a>
</div>
</nav>
<div class="mt-8 flex justify-center space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Discord</span>
<i data-feather="message-circle"></i>
</a>
</div>
<p class="mt-8 text-center text-base text-gray-400">
&copy; 2023 Cue. All rights reserved.
</p>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Accessibility toggles
document.getElementById('contrastToggle').addEventListener('click', function() {
document.body.classList.toggle('high-contrast');
if (document.body.classList.contains('high-contrast')) {
document.body.classList.add('bg-black', 'text-white');
document.querySelectorAll('a, p, span, h1, h2, h3, h4, h5, h6').forEach(el => {
el.classList.add('text-white');
});
document.querySelectorAll('.bg-white').forEach(el => {
el.classList.remove('bg-white');
el.classList.add('bg-gray-900');
});
document.querySelectorAll('.bg-gray-50').forEach(el => {
el.classList.remove('bg-gray-50');
el.classList.add('bg-gray-800');
});
} else {
document.body.classList.remove('bg-black', 'text-white');
document.querySelectorAll('a, p, span, h1, h2, h3, h4, h5, h6').forEach(el => {
el.classList.remove('text-white');
});
document.querySelectorAll('.bg-gray-900').forEach(el => {
el.classList.remove('bg-gray-900');
el.classList.add('bg-white');
});
document.querySelectorAll('.bg-gray-800').forEach(el => {
el.classList.remove('bg-gray-800');
el.classList.add('bg-gray-50');
});
}
});
document.getElementById('fontToggle').addEventListener('click', function() {
document.body.classList.toggle('large-font');
if (document.body.classList.contains('large-font')) {
document.body.style.fontSize = '20px';
document.querySelectorAll('h1').forEach(el => {
el.style.fontSize = '2.5rem';
});
document.querySelectorAll('h2').forEach(el => {
el.style.fontSize = '2rem';
});
document.querySelectorAll('h3').forEach(el => {
el.style.fontSize = '1.75rem';
});
} else {
document.body.style.fontSize = '';
document.querySelectorAll('h1').forEach(el => {
el.style.fontSize = '';
});
document.querySelectorAll('h2').forEach(el => {
el.style.fontSize = '';
});
document.querySelectorAll('h3').forEach(el => {
el.style.fontSize = '';
});
}
});
</script>
</body>
</html>