MQL-Development
/
gramora


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Gramora — AI-powered writing tools for macOS. Grammar checker, paraphrasing, translation, and more.">
  <title>Gramora — Write Better, Faster</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --teal: #00a67e;
      --teal-dark: #008c6b;
      --teal-light: #e6f7f2;
      --gradient-start: #009e78;
      --gradient-end: #33c799;
      --bg: #f8fafb;
      --surface: #ffffff;
      --text-primary: #1a2438;
      --text-secondary: #475569;
      --text-muted: #6b7280;
      --border: #c7d2de;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 12px 48px rgba(0, 166, 126, 0.12);
      --radius: 16px;
      --radius-sm: 10px;
      --max-width: 1120px;
      --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-primary);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: var(--teal); text-decoration: none; transition: color 0.2s ease; }
    a:hover { color: var(--teal-dark); }
    .container { width: min(100% - 2rem, var(--max-width)); margin-inline: auto; }
    .hero { position: relative; padding: 5rem 0 6rem; overflow: hidden; }
    .hero::before {
      content: ""; position: absolute; top: -120px; right: -80px;
      width: 480px; height: 480px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 166, 126, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: ""; position: absolute; bottom: -60px; left: -40px;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 166, 126, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
      align-items: center; position: relative;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.35rem 0.85rem; background: var(--teal-light); color: var(--teal-dark);
      border-radius: 999px; font-size: 0.8125rem; font-weight: 600; margin-bottom: 1.25rem;
    }
    .hero h1 {
      font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.15;
      font-weight: 800; letter-spacing: -0.03em; margin: 0 0 1.25rem;
    }
    .hero h1 span {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-lead { font-size: 1.125rem; color: var(--text-secondary); margin: 0 0 2rem; max-width: 32rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.875rem 1.75rem; border-radius: 14px; font-size: 0.9375rem; font-weight: 600;
      border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: #fff; box-shadow: 0 4px 16px rgba(0, 166, 126, 0.35);
    }
    .btn-primary:hover { color: #fff; box-shadow: 0 8px 24px rgba(0, 166, 126, 0.45); }
    .btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }
    .btn-secondary:hover { color: var(--teal); border-color: var(--teal); }
    .hero-visual { position: relative; }
    .app-preview {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
    }
    .app-preview-bar {
      display: flex; align-items: center; gap: 0.4rem;
      padding: 0.75rem 1rem; background: #f1f5f9; border-bottom: 1px solid var(--border);
    }
    .app-preview-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
    .app-preview-dot:nth-child(1) { background: #ff5f57; }
    .app-preview-dot:nth-child(2) { background: #febc2e; }
    .app-preview-dot:nth-child(3) { background: #28c840; }
    .app-preview-body { display: grid; grid-template-columns: 180px 1fr; min-height: 320px; }
    .app-sidebar { background: #fafbfc; border-right: 1px solid var(--border); padding: 1.25rem 0.75rem; }
    .app-sidebar-item {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.55rem 0.75rem; border-radius: 8px;
      font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.25rem;
    }
    .app-sidebar-item.active { background: var(--teal-light); color: var(--teal-dark); font-weight: 600; }
    .app-sidebar-icon { width: 16px; height: 16px; border-radius: 4px; background: var(--border); flex-shrink: 0; }
    .app-sidebar-item.active .app-sidebar-icon { background: var(--teal); }
    .app-content { padding: 1.5rem; }
    .app-content h3 { margin: 0 0 0.75rem; font-size: 1rem; }
    .app-text-block {
      background: #f8fafb; border: 1px solid var(--border); border-radius: 12px;
      padding: 1rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7;
    }
    .app-text-block .highlight { background: rgba(0, 166, 126, 0.15); color: var(--teal-dark); padding: 0 2px; border-radius: 3px; }
    .section { padding: 4.5rem 0; }
    .section-header { text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
    .section-header h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
    .section-header p { color: var(--text-secondary); margin: 0; font-size: 1.0625rem; }
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .feature-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 1.75rem; transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    .feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .feature-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 1rem;
    }
    .feature-card h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
    .feature-card p { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; }
    .cta-band {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; color: #fff; margin: 2rem 0 0;
    }
    .cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.75rem; }
    .cta-band p { margin: 0 0 1.75rem; opacity: 0.92; font-size: 1.0625rem; }
    .cta-band .btn-primary { background: #fff; color: var(--teal-dark); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
    .cta-band .btn-primary:hover { color: var(--teal-dark); }
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; text-align: center; }
      .hero-lead { margin-inline: auto; }
      .hero-actions { justify-content: center; }
      .hero-visual { order: -1; max-width: 520px; margin-inline: auto; }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .features-grid { grid-template-columns: 1fr; }
      .app-preview-body { grid-template-columns: 1fr; }
      .app-sidebar { display: none; }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <div class="container hero-grid">
        <div class="hero-copy">
          <span class="hero-badge">✦ Available for macOS</span>
          <h1>Write with <span>confidence</span> and clarity</h1>
          <p class="hero-lead">
            Gramora is your all-in-one AI writing assistant for Mac. Fix grammar, rephrase sentences,
            translate languages, and craft perfect emails — all in one beautiful app.
          </p>
          <div class="hero-actions">
            <a href="https://apps.apple.com" class="btn btn-primary">Download on Mac App Store</a>
            <a href="#features" class="btn btn-secondary">Explore Features</a>
          </div>
        </div>
        <div class="hero-visual">
          <div class="app-preview">
            <div class="app-preview-bar">
              <span class="app-preview-dot"></span>
              <span class="app-preview-dot"></span>
              <span class="app-preview-dot"></span>
            </div>
            <div class="app-preview-body">
              <aside class="app-sidebar">
                <div class="app-sidebar-item active">
                  <span class="app-sidebar-icon"></span>
                  Grammar Checker
                </div>
                <div class="app-sidebar-item">
                  <span class="app-sidebar-icon"></span>
                  Summarizer
                </div>
                <div class="app-sidebar-item">
                  <span class="app-sidebar-icon"></span>
                  Paraphrasing
                </div>
                <div class="app-sidebar-item">
                  <span class="app-sidebar-icon"></span>
                  Translator
                </div>
                <div class="app-sidebar-item">
                  <span class="app-sidebar-icon"></span>
                  AI Email Writer
                </div>
              </aside>
              <div class="app-content">
                <h3>Grammar Checker</h3>
                <div class="app-text-block">
                  The team <span class="highlight">are</span> working hard to finish the project on time.
                  <br><br>
                  ✓ Suggested: The team <strong>is</strong> working hard to finish the project on time.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="features">
      <div class="container">
        <div class="section-header">
          <h2>Everything you need to write better</h2>
          <p>Powerful AI tools designed for students, professionals, and creators — right on your Mac.</p>
        </div>
        <div class="features-grid">
          <article class="feature-card">
            <div class="feature-icon" style="background:#5ba6f2;color:#fff;">✓</div>
            <h3>Grammar Checker</h3>
            <p>Instantly catch grammar mistakes and get clear suggestions to improve your writing.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#a3dec9;color:#1a5c47;">↻</div>
            <h3>Paraphrasing Tool</h3>
            <p>Revamp your sentences while keeping the original meaning intact.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#9670ed;color:#fff;">Aa</div>
            <h3>Spelling Checker</h3>
            <p>Ensure accuracy in every word with intelligent spell-checking.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#f25270;color:#fff;">📖</div>
            <h3>Dictionary</h3>
            <p>Look up definitions and meanings without leaving your workflow.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#db59f2;color:#fff;">✉</div>
            <h3>AI Email Writer</h3>
            <p>Draft professional emails in seconds with the right tone and structure.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#fa9933;color:#fff;">"</div>
            <h3>Punctuation Checker</h3>
            <p>Perfect your punctuation for polished, publication-ready text.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#00a67e;color:#fff;">🌐</div>
            <h3>Language Translator</h3>
            <p>Translate text between languages quickly and accurately.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#64748b;color:#fff;">📄</div>
            <h3>Summarizer</h3>
            <p>Condense long articles and documents into concise summaries.</p>
          </article>
          <article class="feature-card">
            <div class="feature-icon" style="background:#334155;color:#fff;">🔍</div>
            <h3>Journal Finder</h3>
            <p>Discover academic journals relevant to your research topic.</p>
          </article>
        </div>

        <div class="cta-band">
          <h2>Ready to elevate your writing?</h2>
          <p>Download Gramora today and start writing with confidence.</p>
          <a href="https://apps.apple.com" class="btn btn-primary">Get Gramora for Mac</a>
        </div>
      </div>
    </section>
  </main>
</body>
</html>