Выровнять FAQ и анимировать раскрытие

Reviewed-on: Rosetta/landing#3

public/privacy/index.html

@@ -176,7 +176,8 @@
       <p>
         Depending on where you live, you may have rights to access, correct,
         delete, or object to certain processing of your personal information. To
-        make a request, contact us at admin@rosetta.im.
+        make a request, contact us at
+        <a href="mailto:admin@rosetta.im">admin@rosetta.im</a>.
       </p>
       <p>
         Because Rosetta minimizes account data and uses cryptographic
@@ -220,7 +221,10 @@ UNIT 704C 7/F BLK 3 NAN FUNG IND CITY
 18 TIN HAU RD
 TUEN MUN
 HONG KONG</p>
-      <p>Email: <a href="mailto:admin@rosetta.im">admin@rosetta.im</a></p>
+      <p>
+        Email: <a href="mailto:admin@rosetta.im">admin@rosetta.im</a><br />
+        Support: <a href="/support/">https://rosetta.im/support/</a>
+      </p>
       <p>Phone: <a href="tel:+85228910030">+852 2891 0030</a></p>
     </main>
   </body>

public/sitemap.xml

@@ -8,8 +8,26 @@
         xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
   <url>
     <loc>https://rosetta.im/</loc>
-    <lastmod>2026-02-16</lastmod>
+    <lastmod>2026-07-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
+  <url>
+    <loc>https://rosetta.im/support/</loc>
+    <lastmod>2026-07-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://rosetta.im/privacy/</loc>
+    <lastmod>2026-07-11</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.5</priority>
+  </url>
+  <url>
+    <loc>https://rosetta.im/terms/</loc>
+    <lastmod>2026-07-11</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.5</priority>
+  </url>
 </urlset>

public/support/index.html

