Spaces:
Running
Running
Download index.html from Netlogiccc/cue: direct link, hf CLI and curl.
- Browser
- Download file 40.9 kB
-
https://huggingface.co/spaces/Netlogiccc/cue/resolve/main/index.html
- Command line
-
hf download hf://spaces/Netlogiccc/cue/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Netlogiccc/cue/resolve/main/index.html
40.9 kB
| <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) ; | |
| color: #fff; | |
| } | |
| body.high-contrast .bg-gray-50 { | |
| background-color: #111 ; | |
| } | |
| body.high-contrast .text-gray-500, | |
| body.high-contrast .text-gray-400 { | |
| color: #ccc ; | |
| } | |
| body.high-contrast .text-gray-900 { | |
| color: #fff ; | |
| } | |
| body.large-font { | |
| font-size: 18px; | |
| } | |
| body.large-font h1 { | |
| font-size: 2.8rem ; | |
| } | |
| body.large-font h2 { | |
| font-size: 2.2rem ; | |
| } | |
| body.large-font h3 { | |
| font-size: 1.8rem ; | |
| } | |
| </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">→</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"> | |
| © 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> | |