Thriveletter - Newsletter Agency Landing Page [Nextjs, Framer Motion]
This portfolio entry showcases a full-featured marketing site for ThriveLetterâan official partner agency of Beehiiv that builds ROI-driven newsletters for founders and brands. As the lead engineer, I built the site with Next.js (TypeScript) for SSR/SSG SEO friendliness, Framer Motion for dynamic UI interactions, and the Beehiiv API for real-time newsletter content and subscriptions.
| Feature | Description |
|---|---|
| Homepage Hero | Split layout with essential company stats (5âŻM+ monthly sends, 50%âŻ+ open rate, 4â5% average CTR, profitable in <âŻ90 days), dynamically fetched from Beehiiv â â powered by serverâside rendering with ISR for SEO and freshness. (thriveletter.studio) |
| Process Timeline | Interactive vertical stepper (Consult â Design â Write â Analyse) with elegant scroll-triggered bounce and fade effects (Framer Motion hooks) that guide users through the agencyâs newsletter creation pipeline. (thriveletter.studio) |
| Real Client Slider | Auto-cycling testimonials (âJennifer Pereira⊠50% open rate in just 12 issuesâ, âJosh Cons⊠hit his exact target audienceâ) with lazy-load avatars and lightbox modals. |
| Beehiiv Posts & Subscribe | Embedded recent articles from ThriveLetter Weekly (via Beehiiv API v2 endpoints) in a blog-like grid, along with a custom signup form that submits new subscribers via Beehiivâs /subscriptions endpoint â complete with loading states, error/tap feedback, and double-opt-in warnings. (product.beehiiv.com, thriveletter.beehiiv.com) |
| Pricing Cards | Toggleable monthly/yearly plans (âDoneâForâYouâ @âŻ$1,800/mo, plus custom âGrowâ+âMonetizeâ) shown as responsive card layouts with earlyâbird savings banner. (thriveletter.studio) |
| Global Event Tracking | Built-in Google Tag Manager for call-to-action clicks (Calendly links, âBook a Call Nowâ), using custom React hooks and Firebase analytics backend (for client conversions funnel analysis). |
| Responsive & Accessible | Full WCAGâAA compliance: semantic HTML, keyboard-navigation, ARIA tags, and aconstastâtuned dark mode toggle. Mobile-first tailwind CSS and optimized hero images with next/image. |
30 Sep 2024
Keywords
web development
design
ui
newsletter landing pages
tech
framer motion
animation
People who worked on this
