<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFINITERS | AI Automation Agency</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Google Fonts: Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
// ORIGINAL COLOR SCHEME: Tech Navy & Electric Green
dark: '#1A2C42', // Deep Navy
light: '#FFFFFF',
accent: '#00E676', // Electric Green Accent
gray: '#F4F6F9', // Light Background
muted: '#6B7280' // Standard Cool Gray for muted text
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
/* Restored background color */
body { font-family: 'Inter', sans-serif; background-color: #F4F6F9; color: #1A2C42; }
/* Chart Container Styling Requirements */
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
/* Custom Scrollbar for Service List */
.service-scroll::-webkit-scrollbar {
width: 6px;
}
.service-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.service-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.service-scroll::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="flex flex-col min-h-screen">
<!-- Navigation (bg-brand-dark) -->
<nav class="sticky top-0 z-50 bg-brand-dark text-white shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<!-- Brand name uses accent color -->
<div class="text-2xl font-bold tracking-tight">NFINITERS<span class="text-brand-accent">.</span></div>
<div class="hidden md:flex space-x-8 items-center">
<!-- Navigation links -->
<a href="#services" class="hover:text-brand-accent transition">Services</a>
<a href="#roi-calculator" class="hover:text-brand-accent transition">ROI Calculator</a>
<a href="#process" class="hover:text-brand-accent transition">Process</a>
<a href="#compliance" class="text-sm text-gray-300 hover:text-white transition">Compliance</a>
</div>
<div class="flex items-center space-x-4">
<button class="text-sm font-semibold hover:text-brand-accent">EN ▼</button>
<!-- CTA Button uses accent color -->
<button onclick="openLeadMagnet()" class="bg-brand-accent text-brand-dark px-4 py-2 rounded-lg font-bold hover:bg-white transition shadow-md">
Get Free Blueprint
</button>
</div>
</div>
</nav>
<!-- Hero Section (bg-brand-dark) -->
<header class="bg-brand-dark text-white pt-12 pb-20 relative overflow-hidden">
<!-- Accent splash for visual interest -->
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-accent opacity-10 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none"></div>
<div class="container mx-auto px-4 relative z-10 text-center">
<!-- Accent text for highlight -->
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Your Business, Automated.<br><span class="text-brand-accent">Zero Tech Headaches.</span></h1>
<p id="hero-sub" class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">
We turn complex AI into simple, done-for-you systems. Select your business type to see exactly how we can help:
</p>
<!-- Persona Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto mb-8">
<!-- Hover/Accent classes restored -->
<button onclick="selectPersona('restaurant')" id="btn-restaurant" class="persona-btn bg-white/10 hover:bg-brand-accent/20 border border-white/20 p-6 rounded-xl transition-all duration-300 text-left group">
<div class="text-3xl mb-2">🍽️</div>
<h3 class="font-bold text-lg group-hover:text-brand-accent">Restaurant Owner</h3>
<p class="text-sm text-gray-400 mt-2">Struggling with missed calls & no-shows?</p>
</button>
<button onclick="selectPersona('trades')" id="btn-trades" class="persona-btn bg-white/10 hover:bg-brand-accent/20 border border-white/20 p-6 rounded-xl transition-all duration-300 text-left group">
<div class="text-3xl mb-2">🛠️</div>
<h3 class="font-bold text-lg group-hover:text-brand-accent">Tradesperson</h3>
<p class="text-sm text-gray-400 mt-2">Chasing invoices & qualifying leads?</p>
</button>
<button onclick="selectPersona('clinic')" id="btn-clinic" class="persona-btn bg-white/10 hover:bg-brand-accent/20 border border-white/20 p-6 rounded-xl transition-all duration-300 text-left group">
<div class="text-3xl mb-2">⚕️</div>
<h3 class="font-bold text-lg group-hover:text-brand-accent">Clinic Manager</h3>
<p class="text-sm text-gray-400 mt-2">Overwhelmed by patient intake & phones?</p>
</button>
</div>
<!-- Dynamic Persona Insight -->
<div id="persona-insight" class="hidden bg-white/5 border border-brand-accent/30 rounded-lg p-6 max-w-3xl mx-auto fade-in">
<p class="text-lg italic text-gray-200">"<span id="insight-text">...</span>"</p>
<div class="mt-4 flex justify-center space-x-2">
<span class="text-brand-accent font-bold">Recommended:</span>
<span id="insight-recommendation" class="text-white"></span>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow container mx-auto px-4 py-12 space-y-24">
<!-- Section 1: The Cost of Inaction (ROI Calculator) -->
<section id="roi-calculator" class="bg-white rounded-2xl shadow-xl p-8 border-t-4 border-brand-accent">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- Calculator Inputs -->
<div>
<h2 class="text-3xl font-bold text-brand-dark mb-4">Calculate Your Potential Savings</h2>
<p class="text-gray-600 mb-8">
Most local businesses underestimate the cost of manual admin. Adjust the sliders to match your current reality.
</p>
<div class="space-y-6">
<div>
<label class="flex justify-between font-semibold text-gray-700 mb-2">
<span>Weekly Admin Hours (You/Staff)</span>
<!-- bg-brand-gray restored -->
<span class="text-brand-dark bg-brand-gray px-2 py-1 rounded" id="val-hours">15 hrs</span>
</label>
<!-- accent color for slider restored -->
<input type="range" min="5" max="60" value="15" id="input-hours" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-accent">
</div>
<div>
<label class="flex justify-between font-semibold text-gray-700 mb-2">
<span>Hourly Value / Wage (€)</span>
<span class="text-brand-dark bg-brand-gray px-2 py-1 rounded" id="val-wage">€30</span>
</label>
<!-- accent color for slider restored -->
<input type="range" min="15" max="150" value="30" id="input-wage" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-accent">
</div>
<div>
<label class="flex justify-between font-semibold text-gray-700 mb-2">
<span>Missed Leads per Month</span>
<span class="text-brand-dark bg-brand-gray px-2 py-1 rounded" id="val-leads">10</span>
</label>
<!-- accent color for slider restored -->
<input type="range" min="0" max="100" value="10" id="input-leads" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-accent">
</div>
<div>
<label class="flex justify-between font-semibold text-gray-700 mb-2">
<span>Avg. Customer Value (€)</span>
<span class="text-brand-dark bg-brand-gray px-2 py-1 rounded" id="val-ltv">€200</span>
</label>
<!-- accent color for slider restored -->
<input type="range" min="50" max="2000" value="200" step="50" id="input-ltv" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-accent">
</div>
</div>
<!-- Summary Box uses dark background and accent text -->
<div class="mt-8 bg-brand-dark text-white p-4 rounded-lg text-center">
<p class="text-sm uppercase tracking-wide text-gray-400">Total Annual Opportunity</p>
<div class="text-3xl font-bold text-brand-accent" id="total-opportunity">€0</div>
</div>
</div>
<!-- Visualization -->
<div class="flex flex-col justify-center items-center bg-gray-50 rounded-xl p-4">
<h3 class="text-lg font-semibold text-gray-700 mb-4">Annual Financial Impact</h3>
<div class="chart-container">
<canvas id="roiChart"></canvas>
</div>
<p class="text-sm text-center text-gray-500 mt-4 max-w-md">
*Visualization compares cost of wasted time + lost revenue vs. estimated automation costs.
</p>
</div>
</div>
</section>
<!-- Section 2: Service Explorer -->
<section id="services">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-brand-dark mb-4">Done-For-You Automation Systems</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
You don't need a thousand features. You need a system that works. Explore our 12 specialized engines.
</p>
</div>
<!-- Filters (colors restored) -->
<div class="flex flex-wrap justify-center gap-4 mb-8">
<button onclick="filterServices('all')" class="filter-btn active bg-brand-dark text-white px-5 py-2 rounded-full font-medium transition" data-cat="all">All Systems</button>
<button onclick="filterServices('Lead Gen')" class="filter-btn bg-white text-gray-600 border border-gray-300 px-5 py-2 rounded-full font-medium hover:bg-gray-100 transition" data-cat="Lead Gen">Lead Generation</button>
<button onclick="filterServices('Sales')" class="filter-btn bg-white text-gray-600 border border-gray-300 px-5 py-2 rounded-full font-medium hover:bg-gray-100 transition" data-cat="Sales">Sales & CRM</button>
<button onclick="filterServices('Operations')" class="filter-btn bg-white text-gray-600 border border-gray-300 px-5 py-2 rounded-full font-medium hover:bg-gray-100 transition" data-cat="Operations">Operations & Support</button>
</div>
<!-- Service Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6" id="services-grid">
<!-- Cards injected via JS -->
</div>
</section>
<!-- Section 3: Process Timeline (bg-brand-dark) -->
<section id="process" class="bg-brand-dark text-white rounded-2xl p-8 lg:p-12 overflow-hidden relative">
<!-- Accent splash for visual interest -->
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-accent opacity-10 rounded-full blur-3xl -mr-20 -mt-20"></div>
<div class="text-center mb-12 relative z-10">
<h2 class="text-3xl font-bold mb-4">How We Build Your Machine</h2>
<p class="text-gray-400">Zero tech headaches. We handle everything.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-10">
<!-- Step 1 (accent color used for numbers/hover) -->
<div class="bg-white/5 border border-white/10 p-6 rounded-xl hover:bg-white/10 transition duration-300 cursor-pointer group">
<div class="text-brand-accent text-5xl font-bold mb-4 opacity-50 group-hover:opacity-100 transition">01</div>
<h3 class="text-xl font-bold mb-2">Discovery & Audit</h3>
<p class="text-gray-400 text-sm leading-relaxed">
We don't sell you software. We listen to your problems. We identify the 3-5 processes costing you the most money.
</p>
</div>
<!-- Step 2 -->
<div class="bg-white/5 border border-white/10 p-6 rounded-xl hover:bg-white/10 transition duration-300 cursor-pointer group">
<div class="text-brand-accent text-5xl font-bold mb-4 opacity-50 group-hover:opacity-100 transition">02</div>
<h3 class="text-xl font-bold mb-2">Build & Integrate</h3>
<p class="text-gray-400 text-sm leading-relaxed">
Our experts build the workflows, connect the APIs, and set up the AI. You don't touch a line of code. 100% GDPR-aware.
</p>
</div>
<!-- Step 3 -->
<div class="bg-white/5 border border-white/10 p-6 rounded-xl hover:bg-white/10 transition duration-300 cursor-pointer group">
<div class="text-brand-accent text-5xl font-bold mb-4 opacity-50 group-hover:opacity-100 transition">03</div>
<h3 class="text-xl font-bold mb-2">Launch & Scale</h3>
<p class="text-gray-400 text-sm leading-relaxed">
We launch the system. You immediately start saving time. We provide ongoing support and optimization for a flat monthly fee.
</p>
</div>
</div>
</section>
<!-- Section 4: Trust & Compliance Hub -->
<section id="compliance" class="max-w-4xl mx-auto w-full">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-brand-dark">Compliance & Trust Center</h2>
<p class="text-gray-500 text-sm">Built for the German/EU Market.</p>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
<div class="flex border-b border-gray-200 bg-gray-50">
<!-- Accent color for active tab border -->
<button onclick="openTab('impressum')" class="tab-btn flex-1 py-4 text-sm font-semibold text-gray-600 hover:text-brand-dark bg-white border-b-2 border-brand-accent">Impressum</button>
<button onclick="openTab('privacy')" class="tab-btn flex-1 py-4 text-sm font-semibold text-gray-600 hover:text-brand-dark">Privacy (GDPR)</button>
<button onclick="openTab('ethics')" class="tab-btn flex-1 py-4 text-sm font-semibold text-gray-600 hover:text-brand-dark">AI Ethics</button>
</div>
<div class="p-6 md:p-8 min-h-[200px]">
<div id="tab-impressum" class="tab-content block">
<h3 class="font-bold text-lg mb-2">Impressum</h3>
<p class="text-sm text-gray-600 mb-4">Angaben gemäß § 5 TMG</p>
<div class="text-sm text-gray-700 space-y-1">
<p><strong>NFINITERS GmbH</strong> [Legal Form Placeholder]</p>
<p>[Street Address Placeholder]</p>
<p>[City, Zip Placeholder]</p>
<p class="mt-2"><strong>Contact:</strong> +49 (0) XXX XXXX | contact@nfiniters.de</p>
<p><strong>Register:</strong> Amtsgericht [City], HRB [XXXX]</p>
<p><strong>VAT ID:</strong> DE XXX XXX XXX</p>
<div class="mt-4 bg-yellow-50 text-yellow-800 p-2 text-xs rounded border border-yellow-200">
LEGAL NOTICE: This is a placeholder structure. Actual legal data must be verified by a professional.
</div>
</div>
</div>
<div id="tab-privacy" class="tab-content hidden">
<h3 class="font-bold text-lg mb-2">Datenschutzerklärung (Overview)</h3>
<p class="text-sm text-gray-600 mb-4">We take GDPR seriously.</p>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-2">
<li><strong>Data Controller:</strong> NFINITERS GmbH (see Impressum).</li>
<li><strong>Data Processing:</strong> We collect Name/Email only for contact/service delivery (Art. 6(1)(b) GDPR).</li>
<li><strong>Server Logs:</strong> Collected for security (Art. 6(1)(f) GDPR).</li>
<li><strong>Rights:</strong> You have the right to access, delete, and correct your data at any time.</li>
</ul>
</div>
<div id="tab-ethics" class="tab-content hidden">
<h3 class="font-bold text-lg mb-2">AI Transparency & Ethics</h3>
<p class="text-sm text-gray-600 mb-4">Responsible Automation.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded">
<h4 class="font-bold text-xs uppercase text-gray-500 mb-1">Human in the Loop</h4>
<p class="text-sm">High-stakes decisions are always reviewed by humans. AI is an assistant, not the boss.</p>
</div>
<div class="bg-gray-50 p-3 rounded">
<h4 class="font-bold text-xs uppercase text-gray-500 mb-1">Transparency</h4>
<p class="text-sm">We clearly label AI interactions (e.g., "AI Assistant") so customers know who they are talking to.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer / Lead Magnet Area (bg-brand-dark) -->
<footer class="bg-brand-dark text-white pt-16 pb-8 border-t border-gray-800">
<div class="container mx-auto px-4">
<!-- Footer CTA Box -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 p-8 bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl border border-gray-700">
<div class="mb-6 md:mb-0 max-w-lg">
<h3 class="text-2xl font-bold mb-2">Stop Wasting 10 Hours a Week.</h3>
<p class="text-gray-400">Get the free "AI Automation Blueprint" tailored for local businesses. Discover exactly what you can automate today.</p>
</div>
<!-- CTA Button uses accent color -->
<button onclick="openLeadMagnet()" class="w-full md:w-auto bg-brand-accent text-brand-dark px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:scale-105 transition transform shadow-lg">
Download Free Blueprint
</button>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
<p>© 2025 NFINITERS. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<button onclick="scrollToSection('compliance')" class="hover:text-white">Impressum</button>
<button onclick="scrollToSection('compliance')" class="hover:text-white">Privacy Policy</button>
<button onclick="scrollToSection('compliance')" class="hover:text-white">Cookie Settings</button>
</div>
</div>
</div>
</footer>
<!-- Lead Magnet Modal -->
<div id="modal-backdrop" class="fixed inset-0 bg-black/80 z-[60] hidden flex items-center justify-center p-4 backdrop-blur-sm transition-opacity duration-300 opacity-0">
<div class="bg-white rounded-2xl max-w-md w-full p-8 shadow-2xl relative transform scale-95 transition-transform duration-300" id="modal-content">
<button onclick="closeLeadMagnet()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">✕</button>
<div class="text-center mb-6">
<!-- Icon background uses accent color -->
<div class="bg-brand-accent/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">📄</div>
<h3 class="text-2xl font-bold text-brand-dark">Get Your Free Blueprint</h3>
<p class="text-gray-600 text-sm mt-2">Identify hidden time-wasters and get a 1-page roadmap.</p>
</div>
<form class="space-y-4" onsubmit="event.preventDefault(); console.log('Form submission prevented for demo.'); alert('In a production environment, this would submit to a secure CRM like GoHighLevel.'); closeLeadMagnet();">
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Your Name</label>
<!-- Focus ring uses accent color -->
<input type="text" class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" placeholder="Hans Müller">
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Business Email</label>
<!-- Focus ring uses accent color -->
<input type="email" class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" placeholder="hans@handwerk.de">
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Business Type</label>
<!-- Focus ring uses accent color -->
<select class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
<option>Restaurant / Gastronomy</option>
<option>Trades / Craft</option>
<option>Medical / Clinic</option>
<option>Other Service</option>
</select>
</div>
<div class="bg-gray-50 p-3 rounded text-xs text-gray-500 border border-gray-200">
<p><strong>Fast Response Alert:</strong> Your data will be processed by our AI to customize your blueprint instantly. <a href="#" class="underline">Learn more</a>.</p>
</div>
<!-- Button uses dark background -->
<button type="submit" class="w-full bg-brand-dark text-white font-bold py-4 rounded-lg hover:bg-gray-800 transition">
Send Me The Blueprint
</button>
</form>
<p class="text-xs text-center text-gray-400 mt-4">We value your privacy. Unsubscribe anytime.</p>
</div>
</div>
<!-- JavaScript Application Logic -->
<script>
// --- DATA STORE ---
// 12 Core Offers from Source
const services = [
{ id: 1, title: "24/7 Instant Lead Response", cat: "Lead Gen", price: "$497 Setup", roi: "Recover 70% lost leads", desc: "Responds to leads in 30s. Never miss a customer.", icon: "⚡" },
{ id: 2, title: "Automated Booking Machine", cat: "Operations", price: "$597 Setup", roi: "< 5% No-shows", desc: "Fills calendar automatically. Reminders & routing.", icon: "📅" },
{ id: 3, title: "Lead Capture Funnel", cat: "Lead Gen", price: "$997 Setup", roi: "High Conversion", desc: "Behavior-based funnel with built-in automation.", icon: "🧲" },
{ id: 4, title: "Automation Starter Pack", cat: "Operations", price: "$1,500 Setup", roi: "Save 15hrs/week", desc: "Onboarding, lead mgmt, and communication workflows.", icon: "📦" },
{ id: 5, title: "Automated Sales Pipeline", cat: "Sales", price: "$1,200 Setup", roi: "Revenue Tracking", desc: "AI lead scoring and hot-lead alerts.", icon: "📊" },
{ id: 6, title: "5-Star Review Engine", cat: "Lead Gen", price: "$297 Setup", roi: "10-30 Reviews/mo", desc: "Auto-requests reviews. Filters negatives.", icon: "⭐" },
{ id: 7, title: "Customer Reactivation", cat: "Sales", price: "$497 Setup", roi: "Immediate Revenue", desc: "Win-back campaigns for old customer lists.", icon: "↺" },
{ id: 8, title: "AI Qualification Bot", cat: "Sales", price: "$1,200 Setup", roi: "Filter Tire-Kickers", desc: "Pre-screens leads before they book a call.", icon: "🤖" },
{ id: 9, title: "AI Support Chatbot", cat: "Operations", price: "$997 Setup", roi: "Reduce Support 90%", desc: "Answers FAQs 24/7 on website & SMS.", icon: "💬" },
{ id: 10, title: "Sales OS (CRM)", cat: "Sales", price: "$2,000 Setup", roi: "Full Visibility", desc: "Entire lead-to-sale process in one system.", icon: "📈" },
{ id: 11, title: "Client Onboarding", cat: "Operations", price: "$1,000 Setup", roi: "Red Carpet Exp.", desc: "Auto-contracts, invoicing, and welcome sequences.", icon: "🤝" },
{ id: 12, title: "Growth Engine (Flagship)", cat: "All", price: "$4,500 Setup", roi: "$50k-250k/yr", desc: "All 11 systems combined + Optimization.", icon: "🚀" }
];
// Persona Data
const personas = {
restaurant: {
insight: "Missed calls during dinner rush = Lost money.",
rec: "Booking Machine & Review Engine",
painHours: 20,
missedLeads: 40
},
trades: {
insight: "Chasing invoices and answering 'how much?' calls kills your day.",
rec: "Instant Lead Response & Qualification Bot",
painHours: 15,
missedLeads: 25
},
clinic: {
insight: "Patient no-shows and endless intake forms cause burnout.",
rec: "Onboarding Automation & Support Chatbot",
painHours: 25,
missedLeads: 15
}
};
// --- STATE MANAGEMENT ---
let currentPersona = null;
let chartInstance = null;
// --- INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
renderServices('all');
initChart();
updateCalculator(); // Run once to set initial values
});
// --- CORE FUNCTIONS ---
// 1. Service Grid Rendering
function renderServices(category) {
const grid = document.getElementById('services-grid');
grid.innerHTML = ''; // Clear
const filtered = category === 'all' ? services : services.filter(s => s.cat === category || s.cat === 'All');
filtered.forEach(s => {
const card = document.createElement('div');
card.className = "bg-white p-6 rounded-xl border border-gray-100 shadow-sm hover:shadow-lg transition duration-300 flex flex-col group h-full";
card.innerHTML = `
<div class="flex justify-between items-start mb-4">
<!-- Accent color for the icon background -->
<div class="text-3xl bg-gray-50 p-2 rounded-lg group-hover:bg-brand-accent/30 transition">${s.icon}</div>
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider border border-gray-200 px-2 py-1 rounded">${s.cat}</span>
</div>
<!-- Accent color for title on hover -->
<h3 class="font-bold text-lg text-brand-dark mb-2 group-hover:text-brand-accent transition">${s.title}</h3>
<p class="text-sm text-gray-500 mb-4 flex-grow">${s.desc}</p>
<div class="border-t border-gray-100 pt-4 mt-auto">
<div class="flex justify-between items-center text-sm mb-2">
<span class="text-gray-400">ROI Impact:</span>
<!-- Accent color for ROI value -->
<span class="font-semibold text-brand-accent">${s.roi}</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Investment:</span>
<span class="font-semibold text-brand-dark">${s.price}</span>
</div>
</div>
`;
grid.appendChild(card);
});
}
function filterServices(category) {
// Update buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
if(btn.dataset.cat === category) {
btn.classList.add('bg-brand-dark', 'text-white');
btn.classList.remove('bg-white', 'text-gray-600');
} else {
btn.classList.remove('bg-brand-dark', 'text-white');
btn.classList.add('bg-white', 'text-gray-600');
}
});
renderServices(category);
}
// 2. Persona Selection Logic
function selectPersona(type) {
currentPersona = type;
const data = personas[type];
// UI Updates
// Using ring-brand-accent for selected state
document.querySelectorAll('.persona-btn').forEach(b => b.classList.remove('ring-2', 'ring-brand-accent', 'bg-white/20'));
document.getElementById(`btn-${type}`).classList.add('ring-2', 'ring-brand-accent', 'bg-white/20');
const insightDiv = document.getElementById('persona-insight');
insightDiv.classList.remove('hidden');
// Trigger reflow for animation
void insightDiv.offsetWidth;
document.getElementById('insight-text').innerText = data.insight;
document.getElementById('insight-recommendation').innerText = data.rec;
// Update Calculator inputs to match persona "reality"
document.getElementById('input-hours').value = data.painHours;
document.getElementById('input-leads').value = data.missedLeads;
// Trigger calculator update
updateCalculator();
// Smooth scroll to calc
document.getElementById('roi-calculator').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
// 3. ROI Calculator Logic
function updateCalculator() {
// Get inputs
const hours = parseInt(document.getElementById('input-hours').value);
const wage = parseInt(document.getElementById('input-wage').value);
const leads = parseInt(document.getElementById('input-leads').value);
const ltv = parseInt(document.getElementById('input-ltv').value);
// Update displays
document.getElementById('val-hours').innerText = hours + " hrs";
document.getElementById('val-wage').innerText = "€" + wage;
document.getElementById('val-leads').innerText = leads;
document.getElementById('val-ltv').innerText = "€" + ltv;
// Calculations
// 1. Cost of Wasted Time (Annual) = Hours * Wage * 52
const costOfTime = hours * wage * 52;
// 2. Lost Revenue (Annual) = Missed Leads * Conversion Rate (assume 20%) * LTV * 12
// Conservative estimate: recovering 50% of missed leads
const conversionRate = 0.2;
const recoveredLeads = leads * 0.5; // NFINITERS promise
const recoveredRevenue = Math.round(recoveredLeads * conversionRate * ltv * 12);
const totalAnnualImpact = costOfTime + recoveredRevenue;
// Update Total (using toLocaleString for Euro formatting)
document.getElementById('total-opportunity').innerText = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(totalAnnualImpact);
// Update Chart
updateChartData(costOfTime, recoveredRevenue);
}
// Event Listeners for Sliders
['input-hours', 'input-wage', 'input-leads', 'input-ltv'].forEach(id => {
document.getElementById(id).addEventListener('input', updateCalculator);
});
// 4. Chart.js Implementation
function initChart() {
const ctx = document.getElementById('roiChart').getContext('2d');
chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Current Manual State', 'With NFINITERS Automation'],
datasets: [
{
label: 'Wasted Admin Costs',
data: [0, 0], // Init
backgroundColor: '#6B7280', // Restored Muted Gray
stack: 'Stack 0',
},
{
label: 'Lost Revenue Opportunity',
data: [0, 0], // Init
backgroundColor: '#EF4444', // Red for Loss/Warning (unchanged)
stack: 'Stack 0',
},
{
label: 'Automation Investment (Est)',
data: [0, 12000], // Est 1000/mo
backgroundColor: '#1A2C42', // Restored Dark Navy
stack: 'Stack 0',
},
{
label: 'NET PROFIT GAIN',
data: [0, 0],
backgroundColor: '#00E676', // Restored Electric Green Accent
stack: 'Stack 0',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) { return '€' + value.toLocaleString('de-DE'); }
},
stacked: true,
},
x: {
stacked: true
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(context.parsed.y);
}
return label;
}
}
}
}
}
});
}
function updateChartData(wastedCost, potentialRevenue) {
if(!chartInstance) return;
// Scenario A: Current Negative Impact
const currentNegativeImpact = wastedCost + potentialRevenue;
// Scenario B: Automated
const automationCost = 12000; // Est annual
const savedTimeCost = wastedCost * 0.8; // Assume 80% time savings is reasonable
const netGain = savedTimeCost + potentialRevenue - automationCost;
// Update data sets
chartInstance.data.datasets[0].data = [wastedCost, wastedCost * 0.2]; // Current cost | Remaining 20% cost
chartInstance.data.datasets[1].data = [potentialRevenue, 0]; // Lost revenue | 0 (since recovered)
chartInstance.data.datasets[2].data = [0, automationCost]; // No automation cost | New automation cost
chartInstance.data.datasets[3].data = [0, netGain]; // No profit gain | New net profit
// Update the chart visualization
chartInstance.update();
}
// 5. Tabs & Modals
function openTab(tabName) {
// Hide all
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('block'));
// Show selected
document.getElementById(`tab-${tabName}`).classList.remove('hidden');
document.getElementById(`tab-${tabName}`).classList.add('block');
// Update buttons
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('border-b-2', 'border-brand-accent', 'bg-white'));
// Find the clicked button and update its style
const clickedButton = event.target;
clickedButton.classList.add('border-b-2', 'border-brand-accent', 'bg-white');
}
function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
}
const modal = document.getElementById('modal-backdrop');
const modalContent = document.getElementById('modal-content');
function openLeadMagnet() {
modal.classList.remove('hidden');
// Small delay to allow display:block to apply before opacity transition
setTimeout(() => {
modal.classList.remove('opacity-0');
modalContent.classList.remove('scale-95');
modalContent.classList.add('scale-100');
}, 10);
}
function closeLeadMagnet() {
modal.classList.add('opacity-0');
modalContent.classList.remove('scale-100');
modalContent.classList.add('scale-95');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
}
// Close modal on backdrop click
modal.addEventListener('click', (e) => {
if (e.target === modal) closeLeadMagnet();
});
</script>
</body>
</html>
