
<section class="hero">
  <div class="shell hero-grid">
    <div class="hero-copy">
      <p class="eyebrow">A better way to receive inquiries</p>
      <h1>Contact forms<br>that <em>lead somewhere.</em></h1>
      <p class="hero-intro">Rédac gives your website a clear, trustworthy way for people to get in touch, while helping your team receive the details that matter.</p>
      <div class="hero-actions">
        <a class="button" href="#how-it-works">See how it works</a>
        <a class="text-link" href="#integration">See the setup</a>
      </div>
      <p class="hero-note">For teams that want a clear path from “hello” to a useful reply.</p>
    </div>
    <div class="hero-connection" aria-hidden="true">
      <div class="connection-orbit connection-orbit-one"></div><div class="connection-orbit connection-orbit-two"></div>
      <p class="connection-caption connection-caption-top"><span></span>Visitor intent</p>
      <div class="connection-card"><span class="connection-label">NEW INQUIRY</span><strong>A clear reason<br>to connect.</strong><div class="connection-lines"><span></span><span></span><span></span></div></div>
      <div class="connection-route"><span></span><b></b></div>
      <div class="team-card"><span class="team-card-icon team-card-icon-team" aria-hidden="true"></span><div><small>ROUTED TO</small><strong>Your team</strong></div></div>
      <p class="connection-caption connection-caption-bottom"><span></span>Useful conversation</p>
    </div>
  </div>
</section>

<div class="proof-bar"><div class="shell proof-items"><span>Fits your approved websites</span><span>Clear details, less spam</span><span>Always ready, no maintenance</span><span>Encrypted data</span></div></div>

<section class="section value-section" id="why-redac">
  <div class="shell section-heading split-heading"><p class="eyebrow">One focused layer</p><div><h2>Make every contact<br>feel considered.</h2><p>Rédac gives your team a simple, reliable way to receive website inquiries without sending visitors through a generic form experience. It stays dependable in the background, without updates or ongoing form maintenance for your team.</p></div></div>
  <div class="shell value-grid">
    <article class="value-card"><span class="card-number">01</span><span class="value-icon value-icon-browser" aria-hidden="true"></span><h3>Keep the experience on your site.</h3><p>Meet visitors where they already understand why they want to reach you.</p></article>
    <article class="value-card"><span class="card-number">02</span><span class="value-icon value-icon-chat" aria-hidden="true"></span><h3>Get the details you need.</h3><p>Choose the questions that help your team begin a useful conversation, without asking too much.</p></article>
    <article class="value-card"><span class="card-number">03</span><span class="value-icon value-icon-send" aria-hidden="true"></span><h3>Get every inquiry to the right people.</h3><p>Save each message and make sure your team can act on it quickly.</p></article>
  </div>
</section>

<section class="section workflow-section" id="how-it-works">
  <div class="shell workflow-layout">
    <div class="workflow-intro"><p class="eyebrow">How it works</p><h2>A short path.<br><em>Clear</em> follow-through.</h2><p>From the first message to your team’s reply, every step has a clear purpose.</p><a class="text-link" href="#reliability">See the protection</a></div>
    <ol class="workflow-steps">
      <li><span class="step-index">01</span><div><h3>Make it yours.</h3><p>Choose the questions, language, and website where your form belongs.</p></div></li>
      <li><span class="step-index">02</span><div><h3>Keep it useful.</h3><p>Guide people to share complete details, reduce spam, and keep the form on the right website.</p></div></li>
      <li><span class="step-index">03</span><div><h3>Save every inquiry.</h3><p>Each message is kept with the information your team needs for a thoughtful follow-up.</p></div></li>
      <li><span class="step-index">04</span><div><h3>Tell the right people.</h3><p>Notify your team by email or connect the message to the tools they already use.</p></div></li>
    </ol>
  </div>
</section>

<section class="section reliability-section" id="reliability">
  <div class="shell reliability-panel"><div class="reliability-intro"><p class="eyebrow">Dependable by design</p><h2>Protection supports<br>the <em>conversation.</em></h2><p>People should be able to reach you easily. Your team should be protected from noise along the way, with message data encrypted while it is stored.</p></div><div class="reliability-list">
    <article><span class="security-glyph security-glyph-shield" aria-hidden="true"></span><div><h3>Only on your approved websites</h3><p>Your form appears only where you expect it, so people reach the right team through the right place.</p></div></article>
    <article><span class="security-glyph security-glyph-speed" aria-hidden="true"></span><div><h3>Clear details, fewer repeats</h3><p>Helpful prompts make messages easier to understand and reduce repeated submissions.</p></div></article>
    <article><span class="security-glyph security-glyph-patch" aria-hidden="true"></span><div><h3>Spam protection with Cloudflare Turnstile</h3><p>When enabled, Cloudflare Turnstile adds a quick check to help keep spam out before a message is sent.</p></div></article>
  </div></div>
</section>

<section class="section audience-section" id="built-for">
  <div class="shell section-heading split-heading"><p class="eyebrow">Built for the people behind the reply</p><div><h2>Useful for the<br>teams growing the business.</h2><p>Rédac makes website contact feel more dependable for the people responsible for the next conversation.</p></div></div>
  <div class="shell audience-grid"><article><span>Marketing teams</span><h3>More useful conversations.</h3><p>Give visitors a clear next step and give your team the information to respond well.</p></article><article><span>Agencies</span><h3>A dependable path for client sites.</h3><p>Give every client a considered contact experience that leads to the right team.</p></article><article><span>Developers</span><h3>A form that fits your site.</h3><p>Keep the setup close to your website without building and maintaining a form system from scratch.</p></article></div>
</section>

<section class="section integration-section" id="integration">
  <div class="shell integration-layout"><div><p class="eyebrow">Integration preview</p><h2>Two elements.<br>One clear connection.</h2><p>This illustrative sample uses placeholders. The loader reads your form metadata, obtains a short-lived token, and renders the configured fields into the mount. Replace the placeholders with values from your own Rédac form—never reuse values from another environment.</p><ul class="integration-notes"><li>Mount id is <code>redac-form</code>.</li><li>Set the page language with <code>data-language</code>.</li><li>Keep your form identifier and checksum environment-specific.</li></ul></div><div class="code-card"><div class="code-card-bar"><span>embed.html</span><span>illustrative setup</span></div><pre><code><span class="code-tag">&lt;div</span> <span class="code-attribute">id</span>=<span class="code-string">"redac-form"</span>
  <span class="code-attribute">data-theme</span>=<span class="code-string">"auto"</span>
  <span class="code-attribute">data-language</span>=<span class="code-string">"en"</span><span class="code-tag">&gt;&lt;/div&gt;</span>

<span class="code-tag">&lt;script</span>
  <span class="code-attribute">src</span>=<span class="code-string">"https://assets.example.com/form/v1/embed/embed.js"</span>
  <span class="code-attribute">data-form-id</span>=<span class="code-string">"&lt;your-form-id&gt;"</span>
  <span class="code-attribute">data-checksum</span>=<span class="code-string">"&lt;your-form-checksum&gt;"</span><span class="code-tag">&gt;</span>
<span class="code-tag">&lt;/script&gt;</span></code></pre></div></div>
</section>

<section class="contact-plan" id="contact-plan"><div class="shell contact-panel"><div><p class="eyebrow">Coming next</p><h2>Plan the conversation<br>before you open it.</h2></div><div><p>A Rédac-powered contact form will live here when the public contact path is ready. Until then, this page is an honest preview of the product flow—not yet a signup or a place to send a message.</p><div class="contact-actions"><a class="button" href="#integration">Review the integration</a></div></div></div></section>
