Загрузка...
Секция для лендинга: демонстрация фич командной работы, статистика и CTA. Tailwind CSS, адаптивный дизайн. Идеально для SaaS.
<div class="max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
<div class="grid gap-12 lg:grid-cols-2">
<!-- Diagram -->
<!-- Copy & stats -->
<div class="">
<div class="tech-content" id="technology">
<h3 class="sm:text-5xl transition-colors duration-500 text-4xl font-semibold text-slate-900 tracking-tight">Seamless team collaboration, built for modern workflows</h3>
<!-- Additional technology details -->
<div class="mt-8">
<div class="border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Core Collaboration Features</h4>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
</div>
<div class="">
<h5 class="font-medium text-slate-900">Instant Communication</h5>
<p class="text-sm text-slate-600 mt-1">Built-in chat, video calls, and screen sharing with contextual project discussions and file sharing.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
<polyline points="14,2 14,8 20,8" class=""></polyline>
<line x1="16" y1="13" x2="8" y2="13" class=""></line>
<line x1="16" y1="17" x2="8" y2="17" class=""></line>
<polyline points="10,9 9,9 8,9" class=""></polyline>
</svg>
</div>
<div class="">
<h5 class="font-medium text-slate-900">Smart Project Management</h5>
<p class="text-sm text-slate-600 mt-1">Automated task assignment, progress tracking, and intelligent reporting with customizable workflows.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-neutral-200 pt-6 mt-8">
<div class="grid gap-6 sm:grid-cols-2">
<div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-sans font-semibold rating-number text-slate-900" data-target="4.9">4.9</span>
<span class="text-sm text-slate-600 font-sans">/5</span>
</div>
<p class="text-xs text-slate-600 font-sans">18k+ team collaboration reviews</p>
</div>
</div>
<div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-sans font-semibold rating-number text-slate-900" data-target="87">87%</span>
</div>
<p class="text-xs text-slate-600 font-sans">Faster project delivery</p>
</div>
</div>
</div>
</div>
<div class="border-t border-neutral-200 pt-6 mt-8">
<button class="cursor-pointer inline-flex flex-col leading-none outline-none overflow-hidden no-underline align-baseline whitespace-nowrap select-none transition-all duration-150 hover:opacity-85 focus:outline-none focus:ring-4 focus:ring-black/50 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] text-base text-white text-center bg-gradient-to-b from-neutral-700 to-neutral-900 border-0 rounded-xl pt-2.5 pr-5 pb-2.5 pl-5 items-center justify-center" role="button">Team Features</button>
</div>
</div><div class="relative bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/347ae071-e53a-4247-a97a-e708e4ae14a7_1600w.jpg)] bg-cover rounded-[36px] pt-5 pr-5 pb-5 pl-5">
<article class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900/70 border-neutral-700 border rounded-3xl shadow-xl backdrop-blur-xl" style="background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(64, 64, 64, 0.35);">
<div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<h3 class="text-2xl font-semibold tracking-tight text-white">Collaborative Workflows</h3>
<span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-2.5 py-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
</svg>
Team sync
</span>
</div>
<!-- Illustration -->
<div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5 mb-8">
<!-- Main project dashboard -->
<div class="absolute left-3 sm:left-6 top-4 sm:top-6 w-[70%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">PROJECT BOARD</span>
<div class="flex items-center gap-1">
<div class="h-3 w-3 rounded-full bg-green-500/70"></div>
<span class="text-[10px] text-green-400">Active</span>
</div>
</div>
<div class="p-2 space-y-1.5">
<div class="flex items-center justify-between text-[10px] sm:text-xs">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded bg-blue-400"></div>
<span class="text-neutral-300">UI Design</span>
</div>
<span class="text-blue-400">In Progress</span>
</div>
<div class="flex items-center justify-between text-[10px] sm:text-xs">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded bg-green-400"></div>
<span class="text-neutral-300">API Integration</span>
</div>
<span class="text-green-400">Complete</span>
</div>
<div class="flex items-center justify-between text-[10px] sm:text-xs">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded bg-yellow-400"></div>
<span class="text-neutral-300">Testing</span>
</div>
<span class="text-yellow-400">Review</span>
</div>
</div>
</div>
<!-- Team chat -->
<div class="absolute right-4 sm:right-6 top-5 sm:top-7 w-[38%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">TEAM CHAT</span>
<div class="h-2 w-2 rounded-full bg-green-500"></div>
</div>
<div class="p-2 space-y-2">
<div class="flex items-start gap-2">
<div class="h-4 w-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 flex-shrink-0 mt-0.5"></div>
<div class="min-w-0">
<div class="text-[9px] text-neutral-400 mb-0.5">Sarah</div>
<div class="bg-white/10 rounded-lg px-2 py-1 text-[9px] text-neutral-300">Design looks great!</div>
</div>
</div>
<div class="flex items-start gap-2">
<div class="h-4 w-4 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex-shrink-0 mt-0.5"></div>
<div class="min-w-0">
<div class="text-[9px] text-neutral-400 mb-0.5">Mike</div>
<div class="bg-white/10 rounded-lg px-2 py-1 text-[9px] text-neutral-300">API ready for testing</div>
</div>
</div>
</div>
</div>
<!-- Progress indicator -->
<div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[55%] h-[28%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">PROGRESS</span>
<span class="text-[10px] text-green-400">78%</span>
</div>
<div class="p-2">
<div class="h-2 bg-neutral-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-400 to-green-400 rounded-full" style="width: 78%;"></div>
</div>
<div class="flex justify-between mt-1 text-[9px] text-neutral-400">
<span>12 tasks done</span>
<span>3 remaining</span>
</div>
</div>
</div>
<!-- Team avatars -->
<div class="absolute right-4 bottom-4 flex -space-x-1">
<div class="h-6 w-6 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 ring-2 ring-neutral-800"></div>
<div class="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-green-600 ring-2 ring-neutral-800"></div>
<div class="h-6 w-6 rounded-full bg-gradient-to-r from-purple-400 to-purple-600 ring-2 ring-neutral-800"></div>
<div class="h-6 w-6 rounded-full bg-neutral-700 ring-2 ring-neutral-800 flex items-center justify-center">
<span class="text-[8px] text-neutral-300">+2</span>
</div>
</div>
</div>
<!-- Features grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<h4 class="text-lg font-semibold tracking-tight text-white">Real‑time Collaboration</h4>
<p class="mt-2 text-sm text-neutral-400">Work together seamlessly with live updates, instant messaging, and shared workspaces.</p>
</div>
<div class="">
<h4 class="text-lg font-semibold tracking-tight text-white">Project Tracking</h4>
<p class="mt-2 text-sm text-neutral-400">Monitor progress with visual dashboards, automated reports, and milestone tracking.</p>
</div>
</div>
<!-- CTA -->
<div class="">
<a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
Start collaborating
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</article>
</div>
</div>
</div>