<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Benefits UI</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section class="max-w-6xl mx-auto px-6 py-20">
<!-- Heading -->
<div class="mb-16">
<span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs px-4 py-1 rounded-full shadow-md">
Our Benefits
</span>
<h1 class="text-[44px] font-semibold mt-5 leading-tight text-gray-800">
Think Less About The Tool.<br>
Focus More On The Work
</h1>
<p class="text-gray-500 mt-4 max-w-lg text-sm leading-relaxed">
The all-in one tool kit to keep your team organized, efficient and connected.
</p>
</div>
<!-- Grid -->
<div class="grid md:grid-cols-2 gap-7">
<!-- Card 1 -->
<div class="card relative">
<div class="absolute top-6 left-6 bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs px-4 py-2 rounded-md glow float">
+ New Task
</div>
<img decoding="async" src="https://randomuser.me/api/portraits/women/44.jpg" class="absolute top-14 left-32 w-9 h-9 rounded-full border-2 border-white shadow-md" alt="44" title="Elementor #9304">
<div class="mt-20">
<h3 class="font-semibold text-lg">Team Workflow</h3>
<p class="text-gray-500 text-sm mt-2 leading-relaxed">
Assign tasks and set priorities in real time for smoother collaboration.
</p>
</div>
</div>
<!-- Card 2 -->
<div class="card flex justify-between items-center">
<div>
<h3 class="font-semibold text-lg">Cloud Backup</h3>
<p class="text-gray-500 text-sm mt-2 max-w-xs leading-relaxed">
Your projects are safely stored in the cloud, always up-to date and recoverable.
</p>
</div>
<div class="cloud float">
<svg viewBox="0 0 200 120">
<path fill="url(#grad)"
d="M60 100h80a30 30 0 0 0 0-60 40 40 0 0 0-75-10A30 30 0 0 0 60 100z"/>
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff7a18"/>
<stop offset="100%" stop-color="#ff4d00"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<!-- Card 3 -->
<div class="card">
<div class="bg-gradient-to-r from-orange-500 to-red-500 text-white px-5 py-2 rounded-md inline-flex items-center gap-2 search float">
<span class="text-sm">Search</span>
🔍
</div>
<h3 class="font-semibold text-lg mt-6">All-In One Search</h3>
<p class="text-gray-500 text-sm mt-2 leading-relaxed">
Quickly find tasks, messages, and docs with a single click across your workspace.
</p>
</div>
<!-- Card 4 -->
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div class="icon">⚙</div>
<div class="icon">💬</div>
<div class="icon">📁</div>
<div class="icon">🔔</div>
<div class="icon">📊</div>
<div class="icon">📧</div>
<div class="icon">🧠</div>
<div class="icon">🔗</div>
</div>
<h3 class="font-semibold text-lg">App Integrations</h3>
<p class="text-gray-500 text-sm mt-2 leading-relaxed">
Seamlessly connect with 250+ of your favorite tools to automate tasks.
</p>
</div>
</div>
</section>
</body>
</html>]]>
