<![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>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body{
font-family:'Inter',sans-serif;
background:linear-gradient(135deg,#f0f0f0,#e6e6e6);
}
/* Premium Glass Card */
.card{
background:rgba(255,255,255,0.65);
backdrop-filter: blur(18px);
border-radius:22px;
padding:30px;
border:1px solid rgba(255,255,255,0.5);
box-shadow:
0 15px 40px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: all 0.35s ease;
}
.card:hover{
transform: translateY(-6px) scale(1.01);
}
/* Glow Effects */
.glow{
box-shadow:0 10px 30px rgba(255,115,0,0.45);
}
.search{
box-shadow:0 15px 40px rgba(255,115,0,0.35);
}
/* Icon Bubble */
.icon{
width:36px;
height:36px;
border-radius:50%;
background:linear-gradient(135deg,#ff7a18,#ff4d00);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:14px;
transition:0.3s;
}
.icon:hover{
transform:scale(1.15);
}
/* Floating subtle animation */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
.float{
animation: float 3s ease-in-out infinite;
}
/* Cloud SVG */
.cloud svg{
width:120px;
filter: drop-shadow(0 10px 20px rgba(255,115,0,0.4));
}
</style>
</head>
<body>
<section>
<!-- Heading -->
Our Benefits
<h1>
Think Less About The Tool.<br>
Focus More On The Work
</h1>
<p>
The all-in one tool kit to keep your team organized, efficient and connected.
</p>
<!-- Grid -->
<!-- Card 1 -->
+ New Task
<img decoding="async" src="https://randomuser.me/api/portraits/women/44.jpg"
>
<h3>Team Workflow</h3>
<p>
Assign tasks and set priorities in real time for smoother collaboration.
</p>
<!-- Card 2 -->
<h3>Cloud Backup</h3>
<p>
Your projects are safely stored in the cloud, always up-to date and recoverable.
</p>
<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>
<!-- Card 3 -->
Search
🔍
<h3>All-In One Search</h3>
<p>
Quickly find tasks, messages, and docs with a single click across your workspace.
</p>
<!-- Card 4 -->
⚙
💬
📁
🔔
📊
📧
🧠
🔗
<h3>App Integrations</h3>
<p>
Seamlessly connect with 250+ of your favorite tools to automate tasks.
</p>
</section>
</body>
</html>]]>
