From 95a2de8058375fad5781e87b38b1a76c5fdab41c Mon Sep 17 00:00:00 2001 From: pavel Date: Mon, 2 Mar 2026 19:07:46 +0100 Subject: [PATCH] init --- index.html | 244 ++++++++++++++++++++ script.js | 66 ++++++ styles.css | 645 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 955 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..3d0cfa8 --- /dev/null +++ b/index.html @@ -0,0 +1,244 @@ + + + + + + Dataduck | Business Intelligence for Ambitious Small Teams + + + + + + + +
+
+ + D + dataduck + + + Book a Strategy Call +
+ +
+
+
+

Luxury-grade BI for lean operators

+

Enterprise intelligence, tailored for the businesses still moving fast.

+

+ Dataduck turns scattered spreadsheets, e-commerce feeds, POS data, + and finance systems into a decision cockpit built for owners, + operators, and revenue teams. +

+
+ See Dataduck Live + Explore Outcomes +
+
+
+ Launch time + 14 days +
+
+ Typical reporting cut + 18 hrs / week +
+
+ Designed for + 5-150 person teams +
+
+
+ +
+
+
+
+
+
+

Executive pulse

+

Revenue Intelligence Suite

+
+ Live +
+ +
+
+

Gross revenue

+ 284% + Quarter-over-quarter visibility lift +
+ +
+

Margin watch

+ $412k + Tracked across all channels +
+ +
+

Forecast confidence

+ 97.4% + Weekly planning accuracy +
+
+ +
+
+

Performance pulse

+ Daily synced +
+ +
+
+
+
+ +
+

Built for retailers, hospitality groups, agencies, clinics, and modern service businesses.

+
+ +
+
+

Reporting hours reclaimed

+ 0 + Average monthly manual work removed +
+
+

Data sources unified

+ 0 + Finance, CRM, commerce, ads, ops, and payroll +
+
+

Faster decision cycles

+ 0 + Days instead of weeks to answer critical questions +
+
+ +
+
+

The platform

+

One command center for revenue, margins, labor, cash flow, and demand.

+

+ Dataduck combines data plumbing, executive dashboards, and guided + analysis into one operating layer. You get the clarity of an + enterprise BI stack without hiring a data team to maintain it. +

+
+ +
+
+

Boardroom dashboards

+

+ Polished KPI views for owners and leadership, designed to answer + what changed, why it changed, and what to do next. +

+
+
+

Managed integrations

+

+ We connect the systems small businesses actually use and keep the + numbers reconciled as operations evolve. +

+
+
+

Forecasting that stays practical

+

+ Demand, staffing, and cash projections tuned for real planning, + not academic models nobody trusts. +

+
+
+
+ +
+
+

White-glove delivery

+

We handle the heavy lift so your team can work from signal, not noise.

+
+ +
+
+ 01 +

Audit and map

+

We inspect your data flow, identify blind spots, and define the metrics that actually run the business.

+
+
+ 02 +

Build and unify

+

We connect sources, model the business, and ship dashboards with premium presentation quality.

+
+
+ 03 +

Guide and refine

+

We stay close after launch, tighten assumptions, and expand the system as your operation matures.

+
+
+
+ +
+

+ "Dataduck gave us the discipline of a larger company without slowing + down the way we operate." +

+ COO, regional retail group +
+ +
+
+
+

Start here

+

Make your next operating review feel sharper than your last board deck.

+

+ If your business has outgrown spreadsheet firefighting, Dataduck + can put a premium BI layer in place quickly. +

