Hugging Face's logo

Spaces:
Axelnm
/
brunch-beans
Running

App Files Community
brunch-beans / index.html
Axelnm's picture
Axelnm
Лэндинг SaaS-продукта «TaskFlow» Краткое содержание Hero с оффером, преимущества, тарифы, кейсы, отзывы, CTA. Дизайн и верстка Макет на Flexbox + CSS Grid. Раздел «Тарифы» в виде карточек с приподнятой тенью. Интерактивные SVG-иллюстрации фоновых слоёв. Шрифты Заголовки: Poppins (Google Fonts). Текст: Lato. Анимации ScrollTrigger (GSAP) для по-порядка вылета блоков. Интерактивные SVG-иконки с morphing (Snap.svg). Hover-эффекты на кнопках с анимацией фоновых градиентов. Цветовая палитра Элемент Цвет HEX Фон секций Белый/Светло-серый #F5F7FA Акцентный градиент Оттенки синего #0066FF → #00CCFF Текст основной Тёмно-синий #1A1A2E Кнопки Градиент #0066FF → #00CCFF Технические фичи Адаптивная табуляция цен (переключатель «месяц/год»). Оптимизированные Lottie-анимации (bodymovin). Preloader с прогресс-баром. сделай сайт по выполнению дорогим и красивым а так же используй фотографии со стоков красивые анимаци и прочее - Follow Up Deployment
a53442c verified
raw
history blame contribute delete
44.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskFlow - Premium Task Management SaaS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<style>
body {
font-family: 'Lato', sans-serif;
color: #1A1A2E;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #0066FF 0%, #00CCFF 100%);
}
.gradient-text {
background: linear-gradient(135deg, #0066FF 0%, #00CCFF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px -12px rgba(0, 102, 255, 0.25);
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #F5F7FA;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.progress-bar {
width: 300px;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
margin-top: 20px;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(135deg, #0066FF 0%, #00CCFF 100%);
width: 0%;
transition: width 0.3s ease;
}
.svg-morph path {
transition: all 0.3s ease;
}
.svg-morph:hover path {
d: path("M10,10 C20,20 40,20 50,10 C60,0 80,0 90,10 C100,20 120,20 130,10 C140,0 160,0 170,10 C180,20 200,20 210,10");
}
.feature-icon {
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-[#F5F7FA]">
<!-- Preloader -->
<div class="preloader">
<div id="lottie-preloader" style="width: 150px; height: 150px;"></div>
<div class="progress-bar">
<div class="progress" id="progress-bar"></div>
</div>
</div>
<!-- Navigation -->
<nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
<div class="container mx-auto px-6 flex justify-between items-center">
<div class="flex items-center">
<svg class="w-10 h-10" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="url(#gradient)"/>
<path d="M25 15L15 25M15 15L25 25" stroke="white" stroke-width="2" stroke-linecap="round"/>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0066FF"/>
<stop offset="100%" stop-color="#00CCFF"/>
</linearGradient>
</defs>
</svg>
<span class="ml-3 text-2xl font-bold gradient-text">TaskFlow</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#features" class="text-[#1A1A2E] hover:text-[#0066FF] transition">Features</a>
<a href="#pricing" class="text-[#1A1A2E] hover:text-[#0066FF] transition">Pricing</a>
<a href="#case-studies" class="text-[#1A1A2E] hover:text-[#0066FF] transition">Case Studies</a>
<a href="#testimonials" class="text-[#1A1A2E] hover:text-[#0066FF] transition">Testimonials</a>
</div>
<div class="hidden md:block">
<button class="px-6 py-2 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition">Get Started</button>
</div>
<button class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="relative overflow-hidden">
<div class="absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-r from-white to-transparent z-10"></div>
<div class="absolute inset-0 bg-gradient-to-l from-white to-transparent z-10"></div>
<div class="absolute inset-0 bg-gradient-to-b from-white to-transparent z-10"></div>
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Workspace" class="w-full h-full object-cover opacity-30">
</div>
<div class="container mx-auto px-6 py-24 relative z-20">
<div class="max-w-3xl">
<h1 class="text-5xl md:text-6xl font-bold text-[#1A1A2E] mb-6">Streamline Your Workflow with <span class="gradient-text">TaskFlow</span></h1>
<p class="text-xl text-gray-600 mb-8">The ultimate SaaS solution for teams looking to boost productivity, enhance collaboration, and achieve more in less time.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="px-8 py-3 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition transform hover:scale-105">Start Free Trial</button>
<button class="px-8 py-3 rounded-full bg-white text-[#0066FF] border border-[#0066FF] font-medium hover:bg-[#0066FF] hover:text-white transition transform hover:scale-105">Watch Demo</button>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#F5F7FA] to-transparent z-20"></div>
</section>
<!-- Trusted By Section -->
<section class="py-12 bg-white">
<div class="container mx-auto px-6">
<p class="text-center text-gray-500 mb-8">Trusted by innovative teams worldwide</p>
<div class="flex flex-wrap justify-center items-center gap-12">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" alt="Apple" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" alt="Amazon" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1200px-Microsoft_logo_%282012%29.svg.png" alt="Microsoft" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/LinkedIn_Logo.svg/1200px-LinkedIn_Logo.svg.png" alt="LinkedIn" class="h-8 opacity-60 hover:opacity-100 transition">
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-[#F5F7FA]">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#1A1A2E] mb-4">Powerful Features</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Designed to help your team work smarter, not harder</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 17H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 12H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 3H15V7H9V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Task Management</h3>
<p class="text-gray-600">Easily create, assign, and track tasks with our intuitive interface. Set priorities, deadlines, and dependencies.</p>
</div>
<!-- Feature 2 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Team Collaboration</h3>
<p class="text-gray-600">Real-time updates, comments, and file sharing keep everyone on the same page. Mention teammates to get their attention.</p>
</div>
<!-- Feature 3 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 8V4L8 8L12 12V8ZM12 8H16C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14C22 15.5913 21.3679 17.1174 20.2426 18.2426C19.1174 19.3679 17.5913 20 16 20H12V16H16C16.5304 16 17.0391 15.7893 17.4142 15.4142C17.7893 15.0391 18 14.5304 18 14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12H12V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Time Tracking</h3>
<p class="text-gray-600">Automatically track time spent on tasks and generate detailed reports. Identify bottlenecks and optimize workflows.</p>
</div>
<!-- Feature 4 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 19V5L19 9L9 19ZM9 19L19 9L9 19ZM9 19L5 15L9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Automations</h3>
<p class="text-gray-600">Create custom workflows with our automation builder. Save time on repetitive tasks and focus on what matters.</p>
</div>
<!-- Feature 5 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10H21M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Calendar Integration</h3>
<p class="text-gray-600">Sync with Google Calendar, Outlook, and Apple Calendar. Never miss a deadline with automatic reminders.</p>
</div>
<!-- Feature 6 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card hover:shadow-lg transition">
<div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6 feature-icon">
<svg class="w-8 h-8 text-white svg-morph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4 15C19.2669 15.3016 19.227 15.6362 19.2849 15.9606C19.3428 16.285 19.4962 16.5839 19.725 16.8167C19.9538 17.0494 20.2471 17.2049 20.5621 17.2619C20.8771 17.3188 21.1985 17.2746 21.485 17.135L21.6 17.075C21.7785 16.9787 21.9244 16.8326 22.0203 16.654C22.1162 16.4754 22.1579 16.2724 22.14 16.07C22.11 15.62 22.01 15.18 21.845 14.76L21.8 14.635C21.684 14.3249 21.6479 13.9916 21.6951 13.6646C21.7423 13.3376 21.8713 13.0273 22.07 12.765C22.2687 12.5027 22.5303 12.297 22.83 12.168C23.1297 12.039 23.4571 11.9913 23.78 12.03C24.1029 12.0687 24.4099 12.1931 24.67 12.39L24.765 12.465C25.0204 12.6733 25.3375 12.7945 25.6675 12.8104C25.9975 12.8263 26.3239 12.736 26.6 12.553L26.7 12.485C26.8773 12.3893 27.0233 12.2436 27.1194 12.0653C27.2155 11.887 27.2574 11.6843 27.24 11.4825C27.2226 11.2807 27.1467 11.0894 27.0225 10.9345C26.8983 10.7796 26.7321 10.6687 26.545 10.615L26.425 10.585C26.005 10.42 25.565 10.32 25.115 10.29C24.9126 10.2721 24.7096 10.3138 24.531 10.4097C24.3524 10.5056 24.2063 10.6515 24.11 10.83L24.05 10.945C23.9104 11.2315 23.7662 11.5529 23.7231 11.8679C23.68 12.1829 23.5256 12.4762 23.2929 12.705C23.0601 12.9338 22.7612 13.0872 22.4368 13.1451C22.1124 13.203 21.7778 13.1631 21.4762 13.03L21.4 13C21.08 12.86 20.74 12.78 20.39 12.76C20.1876 12.7421 19.9846 12.7838 19.806 12.8797C19.6274 12.9756 19.4813 13.1215 19.385 13.3L19.325 13.415C19.1865 13.7015 19.0423 14.0229 18.9992 14.3379C18.9561 14.6529 18.8017 14.9462 18.5689 15.175C18.3362 15.4038 18.0373 15.5572 17.7129 15.6151C17.3885 15.673 17.0539 15.6331 16.7523 15.5L16.675 15.465C16.3885 15.3254 16.0671 15.1812 15.7521 15.1381C15.4371 15.095 15.1438 14.9406 14.915 14.7079C14.6862 14.4751 14.5328 14.1762 14.4749 13.8518C14.417 13.5274 14.4571 13.1928 14.59 12.89L14.625 12.815C14.76 12.505 14.84 12.175 14.86 11.835C14.8779 11.6326 14.8362 11.4296 14.7403 11.251C14.6444 11.0724 14.4985 10.9263 14.32 10.83L14.205 10.77C14.0189 10.6867 13.8276 10.6108 13.6325 10.5427C13.4373 10.4746 13.2387 10.4146 13.0375 10.3629C12.8363 10.3112 12.6329 10.2679 12.428 10.2333C12.2231 10.1986 12.017 10.1726 11.81 10.1553C11.603 10.138 11.3955 10.1294 11.188 10.1294C10.9805 10.1294 10.773 10.138 10.566 10.1553C10.359 10.1726 10.1529 10.1986 9.948 10.2333C9.7431 10.2679 9.5397 10.3112 9.3385 10.3629C9.1373 10.4146 8.9387 10.4746 8.7435 10.5427C8.5483 10.6108 8.3571 10.6867 8.171 10.77L8.055 10.83C7.8775 10.9263 7.7316 11.0724 7.6357 11.251C7.5398 11.4296 7.4981 11.6326 7.516 11.835C7.536 12.285 7.636 12.725 7.801 13.145L7.855 13.27C7.971 13.5801 8.0071 13.9134 7.9599 14.2404C7.9127 14.5674 7.7837 14.8777 7.585 15.14C7.3863 15.4023 7.1247 15.608 6.825 15.737C6.5253 15.866 6.1979 15.9137 5.875 15.875C5.5521 15.8363 5.2451 15.7119 4.985 15.515L4.89 15.44C4.6299 15.2431 4.3243 15.1187 4.0015 15.0804C3.6787 15.0421 3.3513 15.0914 3.055 15.2225L2.95 15.28C2.7723 15.3759 2.5693 15.4176 2.3675 15.4002C2.1657 15.3828 1.9744 15.3069 1.8195 15.1827C1.6646 15.0585 1.5537 14.8923 1.5 14.705L1.47 14.585C1.305 14.165 1.205 13.725 1.175 13.275C1.1571 13.0726 1.1988 12.8696 1.2947 12.691C1.3906 12.5124 1.5365 12.3663 1.715 12.2705L1.83 12.2105C2.1165 12.0709 2.4379 11.9267 2.7529 11.8836C3.0679 11.8405 3.3612 11.6861 3.5899 11.4533C3.8187 11.2206 3.9721 10.9217 4.03 10.5973C4.0879 10.2729 4.048 9.9383 3.915 9.6365L3.88 9.5615C3.74 9.275 3.5958 8.9536 3.5527 8.6386C3.5096 8.3236 3.3552 8.0303 3.1225 7.8015C2.8897 7.5727 2.5908 7.4193 2.2664 7.3614C1.942 7.3035 1.6074 7.3434 1.305 7.4765L1.23 7.5115C1.0434 7.5948 0.8521 7.6707 0.6569 7.7388C0.4617 7.8069 0.2631 7.8669 0.0619 7.9186C-0.1393 7.9703 -0.3427 8.0136 -0.5476 8.0483C-0.7525 8.0829 -0.9586 8.1089 -1.1656 8.1262C-1.3726 8.1435 -1.5801 8.1521 -1.7876 8.1521C-1.9951 8.1521 -2.2026 8.1435 -2.4096 8.1262C-2.6166 8.1089 -2.8227 8.0829 -3.0276 8.0483C-3.2325 8.0136 -3.4359 7.9703 -3.6371 7.9186C-3.8383 7.8669 -4.0369 7.8069 -4.2321 7.7388C-4.4273 7.6707 -4.6185 7.5948 -4.805 7.5115L-4.92 7.4515C-5.0975 7.3552 -5.2434 7.2091 -5.3393 7.0305C-5.4352 6.8519 -5.4769 6.6489 -5.459 6.4471C-5.4411 6.2453 -5.3642 6.054 -5.24 5.8991C-5.1158 5.7442 -4.9496 5.6333 -4.7625 5.5795L-4.645 5.5495C-4.225 5.3845 -3.785 5.2845 -3.335 5.2545C-3.1326 5.2366 -2.9296 5.2783 -2.751 5.3742C-2.5724 5.4701 -2.4263 5.616 -2.3305 5.7945L-2.2705 5.9095C-2.1309 6.196 -1.9867 6.5174 -1.9436 6.8324C-1.9005 7.1474 -1.7461 7.4407 -1.5133 7.6695C-1.2805 7.8983 -0.9816 8.0517 -0.6572 8.1096C-0.3328 8.1675 0.0018 8.1276 0.3036 7.9945L0.3786 7.9595C0.6986 7.8195 1.0386 7.7395 1.3886 7.7195C1.5909 7.7016 1.7939 7.7433 1.9725 7.8392C2.1511 7.9351 2.2972 8.081 2.393 8.2595L2.453 8.3745C2.5926 8.661 2.7368 8.9824 2.7799 9.2974C2.823 9.6124 2.9774 9.9057 3.2102 10.1345C3.443 10.3633 3.7419 10.5167 4.0663 10.5746C4.3907 10.6325 4.7253 10.5926 5.0275 10.4595L5.1025 10.4245C5.389 10.2849 5.7104 10.1407 6.0254 10.0976C6.3404 10.0545 6.6337 9.9001 6.8625 9.6673C7.0913 9.4345 7.2447 9.1356 7.3026 8.8112C7.3605 8.4868 7.3206 8.1522 7.1875 7.85L7.1525 7.775C7.0175 7.465 6.9375 7.135 6.9175 6.795C6.8996 6.5926 6.9413 6.3896 7.0372 6.211C7.1331 6.0324 7.279 5.8863 7.4575 5.7905L7.5725 5.7305C7.7586 5.6472 7.9499 5.5713 8.1451 5.5032C8.3403 5.4351 8.5389 5.3751 8.7401 5.3234C8.9413 5.2717 9.1447 5.2284 9.3496 5.1937C9.5545 5.1591 9.7606 5.1331 9.9676 5.1158C10.1746 5.0985 10.3821 5.0899 10.5896 5.0899C10.7971 5.0899 11.0046 5.0985 11.2116 5.1158C11.4186 5.1331 11.6247 5.1591 11.8296 5.1937C12.0345 5.2284 12.2379 5.2717 12.4391 5.3234C12.6403 5.3751 12.8389 5.4351 13.0341 5.5032C13.2293 5.5713 13.4205 5.6472 13.607 5.7305L13.722 5.7905C13.8995 5.8868 14.0454 6.0327 14.1413 6.2112C14.2372 6.3897 14.2789 6.5927 14.261 6.7945C14.241 7.2445 14.141 7.6845 13.976 8.1045L13.922 8.2295C13.806 8.5396 13.7699 8.8729 13.8171 9.1999C13.8643 9.5269 13.9933 9.8372 14.192 10.0995C14.3907 10.3618 14.6523 10.5675 14.952 10.6965C15.2517 10.8255 15.5791 10.8732 15.902 10.835C16.2249 10.7963 16.5319 10.6719 16.792 10.475L16.887 10.4C17.1471 10.2031 17.4527 10.0787 17.7755 10.0404C18.0983 10.0021 18.4257 10.0514 18.722 10.1825L18.827 10.24C19.0047 10.3359 19.2077 10.3776 19.4095 10.3602C19.6113 10.3428 19.8026 10.2669 19.9575 10.1427C20.1124 10.0185 20.2233 9.8523 20.277 9.665L20.307 9.545C20.472 9.125 20.572 8.685 20.602 8.235C20.6199 8.0326 20.5782 7.8296 20.4823 7.651C20.3864 7.4724 20.2405 7.3263 20.062 7.2305L19.947 7.1705C19.6605 7.0309 19.3391 6.8867 19.0241 6.8436C18.7091 6.8005 18.4158 6.6461 18.187 6.4133C17.9582 6.1805 17.8048 5.8816 17.7469 5.5572C17.689 5.2328 17.7289 4.8982 17.862 4.5965L17.897 4.5215C18.037 4.235 18.1812 3.9136 18.2243 3.5986C18.2674 3.2836 18.4218 2.9903 18.6546 2.7615C18.8874 2.5327 19.1863 2.3793 19.5107 2.3214C19.8351 2.2635 20.1697 2.3034 20.472 2.4365L20.547 2.4715C20.867 2.6115 21.207 2.6915 21.557 2.7115C21.7593 2.7294 21.9623 2.6877 22.1409 2.5918C22.3195 2.4959 22.4656 2.35 22.5614 2.1715L22.6214 2.0565C22.761 1.77 22.9052 1.4486 22.9483 1.1336C22.9914 0.8186 23.1458 0.5253 23.3786 0.2965C23.6114 0.0677 23.9103 -0.0857 24.2347 -0.1436C24.5591 -0.2015 24.8937 -0.1616 25.196 -0.0285L25.271 -0.0035" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">Advanced Analytics</h3>
<p class="text-gray-600">Get insights into your team's performance with beautiful dashboards and custom reports. Make data-driven decisions.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#1A1A2E] mb-4">Simple, Transparent Pricing</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Choose the plan that fits your team's needs</p>
</div>
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-full p-1 bg-gray-100">
<button id="monthly-toggle" class="px-6 py-2 rounded-full bg-white text-[#0066FF] font-medium shadow-md">Monthly</button>
<button id="yearly-toggle" class="px-6 py-2 rounded-full text-gray-600 font-medium">Yearly (Save 20%)</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Basic Plan -->
<div class="bg-white p-8 rounded-xl border border-gray-200 card-hover transition">
<h3 class="text-2xl font-bold text-[#1A1A2E] mb-2">Basic</h3>
<p class="text-gray-600 mb-6">Perfect for individuals and small teams</p>
<div class="mb-8">
<span class="text-4xl font-bold text-[#1A1A2E] monthly-price">$19</span>
<span class="text-4xl font-bold text-[#1A1A2E] yearly-price hidden">$15</span>
<span class="text-gray-500">/month</span>
</div>
<button class="w-full py-3 rounded-full border border-[#0066FF] text-[#0066FF] font-medium hover:bg-[#0066FF] hover:text-white transition mb-8">Get Started</button>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Up to 5 team members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Unlimited tasks & projects</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Basic integrations</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Email support</span>
</li>
</ul>
</div>
<!-- Pro Plan (Featured) -->
<div class="bg-white p-8 rounded-xl border-2 border-[#0066FF] shadow-lg card-hover transition transform scale-105 relative">
<div class="absolute top-0 right-0 bg-[#0066FF] text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div>
<h3 class="text-2xl font-bold text-[#1A1A2E] mb-2">Pro</h3>
<p class="text-gray-600 mb-6">For growing teams that need more power</p>
<div class="mb-8">
<span class="text-4xl font-bold text-[#1A1A2E] monthly-price">$49</span>
<span class="text-4xl font-bold text-[#1A1A2E] yearly-price hidden">$39</span>
<span class="text-gray-500">/month</span>
</div>
<button class="w-full py-3 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition mb-8">Get Started</button>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Up to 20 team members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Advanced reporting</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Priority support</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Custom workflows</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>API access</span>
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div class="bg-white p-8 rounded-xl border border-gray-200 card-hover transition">
<h3 class="text-2xl font-bold text-[#1A1A2E] mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For large organizations with complex needs</p>
<div class="mb-8">
<span class="text-4xl font-bold text-[#1A1A2E] monthly-price">$99</span>
<span class="text-4xl font-bold text-[#1A1A2E] yearly-price hidden">$79</span>
<span class="text-gray-500">/month</span>
</div>
<button class="w-full py-3 rounded-full border border-[#0066FF] text-[#0066FF] font-medium hover:bg-[#0066FF] hover:text-white transition mb-8">Contact Sales</button>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Unlimited team members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Dedicated account manager</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Custom integrations</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>On-premise deployment</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>24/7 premium support</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Case Studies Section -->
<section id="case-studies" class="py-20 bg-[#F5F7FA]">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#1A1A2E] mb-4">Real Results from Real Teams</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">See how TaskFlow has transformed workflows for teams across industries</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Case Study 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Team working" class="w-full h-full object-cover">
</div>
<div class="p-8">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Sarah Johnson</h4>
<p class="text-gray-600 text-sm">CTO, TechStart Inc.</p>
</div>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">45% Faster Project Completion</h3>
<p class="text-gray-600 mb-4">"TaskFlow revolutionized how our engineering team collaborates. We've reduced project completion times by 45% while improving quality."</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<span class="font-bold">4.8</span>
</div>
<a href="#" class="text-[#0066FF] font-medium hover:underline">Read Full Case Study →</a>
</div>
</div>
</div>
<!-- Case Study 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Design team" class="w-full h-full object-cover">
</div>
<div class="p-8">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Michael Chen</h4>
<p class="text-gray-600 text-sm">Creative Director, PixelPerfect</p>
</div>
</div>
<h3 class="text-xl font-bold text-[#1A1A2E] mb-3">30% More Projects Delivered</h3>
<p class="text-gray-600 mb-4">"Our creative team delivers 30% more projects with TaskFlow. The visual workflow helps us stay creative while meeting deadlines."</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<span class="font-bold">4.9</span>
</div>
<a href="#" class="text-[#0066FF] font-medium hover:underline">Read Full Case Study →</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="px-8 py-3 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition">View All Case Studies</button>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#1A1A2E] mb-4">What Our Customers Say</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Join thousands of satisfied teams who trust TaskFlow</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-[#F5F7FA] p-8 rounded-xl testimonial-card">
<div class="flex mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-gray-600 mb-6">"TaskFlow has completely transformed how
<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=Axelnm/brunch-beans" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>