|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Taskade AI | Smart Task Management</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script> |
|
|
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script> |
|
|
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #5e56e7; |
|
|
--secondary: #8a85ff; |
|
|
--dark: #1a1a2e; |
|
|
--light: #f8f9fa; |
|
|
--neomorphic-shadow: 8px 8px 15px #d1d9e6, -8px -8px 15px #ffffff; |
|
|
--neomorphic-inset: inset 3px 3px 5px #d1d9e6, inset -3px -3px 5px #ffffff; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
color: var(--dark); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.neomorphic-card { |
|
|
background: linear-gradient(145deg, #ffffff, #e6e6e6); |
|
|
border-radius: 12px; |
|
|
box-shadow: var(--neomorphic-shadow); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.neomorphic-card:hover { |
|
|
box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff; |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.neomorphic-btn { |
|
|
background: linear-gradient(145deg, #ffffff, #e6e6e6); |
|
|
border-radius: 8px; |
|
|
box-shadow: var(--neomorphic-shadow); |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.neomorphic-btn:active { |
|
|
box-shadow: var(--neomorphic-inset); |
|
|
} |
|
|
|
|
|
.neomorphic-input { |
|
|
background: linear-gradient(145deg, #ffffff, #e6e6e6); |
|
|
border-radius: 8px; |
|
|
box-shadow: var(--neomorphic-inset); |
|
|
border: none; |
|
|
padding: 12px 20px; |
|
|
} |
|
|
|
|
|
.parallax-section { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.parallax-bg { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 120%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
|
|
|
.floating-element { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
#threejs-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.task-item { |
|
|
transition: all 0.3s ease; |
|
|
border-left: 3px solid transparent; |
|
|
} |
|
|
|
|
|
.task-item:hover { |
|
|
background: rgba(94, 86, 231, 0.05); |
|
|
border-left: 3px solid var(--primary); |
|
|
} |
|
|
|
|
|
.ai-assistant-bubble { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
box-shadow: 0 10px 25px rgba(94, 86, 231, 0.3); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.ai-assistant-bubble:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.ai-assistant-panel { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
right: 30px; |
|
|
width: 350px; |
|
|
height: 500px; |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
z-index: 1000; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.ai-assistant-panel.active { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.file-upload-container { |
|
|
border: 2px dashed #ccc; |
|
|
border-radius: 12px; |
|
|
padding: 30px; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.file-upload-container:hover { |
|
|
border-color: var(--primary); |
|
|
background: rgba(94, 86, 231, 0.05); |
|
|
} |
|
|
|
|
|
.integration-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border-radius: 20px; |
|
|
padding: 5px 15px; |
|
|
margin: 5px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.integration-badge:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="threejs-container"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg shadow-sm fixed w-full z-50"> |
|
|
<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"> |
|
|
<svg class="h-8 w-8 text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
<path d="M12 16V16.01M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
</svg> |
|
|
<span class="ml-2 text-xl font-bold gradient-text">Taskade AI</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="neomorphic-btn px-4 py-2 text-sm font-medium text-gray-700 mr-4">Log In</button> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition duration-300">Sign Up Free</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="parallax-section pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6"> |
|
|
<span class="gradient-text">Supercharge</span> Your Productivity |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10"> |
|
|
The all-in-one workspace to manage tasks, notes, and collaborate with your team. Powered by AI to automate your workflow. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4 mb-16"> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 text-lg font-medium text-white rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
|
|
Get Started for Free |
|
|
</button> |
|
|
<button class="neomorphic-btn px-6 py-3 text-lg font-medium text-gray-700 rounded-lg"> |
|
|
Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="neomorphic-card max-w-6xl mx-auto p-6 mt-10"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="flex-1"> |
|
|
<input type="text" placeholder="What would you like to accomplish today?" class="neomorphic-input w-full text-lg"> |
|
|
</div> |
|
|
<button class="ml-4 bg-indigo-500 text-white p-3 rounded-lg hover:bg-indigo-600 transition duration-300"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="task-item p-4 rounded-lg flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> |
|
|
<div class="flex-1">Complete project proposal for client</div> |
|
|
<div class="text-gray-500 text-sm">Today</div> |
|
|
</div> |
|
|
<div class="task-item p-4 rounded-lg flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> |
|
|
<div class="flex-1">Review team performance metrics</div> |
|
|
<div class="text-gray-500 text-sm">Tomorrow</div> |
|
|
</div> |
|
|
<div class="task-item p-4 rounded-lg flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> |
|
|
<div class="flex-1">Schedule meeting with marketing team</div> |
|
|
<div class="text-gray-500 text-sm">Fri</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">Powerful Features</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Everything you need to organize, automate, and collaborate on your work. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Task Management</h3> |
|
|
<p class="text-gray-600"> |
|
|
Organize tasks with lists, boards, and calendars. Set priorities, due dates, and reminders. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">AI Automation</h3> |
|
|
<p class="text-gray-600"> |
|
|
Let AI suggest tasks, automate workflows, and generate content based on your patterns. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Real-time Collaboration</h3> |
|
|
<p class="text-gray-600"> |
|
|
Work together with your team in real-time with comments, mentions, and shared workspaces. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Customizable UI</h3> |
|
|
<p class="text-gray-600"> |
|
|
Personalize your workspace with themes, layouts, and AI-powered UI suggestions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Browser Control</h3> |
|
|
<p class="text-gray-600"> |
|
|
Automate browser tasks, control tabs, and integrate with web apps directly from Taskade. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">API & Integrations</h3> |
|
|
<p class="text-gray-600"> |
|
|
Connect with Zapier, Slack, Google Drive, and 1000+ apps through our powerful API. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">AI-Powered Productivity</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Our AI assistant learns from your workflow to provide intelligent suggestions and automation. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="neomorphic-card p-8 rounded-xl"> |
|
|
<h3 class="text-2xl font-bold mb-6 gradient-text">Taskade AI Agent</h3> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">AI Prompt</label> |
|
|
<textarea id="ai-prompt" class="neomorphic-input w-full h-32" placeholder="What would you like the AI to help with? (e.g., 'Create a project plan for launching our new product')"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">AI Configuration</label> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<select class="neomorphic-input"> |
|
|
<option>General Assistant</option> |
|
|
<option>Project Manager</option> |
|
|
<option>Content Writer</option> |
|
|
<option>Data Analyst</option> |
|
|
<option>Custom Agent</option> |
|
|
</select> |
|
|
<select class="neomorphic-input"> |
|
|
<option>Balanced</option> |
|
|
<option>Creative</option> |
|
|
<option>Precise</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600"> |
|
|
<span class="ml-2 text-gray-700">Connect to Browser</span> |
|
|
</label> |
|
|
</div> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 text-white rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
|
|
Generate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="neomorphic-card p-6 rounded-xl mb-6"> |
|
|
<h4 class="font-bold mb-3">AI Capabilities</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Generate task lists and project plans</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Automate browser tasks and workflows</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Analyze and summarize documents</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Personalized productivity recommendations</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="neomorphic-card p-6 rounded-xl"> |
|
|
<h4 class="font-bold mb-3">API Integration</h4> |
|
|
<div class="file-upload-container mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> |
|
|
</svg> |
|
|
<p class="text-gray-600 mb-2">Drag & drop files or click to browse</p> |
|
|
<p class="text-sm text-gray-500">Supports PDF, DOCX, PPTX, XLSX, and images</p> |
|
|
</div> |
|
|
<div class="flex flex-wrap justify-center"> |
|
|
<div class="integration-badge"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/zapier.svg" class="h-5 mr-2" alt="Zapier"> |
|
|
<span>Zapier</span> |
|
|
</div> |
|
|
<div class="integration-badge"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg" class="h-5 mr-2" alt="Slack"> |
|
|
<span>Slack</span> |
|
|
</div> |
|
|
<div class="integration-badge"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/google-drive-icon.svg" class="h-5 mr-2" alt="Google Drive"> |
|
|
<span>Google Drive</span> |
|
|
</div> |
|
|
<div class="integration-badge"> |
|
|
<img src="https://cdn.worldvectorlogo.com/logos/dropbox.svg" class="h-5 mr-2" alt="Dropbox"> |
|
|
<span>Dropbox</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">Browser Automation</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Control your browser directly from Taskade to automate repetitive tasks and workflows. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<div class="neomorphic-card p-6 rounded-xl mb-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Browser Actions</h3> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded"> |
|
|
<span class="ml-3">Open new tab with URL</span> |
|
|
<input type="text" placeholder="https://" class="neomorphic-input ml-3 flex-1 text-sm"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded"> |
|
|
<span class="ml-3">Extract data from current page</span> |
|
|
<select class="neomorphic-input ml-3 flex-1 text-sm"> |
|
|
<option>Text content</option> |
|
|
<option>Links</option> |
|
|
<option>Images</option> |
|
|
<option>Tables</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded"> |
|
|
<span class="ml-3">Fill form fields</span> |
|
|
<input type="text" placeholder="Field name" class="neomorphic-input ml-3 flex-1 text-sm"> |
|
|
<input type="text" placeholder="Value" class="neomorphic-input ml-2 flex-1 text-sm"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded"> |
|
|
<span class="ml-3">Take screenshot</span> |
|
|
<select class="neomorphic-input ml-3 flex-1 text-sm"> |
|
|
<option>Visible area</option> |
|
|
<option>Full page</option> |
|
|
<option>Selected element</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-6 w-full bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 text-white rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
|
|
Execute Browser Actions |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="neomorphic-card p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold mb-4">Browser Automation Script</h3> |
|
|
<textarea class="neomorphic-input w-full h-32 font-mono text-sm" placeholder="// Write your custom browser automation script here |
|
|
async function automate() { |
|
|
await page.goto('https://example.com'); |
|
|
await page.type('#search', 'Taskade'); |
|
|
await page.click('#submit'); |
|
|
const results = await page.evaluate(() => { |
|
|
return |
|
|
</html> |
