Загрузка...
Интерактивный раздел с 4 анимированными карточками фич для SaaS. Реализован на Tailwind CSS, JS. Демонстрирует KPI, клиентов, интеграции, рабочий процесс.
<section class="md:px-10 md:pt-28 max-w-6xl mr-auto ml-auto pt-20 pr-6 pl-6">
<!-- Badge -->
<div class="flex justify-center">
<div
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bolt"
class="lucide lucide-bolt h-4 w-4 text-sky-300">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class=""></path>
<circle cx="12" cy="12" r="4" class=""></circle>
</svg>
<span class="text-sm text-sky-200/90">Feature Highlights</span>
</div>
</div>
<!-- Heading -->
<h1 class="mt-6 text-center text-4xl md:text-6xl font-semibold tracking-tight text-white">
Feature Highlights to Accelerate
<span class="block">Your Sales</span>
</h1>
<p class="mx-auto mt-5 max-w-2xl text-center text-base md:text-lg text-white/70 font-normal">
Tools to track, automate, and scale your pipeline—built to elevate performance and help teams close faster.
</p>
<!-- Grid -->
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8">
<!-- Card 1: Track Performance -->
<section id="card-realtime"
class="group relative overflow-hidden rounded-3xl bg-white/[0.04] ring-1 ring-white/10 p-5 md:p-6">
<div
class="absolute inset-0 bg-gradient-to-br from-sky-500/10 via-transparent to-transparent pointer-events-none">
</div>
<div class="absolute -right-24 -top-24 h-72 w-72 rounded-full bg-sky-500/10 blur-3xl"></div>
<!-- Inset UI preview -->
<div class="rounded-2xl bg-gradient-to-b from-white/5 to-white/[0.03] p-4 ring-1 ring-white/10 backdrop-blur">
<div class="flex items-center gap-2 text-white/80 text-sm mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-4 w-4 text-sky-300">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M18 17V9" class=""></path>
<path d="M13 17V5" class=""></path>
<path d="M8 17v-3" class=""></path>
</svg>
<span class="font-medium">Realtime KPI Monitor</span>
</div>
<div class="space-y-3">
<!-- Row 1 -->
<div class="rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<img src="https://flagcdn.com/us.svg" alt="US" class="h-5 w-5 rounded-full ring-1 ring-white/20">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-white/90">United States</p>
<p class="text-xs text-white/60">$89,032</p>
</div>
<div class="mt-2 h-2 w-full rounded-full bg-white/10 overflow-hidden">
<div id="us-progress" class="h-full rounded-full bg-gradient-to-r from-sky-400 to-blue-500"
style="width: 0%"></div>
</div>
</div>
<span id="us-pct" class="text-xs text-white/70">0%</span>
</div>
<p class="mt-2 text-[11px] text-white/50">E‑commerce & SaaS</p>
</div>
<!-- Row 2 -->
<div class="rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<img src="https://flagcdn.com/bd.svg" alt="Bangladesh" class="h-5 w-5 rounded-full ring-1 ring-white/20">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-white/90">Bangladesh</p>
<p class="text-xs text-white/60">$52,878</p>
</div>
<div class="mt-2 h-2 w-full rounded-full bg-white/10 overflow-hidden">
<div id="bd-progress" class="h-full rounded-full bg-gradient-to-r from-emerald-400 to-teal-500"
style="width: 0%"></div>
</div>
</div>
<span id="bd-pct" class="text-xs text-white/70">0%</span>
</div>
<p class="mt-2 text-[11px] text-white/50">AI & Automation</p>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<button class="inline-flex items-center gap-2 rounded-full bg-sky-500/15 px-3 py-1.5 text-xs text-sky-200 ring-1 ring-sky-400/30 hover:bg-sky-500/20 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="radar" class="lucide lucide-radar h-4 w-4"><path d="M19.07 4.93A10 10 0 0 0 6.99 3.34" class=""></path><path d="M4 6h.01" class=""></path><path d="M2.29 9.62A10 10 0 1 0 21.31 8.35" class=""></path><path d="M16.24 7.76A6 6 0 1 0 8.23 16.67" class=""></path><path d="M12 18h.01" class=""></path><path d="M17.99 11.66A6 6 0 0 1 15.77 16.67" class=""></path><circle cx="12" cy="12" r="2" class=""></circle><path d="m13.41 10.59 5.66-5.66" class=""></path></svg>
AI Insights
</button>
<div class="flex items-center gap-2 text-[11px] text-white/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="activity" class="lucide lucide-activity h-3.5 w-3.5 text-emerald-300">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
class=""></path>
</svg>
Live
</div>
</div>
</div>
<h3 class="mt-5 text-xl md:text-2xl font-semibold tracking-tight">Real‑Time Performance Tracking</h3>
<p class="mt-1.5 text-sm text-white/70">
See KPIs, closed deals, and revenue trends as they happen. Make confident decisions with instant insight.
</p>
<!-- Scoped script for this card -->
<script type="module">
// Module: /cards/realtime.js (scoped to #card-realtime)
const root = document.querySelector('#card-realtime');
const us = root.querySelector('#us-progress');
const bd = root.querySelector('#bd-progress');
const usPct = root.querySelector('#us-pct');
const bdPct = root.querySelector('#bd-pct');
const targets = { us: 76, bd: 44 };
let animated = false;
const animate = () => {
if (animated) return;
animated = true;
const dur = 1000;
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / dur);
const ease = (x) => 1 - Math.pow(1 - x, 3);
const e = ease(t);
const usVal = Math.round(targets.us * e);
const bdVal = Math.round(targets.bd * e);
us.style.width = usVal + '%';
bd.style.width = bdVal + '%';
usPct.textContent = usVal + '%';
bdPct.textContent = bdVal + '%';
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) animate(); });
}, { threshold: 0.4 });
io.observe(root);
// Render icons scoped in this card
lucide.createIcons({ attrs: { 'stroke-width': 1.5 }, icons: lucide.icons, nameAttr: "data-lucide" });
</script>
</section>
<!-- Card 2: Sell Without Borders -->
<section id="card-borders"
class="group relative overflow-hidden rounded-3xl bg-white/[0.04] ring-1 ring-white/10 p-5 md:p-6">
<div
class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-transparent to-transparent pointer-events-none">
</div>
<div class="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-indigo-500/10 blur-3xl"></div>
<!-- Inset UI preview -->
<div class="rounded-2xl bg-gradient-to-b from-white/5 to-white/[0.03] p-4 ring-1 ring-white/10 backdrop-blur">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white/80 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="globe-2" class="lucide lucide-globe-2 h-4 w-4 text-indigo-300">
<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" class=""></path>
<path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" class="">
</path>
<path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
<span class="font-medium">Worldwide Clients</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[11px] text-white/60">Weekly</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="repeat" class="lucide lucide-repeat h-4 w-4 text-white/40">
<path d="m17 2 4 4-4 4" class=""></path>
<path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path>
<path d="m7 22-4-4 4-4" class=""></path>
<path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path>
</svg>
</div>
</div>
<!-- Sliding list -->
<div class="overflow-hidden h-36 rounded-xl ring-white/10 ring-1 mt-3">
<ul class="relative" id="client-list">
<!-- Items repeat for infinite scroll -->
<li class="flex pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&q=80" class="h-6 w-6 rounded-full ring-1 ring-white/20" alt="client">
<div>
<p class="text-sm text-white/90">Jordan Lee</p>
<p class="text-[11px] text-white/50">US • USD</p>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="star" class="lucide lucide-star h-4 w-4 text-amber-300">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
class=""></path>
</svg>
</li>
<li class="flex items-center justify-between px-3 py-2">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1544006659-f0b21884ce1d?q=80&w=80&auto=format&fit=crop" class="h-6 w-6 rounded-full ring-1 ring-white/20" alt="client">
<div class="">
<p class="text-sm text-white/90">Maya Chen</p>
<p class="text-[11px] text-white/50">GB • GBP</p>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4 text-emerald-300">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</li>
<li class="flex items-center justify-between px-3 py-2">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=80&auto=format&fit=crop" class="h-6 w-6 rounded-full ring-1 ring-white/20" alt="client">
<div class="">
<p class="text-sm text-white/90">Sofia Alvarez</p>
<p class="text-[11px] text-white/50">AU • AUD</p>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="badge-check" class="lucide lucide-badge-check h-4 w-4 text-sky-300">
<path
d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</li>
</ul>
</div>
<div class="mt-4 flex items-center gap-2 text-[11px] text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="languages" class="lucide lucide-languages h-3.5 w-3.5">
<path d="m5 8 6 6" class=""></path>
<path d="m4 14 6-6 2-3" class=""></path>
<path d="M2 5h12" class=""></path>
<path d="M7 2h1" class=""></path>
<path d="m22 22-5-10-5 10" class=""></path>
<path d="M14 18h6" class=""></path>
</svg>
Multilingual + multicurrency support
</div>
</div>
<h3 class="mt-5 text-xl md:text-2xl font-semibold tracking-tight">Sell Globally</h3>
<p class="mt-1.5 text-sm text-white/70">
Serve customers across regions with localized language and currency options to scale confidently.
</p>
<!-- Scoped script for this card -->
<script type="module">
// Module: /cards/borders.js (scoped to #card-borders)
const root = document.querySelector('#card-borders');
const list = root.querySelector('#client-list');
// duplicate list items for seamless loop
const items = [...list.children];
items.forEach((li) => list.appendChild(li.cloneNode(true)));
let y = 0;
const speed = 0.25;
const step = () => {
y += speed;
// total height of one set
const setH = items.reduce((h, el) => h + el.offsetHeight, 0);
if (y >= setH) y = 0;
list.style.transform = `translateY(-${y}px)`;
requestAnimationFrame(step);
};
requestAnimationFrame(step);
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
</script>
</section>
<!-- Card 3: Collaborate Seamlessly -->
<section id="card-collab"
class="group relative overflow-hidden rounded-3xl bg-white/[0.04] ring-1 ring-white/10 p-5 md:p-6">
<div
class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-transparent pointer-events-none">
</div>
<div class="absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-emerald-500/10 blur-3xl"></div>
<div class="rounded-2xl bg-gradient-to-b from-white/5 to-white/[0.03] p-4 ring-1 ring-white/10 backdrop-blur">
<div class="flex items-center gap-2 text-white/80 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="boxes"
class="lucide lucide-boxes h-4 w-4 text-emerald-300">
<path
d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
class=""></path>
<path d="m7 16.5-4.74-2.85" class=""></path>
<path d="m7 16.5 5-3" class=""></path>
<path d="M7 16.5v5.17" class=""></path>
<path
d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
class=""></path>
<path d="m17 16.5-5-3" class=""></path>
<path d="m17 16.5 4.74-2.85" class=""></path>
<path d="M17 16.5v5.17" class=""></path>
<path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
class=""></path>
<path d="M12 8 7.26 5.15" class=""></path>
<path d="m12 8 4.74-2.85" class=""></path>
<path d="M12 13.5V8" class=""></path>
</svg>
<span class="font-medium">Connects with your tools</span>
</div>
<div class="mt-3 grid grid-cols-4 gap-3">
<!-- Tool tiles -->
<div class="flex flex-col items-center gap-2 rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="inbox" class="lucide lucide-inbox h-5 w-5 text-white/80">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" class=""></polyline>
<path
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
class=""></path>
</svg>
<span class="text-xs text-white/70">Email</span>
</div>
<div class="flex flex-col items-center gap-2 rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="message-square" class="lucide lucide-message-square h-5 w-5 text-white/80">
<path
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
class=""></path>
</svg>
<span class="text-xs text-white/70">Chat</span>
</div>
<div class="flex flex-col items-center gap-2 rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="calendar" class="lucide lucide-calendar h-5 w-5 text-white/80">
<path d="M8 2v4" class=""></path>
<path d="M16 2v4" class=""></path>
<rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
<path d="M3 10h18" class=""></path>
</svg>
<span class="text-xs text-white/70">Calendar</span>
</div>
<div class="flex flex-col items-center gap-2 rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="database" class="lucide lucide-database h-5 w-5 text-white/80">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
<path d="M3 12A9 3 0 0 0 21 12" class=""></path>
</svg>
<span class="text-xs text-white/70">CRM</span>
</div>
</div>
<div class="mt-3 overflow-hidden rounded-xl bg-white/[0.04] ring-1 ring-white/10">
<div id="collab-shimmer" class="relative grid grid-cols-6 gap-2 p-3">
<div class="h-2 rounded-full bg-white/10 col-span-2"></div>
<div class="h-2 rounded-full bg-white/10 col-span-3"></div>
<div class="h-2 rounded-full bg-white/10 col-span-1"></div>
<div class="h-2 rounded-full bg-white/10 col-span-4"></div>
<div class="h-2 rounded-full bg-white/10 col-span-2"></div>
<div class="absolute inset-y-0 -left-1 w-24 bg-gradient-to-r from-transparent via-white/15 to-transparent">
</div>
</div>
<div class="flex items-center gap-2 border-t border-white/10 px-3 py-2">
<img class="h-5 w-5 rounded-full ring-1 ring-white/20" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=80&auto=format&fit=crop" alt="avatar">
<img class="h-5 w-5 rounded-full ring-1 ring-white/20 -ml-2" src="https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&w=80&auto=format&fit=crop" alt="avatar">
<img class="h-5 w-5 rounded-full ring-1 ring-white/20 -ml-2" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=80&auto=format&fit=crop" alt="avatar">
<span class="ml-1 text-[11px] text-white/60">Synced across tools</span>
</div>
</div>
</div>
<h3 class="mt-5 text-xl md:text-2xl font-semibold tracking-tight">Seamless Collaboration</h3>
<p class="mt-1.5 text-sm text-white/70">
Keep your team aligned with integrations to email, chat, calendars, and your CRM—all in one place.
</p>
<!-- Scoped script for this card -->
<script type="module">
// Module: /cards/collab.js (scoped to #card-collab)
const root = document.querySelector('#card-collab');
const shimmer = root.querySelector('#collab-shimmer > .absolute');
let x = -96;
function move() {
x += 1.2;
if (x > shimmer.parentElement.clientWidth + 96) x = -96;
shimmer.style.transform = `translateX(${x}px)`;
requestAnimationFrame(move);
}
requestAnimationFrame(move);
// hover tilt
root.addEventListener('mousemove', (e) => {
const r = root.getBoundingClientRect();
const dx = (e.clientX - (r.left + r.width / 2)) / r.width;
const dy = (e.clientY - (r.top + r.height / 2)) / r.height;
root.style.transform = `perspective(1000px) rotateX(${dy * -2}deg) rotateY(${dx * 2}deg)`;
});
root.addEventListener('mouseleave', () => {
root.style.transform = '';
});
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
</script>
</section>
<!-- Card 4: Automate Workflows -->
<section id="card-automation"
class="group relative overflow-hidden rounded-3xl bg-white/[0.04] ring-1 ring-white/10 p-5 md:p-6">
<div
class="absolute inset-0 bg-gradient-to-br from-fuchsia-500/10 via-transparent to-transparent pointer-events-none">
</div>
<div class="absolute -left-24 -bottom-24 h-72 w-72 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
<div class="rounded-2xl bg-gradient-to-b from-white/5 to-white/[0.03] p-4 ring-1 ring-white/10 backdrop-blur">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-white/80 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="workflow" class="lucide lucide-workflow h-4 w-4 text-fuchsia-300">
<rect width="8" height="8" x="3" y="3" rx="2" class=""></rect>
<path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path>
<rect width="8" height="8" x="13" y="13" rx="2" class=""></rect>
</svg>
<span class="font-medium">Team Workspace</span>
</div>
<div class="flex items-center gap-1.5">
<button id="add-member" class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2 py-1 text-[11px] text-white/80 ring-1 ring-white/10 hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-plus" class="lucide lucide-user-plus h-3.5 w-3.5"><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><line x1="19" x2="19" y1="8" y2="14" class=""></line><line x1="22" x2="16" y1="11" y2="11" class=""></line></svg>
Add
</button>
</div>
</div>
<!-- Tabs mock -->
<div class="mt-3 flex items-center gap-2 text-xs">
<button class="rounded-full bg-white/10 px-2 py-1 text-white/90 ring-1 ring-white/10">Members</button>
<button class="rounded-full bg-transparent px-2 py-1 text-white/60 ring-1 ring-white/10">Tasks</button>
<button class="rounded-full bg-transparent px-2 py-1 text-white/60 ring-1 ring-white/10">Hub</button>
</div>
<div class="mt-3 space-y-2" id="member-list">
<div class="flex items-center justify-between rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=80&auto=format&fit=crop" class="h-7 w-7 rounded-full ring-1 ring-white/20" alt="member">
<div>
<p class="text-sm text-white/90">Ava Morgan</p>
<p class="text-[11px] text-white/50">Backend Developer</p>
</div>
</div>
<div class="flex items-center gap-2 text-[11px] text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5">
<path d="M12 6v6l4 2" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
Auto‑reminders
</div>
</div>
<div class="flex items-center justify-between rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=80&auto=format&fit=crop" class="h-7 w-7 rounded-full ring-1 ring-white/20" alt="member">
<div>
<p class="text-sm text-white/90">Ethan Reed</p>
<p class="text-[11px] text-white/50">Project Lead</p>
</div>
</div>
<div class="flex items-center gap-2 text-[11px] text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bell-ring" class="lucide lucide-bell-ring h-3.5 w-3.5">
<path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path>
<path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path>
<path
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
class=""></path>
<path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path>
</svg>
Follow‑ups
</div>
</div>
<div class="flex items-center justify-between rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=80&auto=format&fit=crop" class="h-7 w-7 rounded-full ring-1 ring-white/20" alt="member">
<div>
<p class="text-sm text-white/90">Zoe Park</p>
<p class="text-[11px] text-white/50">Sales Lead</p>
</div>
</div>
<div class="flex items-center gap-2 text-[11px] text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bar-chart" class="lucide lucide-bar-chart h-3.5 w-3.5">
<path d="M5 21v-6" class=""></path>
<path d="M12 21V9" class=""></path>
<path d="M19 21V3" class=""></path>
</svg>
Reporting
</div>
</div>
</div>
</div>
<h3 class="mt-5 text-xl md:text-2xl font-semibold tracking-tight">Automate Sales Workflows</h3>
<p class="mt-1.5 text-sm text-white/70">
Automate follow‑ups, reminders, and handoffs so your team can focus on building relationships and closing deals.
</p>
<!-- Scoped script for this card -->
<script type="module">
// Module: /cards/automation.js (scoped to #card-automation)
const root = document.querySelector('#card-automation');
const list = root.querySelector('#member-list');
const addBtn = root.querySelector('#add-member');
function addMember() {
const el = document.createElement('div');
el.className = "flex items-center justify-between rounded-xl bg-white/[0.04] p-3 ring-1 ring-white/10";
el.innerHTML = `
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=80&auto=format&fit=crop" class="h-7 w-7 rounded-full ring-1 ring-white/20" alt="member">
<div>
<p class="text-sm text-white/90">New Teammate</p>
<p class="text-[11px] text-white/50">Sales Ops</p>
</div>
</div>
<div class="flex items-center gap-2 text-[11px] text-white/60">
<i data-lucide="sparkles" class="h-3.5 w-3.5"></i>
Auto‑assigned
</div>
`;
list.prepend(el);
lucide.createIcons({ attrs: { 'stroke-width': 1.5 }, icons: lucide.icons });
// subtle entrance
el.animate([
{ transform: 'translateY(-8px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 }
], { duration: 220, easing: 'cubic-bezier(.2,.8,.2,1)' });
}
addBtn.addEventListener('click', addMember);
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
</script>
</section>
</div>
</section>