Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Opális Webdesign – Diensten</title>
  <style>
    :root{
      --primary:#1877f2;
      --primary-dark:#125ac0;
      --text-main:#fff;
      --text-muted:#d8e2ee;
      --card-bg:rgba(255,255,255,.9);
      --shadow-soft:0 14px 40px rgba(0,0,0,.22);
      --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}
    html,body{height:100%}
    body{
      font-family:var(--font-stack);
      color:var(--text-main);
      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;
      overflow-x:hidden;
      padding-top: env(safe-area-inset-top);
    }

    /* ===== Taakbalk ===== */
    .taakbalk{
      position:fixed; inset: env(safe-area-inset-top) 0 auto 0;
      top: max(12px, env(safe-area-inset-top));
      left:50%; transform:translateX(-50%);
      width:min(1180px,calc(100% - 24px));
      padding:12px 16px;
      display:flex; align-items:center; gap:18px; 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:1px solid rgba(255,255,255,.08);
      border-radius:999px; box-shadow:0 18px 48px rgba(0,0,0,.32);
      z-index:9999; transition:var(--transition);
    }
    .taakbalk.scrolled{
      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-weight:700;letter-spacing:.08em;white-space:nowrap}
    .logo span{color:var(--primary);margin-left:4px}

    .nav{
      display:flex; gap:20px; align-items:center; justify-content:space-between; flex:1;
      color:var(--text-muted); font-size:.92rem;
      overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .nav::-webkit-scrollbar{display:none}
    .nav a{
      color:inherit; text-decoration:none; position:relative; padding:6px 2px;
      white-space:nowrap; line-height:1;
    }
    .nav a::after{
      content:""; position:absolute; left:50%; bottom:-2px; width:0; height:2px;
      background:var(--primary); border-radius:999px; transform:translateX(-50%);
      transition:width var(--transition);
    }
    .nav a:hover{color:#fff}
    .nav a:hover::after{width:16px}

    .taakbalk-cta{display:flex; align-items:center; gap:8px; white-space:nowrap}
    .taakbalk-cta .text-link{font-size:.85rem; color:var(--text-muted); text-decoration:none}
    .taakbalk-cta .text-link:hover{color:#fff}
    .btn-primary-outline{
      padding:10px 16px; border-radius:999px; border:1px solid var(--primary);
      color:var(--primary); text-decoration:none; font-weight:700; background:rgba(3,8,14,.6);
    }
    .btn-primary-outline:hover{background:var(--primary); color:#fff; box-shadow:0 8px 22px rgba(24,119,242,.38)}

    /* ===== Diensten layout ===== */
    .diensten-wrapper{
      padding:140px 6% 90px; /* ruimte onder taakbalk */
    }
    .diensten-inner{
      max-width:1400px;
      margin:0 auto;
    }

    /* BOVENSTE DRIE KAARTEN */
    .diensten-grid{
      display:flex;
      flex-wrap:wrap;
      gap:26px;
      justify-content:center;
      margin-bottom:60px;
    }

    .dienst-card{
      flex:1;
      min-width:280px;
      max-width:380px;
      background:linear-gradient(135deg,rgba(8,20,34,0.96),rgba(5,14,28,0.96));
      border-radius:22px;
      padding:26px 24px 22px;
      border:1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 22px 55px rgba(0,0,0,0.6),
        0 0 38px rgba(24,119,242,0.22);
      backdrop-filter:blur(14px);
      color:#fff;
      display:flex;
      flex-direction:column;
      gap:12px;

      opacity:0;
      transform:translateY(30px);
      animation:fadeUp .7s ease-out forwards;
      animation-delay:var(--delay,0s);
    }

    .dienst-card:hover{
      transform:translateY(24px); /* anim eindigt op 0, hover terug 'omhoog' */
      transform:translateY(-4px);
      box-shadow:
        0 28px 70px rgba(0,0,0,0.75),
        0 0 48px rgba(59,130,246,0.32);
      border-color:rgba(96,165,250,0.8);
    }

    .dienst-card.green{
      background:linear-gradient(135deg,#062b26,#051b19);
      border-color:#0ef5c6;
      box-shadow:
        0 22px 55px rgba(0,0,0,0.7),
        0 0 42px rgba(14,245,198,0.32);
    }
    .dienst-card.green:hover{
      box-shadow:
        0 28px 72px rgba(0,0,0,0.9),
        0 0 55px rgba(14,245,198,0.5);
    }

    .dienst-badge{
      padding:5px 12px;
      border-radius:999px;
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      background:rgba(24,119,242,0.16);
      border:1px solid rgba(24,119,242,0.5);
      display:inline-block;
      margin-bottom:4px;
    }
    .dienst-card.green .dienst-badge{
      background:rgba(14,245,198,0.14);
      border-color:rgba(14,245,198,0.7);
      color:#bfffe9;
    }

    .dienst-card h3{
      font-size:1.2rem;
      margin:4px 0 6px;
    }
    .dienst-text{
      font-size:.92rem;
      color:#d4e2f2;
      line-height:1.7;
    }
    .dienst-list{
      list-style:none;
      padding-left:18px;
      margin:6px 0 8px;
      font-size:.88rem;
      color:#c7d6e8;
      line-height:1.6;
    }
    .dienst-list li{
      margin-bottom:4px;
      position:relative;
    }
    .dienst-list li::before{
      content:"•";
      position:absolute;
      left:-10px;
      top:0;
      color:#3b82f6;
    }
    .dienst-card.green .dienst-list li::before{
      color:#22c55e;
    }
    .dienst-meta{
      font-size:.82rem;
      color:#9fb4c8;
    }

    /* ONDERSTE HORIZONTALE KAART */
    .upgrade-card{
      max-width:1200px;
      margin:0 auto;
      padding:28px 30px;
      background:linear-gradient(135deg,rgba(255,255,255,0.94),rgba(240,244,248,0.94));
      border-radius:22px;
      box-shadow:0 18px 45px rgba(0,0,0,0.35);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;

      opacity:0;
      transform:translateY(30px);
      animation:fadeUp .7s ease-out forwards;
      animation-delay:.5s;
    }
    .upgrade-left{
      max-width:650px;
    }
    .upgrade-label{
      font-size:.75rem;
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#7c8a99;
      margin-bottom:6px;
    }
    .upgrade-title{
      margin:0 0 6px;
      font-size:1.6rem;
      font-weight:800;
      color:#0f172a;
    }
    .upgrade-text{
      margin:0;
      color:#4b5563;
      font-size:.96rem;
      line-height:1.7;
    }
    .upgrade-button{
      padding:14px 26px;
      background:#1877f2;
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:999px;
      box-shadow:0 10px 26px rgba(24,119,242,0.5);
      white-space:nowrap;
      transition:.25s ease;
    }
    .upgrade-button:hover{
      background:#125ac0;
      transform:translateY(-2px);
      box-shadow:0 16px 32px rgba(24,119,242,0.8);
    }

    /* Animatie */
    @keyframes fadeUp{
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    /* Responsive tweaks */
    @media (max-width:1024px){
      .diensten-wrapper{padding:130px 5% 80px}
    }
    @media (max-width:768px){
      .upgrade-card{
        flex-direction:column;
        align-items:flex-start;
      }
      .upgrade-button{
        width:100%;
        text-align:center;
        justify-content:center;
      }
    }
    @media (max-width:640px){
      .taakbalk{border-radius:18px}
      .nav{gap:12px; font-size:.82rem}
      .btn-primary-outline{padding:10px 12px; font-size:.85rem}
      .diensten-wrapper{padding:120px 5% 70px}
    }
  </style>
</head>
<body>

  
  <div class="taakbalk">
    <div class="logo">Opális<span>Webdesign</span></div>

    <nav class="nav" aria-label="Hoofd navigatie">
      <a href="#diensten">Diensten</a>
      <a href="https://proconnect24.com/werkwijze">Werkwijze</a>
      <a href="#cases">Cases</a>
      <a href="https://proconnect24.com/meet-the-team">The Team</a>
      <a href="https://proconnect24.com/contact">Contact</a>
    </nav>

    <div class="taakbalk-cta">
      <a href="https://proconnect24.com/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>

  
  <main class="diensten-wrapper" id="diensten">
    <div class="diensten-inner">

      
      <div class="diensten-grid">

        
        <article class="dienst-card" style="--delay:.1s;">
          <div class="dienst-badge">HOOFDDIENST</div>
          <h3>Custom website op maat</h3>
          <p class="dienst-text">
            Een high-end website die is ontworpen om vertrouwen op te bouwen, leads op te leveren
            en jouw merk professioneel neer te zetten — zonder het prijskaartje van een groot bureau.
          </p>
          <ul class="dienst-list">
            <li>Strategie, design &amp; techniek volledig uit handen</li>
            <li>Conversiegericht design &amp; duidelijke structuur</li>
            <li>Geoptimaliseerd voor snelheid, mobiel &amp; SEO</li>
            <li>Integraties met o.a. mail, agenda &amp; CRM</li>
          </ul>
          <p class="dienst-meta">
            Gem. doorlooptijd: <strong>1 week</strong>
          </p>
        </article>

        
        <article class="dienst-card" style="--delay:.25s;">
          <div class="dienst-badge">ADD-ON</div>
          <h3>Chatbot add-on</h3>
          <p class="dienst-text">
            Voeg een slimme Opális chatbot toe die leads verzamelt, vragen beantwoordt en
            afspraken inplant — volledig automatisch en 24/7 actief.
          </p>
          <ul class="dienst-list">
            <li>Custom chatbot in jouw tone of voice</li>
            <li>Leads direct naar je mailbox of CRM</li>
            <li>Integratie met o.a. WhatsApp &amp; Calendly</li>
            <li>Perfecte uitbreiding op je Opális website</li>
          </ul>
        </article>

        
        <article class="dienst-card green" style="--delay:.4s;">
          <div class="dienst-badge">BINNENKORT</div>
          <h3>Opális Care (onderhoud)</h3>
          <p class="dienst-text">
            Doorlopend onderhoud &amp; updates zodat jouw website veilig, snel en up-to-date blijft —
            zonder dat jij ernaar om hoeft te kijken.
          </p>
          <ul class="dienst-list">
            <li>Maandelijkse check-ups &amp; updates</li>
            <li>Snelle fix voor kleine bugs</li>
            <li>Kleine content- &amp; design tweaks inbegrepen</li>
            <li>Monitoring van performance &amp; basisbeveiliging</li>
          </ul>
          <p class="dienst-meta">
            Wordt binnenkort beschikbaar gemaakt voor Opális-klanten.
          </p>
        </article>

      </div>

      
      <section class="upgrade-card">
        <div class="upgrade-left">
          <div class="upgrade-label">Gratis strategie-call</div>
          <h2 class="upgrade-title">Plan jouw Opális upgrade</h2>
          <p class="upgrade-text">
            In 20 minuten helder of we jouw website kunnen omzetten in een constante stroom van leads en omzet.
          </p>
        </div>
        <a
          href="https://calendly.com/ryanheidekamp1/30min"
          target="_blank"
          rel="noopener"
          class="upgrade-button"
        >
          Maak een afspraak ↗
        </a>
      </section>

    </div>
  </main>

  <script>
    // Scroll-effect voor taakbalk
    const taakbalk = document.querySelector('.taakbalk');
    window.addEventListener('scroll', () => {
      taakbalk.classList.toggle('scrolled', window.scrollY > 20);
    }, { passive: true });
  </script>
</body>
</html>

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