index.html

---
layout: default
description: Software that's baked to perfection. CookieBytes builds digital products with warmth, precision, and a little love.
extra_css:
  - /assets/css/home.css
---
<section class="hero">
  <div class="hero-bg"></div>
  <div class="floating-cookies">
    <span class="fc" style="left:8%;top:70%;animation-duration:18s;animation-delay:0s;"><svg width="40" height="40" viewBox="0 0 80 80"><defs><mask id="fb1"><rect width="80" height="80" fill="white"/><ellipse cx="56" cy="10" rx="6" ry="7" fill="black"/><ellipse cx="67" cy="13" rx="5.5" ry="6.5" fill="black"/><ellipse cx="75" cy="22" rx="5" ry="6" fill="black"/><ellipse cx="60" cy="22" rx="6" ry="7" fill="black"/><ellipse cx="71" cy="30" rx="5" ry="6" fill="black"/><ellipse cx="24" cy="70" rx="5.5" ry="6.5" fill="black"/><ellipse cx="13" cy="67" rx="5" ry="6" fill="black"/><ellipse cx="5" cy="58" rx="4.5" ry="5.5" fill="black"/><ellipse cx="20" cy="58" rx="5.5" ry="6.5" fill="black"/><ellipse cx="9" cy="50" rx="4.5" ry="5.5" fill="black"/></mask></defs><g mask="url(#fb1)"><circle cx="40" cy="40" r="36" fill="#C97B3A"/><circle cx="40" cy="40" r="30" fill="#D4893F"/><circle cx="26" cy="34" r="4" fill="#7A3E10"/><circle cx="46" cy="32" r="3" fill="#7A3E10"/><circle cx="52" cy="50" r="3.5" fill="#7A3E10"/><circle cx="32" cy="52" r="2.5" fill="#7A3E10"/></g></svg></span>
    <span class="fc" style="left:85%;top:75%;animation-duration:22s;animation-delay:4s;"><svg width="48" height="48" viewBox="0 0 80 80"><defs><mask id="fb2"><rect width="80" height="80" fill="white"/><ellipse cx="56" cy="10" rx="6" ry="7" fill="black"/><ellipse cx="67" cy="13" rx="5.5" ry="6.5" fill="black"/><ellipse cx="75" cy="22" rx="5" ry="6" fill="black"/><ellipse cx="60" cy="22" rx="6" ry="7" fill="black"/><ellipse cx="71" cy="30" rx="5" ry="6" fill="black"/><ellipse cx="24" cy="70" rx="5.5" ry="6.5" fill="black"/><ellipse cx="13" cy="67" rx="5" ry="6" fill="black"/><ellipse cx="5" cy="58" rx="4.5" ry="5.5" fill="black"/><ellipse cx="20" cy="58" rx="5.5" ry="6.5" fill="black"/><ellipse cx="9" cy="50" rx="4.5" ry="5.5" fill="black"/></mask></defs><g mask="url(#fb2)"><circle cx="40" cy="40" r="36" fill="#C97B3A"/><circle cx="40" cy="40" r="30" fill="#D4893F"/><circle cx="26" cy="34" r="4" fill="#7A3E10"/><circle cx="50" cy="28" r="3" fill="#7A3E10"/><circle cx="52" cy="50" r="3.5" fill="#7A3E10"/><circle cx="32" cy="52" r="2.5" fill="#7A3E10"/></g></svg></span>
    <span class="fc" style="left:22%;top:82%;animation-duration:15s;animation-delay:2s;"><svg width="28" height="28" viewBox="0 0 80 80"><defs><mask id="fb3"><rect width="80" height="80" fill="white"/><ellipse cx="56" cy="10" rx="6" ry="7" fill="black"/><ellipse cx="67" cy="13" rx="5.5" ry="6.5" fill="black"/><ellipse cx="75" cy="22" rx="5" ry="6" fill="black"/><ellipse cx="60" cy="22" rx="6" ry="7" fill="black"/><ellipse cx="71" cy="30" rx="5" ry="6" fill="black"/><ellipse cx="24" cy="70" rx="5.5" ry="6.5" fill="black"/><ellipse cx="13" cy="67" rx="5" ry="6" fill="black"/><ellipse cx="5" cy="58" rx="4.5" ry="5.5" fill="black"/><ellipse cx="20" cy="58" rx="5.5" ry="6.5" fill="black"/><ellipse cx="9" cy="50" rx="4.5" ry="5.5" fill="black"/></mask></defs><g mask="url(#fb3)"><circle cx="40" cy="40" r="36" fill="#C97B3A"/><circle cx="40" cy="40" r="30" fill="#D4893F"/><circle cx="30" cy="38" r="4" fill="#7A3E10"/><circle cx="50" cy="50" r="3" fill="#7A3E10"/></g></svg></span>
    <span class="fc" style="left:65%;top:78%;animation-duration:20s;animation-delay:7s;"><svg width="52" height="52" viewBox="0 0 80 80"><defs><mask id="fb4"><rect width="80" height="80" fill="white"/><ellipse cx="56" cy="10" rx="6" ry="7" fill="black"/><ellipse cx="67" cy="13" rx="5.5" ry="6.5" fill="black"/><ellipse cx="75" cy="22" rx="5" ry="6" fill="black"/><ellipse cx="60" cy="22" rx="6" ry="7" fill="black"/><ellipse cx="71" cy="30" rx="5" ry="6" fill="black"/><ellipse cx="24" cy="70" rx="5.5" ry="6.5" fill="black"/><ellipse cx="13" cy="67" rx="5" ry="6" fill="black"/><ellipse cx="5" cy="58" rx="4.5" ry="5.5" fill="black"/><ellipse cx="20" cy="58" rx="5.5" ry="6.5" fill="black"/><ellipse cx="9" cy="50" rx="4.5" ry="5.5" fill="black"/></mask></defs><g mask="url(#fb4)"><circle cx="40" cy="40" r="36" fill="#C97B3A"/><circle cx="40" cy="40" r="30" fill="#D4893F"/><circle cx="26" cy="34" r="4" fill="#7A3E10"/><circle cx="46" cy="32" r="3" fill="#7A3E10"/><circle cx="52" cy="50" r="3.5" fill="#7A3E10"/></g></svg></span>
  </div>
  <h1>Software that's <em>baked</em><br>to perfection.</h1>
  <p class="hero-sub">CookieBytes builds digital products with warmth, precision, and a little love — just like the best homemade cookies. Sweet results, zero crumbs.</p>
  <div class="hero-actions">
    <a href="#contact" class="btn-primary">Start a project</a>
    <a href="#about" class="btn-secondary">Meet the team →</a>
  </div>
  <div class="dog-strip">
    <div class="dog-avatar">{% include cookie-logo.html size=24 id="strip" %}</div>
    <span>Powered by code, caffeine, and <strong>4 animals</strong> who run the place</span>
  </div>
