Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Webdesign</title>

  
  <link href="https://fonts.cdnfonts.com/css/aquire" rel="stylesheet"/>
  
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet"/>

  <style>
    /* --- 1) Forceer de bestaande navbar over de hero heen en maak ‘m transparant --- */
    header,
    .navbar,
    #header,
    #navbar,
    nav {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      background: transparent !important;
      z-index: 9999 !important;
      transition: background 0.3s ease, position 0.3s ease;
    }

    /* --- 2) Zodra er gescrolled wordt: maak ‘m fixed met achtergrond --- */
    header.header-scrolled,
    .navbar.header-scrolled,
    #header.header-scrolled,
    #navbar.header-scrolled,
    nav.header-scrolled {
      position: fixed !important;
      background: rgba(0, 0, 0, 0.9) !important;
    }

    /* --- 3) Zorg dat de hero onder de navbar blijft --- */
    #vanta-bg {
      position: relative !important;
      z-index: 1 !important;
      margin-top: 0 !important;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      background: #000;
      color: white;
    }

    /* --- 4) Body reset --- */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #000;
      overflow-x: hidden;
    }

    /* --- 5) Geanimeerde teksten in de hero --- */
    .animated-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      margin: 0;
      text-align: center;
      font-family: 'Aquire', sans-serif;
      font-weight: 400;
      color: inherit;
      text-shadow:
        0 0 5px rgba(255,255,255,0.8),
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.2);
    }

    .first-text {
      font-size: 8vw;
      opacity: 0;
      animation: fadeInHoldFadeOut 1.5s ease forwards;
    }
    @keyframes fadeInHoldFadeOut {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    }

    .second-text {
      font-size: 8vw;
      opacity: 0;
      animation: appearAnim 1s ease-out forwards;
      animation-delay: 2.5s;
    }
    @keyframes appearAnim {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .sub-text {
      position: absolute;
      top: calc(50% + 6vw);
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      margin: 0;
      text-align: center;
      font-family: 'Raleway', sans-serif;
      font-size: 1.6rem;
      opacity: 0;
      animation: slideIn 2s ease forwards;
      animation-delay: 2.5s;
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-50%) translateY(50px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* --- 6) Responsive tweaks --- */
    @media (min-width: 1024px) {
      .first-text, .second-text { font-size: 6vw; }
      .sub-text {
        font-size: 1.4rem;
        top: calc(50% + 5vw);
      }
    }
    @media (max-width: 767px) {
      .first-text, .second-text { font-size: 10vw; }
      .sub-text {
        font-size: 1.2rem;
        top: calc(50% + 8vw);
      }
    }
  </style>
</head>
<body>

  
  <section id="vanta-bg">
    <h1 class="animated-text first-text">AI</h1>
    <h1 class="animated-text second-text">AQUIRE</h1>
    <p class="sub-text">AI Agents That Work 24/7/365.</p>
  </section>

  

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
  <script>
    VANTA.NET({
      el: "#vanta-bg",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0x888888,
      backgroundColor: 0x000000,
      points: 12.00,
      maxDistance: 30.00,
      spacing: 20.00
    });

    // 7) Scroll-detectie: navbar ‘komt terug’ zodra je niet helemaal bovenaan bent
    window.addEventListener('scroll', function() {
      document.querySelectorAll('header, .navbar, #header, #navbar, nav')
        .forEach(el => {
          if (window.scrollY > 0) {
            el.classList.add('header-scrolled');
          } else {
            el.classList.remove('header-scrolled');
          }
        });
    });
  </script>

</body>
</html>

Banner bento grid

Boost efficiency, streamline workflows, and elevate employee satisfaction, whether it’s hands-on steps you can implement today or cutting-edge AI solutions and intelligent agents, all engineered with top-tier security in mind.

Grow your organization with AI.

Text

<h2 style="white-space:pre-line">Our Creations</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AI Tools with Particle Background</title>
  <style>
    /* Global styles */
    body {
      margin: 0;
      font-family: sans-serif;
      background: #000;
      color: #fff;
    }
    .tools-section {
      padding: 60px 20px;
    }
    .tools-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;
    }
    .tool-card {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
      background: rgba(255,255,255,0.05);
      border: 1px solid #fff;
      border-radius: 12px;
      /* center content */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tool-card canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .tool-content {
      position: relative;
      z-index: 1;
      /* center text */
      text-align: center;
      /* allow vertical centering within flex container */
      pointer-events: none;
    }
    .tool-content h3 {
      margin: 0;
      font-size: 1.4rem;
      color: #fff;
    }
    .tool-content p {
      margin-top: 8px;
      font-size: 1rem;
      color: #fff;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <section class="tools-section">
    <div class="tools-grid">
      <div class="tool-card" data-title="24/7 AI Chatbot" data-text="An always-on assistant, delivering instant, precise answers."></div>
      <div class="tool-card" data-title="Instant AI SMS Outreach" data-text="Engage prospects in seconds with personalized texts."></div>
      <div class="tool-card" data-title="Comprehensive Market Analysis" data-text="Access deep research, real-time trends, and actionable intelligence."></div>
    </div>
  </section>
  <script>
    class Particle {
      constructor(width, height) {
        this.reset(width, height);
      }
      reset(w, h) {
        this.x = Math.random() * w;
        this.y = Math.random() * h;
        const speed = Math.random() * 0.5 + 0.2;
        const angle = Math.random() * Math.PI * 2;
        this.vx = Math.cos(angle) * speed;
        this.vy = Math.sin(angle) * speed;
      }
      update(w, h, speedFactor) {
        this.x += this.vx * speedFactor;
        this.y += this.vy * speedFactor;
        if (this.x < 0) this.x += w;
        if (this.x > w) this.x -= w;
        if (this.y < 0) this.y += h;
        if (this.y > h) this.y -= h;
      }
    }

    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const CONNECTION_THRESHOLD = 60;

    document.querySelectorAll('.tool-card').forEach(card => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      card.appendChild(canvas);

      const content = document.createElement('div');
      content.className = 'tool-content';
      content.innerHTML = `<h3>${card.dataset.title}</h3><p>${card.dataset.text}</p>`;
      card.appendChild(content);

      let particles = [];
      let isHover = false;
      let mouse = { x: 0, y: 0 };

      function resize() {
        canvas.width = card.clientWidth;
        canvas.height = card.clientHeight;
        particles = Array.from({ length: 50 }, () => new Particle(canvas.width, canvas.height));
      }
      resize();
      window.addEventListener('resize', resize);

      if (!isTouchDevice) {
        card.addEventListener('mousemove', e => {
          const rect = card.getBoundingClientRect();
          mouse.x = e.clientX - rect.left;
          mouse.y = e.clientY - rect.top;
        });
        card.addEventListener('mouseenter', () => (isHover = true));
        card.addEventListener('mouseleave', () => (isHover = false));
      } else {
        isHover = true;
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const speedFactor = isHover ? 2 : 1;

        particles.forEach((p, idx) => {
          p.update(canvas.width, canvas.height, speedFactor);
          ctx.fillStyle = 'rgba(136,136,136,0.7)';
          ctx.beginPath();
          ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
          ctx.fill();

          for (let j = idx + 1; j < idx + 6 && j < particles.length; j++) {
            const other = particles[j];
            const dx = p.x - other.x;
            const dy = p.y - other.y;
            const dist = Math.hypot(dx, dy);
            if (dist < CONNECTION_THRESHOLD) {
              const alpha = 1 - dist / CONNECTION_THRESHOLD;
              ctx.strokeStyle = `rgba(136,136,136,${alpha * 0.6})`;
              ctx.beginPath();
              ctx.moveTo(p.x, p.y);
              ctx.lineTo(other.x, other.y);
              ctx.stroke();
            }
          }
        });

        requestAnimationFrame(animate);
      }

      animate();
    });
  </script>
</body>
</html>


Logo showcase

Are You Next?

<h2 style="white-space:pre-line">Results Within Days</h2>

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Responsive KPI Dashboard</title>
  <style>
    .container {
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
      padding: 30px 20px;
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      background: #111;
      font-family: Arial, sans-serif;
    }
    .dashboard {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      width: 100%;
      box-sizing: border-box;
    }
    .metric {
      flex: 1 1 200px;
      min-width: 200px;
      text-align: center;
    }
    .metric h3 {
      margin: 0 0 10px;
      font-size: 1.1rem;
      color: #fff;
    }
    .metric .value {
      margin: 0;
      font-size: 2.5rem;
      font-weight: bold;
      color: #fff;
      position: relative;
      min-height: 1em;
    }
    @keyframes aiGlow {
      from { text-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 12px rgba(255,255,255,0.4); }
      to   { text-shadow: 0 0 16px rgba(255,255,255,0.9), 0 0 24px rgba(255,255,255,0.6); }
    }
    .value.counting {
      animation: aiGlow 0.6s ease-in-out infinite alternate;
    }
    @media (max-width: 600px) {
      .dashboard { gap: 20px; }
      .metric { flex: 1 1 100%; min-width: auto; }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="dashboard">
      <div class="metric">
        <h3>Time Saved</h3>
        <p class="value" id="time-saved">0%</p>
      </div>
      <div class="metric">
        <h3>Generated Leads</h3>
        <p class="value" id="leads-filtered">0%</p>
      </div>
      <div class="metric">
        <h3>Customers</h3>
        <p class="value" id="customers">0</p>
      </div>
    </div>
  </div>

  <script>
    const data = {
      "time-saved":     Math.round(0.82 * 100),
      "leads-filtered": Math.round(0.47 * 100),
      "customers":      60
    };
    const duration = 2000; // totale animatieduur in ms

    function animateCount(id, end, duration, suffix = '') {
      const el = document.getElementById(id);
      el.classList.add('counting');
      const startTime = performance.now();

      function step(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const current = Math.floor(progress * end);
        el.textContent = current + suffix;

        if (progress < 1) {
          requestAnimationFrame(step);
        } else {
          el.classList.remove('counting');
          el.textContent = end + suffix; // zorg dat we precies eindigen
        }
      }

      requestAnimationFrame(step);
    }

    // scroll-trigger via IntersectionObserver
    const observer = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id     = entry.target.id;
          const end    = data[id];
          const suffix = id === "customers" ? "" : "%";
          animateCount(id, end, duration, suffix);
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });

    document.querySelectorAll('.value').forEach(el => observer.observe(el));
  </script>

</body>
</html>


Call to action

At AQUIRE we guaranty great results. If there are no results you won't get a bill! Easy right?

AI

AQUIRE

Grow your organization with AI.

Our Creations

Are You Next?

Results Within Days

Time Saved

Generated Leads

Customers

0 Results, 0 Costs