First commit

components/MigrationProcessSection.tsx

@@ -0,0 +1,51 @@
+export default function MigrationProcessSection() {
+  return (
+      <section className="content-section migration-detail" id="migration-detail" aria-labelledby="migration-title">
+        <div className="migration-process-panel">
+          <div className="migration-process-head">
+            <div>
+              <p className="eyebrow">Switching providers</p>
+              <h2 id="migration-title">Migration process</h2>
+            </div>
+            <span aria-hidden="true"></span>
+            <p>how we move your business email</p>
+          </div>
+
+          <div className="migration-process-line" aria-hidden="true"></div>
+
+          <ol className="migration-process-grid" aria-label="Email migration steps">
+            <li>
+              <div className="migration-step-badge badge-blue">01</div>
+              <h3>Assess</h3>
+              <p>Domain, provider, mailbox count, aliases, forwards, and device needs are reviewed first.</p>
+            </li>
+            <li>
+              <div className="migration-step-badge badge-purple">02</div>
+              <h3>Prepare DNS</h3>
+              <p>MX, SPF, DKIM, DMARC, routing, aliases, and spam rules are staged before cutover.</p>
+            </li>
+            <li>
+              <div className="migration-step-badge badge-green">03</div>
+              <h3>Migrate mail</h3>
+              <p>Existing mail is moved from Gmail, Yahoo, Microsoft 365, shared hosting, or legacy providers.</p>
+            </li>
+            <li>
+              <div className="migration-step-badge badge-amber">04</div>
+              <h3>Set up devices</h3>
+              <p>Outlook, iPhone, iPad, web access, and login details are verified before handoff.</p>
+            </li>
+          </ol>
+
+          <div className="migration-needs">
+            <strong>What we need from you</strong>
+            <ul>
+              <li>Domain access</li>
+              <li>User and mailbox list</li>
+              <li>Current provider details</li>
+              <li>Preferred migration window</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+  );
+}