</section>

<section class="services-bg" id="services">
  <div class="container">
    <p class="section-label">// what we bake</p>
    <h2 class="section-title">Full-stack flavours for every appetite.</h2>
    <p class="section-desc">From crispy MVPs to layered enterprise platforms — we craft software that feels exactly right.</p>
    <div class="services-grid">
      <div class="service-card"><div class="service-icon" style="background:#D4EDEA;">📱</div><h3>Mobile Apps</h3><p>Native-quality mobile experiences for iOS and Android. Smooth interactions, offline-first, and ready for scale.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#FDF0E0;">🔧</div><h3>API & Backend</h3><p>Robust, well-documented APIs and backend systems. Built for reliability, security, and the kind of uptime that lets you sleep at night.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#FFF4E0;">🎨</div><h3>Product Design</h3><p>UX and UI with personality. We design interfaces that feel human — intuitive, warm, and worth coming back to.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#E8F5EE;">🚀</div><h3>DevOps & Scale</h3><p>CI/CD, containerization, and cloud architecture. We get your code shipped cleanly and keep it running at any load.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#EEF2FF;">🏗️</div><h3>Infrastructure</h3><p>From cloud provisioning to on-premise setups, we design and manage infrastructure that's resilient, cost-efficient, and built to grow with you.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#FDF4FF;">🌐</div><h3>Network</h3><p>Secure, high-performance network design and management. We make sure your systems talk to each other reliably — and that the wrong ones don't.</p></div>
      <div class="service-card"><div class="service-icon" style="background:#FFEEDD;">🏠</div><h3>Home Automation</h3><p>Smart-home installs, IoT integrations, and Home Assistant setups. We make your space respond to you — lights, sensors, routines, all in sync.</p></div>
    </div>
  </div>
</section>

<section id="about">
  <div class="container">
    <p class="section-label">// our story</p>
    <h2 class="section-title">Named after animals. Built for the long run.</h2>
    <div class="about-intro">
      <p class="section-desc" style="margin-bottom:1rem;">CookieBytes started with two things: a love of clean code and a dog named Cookie. The cookies? They represent warmth, care, and the satisfaction of something made just right. Bytes? That's all the software magic happening behind the scenes.</p>
      <p class="section-desc" style="margin-bottom:0;">Then Billy joined, Rocky knocked things off shelves, and Peggy started judging everyone's code reviews. We're a small, focused studio — no bloat, no fluff, and four animals who definitely run the place.</p>
    </div>
    <div class="crew-divider"><span>🐾 The crew</span></div>
    <div class="crew-grid" style="margin-bottom:1.2rem;">
      <div class="crew-card cookie-card"><span class="crew-emoji">🐕</span><h3>Cookie</h3><p>The original. Calm, dependable, and deeply invested in every product decision. Has never missed a standup.</p><span class="crew-chip">Chief Happiness Officer</span></div>
      <div class="crew-card billy-card"><span class="crew-emoji">🐶</span><h3>Billy</h3><p>Joined like a wrecking ball and hasn't slowed down. Responsible for 3 pivots, 2 rebrands, and one keyboard that didn't survive.</p><span class="crew-chip">Chief Disruption Officer</span></div>
      <div class="crew-card rocky-card"><span class="crew-emoji">🐱</span><h3>Rocky</h3><p>Treats every sprint like a playground. Has personally deleted two Figma files, one production config, and half a sandwich.</p><span class="crew-chip">Head of Chaos Engineering</span></div>
      <div class="crew-card peggy-card"><span class="crew-emoji">🐈</span><h3>Peggy</h3><p>Watches. Thinks. Judges silently. Her feedback is rare but devastating. The team has learned to take it seriously.</p><span class="crew-chip">Director of Silent Reviews</span></div>
    </div>
    <div class="stat-solo">
      <div class="stat-num">4🍪</div>
      <div class="stat-label">Daily treats — split evenly, negotiated daily, disputed always</div>
    </div>
  </div>
