Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChronoScape 3D - The Future of Time Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #10b981; | |
| --accent: #f59e0b; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #0f172a; | |
| color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| } | |
| .card-glass { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .timeline-block { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .timeline-block:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .work-color { | |
| background-color: #6366f1; | |
| } | |
| .personal-color { | |
| background-color: #10b981; | |
| } | |
| .family-color { | |
| background-color: #f59e0b; | |
| } | |
| .health-color { | |
| background-color: #ec4899; | |
| } | |
| .learning-color { | |
| background-color: #8b5cf6; | |
| } | |
| .pyramid-level-1 { height: 20px; width: 80px; } | |
| .pyramid-level-2 { height: 40px; width: 120px; } | |
| .pyramid-level-3 { height: 60px; width: 160px; } | |
| .pyramid-level-4 { height: 80px; width: 200px; } | |
| #timeline-container { | |
| perspective: 1000px; | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| .rotate-3d { | |
| animation: rotate3d 20s infinite linear; | |
| } | |
| @keyframes rotate3d { | |
| 0% { transform: rotateY(0deg); } | |
| 100% { transform: rotateY(360deg); } | |
| } | |
| .scroll-container { | |
| scroll-snap-type: y mandatory; | |
| overflow-y: scroll; | |
| height: 100vh; | |
| } | |
| .scroll-section { | |
| scroll-snap-align: start; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 card-glass py-4 px-6"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-600 bg-clip-text text-transparent">ChronoScape 3D</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="text-gray-300 hover:text-white transition">Features</a> | |
| <a href="#demo" class="text-gray-300 hover:text-white transition">Demo</a> | |
| <a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-white transition">Testimonials</a> | |
| </div> | |
| <div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-medium transition"> | |
| Get Early Access | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="scroll-section pt-32 pb-20 px-6"> | |
| <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <h1 class="text-5xl md:text-6xl font-bold leading-tight"> | |
| Step Into The <span class="bg-gradient-to-r from-indigo-400 to-purple-600 bg-clip-text text-transparent">Future</span> of Time Management | |
| </h1> | |
| <p class="text-xl text-gray-300"> | |
| ChronoScape 3D transforms your abstract schedule into an immersive, interactive 3D universe, empowering you to visualize, organize, and master your time like never before. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-full font-medium text-lg transition flex items-center justify-center space-x-2"> | |
| <span>Start Free Trial</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <button class="border border-indigo-400 text-indigo-400 hover:bg-indigo-900/30 px-8 py-4 rounded-full font-medium text-lg transition flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Watch Demo</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-20 -left-20 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-indigo-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="relative z-10 floating"> | |
| <div class="bg-gray-900/50 rounded-3xl p-8 card-glass rotate-3d"> | |
| <div class="w-full h-80 bg-gradient-to-br from-indigo-900/50 to-purple-900/50 rounded-2xl flex items-center justify-center"> | |
| <div class="text-center space-y-4"> | |
| <div class="inline-block p-4 rounded-xl bg-indigo-600/20 border border-indigo-400/30"> | |
| <i class="fas fa-cube text-4xl text-indigo-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Your 3D Timeline</h3> | |
| <p class="text-gray-400">Visualize your schedule in a new dimension</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="scroll-section py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Experience Time Like Never Before</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| ChronoScape 3D combines stunning 3D visualization with powerful productivity tools to revolutionize how you manage your time. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-indigo-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-indigo-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-cube text-3xl text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Immersive 3D Visualization</h3> | |
| <p class="text-gray-400"> | |
| Navigate your schedule in a fluid 3D environment where events pop out as distinct blocks and projects form interconnected structures. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-green-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-green-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">AI-Powered Scheduling</h3> | |
| <p class="text-gray-400"> | |
| Our AI analyzes your commitments and preferences to suggest optimal times for tasks and automatically resolve scheduling conflicts. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-yellow-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-yellow-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-3xl text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Project Landscapes</h3> | |
| <p class="text-gray-400"> | |
| Visualize complex projects as 3D structures with dependencies, milestones, and allocated time clearly visible at a glance. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-pink-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-pink-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-bullseye text-3xl text-pink-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Goal Pyramids</h3> | |
| <p class="text-gray-400"> | |
| Track long-term goals with visually growing pyramids that represent progress and show how daily tasks contribute to bigger objectives. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-purple-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-purple-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-3xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Natural Language Input</h3> | |
| <p class="text-gray-400"> | |
| Speak or type naturally to create events and tasks. The AI understands complex requests and sets everything up automatically. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-glass p-8 rounded-2xl hover:border-blue-500 border border-gray-800 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-blue-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-3xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Collaborative Features</h3> | |
| <p class="text-gray-400"> | |
| Share calendars, delegate tasks, and coordinate schedules seamlessly with colleagues or family members in your shared 3D space. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="scroll-section py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">See ChronoScape 3D in Action</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Watch how ChronoScape 3D transforms your schedule into an interactive 3D universe. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 rounded-xl bg-indigo-600/20 flex items-center justify-center mt-1"> | |
| <i class="fas fa-eye text-xl text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Dynamic Timeline Navigation</h3> | |
| <p class="text-gray-400"> | |
| Scroll and zoom through your schedule in a fluid 3D environment. Events appear as tangible blocks of time, color-coded by category. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 rounded-xl bg-green-600/20 flex items-center justify-center mt-1"> | |
| <i class="fas fa-tasks text-xl text-green-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Task Management Reimagined</h3> | |
| <p class="text-gray-400"> | |
| See your tasks in relation to each other and your available time. The 3D perspective helps you spot scheduling conflicts and opportunities. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 rounded-xl bg-purple-600/20 flex items-center justify-center mt-1"> | |
| <i class="fas fa-mountain text-xl text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Goal Visualization</h3> | |
| <p class="text-gray-400"> | |
| Your long-term goals form mountains in your timeline. As you complete tasks, watch the paths to your summit become clearer. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 rounded-xl bg-yellow-600/20 flex items-center justify-center mt-1"> | |
| <i class="fas fa-sliders-h text-xl text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Customizable Environments</h3> | |
| <p class="text-gray-400"> | |
| Choose from various 3D themes - from minimalist grids to sprawling cities or natural landscapes - to match your personal style. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-12 -left-12 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-12 -right-12 w-64 h-64 bg-indigo-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="relative z-10"> | |
| <div class="bg-gray-900/50 rounded-3xl p-6 card-glass"> | |
| <div class="w-full h-96 bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl overflow-hidden relative"> | |
| <!-- 3D Timeline Demo --> | |
| <div id="timeline-container" class="w-full h-full relative"> | |
| <!-- These would be generated dynamically in a real app --> | |
| <div class="absolute left-1/4 bottom-0 timeline-block work-color w-24 h-32 rounded-lg transform rotate-x-20" style="transform: rotateX(20deg);"> | |
| <div class="absolute top-2 left-2 right-2 bottom-2 bg-indigo-700/30 rounded"></div> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-indigo-800/50 rounded-t-lg"></div> | |
| <div class="p-2 text-xs"> | |
| <div class="font-bold">Team Meeting</div> | |
| <div>10:00 - 11:30</div> | |
| </div> | |
| </div> | |
| <div class="absolute left-2/4 bottom-0 timeline-block personal-color w-16 h-24 rounded-lg transform rotate-x-20" style="transform: rotateX(20deg);"> | |
| <div class="absolute top-2 left-2 right-2 bottom-2 bg-green-700/30 rounded"></div> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-green-800/50 rounded-t-lg"></div> | |
| <div class="p-2 text-xs"> | |
| <div class="font-bold">Gym</div> | |
| <div>12:00 - 13:00</div> | |
| </div> | |
| </div> | |
| <div class="absolute left-3/4 bottom-0 timeline-block work-color w-20 h-40 rounded-lg transform rotate-x-20" style="transform: rotateX(20deg);"> | |
| <div class="absolute top-2 left-2 right-2 bottom-2 bg-indigo-700/30 rounded"></div> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-indigo-800/50 rounded-t-lg"></div> | |
| <div class="p-2 text-xs"> | |
| <div class="font-bold">Project Work</div> | |
| <div>14:00 - 17:00</div> | |
| </div> | |
| </div> | |
| <div class="absolute left-1/3 bottom-40 timeline-block family-color w-20 h-16 rounded-lg transform rotate-x-20" style="transform: rotateX(20deg);"> | |
| <div class="absolute top-2 left-2 right-2 bottom-2 bg-yellow-700/30 rounded"></div> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-yellow-800/50 rounded-t-lg"></div> | |
| <div class="p-2 text-xs"> | |
| <div class="font-bold">Dinner</div> | |
| <div>19:00 - 20:00</div> | |
| </div> | |
| </div> | |
| <!-- Pyramid Goal --> | |
| <div class="absolute right-8 bottom-40 flex flex-col items-center"> | |
| <div class="pyramid-level-4 bg-purple-600/70 flex items-end justify-center relative"> | |
| <div class="absolute bottom-0 text-xs font-bold mb-1">Career Growth</div> | |
| </div> | |
| <div class="pyramid-level-3 bg-purple-500/70 flex items-end justify-center relative"> | |
| <div class="absolute bottom-0 text-xs font-bold mb-1">Certification</div> | |
| </div> | |
| <div class="pyramid-level-2 bg-purple-400/70 flex items-end justify-center relative"> | |
| <div class="absolute bottom-0 text-xs font-bold mb-1">Weekly Study</div> | |
| </div> | |
| <div class="pyramid-level-1 bg-purple-300/70"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Features Section --> | |
| <section class="scroll-section py-20 px-6 bg-gray-900/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">AI-Powered Productivity</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| ChronoScape 3D's intelligent AI helps you work smarter, not harder. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="card-glass p-8 rounded-2xl border border-gray-800 hover:border-indigo-500 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-indigo-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-magic text-3xl text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Smart Scheduling</h3> | |
| <p class="text-gray-400 mb-4"> | |
| The AI analyzes your energy levels, preferences, and existing commitments to suggest optimal times for tasks and meetings. | |
| </p> | |
| <div class="bg-gray-800/50 rounded-lg p-4 text-sm"> | |
| <div class="flex items-center space-x-2 text-indigo-400 mb-2"> | |
| <i class="fas fa-robot"></i> | |
| <span class="font-medium">AI Suggestion</span> | |
| </div> | |
| <p>"Based on your energy patterns, I recommend scheduling creative work between 9-11 AM and meetings in the afternoon."</p> | |
| </div> | |
| </div> | |
| <div class="card-glass p-8 rounded-2xl border border-gray-800 hover:border-green-500 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-green-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-hourglass-half text-3xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Time Estimation</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Get realistic time predictions for tasks based on your historical data and the complexity of the work. | |
| </p> | |
| <div class="bg-gray-800/50 rounded-lg p-4 text-sm"> | |
| <div class="flex items-center space-x-2 text-green-400 mb-2"> | |
| <i class="fas fa-robot"></i> | |
| <span class="font-medium">AI Analysis</span> | |
| </div> | |
| <p>"Similar reports took you 3-4 hours in the past. Block 3.5 hours to be safe, with a 30-minute buffer."</p> | |
| </div> | |
| </div> | |
| <div class="card-glass p-8 rounded-2xl border border-gray-800 hover:border-yellow-500 transition"> | |
| <div class="w-16 h-16 rounded-xl bg-yellow-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-3xl text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Task Breakdown</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Describe a complex project and the AI will suggest a structured breakdown into manageable tasks. | |
| </p> | |
| <div class="bg-gray-800/50 rounded-lg p-4 text-sm"> | |
| <div class="flex items-center space-x-2 text-yellow-400 mb-2"> | |
| <i class="fas fa-robot"></i> | |
| <span class="font-medium">AI Plan</span> | |
| </div> | |
| <p>"For your website redesign, I've created 12 tasks across 4 phases. Let's schedule them over the next 3 weeks."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-2xl p-8 card-glass"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-3xl font-bold mb-4">Natural Language Processing</h3> | |
| <p class="text-gray-400 mb-6"> | |
| Speak or type naturally to create events, tasks, and set reminders. The AI understands complex requests and sets everything up automatically. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-800/50 rounded-lg p-4"> | |
| <div class="flex items-center space-x-2 text-indigo-400 mb-2"> | |
| <i class="fas fa-user"></i> | |
| <span class="font-medium">You</span> | |
| </div> | |
| <p>"Schedule weekly team meetings every Tuesday at 2 PM for 45 minutes about the Q3 report"</p> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-lg p-4"> | |
| <div class="flex items-center space-x-2 text-green-400 mb-2"> | |
| <i class="fas fa-robot"></i> | |
| <span class="font-medium">AI Response</span> | |
| </div> | |
| <p>"Done! I've created a recurring event every Tuesday from 2-2:45 PM with 'Q3 Report Discussion' as the title. I've added all team members and attached the report document."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-48 h-48 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="relative z-10"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">ChronoAI</div> | |
| <div class="text-xs text-gray-500">Ready to assist</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 rounded-lg p-4 mb-4"> | |
| <div class="text-sm text-gray-400 mb-1">You:</div> | |
| <p class="text-sm">"Add a task to review the presentation daily for the next five days"</p> | |
| </div> | |
| <div class="bg-indigo-600/20 rounded-lg p-4 border border-indigo-500/30"> | |
| <div class="text-sm text-indigo-400 mb-1">ChronoAI:</div> | |
| <p class="text-sm">"Created 5 recurring tasks: 'Review Presentation' at 9 AM each day from Mon to Fri. Would you like me to set reminders 15 minutes before?"</p> | |
| </div> | |
| <div class="mt-6 flex space-x-3"> | |
| <input type="text" placeholder="Type your command..." class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 rounded-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="scroll-section py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Choose the plan that fits your needs. All plans include a 14-day free trial. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="card-glass p-8 rounded-2xl border border-gray-800 hover:border-indigo-500 transition"> | |
| <h3 class="text-2xl font-bold mb-2">Basic</h3> | |
| <p class="text-gray-400 mb-6">For individuals getting started with time management</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$9</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>3D Timeline Visualization</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Basic Task Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>2 Custom Themes</span> | |
| </li> | |
| <li class="flex items-center space-x-2 text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| <span>AI Scheduling Assistant</span> | |
| </li> | |
| <li class="flex items-center space-x-2 text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| <span>Project Landscapes</span> | |
| </li> | |
| <li class="flex items-center space-x-2 text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| <span>Collaboration Features</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-lg font-medium transition"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| <!-- Pro Plan (Featured) --> | |
| <div class="relative"> | |
| <div class="absolute -top-4 -left-4 -right-4 -bottom-4 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-2xl -z-10"></div> | |
| <div class="card-glass p-8 rounded-2xl border border-indigo-500/50 bg-gray-900"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="text-2xl font-bold">Pro</h3> | |
| <p class="text-gray-400">For professionals serious about productivity</p> | |
| </div> | |
| <div class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full"> | |
| POPULAR | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$19</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Advanced 3D Visualization</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Full Task & Project Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>5 Custom Themes</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>AI Scheduling Assistant</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Project Landscapes</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Basic Collaboration</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition pulse"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Team Plan --> | |
| <div class="card-glass p-8 rounded-2xl border border-gray-800 hover:border-purple-500 transition"> | |
| <h3 class="text-2xl font-bold mb-2">Team</h3> | |
| <p class="text-gray-400 mb-6">For teams collaborating on projects</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$39</span> | |
| <span class="text-gray-400">/month per member</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>All Pro Features</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Advanced Collaboration Tools</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Unlimited Custom Themes</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Shared Project Landscapes</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Team Analytics & Reporting</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-check text-green-500"></i> | |
| <span>Priority Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-lg font-medium transition"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="scroll-section py-20 px-6 bg-gray-900/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">What Our Users Say</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Don't just take our word for it. Here's what our users have to say about ChronoScape 3D. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="card-glass p-8 rounded-2xl"> | |
| <div class="flex items-center space-x-4 mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-600/20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <p class="text-sm text-gray-500">Product Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| "ChronoScape 3D has completely transformed how I manage my projects. Seeing dependencies in 3D space helps me spot potential issues weeks in advance. The AI scheduling suggestions are eerily accurate!" | |
| </p> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="card-glass p-8 rounded-2xl"> | |
| <div class="flex items-center space-x-4 mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-600/20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <p class="text-sm text-gray-500">Software Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| "As a visual thinker, traditional calendars never worked well for me. ChronoScape's 3D interface finally makes sense of my schedule. I can actually see where I have time for deep work versus meetings." | |
| </p> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="card-glass p-8 rounded-2xl"> | |
| <div class="flex items-center space-x-4 mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600/20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Jessica L.</h4> | |
| <p class="text-sm text-gray-500">Entrepreneur</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| "The goal pyramids are game-changing. Watching my business milestones grow taller as I complete tasks is incredibly motivating. It's like a productivity video game where I'm always leveling up!" | |
| </p> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="scroll-section py-32 px-6 relative overflow-hidden"> | |
| <div class="absolute -top-32 -left-32 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-32 -right-32 w-64 h-64 bg-indigo-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="max-w-4xl mx-auto text-center relative z-10"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Transform Your Productivity?</h2> | |
| <p class="text-xl text-gray-400 mb-10"> | |
| Join thousands of professionals who have revolutionized their time management with ChronoScape 3D. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-full font-medium text-lg transition"> | |
| Start Your 14-Day Free Trial | |
| </button> | |
| <button class="border border-gray-600 hover:border-gray-500 text-gray-300 hover:text-white px-8 py-4 rounded-full font-medium text-lg transition flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Watch Demo</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900/70 py-12 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-600 bg-clip-text text-transparent">ChronoScape 3D</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| The next dimension in productivity and time management. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Demo</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2023 ChronoScape 3D. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for timeline blocks on hover | |
| document.querySelectorAll('.timeline-block').forEach(block => { | |
| block.addEventListener('mouseenter', () => { | |
| block.style.transform = 'translateY(-8px) rotateX(20deg) scale(1.05)'; | |
| block.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.3)'; | |
| }); | |
| block.addEventListener('mouseleave', () => { | |
| block.style.transform = 'translateY(0) rotateX(20deg)'; | |
| block.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)'; | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Simple AI chat simulation | |
| const aiChatInput = document.querySelector('#ai-chat-input'); | |
| const aiChatSend = document.querySelector('#ai-chat-send'); | |
| if (aiChatInput && aiChatSend) { | |
| aiChatSend.addEventListener('click', () => { | |
| if (aiChatInput.value.trim() !== '') { | |
| // In a real app, this would call an API | |
| console.log('User message:', aiChatInput.value); | |
| aiChatInput.value = ''; | |
| } | |
| }); | |
| aiChatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| aiChatSend.click(); | |
| } | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222kdfdf/chronoscape-3d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |