Repurai — Landing Page Documentation

This document defines the complete content, layout structure, UI elements, copy, and design direction for the Repurai marketing landing page. It is written for designers and developers to implement directly.

Table of Contents

1. Page Overview & Design Philosophy
2. Section 01 — Navigation Bar
3. Section 02 — Hero
4. Section 03 — Source Logos Strip
5. Section 04 — Problem Statement
6. Section 05 — Core Features Bento Grid
7. Section 06 — AI Summary Feature Spotlight
8. Section 07 — Newsletter Campaigns Spotlight
9. Section 08 — Feed Sync Visual
10. Section 09 — Developer & API Section
11. Section 10 — Pricing Plans
12. Section 11 — FAQ Accordion
13. Section 12 — Final CTA Banner
14. Section 13 — Footer
15. Global Design Tokens & Notes

1. Page Overview & Design Philosophy

Goal

Convert visitors into signed-up users by clearly communicating what Repurai does, why it's better than juggling multiple tools, and making it trivially easy to get started for free.

Target Audience

• Content professionals, researchers, bloggers, and writers who follow many sources
• Newsletter creators who want to automate content curation
• Developers looking for a content feed API
• Power users frustrated with fragmented tools (separate RSS reader + newsletter tool + AI summarizer)

Design Direction

• Style: Clean, modern SaaS — dark-mode first with light sections for contrast rhythm
• Tone: Confident, clear, zero fluff — every sentence earns its place
• Layout pattern: Full-width sections with contained max-width content (1200px), generous whitespace between sections
• Primary color: Deep indigo / violet (suggests intelligence, trust)
• Accent color: Amber or emerald green (CTAs and highlights)
• Typography: Geometric sans-serif for headings (e.g. Inter, Geist, or Satoshi), readable serif or neutral sans for body
• Animations: Subtle scroll-triggered fade-ins, no heavy animations that delay perceived load

Page Flow Logic

Navbar
  ↓
Hero — hook the visitor, show value immediately
  ↓
Source Logos Strip — build credibility instantly ("works with what you already read")
  ↓
Problem Statement — earn empathy before pitching the solution
  ↓
Core Features Bento Grid — show the breadth of what Repurai does
  ↓
AI Summary Spotlight — deep dive on the most compelling differentiator
  ↓
Newsletter Campaigns Spotlight — second major differentiator
  ↓
Sync Visual — build confidence in reliability
  ↓
Developer API Section — capture the developer audience
  ↓
Pricing — clear, no-surprise plans
  ↓
FAQ — reduce friction and objections
  ↓
Final CTA Banner — last push to convert
  ↓
Footer

2. Section 01 — Navigation Bar

Layout

Fixed top navbar. Background: dark with blur (glass morphism on scroll). Full width with max-width container centered.

Left Side — Brand

• Logo mark — icon/wordmark for "Repurai"
• Logo text — "Repurai" in medium weight, slightly larger than nav links

Center — Navigation Links

Horizontal link list, hidden on mobile (hamburger menu on mobile):

Right Side — Actions

• "Sign In" — ghost/text button, muted color
• "Get Started Free" — filled primary CTA button, accent color, rounded

Mobile Behavior

• Logo left, hamburger icon right
• Drawer menu slides in from right with all nav links + both buttons stacked

3. Section 02 — Hero

Layout

Full-width section, vertically centered, dark background. Two-column layout on desktop (left: text, right: visual). Single column stacked on mobile.

Left Column — Copy

Eyebrow tag (small pill/badge above headline):

✦ Your content. Your way.

Main Headline (large, bold, 2–3 lines):

One place for everything
you read on the internet.

Subheadline (medium weight, muted color, 2–3 lines):

Repurai pulls in content from YouTube, blogs, newsletters,
Reddit, and hundreds of other sources — then lets you
read, organize, summarize, and share it all from one dashboard.

CTA Buttons (side by side, stacked on mobile):

• Primary: "Start for Free" — filled accent button → sign up page
• Secondary: "See How It Works" — outlined or ghost → smooth scroll to features

Trust line below buttons (small, muted):

Free plan available · No credit card required · Set up in 2 minutes

Right Column — UI Visual

A stylized, high-quality screenshot or illustrated mockup of the Repurai dashboard showing:

• The main feed dashboard in card view layout
• A few visible post cards from different sources (YouTube, blog, newsletter, Reddit)
• The left sidebar showing Spaces
• Subtle glow or gradient frame around the screenshot