+
+ +
+ + + + + +
+
+
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9a18f4f --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +document.documentElement.classList.add("js-ready"); + +const revealItems = document.querySelectorAll(".reveal"); + +const revealObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + revealObserver.unobserve(entry.target); + } + }); + }, + { + threshold: 0.18, + } +); + +revealItems.forEach((item) => revealObserver.observe(item)); + +const counters = document.querySelectorAll(".counter"); + +const animateCounter = (element) => { + const target = Number(element.dataset.target); + const duration = 1400; + const startTime = performance.now(); + + const tick = (now) => { + const progress = Math.min((now - startTime) / duration, 1); + const eased = 1 - Math.pow(1 - progress, 3); + element.textContent = Math.round(target * eased); + + if (progress < 1) { + requestAnimationFrame(tick); + } + }; + + requestAnimationFrame(tick); +}; + +const counterObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + animateCounter(entry.target); + counterObserver.unobserve(entry.target); + } + }); + }, + { + threshold: 0.4, + } +); + +counters.forEach((counter) => counterObserver.observe(counter)); + +const contactForm = document.querySelector(".contact-form"); + +contactForm?.addEventListener("submit", (event) => { + event.preventDefault(); + const button = contactForm.querySelector("button"); + if (button) { + button.textContent = "Request Received"; + button.disabled = true; + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6e800d2 --- /dev/null +++ b/styles.css @@ -0,0 +1,645 @@ +:root { + --bg: #f4ede0; + --bg-alt: #efe5d4; + --panel: rgba(10, 26, 36, 0.9); + --panel-soft: rgba(255, 255, 255, 0.64); + --ink: #11202b; + --ink-muted: rgba(17, 32, 43, 0.68); + --line: rgba(17, 32, 43, 0.12); + --gold: #bf8a38; + --gold-bright: #efca79; + --navy: #0f2232; + --navy-soft: #19374d; + --white: #ffffff; + --shadow: 0 24px 80px rgba(15, 34, 50, 0.18); + --radius-lg: 32px; + --radius-md: 20px; + --radius-sm: 14px; + --max-width: 1200px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + min-height: 100vh; + font-family: "Instrument Sans", sans-serif; + color: var(--ink); + background: + radial-gradient(circle at top left, rgba(239, 202, 121, 0.45), transparent 26%), + radial-gradient(circle at 80% 10%, rgba(45, 91, 122, 0.2), transparent 22%), + linear-gradient(180deg, #fbf5eb 0%, var(--bg) 48%, var(--bg-alt) 100%); +} + +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: + linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), + repeating-linear-gradient( + 90deg, + rgba(17, 32, 43, 0.015) 0, + rgba(17, 32, 43, 0.015) 1px, + transparent 1px, + transparent 120px + ); + opacity: 0.7; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +textarea { + font: inherit; +} + +.site-shell { + width: min(calc(100% - 32px), var(--max-width)); + margin: 0 auto; + padding-bottom: 48px; +} + +.topbar { + position: sticky; + top: 20px; + z-index: 20; + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + margin-top: 20px; + padding: 18px 22px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: 999px; + background: rgba(251, 245, 235, 0.78); + backdrop-filter: blur(18px); + box-shadow: 0 12px 44px rgba(17, 32, 43, 0.08); +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.brand-mark { + display: grid; + place-items: center; + width: 40px; + height: 40px; + border-radius: 12px; + color: var(--white); + background: linear-gradient(135deg, var(--navy), var(--gold)); + box-shadow: 0 10px 24px rgba(15, 34, 50, 0.24); +} + +.nav { + display: inline-flex; + align-items: center; + gap: 24px; + color: var(--ink-muted); +} + +.nav a:hover, +.nav a:focus-visible { + color: var(--ink); +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 22px; + border: 1px solid transparent; + border-radius: 999px; + font-weight: 600; + transition: + transform 180ms ease, + box-shadow 180ms ease, + background-color 180ms ease, + border-color 180ms ease; + cursor: pointer; +} + +.button:hover, +.button:focus-visible { + transform: translateY(-2px); +} + +.button-primary { + color: var(--white); + background: linear-gradient(135deg, #1b384d 0%, #19374d 42%, #bf8a38 100%); + box-shadow: 0 18px 36px rgba(25, 55, 77, 0.26); +} + +.button-secondary, +.button-ghost { + border-color: rgba(17, 32, 43, 0.14); + background: rgba(255, 255, 255, 0.56); +} + +.hero { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + gap: 48px; + align-items: center; + padding: 88px 0 56px; +} + +.eyebrow, +.mini-label, +.proof-label { + margin: 0; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.eyebrow { + color: var(--gold); + font-size: 0.78rem; + font-weight: 700; +} + +.hero h1, +.section-copy h2 { + margin: 18px 0; + font-family: "Manrope", sans-serif; + line-height: 0.98; + letter-spacing: -0.04em; +} + +.hero h1 { + font-size: clamp(3.6rem, 7vw, 6.7rem); + max-width: 10ch; +} + +.section-copy h2 { + font-size: clamp(2.3rem, 4vw, 4.1rem); + max-width: 12ch; +} + +.hero-text, +.section-copy p:not(.eyebrow), +.feature-card p, +.service-card p, +.metric-card span, +.quote-strip span { + color: var(--ink-muted); + line-height: 1.7; +} + +.hero-text { + max-width: 54ch; + font-size: 1.08rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin: 34px 0 40px; +} + +.hero-proof { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.hero-proof div { + padding: 18px 20px; + border: 1px solid var(--line); + border-radius: var(--radius-md); + background: rgba(255, 255, 255, 0.46); +} + +.proof-label, +.mini-label { + color: rgba(17, 32, 43, 0.54); + font-size: 0.72rem; + font-weight: 700; +} + +.hero-proof strong, +.data-panel strong, +.metric-card strong { + display: block; + margin-top: 10px; + font-family: "Manrope", sans-serif; + letter-spacing: -0.04em; +} + +.hero-visual { + position: relative; + min-height: 640px; + display: grid; + place-items: center; +} + +.visual-glow { + position: absolute; + border-radius: 999px; + filter: blur(40px); + opacity: 0.8; +} + +.visual-glow-a { + width: 260px; + height: 260px; + top: 20px; + right: 80px; + background: rgba(239, 202, 121, 0.45); +} + +.visual-glow-b { + width: 320px; + height: 320px; + bottom: 10px; + left: 40px; + background: rgba(36, 86, 116, 0.34); +} + +.dashboard-card { + position: relative; + width: min(100%, 520px); + padding: 28px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + color: var(--white); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%), + linear-gradient(145deg, rgba(22, 45, 60, 0.97), rgba(10, 22, 31, 0.96)); + box-shadow: 0 36px 80px rgba(15, 34, 50, 0.32); + overflow: hidden; +} + +.dashboard-card::after { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 10% 15%, rgba(239, 202, 121, 0.16), transparent 28%), + linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.04), transparent); + pointer-events: none; +} + +.dashboard-topline, +.chart-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.dashboard-topline h2 { + margin: 6px 0 0; + font-family: "Manrope", sans-serif; + font-size: 1.5rem; +} + +.status-pill { + padding: 8px 12px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 999px; + color: var(--gold-bright); + background: rgba(255, 255, 255, 0.04); +} + +.dashboard-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin: 24px 0; +} + +.data-panel, +.chart-panel, +.metric-card, +.feature-card, +.service-card, +.quote-strip, +.contact-card { + box-shadow: var(--shadow); +} + +.data-panel { + padding: 22px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 22px; + background: rgba(255, 255, 255, 0.05); +} + +.data-panel-large { + grid-column: span 2; + background: + linear-gradient(135deg, rgba(239, 202, 121, 0.18), rgba(255, 255, 255, 0.06)), + rgba(255, 255, 255, 0.04); +} + +.data-panel strong { + margin: 12px 0 6px; + font-size: clamp(2.2rem, 5vw, 3.4rem); +} + +.data-panel span, +.chart-header span { + color: rgba(255, 255, 255, 0.68); +} + +.chart-panel { + padding: 22px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.04); +} + +.chart-bars { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + align-items: end; + gap: 12px; + height: 200px; + margin-top: 20px; +} + +.chart-bars span { + display: block; + height: var(--bar-size); + border-radius: 999px 999px 16px 16px; + background: linear-gradient(180deg, var(--gold-bright), rgba(191, 138, 56, 0.3)); + box-shadow: 0 10px 24px rgba(239, 202, 121, 0.14); + animation: rise 900ms ease both; + animation-delay: calc(var(--bar-size) * 8ms); +} + +.trust-band { + margin: 8px 0 24px; + padding: 18px 24px; + border: 1px solid rgba(17, 32, 43, 0.08); + border-radius: 999px; + background: rgba(255, 255, 255, 0.44); + text-align: center; + color: var(--ink-muted); +} + +.metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 20px; + margin: 44px 0 96px; +} + +.metric-card, +.feature-card, +.service-card, +.quote-strip, +.contact-card { + padding: 28px; + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.58); + backdrop-filter: blur(14px); +} + +.metric-card strong { + font-size: clamp(2.3rem, 5vw, 4rem); + margin: 14px 0 10px; +} + +.section-grid, +.services, +.contact { + padding: 28px 0 96px; +} + +.platform { + display: grid; + grid-template-columns: 0.92fr 1.08fr; + gap: 28px; + align-items: start; +} + +.feature-stack, +.service-grid { + display: grid; + gap: 18px; +} + +.feature-card h3, +.service-card h3 { + margin: 0 0 12px; + font-family: "Manrope", sans-serif; + font-size: 1.4rem; +} + +.feature-card { + min-height: 180px; +} + +.service-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 30px; +} + +.service-card span { + display: inline-flex; + margin-bottom: 18px; + color: var(--gold); + font-family: "Manrope", sans-serif; + font-size: 0.95rem; + font-weight: 800; + letter-spacing: 0.12em; +} + +.quote-strip { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + margin: 0 0 96px; + padding: 28px 32px; + background: + linear-gradient(135deg, rgba(17, 32, 43, 0.92), rgba(32, 62, 80, 0.92)), + rgba(255, 255, 255, 0.08); + color: var(--white); +} + +.quote-strip p { + margin: 0; + max-width: 28ch; + font-family: "Manrope", sans-serif; + font-size: clamp(1.4rem, 2.4vw, 2rem); + letter-spacing: -0.03em; +} + +.quote-strip span { + color: rgba(255, 255, 255, 0.68); +} + +.contact-card { + display: grid; + grid-template-columns: 0.95fr 1.05fr; + gap: 28px; + padding: 36px; +} + +.contact-form { + display: grid; + gap: 16px; +} + +.contact-form label { + display: grid; + gap: 8px; + color: var(--ink-muted); + font-size: 0.95rem; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 16px 18px; + border: 1px solid rgba(17, 32, 43, 0.12); + border-radius: 18px; + background: rgba(255, 255, 255, 0.72); + color: var(--ink); + outline: none; + transition: border-color 180ms ease, box-shadow 180ms ease; +} + +.contact-form input:focus, +.contact-form textarea:focus { + border-color: rgba(191, 138, 56, 0.9); + box-shadow: 0 0 0 4px rgba(191, 138, 56, 0.16); +} + +.contact-form textarea { + min-height: 138px; + resize: vertical; +} + +.js-ready .reveal { + opacity: 0; + transform: translateY(24px); + transition: + opacity 700ms ease, + transform 700ms ease; +} + +.js-ready .reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +.button:disabled { + cursor: default; + opacity: 0.76; +} + +@keyframes rise { + from { + transform: scaleY(0.2); + transform-origin: bottom; + opacity: 0; + } + + to { + transform: scaleY(1); + transform-origin: bottom; + opacity: 1; + } +} + +@media (max-width: 1080px) { + .hero, + .platform, + .contact-card { + grid-template-columns: 1fr; + } + + .hero h1 { + max-width: 12ch; + } + + .hero-visual { + min-height: auto; + } + + .service-grid, + .metrics { + grid-template-columns: 1fr; + } +} + +@media (max-width: 760px) { + .site-shell { + width: min(calc(100% - 20px), var(--max-width)); + } + + .topbar { + flex-wrap: wrap; + border-radius: 28px; + } + + .nav { + order: 3; + width: 100%; + justify-content: space-between; + gap: 14px; + font-size: 0.95rem; + } + + .hero { + padding-top: 44px; + } + + .hero h1 { + font-size: clamp(2.9rem, 16vw, 4.6rem); + } + + .hero-proof, + .dashboard-grid { + grid-template-columns: 1fr; + } + + .data-panel-large { + grid-column: auto; + } + + .quote-strip { + flex-direction: column; + align-items: flex-start; + } +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } + + .js-ready .reveal { + opacity: 1; + transform: none; + } +}