Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Opális Webdesign - Werkwijze</title>
  <style>
    :root{
      --primary:#1877f2;
      --primary-dark:#125ac0;
      --text-main:#ffffff;
      --text-muted:#d8e2ee;
      --transition:.25s ease;
      --font-stack:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",-system-ui,sans-serif;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:var(--font-stack);
      background:
        radial-gradient(circle at top left, rgba(24,119,242,.12), transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,.6), transparent 60%),
        #071821;
      color:var(--text-main);
      overflow-x:hidden;
    }

    /* ------------------- TAAKBALK ------------------- */
    .taakbalk{
      position:fixed;top:16px;left:50%;transform:translateX(-50%);
      padding:12px 22px;display:flex;align-items:center;gap:26px;justify-content:space-between;
      backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
      background:radial-gradient(circle at top left, rgba(24,119,242,.14), transparent 70%) rgba(5,16,24,.74);
      border-radius:999px;border:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 48px rgba(0,0,0,.32);
      z-index:9999;width:max(68%,960px);max-width:1180px;transition:var(--transition)
    }
    .taakbalk.scrolled{padding:9px 20px;background:radial-gradient(circle at top left, rgba(24,119,242,.18), transparent 75%) rgba(3,10,15,.96);border-color:rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.45)}
    .logo{font-size:1.2rem;font-weight:700;letter-spacing:.08em;color:#fff}
    .logo span{color:var(--primary)}
    .nav{display:flex;gap:24px;font-size:.9rem;color:var(--text-muted);align-items:center;flex:1;justify-content:center}
    .nav a{text-decoration:none;color:inherit;position:relative;padding-bottom:3px;transition:var(--transition)}
    .nav a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--primary);transition:var(--transition);border-radius:999px;transform:translateX(-50%)}
    .nav a:hover{color:#fff}.nav a:hover::after{width:16px}
    .taakbalk-cta{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .btn-primary-outline{padding:8px 16px;border-radius:999px;border:1px solid var(--primary);color:var(--primary);font-size:.8rem;font-weight:600;transition:var(--transition);background:rgba(3,8,14,.6);backdrop-filter:blur(14px)}
    .btn-primary-outline:hover{background:var(--primary);color:#fff;box-shadow:0 8px 22px rgba(24,119,242,.38);transform:translateY(-1px)}
    @media (max-width:980px){.nav{display:none}.taakbalk{width:94%}}

    /* ------------------- WERKWIJZE ------------------- */
    .process-section{
      padding:140px 0 60px;
      background:
        radial-gradient(1000px 600px at 10% -10%, rgba(24,119,242,.12), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(0,0,0,.45), transparent 60%),
        #071821;
    }
    .process-wrap{width:min(1180px,92%);margin:0 auto;color:var(--text-main)}
    .process-head{max-width:760px;margin:0 auto 26px;text-align:center}
    .process-pill{
      display:inline-flex;gap:10px;align-items:center;
      padding:8px 14px;border-radius:999px;
      background:#e5f1ff;color:#0b1c2b;font-size:.78rem;box-shadow:0 8px 20px rgba(0,0,0,.14)
    }
    .process-pill .left{background:var(--primary);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;letter-spacing:.06em}
    .process-pill .right{font-weight:600;letter-spacing:.04em}
    .process-head h2{margin:14px 0 6px;font-size:2rem;letter-spacing:.01em}
    .process-sub{color:var(--text-muted);opacity:.9}

    .process-steps{
      position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
      counter-reset: step;list-style:none;margin-top:24px
    }
    .process-steps::before{
      content:"";position:absolute;top:42px;left:0;right:0;height:2px;
      background:linear-gradient(90deg, rgba(24,119,242,.25), rgba(255,255,255,.06));
      border-radius:999px
    }

    /* ========= HALO / GLOW CARDS ========= */
    .step{position:relative;z-index:1}
    .step-card{
      position:relative;
      border-radius:24px;
      border:1px solid transparent;
      background:
        linear-gradient(to bottom, rgba(10,25,38,0.92), rgba(10,25,38,0.78)) padding-box,
        linear-gradient(180deg, rgba(24,119,242,0.55), rgba(255,255,255,0.12) 55%, rgba(24,119,242,0.38)) border-box;
      box-shadow:
        0 14px 38px rgba(0,0,0,0.38),
        0 2px 0 rgba(255,255,255,0.04) inset,
        0 0 0 1px rgba(24,119,242,0.18) inset;
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      padding:18px 16px 16px;
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
      overflow:hidden;
    }
    .step-card::before{
      content:"";
      position:absolute;
      inset:-14px;
      border-radius:inherit;
      background:
        radial-gradient(60% 55% at 50% -8%, rgba(24,119,242,0.42), transparent 65%),
        radial-gradient(80% 60% at 50% 120%, rgba(24,119,242,0.22), transparent 70%);
      filter:blur(18px);
      opacity:.75;
      z-index:0;
      pointer-events:none;
    }
    .step-card::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(to bottom, rgba(255,255,255,0.10), transparent 25%);
      mix-blend-mode:screen;
      opacity:.6;
      z-index:0;
      pointer-events:none;
    }
    .step-card > *{position:relative;z-index:2}
    .step-card:hover,
    .step-card:focus-within{
      transform:translateY(-6px);
      box-shadow:
        0 22px 70px rgba(0,0,0,0.55),
        0 0 0 1px rgba(24,119,242,0.22) inset,
        0 0 60px rgba(24,119,242,0.30);
      border-color:rgba(24,119,242,0.55);
    }

    @media (prefers-reduced-motion:no-preference){
      .step-card::before{animation:opalis-breathe 7s ease-in-out infinite alternate;}
      @keyframes opalis-breathe{
        from{opacity:.55;filter:blur(16px);transform:translateY(0);}
        to{opacity:.82;filter:blur(22px);transform:translateY(-2px);}
      }
    }

    .step-top{display:flex;align-items:center;justify-content:space-between}
    .step-number{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:rgba(135,168,210,.9)}
    .step-badge{font-size:.72rem;border:1px solid rgba(255,255,255,.14);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-muted)}
    .step-badge.blue{border-color:rgba(24,119,242,.46);background:rgba(24,119,242,.14);color:#a9c9ff}
    .step-badge.green{border-color:rgba(27,195,116,.4);background:rgba(27,195,116,.14);color:#bdf0d7}
    .step-title{font-size:1.06rem;line-height:1.35;font-weight:700}
    .step-text{color:var(--text-muted);line-height:1.7}
    .step-tags{display:flex;flex-wrap:wrap;gap:6px}
    .step-tags span{
      font-size:.72rem;padding:4px 10px;border-radius:999px;
      background:rgba(3,10,16,.98);
      border:1px solid rgba(255,255,255,.08);
      color:rgba(216,226,238,.94)
    }

    .process-cta{display:flex;justify-content:center;margin-top:35px}

    @media (max-width:1024px){
      .process-steps{grid-template-columns:repeat(2,1fr)}
      .process-steps::before{display:none}
    }
    @media (max-width:540px){
      .process-head h2{font-size:1.6rem}
      .process-steps{grid-template-columns:1fr}
      .step-card{box-shadow:0 10px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(24,119,242,0.16) inset;}
      .step-card::before{filter:blur(14px);opacity:.6;}
    }
  </style>
</head>
<body>


<div class="taakbalk">
  <div class="logo">Opális<span>Webdesign</span></div>
  <nav class="nav">
    <a href="/">Home</a>
    <a href="/#diensten">Diensten</a>
    <a href="/#werkwijze">Werkwijze</a>
    <a href="/#cases">Cases</a>
    <a href="/#team">The Team</a>
    <a href="/#contact">Contact</a>
  </nav>
  <div class="taakbalk-cta">
    <a href="#contact" class="text-link">Offerte</a>
    <a href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call" class="btn-primary-outline">Plan een call</a>
  </div>
</div>


<section class="process-section" id="werkwijze" aria-labelledby="werkwijze-title">
  <div class="process-wrap">

    <header class="process-head">
      <div class="process-pill">
        <span class="left">OPÁLIS</span>
        <span class="right">WERKWIJZE</span>
      </div>
      <h2 id="werkwijze-title">Zakelijk. Strak. Energiek.</h2>
      <p class="process-sub">
        Vertrouwen eerst. We laten je precies zien hoe we werken — en zorgen dat je na deze sectie
        met een goed gevoel een call plant.
      </p>
    </header>

    <ol class="process-steps">
      <li class="step">
        <div class="step-card">
          <div class="step-top"><span class="step-number">01</span><span class="step-badge">Intake</span></div>
          <h3 class="step-title">Strategiecall: past Opális bij jouw groei?</h3>
          <p class="step-text">
            In een korte strategiecall toetsen we je doelen, markt en huidige funnel. We zijn eerlijk:
            alleen als we écht waarde kunnen leveren, gaan we samen verder.
          </p>
          <div class="step-tags">
            <span>Doel & doelgroep</span><span>Propositie</span><span>Prioriteiten</span>
          </div>
        </div>
      </li>

      <li class="step">
        <div class="step-card">
          <div class="step-top"><span class="step-number">02</span><span class="step-badge blue">1 week</span></div>
          <h3 class="step-title">Design → Build → Live binnen 1 week</h3>
          <p class="step-text">
            We vertalen jouw positionering naar een strak, high-performance design en bouwen dit
            razendsnel uit. Conversie en merkconsistentie staan centraal.
          </p>
          <div class="step-tags">
            <span>Creative engineering</span><span>Performance</span><span>SEO-ready</span>
          </div>
        </div>
      </li>

      <li class="step">
        <div class="step-card">
          <div class="step-top"><span class="step-number">03</span><span class="step-badge">Week 2</span></div>
          <h3 class="step-title">Optimalisatie & meetbaarheid</h3>
          <p class="step-text">
            De week na live zitten we bovenop je resultaten: tracking, A/B-optimalisaties en
            duidelijke verbeterslagen. Langer meekijken kan — afhankelijk van het gekozen pakket.
          </p>
          <div class="step-tags">
            <span>Data & tracking</span><span>UX-verbeteringen</span><span>Funnel-ops</span>
          </div>
        </div>
      </li>

      <li class="step">
        <div class="step-card">
          <div class="step-top"><span class="step-number">04</span><span class="step-badge green">Early Access</span></div>
          <h3 class="step-title">SEO-Bot toegang (optioneel)</h3>
          <p class="step-text">
            Als Opális jouw site heeft gebouwd, krijg je als eerste toegang tot onze SEO-Bot:
            slimme content-suggesties en snelle fixes op basis van je data.
          </p>
          <div class="step-tags">
            <span>Technische SEO</span><span>Contenthulp</span><span>Automatisering</span>
          </div>
        </div>
      </li>
    </ol>

    <div class="process-cta">
      <a class="btn-primary-outline" href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call">
        Plan een call
      </a>
    </div>
  </div>
</section>

<script>
  const taakbalk = document.querySelector('.taakbalk');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 20) taakbalk.classList.add('scrolled');
    else taakbalk.classList.remove('scrolled');
  });