Design note: Use a device mockup frame (browser window or floating card) to make it feel like a real product preview, not just a flat screenshot. Add a soft shadow and slight tilt or perspective for depth.

4. Section 03 — Source Logos Strip

Layout

Full-width narrow strip. Light background (or slightly lighter than hero dark). Centered content.

Headline (small, centered, muted):

Follows content from the sources you already love

Logo Row

A horizontally scrolling (or static on desktop) row of greyscale source logos or icon+label pairs:

Design note: Show 7–8 logos at a time. On mobile, auto-scroll/marquee animation. Logos should be muted/greyscale to keep visual noise low. End the row with "+ any RSS source" as a text label.

5. Section 04 — Problem Statement

Layout

Centered, single-column, dark or off-white background. Max-width ~720px for readability. Generous top/bottom padding.

Section Label (eyebrow, small caps):

THE PROBLEM

Headline:

You follow a lot.
You actually read very little.

Body Copy (3 short paragraphs):

Paragraph 1:

Every day, dozens of articles, videos, newsletters, and posts get published
from the sources you care about. They're scattered across different apps,
email inboxes, bookmarks, and browser tabs.

Paragraph 2:

You end up either missing important content entirely — or drowning in
open tabs you'll never get back to. There's no single place that brings
it all together without making it worse.

Paragraph 3:

Repurai fixes that. One dashboard, every source, full control.

Visual Element

Below the copy, three side-by-side "Before" pain point cards, then an arrow, then one "After" card:

Before cards (3 items with icons):

• 🗂️ "25 open browser tabs, none of them read"
• 📧 "Newsletter inbox overflowing with unread emails"
• 🔀 "Jumping between YouTube, Reddit, and blogs separately"

Arrow →

After card (1 item, accent color highlight):

• ✦ "Everything you follow, in one organized, readable dashboard"

6. Section 05 — Core Features Bento Grid

Layout

This is the centerpiece features section. Use a bento grid layout — a mix of differently-sized cards arranged in an asymmetric grid. Not a uniform feature list. Think of it like Apple's product pages.

Section Header (centered above the grid):

Eyebrow:

FEATURES

Headline:

Everything you need.
Nothing you don't.

Subtext:

Repurai is built around how people actually consume content —
not how apps think they should.

Bento Grid Card Specifications

The grid has two rows of cards. Use CSS grid. Suggested layout: 12-column grid.

Row 1 — Three Cards

Card 1 — Large (spans 5 cols)

• Icon: 📡 or antenna/signal icon
• Label tag: Feed Discovery
• Headline: Follow anything on the internet.
• Body: Search by topic, keyword, or URL and Repurai finds the feed for you. YouTube channels, blogs, Substack newsletters, Reddit threads, Google News — if it publishes a feed, you can follow it.
• Visual element: Small illustrated search bar with a URL being entered and 3–4 source cards appearing below it
• Background: Dark card, subtle gradient

Card 2 — Medium (spans 4 cols)

• Icon: 🗂️ or folder/layer icon
• Label tag: Spaces
• Headline: Organize by topic, project, or anything.
• Body: Create Spaces to group your feeds into categories that make sense to you — Work, Research, Personal, Clients. Move feeds between them anytime.
• Visual element: Illustrated sidebar showing 3–4 named spaces with feed counts
• Background: Slightly lighter dark card

Card 3 — Small (spans 3 cols)

• Icon: 📖 or book icon
• Label tag: Reading Modes
• Headline: 4 ways to read.
• Body: Card, Magazine, Article, or List view — switch formats to match your mood or workflow.
• Visual element: 4 tiny layout preview thumbnails side by side
• Background: Accent-tinted card (subtle)

Row 2 — Four Cards

Card 4 — Small (spans 3 cols)

• Icon: ⭐ or bookmark icon
• Label tag: Read Later
• Headline: Save it. Read it when you're ready.
• Body: Bookmark any post instantly and it waits for you in your Read Later list.
• Visual element: Simple bookmark icon animation illustration
• Background: Dark card

Card 5 — Medium (spans 4 cols)

• Icon: 📅 or calendar icon
• Label tag: Today View
• Headline: What's new today — nothing else.
• Body: Today View shows only posts published in the last 24 hours across all your sources. Start every morning with exactly what's fresh.
• Visual element: Illustrated feed list with "Today" date header and 2–3 posts with timestamps ("2 hrs ago", "5 hrs ago")
• Background: Dark card with subtle top accent line

Card 6 — Small (spans 2 cols)

• Icon: 🔍 or search icon
• Label tag: Search
• Headline: Find anything, across everything.
• Body: Search across all your feeds simultaneously with one query.
• Background: Minimal dark card, icon centered

