Загрузка...
Шаблон лендинга для аналитического дашборда Dayta. Идеален для SaaS, BI-сервисов и продуктовой аналитики. Современный дизайн, адаптивность.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blaze Analytics Hero</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<style>
body { font-family: 'Inter', sans-serif; }
/* Custom Clip Path */
.hero-clip {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
@media (min-width: 1024px) {
.hero-clip {
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 95%);
}
}
/* Background Animations */
.stripe-gradient {
background: linear-gradient(135deg, #022c22 0%, #064e3b 25%, #065f46 50%, #047857 75%, #022c22 100%);
background-size: 300% 300%;
animation: stripe-flow 20s ease infinite;
}
@keyframes stripe-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.diagonal-beam {
position: absolute;
width: 200%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.15) 0%, rgba(16, 185, 129, 0) 70%);
top: 0;
left: -50%;
transform: rotate(-35deg) translateY(0);
animation: beam-drift 15s infinite alternate ease-in-out;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes beam-drift {
0% { transform: rotate(-35deg) translateY(0) translateX(0); opacity: 0.5; }
100% { transform: rotate(-35deg) translateY(-10%) translateX(10%); opacity: 1; }
}
.floating-blob {
animation: float-blob 20s infinite linear;
}
@keyframes float-blob {
0% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -50px) rotate(120deg); }
66% { transform: translate(-20px, 20px) rotate(240deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
/* 3D Utilities */
.preserve-3d { transform-style: preserve-3d; }
.perspective-2000 { perspective: 2000px; }
/* Noodle & Beam Animations */
.noodle-path {
stroke-dasharray: 12, 12;
opacity: 0.2;
}
.beam-path {
stroke-dasharray: 100, 800; /* length of beam, length of gap */
stroke-dashoffset: 900;
animation: beam-flow 4s linear infinite;
filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.8));
}
.beam-path-fast {
stroke-dasharray: 80, 600;
stroke-dashoffset: 680;
animation: beam-flow 3s linear infinite;
filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.8));
}
@keyframes beam-flow {
to { stroke-dashoffset: 0; }
}
/* Scrollbar */
.mock-scroll::-webkit-scrollbar { width: 6px; }
.mock-scroll::-webkit-scrollbar-track { background: transparent; }
.mock-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* Bento Card Hover Effects */
.bento-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bento-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
border-color: rgba(16, 185, 129, 0.3);
}
.bento-icon-bg {
transition: background-color 0.3s ease, color 0.3s ease;
}
.bento-card:hover .bento-icon-bg {
background-color: #ecfdf5; /* emerald-50 */
color: #059669; /* emerald-600 */
}
/* Step Card Animations */
.step-line {
animation: step-dash 3s linear infinite;
}
@keyframes step-dash {
to { stroke-dashoffset: -24; }
}
/* Dotted Map Pattern */
.bg-dots {
background-image: radial-gradient(rgba(52, 211, 153, 0.2) 1px, transparent 1px);
background-size: 24px 24px;
}
/* Marquee Animation */
@keyframes marquee-ltr {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.animate-marquee {
animation: marquee-ltr 60s linear infinite;
}
/* Lock Pulse */
@keyframes lock-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.1); }
}
.lock-glow {
animation: lock-pulse 3s infinite;
}
/* Mobile Menu Animation */
.menu-open {
overflow: hidden;
}
</style>
<style>
/* 3D Transform utilities */
</style>
<script>
// Configure Tailwind to include our custom 3D transform utilities
tailwind.config = {
theme: {
extend: {
// Add any custom theme extensions here if needed
}
},
plugins: [
function({ addUtilities }) {
const rotateXUtilities = {};
const rotateYUtilities = {};
const rotateZUtilities = {};
const rotateValues = [0, 5, 10, 15, 20, 30, 45, 75];
// Generate rotate-x utilities
rotateValues.forEach((value) => {
rotateXUtilities[`.rotate-x-${value}`] = {
'--tw-rotate-x': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateXUtilities[`.-rotate-x-${value}`] = {
'--tw-rotate-x': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-y utilities
rotateValues.forEach((value) => {
rotateYUtilities[`.rotate-y-${value}`] = {
'--tw-rotate-y': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateYUtilities[`.-rotate-y-${value}`] = {
'--tw-rotate-y': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-z utilities
rotateValues.forEach((value) => {
rotateZUtilities[`.rotate-z-${value}`] = {
'--tw-rotate-z': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateZUtilities[`.-rotate-z-${value}`] = {
'--tw-rotate-z': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Perspective utilities
const perspectiveUtilities = {
".perspective-none": { perspective: "none" },
".perspective-dramatic": { perspective: "100px" },
".perspective-near": { perspective: "300px" },
".perspective-normal": { perspective: "500px" },
".perspective-midrange": { perspective: "800px" },
".perspective-distant": { perspective: "1200px" },
};
// Transform style utilities
const transformStyleUtilities = {
".transform-style-preserve-3d": { "transform-style": "preserve-3d" },
".transform-style-flat": { "transform-style": "flat" },
};
addUtilities({
...rotateXUtilities,
...rotateYUtilities,
...rotateZUtilities,
...perspectiveUtilities,
...transformStyleUtilities,
});
}
]
};
</script></head>
<body
class="bg-stone-50 text-slate-900 antialiased overflow-x-hidden selection:bg-emerald-500/30"
>
<!-- Header -->
<nav
class="z-50 px-4 lg:px-12 flex text-white/90 w-full pt-4 lg:pt-6 pb-6 absolute top-0 left-0 items-center justify-between"
>
<div class="flex items-center gap-2 relative z-50">
<div
class="flex shadow-emerald-500/20 text-white bg-emerald-950 w-8 h-8 rounded-lg shadow-sm items-center justify-center border border-white/10"
>
<iconify-icon icon="solar:database-bold" width="20"></iconify-icon>
</div>
<span
class="text-lg font-bold text-white tracking-normal"
onclick="window.location.href='/home'"
role="button"
>
Dayta
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden lg:flex items-center gap-8 text-sm font-medium">
<a
href="/about"
class="hover:text-emerald-200 transition-colors text-white/70"
>
About
</a>
<a
href="/product"
class="hover:text-emerald-200 transition-colors text-white/70"
>
Product
</a>
<a
href="/pricing"
class="hover:text-emerald-200 transition-colors text-white/70"
>
Pricing
</a>
</div>
<!-- Desktop CTA -->
<div class="hidden lg:flex items-center gap-4">
<a
href="#"
class="text-sm font-medium hover:text-emerald-200 text-white/70"
>
Sign in
</a>
<button
class="bg-white text-emerald-950 px-4 py-2 rounded-full text-sm font-semibold transition-all hover:bg-gray-100 flex items-center gap-1.5 group"
>
Get Started
<iconify-icon
icon="lucide:arrow-right"
width="16"
class="group-hover:translate-x-0.5 transition-transform"
></iconify-icon>
</button>
</div>
<!-- Mobile Hamburger (Top Right) -->
<button
id="mobile-menu-btn"
class="lg:hidden flex items-center justify-center text-white/90 hover:text-white p-2 transition-colors relative z-50"
>
<iconify-icon
icon="lucide:menu"
width="24"
stroke-width="1.5"
></iconify-icon>
</button>
<!-- New Mobile Menu Overlay -->
<div
id="mobile-menu"
class="hidden fixed inset-0 z-[60] bg-stone-50 flex flex-col h-[100dvh] w-screen"
>
<!-- Top Handle -->
<div
class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-stone-200 rounded-full"
></div>
<!-- Mobile Header (Inside Overlay) -->
<div class="flex items-center justify-between px-6 pt-6 pb-2">
<!-- Dark Logo for Light Mode -->
<div class="flex items-center gap-2">
<div
class="flex text-white bg-emerald-950 w-8 h-8 rounded-lg items-center justify-center shadow-sm"
>
<iconify-icon icon="solar:database-bold" width="20"></iconify-icon>
</div>
<span class="text-lg font-bold text-slate-900 tracking-normal">
Dayta
</span>
</div>
<!-- Close Button -->
<button
id="close-menu-btn"
class="flex items-center justify-center text-slate-400 hover:text-slate-900 p-2 transition-colors rounded-full hover:bg-slate-100"
>
<iconify-icon
icon="lucide:x"
width="28"
stroke-width="1.5"
></iconify-icon>
</button>
</div>
<!-- Navigation Links -->
<div class="flex-1 flex flex-col justify-center px-6 gap-6 sm:gap-8">
<a
href="/home"
class="text-5xl font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition-colors"
>
Home
</a>
<a
href="/about"
class="text-5xl font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition-colors"
>
About
</a>
<a
href="/product"
class="text-5xl font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition-colors"
>
Product
</a>
<a
href="/pricing"
class="text-5xl font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition-colors"
>
Pricing
</a>
</div>
<!-- Footer Actions -->
<div class="p-6 pb-10 flex flex-col gap-4">
<button
class="w-full py-4 rounded-full border border-slate-200 text-slate-900 font-semibold text-lg hover:bg-slate-100 transition-colors"
>
Sign in
</button>
<button
class="w-full py-4 rounded-full bg-slate-900 text-white font-semibold text-lg flex items-center justify-center gap-2 hover:bg-emerald-600 transition-colors shadow-lg shadow-slate-900/10"
>
Get Started
<iconify-icon icon="lucide:arrow-right" width="20"></iconify-icon>
</button>
</div>
</div>
</nav>
<!-- Main Hero Section -->
<main class="w-full relative">
<!-- Animated Background Area -->
<div
class="absolute top-0 left-0 w-full h-[100vh] md:h-[110vh] lg:h-[135vh] bg-[#022c22] hero-clip -z-10 overflow-hidden"
>
<div
class="absolute inset-0 w-full h-full stripe-gradient opacity-80"
></div>
<div class="diagonal-beam blur-3xl"></div>
<div
class="diagonal-beam blur-[80px]"
style="animation-delay: -5s; opacity: 0.6; transform: rotate(-35deg) translateY(20%);"
></div>
<div
class="absolute top-0 left-[20%] w-[500px] h-[500px] bg-emerald-500/20 rounded-full blur-[100px] mix-blend-screen floating-blob"
></div>
<div
class="absolute bottom-[20%] right-[-10%] w-[600px] h-[600px] bg-teal-600/20 rounded-full blur-[120px] mix-blend-overlay"
style="animation-direction: reverse;"
></div>
<div
class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay"
></div>
<div
class="absolute bottom-0 w-full h-40 bg-gradient-to-t from-[#022c22] to-transparent opacity-80"
></div>
</div>
<!-- Container -->
<div
class="container lg:px-12 lg:pt-48 mr-auto ml-auto pt-24 pr-4 pb-20 pl-4 relative"
>
<!-- Vertical Guide Lines (Hidden on Mobile) -->
<div
class="absolute inset-0 pointer-events-none hidden md:flex justify-between px-6 lg:px-12 max-w-7xl mx-auto opacity-10"
>
<div class="w-px h-full bg-white"></div>
<div class="w-px h-full bg-white hidden md:block"></div>
<div class="w-px h-full bg-white hidden lg:block"></div>
<div class="w-px h-full bg-white"></div>
</div>
<!-- Noodles (Connecting Lines) SVG Layer - Hidden on Mobile to simplify -->
<div
class="absolute inset-0 pointer-events-none hidden lg:block z-0 overflow-visible"
>
<svg
class="w-full h-full overflow-visible"
viewBox="0 0 1200 800"
preserveAspectRatio="none"
>
<defs>
<linearGradient
id="beam-gradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop offset="0%" stop-color="#34d399" stop-opacity="0"></stop>
<stop offset="50%" stop-color="#34d399" stop-opacity="1"></stop>
<stop
offset="100%"
stop-color="#34d399"
stop-opacity="0"
></stop>
</linearGradient>
</defs>
<path
d="M 380 550 C 500 550, 600 300, 750 320"
fill="none"
stroke="rgba(255,255,255,0.1)"
stroke-width="1.5"
></path>
<path
d="M 380 550 C 500 550, 600 300, 750 320"
fill="none"
stroke="#34d399"
stroke-width="2"
class="beam-path"
stroke-linecap="round"
></path>
<path
d="M 450 550 C 550 550, 600 500, 700 520"
fill="none"
stroke="rgba(255,255,255,0.1)"
stroke-width="1.5"
></path>
<path
d="M 450 550 C 550 550, 600 500, 700 520"
fill="none"
stroke="#10b981"
stroke-width="2"
class="beam-path-fast"
stroke-linecap="round"
></path>
<path
d="M 520 550 C 600 550, 650 450, 750 450"
fill="none"
stroke="rgba(255,255,255,0.1)"
stroke-width="1.5"
></path>
<path
d="M 520 550 C 600 550, 650 450, 750 450"
fill="none"
stroke="#6ee7b7"
stroke-width="2"
class="beam-path"
style="animation-delay: 1s;"
stroke-linecap="round"
></path>
</svg>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-12 gap-x-12 gap-y-8 items-center relative z-10"
>
<!-- Left Content -->
<div
class="lg:col-span-5 flex flex-col h-full relative justify-center text-center lg:text-left pt-6 lg:pt-0"
>
<div
class="absolute -left-4 top-0 text-white/10 text-xs font-mono hidden lg:block"
>
01
</div>
<h1
class="leading-[1.1] text-4xl sm:text-5xl lg:text-7xl lg:-translate-y-16 font-semibold text-white tracking-tight mb-4 lg:mb-6 relative"
>
Intelligent data to grow your revenue
</h1>
<p
class="leading-relaxed text-base sm:text-lg lg:text-xl font-light text-emerald-50 max-w-lg lg:max-w-lg mx-auto lg:mx-0 mb-8 lg:mb-10 lg:-translate-y-16"
>
Stop guessing. Start growing. Dayta unifies your sales metrics
into a single source of truth, empowering teams to make decisions
faster.
</p>
<!-- DESKTOP FORM (Email Enter) - Hidden on Phone -->
<div
class="hidden sm:flex flex-col sm:flex-row sm:items-center lg:justify-start lg:-translate-y-16 w-full translate-x-12 gap-x-4 gap-y-4 items-center justify-center"
>
<form
class="flex shadow-emerald-900/20 focus-within:ring-2 focus-within:ring-emerald-400/30 transition-all lg:scale-75 lg:origin-left lg:-translate-x-12 bg-green-50 w-full max-w-sm border-slate-100/10 border rounded-full pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow scale-100 items-center"
style="mask-image: linear-gradient(0deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(0deg, transparent, black 0%, black 100%, transparent);"
>
<input
type="email"
placeholder="Email address"
class="flex-1 border-none outline-none placeholder:text-slate-500 min-w-0 text-base font-medium text-slate-700 bg-transparent pt-3 pr-2 pb-3 pl-5"
required=""
/>
<button
type="submit"
class="shrink-0 hover:bg-slate-800 transition-colors flex group text-base font-bold text-white bg-slate-900 rounded-full pt-3 pr-6 pb-3 pl-6 gap-x-1.5 gap-y-1.5 items-center"
>
Start now
<iconify-icon
icon="lucide:chevron-right"
class=""
width="16"
></iconify-icon>
</button>
</form>
</div>
<!-- MOBILE BUTTONS - Only on Phone -->
<div
class="flex sm:hidden items-center justify-center gap-4 w-full mb-4"
>
<button
class="bg-white text-emerald-950 px-6 py-3.5 rounded-full text-base font-bold shadow-lg hover:bg-gray-50 transition-colors w-full flex items-center justify-center"
>
Start now
</button>
<button
class="bg-transparent text-white px-6 py-3.5 rounded-full text-base font-semibold border border-transparent hover:bg-white/5 transition-colors flex items-center justify-center gap-2 whitespace-nowrap"
>
Contact Sales
<iconify-icon
icon="lucide:arrow-right"
width="16"
stroke-width="2"
></iconify-icon>
</button>
</div>
<div class="border-white/10 border-t mt-12 lg:mt-16 pt-8 relative">
<div
class="flex flex-wrap justify-center lg:justify-start hover:grayscale-0 transition-all duration-500 opacity-60 grayscale gap-x-12 lg:gap-x-16 gap-y-8 items-center"
>
<div class="relative group">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 24 24"
class="text-white relative z-10 lg:w-[56px] lg:h-[56px]"
>
<path
fill="currentColor"
d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z"
></path>
</svg>
</div>
<div class="relative group">
<iconify-icon
icon="simple-icons:vercel"
width="60"
class="text-white relative z-10 lg:w-[72px]"
></iconify-icon>
</div>
<div class="relative group">
<iconify-icon
icon="simple-icons:linear"
width="50"
class="text-white relative z-10 lg:w-[64px]"
></iconify-icon>
</div>
</div>
</div>
</div>
<!-- Right Visuals (Scale Wrapper for Mobile) - HIDDEN ON PHONE -->
<div
class="hidden lg:flex lg:col-span-7 relative perspective-2000 z-10 mt-2 lg:mt-0 items-center justify-center h-[300px] sm:h-[450px] lg:h-[700px]"
>
<!-- Wrapper to scale the large assets down for mobile -->
<div
class="scale-[0.45] sm:scale-[0.65] md:scale-[0.8] lg:scale-100 w-full h-full relative flex items-center justify-center origin-top lg:origin-center"
>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-emerald-500/20 blur-[90px] -z-10 rounded-full pointer-events-none"
></div>
<div
class="transform transition-all duration-700 lg:rotate-y-[-10deg] lg:rotate-x-[6deg] lg:-rotate-z-[3deg] preserve-3d origin-center w-full h-full relative items-start flex justify-center"
>
<!-- BROWSER -->
<div
class="absolute top-[25%] lg:right-[-40px] shadow-2xl overflow-hidden translate-z-[-50px] bg-white w-[700px] h-[500px] z-10 border-white/40 border rounded-xl ring-black/5 ring-1 -translate-y-[45%] lg:translate-x-16"
>
<div
class="flex bg-slate-50/50 h-11 border-slate-100 border-b pr-4 pl-4 backdrop-blur-sm gap-x-2 gap-y-2 items-center justify-between"
>
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-rose-400/80"></div>
<div class="w-3 h-3 rounded-full bg-amber-400/80"></div>
<div class="w-3 h-3 rounded-full bg-emerald-400/80"></div>
</div>
<div
class="w-1/2 h-6 bg-white border border-slate-200/50 rounded flex items-center px-3 text-[10px] text-slate-400"
>
dayta.io/dashboard/revenue
</div>
</div>
<div class="flex h-full bg-white">
<div
class="flex flex-col bg-slate-50/30 w-16 border-slate-100 border-r pt-6 pb-6 gap-x-6 gap-y-6 items-center"
>
<div
class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="solar:pie-chart-2-bold"
width="18"
class=""
></iconify-icon>
</div>
<div class="flex flex-col gap-4">
<div
class="p-2 text-slate-400 hover:text-slate-900 rounded-md"
>
<iconify-icon
icon="solar:home-2-linear"
width="20"
class=""
></iconify-icon>
</div>
<div
class="p-2 text-slate-900 bg-white shadow-sm border border-slate-100 rounded-md"
>
<iconify-icon
icon="solar:graph-up-linear"
width="20"
class=""
></iconify-icon>
</div>
<div
class="p-2 text-slate-400 hover:text-slate-900 rounded-md"
>
<iconify-icon
icon="solar:users-group-rounded-linear"
width="20"
class=""
></iconify-icon>
</div>
</div>
</div>
<div
class="flex-1 flex flex-col pt-6 pr-6 pb-6 pl-6 scale-100"
>
<div class="flex justify-between items-center mb-8">
<div class="">
<div
class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1"
>
Total Revenue
</div>
<div
class="text-3xl font-bold text-slate-900 tracking-tight"
>
$842,300.00
</div>
</div>
<div class="flex gap-2">
<div
class="px-3 py-1.5 rounded-md border border-slate-200 text-xs font-medium bg-white"
>
Export
</div>
<div
class="px-3 py-1.5 rounded-md bg-slate-900 text-white text-xs font-medium"
>
Add Widget
</div>
</div>
</div>
<div class="relative w-full h-48 mb-6">
<div
class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-50"
>
<div
class="w-full h-px border-t border-dashed border-slate-200"
></div>
<div
class="w-full h-px border-t border-dashed border-slate-200"
></div>
<div
class="w-full h-px border-t border-dashed border-slate-200"
></div>
<div
class="w-full h-px border-t border-dashed border-slate-200"
></div>
</div>
<svg
class="overflow-visible w-[586px] h-[192px]"
preserveAspectRatio="none"
viewBox="0 0 600 200"
stroke-width="2"
data-icon-replaced="true"
style="color: rgb(15, 23, 42); width: 586px; height: 192px;"
>
<defs>
<linearGradient
id="chartGradient"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="0%"
stop-color="#10b981"
stop-opacity="0.1"
></stop>
<stop
offset="100%"
stop-color="#10b981"
stop-opacity="0"
></stop>
</linearGradient>
</defs>
<path
d="M0,150 C50,140 100,80 150,90 C200,100 250,50 300,60 C350,70 400,20 450,40 C500,60 550,10 600,30 V200 H0 Z"
fill="url(#chartGradient)"
class=""
></path>
<path
d="M0,150 C50,140 100,80 150,90 C200,100 250,50 300,60 C350,70 400,20 450,40 C500,60 550,10 600,30"
fill="none"
stroke="#10b981"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class=""
></path>
<circle
cx="300"
cy="60"
r="4"
class="fill-white stroke-emerald-500 stroke-2"
></circle>
<circle
cx="450"
cy="40"
r="4"
class="fill-white stroke-emerald-500 stroke-2"
></circle>
</svg>
</div>
<div class="grid grid-cols-3 gap-4">
<div
class="p-4 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div class="text-xs text-slate-500 mb-1">
Customers
</div>
<div class="text-lg font-bold text-slate-900">
2,504
</div>
</div>
<div
class="p-4 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div class="text-xs text-slate-500 mb-1">Churn</div>
<div class="text-lg font-bold text-slate-900">
1.2%
</div>
</div>
<div
class="p-4 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div class="text-xs text-slate-500 mb-1">Growth</div>
<div class="text-lg font-bold text-emerald-600">
+18%
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PHONE -->
<div
class="absolute top-[25%] left-[-20px] lg:left-6 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.5)] border-[8px] flex flex-col overflow-hidden -translate-x-16 -translate-y-1/2 z-30 bg-stone-900 w-[300px] h-[600px] border-stone-900 ring-white/10 ring-1 rounded-[48px] scale-75"
>
<div
class="flex w-full h-8 z-50 absolute top-2 left-0 justify-center"
>
<div
class="w-[90px] h-[24px] bg-black rounded-full flex items-center justify-center relative"
>
<div
class="w-16 h-full bg-gray-900/50 rounded-full blur-[1px]"
></div>
</div>
</div>
<div
class="flex-1 bg-white w-full h-full rounded-[40px] overflow-hidden flex flex-col relative"
>
<div
class="flex justify-between px-6 pt-3 text-[10px] font-bold text-slate-900"
>
<span>9:41</span>
<div class="flex gap-1">
<iconify-icon
icon="lucide:signal"
width="10"
></iconify-icon>
<iconify-icon
icon="lucide:wifi"
width="10"
></iconify-icon>
<iconify-icon
icon="lucide:battery-medium"
width="14"
></iconify-icon>
</div>
</div>
<div
class="px-6 pt-6 pb-2 flex justify-between items-center"
>
<div class="flex items-center gap-2">
<div
class="w-8 h-8 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="solar:pie-chart-2-bold"
width="16"
class=""
></iconify-icon>
</div>
<span class="font-bold text-slate-900">Dayta</span>
</div>
<div
class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"
>
<iconify-icon
icon="lucide:bell"
width="14"
class="text-slate-600"
></iconify-icon>
</div>
</div>
<div
class="flex flex-col pt-4 pr-6 pb-4 pl-6 gap-x-6 gap-y-6"
>
<div
class="shadow-slate-900/20 text-white bg-slate-900 rounded-2xl pt-5 pr-5 pb-5 pl-5 shadow-lg"
>
<div class="flex justify-between items-start mb-4">
<span class="text-xs font-medium text-slate-400">
Current Balance
</span>
<span
class="bg-emerald-500/20 text-emerald-400 text-[10px] px-2 py-0.5 rounded-full font-bold"
>
+2.4%
</span>
</div>
<div class="text-3xl font-bold tracking-tight mb-4">
$24,500
</div>
<div class="h-12 w-full">
<svg
viewBox="0 0 200 60"
class="w-full h-full overflow-visible"
>
<path
d="M0,40 C40,40 60,20 100,25 C140,30 160,10 200,15"
fill="none"
stroke="#34d399"
stroke-width="2"
stroke-linecap="round"
class=""
></path>
</svg>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-between items-center">
<span class="text-sm font-bold text-slate-900">
Recent Transactions
</span>
<span class="text-xs text-emerald-600 font-medium">
See all
</span>
</div>
<div
class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div
class="w-10 h-10 rounded-full bg-white border border-slate-100 flex items-center justify-center text-lg"
>
🛍️
</div>
<div class="flex-1">
<div class="text-xs font-bold text-slate-900">
Shopify Store
</div>
<div class="text-[10px] text-slate-500">
Today, 2:40 PM
</div>
</div>
<div class="text-xs font-bold text-emerald-600">
+$124.00
</div>
</div>
<div
class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div
class="w-10 h-10 rounded-full bg-white border border-slate-100 flex items-center justify-center text-lg"
>
👤
</div>
<div class="flex-1">
<div class="text-xs font-bold text-slate-900">
New Subscriber
</div>
<div class="text-[10px] text-slate-500">
Today, 11:20 AM
</div>
</div>
<div class="text-xs font-bold text-emerald-600">
+$49.00
</div>
</div>
<div
class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 bg-slate-50/50"
>
<div
class="w-10 h-10 rounded-full bg-white border border-slate-100 flex items-center justify-center text-lg"
>
💳
</div>
<div class="flex-1">
<div class="text-xs font-bold text-slate-900">
Payout Processed
</div>
<div class="text-[10px] text-slate-500">
Yesterday
</div>
</div>
<div class="text-xs font-bold text-slate-900">
-$2,100
</div>
</div>
</div>
</div>
<div
class="mt-auto border-t border-slate-100 pt-3 pb-6 flex justify-around text-slate-400 bg-white"
>
<div
class="flex flex-col items-center gap-1 text-slate-900"
>
<iconify-icon
icon="solar:home-2-bold"
width="20"
></iconify-icon>
<span class="text-[9px] font-semibold">Home</span>
</div>
<div
class="flex flex-col items-center gap-1 hover:text-emerald-600 transition-colors"
>
<iconify-icon
icon="solar:chart-2-linear"
width="20"
></iconify-icon>
<span class="text-[9px] font-medium">Stats</span>
</div>
<div
class="flex flex-col items-center gap-1 hover:text-emerald-600 transition-colors"
>
<iconify-icon
icon="solar:wallet-linear"
width="20"
></iconify-icon>
<span class="text-[9px] font-medium">Wallet</span>
</div>
<div
class="flex flex-col items-center gap-1 hover:text-emerald-600 transition-colors"
>
<iconify-icon
icon="solar:settings-linear"
width="20"
></iconify-icon>
<span class="text-[9px] font-medium">Settings</span>
</div>
</div>
<div
class="absolute bottom-2 left-1/2 -translate-x-1/2 w-24 h-1 bg-slate-900/10 rounded-full"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 1: Problem / Promise -->
<section
class="py-16 lg:py-24 bg-white relative border-t border-slate-100"
>
<div class="container mx-auto px-4 lg:px-12 max-w-7xl">
<div class="mb-12 lg:mb-20 max-w-3xl">
<h2
class="text-3xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-slate-900 mb-6"
>
Data everywhere.
<br class="hidden md:block" />
<span class="text-slate-400">Clarity nowhere.</span>
</h2>
<p
class="text-base md:text-xl text-slate-500 font-light leading-relaxed"
>
Teams drown in dashboards, spreadsheets, and disconnected tools —
yet still don’t know what’s really driving growth.
</p>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center"
>
<!-- Left: Pain -->
<div class="flex flex-col gap-8">
<h3
class="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1"
>
The Struggle
</h3>
<ul class="flex flex-col gap-6">
<li class="flex gap-4 items-start group">
<div
class="w-6 h-6 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100 group-hover:bg-rose-100 transition-colors"
>
<iconify-icon
icon="lucide:x"
width="14"
stroke-width="2"
></iconify-icon>
</div>
<span
class="text-base lg:text-lg text-slate-600 font-medium group-hover:text-slate-900 transition-colors"
>
Revenue data lives in 5 different tools
</span>
</li>
<li class="flex gap-4 items-start group">
<div
class="w-6 h-6 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100 group-hover:bg-rose-100 transition-colors"
>
<iconify-icon
icon="lucide:x"
width="14"
stroke-width="2"
></iconify-icon>
</div>
<span
class="text-base lg:text-lg text-slate-600 font-medium group-hover:text-slate-900 transition-colors"
>
Product metrics don’t connect to customer behavior
</span>
</li>
<li class="flex gap-4 items-start group">
<div
class="w-6 h-6 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100 group-hover:bg-rose-100 transition-colors"
>
<iconify-icon
icon="lucide:x"
width="14"
stroke-width="2"
></iconify-icon>
</div>
<span
class="text-base lg:text-lg text-slate-600 font-medium group-hover:text-slate-900 transition-colors"
>
Reports are slow, manual, and always outdated
</span>
</li>
<li class="flex gap-4 items-start group">
<div
class="w-6 h-6 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100 group-hover:bg-rose-100 transition-colors"
>
<iconify-icon
icon="lucide:x"
width="14"
stroke-width="2"
></iconify-icon>
</div>
<span
class="text-base lg:text-lg text-slate-600 font-medium group-hover:text-slate-900 transition-colors"
>
Leaders make decisions on partial information
</span>
</li>
</ul>
</div>
<!-- Right: Promise (How Dayta fixes it) -->
<div class="relative group">
<div
class="absolute inset-0 bg-emerald-500/5 blur-3xl rounded-full opacity-50 -z-10 transform group-hover:scale-105 transition-transform duration-700"
></div>
<div
class="bg-slate-50 border border-slate-200 rounded-3xl p-6 lg:p-12 relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-emerald-500/30"
>
<div class="absolute top-0 right-0 p-8 opacity-5">
<iconify-icon
icon="solar:stars-bold-duotone"
width="160"
class="text-emerald-900"
></iconify-icon>
</div>
<div class="relative z-10">
<h3
class="text-xs font-bold text-emerald-600 uppercase tracking-widest mb-6 flex items-center gap-2"
>
<span
class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"
></span>
The Dayta Way
</h3>
<p
class="text-xl md:text-3xl font-medium text-slate-900 leading-snug tracking-tight"
>
Dayta unifies your business data into one
<span class="text-emerald-600">
real-time intelligence layer
</span>
— so every team sees what actually matters.
</p>
<div class="mt-8 lg:mt-10 flex items-center gap-4">
<div class="flex -space-x-3">
<div
class="w-10 h-10 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center overflow-hidden"
>
<iconify-icon
icon="solar:user-bold"
class="text-slate-400 mt-1"
width="24"
></iconify-icon>
</div>
<div
class="w-10 h-10 rounded-full border-2 border-white bg-slate-300 flex items-center justify-center overflow-hidden"
>
<iconify-icon
icon="solar:user-bold"
class="text-slate-500 mt-1"
width="24"
></iconify-icon>
</div>
<div
class="w-10 h-10 rounded-full border-2 border-white bg-emerald-100 flex items-center justify-center text-emerald-600 text-xs font-bold"
>
+5
</div>
</div>
<div class="text-sm text-slate-500 font-medium">
Aligned and moving faster
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Features Grid -->
<section
class="py-16 lg:py-24 bg-white border-t border-slate-100 relative"
>
<div class="container mx-auto px-4 lg:px-12 max-w-7xl">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-20">
<h2
class="text-3xl lg:text-5xl font-semibold tracking-tight text-slate-900 mb-6"
>
One platform.
<br />
<span class="text-emerald-600">Every signal that matters.</span>
</h2>
<p class="text-base lg:text-lg text-slate-500 font-light">
The intelligence engine your team needs to understand customers
and drive revenue.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div
class="bento-card group p-6 rounded-2xl bg-white border border-slate-200/60 shadow-sm relative overflow-hidden flex flex-col h-full"
>
<div
class="bento-icon-bg w-12 h-12 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center mb-6"
>
<iconify-icon
icon="lucide:activity"
width="24"
stroke-width="1.5"
></iconify-icon>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">
Real-Time Analytics
</h3>
<p class="text-sm text-slate-500 leading-relaxed font-light">
Live dashboards that show revenue, users, churn, and growth as
it happens.
</p>
</div>
<!-- Card 2 -->
<div
class="bento-card group p-6 rounded-2xl bg-white border border-slate-200/60 shadow-sm relative overflow-hidden flex flex-col h-full"
>
<div
class="bento-icon-bg w-12 h-12 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center mb-6"
>
<iconify-icon
icon="lucide:brain-circuit"
width="24"
stroke-width="1.5"
></iconify-icon>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">
Customer Intelligence
</h3>
<p class="text-sm text-slate-500 leading-relaxed font-light">
See how users behave, convert, and retain — not just what they
click.
</p>
</div>
<!-- Card 3 -->
<div
class="bento-card group p-6 rounded-2xl bg-white border border-slate-200/60 shadow-sm relative overflow-hidden flex flex-col h-full"
>
<div
class="bento-icon-bg w-12 h-12 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center mb-6"
>
<iconify-icon
icon="lucide:banknote"
width="24"
stroke-width="1.5"
></iconify-icon>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">
Revenue Tracking
</h3>
<p class="text-sm text-slate-500 leading-relaxed font-light">
Connect subscriptions, upgrades, and payments to real product
usage.
</p>
</div>
<!-- Card 4 -->
<div
class="bento-card group p-6 rounded-2xl bg-white border border-slate-200/60 shadow-sm relative overflow-hidden flex flex-col h-full"
>
<div
class="bento-icon-bg w-12 h-12 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center mb-6"
>
<iconify-icon
icon="lucide:zap"
width="24"
stroke-width="1.5"
></iconify-icon>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">
Automated Insights
</h3>
<p class="text-sm text-slate-500 leading-relaxed font-light">
Dayta surfaces anomalies, trends, and opportunities without
manual reports.
</p>
</div>
</div>
</div>
</section>
<!-- Section 3: How It Works -->
<section
class="py-16 lg:py-24 bg-[#f2fcfd] border-t border-slate-200 relative overflow-hidden"
>
<!-- Decoration -->
<div
class="absolute top-0 right-0 w-[600px] h-[600px] bg-cyan-200/20 blur-[100px] rounded-full mix-blend-multiply pointer-events-none"
></div>
<div class="container mx-auto px-4 lg:px-12 max-w-7xl relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16 lg:mb-20">
<h2
class="text-3xl md:text-5xl font-semibold tracking-tight text-slate-900 mb-6"
>
From raw data to decisions in minutes
</h2>
<p class="text-lg text-slate-500 font-light max-w-xl mx-auto">
Turn the chaos of disconnected tools into a streamlined
intelligence engine.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4 lg:gap-8">
<!-- Step 1: Connect -->
<div class="flex flex-col gap-6">
<div
class="relative bg-white border border-slate-200 rounded-2xl p-2 h-56 lg:h-64 flex items-center justify-center shadow-sm overflow-hidden group"
>
<!-- Connecting Lines (Visual for Desktop) -->
<div
class="absolute inset-0 flex items-center justify-center opacity-20 hidden md:flex"
>
<div
class="w-[200px] h-[200px] border border-dashed border-cyan-400 rounded-full animate-spin-slow"
style="animation-duration: 20s"
></div>
</div>
<!-- Integration Icons -->
<div
class="absolute top-12 left-1/2 -translate-x-1/2 -translate-y-12 bg-white p-2 rounded-lg shadow-sm border border-slate-100"
>
<iconify-icon icon="logos:stripe" width="24"></iconify-icon>
</div>
<div
class="absolute bottom-12 left-8 lg:left-12 bg-white p-2 rounded-lg shadow-sm border border-slate-100"
>
<iconify-icon
icon="logos:postgresql"
width="24"
></iconify-icon>
</div>
<div
class="absolute bottom-12 right-8 lg:right-12 bg-white p-2 rounded-lg shadow-sm border border-slate-100"
>
<iconify-icon icon="logos:hubspot" width="24"></iconify-icon>
</div>
<!-- Central Hub -->
<div
class="relative z-10 w-16 h-16 bg-gradient-to-br from-emerald-500 to-cyan-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-cyan-500/20"
>
<iconify-icon
icon="solar:database-bold"
width="32"
></iconify-icon>
</div>
</div>
<div class="px-2">
<div class="flex items-center gap-3 mb-3">
<div
class="w-6 h-6 rounded-full bg-cyan-100 text-cyan-700 text-xs font-bold flex items-center justify-center"
>
1
</div>
<h3 class="text-xl font-semibold text-slate-900">Connect</h3>
</div>
<p class="text-slate-500 leading-relaxed font-light text-sm">
Plug in Stripe, your product, marketing tools, and databases
in minutes.
</p>
</div>
</div>
<!-- Step 2: Unify -->
<div class="flex flex-col gap-6">
<div
class="relative bg-white border border-slate-200 rounded-2xl p-6 h-56 lg:h-64 flex items-center justify-center shadow-sm overflow-hidden group"
>
<div
class="flex items-center gap-4 w-full justify-center scale-90 lg:scale-100"
>
<!-- Messy Data (Left) -->
<div class="flex flex-col gap-2 opacity-50 scale-90">
<div class="w-16 h-2 bg-slate-200 rounded-full"></div>
<div class="w-12 h-2 bg-rose-200 rounded-full"></div>
<div class="w-20 h-2 bg-slate-200 rounded-full"></div>
<div class="w-10 h-2 bg-amber-200 rounded-full"></div>
</div>
<!-- Processing Arrow -->
<div class="text-cyan-500 flex items-center relative">
<div
class="absolute inset-0 bg-cyan-100 blur-xl opacity-50"
></div>
<iconify-icon
icon="lucide:arrow-right"
width="24"
class="relative z-10 animate-pulse"
></iconify-icon>
</div>
<!-- Clean Data (Right) -->
<div
class="bg-slate-50 border border-slate-100 rounded-lg p-3 w-32 shadow-sm flex flex-col gap-2"
>
<div
class="flex gap-2 items-center border-b border-slate-100 pb-2"
>
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
<div class="w-16 h-1.5 bg-slate-300 rounded-full"></div>
</div>
<div class="flex gap-2 items-center">
<div class="w-2 h-2 rounded-full bg-slate-200"></div>
<div class="w-20 h-1.5 bg-slate-200 rounded-full"></div>
</div>
<div class="flex gap-2 items-center">
<div class="w-2 h-2 rounded-full bg-slate-200"></div>
<div class="w-14 h-1.5 bg-slate-200 rounded-full"></div>
</div>
</div>
</div>
</div>
<div class="px-2">
<div class="flex items-center gap-3 mb-3">
<div
class="w-6 h-6 rounded-full bg-cyan-100 text-cyan-700 text-xs font-bold flex items-center justify-center"
>
2
</div>
<h3 class="text-xl font-semibold text-slate-900">Unify</h3>
</div>
<p class="text-slate-500 leading-relaxed font-light text-sm">
Dayta cleans, aligns, and maps all your data into one model.
</p>
</div>
</div>
<!-- Step 3: Understand -->
<div class="flex flex-col gap-6">
<div
class="relative bg-white border border-slate-200 rounded-2xl h-56 lg:h-64 flex items-center justify-center shadow-sm overflow-hidden group"
>
<!-- Chart Mini-UI -->
<div
class="w-48 bg-white border border-slate-100 rounded-xl shadow-lg p-4 relative top-4 transition-transform group-hover:-translate-y-2 duration-500"
>
<div class="flex justify-between items-center mb-4">
<div class="h-2 w-16 bg-slate-200 rounded-full"></div>
<div class="h-4 w-4 text-emerald-500">
<iconify-icon icon="lucide:trending-up"></iconify-icon>
</div>
</div>
<!-- Chart Path -->
<svg
viewBox="0 0 100 40"
class="w-full h-12 overflow-visible"
>
<path
d="M0,35 C20,35 20,10 40,15 C60,20 60,5 100,0"
fill="none"
stroke="#06b6d4"
stroke-width="2"
stroke-linecap="round"
></path>
<circle
cx="100"
cy="0"
r="3"
class="fill-white stroke-cyan-500 stroke-2"
></circle>
</svg>
<!-- Floating Alert -->
<div
class="absolute -top-6 -right-8 bg-slate-900 text-white text-[10px] px-3 py-1.5 rounded-full shadow-lg flex items-center gap-1.5 animate-bounce"
style="animation-duration: 3s;"
>
<div class="w-1.5 h-1.5 bg-emerald-400 rounded-full"></div>
Revenue up 12%
</div>
</div>
</div>
<div class="px-2">
<div class="flex items-center gap-3 mb-3">
<div
class="w-6 h-6 rounded-full bg-cyan-100 text-cyan-700 text-xs font-bold flex items-center justify-center"
>
3
</div>
<h3 class="text-xl font-semibold text-slate-900">
Understand
</h3>
</div>
<p class="text-slate-500 leading-relaxed font-light text-sm">
Dashboards, alerts, and AI-powered insights show you what’s
happening — and why.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Why Dayta Wins (Comparison) -->
<section
class="py-16 lg:py-24 bg-white relative border-t border-slate-100"
>
<div class="container mx-auto px-4 lg:px-12 max-w-5xl">
<div class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
<h2
class="text-3xl lg:text-5xl font-semibold tracking-tight text-slate-900 mb-6"
>
Built for modern data-driven teams
</h2>
<p class="text-base lg:text-lg text-slate-500 font-light">
Move faster with a platform designed for action, not just
observation.
</p>
</div>
<div
class="rounded-3xl border border-slate-200 overflow-hidden bg-slate-50 shadow-sm text-xs sm:text-sm"
>
<!-- Header -->
<div
class="grid grid-cols-2 font-semibold tracking-wide border-b border-slate-200"
>
<div
class="p-4 lg:p-6 bg-white flex items-center justify-center md:justify-start gap-3 border-r border-slate-100 relative"
>
<!-- Top glow -->
<div
class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 to-emerald-600"
></div>
<div
class="flex shadow-emerald-500/20 text-white bg-emerald-950 w-6 h-6 rounded-md shadow-sm items-center justify-center"
>
<iconify-icon
icon="solar:database-bold"
width="14"
></iconify-icon>
</div>
<span class="text-slate-900 text-base lg:text-lg">Dayta</span>
</div>
<div
class="p-4 lg:p-6 bg-slate-50 flex items-center justify-center md:justify-start text-slate-400"
>
<span class="text-sm lg:text-lg">Traditional BI</span>
</div>
</div>
<!-- Row 1 -->
<div class="grid grid-cols-2 border-b border-slate-100 group">
<div
class="p-4 lg:p-6 bg-white border-r border-slate-100 flex items-center gap-3 lg:gap-4 text-emerald-950 font-medium transition-colors group-hover:bg-emerald-50/10"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Real-time data</span>
</div>
<div
class="p-4 lg:p-6 flex items-center gap-3 lg:gap-4 text-slate-500 font-light bg-slate-50/50"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-slate-200 text-slate-400 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:x"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Delayed reports</span>
</div>
</div>
<!-- Row 2 -->
<div class="grid grid-cols-2 border-b border-slate-100 group">
<div
class="p-4 lg:p-6 bg-white border-r border-slate-100 flex items-center gap-3 lg:gap-4 text-emerald-950 font-medium transition-colors group-hover:bg-emerald-50/10"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Product + revenue unified</span>
</div>
<div
class="p-4 lg:p-6 flex items-center gap-3 lg:gap-4 text-slate-500 font-light bg-slate-50/50"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-slate-200 text-slate-400 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:x"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Separate tools</span>
</div>
</div>
<!-- Row 3 -->
<div class="grid grid-cols-2 border-b border-slate-100 group">
<div
class="p-4 lg:p-6 bg-white border-r border-slate-100 flex items-center gap-3 lg:gap-4 text-emerald-950 font-medium transition-colors group-hover:bg-emerald-50/10"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Built for SaaS</span>
</div>
<div
class="p-4 lg:p-6 flex items-center gap-3 lg:gap-4 text-slate-500 font-light bg-slate-50/50"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-slate-200 text-slate-400 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:x"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Built for analysts</span>
</div>
</div>
<!-- Row 4 -->
<div class="grid grid-cols-2 border-b border-slate-100 group">
<div
class="p-4 lg:p-6 bg-white border-r border-slate-100 flex items-center gap-3 lg:gap-4 text-emerald-950 font-medium transition-colors group-hover:bg-emerald-50/10"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Zero SQL required</span>
</div>
<div
class="p-4 lg:p-6 flex items-center gap-3 lg:gap-4 text-slate-500 font-light bg-slate-50/50"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-slate-200 text-slate-400 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:x"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Complex queries</span>
</div>
</div>
<!-- Row 5 -->
<div class="grid grid-cols-2 group">
<div
class="p-4 lg:p-6 bg-white border-r border-slate-100 flex items-center gap-3 lg:gap-4 text-emerald-950 font-medium transition-colors group-hover:bg-emerald-50/10"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Live dashboards</span>
</div>
<div
class="p-4 lg:p-6 flex items-center gap-3 lg:gap-4 text-slate-500 font-light bg-slate-50/50"
>
<div
class="w-5 h-5 lg:w-6 lg:h-6 rounded-full bg-slate-200 text-slate-400 flex items-center justify-center shrink-0"
>
<iconify-icon
icon="lucide:x"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span>Static charts</span>
</div>
</div>
</div>
</div>
</section>
<!-- Section 5: Global Scale -->
<section
class="relative bg-[#001e18] py-20 lg:py-32 overflow-hidden border-t border-white/5"
>
<!-- Background effects -->
<div class="absolute inset-0 z-0">
<!-- Grid/Dots simulated pattern -->
<div
class="absolute right-0 top-0 h-full w-2/3 bg-dots opacity-20 [mask-image:linear-gradient(to_left,black,transparent)]"
></div>
<div
class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/4 w-[800px] h-[800px] bg-emerald-500/10 rounded-full blur-3xl"
></div>
</div>
<div class="container mx-auto px-4 lg:px-12 max-w-7xl relative z-10">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 mb-16 lg:mb-24">
<div class="flex flex-col justify-center">
<h3
class="uppercase text-sm font-bold text-emerald-400 tracking-wide mb-6"
>
Efficiency
</h3>
<h2
class="md:text-5xl lg:text-6xl text-4xl font-semibold text-white tracking-tight mb-8"
>
Teams using Dayta move faster
</h2>
<p
class="leading-relaxed text-lg font-light text-slate-400 max-w-xl"
>
High-performing teams rely on Dayta to make faster, smarter
decisions. By unifying revenue, product, and customer data in
one real-time platform, Dayta eliminates guesswork and gives
every team a single source of truth.
</p>
</div>
<!-- Visual representation of Globe/Network - Hidden on Mobile to avoid clutter -->
<div class="relative hidden lg:block h-full min-h-[400px]">
<!-- Abstract Globe SVG or CSS shape -->
<div
class="absolute right-[-100px] top-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-white/5 rounded-full opacity-20"
></div>
<div
class="absolute right-[-50px] top-1/2 -translate-y-1/2 w-[500px] h-[500px] border border-white/5 rounded-full opacity-30"
></div>
<div
class="absolute right-[0px] top-1/2 -translate-y-1/2 w-[400px] h-[400px] border border-white/10 rounded-full opacity-40"
></div>
<!-- Arcs -->
<svg
class="overflow-visible absolute top-0 right-0 bottom-0 left-0 w-[544px] h-[400px]"
viewBox="0 0 600 600"
stroke-width="2"
data-icon-replaced="true"
style="color: rgb(15, 23, 42); width: 544px; height: 400px;"
>
<path
d="M 100 300 Q 300 100 500 300"
fill="none"
stroke="#10b981"
stroke-width="1.5"
stroke-opacity="0.4"
stroke-dasharray="4 4"
></path>
<circle
cx="500"
cy="300"
r="4"
class="fill-emerald-500 animate-pulse"
></circle>
<circle
cx="100"
cy="300"
r="4"
class="fill-emerald-500"
></circle>
<path
d="M 150 400 Q 350 500 550 200"
fill="none"
stroke="#34d399"
stroke-width="1.5"
stroke-opacity="0.2"
></path>
<circle
cx="550"
cy="200"
r="3"
class="fill-emerald-300"
></circle>
</svg>
</div>
</div>
<!-- Stats Grid -->
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 border-t border-white/10 pt-12"
>
<!-- Stat 1: Clients -->
<div class="border-l-2 border-emerald-500 pl-6">
<div class="text-3xl font-bold text-white mb-2 tracking-tight">
2,500+
</div>
<p class="text-sm text-slate-400 font-medium">
Global customers trusting Dayta with their revenue metrics.
</p>
</div>
<!-- Stat 2: Reduced Reporting Time -->
<div class="border-l-2 border-emerald-500 pl-6">
<div class="text-3xl font-bold text-white mb-2 tracking-tight">
80%
</div>
<p class="text-sm text-slate-400 font-medium">
Reduction in manual reporting time for finance teams.
</p>
</div>
<!-- Stat 3: Uptime -->
<div class="border-l-2 border-emerald-500 pl-6">
<div class="text-3xl font-bold text-white mb-2 tracking-tight">
99.99%
</div>
<p class="text-sm text-slate-400 font-medium">
Historical uptime for our data ingestion API.
</p>
</div>
<!-- Stat 4: Data Points -->
<div class="border-l-2 border-emerald-500 pl-6">
<div class="text-3xl font-bold text-white tracking-tight mb-2">
100%
</div>
<p class="text-sm font-medium text-slate-400">
Revenue clarity across product, marketing and finance.
</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Testimonials (Marquee) -->
<section
class="py-16 lg:py-24 bg-stone-50 border-t border-slate-200 overflow-hidden relative"
>
<div
class="container mx-auto px-4 lg:px-12 max-w-7xl mb-12 flex justify-between items-end"
>
<div>
<p
class="text-xs font-bold text-emerald-600 uppercase tracking-widest mb-3"
>
Community
</p>
<h2
class="text-3xl md:text-4xl font-semibold text-slate-900 tracking-tight"
>
Loved by data teams
</h2>
</div>
<div class="hidden sm:flex items-center gap-2 text-slate-400">
<iconify-icon icon="lucide:quote" width="16"></iconify-icon>
<span class="text-sm font-medium">Real feedback</span>
</div>
</div>
<div class="relative w-full">
<!-- Fade Edges -->
<div
class="pointer-events-none absolute inset-y-0 left-0 w-8 sm:w-40 bg-gradient-to-r from-stone-50 to-transparent z-10"
></div>
<div
class="pointer-events-none absolute inset-y-0 right-0 w-8 sm:w-40 bg-gradient-to-l from-stone-50 to-transparent z-10"
></div>
<!-- Marquee Row -->
<div
class="flex gap-6 animate-marquee w-max hover:[animation-play-state:paused]"
>
<!-- Card 1 -->
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Felix Chen
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@felix_data</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"We shipped our analytics revamp 3x faster. The defaults are
sensible and secure out of the box."
</p>
</div>
</div>
<!-- Card 2 -->
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Sarah Jenkins
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@sarahj_ops</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"Smart Connect took minutes to wire into our stack. I was
expecting days of setup work."
</p>
</div>
</div>
<!-- Card 3 -->
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Marcus West
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@mwest_dev</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"The platform feels invisible—just fast, reliable pipelines
and clean reporting. Exactly what we needed."
</p>
</div>
</div>
<!-- Card 4 -->
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Elena"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Elena Gomez
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@elenag</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"Observability baked in. We finally trust our metrics for
decision-making across the entire org."
</p>
</div>
</div>
<!-- Duplicate Cards for Loop -->
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Felix Chen
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@felix_data</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"We shipped our analytics revamp 3x faster. The defaults are
sensible and secure out of the box."
</p>
</div>
</div>
<div
class="w-[300px] sm:w-[350px] md:w-[400px] p-6 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col justify-between h-full"
>
<div class="mb-4">
<div class="flex items-center gap-3 mb-4">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah"
alt="Avatar"
class="w-10 h-10 rounded-full bg-slate-100"
/>
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-slate-900">
Sarah Jenkins
</span>
<iconify-icon
icon="lucide:check-circle-2"
class="text-blue-500"
width="14"
></iconify-icon>
</div>
<p class="text-xs text-slate-500">@sarahj_ops</p>
</div>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
"Smart Connect took minutes to wire into our stack. I was
expecting days of setup work."
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 7: Trust & Security -->
<section class="py-16 lg:py-24 bg-white relative">
<div class="container mx-auto px-4 lg:px-12 max-w-7xl">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Text Content -->
<div class="flex flex-col gap-6 order-2 lg:order-1">
<span
class="text-emerald-600 font-bold uppercase text-xs tracking-widest"
>
This removes friction.
</span>
<h2
class="text-3xl md:text-5xl font-semibold text-slate-900 tracking-tight leading-tight"
>
Enterprise-grade security.
<span class="text-slate-400">Startup-simple setup.</span>
</h2>
<ul class="flex flex-col gap-4 mt-4">
<li class="flex items-center gap-3">
<div
class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span class="text-slate-600 font-medium">
SOC-2 compliant
</span>
</li>
<li class="flex items-center gap-3">
<div
class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span class="text-slate-600 font-medium">
Encrypted at rest and in transit
</span>
</li>
<li class="flex items-center gap-3">
<div
class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span class="text-slate-600 font-medium">
Read-only integrations
</span>
</li>
<li class="flex items-center gap-3">
<div
class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center"
>
<iconify-icon
icon="lucide:check"
width="12"
stroke-width="3"
></iconify-icon>
</div>
<span class="text-slate-600 font-medium">
You own your data
</span>
</li>
</ul>
<div class="mt-4 pt-8 border-t border-slate-100">
<div
class="flex items-center gap-6 opacity-60 grayscale hover:grayscale-0 transition-all"
>
<iconify-icon
icon="simple-icons:gdpr"
width="40"
></iconify-icon>
<iconify-icon
icon="simple-icons:iso"
width="40"
></iconify-icon>
</div>
</div>
</div>
<!-- Visual -->
<div
class="relative flex justify-center items-center order-1 lg:order-2 h-[300px] lg:h-[400px] bg-slate-50 rounded-3xl border border-slate-100 overflow-hidden group"
>
<div
class="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] opacity-40"
></div>
<!-- Glow behind lock -->
<div
class="absolute w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl z-0 lock-glow"
></div>
<!-- Lock Illustration -->
<div
class="relative z-10 flex flex-col items-center transform transition-transform duration-500 group-hover:scale-105 scale-75 lg:scale-100"
>
<!-- Shackle -->
<div
class="w-32 h-24 border-[12px] border-slate-300 rounded-t-full mb-[-20px] relative z-0 transition-colors duration-300 group-hover:border-emerald-200"
></div>
<!-- Body -->
<div
class="w-48 h-40 bg-white rounded-3xl shadow-xl border border-slate-200 flex items-center justify-center relative z-10"
>
<!-- Keyhole/Shield Icon -->
<div
class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-500"
>
<iconify-icon
icon="lucide:shield-check"
width="32"
stroke-width="2"
></iconify-icon>
</div>
<!-- Status Indicator -->
<div class="absolute top-4 right-4 flex gap-1.5">
<div
class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"
></div>
</div>
</div>
<!-- Badge -->
<div
class="absolute -bottom-6 bg-slate-900 text-white text-xs font-bold px-4 py-2 rounded-full shadow-lg flex items-center gap-2"
>
<iconify-icon icon="lucide:lock" width="12"></iconify-icon>
Secured
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 8: CTA (Second Conversion Point) -->
<section
class="py-20 lg:py-32 relative overflow-hidden bg-slate-950 border-t border-slate-900"
>
<!-- Decoration Glows -->
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-emerald-500/10 blur-[120px] rounded-full pointer-events-none"
></div>
<div
class="absolute bottom-0 right-0 w-[400px] h-[400px] bg-cyan-900/20 blur-[100px] rounded-full pointer-events-none"
></div>
<div
class="container mx-auto px-4 lg:px-12 max-w-4xl relative z-10 text-center"
>
<h2
class="text-4xl md:text-5xl lg:text-6xl font-semibold text-white tracking-tight mb-6"
>
Turn your data into
<br />
<span
class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400"
>
decisions today
</span>
</h2>
<p
class="text-base md:text-xl text-slate-400 font-light mb-10 max-w-2xl mx-auto"
>
Connect your tools and see your business in real time — no setup
required.
</p>
<div
class="flex flex-col sm:flex-row items-center justify-center gap-4"
>
<button
class="w-full sm:w-auto px-8 py-4 bg-white text-slate-950 rounded-full font-bold text-sm hover:bg-emerald-50 transition-colors flex items-center justify-center gap-2 group"
>
Start free
<iconify-icon
icon="lucide:arrow-right"
class="group-hover:translate-x-1 transition-transform"
width="16"
></iconify-icon>
</button>
<button
class="w-full sm:w-auto px-8 py-4 bg-transparent border border-slate-700 text-white rounded-full font-medium text-sm hover:bg-white/5 transition-colors flex items-center justify-center gap-2"
>
<iconify-icon icon="lucide:calendar" width="16"></iconify-icon>
Book a demo
</button>
</div>
<div
class="mt-12 flex items-center justify-center gap-6 opacity-40 grayscale mix-blend-screen scale-75 md:scale-100"
>
<iconify-icon
icon="simple-icons:stripe"
width="50"
class="text-white"
></iconify-icon>
<iconify-icon
icon="simple-icons:shopify"
width="80"
class="text-white"
></iconify-icon>
<iconify-icon
icon="simple-icons:segment"
width="80"
class="text-white"
></iconify-icon>
</div>
</div>
</section>
<!-- Section 9: Footer -->
<footer class="bg-white border-t border-slate-200 pt-16 lg:pt-20 pb-12">
<div class="container mx-auto px-4 lg:px-12 max-w-7xl">
<div
class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-8 mb-16"
>
<!-- Brand & Mini-Pitch -->
<div class="col-span-2 lg:col-span-2">
<div class="flex items-center gap-2 mb-6">
<div
class="flex shadow-emerald-500/20 text-white bg-emerald-950 w-8 h-8 rounded-lg shadow-sm items-center justify-center"
>
<iconify-icon
icon="solar:database-bold"
width="20"
></iconify-icon>
</div>
<span
class="text-lg font-bold text-slate-900 tracking-tight"
onclick="window.location.href='/home'"
role="button"
>
Dayta
</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed max-w-sm">
Dayta is a real-time analytics platform that connects your
product, revenue, and customer data into one powerful decision
engine.
</p>
<div class="flex gap-4 mt-6 text-slate-400">
<a href="#" class="hover:text-emerald-600 transition-colors">
<iconify-icon icon="lucide:twitter" width="20"></iconify-icon>
</a>
<a href="#" class="hover:text-emerald-600 transition-colors">
<iconify-icon icon="lucide:github" width="20"></iconify-icon>
</a>
<a href="#" class="hover:text-emerald-600 transition-colors">
<iconify-icon
icon="lucide:linkedin"
width="20"
></iconify-icon>
</a>
</div>
</div>
<!-- Column 1 -->
<div class="">
<h4
class="text-sm font-bold text-slate-900 mb-4"
onclick="window.location.href='/product'"
role="button"
>
Product
</h4>
<ul class="flex flex-col gap-3 text-sm text-slate-500">
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
Integration
</a>
</li>
<li class="">
<a
href="/pricing"
class="hover:text-emerald-600 transition-colors"
>
Pricing
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
Automations
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
Enterprise
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="">
<h4 class="font-bold text-slate-900 text-sm mb-4">Company</h4>
<ul class="flex flex-col gap-3 text-sm text-slate-500">
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
About
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-600 transition-colors">
Blog
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
Careers
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-600 transition-colors">
Contact
</a>
</li>
</ul>
</div>
<!-- Column 3 -->
<div class="col-span-2 md:col-span-1">
<h4 class="font-bold text-slate-900 text-sm mb-4">Legal</h4>
<ul class="flex flex-col gap-3 text-sm text-slate-500">
<li>
<a href="#" class="hover:text-emerald-600 transition-colors">
Privacy
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-600 transition-colors">
Terms
</a>
</li>
<li class=""></li>
</ul>
</div>
</div>
<div
class="border-t border-slate-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-left"
>
<p class="text-xs text-slate-400">
© 2024 Dayta Inc. All rights reserved.
</p>
<div class="flex items-center gap-2">
<div
class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"
></div>
<span class="text-xs font-medium text-slate-500">
All systems operational
</span>
</div>
</div>
</div>
</footer>
</main>
<script>
(function() {
const menuBtn = document.getElementById('mobile-menu-btn');
const closeBtn = document.getElementById('close-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const body = document.body;
function toggleMenu() {
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
body.classList.add('menu-open');
} else {
mobileMenu.classList.add('hidden');
body.classList.remove('menu-open');
}
}
if (menuBtn && mobileMenu && closeBtn) {
menuBtn.addEventListener('click', toggleMenu);
closeBtn.addEventListener('click', toggleMenu);
}
})();
</script>
</body>
</html>