@@ -0,0 +1,599 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rosetta Support</title>
+    <meta
+      name="description"
+      content="Contact Rosetta Support for help with account access, recovery phrases, messaging, media, privacy, and security."
+    />
+    <link rel="canonical" href="https://rosetta.im/support/" />
+    <meta name="robots" content="index, follow" />
+    <meta name="theme-color" content="#0a67ff" />
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        color: #172033;
+        background: #f6f8fc;
+        line-height: 1.5;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        scroll-behavior: smooth;
+      }
+
+      body {
+        margin: 0;
+        background: #f6f8fc;
+      }
+
+      a {
+        color: #075ed3;
+      }
+
+      a:focus-visible {
+        outline: 3px solid #8dc0ff;
+        outline-offset: 3px;
+      }
+
+      .page {
+        width: min(1120px, calc(100% - 40px));
+        margin: 0 auto;
+        padding: 24px 0 64px;
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20px;
+      }
+
+      .brand {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        color: inherit;
+        font-size: 18px;
+        font-weight: 760;
+        letter-spacing: 0;
+        text-decoration: none;
+      }
+
+      .brand-mark {
+        width: 34px;
+        height: 34px;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .brand-mark img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .home-link {
+        color: #334155;
+        font-size: 15px;
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      .hero {
+        max-width: 760px;
+        padding: 88px 0 58px;
+      }
+
+      .eyebrow {
+        margin: 0 0 12px;
+        color: #075ed3;
+        font-size: 14px;
+        font-weight: 750;
+        text-transform: uppercase;
+      }
+
+      h1,
+      h2,
+      h3,
+      p {
+        margin-top: 0;
+      }
+
+      h1 {
+        max-width: 650px;
+        margin-bottom: 20px;
+        font-size: clamp(38px, 7vw, 68px);
+        font-weight: 760;
+        letter-spacing: 0;
+        line-height: 1.04;
+      }
+
+      .intro {
+        max-width: 620px;
+        margin-bottom: 28px;
+        color: #4b5568;
+        font-size: clamp(18px, 2.2vw, 21px);
+        line-height: 1.5;
+      }
+
+      .contact-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 50px;
+        padding: 12px 18px;
+        border-radius: 8px;
+        background: #0a67ff;
+        color: #ffffff;
+        font-size: 16px;
+        font-weight: 720;
+        text-decoration: none;
+      }
+
+      .contact-button:hover {
+        background: #0055ca;
+      }
+
+      .quick-links {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 14px;
+        margin-bottom: 72px;
+      }
+
+      .quick-link {
+        display: block;
+        min-height: 138px;
+        padding: 22px;
+        border: 1px solid #dbe2ee;
+        border-radius: 8px;
+        background: #ffffff;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .quick-link:hover {
+        border-color: #a7c9ff;
+        box-shadow: 0 10px 24px rgba(26, 61, 110, 0.08);
+      }
+
+      .quick-link strong {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 17px;
+      }
+
+      .quick-link span {
+        color: #64748b;
+        font-size: 15px;
+        line-height: 1.4;
+      }
+
+      .section {
+        padding: 52px 0;
+        border-top: 1px solid #dbe2ee;
+      }
+
+      .section-heading {
+        display: grid;
+        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+        gap: 32px;
+        align-items: start;
+        margin-bottom: 28px;
+      }
+
+      h2 {
+        margin-bottom: 0;
+        font-size: clamp(28px, 4vw, 38px);
+        letter-spacing: 0;
+        line-height: 1.12;
+      }
+
+      .section-copy {
+        margin-bottom: 0;
+        color: #526176;
+        font-size: 17px;
+      }
+
+      .faq {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 14px;
+      }
+
+      details {
+        display: grid;
+        grid-template-rows: auto 0fr;
+        padding: 19px 20px;
+        border: 1px solid #dbe2ee;
+        border-radius: 8px;
+        background: #ffffff;
+        overflow: hidden;
+        transition: grid-template-rows 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
+      }
+
+      details[open] {
+        grid-template-rows: auto 1fr;
+      }
+
+      summary {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 28px;
+        gap: 12px;
+        align-items: center;
+        min-height: 28px;
+        cursor: pointer;
+        color: #1d293d;
+        font-size: 17px;
+        font-weight: 710;
+        list-style: none;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      summary::marker {
+        content: "";
+      }
+
+      summary::after {
+        display: grid;
+        width: 28px;
+        height: 28px;
+        place-items: center;
+        color: #075ed3;
+        content: "+";
+        font-size: 26px;
+        font-weight: 500;
+        line-height: 1;
+        transform: rotate(0deg);
+        transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      details[open] summary::after {
+        transform: rotate(45deg);
+      }
+
+      details > p {
+        display: block;
+        min-height: 0;
+        margin: 0;
+        overflow: hidden;
+        color: #526176;
+        font-size: 15px;
+        opacity: 0;
+        transform: translateY(-4px);
+        transition: opacity 140ms ease, transform 180ms ease, margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      details[open] > p {
+        margin: 14px 0 0;
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: 70ms;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        details,
+        summary::after,
+        details > p {
+          transition: none;
+        }
+      }
+
+      .contact-panel {
+        display: grid;
+        grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
+        gap: 28px;
+        padding: 32px;
+        border-radius: 8px;
+        background: #0e1e39;
+        color: #ffffff;
+      }
+
+      .contact-panel h2 {
+        margin-bottom: 12px;
+      }
+
+      .contact-panel p {
+        max-width: 580px;
+        margin-bottom: 0;
+        color: #cbd7ed;
+        font-size: 17px;
+      }
+
+      .contact-details {
+        align-self: center;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.07);
+      }
+
+      .contact-details strong,
+      .contact-details a {
+        display: block;
+      }
+
+      .contact-details strong {
+        margin-bottom: 6px;
+        font-size: 15px;
+      }
+
+      .contact-details a {
+        color: #ffffff;
+        font-size: 18px;
+        font-weight: 700;
+        overflow-wrap: anywhere;
+      }
+
+      .legal-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 18px;
+        padding-top: 32px;
+      }
+
+      .legal-links a {
+        color: #526176;
+        font-size: 15px;
+      }
+
+      @media (max-width: 720px) {
+        .page {
+          width: min(100% - 32px, 1120px);
+          padding-top: 16px;
+        }
+
+        .hero {
+          padding: 64px 0 42px;
+        }
+
+        .quick-links,
+        .faq,
+        .section-heading,
+        .contact-panel {
+          grid-template-columns: 1fr;
+        }
+
+        .quick-links {
+          margin-bottom: 52px;
+        }
+
+        .section {
+          padding: 40px 0;
+        }
+
+        .contact-panel {
+          gap: 20px;
+          padding: 24px;
+        }
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color: #eff4ff;
+          background: #0c111a;
+        }
+
+        body {
+          background: #0c111a;
+        }
+
+        a,
+        .eyebrow {
+          color: #72afff;
+        }
+
+        .home-link,
+        .quick-link,
+        summary {
+          color: #eef4ff;
+        }
+
+        .intro,
+        .section-copy,
+        .quick-link span,
+        details p,
+        .legal-links a {
+          color: #aab8cf;
+        }
+
+        .quick-link,
+        details {
+          border-color: #29354a;
+          background: #141c29;
+        }
+
+        .quick-link:hover {
+          border-color: #427fc7;
+          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+        }
+
+        .section {
+          border-color: #29354a;
+        }
+
+        .contact-button {
+          background: #3986ff;
+        }
+
+        .contact-button:hover {
+          background: #5b9bff;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <header class="topbar">
+        <a class="brand" href="/" aria-label="Rosetta home">
+          <span class="brand-mark"><img src="/rosetta-logo.png" alt="" /></span>
+          Rosetta
+        </a>
+        <a class="home-link" href="/">Back to home</a>
+      </header>
+
+      <section class="hero" aria-labelledby="support-title">
+        <p class="eyebrow">Rosetta Support</p>
+        <h1 id="support-title">Help with your Rosetta account and messages.</h1>
+        <p class="intro">
+          Find answers about account access, recovery phrases, private messaging,
+          shared media, and privacy. For anything else, contact our support team.
+        </p>
+        <a class="contact-button" href="mailto:admin@rosetta.im?subject=Rosetta%20Support%20Request">
+          Email Rosetta Support
+        </a>
+      </section>
+
+      <nav class="quick-links" aria-label="Support topics">
+        <a class="quick-link" href="#account">
+          <strong>Account and access</strong>
+          <span>Recovery phrases, device access, and account security.</span>
+        </a>
+        <a class="quick-link" href="#messaging">
+          <strong>Messaging and media</strong>
+          <span>Messages, photos, videos, files, voice messages, and groups.</span>
+        </a>
+        <a class="quick-link" href="#privacy">
+          <strong>Privacy and safety</strong>
+          <span>Security questions, privacy information, and abuse reports.</span>
+        </a>
+      </nav>
+
+      <section class="section" id="account" aria-labelledby="account-heading">
+        <div class="section-heading">
+          <h2 id="account-heading">Account and access</h2>
+          <p class="section-copy">
+            Rosetta accounts are accessed with a recovery phrase instead of a phone number.
+            Keep your phrase private and stored somewhere safe.
+          </p>
+        </div>
+        <div class="faq">
+          <details>
+            <summary>How do I access my account on a new device?</summary>
+            <p>
+              Install Rosetta and enter your recovery phrase in the exact order it was created.
+              Rosetta may ask you to confirm a new device to protect your account.
+            </p>
+          </details>
+          <details>
+            <summary>I lost my recovery phrase. Can it be restored?</summary>
+            <p>
+              No. Your recovery phrase is the key to your account. Rosetta cannot recover it
+              for you, so keep it private and backed up before you need it.
+            </p>
+          </details>
+          <details>
+            <summary>Why am I asked to confirm a new device?</summary>
+            <p>
+              New-device confirmation helps prevent someone who has obtained a recovery phrase
+              from silently accessing your account on another device.
+            </p>
+          </details>
+          <details>
+            <summary>How do I report an account-access problem?</summary>
+            <p>
+              Email us with the device model, Rosetta version, and a short description of what
+              happened. Do not include your recovery phrase or private keys.
+            </p>
+          </details>
+        </div>
+      </section>
+
+      <section class="section" id="messaging" aria-labelledby="messaging-heading">
+        <div class="section-heading">
+          <h2 id="messaging-heading">Messaging and media</h2>
+          <p class="section-copy">
+            Rosetta supports private chats, groups, photos, videos, files, and voice messages.
+            Attachment choices can vary depending on your device permissions and the selected item.
+          </p>
+        </div>
+        <div class="faq">
+          <details>
+            <summary>How do I send a photo, video, or file?</summary>
+            <p>
+              Open a chat, tap the attachment button next to the message field, choose the item
+              you want to share, then send it. Allow Photos or Files access when iOS asks for it.
+            </p>
+          </details>
+          <details>
+            <summary>Why is an attachment still sending?</summary>
+            <p>
+              Media uploads depend on the file size and your connection. Keep Rosetta open and
+              connected until the send indicator completes. You can retry a message that failed.
+            </p>
+          </details>
+          <details>
+            <summary>How do I send a voice message?</summary>
+            <p>
+              In a chat, press and hold the microphone control to record, then release it to send.
+              Microphone permission is required the first time you record.
+            </p>
+          </details>
+          <details>
+            <summary>How do I get help with a group?</summary>
+            <p>
+              Contact us with the group name and a description of the issue. Do not send private
+              recovery phrases, message contents, or encryption keys.
+            </p>
+          </details>
+        </div>
+      </section>
+
+      <section class="section" id="privacy" aria-labelledby="privacy-heading">
+        <div class="section-heading">
+          <h2 id="privacy-heading">Privacy and safety</h2>
+          <p class="section-copy">
+            Rosetta is designed for private communication. If you have a security concern or a
+            question about data handling, contact us directly.
+          </p>
+        </div>
+        <div class="faq">
+          <details>
+            <summary>How is message content protected?</summary>
+            <p>
+              Rosetta is designed to encrypt message content before it is sent. For details about
+              how we handle data, read the Rosetta Privacy Policy.
+            </p>
+          </details>
+          <details>
+            <summary>How do I report abuse or a security issue?</summary>
+            <p>
+              Email <a href="mailto:admin@rosetta.im?subject=Rosetta%20Security%20Report">admin@rosetta.im</a>
+              with a description of the concern. Do not include recovery phrases or private keys.
+            </p>
+          </details>
+        </div>
+      </section>
+
+      <section class="contact-panel" aria-labelledby="contact-heading">
+        <div>
+          <h2 id="contact-heading">Need more help?</h2>
+          <p>
+            Send us a message with your device model, app version, and a short explanation of the
+            issue. Never send a recovery phrase, private key, or private message content.
+          </p>
+        </div>
+        <div class="contact-details">
+          <strong>Rosetta Support</strong>
+          <a href="mailto:admin@rosetta.im?subject=Rosetta%20Support%20Request">admin@rosetta.im</a>
+        </div>
+      </section>
+
+      <footer class="legal-links">
+        <a href="/">Rosetta home</a>
+        <a href="/privacy/">Privacy Policy</a>
+        <a href="/terms/">Terms of Use</a>
+      </footer>
+    </main>
+  </body>
+</html>

public/terms/index.html

@@ -180,7 +180,10 @@
         maintenance and support for Rosetta. Apple has no obligation to provide
         maintenance or support services for Rosetta.
       </p>
-      <p>Support contact: <a href="mailto:admin@rosetta.im">admin@rosetta.im</a></p>
+      <p>
+        Support contact: <a href="mailto:admin@rosetta.im">admin@rosetta.im</a><br />
+        Support centre: <a href="/support/">https://rosetta.im/support/</a>
+      </p>
 
       <h2>11. Warranty</h2>
       <p>

src/components/Footer/Footer.tsx

@@ -12,6 +12,9 @@ export function Footer() {
                 © {currentYear} {LEGAL_NAME}. All rights reserved.
             </Text>
             <nav className={classes.links} aria-label="Legal information">
+                <Anchor href="/support/" size="sm" c="dimmed">
+                    Support
+                </Anchor>
                 <Anchor href="/privacy/" size="sm" c="dimmed">
                     Privacy Policy
                 </Anchor>