</section>

<section class="cta-section" id="contact">
  <div class="container">
    <div class="cta-box">
      <div class="cta-top">
        <h2>Ready to bake something great?</h2>
        <p>Tell us about your project. We'll bring the butter, you bring the idea.</p>
      </div>

      <div class="cta-form" id="contactForm">
        <form id="formFields" onsubmit="handleSubmit(event)">
          <!-- Web3Forms required: replace YOUR_ACCESS_KEY_HERE with the key from web3forms.com -->
          <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
          <input type="hidden" name="subject" value="New CookieBytes contact form submission 🍪">
          <input type="hidden" name="from_name" value="CookieBytes Website">
          <input type="hidden" name="redirect" value="false">
          <!-- honeypot field to block bots -->
          <input type="checkbox" name="botcheck" class="honeypot" tabindex="-1" autocomplete="off">

          <div class="form-row">
            <div class="form-group"><label for="fname">Name</label><input type="text" id="fname" name="name" placeholder="Your name" autocomplete="off" required></div>
            <div class="form-group"><label for="femail">Email</label><input type="email" id="femail" name="email" placeholder="your@email.com" autocomplete="off" required></div>
          </div>
          <div class="form-group"><label for="fmessage">Message</label><textarea id="fmessage" name="message" placeholder="Tell us about your project…" required></textarea></div>

          <div class="captcha-box" id="captchaBox" onclick="handleCaptcha()">
            <div class="captcha-left">
              <div class="captcha-checkbox" id="captchaCheck"><svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
              <span class="captcha-label" id="captchaLabel">I'm not a robot 🤖</span>
            </div>
            <div class="captcha-right"><span class="captcha-logo">🍪</span><span class="captcha-brand">CookieCaptcha</span></div>
          </div>

          <button type="submit" class="form-submit" id="submitBtn" disabled>Send message</button>
          <div class="form-error" id="formError">Something went wrong. Please try again or email us directly.</div>
        </form>

        <div class="form-success" id="formSuccess">
          <span class="form-success-emoji">🐕</span>
          <h3>Message received!</h3>
          <p>Cookie is already wagging. We'll be in touch very soon.</p>
        </div>
      </div>

      <div class="cta-divider"><span>or just send us an email directly</span></div>
      <div class="cta-email-wrap">
        <a href="mailto:hello@cookiebytes.pt" class="cta-email-pill"><span>🍪</span> hello@cookiebytes.pt</a>
      </div>
    </div>
  </div>
</section>

<script>
  let captchaDone = false;

  function handleCaptcha() {
    if (captchaDone) return;
    const check = document.getElementById('captchaCheck');
    const label = document.getElementById('captchaLabel');
    const btn = document.getElementById('submitBtn');
    const box = document.getElementById('captchaBox');
    label.textContent = 'Verifying…';
    box.style.pointerEvents = 'none';
    setTimeout(() => {
      check.classList.add('checked');
      label.textContent = 'Human confirmed 🐾';
      captchaDone = true;
      btn.disabled = false;
    }, 900);
  }

  async function handleSubmit(event) {
    event.preventDefault();
    if (!captchaDone) {
      alert('Please complete the captcha first.');
      return;
    }
    const form = event.target;
    const btn = document.getElementById('submitBtn');
    const errorEl = document.getElementById('formError');
    errorEl.classList.remove('visible');

    btn.disabled = true;
    btn.textContent = 'Sending…';

    const formData = new FormData(form);
    const json = JSON.stringify(Object.fromEntries(formData));

    try {
      const response = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: json
      });
      const result = await response.json();
      if (result.success) {
        document.getElementById('formFields').style.display = 'none';
        document.getElementById('formSuccess').classList.add('visible');
      } else {
        console.error('Web3Forms error:', result);
        errorEl.textContent = result.message || 'Something went wrong. Please try again or email us directly.';
        errorEl.classList.add('visible');
        btn.disabled = false;
        btn.textContent = 'Send message';
      }
    } catch (err) {
      console.error(err);
      errorEl.textContent = 'Network error. Please try again or email us directly.';
      errorEl.classList.add('visible');
      btn.disabled = false;
      btn.textContent = 'Send message';
    }
  }
</script>