Card 7 — Large (spans 3 cols)

• Icon: 🔔 or bell icon
• Label tag: Notifications
• Headline: Always in the loop.
• Body: Get alerts when important things happen — new content from key sources, newsletter delivery confirmations, and platform updates.
• Visual element: Small notification toast/card illustration
• Background: Dark card

7. Section 06 — AI Summary Feature Spotlight

Layout

Full-width alternating layout. Left: visual mockup, Right: text. Dark background. This section should feel premium — more space, larger type.

Section Tag (small pill):

✦ AI-POWERED

Headline:

Understand any post
in seconds.

Subheadline:

Stop spending 10 minutes reading an article to find out
it wasn't what you needed. Repurai's AI summaries give you
the key points instantly — from any source.

Feature List (icon + short text, stacked):

• 🧠 Smart article summaries — one click gives you the core insight of any post
• 🎥 YouTube transcript summaries — when a video transcript is available, AI summarizes what was actually said, not just the description
• 🔄 Automatic fallback — no transcript? No problem. AI falls back to summarizing the post content directly
• ⚡ Works on any post type — blogs, newsletters, news articles, Reddit posts, YouTube videos — one tap, any content

Right Visual — UI Mockup

Show a content drawer mockup with:

• An open post (article view)
• A visible "Summarize" button
• Below it, a summary card appearing with 3–4 bullet points
• Subtle AI shimmer/loading animation suggested

Bottom note (small, muted):

AI summaries available from the Starter plan. Daily limits apply per plan.

8. Section 07 — Newsletter Campaigns Spotlight

Layout

Full-width alternating layout. Left: text, Right: visual mockup. Slightly lighter dark background or a tinted section to visually separate from AI section.

Section Tag (small pill):

✦ NEWSLETTERS

Headline:

Turn your reading
into a newsletter.

Subheadline:

You're already curating great content. With Repurai, you can
automatically compile it into a newsletter and send it to
anyone — on a schedule you set, with zero extra tools.

How It Works — 3-Step Horizontal Flow (icon + text):

① Pick your sources        ②  Set your schedule         ③  It sends itself
━━━━━━━━━━━━━━━━━━━━       ━━━━━━━━━━━━━━━━━━━━━━━━      ━━━━━━━━━━━━━━━━━━━
Choose a Space or           Daily, weekly — you pick       Repurai compiles the
individual feeds as          the frequency and the          latest posts and delivers
your content source.         time of delivery.              the email automatically.

Supporting bullets:

• ✉️ Send to any email address — recipients don't need a Repurai account
• ✏️ Edit, pause, or resume campaigns at any time
• 🚀 Manual send when you want to dispatch outside the schedule
• 🔍 Search and manage all campaigns from one screen

Right Visual — UI Mockup

Show a campaign creation form mockup with:

• Campaign title field
• Frequency selector (Daily / Weekly)
• Time picker
• Source selector (Space dropdown)
• Recipient email field
• A preview of a sent newsletter email card

9. Section 08 — Feed Sync Visual

Layout

Centered, single-column, dark background. Compact section — more visual than text.

Section Tag:

ALWAYS FRESH

Headline:

Your feeds update themselves.
You just read.

Body:

Repurai automatically syncs all your feeds twice a day —
at midnight and noon. Need something right now?
Trigger a manual sync on any feed, or refresh everything at once with Global Sync.

Visual — Sync Timeline Diagram

A horizontal timeline illustration showing:

• 12:00 AM marker with sync icon → label: "Auto sync — all feeds refreshed"
• 12:00 PM marker with sync icon → label: "Auto sync — all feeds refreshed"
• Any time marker with a cursor/hand icon → label: "Manual sync — refresh a single feed on demand"
• Pro/Business badge → "Global Sync — refresh all feeds at once"

Plan Comparison Mini-Table (inline, small):

Free       →   1× auto sync / day + 3 manual syncs
Starter    →   2× auto sync / day + 10 manual syncs
Pro        →   2× auto sync / day + 25 manual + 3× global sync
Business   →   2× auto sync / day + 50 manual + 10× global sync (priority queue)

10. Section 09 — Developer & API Section

Layout

Full-width section. Dark background with a subtle code aesthetic (monospace accents, terminal-style elements). Two-column — left: text, right: code snippet card.

Section Tag (small pill, monospace font):

{ } API

Headline:

Build on top of Repurai.

Subheadline:

