MergeLater Public Home Page Plan

Overview

Create a high-converting public sales landing page for MergeLater that converts developers to early-access waitlist signups. Single-page format with smooth scroll navigation.

Design Direction: "Terminal Noir Elevated"

Aesthetic Philosophy

Evolve the existing Terminal Noir theme into a more dramatic, cinematic landing page experience. Think: developer tool meets luxury tech announcement. The page should feel like a late-night coding session where everything just works.

Typography

Headlines: Satoshi Bold (existing) - clean, modern, confident
Body: Satoshi Regular - readable, approachable
Technical/Code: JetBrains Mono - authentic developer aesthetic
Hero headline: Extra large (5xl-7xl), tight letter-spacing, text-gradient effect

Color Strategy

Primary: Deep void background (#0a0a0b) with layered surface depths
Accent: Terminal green (#22c55e) used sparingly for maximum impact
Text hierarchy: text (#e4e4e7), text-muted (#71717a), text-subtle (#52525b)
Glow effects: Terminal green with varying opacity for depth

Visual Effects (Enhanced for Landing Page)

Multiple floating glow orbs at different positions with staggered animations
Animated gradient mesh behind hero section
Scanline effect (subtle horizontal lines) for retro-terminal feel
Parallax-style scroll on decorative elements
Staggered reveal animations on scroll using CSS animation-delay
Typing effect on key headlines using CSS animations
Floating terminal mockup showing merge queue UI

Motion Principles

Entrance animations: Fade up with slight scale (0.95 → 1)
Stagger delays: 100ms increments for sequential elements
Hover states: Subtle lift (-2px) with enhanced glow
Scroll-triggered: Elements fade in as they enter viewport

Page Sections (Detailed)

1. Navigation Bar (Fixed, Glass-morphism)

[Logo] ............ [Features] [How It Works] [Use Cases] ............ [Login →]

Sticky top with backdrop-blur when scrolled
Semi-transparent background (bg-void/80)
Scroll-spy highlights current section
Login button styled as btn-secondary with subtle border
Mobile: Hamburger menu with slide-out nav

2. Hero Section (Full viewport height)

Layout: Split - Left text, Right floating terminal mockup

Left side:

"Early Access" pill badge (terminal green border, subtle glow, pulsing animation)
Main headline: "Merge PRs on your schedule" (gradient text on "your")
Subheadline: "Stop timing deploys around your calendar. Schedule GitHub merges for the perfect moment—then go live your life."
Kit waitlist embed
FOMO indicator: "Limited spots available • Be first when we launch" with a subtle animated border/glow

Right side:

Floating card showing mock merge queue interface
Animated status changes (pending → processing → completed)
Slight rotation and floating animation
Glowing edges

3. Pain Points Section (Emotional Hook)

Headline: "We've all been there."

Grid of 4 scenario cards with icons:

The Friday 4:59 PM Merge - "Teammates approve at EOD. Do you merge and risk the weekend, or wait until Monday?"
The Timezone Tango - "Your team spans 12 hours. Someone's always asleep when code needs to ship."
The 3 AM Launch - "Black Friday starts at midnight. Your deploy shouldn't require an alarm clock."
The 'I'll Do It Later' - "You said you'd merge after lunch. It's now 6 PM and that PR is still open."

Design: Dark cards with subtle borders, icon in terminal green, hover lift effect

4. Solution Section (How It Works)

Headline: "Three steps to freedom"

Horizontal timeline with numbered steps:

[1] ─────────── [2] ─────────── [3]
Connect         Schedule        Relax

Connect GitHub - "One-click OAuth. We only need repo access."
Pick Your Moment - "Paste a PR URL, choose your merge method, set the time."
Go Touch Grass - "We merge it. You get notified. Life goes on."

Design: Connected by glowing gradient line, icons animate on scroll

5. Features Grid

Headline: "Built for developers who value their time"

2x3 grid of feature cards:

Smart Scheduling - Timezone-aware, works globally
Merge Methods - Squash, merge commit, or rebase—your choice
Instant Notifications - Email & Slack when it's done (or fails)
Full Visibility - Dashboard shows all pending merges
GitHub Native - Uses official API, respects branch protections
No Lock-in - Cancel anytime, your PRs stay on GitHub

Design: Minimal cards, icon + title + one-line description

6. Use Cases Section

Headline: "Perfect for..."

Alternating left-right layout with lifestyle imagery (abstract/illustrated):

Release Managers - "Queue up merges for your next deployment window"
Remote Teams - "Schedule merges for when reviewers are awake"
E-commerce Teams - "Deploy promos exactly when sales start"
On-Call Engineers - "Set it and forget it—no more laptop-on-vacation"

7. Final CTA Section

Headline: "Ready to take back your time?" Subheadline: "Join the early access waitlist and be first to know when we launch."

Repeated Kit embed form
Centered layout with dramatic glow behind

8. Footer (Minimal)

Copyright notice
"Made for developers who'd rather be anywhere else when code ships."
Login link for existing users

Technical Implementation

Files to Create/Modify

resources/views/home.blade.php (NEW)
- Full landing page using <x-layouts.guest>
- All sections implemented with Tailwind + custom classes

routes/web.php (MODIFY line 8-10)

// Change from redirect to view
Route::get('/', fn() => view('home'))->name('home');

resources/css/app.css (MODIFY)
- Add smooth scroll: html { scroll-behavior: smooth; }
- Add scroll-margin-top for fixed nav offset
- Add new keyframes: fadeInUp, slideIn, typewriter
- Add .section-reveal class for scroll animations
- Add glass-morphism nav styles
- Add scanline overlay effect
resources/js/app.js (MODIFY - optional)
- Add IntersectionObserver for scroll-triggered animations
- Add scroll-spy for nav highlighting

Kit Embed Integration

<script async data-uid="a6de31828a" src="https://macademy.kit.com/a6de31828a/index.js"></script>

Placed in Hero section (primary CTA)
Repeated in Final CTA section

Copywriting Direction

Voice & Tone

Confident but not cocky - We solve a real problem
Developer-native - Use terms they know (PR, merge, squash, deploy)
Slightly irreverent - "Touch grass" energy, not corporate speak
Empathetic - We've felt this pain too

Key Messages

Primary: Your time matters more than watching a merge button
Secondary: Automation isn't lazy—it's smart
Tertiary: Ship on your schedule, not your calendar's

Headlines Bank

"Merge PRs on your schedule"
"The merge can wait. You shouldn't have to."
"Schedule it. Forget it. Ship it."
"Deploy at midnight without losing sleep"

Implementation Order

Update route in web.php to render home view
Create home.blade.php with section scaffolding
Implement Navigation bar with scroll links + Login
Build Hero section with Kit embed
Add Pain Points cards section
Add How It Works timeline
Add Features grid
Add Use Cases section
Add Final CTA with repeated embed
Add Footer
Add CSS animations and polish
Implement scroll-triggered reveals
Mobile responsive pass
Final polish and testing

Critical Files

File	Action	Purpose
`routes/web.php`	Modify	Change `/` from redirect to view
`resources/views/home.blade.php`	Create	New landing page
`resources/css/app.css`	Modify	Add landing page styles & animations
`resources/views/components/layouts/guest.blade.php`	Reference	Base layout (may extend ambient effects)
`resources/views/auth/login.blade.php`	Reference	Design patterns to maintain consistency

markshust/expressive-strolling-hopcroft.md

Select an option

No results found