saboivan2008-png · saboivan2008-png · Aug 11, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# Atforna AI Asistent
+
+Úvodná web aplikácia pre koncept samoobslužnej AI platformy, ktorá pomáha firmám predávať služby, objednávať web dizajn, udržiavať weby a zadávať programátorské práce.
+
+## Funkcie prototypu
+
+- Landing page v slovenčine pre produkt Atforna AI.
+- Sekcia služieb pre automatický predaj, web dizajn, kódovanie a údržbu webov.
+- Vysvetlený proces od požiadavky zákazníka po objednávku.
+- Interaktívny konfigurátor, ktorý podľa typu firmy, potrieb a cieľa dopytov pripraví odporúčaný balík.
+- Responzívny dizajn pripravený na ďalšie rozšírenie o formulár, platby, CRM a AI workflow.
+
+## Ďalší plán
+
+1. Pridať reálny lead formulár a validáciu kontaktu.
+2. Napojiť konfigurátor na AI generovanie briefu.
+3. Pridať platobný tok, CRM pipeline a klientsky dashboard.
+
+## Spustenie
+
+```bash
+npm install
+npm run dev
+```
+
+## Produkčný build
+
+```bash
+npm run build
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="sk">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Atforna AI Asistent</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="hero">
+        <nav class="nav" aria-label="Hlavná navigácia">
+          <div class="brand"><span aria-hidden="true">🤖</span> Atforna AI</div>
+          <div class="navLinks">
+            <a href="#sluzby">Služby</a>
+            <a href="#konfigurator">Konfigurátor</a>
+            <a href="#roadmapa">Roadmapa</a>
+          </div>
+          <a href="#kontakt" class="navCta">Začať projekt</a>
+        </nav>
+
+        <div class="heroGrid">
+          <div>
+            <p class="eyebrow">Evolve build: AI obchodník + web tím</p>
+            <h1>AI asistent, ktorý vie predať balík, spísať zadanie a pripraviť webový plán.</h1>
+            <p class="lead">
+              Atforna spája predajnú landing page, inteligentný brief a odporúčanie služieb pre firmy,
+              ktoré potrebujú web dizajn, údržbu, automatizácie alebo programátorské práce bez zdĺhavých e-mailov.
+            </p>
+            <div class="actions">
+              <a href="#konfigurator" class="button primary">Vyskladať balík</a>
+              <a href="#ako-to-funguje" class="button secondary">Ako to funguje</a>
+            </div>
+          </div>
+          <aside class="assistantCard" aria-label="Ukážka AI asistenta">
+            <div class="cardHeader"><span aria-hidden="true">🌐</span> Online obchodný asistent</div>
+            <div class="chatBubble user">Potrebujem nový web a reklamu pre servis.</div>
+            <div class="chatBubble ai">Navrhnem balík: landing page, formulár, SEO texty a mesačnú údržbu. Chcete cenovú ponuku?</div>
+            <div class="metric"><span aria-hidden="true">📈</span> Priorita: zvýšiť počet dopytov do 30 dní</div>
+          </aside>
+        </div>
+      </section>
+
+      <section id="sluzby" class="section">
+        <p class="eyebrow">Čo aplikácia pokrýva</p>
+        <h2>Jedna platforma pre predaj, weby a technickú podporu.</h2>
+        <div class="cards">
+          <article class="serviceCard">
+            <div class="icon" aria-hidden="true">🛒</div>
+            <h3>Automatický predaj</h3>
+            <p>AI asistent pripraví ponuku, odpovedá zákazníkom a smeruje ich na objednávku alebo konzultáciu.</p>
+          </article>
+          <article class="serviceCard">
+            <div class="icon" aria-hidden="true">🎨</div>
+            <h3>Web dizajn</h3>
+            <p>Tvorba moderných landing page, produktových stránok a jasných predajných textov pre malé firmy.</p>
+          </article>
+          <article class="serviceCard">
+            <div class="icon" aria-hidden="true">💻</div>
+            <h3>Kódovanie na mieru</h3>
+            <p>Pomoc s úpravami webu, formulármi, automatizáciami, integráciami a internými nástrojmi.</p>
+          </article>
+          <article class="serviceCard">
+            <div class="icon" aria-hidden="true">🛠️</div>
+            <h3>Údržba webov</h3>
+            <p>Priebežné aktualizácie obsahu, opravy chýb, kontrola výkonu a bezpečnostné odporúčania.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="konfigurator" class="section configurator">
+        <div class="configIntro">
+          <p class="eyebrow">Interaktívny štart</p>
+          <h2>Vyberte cieľ firmy a Atforna pripraví odporúčaný balík.</h2>
+          <p>Konfigurátor simuluje prvý krok AI asistenta: zistí potrebu, vypočíta orientačný rozsah a vytvorí brief pre ďalší vývoj.</p>
+        </div>
+        <div class="configPanel">
+          <form id="briefForm" class="briefForm">
+            <label>
+              Typ firmy
+              <select id="businessType" name="businessType">
+                <option value="service">Lokálna služba</option>
+                <option value="shop">E-shop alebo produkt</option>
+                <option value="startup">Startup / SaaS</option>
+              </select>
+            </label>
+            <fieldset>
+              <legend>Čo má AI riešiť?</legend>
+              <label><input type="checkbox" name="needs" value="web" checked /> Nový alebo lepší web</label>
+              <label><input type="checkbox" name="needs" value="sales" checked /> Predajný asistent</label>
+              <label><input type="checkbox" name="needs" value="maintenance" /> Mesačná údržba</label>
+              <label><input type="checkbox" name="needs" value="automation" /> Automatizácie a kódovanie</label>
+            </fieldset>
+            <label>
+              Mesačný cieľ dopytov
+              <input id="leadGoal" type="range" min="10" max="200" step="10" value="50" />
+              <span id="leadGoalValue">50 dopytov</span>
+            </label>
+          </form>
+          <article class="recommendation" aria-live="polite">
+            <p class="eyebrow">Odporúčanie</p>
+            <h3 id="packageName">Growth web + AI predaj</h3>
+            <p id="packageSummary">Landing page, predajný skript asistenta, kontaktný formulár a plán prvých automatizácií.</p>
+            <dl>
+              <div><dt>Odhad štartu</dt><dd id="timeline">2–3 týždne</dd></div>
+              <div><dt>Rozsah</dt><dd id="scope">4 moduly</dd></div>
+              <div><dt>Priorita</dt><dd id="priority">Získať viac dopytov</dd></div>
+            </dl>
+          </article>
+        </div>
+      </section>
+
+      <section id="ako-to-funguje" class="section split">
+        <div>
+          <p class="eyebrow">Proces</p>
+          <h2>Od nápadu po objednávku bez zbytočných krokov.</h2>
+          <p>
+            Web slúži ako predajná vrstva: vysvetlí hodnotu služby, zozbiera požiadavky a pripraví tímu prehľadný podklad na realizáciu.
+          </p>
+        </div>
+        <ol class="steps">
+          <li>Zákazník príde na web a opíše, čo potrebuje.</li>
+          <li>AI asistent odporučí balík služieb, cenu a ďalší krok.</li>
+          <li>Firma dostane jasný brief, objednávku a plán realizácie.</li>
+        </ol>
+      </section>
+
+      <section id="roadmapa" class="section roadmap">
+        <p class="eyebrow">Ďalší vývoj</p>
+        <h2>Roadmapa pre skutočnú samoobslužnú aplikáciu.</h2>
+        <div class="roadmapGrid">
+          <article><strong>1</strong><h3>Lead formulár</h3><p>Zber kontaktu, rozpočtu, cieľa a termínu realizácie.</p></article>
+          <article><strong>2</strong><h3>AI brief</h3><p>Generovanie štruktúrovaného zadania pre dizajn, web a automatizácie.</p></article>
+          <article><strong>3</strong><h3>Platby a CRM</h3><p>Objednávky, fakturácia, pipeline a stav projektu pre klienta.</p></article>
+        </div>
+      </section>
+
+      <section id="kontakt" class="cta">
+        <div class="ctaIcon" aria-hidden="true">✅</div>
+        <h2>Pripravené ako základ pre ďalší vývoj.</h2>
+        <p>Ďalším krokom môže byť objednávkový formulár, administrácia, platby, CRM a napojenie na reálne AI workflow.</p>
+        <a href="mailto:info@atforna.ai" class="button primary">Kontaktovať Atforna AI</a>
+      </section>
+    </main>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "dev": "python3 -m http.server 5173",
+    "build": "node scripts/build.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}
diff --git a/scripts/build.mjs b/scripts/build.mjs
@@ -0,0 +1,9 @@
+import { cp, mkdir, rm } from 'node:fs/promises';
+
+await rm('dist', { force: true, recursive: true });
+await mkdir('dist/src', { recursive: true });
+await cp('index.html', 'dist/index.html');
+await cp('src/styles.css', 'dist/src/styles.css');
+await cp('src/main.js', 'dist/src/main.js');
+
+console.log('Built static site into dist/');
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,66 @@
+const navLinks = document.querySelectorAll('a[href^="#"]');
+const briefForm = document.querySelector('#briefForm');
+const leadGoal = document.querySelector('#leadGoal');
+const leadGoalValue = document.querySelector('#leadGoalValue');
+const packageName = document.querySelector('#packageName');
+const packageSummary = document.querySelector('#packageSummary');
+const timeline = document.querySelector('#timeline');
+const scope = document.querySelector('#scope');
+const priority = document.querySelector('#priority');
+
+const packages = {
+  service: {
+    name: 'Lokálny growth web + AI predaj',
+    priority: 'Získať viac telefonátov a dopytov',
+  },
+  shop: {
+    name: 'Produktový predajný systém',
+    priority: 'Premeniť návštevníkov na objednávky',
+  },
+  startup: {
+    name: 'SaaS launch kit s AI onboardingom',
+    priority: 'Vysvetliť produkt a zbierať kvalifikované leady',
+  },
+};
+
+const needLabels = {
+  web: 'landing page alebo redesign',
+  sales: 'AI predajný skript',
+  maintenance: 'mesačná údržba',
+  automation: 'automatizácie a kódovanie',
+};
+
+navLinks.forEach((link) => {
+  link.addEventListener('click', (event) => {
+    const targetId = link.getAttribute('href');
+    const target = document.querySelector(targetId);
+
+    if (!target) return;
+
+    event.preventDefault();
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
+});
+
+function updateRecommendation() {
+  if (!briefForm) return;
+
+  const formData = new FormData(briefForm);
+  const businessType = formData.get('businessType');
+  const selectedNeeds = formData.getAll('needs');
+  const leadTarget = Number(leadGoal.value);
+  const selectedPackage = packages[businessType];
+  const modules = selectedNeeds.length || 1;
+  const weekEstimate = modules >= 4 ? '4–6 týždňov' : modules === 3 ? '3–4 týždne' : '2–3 týždne';
+  const focus = selectedNeeds.map((need) => needLabels[need]).join(', ');
+
+  leadGoalValue.textContent = `${leadTarget} dopytov`;
+  packageName.textContent = selectedPackage.name;
+  packageSummary.textContent = `Odporúčaný štart: ${focus}. Cieľ je pripraviť systém, ktorý zvládne približne ${leadTarget} dopytov mesačne.`;
+  timeline.textContent = weekEstimate;
+  scope.textContent = `${modules} ${modules === 1 ? 'modul' : modules < 5 ? 'moduly' : 'modulov'}`;
+  priority.textContent = selectedPackage.priority;
+}
+
+briefForm?.addEventListener('input', updateRecommendation);
+updateRecommendation();