A full public REST API gives developers programmatic access to
feeds, posts, spaces, and more. Pipe your content anywhere —
Notion, Slack, custom dashboards, internal tools.

Feature List (icon + text):

• 🔑 API key management — generate, name, revoke, and monitor keys from your dashboard
• 📦 RESTful JSON API — standard HTTP methods, clean structured responses, no proprietary SDK needed
• 🔗 Access feeds, posts, spaces, and bookmarks via API
• ⚡ Trigger manual syncs via API — fit Repurai into any automation workflow
• 📊 Usage logs and analytics — monitor request volume and activity in real time

Right Visual — Code Snippet Card

A styled dark card with syntax-highlighted code:

GET /api/v1/feeds/posts
Authorization: Bearer YOUR_API_KEY

Response:
{
  "posts": [
    {
      "id": "post_01j8...",
      "title": "The Future of AI in Content Curation",
      "source": "MIT Technology Review",
      "published_at": "2025-03-15T09:41:00Z",
      "url": "https://...",
      "summary": null
    }
  ],
  "total": 142,
  "page": 1
}

CTA below:

• "Read the API Docs →" — outlined button → links to docs.repurai.com/api

Plan note (small, muted):

API access available from the Starter plan. Rate limits vary by plan.

11. Section 10 — Pricing Plans

Layout

Centered section, light or very slightly lighter dark background to create contrast. Max-width 1100px.

Section Header:

Eyebrow:

PRICING

Headline:

Simple pricing.
No surprises.

Subtext:

Start free. Upgrade only when you need more.
All paid plans include a 14-day free trial — no credit card required.

Billing Toggle

A toggle switch between Monthly and Annually (with "Save 20%" label badge on Annual).

Pricing Cards — 4 Cards in a Row

Each card contains:

Card 1 — Free

• Badge: none
• Price: $0 / forever
• Tagline: Start exploring with no commitment.
• Divider line
• Feature list (checkmarks):
  • 10 feeds
  • 3 Spaces
  • 30 Read Later posts
  • 4 layout views + Today View
  • 5 AI summaries / day
  • 1 newsletter campaign (manual send, 3 recipients)
  • 1× auto sync / day + 3 manual syncs
  • Basic search
• CTA Button: "Get Started Free" — outlined

Card 2 — Starter

• Badge: none
• Price: $9/mo (monthly) / $7/mo (annual)
• Tagline: For consistent readers and content professionals.
• Divider line
• Feature list:
  • 50 feeds
  • 8 Spaces
  • 200 Read Later posts
  • Full search
  • 30 AI summaries / day (incl. YouTube transcripts)
  • 3 newsletter campaigns, scheduled delivery, 10 recipients
  • 2× auto sync / day + 10 manual syncs
  • 1 API key + REST API access
• CTA Button: "Start Free Trial" — outlined

Card 3 — Pro (visually highlighted — most popular)

• Badge: "Most Popular" — accent color pill at top of card
• Card border: accent color glow/highlight
• Price: $19/mo (monthly) / $15/mo (annual)
• Tagline: For power users who rely on content daily.
• Divider line
• Feature list:
  • 200 feeds
  • 25 Spaces
  • 1,000 Read Later posts
  • 100 AI summaries / day
  • 10 newsletter campaigns, 50 recipients
  • 2× auto sync / day + 25 manual + 3× global sync
  • 3 API keys + full API logs
• CTA Button: "Start Free Trial" — filled accent (primary)

Card 4 — Business

• Badge: none
• Price: $49/mo (monthly) / $39/mo (annual)
• Tagline: For agencies, researchers, and heavy operators.
• Divider line
• Feature list:
  • 500 feeds
  • 50 Spaces
  • 5,000 Read Later posts
  • 300 AI summaries / day
  • 25 campaigns, 100 recipients, custom sender name
  • 2× auto sync (priority) + 50 manual + 10× global sync
  • 10 API keys + full logs + CSV export
• CTA Button: "Start Free Trial" — outlined

Below Cards — Value Callout

A single centered line with a subtle background:

💡 Repurai Pro replaces Inoreader ($10) + Beehiiv ($49) + an AI summarizer ($10)
   — at $19/month for everything, unified.

12. Section 11 — FAQ Accordion

Layout

Centered, single column, max-width 720px. Each FAQ item is an expandable accordion row. Alternating light/dark background to distinguish from pricing section.

Section Header:

Headline:

Frequently asked questions.

FAQ Items

Each item has a question (bold, clickable to expand) and an answer (appears on expand):