</script>

</body>
</html>

<footer class="opalis-footer" id="contact">
  <div class="opalis-footer__inner">
    <h2 class="opalis-footer__title">Klaar om te bouwen aan iets bijzonders?</h2>
    <p class="opalis-footer__sub">
      Geen standaard templates. Geen onduidelijk proces. Alleen <strong>resultaat, snelheid</strong> en <strong>stijl</strong>.<br>
      Laten we jouw merk online brengen zoals het hoort — zonder ruis.
    </p>

    <a href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call" class="opalis-footer__btn">
      Plan een strategiecall ↗
    </a>

    <div class="opalis-footer__bottom">
      © 2025 Opális Webdesign. Creative engineering, zonder ruis.
    </div>
  </div>
</footer>

<style>
  /* Zorg dat er nooit witte zijkanten zichtbaar zijn op de pagina */
  html, body { background:#060f17; margin:0; padding:0; overflow-x:hidden; }

  .opalis-footer{
    /* 👉 De truc: breek UIT elke parent container */
    width: 100dvw;                                     /* volledige (dynamic) viewport-breedte */
    margin-inline: calc(50% - 50dvw);                  /* schuif links/rechts buiten container */
    /* basis */
    position: relative; isolation: isolate; overflow: hidden;
    padding: 120px 20px 80px;
    background:
      radial-gradient(1200px 600px at 50% 120%, rgba(24,119,242,0.18), transparent 65%),
      radial-gradient(900px 500px at 50% -20%, rgba(24,119,242,0.20), transparent 70%),
      #060f17;                                          /* vaste donkere basis (nooit wit) */
  }

  /* extra zachte glowlaag */
  .opalis-footer::after{
    content:""; position:absolute; inset:-30%; z-index:0;
    background: radial-gradient(60% 50% at 50% 0%, rgba(24,119,242,0.22), transparent 60%);
    filter: blur(60px); opacity:.6; pointer-events:none;
  }

  .opalis-footer__inner{
    position: relative; z-index:1;
    width: min(1180px, 92%);
    margin: 0 auto;
    text-align: center;
    color: #fff;
  }

  .opalis-footer__title{
    font-size: 2rem; font-weight: 800; letter-spacing: .02em; margin: 0 0 16px;
    background: linear-gradient(90deg, #fff 0%, #a9c9ff 80%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }

  .opalis-footer__sub{
    max-width: 780px; margin: 0 auto 36px;
    color: rgba(216,226,238,.92); line-height: 1.6; font-size: 1rem;
  }

  .opalis-footer__btn{
    display:inline-block; margin-top:8px; padding:14px 32px;
    font-size:1rem; font-weight:600; color:#fff; border-radius:999px; text-decoration:none;
    background: linear-gradient(90deg, #1877f2 0%, #0a46b9 100%);
    box-shadow: 0 0 35px rgba(24,119,242,.35);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .opalis-footer__btn:hover{ transform: translateY(-3px); box-shadow: 0 0 55px rgba(24,119,242,.55); }

  .opalis-footer__bottom{
    margin-top: 60px; font-size:.85rem; color: rgba(216,226,238,.65); letter-spacing:.02em;
  }

  /* mobiel */
  @media (max-width: 600px){
    .opalis-footer{ padding: 90px 16px 60px; }
    .opalis-footer__title{ font-size: 1.6rem; }
    .opalis-footer__sub{ font-size: .95rem; }
    .opalis-footer__btn{ padding: 12px 26px; font-size: .95rem; }
  }
</style>

Opális

✅ Durable.co Website Generation Prompt

Business Name: OpálisWebdesign
Industry: Web Design & Development
Business Description:
We are a team of passionate and experienced web developers who strive for greatness in every project. At OpálisWebdesign, we specialize in crafting elegant, high-performing websites that help businesses stand out and succeed online.

Page Type: Landing Page

Design Style:

Professional and modern

Clean layout with intuitive navigation

Use of professional colors (e.g. navy, charcoal, white, teal accents)

Main Headline:
Elevate Your Online Presence with OpálisWebdesign

Subheadline:
Tailored web solutions that combine aesthetics, performance, and innovation.

Sections to Include:

Hero section with headline, subheadline, and CTA button (“Get a Free Quote” or “Let’s Talk”)

About Us: A short paragraph about your team and mission

Services Overview: Web design, development, UX/UI, SEO optimization

Portfolio Preview (with space to add images later)

Testimonials section

Contact form

Call-to-Actions:

"Let's Build Something Great Together"

“Get Started”

“Request a Free Consultation”

Tone & Messaging:
Professional, confident, inspiring

Logo Placeholder: Yes

Social Media Links: Add placeholders for LinkedIn, Instagram, and GitHub