|
|
@@ -0,0 +1,282 @@
|
|
|
+<!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>
|
AhtashamShahzad1