Q: Is the free plan really free forever? A: Yes. The Free plan has no time limit and requires no credit card. You can use it indefinitely within the plan's limits. Upgrade only when you need more feeds, summaries, or campaigns.

Q: What counts as a "feed"? A: Any individual content source you follow — a YouTube channel, a blog, a subreddit, a Substack newsletter, a Google News topic, or any site that publishes RSS — counts as one feed.

Q: How do AI summaries work for YouTube videos? A: When a YouTube video has a transcript available, Repurai uses it to generate a detailed, content-grounded summary of what was actually said. If no transcript is available, the AI summarizes the post's available content and description instead. One summary credit covers either type — you don't need to think about it.

Q: Do my newsletter recipients need a Repurai account? A: No. Your recipients receive emails directly in their inbox like any regular newsletter. They don't need to sign up for or know anything about Repurai.

Q: How often do my feeds sync automatically? A: Free plan users get one automatic sync per day at 12:00 PM. All paid plans get two automatic syncs per day — at 12:00 AM (midnight) and 12:00 PM (noon). You can also trigger manual syncs at any time within your plan's daily allowance.

Q: Can I switch between plans? A: Yes, at any time. Upgrades take effect immediately and you're only charged the prorated difference. Downgrades take effect at the start of your next billing cycle.

Q: What happens to my data if I downgrade to Free? A: Your data is always safe. If you exceed Free limits (e.g., more than 10 feeds), excess feeds are paused — not deleted. Upgrade at any time to re-activate them.

Q: Is there a discount for paying annually? A: Yes — annual billing saves you up to 20% compared to monthly pricing. The discount is applied automatically when you select annual at checkout.

Q: Can I access my content via API? A: Yes. Starter plan and above includes API key access to the full public REST API — query your feeds, posts, spaces, bookmarks, and even trigger syncs programmatically. Full docs at docs.repurai.com/api.

13. Section 12 — Final CTA Banner

Layout

Full-width section. Bold, high-contrast background — either the accent color or a rich gradient from indigo to violet. Centered text. No distractions.

Headline (large, white):

Start reading smarter today.

Subtext (medium, white/muted):

Free to start. No credit card. Takes less than 2 minutes.

CTA Buttons (centered, side by side):

• Primary: "Create Free Account" — white filled button with dark text
• Secondary: "See Pricing" — white outlined button

Small trust badges below buttons (icon + text, inline row):

• ✓ Free plan, forever
• ✓ 14-day trial on paid plans
• ✓ Cancel anytime
• ✓ No credit card to start

14. Section 13 — Footer

Layout

Full-width, dark background. 4-column grid on desktop, stacked on mobile. Max-width container.

Column 1 — Brand

• Logo (icon + wordmark)
• Tagline: Collect smarter. Read better. Share effortlessly.
• Social icons: Twitter/X, GitHub (if applicable), LinkedIn

Column 2 — Product

Links:

• Features
• Pricing
• Changelog
• Roadmap (optional)

Column 3 — Developers

Links:

• API Documentation
• API Reference
• Getting Started Guide
• Status Page (optional)

Column 4 — Company

Links:

• About
• Blog (optional)
• Contact
• Privacy Policy
• Terms of Service

Bottom Bar (full-width, border-top, small text row):

© 2025 Repurai. All rights reserved.     Privacy Policy  ·  Terms of Service

15. Global Design Tokens & Notes

Color Palette

Typography Scale

Spacing Rhythm

• Section vertical padding: 80px–120px top and bottom
• Card internal padding: 24–32px
• Between section headline and content: 32px
• Between cards in grid: 16px gap

Responsive Breakpoints

CTA Button Styles

Bento Grid Notes

• Bento grid should use CSS Grid with grid-template-columns: repeat(12, 1fr)
• Cards should have border-radius: 16px and a subtle 1px border in --color-border
• Hover state: slight scale(1.01) transform + border brightens slightly
• Each card should have a small colored top-border or icon accent to distinguish categories

Interaction & Animation Notes

• Scroll-triggered fade-in + slight translateY for all section content (use IntersectionObserver)
• Hero headline: staggered word-by-word or line-by-line reveal
• Bento cards: staggered entrance on scroll (not all at once)
• Pricing toggle (monthly/annual): smooth price number transition (CSS counter animation or JS tween)
• FAQ accordion: smooth max-height expand, no jarring jumps
• No autoplay videos, no heavy loaders — keep perceived performance fast

This document is the single source of truth for the Repurai landing page. All copy, layout decisions, and UI element specifications are defined here. Designers should use this as the content spec; developers should use this for implementation reference.