Merge pull request #338 from useplunk/release-please--branches--next--components--plunk

Closes #342

.env.self-host.example

@@ -29,7 +29,7 @@ WIKI_URI=http://localhost:1000
 # Use placeholder URLs that will be replaced at Docker container runtime
 NEXT_PUBLIC_API_URI=https://next-api.useplunk.com
 NEXT_PUBLIC_DASHBOARD_URI=https://next-app.useplunk.com
-NEXT_PUBLIC_LANDING_URI=https://next.useplunk.com
+NEXT_PUBLIC_LANDING_URI=https://www.useplunk.com
 NEXT_PUBLIC_WIKI_URI=https://next-wiki.useplunk.com
 
 # Set to 'true' if using HTTPS in production (behind a reverse proxy/load balancer)
@@ -145,6 +145,21 @@ SMTP_DOMAIN=smtp.example.com
 # Default: true
 # AUTO_PROJECT_DISABLE=false
 
+# ========================================
+# OPTIONAL: Self-Hosting User Management
+# ========================================
+# Controls whether new user signups are allowed
+# When enabled (true), the signup endpoint will reject new user registration attempts
+# Useful for private instances or when you want to manually manage users
+# Default: false
+# DISABLE_SIGNUPS=false
+
+# Controls whether email validation checks are performed on signup
+# When enabled (true), validates emails for disposable domains, plus-addressing, domain existence, and MX records
+# When disabled (false), skips these validation checks and allows any email format
+# Default: false
+# VERIFY_EMAIL_ON_SIGNUP=false
+
 # ========================================
 # ADVANCED (rarely needed)
 # ========================================

.github/ISSUE_TEMPLATE/feature-requests.md

@@ -0,0 +1,21 @@
+---
+name: Feature requests
+about: Use this template to suggest new features for Plunk
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+## Is your feature request related to a problem?
+
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+## Describe the solution you'd like
+A clear and concise description of what you want to happen.
+
+## Alternatives or workarounds
+A clear and concise description of any alternative solutions or features you've considered.
+
+## Additional context
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/product-issues.md

@@ -0,0 +1,61 @@
+---
+name: Product Issues
+about: Use this template for bugs and issues on Plunk
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+## Description
+
+
+## To Reproduce
+
+## Expected behavior
+
+## Environment
+
+Please select the option that applies:
+
+* Deployment type:
+
+  * [ ] Hosted
+  * [ ] Self-hosted
+
+If self-hosted, please provide relevant details (Docker, Kubernetes, bare metal, etc.):
+
+
+## Version verification
+
+> ⚠️ **Important:**
+> Self-hosted issues **must** be reproduced on the latest commit.
+> Issues without a confirmed commit SHA may be closed without investigation.
+
+* [ ] I am using the hosted version
+
+**If self-hosted:**
+
+* [ ] I have confirmed this issue still exists on the **latest commit** (not the `latest` tag)
+
+  * Commit SHA tested: `__________`
+
+## Logs / Error output
+
+If applicable, add logs, stack traces, or error messages here.
+
+```
+PASTE LOGS HERE
+```
+
+## Screenshots / Recordings / Additional context
+
+---
+
+## Checklist
+
+Please confirm the following before submitting:
+
+* [ ] I have searched existing issues to ensure this bug has not already been reported
+* [ ] I have provided clear reproduction steps
+* [ ] I have included all relevant environment details

.impeccable.md

@@ -0,0 +1,17 @@
+## Design Context
+
+### Users
+Developer-founders and indie hackers building SaaS products. They use Plunk to handle transactional and marketing email without the complexity of tools like Mailchimp or Customer.io. They notice tiny details — inconsistent spacing, placeholder text that adds no value, a button that doesn't communicate state. Context: professional environment, desktop-first.
+
+### Brand Personality
+Sharp, minimal, confident. The product earns trust by being simple and correct, not by being flashy. Testimonials emphasize "transparent UI", "easy setup", "clean design" — the brand is *care without noise*.
+
+### Aesthetic Direction
+Light mode only. Palette: black (`neutral-900`), neutral grays, white. No accent colors. No color for decoration — only for semantics (red = error, green = success). Backgrounds are near-white with subtle texture. Cards use white with a neutral border and light shadow. Typography should feel precise and legible, not editorial. Spacing should feel considered, not generous.
+
+### Design Principles
+1. **Every pixel earns its place.** If something doesn't communicate information or provide affordance, remove it.
+2. **Neutral by default, semantic by exception.** Color is reserved for error/success/warning states, not decoration.
+3. **Interaction should feel fast.** Loading states communicate exactly what's happening. No silent actions.
+4. **Developer-grade precision.** Copy is short and direct. Placeholders only appear when they add value. Labels are unambiguous.
+5. **Consistency is trust.** The same pattern everywhere. One way to show errors. One way to show success. No creative variation in functional UI.

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.4.0"
+  ".": "0.9.0"
 }

.yarnrc.yml

@@ -2,7 +2,7 @@ nodeLinker: node-modules
 
 # Support multiple architectures - download pre-built binaries instead of compiling
 supportedArchitectures:
-  os: [ "linux", "darwin" ]
+  os: [ "linux", "darwin", "win32" ]
   cpu: [ "x64", "arm64" ]
   libc: [ "glibc" ]
 

CHANGELOG.md

@@ -1,5 +1,176 @@
 # Changelog
 
+## [0.9.0](https://github.com/useplunk/plunk/compare/v0.8.0...v0.9.0) (2026-04-20)
+
+
+### Features
+
+* Add accept/markdown to apps/landing ([df76be1](https://github.com/useplunk/plunk/commit/df76be1b87de14769a219ae0e6c99711edf993a1))
+* Add emailId field to webhook events for better correlation with send requests ([ae64c2d](https://github.com/useplunk/plunk/commit/ae64c2dbb5b76f16b562641953f262d76ea0d8e8)), closes [#344](https://github.com/useplunk/plunk/issues/344)
+* Add headless template type ([fb5aa87](https://github.com/useplunk/plunk/commit/fb5aa8796a8550be7a70fdd91616c9a41ed3047d))
+* Add onboarding flow ([bd5a085](https://github.com/useplunk/plunk/commit/bd5a0858021b9d74fae07cca5d2a0b8c10deabd7))
+* Add type to campaign ([d24259e](https://github.com/useplunk/plunk/commit/d24259e8d202edd1b8c7771a63cc212c982b52e1))
+* Block domain changes for disabled projects with appropriate error handling ([44c8657](https://github.com/useplunk/plunk/commit/44c86572c275221b5068605c64958f43a1f96ff4))
+* Disable projects on failed payment ([3343e89](https://github.com/useplunk/plunk/commit/3343e891bdbcfee7d17d73a0d7fb181652e7c262))
+* Enhance email processing to include parsed HTML body content in inbound email records ([e339508](https://github.com/useplunk/plunk/commit/e3395083db11fdb4b6cfdbace46518792ec132a3)), closes [#342](https://github.com/useplunk/plunk/issues/342)
+* Enhance login forms with last used authentication method ([f2ebce0](https://github.com/useplunk/plunk/commit/f2ebce0ef2ac9c9c4e994cb754f67f6fa8a3f465))
+* Enhance security metrics handling with new thresholds and improved messaging ([c0b2aba](https://github.com/useplunk/plunk/commit/c0b2abaeca5656743e189f975ab82ff9b25b577b))
+* implement AWS SNS signature verification in SecurityService ([b79d416](https://github.com/useplunk/plunk/commit/b79d4166671cc04cc1458d2c24af262af0e16c9e))
+* integrate DOMPurify for sanitizing HTML content ([bf12392](https://github.com/useplunk/plunk/commit/bf12392b88fc92b0760333e1b568e3d6d1b6ed74))
+* Update new project bounce thresholds for stricter email handling ([5e62f51](https://github.com/useplunk/plunk/commit/5e62f517fc896849c270e795cd31a110b83707cc))
+
+
+### Bug Fixes
+
+* Enhance email processing to support campaign types and improve unsubscribe logic ([9e2400c](https://github.com/useplunk/plunk/commit/9e2400c6de6f13c498f02c489f956ebf89de36b0))
+* Hint custom event names in combobox when no matches are found ([3214f6c](https://github.com/useplunk/plunk/commit/3214f6c42d4ca6ab628e905ac69ed82648ccf47c))
+* Implement content negotiation for markdown and html in middleware ([37ed1e4](https://github.com/useplunk/plunk/commit/37ed1e49b78eb9339e7b62fd2fd5b60d451707d6))
+* Implement SSRF protection in webhook handling with safeFetch method ([2c5a715](https://github.com/useplunk/plunk/commit/2c5a71518da358927bd5e41035b85fd278790b47))
+* Refactor date filtering logic for pagination in ActivityFeed and ActivityService ([52cb2b6](https://github.com/useplunk/plunk/commit/52cb2b6c77bc3912b356887bdd48e9c8b9b1728a))
+* Update language validation regex to support locale variants ([7834b9e](https://github.com/useplunk/plunk/commit/7834b9e7ef615ba029a1a091b0c37c8f40eb543c))
+
+
+### Documentation
+
+* Add content negotiation to apps/wiki ([545d733](https://github.com/useplunk/plunk/commit/545d7337948f41f006f9cb0270b4bfff2b08ed2c))
+
+## [0.8.0](https://github.com/useplunk/plunk/compare/v0.7.1...v0.8.0) (2026-03-31)
+
+
+### Features
+
+* Add multi-branch workflow conditions (switch/case) ([92949b7](https://github.com/useplunk/plunk/commit/92949b7596740b73d04c30e0e2bcc6305bbdf4a7))
+* **i18n:** add Chinese translations (zh-TW, zh-HK, zh-CN) ([33df563](https://github.com/useplunk/plunk/commit/33df5632a3d4068e641687c8d404a6eef4aa4d0e))
+* **i18n:** add Italian translation ([7b6872c](https://github.com/useplunk/plunk/commit/7b6872c4b79b0fde4491f02851a2049c846c83d6))
+
+
+### Bug Fixes
+
+* Adapt SNS Webhook validation regex pattern to also support AWS eusc partition ([7b6540a](https://github.com/useplunk/plunk/commit/7b6540a748a90c10f41b931450ac809e7ae23c01))
+* add alt text to email badge image ([3b39d84](https://github.com/useplunk/plunk/commit/3b39d847cd278317723b4b226434c26c49becebe))
+* broken links to next-wiki.useplunk.com ([e3ea5fb](https://github.com/useplunk/plunk/commit/e3ea5fb6dcea95b5028f140b77e54d5938497223))
+* Connect branches smoothly to original node ([2c3e897](https://github.com/useplunk/plunk/commit/2c3e8970cbc4ad2eb39fd505a4292345c6cae1c0))
+* Enhance email step configuration validation and recipient handling ([b50b5af](https://github.com/useplunk/plunk/commit/b50b5af763d8a44b09c7022e1d9135bfca7907f6))
+* Enhance email step configuration validation and recipient handling ([a99cde8](https://github.com/useplunk/plunk/commit/a99cde88392450bf719112cb94cc1b9e7c7c1478))
+* normalize field references and handle undefined values in JSON ([b9d692c](https://github.com/useplunk/plunk/commit/b9d692cf5b491ab22a40ec69e77ff7bdc62eec63))
+* Prevent switching if nodes are attached to multi-branch ([c32b54f](https://github.com/useplunk/plunk/commit/c32b54f588db79a501db456e6075a337dee8ed26))
+* update old references to next.useplunk.com ([44987d2](https://github.com/useplunk/plunk/commit/44987d2b5e8028c6f8f26c39e9dec386e1ccf6e1))
+* visual editor preview ([4451e92](https://github.com/useplunk/plunk/commit/4451e921caff45dab126006ba103d91816bed696))
+
+
+### Documentation
+
+* Fix broken links on api overview page ([dc2ce02](https://github.com/useplunk/plunk/commit/dc2ce02d1a4e4d1641728b720ca856cedba719a7))
+* Improve self-hosting env variable documentation ([f0ef346](https://github.com/useplunk/plunk/commit/f0ef34646e7593f07a780141e14d6d2b735c1101))
+
+## [0.7.1](https://github.com/useplunk/plunk/compare/v0.7.0...v0.7.1) (2026-03-10)
+
+
+### Bug Fixes
+
+* Align preview and actual email for templates and campaigns ([cc7fcdb](https://github.com/useplunk/plunk/commit/cc7fcdb4ef31e9dfb4f7403aa93479b6df56719d))
+
+
+### Documentation
+
+* Add inbound to docs ([6c4cc29](https://github.com/useplunk/plunk/commit/6c4cc295b88db6da8d9edcf23064a3fc8e9f5c36))
+* Improve webhook documentation ([f6a32ce](https://github.com/useplunk/plunk/commit/f6a32ce610559050c1ca9978607bd57ac51e906f))
+
+## [0.7.0](https://github.com/useplunk/plunk/compare/v0.6.0...v0.7.0) (2026-03-05)
+
+
+### Features
+
+* **api:** support inline images in emails using Content-ID ([9b15b93](https://github.com/useplunk/plunk/commit/9b15b93b96344f811d869d103b3b6d344b531811))
+* Sort projects alphabetically in the dashboard and fix layout ([64bd094](https://github.com/useplunk/plunk/commit/64bd094b47abbc4feaeb93d97915df57763b3907))
+* Static segments ([4b51e38](https://github.com/useplunk/plunk/commit/4b51e386e39ae38d6ea52eb87858de36fa45ab46))
+
+
+### Bug Fixes
+
+* Add support for STATIC segment type in CampaignService ([7bd098b](https://github.com/useplunk/plunk/commit/7bd098bdd01a8af0dd41ec515880289b1795e5af))
+* correct cookie domain for .local TLD hostnames ([59aa784](https://github.com/useplunk/plunk/commit/59aa7845bad69a1768bb88f83cfcea607c447538))
+* Correctly set domain status on manual verify ([21af8fe](https://github.com/useplunk/plunk/commit/21af8fe05e0450e8d826a3a01224511a337ca072))
+* Do not unsubscribe existing contacts ([2c4d95e](https://github.com/useplunk/plunk/commit/2c4d95e604cbed9189f7ee07c24b1f236fce7990))
+* Support any locale on creation ([ec1f4c9](https://github.com/useplunk/plunk/commit/ec1f4c9374e06e3defed3c728be603c10e4e7baa))
+* Verify SNS URL before sending fetch request ([b8f1ad9](https://github.com/useplunk/plunk/commit/b8f1ad9ab53c78f8ef063fdc125f397c8bfc7652))
+
+
+### Documentation
+
+* Static segments ([e8a247f](https://github.com/useplunk/plunk/commit/e8a247fe12b79ae8a25a74485179e93081fe2002))
+
+## [0.6.0](https://github.com/useplunk/plunk/compare/v0.5.0...v0.6.0) (2026-02-19)
+
+
+### Features
+
+* Ability to change workflow trigger ([eec37ec](https://github.com/useplunk/plunk/commit/eec37ecb31c63888879a1933dba4fd0c6243018b))
+* Add billing for inbound ([3330d83](https://github.com/useplunk/plunk/commit/3330d83d08904bc547740bfc9fdcbc5ff214d977))
+* Add billing for inbound ([de7ed84](https://github.com/useplunk/plunk/commit/de7ed84fcfddde16a9297c947048e9876712f6fa))
+* Add dedicated received type ([f947ee6](https://github.com/useplunk/plunk/commit/f947ee6f22371055801fa9cfc62e15df7851986c))
+* **i18n:** Add Spanish language ([9c69c7a](https://github.com/useplunk/plunk/commit/9c69c7a36edd86fdc02b8d0d3e3f8d64ed8ecfa6))
+
+
+### Bug Fixes
+
+* Enhance email bounce notification with latest bounce details ([e639c72](https://github.com/useplunk/plunk/commit/e639c72e8b940ba1da472d355f930359da7c868b))
+
+
+### Documentation
+
+* Add receiving emails functionality and update DNS records documentation ([b426986](https://github.com/useplunk/plunk/commit/b42698616a3f7bb079a092375ac886f2a9d7405d))
+
+## [0.5.0](https://github.com/useplunk/plunk/compare/v0.4.0...v0.5.0) (2026-02-17)
+
+
+### Features
+
+* Ability to disable signups and disable email verification for self-hosters ([9316564](https://github.com/useplunk/plunk/commit/93165644af1ebcd7d5eb1900b13e5e38c1af0262))
+* add "olderThan" segment filter operator ([b5fa21a](https://github.com/useplunk/plunk/commit/b5fa21a57cbf491e0438eb29fc9419063fa2aea7))
+* Add additional checks for website, NS records and personal emails ([0a67a82](https://github.com/useplunk/plunk/commit/0a67a8278f45d89b1abdf55be1cf251a470595cf))
+* Add advanced DNS configuration ([7964563](https://github.com/useplunk/plunk/commit/7964563b620868279f5fb6baab0d7499c41f51ed))
+* Add bounce and complaint filter to activity feed ([c85df75](https://github.com/useplunk/plunk/commit/c85df75d539f7e5500a9a109966b0e6d654d4022))
+* add documentation link and redirect to WIKI_URI ([4c81d9e](https://github.com/useplunk/plunk/commit/4c81d9ec04003550b140d884f37ebbf13137166d))
+* Add inbound handling ([d050b55](https://github.com/useplunk/plunk/commit/d050b55baaf46306be3fb6e5ad683205e158bd65))
+* Add initial handling in webhook for inbound ([e01dc40](https://github.com/useplunk/plunk/commit/e01dc4066c5e5eb5e0e69ef92f8a5bb7786e5a91))
+* Add initial handling in webhook for inbound ([c286f49](https://github.com/useplunk/plunk/commit/c286f490974d8dfe9c94695c63e6b48216b8052d))
+* add minimum thresholds for bounce and complaint rates ([d55dda3](https://github.com/useplunk/plunk/commit/d55dda312718890231d1a428448e607792799c84))
+* Add support for custom email recipients in workflow steps ([78d3d22](https://github.com/useplunk/plunk/commit/78d3d224af60cf5b58c6b18fdd0921320912fb09))
+* **i18n:** Add Bulgarian translations ([663bc2b](https://github.com/useplunk/plunk/commit/663bc2be8da69733d2bbc53c6b1bfcc36ff55cf8))
+* **i18n:** add Czech locale translations ([14c471e](https://github.com/useplunk/plunk/commit/14c471e4cadbe1bbf90e53522134fad3d81ff107))
+* **i18n:** add Polish locale translations ([7a6df77](https://github.com/useplunk/plunk/commit/7a6df7760bc73dfe80dcf2d37612e320f6de1d30))
+* **i18n:** add Polish locale translations ([d2d779c](https://github.com/useplunk/plunk/commit/d2d779c68f958a6ac0e77b7588e92a5c705a8fd4)), closes [#246](https://github.com/useplunk/plunk/issues/246)
+* **i18n:** Add Portuguese translations ([c2afb2d](https://github.com/useplunk/plunk/commit/c2afb2dfab977ae74f3b694601a1f2d0353660a8))
+* Integrate NuqsAdapter for improved state management and query handling ([0cf0a26](https://github.com/useplunk/plunk/commit/0cf0a26a97e608f654ed3046c1a46d414557e3ee))
+* Remove domain from AWS if no longer in use by other projects ([e6baace](https://github.com/useplunk/plunk/commit/e6baace00d5f7a109e717b8a996bc2cda52cc9fa))
+
+
+### Bug Fixes
+
+* added missing services:down script, added "win32" to supportedArchitectures for yarn package installation, added missing required WIKI_URI to .env.example of api ([ddbe523](https://github.com/useplunk/plunk/commit/ddbe5237fe7012e197e3b398aebc8e2921a4328a))
+* Center "Add Step" nodes below parent nodes and update positions on drag ([e4e334c](https://github.com/useplunk/plunk/commit/e4e334c77a7ba41e5a60b69b9c64fa3bb72f1e74))
+* Enhance email activity filtering by adding date range checks ([ad0c17d](https://github.com/useplunk/plunk/commit/ad0c17da566a26a296229c05d9b4e18cf7d401ad))
+* Ensure template type is loaded before rendering Select ([8a38766](https://github.com/useplunk/plunk/commit/8a38766c025afd5ef15fee4b7c5baea97a45ec48))
+* Implement merging for activity updates to preserve component state ([0d4b694](https://github.com/useplunk/plunk/commit/0d4b694208fd8e516e1f50f7384d1ac5bd6561e0))
+* Improve bounce handling logic to differentiate between permanent and transient bounces ([7df43d8](https://github.com/useplunk/plunk/commit/7df43d8553eca93b601915ea4deaf59233e848c7))
+* Improve email verification logic by prioritizing MX record checks and clarifying domain existence validation ([26800a8](https://github.com/useplunk/plunk/commit/26800a85538fc90aa05fc43b1cc33cef95d8fb32))
+* Refactor Redis keys to prevent multiple messages on concurrent requests ([4db1ccc](https://github.com/useplunk/plunk/commit/4db1ccc3fc59edb0187d8e2223f45bb0bce6deb5))
+* Remove 'Optional' label from MAIL FROM Domain and Inbound Email headings ([f9b1354](https://github.com/useplunk/plunk/commit/f9b135446040de099484db66139560f43bbf027e))
+* Update contact subscription logic for upsert operations ([a928666](https://github.com/useplunk/plunk/commit/a928666dfcdc65c90602051c79b3c008282674aa))
+* Update URL replacement logic to handle runtime paths and add warnings for missing files ([c07816c](https://github.com/useplunk/plunk/commit/c07816c2a1b029d83400128f4720263e975214ad))
+
+
+### Code Refactoring
+
+* remove unnecessary logging for segment processing ([42ceb6e](https://github.com/useplunk/plunk/commit/42ceb6edc03ebc6f14c6d399e859914ac09f1ab6))
+
+
+### Documentation
+
+* add webhooks documentation for real-time event handling ([5bce1d7](https://github.com/useplunk/plunk/commit/5bce1d74fffb927bcbb2c7df624fde089101efc8))
+* update contacts documentation to include subscription state and email delivery rules ([b4404f6](https://github.com/useplunk/plunk/commit/b4404f698ec28a59f32d728c15c59c8b7765d377))
+
 ## [0.4.0](https://github.com/useplunk/plunk/compare/v0.3.0...v0.4.0) (2026-01-08)
 
 

CLAUDE.md

@@ -64,12 +64,12 @@ to run them separately (e.g., for debugging), use `dev:server` and `dev:worker`
 ### Applications (`apps/`)
 
 - **api**: Express.js API server with TypeScript (ESM), uses @overnightjs/core
-    - HTTP API endpoints for the platform
-    - Background cron jobs (workflow processor, domain verification)
-    - **Worker process** (separate): BullMQ worker for processing email, campaign, and workflow queues
+  - HTTP API endpoints for the platform
+  - Background cron jobs (workflow processor, domain verification)
+  - **Worker process** (separate): BullMQ worker for processing email, campaign, and workflow queues
 - **web**: Next.js app (Pages Router) - Main platform (next-app.useplunk.com)
-- **landing**: Next.js app (Pages Router) - Marketing site (next.useplunk.com)
-- **wiki**: Next.js app - Documentation site (next-wiki.useplunk.com)
+- **landing**: Next.js app (Pages Router) - Marketing site (www.useplunk.com)
+- **wiki**: Next.js app - Documentation site (docs.useplunk.com)
 
 ### Background Job Architecture
 
@@ -148,6 +148,12 @@ Required for builds and deployment (see turbo.json and .env.example):
 - Notifications (optional): `NTFY_URL` (ntfy.sh topic URL or self-hosted server for system notifications)
 - Platform Email Notifications (optional): `PLUNK_API_KEY` (enables email notifications to users for critical events like
   project disabled, billing limits, etc. If not set, only ntfy notifications are sent)
+- Self-hosting User Management (optional):
+  - `DISABLE_SIGNUPS` (default: false) - When set to true, prevents new user signups via the API
+  - `VERIFY_EMAIL_ON_SIGNUP` (default: false) - When set to true, validates emails on signup for disposable domains,
+    plus-addressing, domain existence, and MX records
+- Security (optional): `AUTO_PROJECT_DISABLE` (default: true) - Controls whether projects are automatically disabled when
+  bounce/complaint rate thresholds are exceeded
 
 **Important Notes:**
 
@@ -159,6 +165,7 @@ Required for builds and deployment (see turbo.json and .env.example):
   client-side access
 
 ## Plugins
+
 There are two plugins installed for you to use.
 
 - frontend-design: This plugin can help you to create polished user interfaces. Use it when working on design-related tasks.

CONTRIBUTING.md

@@ -10,8 +10,8 @@ Plunk V2 is built as a modern Turborepo monorepo with the following structure:
 
 - **api**: Express.js API server with background worker process (BullMQ)
 - **web**: Next.js dashboard application (app.useplunk.com)
-- **landing**: Next.js marketing site (next.useplunk.com)
-- **wiki**: Next.js documentation site (next-wiki.useplunk.com)
+- **landing**: Next.js marketing site (www.useplunk.com)
+- **wiki**: Next.js documentation site (docs.useplunk.com)
 
 ### Shared Packages (`packages/`)
 
@@ -135,7 +135,7 @@ between groups.
 
 ## Need Help?
 
-- Check the [documentation](https://next-wiki.useplunk.com)
+- Check the [documentation](https://docs.useplunk.com)
 - Open an issue for bugs or feature requests
 - Join our community discussions
 

Dockerfile

@@ -97,8 +97,8 @@ ARG TARGETPLATFORM
 # Runtime URLs are configured via *_DOMAIN and USE_HTTPS environment variables at container startup
 ARG API_URI=https://next-api.useplunk.com
 ARG DASHBOARD_URI=https://next-app.useplunk.com
-ARG LANDING_URI=https://next.useplunk.com
-ARG WIKI_URI=https://next-wiki.useplunk.com
+ARG LANDING_URI=https://www.useplunk.com
+ARG WIKI_URI=https://docs.useplunk.com
 
 WORKDIR /app
 

README.md

@@ -44,7 +44,7 @@ The easiest way to self-host Plunk is by using the `plunk` Docker image.
 You can pull the latest image from [Github](https://github.com/useplunk/plunk/pkgs/container/plunk).
 
 A complete guide on how to deploy Plunk can be found in
-the [documentation](https://next-wiki.useplunk.com/self-hosting/introduction).
+the [documentation](https://docs.useplunk.com/self-hosting/introduction).
 
 ## Contributing
 

apps/api/.env.example

@@ -16,6 +16,7 @@ JWT_SECRET=hBx9Xh8J6KOMAGAsSjvcZJBT5TWyIkFX
 USE_HTTPS=false
 
 API_URI=http://localhost:8080
+WIKI_URI=http://localhost:1000
 DASHBOARD_URI=http://localhost:3000
 LANDING_URI=http://localhost:4000
 

apps/api/package.json

@@ -36,8 +36,9 @@
     "ioredis": "^5.8.2",
     "jsonwebtoken": "^9.0.2",
     "mailchecker": "^6.0.19",
+    "mailparser": "^3.9.8",
     "morgan": "^1.10.0",
-    "multer": "^2.0.2",
+    "multer": "^2.1.1",
     "signale": "^1.4.0",
     "stripe": "^20.0.0"
   },
@@ -48,6 +49,7 @@
     "@types/express": "^5.0.5",
     "@types/helmet": "^4.0.0",
     "@types/jsonwebtoken": "^9.0.6",
+    "@types/mailparser": "^3.4.6",
     "@types/morgan": "^1.9.9",
     "@types/multer": "^2.0.0",
     "@types/signale": "^1.4.7",

apps/api/src/__tests__/integration/actions.test.ts

@@ -850,6 +850,17 @@ describe('Actions API Integration Tests', () => {
           expect(result.data.subscribed).toBeUndefined();
         }
       });
+
+      it('should create new contacts as unsubscribed when subscribed is undefined', async () => {
+        const newEmail = '[email protected]';
+
+        // Send email to new contact without specifying subscribed
+        const {ContactService} = await import('../../services/ContactService.js');
+        const contact = await ContactService.upsert(projectId, newEmail, {name: 'Test'}, false);
+
+        // Transactional emails should create contacts as unsubscribed by default
+        expect(contact.subscribed).toBe(false);
+      });
     });
 
     describe('/v1/track endpoint', () => {
@@ -905,9 +916,9 @@ describe('Actions API Integration Tests', () => {
 
         // Track event for new contact without specifying subscribed
         const {ContactService} = await import('../../services/ContactService.js');
-        const contact = await ContactService.upsert(projectId, newEmail, {event: 'test'}, undefined);
+        const contact = await ContactService.upsert(projectId, newEmail, {event: 'test'}, true);
 
-        // New contacts should default to subscribed=true
+        // Event tracking should create contacts as subscribed by default
         expect(contact.subscribed).toBe(true);
       });
 

apps/api/src/app/constants.ts

@@ -104,6 +104,12 @@ export const PLUNK_ENABLED = PLUNK_API_KEY !== '' && PLUNK_FROM_ADDRESS !== '';
 // Useful for self-hosters who want to manage project status manually
 export const AUTO_PROJECT_DISABLE = validateEnv('AUTO_PROJECT_DISABLE', 'true') === 'true';
 
+// Self-hosting Configuration (optional)
+// Controls whether new user signups are allowed (default: false)
+export const DISABLE_SIGNUPS = process.env.DISABLE_SIGNUPS === 'true';
+// Controls whether email validation checks are performed on signup (default: false)
+export const VERIFY_EMAIL_ON_SIGNUP = process.env.VERIFY_EMAIL_ON_SIGNUP === 'true';
+
 // Email Verification & Password Reset
 export const TOKEN_EXPIRY_SECONDS = 3600; // 1 hour
 export const EMAIL_VERIFICATION_RATE_LIMIT = 3; // Max 3 emails per hour

apps/api/src/controllers/Actions.ts

@@ -72,6 +72,8 @@ export class Actions {
 
     // Create or update contact with persistent data only
     // ContactService.upsert will filter out non-persistent fields
+    // Event tracking should subscribe new contacts by default (subscribed=true in ContactService)
+    // but preserve existing subscription state for existing contacts
     const contact = await ContactService.upsert(
       auth.projectId,
       email,
@@ -266,7 +268,10 @@ export class Actions {
         : (data as Record<string, unknown> | undefined);
 
       // Create or update contact with metadata
-      const contact = await ContactService.upsert(auth.projectId, recipient.email, recipientData, subscribed);
+      // Transactional emails should not subscribe contacts by default
+      // New contacts default to unsubscribed unless explicitly opted in
+      // Existing contacts preserve their subscription state unless explicitly changed
+      const contact = await ContactService.upsert(auth.projectId, recipient.email, recipientData, subscribed, false);
 
       // Get merged data including non-persistent fields for template rendering
       const mergedData = ContactService.getMergedData(contact, data as Record<string, unknown> | undefined);

apps/api/src/controllers/Auth.ts

@@ -7,6 +7,7 @@ import * as React from 'react';
 
 import {
   DASHBOARD_URI,
+  DISABLE_SIGNUPS,
   EMAIL_VERIFICATION_RATE_LIMIT,
   EMAIL_VERIFICATION_RATE_WINDOW,
   GITHUB_OAUTH_ENABLED,
@@ -15,6 +16,7 @@ import {
   PASSWORD_RESET_RATE_LIMIT,
   PLUNK_ENABLED,
   TOKEN_EXPIRY_SECONDS,
+  VERIFY_EMAIL_ON_SIGNUP,
 } from '../app/constants.js';
 import {prisma} from '../database/prisma.js';
 import {redis, REDIS_ONE_MINUTE} from '../database/redis.js';
@@ -63,33 +65,43 @@ export class Auth {
   @Post('signup')
   @CatchAsync
   public async signup(req: Request, res: Response, _next: NextFunction) {
-    const {email, password} = AuthenticationSchemas.login.parse(req.body);
-
-    // Verify email is valid and not disposable/plus-addressed
-    const verification = await EmailVerificationService.verifyEmail(email);
-
-    if (
-      verification.isDisposable ||
-      verification.isPlusAddressed ||
-      !verification.domainExists ||
-      !verification.hasMxRecords
-    ) {
-      // Build list of reasons for notification
-      const reasons: string[] = [];
-      if (verification.isDisposable) reasons.push('disposable email');
-      if (verification.isPlusAddressed) reasons.push('plus addressing');
-      if (!verification.domainExists) reasons.push('domain does not exist');
-      if (!verification.hasMxRecords) reasons.push('no MX records');
-
-      // Send notification about failed signup attempt
-      await NtfyService.notifyFailedSignupAttempt(email, reasons);
-
+    // Check if signups are disabled
+    if (DISABLE_SIGNUPS) {
       return res.json({
         success: false,
-        data: 'This email address cannot be used for signup',
+        data: 'New user signups are currently disabled',
       });
     }
 
+    const {email, password} = AuthenticationSchemas.login.parse(req.body);
+
+    // Verify email is valid and not disposable/plus-addressed (if verification enabled)
+    if (VERIFY_EMAIL_ON_SIGNUP) {
+      const verification = await EmailVerificationService.verifyEmail(email);
+
+      if (
+        verification.isDisposable ||
+        verification.isPlusAddressed ||
+        !verification.domainExists ||
+        !verification.hasMxRecords
+      ) {
+        // Build list of reasons for notification
+        const reasons: string[] = [];
+        if (verification.isDisposable) reasons.push('disposable email');
+        if (verification.isPlusAddressed) reasons.push('plus addressing');
+        if (!verification.domainExists) reasons.push('domain does not exist');
+        if (!verification.hasMxRecords) reasons.push('no MX records');
+
+        // Send notification about failed signup attempt
+        await NtfyService.notifyFailedSignupAttempt(email, reasons);
+
+        return res.json({
+          success: false,
+          data: 'This email address cannot be used for signup',
+        });
+      }
+    }
+
     const user = await UserService.email(email);
 
     if (user) {

apps/api/src/controllers/Campaigns.ts

@@ -1,5 +1,5 @@
 import {Controller, Delete, Get, Middleware, Post, Put} from '@overnightjs/core';
-import {CampaignAudienceType, CampaignStatus} from '@plunk/db';
+import {CampaignAudienceType, CampaignStatus, TemplateType} from '@plunk/db';
 import {CampaignSchemas, UtilitySchemas} from '@plunk/shared';
 import type {NextFunction, Request, Response} from 'express';
 
@@ -20,7 +20,7 @@ export class Campaigns {
   @CatchAsync
   private async create(req: Request, res: Response, _next: NextFunction) {
     const auth = res.locals.auth;
-    const {name, description, subject, body, from, fromName, replyTo, audienceType, audienceCondition, segmentId} =
+    const {name, description, subject, body, from, fromName, replyTo, type, audienceType, audienceCondition, segmentId} =
       CampaignSchemas.create.parse(req.body);
 
     if (audienceType === CampaignAudienceType.SEGMENT && !segmentId) {
@@ -42,6 +42,7 @@ export class Campaigns {
       from,
       fromName,
       replyTo,
+      type,
       audienceType,
       audienceCondition,
       segmentId,
@@ -109,7 +110,7 @@ export class Campaigns {
   private async update(req: Request, res: Response, _next: NextFunction) {
     const auth = res.locals.auth;
     const {id} = UtilitySchemas.id.parse(req.params);
-    const {name, description, subject, body, from, fromName, replyTo, audienceType, audienceCondition, segmentId} =
+    const {name, description, subject, body, from, fromName, replyTo, type, audienceType, audienceCondition, segmentId} =
       req.body;
 
     // Validate audience-specific fields if audienceType is being updated
@@ -134,6 +135,7 @@ export class Campaigns {
       from,
       fromName,
       replyTo,
+      type: type as TemplateType | undefined,
       audienceType,
       audienceCondition,
       segmentId,

apps/api/src/controllers/Config.ts

@@ -3,6 +3,7 @@ import type {Request, Response} from 'express';
 
 import {
   API_URI,
+  AWS_SES_REGION,
   DASHBOARD_URI,
   GITHUB_OAUTH_ENABLED,
   GOOGLE_OAUTH_ENABLED,
@@ -59,6 +60,9 @@ export class Config {
             : null,
         },
       },
+      aws: {
+        sesRegion: AWS_SES_REGION,
+      },
     });
   }
 }

apps/api/src/controllers/Contacts.ts

@@ -315,6 +315,7 @@ export class Contacts {
   @Middleware([requireAuth, requireEmailVerified])
   @CatchAsync
   public async getImportStatus(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth;
     const jobId = req.params.jobId;
 
     if (!jobId) {
@@ -322,7 +323,7 @@ export class Contacts {
     }
 
     try {
-      const status = await QueueService.getImportJobStatus(jobId);
+      const status = await QueueService.getImportJobStatus(jobId, auth.projectId!);
 
       if (!status) {
         return res.status(404).json({error: 'Import job not found'});
@@ -502,6 +503,7 @@ export class Contacts {
   @Middleware([requireAuth, requireEmailVerified])
   @CatchAsync
   public async getBulkActionStatus(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth;
     const jobId = req.params.jobId;
 
     if (!jobId) {
@@ -509,7 +511,7 @@ export class Contacts {
     }
 
     try {
-      const status = await QueueService.getBulkActionJobStatus(jobId);
+      const status = await QueueService.getBulkActionJobStatus(jobId, auth.projectId!);
 
       if (!status) {
         return res.status(404).json({error: 'Bulk action job not found'});

apps/api/src/controllers/Domains.ts

@@ -3,11 +3,12 @@ import {DomainSchemas, UtilitySchemas} from '@plunk/shared';
 import type {NextFunction, Request, Response} from 'express';
 
 import {redis} from '../database/redis.js';
-import {NotFound} from '../exceptions/index.js';
+import {NotAllowed, NotFound} from '../exceptions/index.js';
 import {isAuthenticated, requireEmailVerified} from '../middleware/auth.js';
 import {DomainService} from '../services/DomainService.js';
 import {Keys} from '../services/keys.js';
 import {MembershipService} from '../services/MembershipService.js';
+import {SecurityService} from '../services/SecurityService.js';
 import {CatchAsync} from '../utils/asyncHandler.js';
 
 @Controller('domains')
@@ -47,6 +48,14 @@ export class Domains {
     // Verify user has admin access to this project
     await MembershipService.requireAdminAccess(auth.userId!, projectId);
 
+    // Block domain changes on disabled projects
+    const isDisabled = await SecurityService.isProjectDisabled(projectId);
+    if (isDisabled) {
+      throw new NotAllowed(
+        'Cannot add domains to a disabled project. Please contact support to resolve security violations before making changes.',
+      );
+    }
+
     // Check if domain is already linked to another project
     const ownershipCheck = await DomainService.checkDomainOwnership(domain, auth.userId);
 
@@ -125,6 +134,14 @@ export class Domains {
     // Verify user has admin access to the project this domain belongs to
     await MembershipService.requireAdminAccess(auth.userId!, domain.projectId);
 
+    // Block domain changes on disabled projects
+    const isDisabled = await SecurityService.isProjectDisabled(domain.projectId);
+    if (isDisabled) {
+      throw new NotAllowed(
+        'Cannot remove domains from a disabled project. Please contact support to resolve security violations before making changes.',
+      );
+    }
+
     await DomainService.removeDomain(id);
 
     await redis.del(Keys.Domain.id(id));

apps/api/src/controllers/Oauth/Github.ts

@@ -4,11 +4,13 @@ import type {NextFunction, Request, Response} from 'express';
 import {
   API_URI,
   DASHBOARD_URI,
+  DISABLE_SIGNUPS,
   GITHUB_OAUTH_CLIENT,
   GITHUB_OAUTH_ENABLED,
   GITHUB_OAUTH_SECRET,
 } from '../../app/constants.js';
 import {prisma} from '../../database/prisma.js';
+import {BadRequest} from '../../exceptions/index.js';
 import {jwt} from '../../middleware/auth.js';
 import {NtfyService} from '../../services/NtfyService.js';
 import {UserService} from '../../services/UserService.js';
@@ -81,6 +83,11 @@ export class Github {
     let isNewUser = false;
 
     if (!user) {
+      // Check if signups are disabled
+      if (DISABLE_SIGNUPS) {
+        throw new BadRequest('New user signups are currently disabled');
+      }
+
       user = await prisma.user.create({
         data: {
           email,

apps/api/src/controllers/Oauth/Google.ts

@@ -4,11 +4,13 @@ import type {NextFunction, Request, Response} from 'express';
 import {
   API_URI,
   DASHBOARD_URI,
+  DISABLE_SIGNUPS,
   GOOGLE_OAUTH_CLIENT,
   GOOGLE_OAUTH_ENABLED,
   GOOGLE_OAUTH_SECRET,
 } from '../../app/constants.js';
 import {prisma} from '../../database/prisma.js';
+import {BadRequest} from '../../exceptions/index.js';
 import {jwt} from '../../middleware/auth.js';
 import {NtfyService} from '../../services/NtfyService.js';
 import {UserService} from '../../services/UserService.js';
@@ -71,6 +73,11 @@ export class Google {
     let isNewUser = false;
 
     if (!user) {
+      // Check if signups are disabled
+      if (DISABLE_SIGNUPS) {
+        throw new BadRequest('New user signups are currently disabled');
+      }
+
       user = await prisma.user.create({
         data: {
           email,

apps/api/src/controllers/Segments.ts

@@ -72,20 +72,23 @@ export class Segments {
   @CatchAsync
   public async create(req: Request, res: Response, _next: NextFunction) {
     const auth = res.locals.auth;
-    const {name, description, condition, trackMembership} = req.body;
+    const {name, description, type, condition, trackMembership} = req.body;
 
     if (!name) {
       return res.status(400).json({error: 'Name is required'});
     }
 
-    if (!condition || typeof condition !== 'object') {
-      return res.status(400).json({error: 'Condition is required and must be an object'});
+    const segmentType = type ?? 'DYNAMIC';
+
+    if (segmentType === 'DYNAMIC' && (!condition || typeof condition !== 'object')) {
+      return res.status(400).json({error: 'Condition is required and must be an object for DYNAMIC segments'});
     }
 
     const segment = await SegmentService.create(auth.projectId!, {
       name,
       description,
-      condition,
+      type: segmentType,
+      condition: segmentType === 'DYNAMIC' ? condition : undefined,
       trackMembership,
     });
 
@@ -142,6 +145,56 @@ export class Segments {
     return res.status(204).send();
   }
 
+  /**
+   * POST /segments/:id/members
+   * Add contacts to a static segment by email
+   */
+  @Post(':id/members')
+  @Middleware([requireAuth, requireEmailVerified])
+  @CatchAsync
+  public async addMembers(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth;
+    const segmentId = req.params.id;
+    const {emails} = req.body;
+
+    if (!segmentId) {
+      return res.status(400).json({error: 'Segment ID is required'});
+    }
+
+    if (!Array.isArray(emails) || emails.length === 0) {
+      return res.status(400).json({error: 'emails must be a non-empty array'});
+    }
+
+    const result = await SegmentService.addContacts(auth.projectId!, segmentId, emails);
+
+    return res.status(200).json(result);
+  }
+
+  /**
+   * DELETE /segments/:id/members
+   * Remove contacts from a static segment by email
+   */
+  @Delete(':id/members')
+  @Middleware([requireAuth, requireEmailVerified])
+  @CatchAsync
+  public async removeMembers(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth;
+    const segmentId = req.params.id;
+    const {emails} = req.body;
+
+    if (!segmentId) {
+      return res.status(400).json({error: 'Segment ID is required'});
+    }
+
+    if (!Array.isArray(emails) || emails.length === 0) {
+      return res.status(400).json({error: 'emails must be a non-empty array'});
+    }
+
+    const result = await SegmentService.removeContacts(auth.projectId!, segmentId, emails);
+
+    return res.status(200).json(result);
+  }
+
   /**
    * POST /segments/:id/compute
    * Recompute segment membership for all contacts

apps/api/src/controllers/Uploads.ts

@@ -6,6 +6,20 @@ import {requireAuth, requireEmailVerified} from '../middleware/auth.js';
 import * as S3Service from '../services/S3Service.js';
 import {CatchAsync} from '../utils/asyncHandler.js';
 
+const MAGIC_BYTES: Record<string, Buffer[]> = {
+  'image/jpeg': [Buffer.from([0xff, 0xd8, 0xff])],
+  'image/jpg': [Buffer.from([0xff, 0xd8, 0xff])],
+  'image/png': [Buffer.from([0x89, 0x50, 0x4e, 0x47])],
+  'image/gif': [Buffer.from('GIF87a'), Buffer.from('GIF89a')],
+  'image/webp': [Buffer.from('RIFF')],
+};
+
+function validateMagicBytes(buffer: Buffer, mimetype: string): boolean {
+  const signatures = MAGIC_BYTES[mimetype];
+  if (!signatures) return false;
+  return signatures.some(sig => buffer.subarray(0, sig.length).equals(sig));
+}
+
 // Configure multer for file uploads (memory storage)
 const upload = multer({
   storage: multer.memoryStorage(),
@@ -13,12 +27,12 @@ const upload = multer({
     fileSize: 10 * 1024 * 1024, // 10MB max file size
   },
   fileFilter: (_req, file, cb) => {
-    const allowedMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+    const allowedMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
 
     if (allowedMimeTypes.includes(file.mimetype)) {
       cb(null, true);
     } else {
-      cb(new Error('Only image files are allowed (JPEG, PNG, GIF, WebP, SVG)'));
+      cb(new Error('Only image files are allowed (JPEG, PNG, GIF, WebP)'));
     }
   },
 });
@@ -48,6 +62,12 @@ export class Uploads {
         });
       }
 
+      if (!validateMagicBytes(req.file.buffer, req.file.mimetype)) {
+        return res.status(400).json({
+          error: 'File contents do not match the declared image type',
+        });
+      }
+
       // Upload file to S3/Minio
       const result = await S3Service.uploadFile({
         file: req.file.buffer,

apps/api/src/controllers/Users.ts

@@ -330,6 +330,7 @@ export class Users {
         billingLimitWorkflows: true,
         billingLimitCampaigns: true,
         billingLimitTransactional: true,
+        billingLimitInbound: true,
       },
     });
 
@@ -349,6 +350,7 @@ export class Users {
         billingLimitWorkflows: data.workflows,
         billingLimitCampaigns: data.campaigns,
         billingLimitTransactional: data.transactional,
+        billingLimitInbound: data.inbound,
       },
     });
 
@@ -360,6 +362,7 @@ export class Users {
         workflows: project.billingLimitWorkflows,
         campaigns: project.billingLimitCampaigns,
         transactional: project.billingLimitTransactional,
+        inbound: project.billingLimitInbound,
       },
       data,
     );

apps/api/src/controllers/Webhooks.ts

@@ -1,14 +1,22 @@
 import {Controller, Post} from '@overnightjs/core';
 import type {Prisma} from '@plunk/db';
-import {EmailStatus} from '@plunk/db';
+import {EmailSourceType, EmailStatus} from '@plunk/db';
 import type {Request, Response} from 'express';
+import {simpleParser} from 'mailparser';
 import signale from 'signale';
 import type Stripe from 'stripe';
 
-import {STRIPE_ENABLED, STRIPE_WEBHOOK_SECRET} from '../app/constants.js';
+import {ProjectDisabledPaymentEmail, sendPlatformEmail} from '@plunk/email';
+import React from 'react';
+
+import {DASHBOARD_URI, LANDING_URI, STRIPE_ENABLED, STRIPE_WEBHOOK_SECRET} from '../app/constants.js';
 import {stripe} from '../app/stripe.js';
 import {prisma} from '../database/prisma.js';
+import {BillingLimitService} from '../services/BillingLimitService.js';
+import {ContactService} from '../services/ContactService.js';
 import {EventService} from '../services/EventService.js';
+import {MembershipService} from '../services/MembershipService.js';
+import {MeterService} from '../services/MeterService.js';
 import {NtfyService} from '../services/NtfyService.js';
 import {SecurityService} from '../services/SecurityService.js';
 import {CatchAsync} from '../utils/asyncHandler.js';
@@ -21,20 +29,52 @@ import {CatchAsync} from '../utils/asyncHandler.js';
 export class Webhooks {
   /**
    * Receive SNS webhook notifications from AWS SES
-   * Handles email events: delivery, open, click, bounce, complaint
+   * Handles outbound email events: delivery, open, click, bounce, complaint
+   * Handles inbound email notifications: received emails via SES receiving
    */
   @Post('sns')
   @CatchAsync
   public async receiveSNSWebhook(req: Request, res: Response) {
     try {
+      // Verify SNS message signature before processing anything
+      const signatureValid = await SecurityService.verifySnsSignature(req.body as Record<string, string>);
+      if (!signatureValid) {
+        signale.warn('[WEBHOOK] SNS signature verification failed — request rejected');
+        return res.status(403).json({success: false, message: 'Invalid SNS signature'});
+      }
+
       // Handle SNS subscription confirmation FIRST (before parsing Message field)
       if (req.body.Type === 'SubscriptionConfirmation') {
         signale.info('SNS Subscription Confirmation received');
-        signale.info('Subscribe URL:', req.body.SubscribeURL);
+
+        // Validate SubscribeURL to prevent SSRF: must be HTTPS and from an official AWS SNS host.
+        // Legitimate URLs look like:
+        //   https://sns.<region>.amazonaws.com/?Action=ConfirmSubscription&...
+        const subscribeURL: unknown = req.body.SubscribeURL;
+        if (typeof subscribeURL !== 'string') {
+          signale.warn('SNS SubscriptionConfirmation missing SubscribeURL');
+          return res.status(400).json({success: false, message: 'Invalid SubscribeURL'});
+        }
+
+        let parsedURL: URL;
+        try {
+          parsedURL = new URL(subscribeURL);
+        } catch {
+          signale.warn('SNS SubscriptionConfirmation has unparseable SubscribeURL');
+          return res.status(400).json({success: false, message: 'Invalid SubscribeURL'});
+        }
+
+        // Only allow HTTPS requests to official AWS SNS endpoints.
+        // The hostname must be exactly sns.<region>.amazonaws.com or sns.<region>.amazonaws.eu
+        const SNS_HOST_RE = /^sns\.[a-z0-9-]+\.amazonaws\.(com|eu)$/;
+        if (parsedURL.protocol !== 'https:' || !SNS_HOST_RE.test(parsedURL.hostname)) {
+          signale.warn(`SNS SubscriptionConfirmation rejected — disallowed SubscribeURL host: ${parsedURL.hostname}`);
+          return res.status(400).json({success: false, message: 'Invalid SubscribeURL'});
+        }
 
         // Automatically confirm the subscription
         try {
-          const confirmResponse = await fetch(req.body.SubscribeURL);
+          const confirmResponse = await fetch(subscribeURL);
           if (confirmResponse.ok) {
             signale.success('SNS subscription confirmed successfully');
             return res.status(200).json({
@@ -46,7 +86,6 @@ export class Webhooks {
             return res.status(200).json({
               success: false,
               message: 'Failed to confirm subscription',
-              subscribeURL: req.body.SubscribeURL,
             });
           }
         } catch (confirmError) {
@@ -54,7 +93,6 @@ export class Webhooks {
           return res.status(200).json({
             success: false,
             message: 'Error confirming subscription',
-            subscribeURL: req.body.SubscribeURL,
           });
         }
       }
@@ -67,6 +105,167 @@ export class Webhooks {
 
       // Parse the nested SES event from the Message field
       const body = JSON.parse(req.body.Message);
+
+      // Check if this is an inbound email notification (SES Receiving)
+      if (body.notificationType === 'Received') {
+        signale.info('[WEBHOOK] Received inbound email notification from SES');
+
+        try {
+          // Extract recipient addresses from the inbound email
+          const recipients = body.receipt?.recipients || [];
+
+          if (recipients.length === 0) {
+            signale.warn('[WEBHOOK] No recipients found in inbound email');
+            return res.status(200).json({success: true, message: 'No recipients found'});
+          }
+
+          // For each recipient, identify the domain and create events
+          for (const recipient of recipients) {
+            const recipientEmail = recipient as string;
+            const domain = recipientEmail.split('@')[1];
+
+            if (!domain) {
+              signale.warn('[WEBHOOK] Invalid recipient email format:', recipientEmail);
+              continue;
+            }
+
+            // Find ALL projects that have this domain verified
+            // A domain can be shared across multiple projects if users are members of both
+            const domainRecords = await prisma.domain.findMany({
+              where: {
+                domain,
+                verified: true, // Only process emails for verified domains
+              },
+              include: {
+                project: true,
+              },
+            });
+
+            if (domainRecords.length === 0) {
+              signale.info(`[WEBHOOK] No verified domain found for: ${domain}`);
+              continue;
+            }
+
+            signale.info(
+              `[WEBHOOK] Found ${domainRecords.length} project(s) with verified domain ${domain}. Processing inbound email for all.`,
+            );
+
+            // Extract sender information (same for all projects)
+            const senderEmail = body.mail?.source;
+            const senderFromHeader = body.mail?.commonHeaders?.from?.[0] || senderEmail;
+
+            // Parse email content if available
+            let htmlBody: string | undefined;
+
+            if (body.content) {
+              try {
+                const parsed = await simpleParser(body.content);
+                // Prefer HTML body, fallback to text if no HTML available
+                htmlBody = parsed.html ? String(parsed.html) : parsed.text || undefined;
+                signale.info('[WEBHOOK] Email content parsed successfully');
+              } catch (parseError) {
+                signale.error('[WEBHOOK] Failed to parse email content:', parseError);
+                // Continue processing without content
+              }
+            }
+
+            // Process inbound email for each project that has this domain verified
+            for (const domainRecord of domainRecords) {
+              signale.info(`[WEBHOOK] Processing inbound email for project: ${domainRecord.project.name}`);
+
+              // Check billing limits before processing inbound email
+              const limitCheck = await BillingLimitService.checkLimit(domainRecord.projectId, EmailSourceType.INBOUND);
+
+              if (!limitCheck.allowed) {
+                signale.warn(
+                  `[WEBHOOK] Inbound email blocked for project ${domainRecord.project.name}: ${limitCheck.message}`,
+                );
+                continue; // Skip this project but continue processing for other projects
+              }
+
+              // Find or create a contact for the sender in this project
+              let contact;
+              if (senderEmail) {
+                contact = await ContactService.upsert(
+                  domainRecord.projectId,
+                  senderEmail,
+                  undefined, // No additional data
+                  true, // Subscribe by default for inbound email senders
+                );
+              }
+
+              // Create an Email record for tracking with parsed content
+              const inboundEmail = await prisma.email.create({
+                data: {
+                  projectId: domainRecord.projectId,
+                  contactId: contact!.id,
+                  subject: body.mail?.commonHeaders?.subject || '(No subject)',
+                  body: htmlBody || '', // Store HTML body in the body field
+                  from: recipientEmail, // The recipient address that received the email
+                  sourceType: EmailSourceType.INBOUND,
+                  status: EmailStatus.RECEIVED, // Inbound emails use RECEIVED status
+                  deliveredAt: new Date(body.mail?.timestamp || new Date()),
+                },
+              });
+
+              // Increment usage counter in cache
+              await BillingLimitService.incrementUsage(domainRecord.projectId, EmailSourceType.INBOUND);
+
+              // Record Stripe metering if project has customer
+              if (domainRecord.project.customer) {
+                await MeterService.recordEmailSent(
+                  domainRecord.project.customer,
+                  1, // Inbound emails count as 1 credit
+                  `email_${inboundEmail.id}`,
+                );
+              }
+
+              // Prepare event data with all inbound email details including body content
+              const eventData = {
+                messageId: body.mail?.messageId,
+                from: senderEmail,
+                fromHeader: senderFromHeader,
+                to: recipientEmail,
+                subject: body.mail?.commonHeaders?.subject,
+                timestamp: body.mail?.timestamp,
+                recipients: body.receipt?.recipients,
+                hasContent: !!body.content,
+                // Email body content
+                body: htmlBody,
+                // Security verdicts
+                spamVerdict: body.receipt?.spamVerdict?.status,
+                virusVerdict: body.receipt?.virusVerdict?.status,
+                spfVerdict: body.receipt?.spfVerdict?.status,
+                dkimVerdict: body.receipt?.dkimVerdict?.status,
+                dmarcVerdict: body.receipt?.dmarcVerdict?.status,
+                // Processing metadata
+                processingTimeMillis: body.receipt?.processingTimeMillis,
+              };
+
+              // Create the email.received event (this will trigger workflows)
+              await EventService.trackEvent(
+                domainRecord.projectId,
+                'email.received',
+                contact?.id,
+                inboundEmail.id, // Link the event to the inbound email record
+                eventData,
+              );
+
+              signale.success(
+                `[WEBHOOK] Created email.received event for ${senderEmail} → ${recipientEmail} (project: ${domainRecord.project.name})`,
+              );
+            }
+          }
+
+          return res.status(200).json({success: true, message: 'Inbound email processed'});
+        } catch (inboundError) {
+          signale.error('[WEBHOOK] Error processing inbound email:', inboundError);
+          // Return 200 to acknowledge receipt even if processing failed
+          return res.status(200).json({success: true, message: 'Error processing inbound email'});
+        }
+      }
+
+      // Handle outbound email event notifications (existing logic)
       const eventType = body.eventType as 'Bounce' | 'Delivery' | 'Open' | 'Complaint' | 'Click';
       const messageId = body.mail?.messageId;
 
@@ -99,6 +298,7 @@ export class Webhooks {
         from: email.from,
         fromName: email.fromName,
         messageId: email.messageId,
+        emailId: email.id,
         templateId: email.templateId,
         campaignId: email.campaignId,
         sourceType: email.sourceType,
@@ -152,29 +352,62 @@ export class Webhooks {
           break;
         }
 
-        case 'Bounce':
-          signale.warn(`[WEBHOOK] Bounce received for ${email.contact.email} from ${email.project.name}`);
-          updateData.status = EmailStatus.BOUNCED;
-          updateData.bouncedAt = now;
-          // Unsubscribe contact on bounce
-          await prisma.contact.update({
-            where: {id: email.contactId},
-            data: {subscribed: false},
-          });
-          eventData = {
-            ...baseEventData,
-            bounceType: body.bounce?.bounceType,
-            bouncedAt: now.toISOString(),
-          };
+        case 'Bounce': {
+          const bounceType = body.bounce?.bounceType;
+          const isPermanentBounce = bounceType === 'Permanent';
+          const isTransientBounce = bounceType === 'Transient';
 
-          // Send notification about bounce
-          await NtfyService.notifyEmailBounce(
-            email.project.name,
-            email.projectId,
-            email.contact.email,
-            body.bounce?.bounceType,
-          );
+          if (isPermanentBounce) {
+            // Hard bounce - counts toward bounce rate and unsubscribes contact
+            signale.warn(`[WEBHOOK] Permanent bounce received for ${email.contact.email} from ${email.project.name}`);
+            updateData.status = EmailStatus.BOUNCED;
+            updateData.bouncedAt = now;
+            // Unsubscribe contact on permanent bounce
+            await prisma.contact.update({
+              where: {id: email.contactId},
+              data: {subscribed: false},
+            });
+            eventData = {
+              ...baseEventData,
+              bounceType,
+              bouncedAt: now.toISOString(),
+            };
+
+            // Send notification about permanent bounce
+            await NtfyService.notifyEmailBounce(email.project.name, email.projectId, email.contact.email, bounceType);
+          } else if (isTransientBounce) {
+            // Soft bounce (e.g., out-of-office, mailbox full) - don't count toward bounce rate
+            signale.info(
+              `[WEBHOOK] Transient bounce received for ${email.contact.email} from ${email.project.name} (not counted toward bounce rate)`,
+            );
+            // Don't update email status or unsubscribe contact
+            // Just track the event for visibility
+            eventData = {
+              ...baseEventData,
+              bounceType,
+              transientBounce: true,
+            };
+          } else {
+            // Unknown bounce type - treat as permanent to be safe
+            signale.warn(
+              `[WEBHOOK] Unknown bounce type (${bounceType}) received for ${email.contact.email} from ${email.project.name} - treating as permanent`,
+            );
+            updateData.status = EmailStatus.BOUNCED;
+            updateData.bouncedAt = now;
+            await prisma.contact.update({
+              where: {id: email.contactId},
+              data: {subscribed: false},
+            });
+            eventData = {
+              ...baseEventData,
+              bounceType,
+              bouncedAt: now.toISOString(),
+            };
+
+            await NtfyService.notifyEmailBounce(email.project.name, email.projectId, email.contact.email, bounceType);
+          }
           break;
+        }
 
         case 'Complaint':
           signale.warn(`[WEBHOOK] Complaint received for ${email.contact.email} from ${email.project.name}`);
@@ -208,8 +441,10 @@ export class Webhooks {
       // Track event (this will trigger workflows)
       await EventService.trackEvent(email.projectId, eventName, email.contactId, email.id, eventData);
 
-      // Check security limits for bounce and complaint events
-      if (eventType === 'Bounce' || eventType === 'Complaint') {
+      // Check security limits only for permanent bounces and complaints
+      // Transient bounces (soft bounces) don't count toward bounce rate
+      const isPermanentBounce = eventType === 'Bounce' && body.bounce?.bounceType === 'Permanent';
+      if (isPermanentBounce || eventType === 'Complaint') {
         await SecurityService.checkAndEnforceSecurityLimits(email.projectId);
       }
 
@@ -314,6 +549,16 @@ export class Webhooks {
           const invoice = event.data.object;
           const customerId = invoice.customer as string;
 
+          // Only disable projects that are already consuming (recurring billing).
+          // If billing_reason is 'subscription_create', this is a first-time payment
+          // attempt and the project has never had an active subscription — don't disable.
+          if (invoice.billing_reason === 'subscription_create') {
+            signale.info(
+              `[WEBHOOK] Payment failed on initial subscription attempt for customer ${customerId}, skipping disable`,
+            );
+            break;
+          }
+
           // Find project by customer ID
           const project = await prisma.project.findUnique({
             where: {customer: customerId},
@@ -324,10 +569,33 @@ export class Webhooks {
             break;
           }
 
-          signale.warn(`[WEBHOOK] Payment failed for project ${project.name} (${project.id})`);
+          signale.warn(`[WEBHOOK] Payment failed for project ${project.name} (${project.id}), disabling project`);
 
-          // Send notification about payment failure
-          await NtfyService.notifyPaymentFailed(project.name, project.id);
+          await prisma.project.update({
+            where: {id: project.id},
+            data: {disabled: true},
+          });
+
+          await NtfyService.notifyProjectDisabledForPayment(project.name, project.id);
+
+          // Send email notification to project members
+          try {
+            const members = await MembershipService.getMembers(project.id);
+            const emails = members.map(m => m.email);
+            if (emails.length > 0) {
+              const template = React.createElement(ProjectDisabledPaymentEmail, {
+                projectName: project.name,
+                projectId: project.id,
+                dashboardUrl: DASHBOARD_URI,
+                landingUrl: LANDING_URI,
+              });
+              await Promise.all(
+                emails.map(email => sendPlatformEmail(email, 'Project Disabled - Payment Failed', template)),
+              );
+            }
+          } catch (emailError) {
+            signale.error(`[WEBHOOK] Failed to send project disabled email:`, emailError);
+          }
           break;
         }
 

apps/api/src/jobs/domain-verification.ts

@@ -122,9 +122,13 @@ export async function checkDomainVerifications() {
 
           // Send email notification about domain verified
           try {
+            // Use SETNX to atomically check and set the flag (prevents race conditions)
             const cacheKey = Keys.Domain.verifiedEmail(dbDomain.id);
-            const alreadySent = await redis.get(cacheKey);
-            if (alreadySent !== '1') {
+            const ttl = 604800; // 7 days
+
+            // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+            const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+            if (wasSet) {
               const members = await MembershipService.getMembers(dbDomain.projectId);
               const emails = members.map(m => m.email);
               if (emails.length > 0) {
@@ -138,7 +142,6 @@ export async function checkDomainVerifications() {
                 await Promise.all(
                   emails.map(email => sendPlatformEmail(email, 'Domain Verified Successfully', template)),
                 );
-                await redis.setex(cacheKey, 604800, '1'); // 7 days
               }
             }
           } catch (error) {
@@ -156,12 +159,17 @@ export async function checkDomainVerifications() {
 
           // Send email notification about domain verification failed
           try {
+            // Use SETNX to atomically check and set the flag (prevents race conditions)
             const now = new Date();
             const year = now.getFullYear();
             const month = String(now.getMonth() + 1).padStart(2, '0');
             const cacheKey = Keys.Domain.unverifiedEmail(dbDomain.id, year, month);
-            const alreadySent = await redis.get(cacheKey);
-            if (alreadySent !== '1') {
+            const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+            const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
+
+            // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+            const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+            if (wasSet) {
               const members = await MembershipService.getMembers(dbDomain.projectId);
               const emails = members.map(m => m.email);
               if (emails.length > 0) {
@@ -175,9 +183,6 @@ export async function checkDomainVerifications() {
                 await Promise.all(
                   emails.map(email => sendPlatformEmail(email, 'Domain Verification Failed', template)),
                 );
-                const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-                const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
-                await redis.setex(cacheKey, ttl, '1');
               }
             }
           } catch (error) {

apps/api/src/jobs/email-processor.ts

@@ -58,6 +58,8 @@ export async function createEmailWorker() {
         include: {
           contact: true,
           project: true,
+          template: {select: {type: true}},
+          campaign: {select: {type: true}},
         },
       });
 
@@ -105,11 +107,15 @@ export async function createEmailWorker() {
         });
 
         // Compile HTML with unsubscribe footer and badge
+        // TRANSACTIONAL and HEADLESS emails don't get the Plunk unsubscribe footer
         const compiledHtml = EmailService.compile({
           content: formattedEmail.body,
           contact: email.contact,
           project: email.project,
-          includeUnsubscribe: email.sourceType !== EmailSourceType.TRANSACTIONAL, // Don't add unsubscribe to transactional emails
+          includeUnsubscribe:
+            email.sourceType !== EmailSourceType.TRANSACTIONAL &&
+            email.template?.type !== 'HEADLESS' &&
+            email.campaign?.type !== 'HEADLESS',
         });
 
         // Use fromName from database if available, otherwise fall back to project name
@@ -117,10 +123,25 @@ export async function createEmailWorker() {
         const fromName = email.fromName || email.project.name;
         const fromEmail = email.from;
 
+        // Parse custom headers from JSON
+        const customHeaders =
+          email.headers && typeof email.headers === 'object' && !Array.isArray(email.headers)
+            ? (email.headers as Record<string, string>)
+            : undefined;
+
+        // Check for custom recipient override in headers
+        const recipientEmail = customHeaders?.['X-Plunk-Recipient-Override'] || email.contact.email;
+
+        // Remove internal headers before sending
+        const publicHeaders = customHeaders ? {...customHeaders} : undefined;
+        if (publicHeaders && 'X-Plunk-Recipient-Override' in publicHeaders) {
+          delete publicHeaders['X-Plunk-Recipient-Override'];
+        }
+
         // Build recipient with name if available
         const recipient: {name?: string; email: string} | string = email.toName
-          ? {name: email.toName, email: email.contact.email}
-          : email.contact.email;
+          ? {name: email.toName, email: recipientEmail}
+          : recipientEmail;
 
         // Determine tracking based on project settings and email type
         const shouldTrack = EmailService.shouldTrackEmail(email.project.tracking, email.sourceType);
@@ -137,6 +158,7 @@ export async function createEmailWorker() {
             html: compiledHtml,
           },
           reply: email.replyTo || undefined,
+          headers: publicHeaders,
           tracking: shouldTrack,
           attachments: email.attachments as {filename: string; content: string; contentType: string}[] | null,
         });
@@ -166,6 +188,7 @@ export async function createEmailWorker() {
           from: email.from,
           fromName: email.fromName,
           messageId: result.messageId,
+          emailId: email.id,
           templateId: email.templateId,
           campaignId: email.campaignId,
           sourceType: email.sourceType,

apps/api/src/jobs/segment-count-processor.ts

@@ -18,8 +18,6 @@ import {SegmentService} from '../services/SegmentService.js';
  * - For segments without trackMembership: only update counts
  */
 async function processProjectSegments(projectId: string, projectName?: string): Promise<void> {
-  const logPrefix = projectName ? `${projectName} (${projectId})` : projectId;
-
   // Get all segments for this project, separating tracked vs non-tracked
   const segments = await prisma.segment.findMany({
     where: {projectId},
@@ -29,45 +27,44 @@ async function processProjectSegments(projectId: string, projectName?: string):
   const trackedSegments = segments.filter(s => s.trackMembership);
   const nonTrackedSegments = segments.filter(s => !s.trackMembership);
 
-  signale.info(
-    `[SEGMENT-COUNT-WORKER] Project ${logPrefix}: ${trackedSegments.length} tracked, ${nonTrackedSegments.length} non-tracked segments`,
-  );
-
   // Process tracked segments with full membership computation (creates events)
+  let updatedSegmentCount = 0;
+  let totalAdded = 0;
+  let totalRemoved = 0;
+
   if (trackedSegments.length > 0) {
     for (const segment of trackedSegments) {
       try {
-        signale.info(
-          `[SEGMENT-COUNT-WORKER] Computing membership for tracked segment "${segment.name}" (${segment.id})`,
-        );
         const result = await SegmentService.computeMembership(projectId, segment.id);
-        signale.success(
-          `[SEGMENT-COUNT-WORKER] Segment "${segment.name}": +${result.added} entries, -${result.removed} exits, ${result.total} total members`,
-        );
 
-        // Notify about segment membership update only if there were actual changes
-        if (projectName && (result.added > 0 || result.removed > 0)) {
-          await NtfyService.notifySegmentMembershipComputed(
-            segment.name,
-            projectName,
-            projectId,
-            result.total,
-            result.added,
-            result.removed,
-          );
+        // Track segments with actual changes for bundled notification
+        if (result.added > 0 || result.removed > 0) {
+          updatedSegmentCount++;
+          totalAdded += result.added;
+          totalRemoved += result.removed;
         }
       } catch (error) {
         signale.error(`[SEGMENT-COUNT-WORKER] Failed to compute membership for segment ${segment.id}:`, error);
         // Continue with other segments
       }
     }
+
+    // Send bundled notification if there were any changes
+    if (projectName && updatedSegmentCount > 0) {
+      await NtfyService.notifySegmentMembershipBundled(
+        projectName,
+        projectId,
+        updatedSegmentCount,
+        totalAdded,
+        totalRemoved,
+      );
+    }
   }
 
   // Process non-tracked segments with count-only update (lightweight)
   if (nonTrackedSegments.length > 0) {
     try {
       await SegmentService.refreshAllMemberCounts(projectId);
-      signale.info(`[SEGMENT-COUNT-WORKER] Updated counts for ${nonTrackedSegments.length} non-tracked segments`);
     } catch (error) {
       signale.error(`[SEGMENT-COUNT-WORKER] Failed to update counts for non-tracked segments:`, error);
     }
@@ -80,14 +77,10 @@ async function processProjectSegments(projectId: string, projectName?: string):
 async function processSegmentCountUpdate(job: Job<SegmentCountJobData>): Promise<void> {
   const {projectId} = job.data;
 
-  signale.info(`[SEGMENT-COUNT-WORKER] Starting segment count update job ${job.id}`);
-
   try {
     if (projectId) {
       // Process specific project
-      signale.info(`[SEGMENT-COUNT-WORKER] Processing segments for project ${projectId}`);
       await processProjectSegments(projectId);
-      signale.success(`[SEGMENT-COUNT-WORKER] Completed segments for project ${projectId}`);
     } else {
       // Process all active projects
       const projects = await prisma.project.findMany({
@@ -95,7 +88,7 @@ async function processSegmentCountUpdate(job: Job<SegmentCountJobData>): Promise
         select: {id: true, name: true},
       });
 
-      signale.info(`[SEGMENT-COUNT-WORKER] Found ${projects.length} active projects`);
+      signale.info(`[SEGMENT-COUNT-WORKER] Processing ${projects.length} active projects`);
 
       // Process projects in batches to avoid overwhelming the database
       const PROJECT_BATCH_SIZE = 10;
@@ -105,9 +98,7 @@ async function processSegmentCountUpdate(job: Job<SegmentCountJobData>): Promise
         await Promise.all(
           batch.map(async project => {
             try {
-              signale.info(`[SEGMENT-COUNT-WORKER] Processing project ${project.name} (${project.id})`);
               await processProjectSegments(project.id, project.name);
-              signale.success(`[SEGMENT-COUNT-WORKER] Completed project ${project.name}`);
             } catch (error) {
               signale.error(`[SEGMENT-COUNT-WORKER] Failed to process project ${project.id}:`, error);
               // Don't throw - continue with other projects
@@ -120,8 +111,6 @@ async function processSegmentCountUpdate(job: Job<SegmentCountJobData>): Promise
           await new Promise(resolve => setTimeout(resolve, 2000));
         }
       }
-
-      signale.success(`[SEGMENT-COUNT-WORKER] Completed all segment updates`);
     }
   } catch (error) {
     signale.error(`[SEGMENT-COUNT-WORKER] Error processing job ${job.id}:`, error);
@@ -148,10 +137,6 @@ export function createSegmentCountWorker(): Worker {
     },
   );
 
-  worker.on('completed', job => {
-    signale.success(`[SEGMENT-COUNT-WORKER] Job ${job.id} completed`);
-  });
-
   worker.on('failed', (job, error) => {
     signale.error(`[SEGMENT-COUNT-WORKER] Job ${job?.id} failed:`, error);
   });

apps/api/src/services/ActivityService.ts

@@ -67,10 +67,14 @@ export class ActivityService {
     const fetchLimit = effectiveLimit;
 
     // Default date range to last 30 days if not specified
+    // IMPORTANT: When cursor is provided (pagination), we should NOT apply the gte constraint
+    // to allow users to paginate back beyond the initial date range
     const now = new Date();
     const defaultStartDate = new Date(now.getTime() - this.DEFAULT_DAYS_BACK * 24 * 60 * 60 * 1000);
     const dateFilter: Prisma.DateTimeFilter = {
-      gte: startDate || defaultStartDate,
+      // Only apply start date filter on initial load (no cursor)
+      // This allows pagination to go back indefinitely
+      ...(cursor ? {} : {gte: startDate || defaultStartDate}),
       ...(endDate ? {lte: endDate} : {}),
     };
 
@@ -364,17 +368,51 @@ export class ActivityService {
     const where: Prisma.EmailWhereInput = {
       projectId,
       ...(contactId ? {contactId} : {}),
+      // Apply cursor-based pagination filter on createdAt
+      // This is critical for pagination to work correctly
+      createdAt: cursorTimestamp
+        ? {
+            ...dateFilter,
+            lt: cursorTimestamp,
+          }
+        : dateFilter,
     };
 
+    // Build OR conditions to filter by the appropriate timestamp field for each activity type
+    // This ensures we fetch emails where the specific activity (bounced, sent, etc.) occurred in the date range
+    const orConditions: Prisma.EmailWhereInput[] = [];
+
+    if (!types || types.includes(ActivityType.EMAIL_SENT)) {
+      orConditions.push({sentAt: {not: null, ...dateFilter}});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_DELIVERED)) {
+      orConditions.push({deliveredAt: {not: null, ...dateFilter}});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_RECEIVED)) {
+      orConditions.push({deliveredAt: {not: null, ...dateFilter}, sourceType: 'INBOUND'});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_OPENED)) {
+      orConditions.push({openedAt: {not: null, ...dateFilter}});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_CLICKED)) {
+      orConditions.push({clickedAt: {not: null, ...dateFilter}});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_BOUNCED)) {
+      orConditions.push({bouncedAt: {not: null, ...dateFilter}});
+    }
+    if (!types || types.includes(ActivityType.EMAIL_COMPLAINT)) {
+      orConditions.push({complainedAt: {not: null, ...dateFilter}});
+    }
+
+    // If no OR conditions, return empty (shouldn't happen but defensive)
+    if (orConditions.length === 0) {
+      return [];
+    }
+
     const emails = await prisma.email.findMany({
       where: {
         ...where,
-        createdAt: cursorTimestamp
-          ? {
-              ...dateFilter,
-              lt: cursorTimestamp,
-            }
-          : dateFilter,
+        OR: orConditions,
       },
       orderBy: {createdAt: 'desc'},
       take: limit,
@@ -401,6 +439,27 @@ export class ActivityService {
       },
     });
 
+    // Helper function to check if timestamp is within date range
+    const isInDateRange = (timestamp: Date | null) => {
+      if (!timestamp) return false;
+
+      // Check against date filter
+      const time = timestamp.getTime();
+      if (dateFilter.gte) {
+        const gteTime = dateFilter.gte instanceof Date ? dateFilter.gte.getTime() : new Date(dateFilter.gte).getTime();
+        if (time < gteTime) return false;
+      }
+      if (dateFilter.lte) {
+        const lteTime = dateFilter.lte instanceof Date ? dateFilter.lte.getTime() : new Date(dateFilter.lte).getTime();
+        if (time > lteTime) return false;
+      }
+
+      // Check against cursor for pagination
+      if (cursorTimestamp && time >= cursorTimestamp.getTime()) return false;
+
+      return true;
+    };
+
     // Convert each email into multiple activities based on its state
     for (const email of emails) {
       const baseMetadata = {
@@ -415,7 +474,7 @@ export class ActivityService {
         workflowName: email.workflowExecution?.workflow?.name,
       };
 
-      if (email.sentAt && (!types || types.includes(ActivityType.EMAIL_SENT))) {
+      if (email.sentAt && (!types || types.includes(ActivityType.EMAIL_SENT)) && isInDateRange(email.sentAt)) {
         activities.push({
           id: `${email.id}_sent`,
           type: ActivityType.EMAIL_SENT,
@@ -426,7 +485,11 @@ export class ActivityService {
         });
       }
 
-      if (email.deliveredAt && (!types || types.includes(ActivityType.EMAIL_DELIVERED))) {
+      if (
+        email.deliveredAt &&
+        (!types || types.includes(ActivityType.EMAIL_DELIVERED)) &&
+        isInDateRange(email.deliveredAt)
+      ) {
         activities.push({
           id: `${email.id}_delivered`,
           type: ActivityType.EMAIL_DELIVERED,
@@ -437,7 +500,23 @@ export class ActivityService {
         });
       }
 
-      if (email.openedAt && (!types || types.includes(ActivityType.EMAIL_OPENED))) {
+      if (
+        email.deliveredAt &&
+        email.sourceType === 'INBOUND' &&
+        (!types || types.includes(ActivityType.EMAIL_RECEIVED)) &&
+        isInDateRange(email.deliveredAt)
+      ) {
+        activities.push({
+          id: `${email.id}_received`,
+          type: ActivityType.EMAIL_RECEIVED,
+          timestamp: email.deliveredAt,
+          contactEmail: email.contact.email,
+          contactId: email.contactId,
+          metadata: baseMetadata,
+        });
+      }
+
+      if (email.openedAt && (!types || types.includes(ActivityType.EMAIL_OPENED)) && isInDateRange(email.openedAt)) {
         activities.push({
           id: `${email.id}_opened`,
           type: ActivityType.EMAIL_OPENED,
@@ -452,7 +531,7 @@ export class ActivityService {
       }
 
       // Email clicked
-      if (email.clickedAt && (!types || types.includes(ActivityType.EMAIL_CLICKED))) {
+      if (email.clickedAt && (!types || types.includes(ActivityType.EMAIL_CLICKED)) && isInDateRange(email.clickedAt)) {
         activities.push({
           id: `${email.id}_clicked`,
           type: ActivityType.EMAIL_CLICKED,
@@ -467,7 +546,7 @@ export class ActivityService {
       }
 
       // Email bounced
-      if (email.bouncedAt && (!types || types.includes(ActivityType.EMAIL_BOUNCED))) {
+      if (email.bouncedAt && (!types || types.includes(ActivityType.EMAIL_BOUNCED)) && isInDateRange(email.bouncedAt)) {
         activities.push({
           id: `${email.id}_bounced`,
           type: ActivityType.EMAIL_BOUNCED,
@@ -480,6 +559,25 @@ export class ActivityService {
           },
         });
       }
+
+      // Email complaint
+      if (
+        email.complainedAt &&
+        (!types || types.includes(ActivityType.EMAIL_COMPLAINT)) &&
+        isInDateRange(email.complainedAt)
+      ) {
+        activities.push({
+          id: `${email.id}_complaint`,
+          type: ActivityType.EMAIL_COMPLAINT,
+          timestamp: email.complainedAt,
+          contactEmail: email.contact.email,
+          contactId: email.contactId,
+          metadata: {
+            ...baseMetadata,
+            error: email.error,
+          },
+        });
+      }
     }
 
     return activities;

apps/api/src/services/BillingLimitService.ts

@@ -157,6 +157,7 @@ export class BillingLimitService {
           billingLimitWorkflows: true,
           billingLimitCampaigns: true,
           billingLimitTransactional: true,
+          billingLimitInbound: true,
         },
       });
 
@@ -183,6 +184,9 @@ export class BillingLimitService {
         case EmailSourceType.TRANSACTIONAL:
           limit = project.billingLimitTransactional;
           break;
+        case EmailSourceType.INBOUND:
+          limit = project.billingLimitInbound;
+          break;
         default:
           limit = null;
       }
@@ -191,7 +195,8 @@ export class BillingLimitService {
       const hasCustomLimits =
         project.billingLimitWorkflows !== null ||
         project.billingLimitCampaigns !== null ||
-        project.billingLimitTransactional !== null;
+        project.billingLimitTransactional !== null ||
+        project.billingLimitInbound !== null;
 
       // Free tier projects (no subscription and no custom limits): enforce total 1000 email/month limit
       // Only enforce free tier limits if billing is enabled
@@ -368,6 +373,7 @@ export class BillingLimitService {
           billingLimitWorkflows: true,
           billingLimitCampaigns: true,
           billingLimitTransactional: true,
+          billingLimitInbound: true,
         },
       });
 
@@ -390,10 +396,11 @@ export class BillingLimitService {
       }
 
       // Get usage for all categories in parallel
-      const [workflowUsage, campaignUsage, transactionalUsage] = await Promise.all([
+      const [workflowUsage, campaignUsage, transactionalUsage, inboundUsage] = await Promise.all([
         this.getUsage(projectId, EmailSourceType.WORKFLOW),
         this.getUsage(projectId, EmailSourceType.CAMPAIGN),
         this.getUsage(projectId, EmailSourceType.TRANSACTIONAL),
+        this.getUsage(projectId, EmailSourceType.INBOUND),
       ]);
 
       // Helper to calculate category usage
@@ -412,18 +419,19 @@ export class BillingLimitService {
       const hasCustomLimits =
         project.billingLimitWorkflows !== null ||
         project.billingLimitCampaigns !== null ||
-        project.billingLimitTransactional !== null;
+        project.billingLimitTransactional !== null ||
+        project.billingLimitInbound !== null;
 
       // Free tier projects (no subscription and no custom limits): show total usage with shared limit
       // Only show free tier limits if billing is enabled
       if (STRIPE_ENABLED && !project.subscription && !hasCustomLimits) {
-        const totalUsage = workflowUsage + campaignUsage + transactionalUsage;
+        const totalUsage = workflowUsage + campaignUsage + transactionalUsage + inboundUsage;
         const limit = this.FREE_TIER_TOTAL_LIMIT;
         const percentage = (totalUsage / limit) * 100;
         const isWarning = percentage >= this.WARNING_THRESHOLD * 100;
         const isBlocked = totalUsage >= limit;
 
-        // For free tier, show the same limit and total usage for all three categories
+        // For free tier, show the same limit and total usage for all four categories
         // This makes it clear in the UI that it's a shared limit
         const sharedUsageInfo: CategoryUsage = {
           limit,
@@ -437,6 +445,7 @@ export class BillingLimitService {
           workflows: sharedUsageInfo,
           campaigns: sharedUsageInfo,
           transactional: sharedUsageInfo,
+          inbound: sharedUsageInfo,
           currency,
         };
       }
@@ -446,6 +455,7 @@ export class BillingLimitService {
         workflows: calculateCategoryUsage(workflowUsage, project.billingLimitWorkflows),
         campaigns: calculateCategoryUsage(campaignUsage, project.billingLimitCampaigns),
         transactional: calculateCategoryUsage(transactionalUsage, project.billingLimitTransactional),
+        inbound: calculateCategoryUsage(inboundUsage, project.billingLimitInbound),
         currency,
       };
     } catch (error) {
@@ -470,6 +480,7 @@ export class BillingLimitService {
         this.getCacheKey(projectId, EmailSourceType.WORKFLOW),
         this.getCacheKey(projectId, EmailSourceType.CAMPAIGN),
         this.getCacheKey(projectId, EmailSourceType.TRANSACTIONAL),
+        this.getCacheKey(projectId, EmailSourceType.INBOUND),
       ];
 
       await Promise.all(keys.map(key => redis.del(key)));
@@ -493,11 +504,13 @@ export class BillingLimitService {
       workflows: number | null;
       campaigns: number | null;
       transactional: number | null;
+      inbound: number | null;
     },
     newLimits: {
       workflows: number | null;
       campaigns: number | null;
       transactional: number | null;
+      inbound: number | null;
     },
   ): Promise<void> {
     try {
@@ -531,6 +544,14 @@ export class BillingLimitService {
         );
       }
 
+      // Check inbound limit
+      if (oldLimits.inbound !== newLimits.inbound) {
+        keysToDelete.push(
+          Keys.Billing.warningEmail(projectId, EmailSourceType.INBOUND, year, month),
+          Keys.Billing.limitEmail(projectId, EmailSourceType.INBOUND, year, month),
+        );
+      }
+
       if (keysToDelete.length > 0) {
         await Promise.all(keysToDelete.map(key => redis.del(key)));
         signale.debug(
@@ -580,8 +601,15 @@ export class BillingLimitService {
       const month = String(now.getMonth() + 1).padStart(2, '0');
       const cacheKey = Keys.Billing.warningEmail(projectId, sourceType, year, month);
 
-      const alreadySent = await redis.get(cacheKey);
-      if (alreadySent === '1') {
+      // Use SETNX (SET if Not eXists) to atomically check and set the flag
+      // This prevents race conditions where multiple concurrent requests could all pass the check
+      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+      const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
+
+      // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+      const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+      if (!wasSet) {
+        // Email was already sent this month
         return;
       }
 
@@ -603,11 +631,6 @@ export class BillingLimitService {
       });
 
       await Promise.all(emails.map(email => sendPlatformEmail(email, 'Billing Limit Warning', template)));
-
-      // Mark that we've sent the warning email (expires at end of month)
-      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-      const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
-      await redis.setex(cacheKey, ttl, '1');
     } catch (error) {
       signale.error(`[BILLING_LIMIT] Failed to send warning email:`, error);
     }
@@ -630,8 +653,15 @@ export class BillingLimitService {
       const month = String(now.getMonth() + 1).padStart(2, '0');
       const cacheKey = Keys.Billing.limitEmail(projectId, sourceType, year, month);
 
-      const alreadySent = await redis.get(cacheKey);
-      if (alreadySent === '1') {
+      // Use SETNX (SET if Not eXists) to atomically check and set the flag
+      // This prevents race conditions where multiple concurrent requests could all pass the check
+      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+      const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
+
+      // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+      const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+      if (!wasSet) {
+        // Email was already sent this month
         return;
       }
 
@@ -652,11 +682,6 @@ export class BillingLimitService {
       });
 
       await Promise.all(emails.map(email => sendPlatformEmail(email, 'Billing Limit Exceeded', template)));
-
-      // Mark that we've sent the limit email (expires at end of month)
-      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-      const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
-      await redis.setex(cacheKey, ttl, '1');
     } catch (error) {
       signale.error(`[BILLING_LIMIT] Failed to send limit exceeded email:`, error);
     }

apps/api/src/services/CampaignService.ts

@@ -1,5 +1,5 @@
 import type {Campaign, Contact, Prisma} from '@plunk/db';
-import {CampaignAudienceType, CampaignStatus, EmailSourceType} from '@plunk/db';
+import {CampaignAudienceType, CampaignStatus, EmailSourceType, TemplateType} from '@plunk/db';
 import type {CreateCampaignData, FilterCondition, PaginatedResponse, UpdateCampaignData} from '@plunk/types';
 import {fromPrismaJson, toPrismaJson} from '@plunk/types';
 import signale from 'signale';
@@ -59,6 +59,7 @@ export class CampaignService {
         from: data.from,
         fromName: data.fromName,
         replyTo: data.replyTo,
+        type: data.type ?? TemplateType.MARKETING,
         audienceType: data.audienceType,
         audienceCondition: toPrismaJson(data.audienceCondition || null),
         segmentId: data.segmentId,
@@ -100,6 +101,10 @@ export class CampaignService {
     const updateData: Prisma.CampaignUpdateInput = buildEmailFieldsUpdate(data) as Prisma.CampaignUpdateInput;
 
     // Handle campaign-specific fields
+    if (data.type !== undefined) {
+      updateData.type = data.type;
+    }
+
     if (data.audienceType !== undefined) {
       updateData.audienceType = data.audienceType;
     }
@@ -262,6 +267,7 @@ export class CampaignService {
         from: campaign.from,
         fromName: campaign.fromName,
         replyTo: campaign.replyTo,
+        type: campaign.type,
         audienceType: campaign.audienceType,
         audienceCondition: campaign.audienceCondition as Prisma.InputJsonValue,
         segmentId: campaign.segmentId,
@@ -482,6 +488,7 @@ export class CampaignService {
           from: campaign.from,
           fromName: campaign.fromName || undefined,
           replyTo: campaign.replyTo || undefined,
+          isTransactional: campaign.type === TemplateType.TRANSACTIONAL,
         });
       } catch (error) {
         signale.error(`[CAMPAIGN] Failed to queue email for contact ${contact.id}:`, error);
@@ -708,7 +715,8 @@ export class CampaignService {
   ): Promise<Prisma.ContactWhereInput> {
     const baseWhere: Prisma.ContactWhereInput = {
       projectId,
-      subscribed: true, // Only send to subscribed contacts
+      // Transactional campaigns send to all contacts regardless of subscription status
+      ...(campaign.type !== TemplateType.TRANSACTIONAL && {subscribed: true}),
     };
 
     switch (campaign.audienceType) {
@@ -760,6 +768,18 @@ export class CampaignService {
       throw new HttpException(404, 'Segment not found');
     }
 
+    if (segment.type === 'STATIC') {
+      return {
+        ...baseWhere,
+        segmentMemberships: {
+          some: {
+            segmentId,
+            exitedAt: null,
+          },
+        },
+      };
+    }
+
     const condition = fromPrismaJson<FilterCondition>(segment.condition);
     const segmentWhere = SegmentService.buildConditionClause(condition);
 

apps/api/src/services/ContactService.ts

@@ -1,5 +1,4 @@
 import {type Contact, Prisma} from '@plunk/db';
-import {isValidLanguageCode} from '@plunk/shared';
 import type {CursorPaginatedResponse, FilterCondition, FilterGroup} from '@plunk/types';
 import {toPrismaJson} from '@plunk/types';
 
@@ -199,6 +198,7 @@ export class ContactService {
     email: string,
     data?: Record<string, unknown>,
     subscribed?: boolean,
+    defaultSubscribed: boolean = true,
   ): Promise<Contact> {
     // Find existing contact
     const existing = await prisma.contact.findFirst({
@@ -235,12 +235,9 @@ export class ContactService {
         }
 
         // Validate locale field (special user-settable field)
+        // Only validate type - any locale string is accepted since we default to English if unsupported
         if (key === 'locale') {
-          if (typeof value === 'string') {
-            if (!isValidLanguageCode(value)) {
-              throw new HttpException(400, `Invalid locale code: ${value}. Must be one of: en, nl, fr, hi, de`);
-            }
-          } else if (value !== null && value !== undefined) {
+          if (value !== null && value !== undefined && typeof value !== 'string') {
             throw new HttpException(400, 'Locale must be a string');
           }
         }
@@ -292,7 +289,7 @@ export class ContactService {
           projectId,
           email,
           data: Object.keys(mergedData).length > 0 ? toPrismaJson(mergedData) : Prisma.JsonNull,
-          subscribed: subscribed ?? true,
+          subscribed: subscribed ?? defaultSubscribed,
         },
       });
     }

apps/api/src/services/DomainService.ts

@@ -8,7 +8,12 @@ import {HttpException} from '../exceptions/index.js';
 import {Keys} from './keys.js';
 import {MembershipService} from './MembershipService.js';
 import {NtfyService} from './NtfyService.js';
-import {getDomainVerificationAttributes, verifyDomain} from './SESService.js';
+import {
+  deleteIdentity,
+  disableFeedbackForwarding,
+  getDomainVerificationAttributes,
+  verifyDomain,
+} from './SESService.js';
 
 export class DomainService {
   /**
@@ -72,6 +77,43 @@ export class DomainService {
 
     const attributes = await getDomainVerificationAttributes(domain.domain);
 
+    // If domain failed verification, retry
+    if (attributes.status === 'Failed') {
+      signale.warn(`[DOMAIN-SERVICE] Restarting verification for ${domain.domain}`);
+
+      let attempt = 0;
+      const maxAttempts = 5;
+      let success = false;
+      let delay = 5000;
+
+      while (attempt < maxAttempts && !success) {
+        try {
+          await verifyDomain(domain.domain);
+          success = true;
+          signale.success(`[DOMAIN-SERVICE] Restarted verification for ${domain.domain}`);
+        } catch (e: unknown) {
+          const error = e as {Code?: string; name?: string; message?: string};
+          if (error?.Code === 'Throttling' || error?.name === 'Throttling' || error?.message?.includes('Throttling')) {
+            signale.warn(
+              `[DOMAIN-SERVICE] Throttling detected, waiting ${delay / 1000} seconds (attempt ${attempt + 1})`,
+            );
+            await new Promise(r => setTimeout(r, delay));
+            delay *= 2; // Exponential backoff
+            attempt++;
+          } else {
+            signale.error(`[DOMAIN-SERVICE] Error restarting verification: ${error?.message || 'Unknown error'}`);
+            throw e;
+          }
+        }
+      }
+
+      if (!success) {
+        signale.error(
+          `[DOMAIN-SERVICE] Failed to verify ${domain.domain} after ${maxAttempts} attempts due to throttling`,
+        );
+      }
+    }
+
     // Update domain if verification status changed
     if (attributes.status === 'Success' && !domain.verified) {
       const updatedDomain = await prisma.domain.update({
@@ -84,15 +126,26 @@ export class DomainService {
         },
       });
 
+      // Disable feedback forwarding for verified domain
+      try {
+        await disableFeedbackForwarding(domain.domain);
+        signale.info(`[DOMAIN-SERVICE] Disabled feedback forwarding for ${domain.domain}`);
+      } catch (error) {
+        signale.error(`[DOMAIN-SERVICE] Error disabling feedback forwarding for ${domain.domain}:`, error);
+      }
+
       // Send notification about domain verified
       await NtfyService.notifyDomainVerified(domain.domain, updatedDomain.project.name, updatedDomain.project.id);
 
       // Send email notification about domain verified
       try {
-        // Check deduplication cache
+        // Use SETNX to atomically check and set the flag (prevents race conditions)
         const cacheKey = Keys.Domain.verifiedEmail(domainId);
-        const alreadySent = await redis.get(cacheKey);
-        if (alreadySent !== '1') {
+        const ttl = 604800; // 7 days
+
+        // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+        const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+        if (wasSet) {
           const members = await MembershipService.getMembers(updatedDomain.project.id);
           const emails = members.map(m => m.email);
           if (emails.length > 0) {
@@ -104,8 +157,6 @@ export class DomainService {
               landingUrl: LANDING_URI,
             });
             await Promise.all(emails.map(email => sendPlatformEmail(email, 'Domain Verified Successfully', template)));
-            // Set cache to prevent duplicate emails (7 days)
-            await redis.setex(cacheKey, 604800, '1');
           }
         }
       } catch (emailError) {
@@ -131,13 +182,17 @@ export class DomainService {
 
       // Send email notification about domain verification failed
       try {
-        // Check deduplication cache (monthly)
+        // Use SETNX to atomically check and set the flag (prevents race conditions)
         const now = new Date();
         const year = now.getFullYear();
         const month = String(now.getMonth() + 1).padStart(2, '0');
         const cacheKey = Keys.Domain.unverifiedEmail(domainId, year, month);
-        const alreadySent = await redis.get(cacheKey);
-        if (alreadySent !== '1') {
+        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+        const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
+
+        // SETNX returns 1 if key was set (didn't exist), 0 if key already existed
+        const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+        if (wasSet) {
           const members = await MembershipService.getMembers(updatedDomain.project.id);
           const emails = members.map(m => m.email);
           if (emails.length > 0) {
@@ -149,10 +204,6 @@ export class DomainService {
               landingUrl: LANDING_URI,
             });
             await Promise.all(emails.map(email => sendPlatformEmail(email, 'Domain Verification Failed', template)));
-            // Set cache to prevent duplicate emails (until end of month)
-            const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-            const ttl = Math.floor((endOfMonth.getTime() - now.getTime()) / 1000);
-            await redis.setex(cacheKey, ttl, '1');
           }
         }
       } catch (emailError) {
@@ -248,6 +299,28 @@ export class DomainService {
 
     await prisma.domain.delete({where: {id: domainId}});
 
+    // Check if this domain is still attached to another project
+    const domainExistsElsewhere = await prisma.domain.findFirst({
+      where: {
+        domain: domainName,
+      },
+    });
+
+    // If domain is not used by any other project, remove it from AWS SES
+    if (!domainExistsElsewhere) {
+      try {
+        await deleteIdentity(domainName);
+        signale.info(`[DOMAIN] Removed AWS SES identity for ${domainName} (no longer used by any project)`);
+      } catch (error) {
+        // Log error but don't fail the domain removal if AWS cleanup fails
+        signale.error(`[DOMAIN] Failed to remove AWS SES identity for ${domainName}:`, error);
+      }
+    } else {
+      signale.info(
+        `[DOMAIN] Keeping AWS SES identity for ${domainName} (still used by project ${domainExistsElsewhere.projectId})`,
+      );
+    }
+
     // Send notification about domain removal
     await NtfyService.notifyDomainRemoved(domainName, domain.project.name, domain.project.id);
 

apps/api/src/services/EmailService.ts

@@ -18,6 +18,8 @@ interface Attachment {
   filename: string;
   content: string; // Base64 encoded
   contentType: string;
+  contentId?: string;
+  disposition?: 'attachment' | 'inline';
 }
 
 interface SendEmailParams {
@@ -35,6 +37,8 @@ interface SendEmailParams {
   campaignId?: string;
   workflowExecutionId?: string;
   workflowStepExecutionId?: string;
+  recipientEmail?: string; // Optional custom recipient email (overrides contact.email)
+  isTransactional?: boolean; // Override source type to TRANSACTIONAL (e.g. for transactional campaigns)
 }
 
 /**
@@ -113,10 +117,12 @@ export class EmailService {
    * Send a campaign email
    */
   public static async sendCampaignEmail(params: SendEmailParams): Promise<Email> {
-    // Check if template is transactional to determine source type
+    // Check if campaign or template is transactional to determine source type
     let sourceType: EmailSourceType = EmailSourceType.CAMPAIGN;
 
-    if (params.templateId) {
+    if (params.isTransactional) {
+      sourceType = EmailSourceType.TRANSACTIONAL;
+    } else if (params.templateId) {
       const template = await prisma.template.findUnique({
         where: {id: params.templateId},
         select: {type: true},
@@ -193,7 +199,8 @@ export class EmailService {
 
     // Check subscription status for marketing emails
     // Transactional emails should always be sent regardless of subscription status
-    if (sourceType !== EmailSourceType.TRANSACTIONAL) {
+    // Custom recipient emails also bypass subscription checks (they're not in the contact list)
+    if (sourceType !== EmailSourceType.TRANSACTIONAL && !params.recipientEmail) {
       const contact = await prisma.contact.findUnique({
         where: {id: params.contactId},
         select: {subscribed: true},
@@ -242,6 +249,12 @@ export class EmailService {
       signale.warn(`[BILLING_LIMIT] ${limitCheck.message}`);
     }
 
+    // If custom recipient email is provided, store it in headers for later use
+    const emailHeaders = params.headers ? {...params.headers} : {};
+    if (params.recipientEmail) {
+      emailHeaders['X-Plunk-Recipient-Override'] = params.recipientEmail;
+    }
+
     const email = await prisma.email.create({
       data: {
         projectId: params.projectId,
@@ -251,7 +264,7 @@ export class EmailService {
         from: params.from,
         fromName: params.fromName,
         replyTo: params.replyTo,
-        headers: params.headers ? toPrismaJson(params.headers) : undefined,
+        headers: Object.keys(emailHeaders).length > 0 ? toPrismaJson(emailHeaders) : undefined,
         attachments: params.attachments ? toPrismaJson(params.attachments) : undefined,
         sourceType,
         templateId: params.templateId,
@@ -280,9 +293,8 @@ export class EmailService {
       include: {
         contact: true,
         project: true,
-        template: {
-          select: {type: true},
-        },
+        template: {select: {type: true}},
+        campaign: {select: {type: true}},
       },
     });
 
@@ -344,11 +356,15 @@ export class EmailService {
       });
 
       // Compile HTML with unsubscribe footer and badge
+      // TRANSACTIONAL and HEADLESS emails don't get the Plunk unsubscribe footer
       const compiledHtml = this.compile({
         content: formattedEmail.body,
         contact: email.contact,
         project: email.project,
-        includeUnsubscribe: email.sourceType !== EmailSourceType.TRANSACTIONAL, // Don't add unsubscribe to transactional emails
+        includeUnsubscribe:
+          email.sourceType !== EmailSourceType.TRANSACTIONAL &&
+          email.template?.type !== 'HEADLESS' &&
+          email.campaign?.type !== 'HEADLESS',
       });
 
       // Use explicit fromName if provided, otherwise fall back to project name
@@ -361,10 +377,25 @@ export class EmailService {
           ? (email.headers as Record<string, string>)
           : undefined;
 
+      // Check for custom recipient override in headers
+      const recipientEmail = customHeaders?.['X-Plunk-Recipient-Override'] || email.contact.email;
+
+      // Remove internal headers before sending
+      const publicHeaders = customHeaders ? {...customHeaders} : undefined;
+      if (publicHeaders && 'X-Plunk-Recipient-Override' in publicHeaders) {
+        delete publicHeaders['X-Plunk-Recipient-Override'];
+      }
+
       // Parse attachments from JSON
       const attachments =
         email.attachments && Array.isArray(email.attachments)
-          ? (email.attachments as Array<{filename: string; content: string; contentType: string}>)
+          ? (email.attachments as Array<{
+              filename: string;
+              content: string;
+              contentType: string;
+              contentId?: string;
+              disposition?: 'attachment' | 'inline';
+            }>)
           : undefined;
 
       // Determine tracking based on project settings and email type
@@ -376,13 +407,13 @@ export class EmailService {
           name: fromName,
           email: fromEmail,
         },
-        to: [email.contact.email],
+        to: [recipientEmail],
         content: {
           subject: formattedEmail.subject,
           html: compiledHtml,
         },
         reply: email.replyTo || undefined,
-        headers: customHeaders,
+        headers: publicHeaders,
         attachments: attachments,
         tracking: shouldTrack,
       });
@@ -568,10 +599,11 @@ export class EmailService {
         : {}),
     };
 
-    const [total, sent, delivered, opened, clicked, bounced, failed] = await Promise.all([
+    const [total, sent, delivered, received, opened, clicked, bounced, failed] = await Promise.all([
       prisma.email.count({where}),
       prisma.email.count({where: {...where, status: EmailStatus.SENT}}),
       prisma.email.count({where: {...where, status: EmailStatus.DELIVERED}}),
+      prisma.email.count({where: {...where, status: EmailStatus.RECEIVED}}),
       prisma.email.count({where: {...where, status: EmailStatus.OPENED}}),
       prisma.email.count({where: {...where, status: EmailStatus.CLICKED}}),
       prisma.email.count({where: {...where, status: EmailStatus.BOUNCED}}),
@@ -582,6 +614,7 @@ export class EmailService {
       total,
       sent,
       delivered,
+      received,
       opened,
       clicked,
       bounced,
@@ -623,6 +656,378 @@ export class EmailService {
     }
   }
 
+  /**
+   * Detects if HTML contains custom patterns that indicate it was written in the HTML editor
+   * rather than the visual editor. Mirrors the same logic in apps/web/src/lib/emailStyles.ts.
+   */
+  private static detectCustomHtmlPatterns(html: string): boolean {
+    if (!html || html.trim() === '') return false;
+
+    const hasInlineStyles = /<[^>]+style\s*=\s*["'][^"']*["']/i.test(html);
+
+    const classMatches = html.matchAll(/class\s*=\s*["']([^"']*)["']/gi);
+    let hasCustomClasses = false;
+    for (const match of classMatches) {
+      const classValue = match[1];
+      if (!classValue) continue;
+      const classes = classValue.split(/\s+/).filter((c: string) => c.length > 0);
+      const allowedPrefixes = ['prose', 'variable-', 'email-image', 'ProseMirror', 'resizable-image', 'selected', 'resize-handle'];
+      const hasDisallowedClass = classes.some((cls: string) => !allowedPrefixes.some((prefix: string) => cls.startsWith(prefix)));
+      if (hasDisallowedClass) {
+        hasCustomClasses = true;
+        break;
+      }
+    }
+
+    const hasCustomAttributes = /<[^>]+(?:data-|aria-|role=|id=)/i.test(html);
+    const hasComplexTables = /<table[^>]*>[\s\S]*?<table/i.test(html);
+    const hasCustomElements = /<(?:div|span|section|article|header|footer|nav|aside)[^>]*>/i.test(html);
+    const hasMediaQueries = /@media/i.test(html);
+    const hasStyleTags = /<style[^>]*>/i.test(html);
+
+    return (
+      hasInlineStyles ||
+      hasCustomClasses ||
+      hasCustomAttributes ||
+      hasComplexTables ||
+      hasCustomElements ||
+      hasMediaQueries ||
+      hasStyleTags
+    );
+  }
+
+  /**
+   * Wraps visual editor content with a full HTML document and prose styles.
+   * Mirrors wrapEmailWithStyles() in apps/web/src/lib/emailStyles.ts so sent emails
+   * match the preview modal exactly.
+   */
+  private static wrapWithEmailStyles(htmlBody: string): string {
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    /* Base reset */
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      padding: 16px;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      line-height: 1.5;
+      color: #111827;
+    }
+
+    /* Tailwind Typography (prose) base styles */
+    .prose {
+      color: #374151;
+      max-width: 600px;
+    }
+    .prose [class~="lead"] {
+      color: #4b5563;
+      font-size: 1.25em;
+      line-height: 1.6;
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+    .prose a {
+      color: #3b82f6;
+      text-decoration: underline;
+      font-weight: 500;
+    }
+    .prose strong {
+      color: #111827;
+      font-weight: 600;
+    }
+    .prose ol, .prose ul {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+      padding-left: 1.625em;
+    }
+    .prose li {
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+    .prose ol > li {
+      padding-left: 0.375em;
+    }
+    .prose ul > li {
+      padding-left: 0.375em;
+    }
+    .prose > ul > li p {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+    .prose > ul > li > *:first-child {
+      margin-top: 1.25em;
+    }
+    .prose > ul > li > *:last-child {
+      margin-bottom: 1.25em;
+    }
+    .prose > ol > li > *:first-child {
+      margin-top: 1.25em;
+    }
+    .prose > ol > li > *:last-child {
+      margin-bottom: 1.25em;
+    }
+    .prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+    .prose hr {
+      border: none;
+      border-top: 1px solid #e5e7eb;
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+    .prose blockquote {
+      font-weight: 500;
+      font-style: italic;
+      color: #111827;
+      border-left-width: 0.25rem;
+      border-left-color: #e5e7eb;
+      quotes: "\\201C""\\201D""\\2018""\\2019";
+      margin-top: 1.6em;
+      margin-bottom: 1.6em;
+      padding-left: 1em;
+    }
+    .prose h1 {
+      color: #111827;
+      font-weight: 800;
+      font-size: 2.25em;
+      margin-top: 0;
+      margin-bottom: 0.8888889em;
+      line-height: 1.1111111;
+    }
+    .prose h2 {
+      color: #111827;
+      font-weight: 700;
+      font-size: 1.5em;
+      margin-top: 2em;
+      margin-bottom: 1em;
+      line-height: 1.3333333;
+    }
+    .prose h3 {
+      color: #111827;
+      font-weight: 600;
+      font-size: 1.25em;
+      margin-top: 1.6em;
+      margin-bottom: 0.6em;
+      line-height: 1.6;
+    }
+    .prose h4 {
+      color: #111827;
+      font-weight: 600;
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      line-height: 1.5;
+    }
+    .prose img {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    .prose figure {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    .prose figure > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    .prose code {
+      color: #111827;
+      font-weight: 600;
+      font-size: 0.875em;
+    }
+    .prose code::before {
+      content: "\`";
+    }
+    .prose code::after {
+      content: "\`";
+    }
+    .prose pre {
+      color: #e5e7eb;
+      background-color: #1f2937;
+      overflow-x: auto;
+      font-size: 0.875em;
+      line-height: 1.7142857;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
+      border-radius: 0.375rem;
+      padding-top: 0.8571429em;
+      padding-right: 1.1428571em;
+      padding-bottom: 0.8571429em;
+      padding-left: 1.1428571em;
+    }
+    .prose pre code {
+      background-color: transparent;
+      border-width: 0;
+      border-radius: 0;
+      padding: 0;
+      font-weight: 400;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+    }
+    .prose pre code::before {
+      content: none;
+    }
+    .prose pre code::after {
+      content: none;
+    }
+    .prose table {
+      width: 100%;
+      table-layout: auto;
+      text-align: left;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      font-size: 0.875em;
+      line-height: 1.7142857;
+      border-collapse: collapse;
+    }
+    .prose thead {
+      border-bottom-width: 1px;
+      border-bottom-color: #d1d5db;
+    }
+    .prose thead th {
+      color: #111827;
+      font-weight: 600;
+      vertical-align: bottom;
+      padding-right: 0.5714286em;
+      padding-bottom: 0.5714286em;
+      padding-left: 0.5714286em;
+    }
+    .prose tbody tr {
+      border-bottom-width: 1px;
+      border-bottom-color: #e5e7eb;
+    }
+    .prose tbody tr:last-child {
+      border-bottom-width: 0;
+    }
+    .prose tbody td {
+      vertical-align: top;
+      padding-top: 0.5714286em;
+      padding-right: 0.5714286em;
+      padding-bottom: 0.5714286em;
+      padding-left: 0.5714286em;
+    }
+    .prose p {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
+
+    /* prose-sm modifier */
+    .prose-sm {
+      font-size: 0.875rem;
+      line-height: 1.7142857;
+    }
+    .prose-sm p {
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+    }
+    .prose-sm h1 {
+      font-size: 2.1428571em;
+      margin-top: 0;
+      margin-bottom: 0.8em;
+      line-height: 1.2;
+    }
+    .prose-sm h2 {
+      font-size: 1.4285714em;
+      margin-top: 1.6em;
+      margin-bottom: 0.8em;
+      line-height: 1.4;
+    }
+    .prose-sm h3 {
+      font-size: 1.2857143em;
+      margin-top: 1.5555556em;
+      margin-bottom: 0.4444444em;
+      line-height: 1.5555556;
+    }
+    .prose-sm h4 {
+      margin-top: 1.4285714em;
+      margin-bottom: 0.5714286em;
+      line-height: 1.4285714;
+    }
+    .prose-sm img {
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
+    }
+    .prose-sm ol, .prose-sm ul {
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+      padding-left: 1.5714286em;
+    }
+    .prose-sm li {
+      margin-top: 0.2857143em;
+      margin-bottom: 0.2857143em;
+    }
+
+    /* max-w-none utility */
+    .max-w-none {
+      max-width: none;
+    }
+
+    /* Custom editor styles */
+    .variable-highlight, .variable-placeholder, .variable-mention {
+      background-color: #dbeafe;
+      color: #1e40af;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: 'Courier New', monospace;
+      font-size: 14px;
+      display: inline;
+    }
+
+    .prose table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 16px 0;
+    }
+
+    .prose th, .prose td {
+      border: 1px solid #e5e7eb;
+      padding: 8px 12px;
+      text-align: left;
+      min-width: 100px;
+    }
+
+    .prose th {
+      background-color: #f3f4f6;
+      font-weight: 600;
+    }
+
+    .prose img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      margin: 16px 0;
+    }
+
+    .prose .resizable-image-wrapper {
+      display: block;
+      margin: 16px 0;
+    }
+
+    .prose .resizable-image-container {
+      display: inline-block;
+      position: relative;
+      max-width: 100%;
+    }
+
+    .prose .resizable-image-container img {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="prose prose-sm max-w-none">
+    ${htmlBody}
+  </div>
+</body>
+</html>`;
+  }
+
   /**
    * Compile HTML email with optional unsubscribe footer and badge
    * Adds unsubscribe link and Plunk badge for free tier users (only when billing is enabled)
@@ -638,7 +1043,9 @@ export class EmailService {
     project: Project;
     includeUnsubscribe?: boolean;
   }): string {
-    let html = content;
+    // Wrap visual editor content with prose styles so the sent email matches the preview modal.
+    // Custom HTML (from the HTML editor) already carries its own styles and is used as-is.
+    let html = this.detectCustomHtmlPatterns(content) ? content : this.wrapWithEmailStyles(content);
 
     const unsubscribeHtml = includeUnsubscribe
       ? (() => {
@@ -692,7 +1099,7 @@ export class EmailService {
                               <tr>
                                 <td style="width:180px;">
                                   <a href="${LANDING_URI}?ref=badge" target="_blank">
-                                    <img height="auto" src="https://cdn.useplunk.com/badge.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="180" />
+                                    <img alt="Powered by Plunk" height="auto" src="https://cdn.useplunk.com/badge.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="180" />
                                   </a>
                                 </td>
                               </tr>

apps/api/src/services/EmailVerificationService.ts

@@ -6,6 +6,9 @@ import {redis} from '../database/redis.js';
 const DISPOSABLE_DOMAINS_URL =
   'https://raw.githubusercontent.com/disposable-email-domains/disposable-email-domains/main/disposable_email_blocklist.conf';
 const DISPOSABLE_DOMAINS_CACHE_KEY = 'email:disposable_domains';
+const PERSONAL_DOMAINS_URL =
+  'https://gist.githubusercontent.com/ammarshah/f5c2624d767f91a7cbdc4e54db8dd0bf/raw/660fd949eba09c0b86574d9d3aa0f2137161fc7c/all_email_provider_domains.txt';
+const PERSONAL_DOMAINS_CACHE_KEY = 'email:personal_domains';
 const CACHE_TTL_SECONDS = 24 * 60 * 60; // 24 hours (list updates daily)
 
 // Known email forwarding/alias services
@@ -39,12 +42,15 @@ const FORWARDING_DOMAINS = new Set([
 
 export class EmailVerificationService {
   private static disposableDomainsSet: Set<string> | null = null;
+  private static personalDomainsSet: Set<string> | null = null;
 
   /**
    * Verify an email address
-   * - Checks if domain exists (DNS A/AAAA records)
-   * - Checks for MX records
+   * - Checks for NS records (proves domain exists in DNS)
+   * - Checks for MX records (required for receiving email)
+   * - Checks for A/AAAA records (informational - indicates if domain has a website)
    * - Detects disposable email addresses
+   * - Detects personal/free email providers (Gmail, Hotmail, etc.)
    * - Detects forwarding/alias email addresses
    * - Suggests corrections for common typos
    */
@@ -56,7 +62,9 @@ export class EmailVerificationService {
       isAlias: false,
       isTypo: false,
       isPlusAddressed: false,
+      isPersonalEmail: false,
       domainExists: false,
+      hasWebsite: false,
       hasMxRecords: false,
       reasons: [],
     };
@@ -74,6 +82,9 @@ export class EmailVerificationService {
     // Check if email is from a disposable domain using GitHub list
     result.isDisposable = await this.isDisposableDomain(domain);
 
+    // Check if email is from a personal/free email provider
+    result.isPersonalEmail = await this.isPersonalEmailDomain(domain);
+
     // Check if email is from a known forwarding/alias service
     result.isAlias = this.isForwardingDomain(domain);
 
@@ -88,35 +99,46 @@ export class EmailVerificationService {
       result.isTypo = true;
     }
 
-    // Check if domain exists (has any DNS records)
+    // Step 1: Check NS records - proves the domain exists in DNS
+    try {
+      const nsRecords = await dns.resolveNs(domain);
+      result.domainExists = nsRecords && nsRecords.length > 0;
+    } catch {
+      result.domainExists = false;
+      result.valid = false;
+      result.reasons.push('Domain does not exist (no nameservers found)');
+      // If domain doesn't exist, no point checking MX/A records
+      return result;
+    }
+
+    // Step 2: Check MX records - required for receiving email
+    try {
+      const mxRecords = await dns.resolveMx(domain);
+      result.hasMxRecords = mxRecords && mxRecords.length > 0;
+      if (!result.hasMxRecords) {
+        result.valid = false;
+        result.reasons.push('Domain cannot receive email (no MX records found)');
+      }
+    } catch {
+      result.hasMxRecords = false;
+      result.valid = false;
+      result.reasons.push('Domain cannot receive email (no MX records found)');
+    }
+
+    // Step 3: Check if domain has A/AAAA records - informational only
+    // This indicates if the domain has a website/web server
+    // Doesn't affect email validity since email only requires MX records
     try {
       await dns.resolve(domain, 'A');
-      result.domainExists = true;
+      result.hasWebsite = true;
     } catch {
       // Try AAAA records if A records fail
       try {
         await dns.resolve(domain, 'AAAA');
-        result.domainExists = true;
+        result.hasWebsite = true;
       } catch {
-        result.domainExists = false;
-        result.valid = false;
-        result.reasons.push('Domain does not exist');
-      }
-    }
-
-    // Check MX records (only if domain exists)
-    if (result.domainExists) {
-      try {
-        const mxRecords = await dns.resolveMx(domain);
-        result.hasMxRecords = mxRecords && mxRecords.length > 0;
-        if (!result.hasMxRecords) {
-          result.valid = false;
-          result.reasons.push('No MX records found for domain');
-        }
-      } catch {
-        result.hasMxRecords = false;
-        result.valid = false;
-        result.reasons.push('No MX records found for domain');
+        // Domain doesn't have A/AAAA records (no website), but this is OK for email
+        result.hasWebsite = false;
       }
     }
 
@@ -187,4 +209,57 @@ export class EmailVerificationService {
   private static isForwardingDomain(domain: string): boolean {
     return FORWARDING_DOMAINS.has(domain.toLowerCase());
   }
+
+  /**
+   * Fetch and cache the personal email domains list from GitHub
+   * Uses Redis for caching with 24-hour TTL
+   * Falls back to in-memory cache if Redis fails
+   */
+  private static async getPersonalEmailDomains(): Promise<Set<string>> {
+    // Return in-memory cache if available
+    if (this.personalDomainsSet) {
+      return this.personalDomainsSet;
+    }
+
+    try {
+      // Try to get from Redis cache first
+      const cached = await redis.get(PERSONAL_DOMAINS_CACHE_KEY);
+      if (cached) {
+        const domains = JSON.parse(cached) as string[];
+        this.personalDomainsSet = new Set(domains);
+        return this.personalDomainsSet;
+      }
+
+      // Fetch from GitHub if not in cache
+      const response = await fetch(PERSONAL_DOMAINS_URL);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch personal email domains: ${response.statusText}`);
+      }
+
+      const text = await response.text();
+      const domains = text
+        .split('\n')
+        .map(line => line.trim())
+        .filter(line => line && !line.startsWith('#')); // Filter empty lines and comments
+
+      // Cache in Redis
+      await redis.set(PERSONAL_DOMAINS_CACHE_KEY, JSON.stringify(domains), 'EX', CACHE_TTL_SECONDS);
+
+      // Cache in memory
+      this.personalDomainsSet = new Set(domains);
+      return this.personalDomainsSet;
+    } catch (error) {
+      console.error('Error fetching personal email domains:', error);
+      // Return empty set as fallback - don't block email verification
+      return new Set<string>();
+    }
+  }
+
+  /**
+   * Check if a domain is a personal/free email provider
+   */
+  private static async isPersonalEmailDomain(domain: string): Promise<boolean> {
+    const personalDomains = await this.getPersonalEmailDomains();
+    return personalDomains.has(domain.toLowerCase());
+  }
 }

apps/api/src/services/NtfyService.ts

@@ -170,6 +170,17 @@ export class NtfyService {
     ]);
   }
 
+  /**
+   * Notify about project disabled due to payment failure
+   */
+  public static async notifyProjectDisabledForPayment(projectName: string, projectId: string): Promise<void> {
+    await this.sendUrgent(
+      'Project Disabled - Payment Failed',
+      `Project "${projectName}" (${projectId}) was automatically disabled due to a failed recurring payment`,
+      [NtfyTag.WARNING, NtfyTag.MONEY, NtfyTag.ERROR],
+    );
+  }
+
   /**
    * Notify about successful invoice payment - MIN priority (routine)
    */
@@ -211,9 +222,11 @@ export class NtfyService {
     const {redis} = await import('../database/redis.js');
 
     const cacheKey = `ntfy:security:warning:${projectId}`;
-    const exists = await redis.exists(cacheKey);
+    const ttl = 3600; // 1 hour
 
-    if (exists) {
+    // Use SETNX to atomically check and set the flag (prevents race conditions)
+    const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+    if (!wasSet) {
       return;
     }
 
@@ -223,14 +236,11 @@ export class NtfyService {
       `Project "${projectName}" (${projectId}) has security warnings: ${warningText}`,
       [NtfyTag.WARNING, NtfyTag.SHIELD],
     );
-
-    // Throttle for 1 hour
-    await redis.setex(cacheKey, 3600, '1');
   }
 
   /**
    * Notify about email bounce - LOW priority (high volume)
-   * Rate-limited to only send notification every 20 bounces with per-project breakdown
+   * Rate-limited to only send notification every 20 bounces with latest 20 bounce details
    */
   public static async notifyEmailBounce(
     projectName: string,
@@ -241,63 +251,51 @@ export class NtfyService {
     // Import redis at runtime to avoid circular dependencies
     const {redis} = await import('../database/redis.js');
 
-    // Use Redis counters to track bounce count globally and per-project
+    // Use Redis counters to track bounce count globally
     const globalCountKey = `ntfy:bounce:count`;
-    const projectCountKey = `ntfy:bounce:count:${projectId}`;
-    const projectListKey = `ntfy:bounce:projects`;
+    const bounceListKey = `ntfy:bounce:latest`;
 
     // Increment global counter
     const globalCount = await redis.incr(globalCountKey);
 
-    // Increment project-specific counter
-    await redis.incr(projectCountKey);
-
-    // Add project to the set of projects with bounces (for tracking)
-    await redis.sadd(projectListKey, projectId);
+    // Store this bounce event in a list (keep latest 20)
+    const bounceEvent = JSON.stringify({
+      projectName,
+      projectId,
+      recipientEmail,
+      bounceType: bounceType || 'Unknown',
+      timestamp: new Date().toISOString(),
+    });
+    await redis.lpush(bounceListKey, bounceEvent);
+    await redis.ltrim(bounceListKey, 0, 19); // Keep only latest 20
 
     // Set expiry on first increment (24 hour rolling window)
     if (globalCount === 1) {
       await redis.expire(globalCountKey, 86400);
-      await redis.expire(projectListKey, 86400);
+      await redis.expire(bounceListKey, 86400);
     }
-    // Always refresh project counter expiry to match global window
-    await redis.expire(projectCountKey, 86400);
 
     // Only send notification every 20 bounces
     if (globalCount % 20 === 0) {
-      // Get all projects with bounces
-      const projectIds = await redis.smembers(projectListKey);
+      // Get the latest 20 bounces
+      const latestBounces = await redis.lrange(bounceListKey, 0, 19);
 
-      // Get bounce counts for each project
-      const projectCounts: Array<{projectId: string; count: number; name: string}> = [];
-      for (const pid of projectIds) {
-        const count = await redis.get(`ntfy:bounce:count:${pid}`);
-        if (count) {
-          // Fetch project name from database
-          const {prisma} = await import('../database/prisma.js');
-          const project = await prisma.project.findUnique({
-            where: {id: pid},
-            select: {name: true},
-          });
+      // Parse and format the bounce events
+      const bounceDetails = latestBounces
+        .map(bounce => {
+          try {
+            const parsed = JSON.parse(bounce);
+            return `  • ${parsed.recipientEmail} (${parsed.bounceType}) - ${parsed.projectName}`;
+          } catch {
+            return null;
+          }
+        })
+        .filter(Boolean)
+        .join('\n');
 
-          projectCounts.push({
-            projectId: pid,
-            count: parseInt(count, 10),
-            name: project?.name || 'Unknown',
-          });
-        }
-      }
-
-      // Sort by count descending
-      projectCounts.sort((a, b) => b.count - a.count);
-
-      // Build breakdown message
-      const breakdown = projectCounts.map(p => `  • ${p.name} (${p.projectId}): ${p.count}`).join('\n');
-
-      const bounceInfo = bounceType ? ` (${bounceType})` : '';
       await this.send({
         title: 'Email Bounces',
-        message: `20 email bounces detected (total: ${globalCount})\n\nBreakdown by project:\n${breakdown}\n\nLatest: ${recipientEmail}${bounceInfo} in "${projectName}"`,
+        message: `20 email bounces detected (total: ${globalCount})\n\nLatest 20 bounces:\n${bounceDetails}`,
         priority: NtfyPriority.LOW,
         tags: [NtfyTag.WARNING],
       });
@@ -606,9 +604,11 @@ export class NtfyService {
     const {redis} = await import('../database/redis.js');
 
     const cacheKey = `ntfy:billing:warning:${projectId}:${sourceType}`;
-    const exists = await redis.exists(cacheKey);
+    const ttl = 86400; // 24 hours
 
-    if (exists) {
+    // Use SETNX to atomically check and set the flag (prevents race conditions)
+    const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+    if (!wasSet) {
       return;
     }
 
@@ -617,9 +617,6 @@ export class NtfyService {
       `Email usage at ${Math.round(percentage)}% (${usage}/${limit}) for ${sourceType} in project "${projectName}" (${projectId})`,
       [NtfyTag.WARNING, NtfyTag.MONEY, NtfyTag.CHART],
     );
-
-    // Throttle for 24 hours
-    await redis.setex(cacheKey, 86400, '1');
   }
 
   // ===== Billing and usage limit notifications =====
@@ -638,9 +635,11 @@ export class NtfyService {
     const {redis} = await import('../database/redis.js');
 
     const cacheKey = `ntfy:billing:exceeded:${projectId}:${sourceType}`;
-    const exists = await redis.exists(cacheKey);
+    const ttl = 86400; // 24 hours
 
-    if (exists) {
+    // Use SETNX to atomically check and set the flag (prevents race conditions)
+    const wasSet = await redis.set(cacheKey, '1', 'EX', ttl, 'NX');
+    if (!wasSet) {
       return;
     }
 
@@ -649,9 +648,6 @@ export class NtfyService {
       `Email usage limit reached (${usage}/${limit}) for ${sourceType} in project "${projectName}" (${projectId}). Further emails are blocked.`,
       [NtfyTag.ERROR, NtfyTag.MONEY, NtfyTag.SKULL],
     );
-
-    // Throttle for 24 hours
-    await redis.setex(cacheKey, 86400, '1');
   }
 
   /**
@@ -765,6 +761,32 @@ export class NtfyService {
     });
   }
 
+  /**
+   * Notify about bundled segment membership updates - LOW priority
+   * Used when multiple segments are updated in a single processing cycle
+   */
+  public static async notifySegmentMembershipBundled(
+    projectName: string,
+    projectId: string,
+    segmentCount: number,
+    totalAdded: number,
+    totalRemoved: number,
+  ): Promise<void> {
+    const changes: string[] = [];
+    if (totalAdded > 0) changes.push(`+${totalAdded} added`);
+    if (totalRemoved > 0) changes.push(`-${totalRemoved} removed`);
+
+    const changesText = changes.length > 0 ? ` (${changes.join(', ')})` : '';
+    const message = `${segmentCount} segment${segmentCount > 1 ? 's' : ''} updated in project "${projectName}" (${projectId})${changesText}`;
+
+    await this.send({
+      title: 'Segment Memberships Updated',
+      message,
+      priority: NtfyPriority.LOW,
+      tags: [NtfyTag.CHART],
+    });
+  }
+
   /**
    * Notify about segment deleted - MIN priority
    */

apps/api/src/services/QueueService.ts

@@ -282,14 +282,22 @@ export class QueueService {
 
   /**
    * Get import job status and progress
+   * @param jobId - The job ID
+   * @param projectId - The project ID to verify authorization
+   * @returns Job status or null if not found or unauthorized
    */
-  public static async getImportJobStatus(jobId: string) {
+  public static async getImportJobStatus(jobId: string, projectId: string) {
     const job = await importQueue.getJob(jobId);
 
     if (!job) {
       return null;
     }
 
+    // Security: Verify that the job belongs to the requesting project
+    if (job.data.projectId !== projectId) {
+      return null;
+    }
+
     const state = await job.getState();
     const progress = job.progress;
     const returnValue = job.returnvalue;
@@ -324,14 +332,22 @@ export class QueueService {
 
   /**
    * Get bulk action job status and progress
+   * @param jobId - The job ID
+   * @param projectId - The project ID to verify authorization
+   * @returns Job status or null if not found or unauthorized
    */
-  public static async getBulkActionJobStatus(jobId: string) {
+  public static async getBulkActionJobStatus(jobId: string, projectId: string) {
     const job = await bulkContactQueue.getJob(jobId);
 
     if (!job) {
       return null;
     }
 
+    // Security: Verify that the job belongs to the requesting project
+    if (job.data.projectId !== projectId) {
+      return null;
+    }
+
     const state = await job.getState();
     const progress = job.progress;
     const returnValue = job.returnvalue;

apps/api/src/services/SESService.ts

@@ -8,7 +8,7 @@ import {
   DASHBOARD_URI,
   SES_CONFIGURATION_SET,
   SES_CONFIGURATION_SET_NO_TRACKING,
-  TRACKING_TOGGLE_ENABLED
+  TRACKING_TOGGLE_ENABLED,
 } from '../app/constants.js';
 
 /**
@@ -40,6 +40,8 @@ interface SendRawEmailParams {
         filename: string;
         content: string; // Base64 encoded
         contentType: string;
+        contentId?: string;
+        disposition?: 'attachment' | 'inline';
       }[]
     | null;
   tracking?: boolean;
@@ -101,8 +103,13 @@ export async function sendRawEmail({
   }
 
   // Generate unique boundaries for multipart messages
-  const boundary = `----=_NextPart_${Math.random().toString(36).substring(2)}`;
-  const mixedBoundary = attachments?.length ? `----=_MixedPart_${Math.random().toString(36).substring(2)}` : null;
+  const altBoundary = `----=_AltPart_${Math.random().toString(36).substring(2)}`;
+  const mixedBoundary = attachments?.some(a => (a.disposition ?? 'attachment') === 'attachment')
+    ? `----=_MixedPart_${Math.random().toString(36).substring(2)}`
+    : null;
+  const relatedBoundary = attachments?.some(a => a.disposition === 'inline')
+    ? `----=_RelatedPart_${Math.random().toString(36).substring(2)}`
+    : null;
 
   // Format To header with names if provided
   const toHeader = to
@@ -118,17 +125,21 @@ export async function sendRawEmail({
   // Extract just email addresses for Destinations (SES requirement)
   const destinations = to.map(recipient => (typeof recipient === 'string' ? recipient : recipient.email));
 
+  // Determine root content type
+  let rootContentType = `multipart/alternative; boundary="${altBoundary}"`;
+  if (mixedBoundary) {
+    rootContentType = `multipart/mixed; boundary="${mixedBoundary}"`;
+  } else if (relatedBoundary) {
+    rootContentType = `multipart/related; boundary="${relatedBoundary}"`;
+  }
+
   // Build raw MIME message
-  const rawMessage = `From: ${from.name} <${from.email}>
+  let rawMessage = `From: ${from.name} <${from.email}>
 To: ${toHeader}
 Reply-To: ${reply || from.email}
 Subject: ${content.subject}
 MIME-Version: 1.0
-${
-  mixedBoundary
-    ? `Content-Type: multipart/mixed; boundary="${mixedBoundary}"`
-    : `Content-Type: multipart/alternative; boundary="${boundary}"`
-}
+Content-Type: ${rootContentType}
 ${
   headers
     ? Object.entries(headers)
@@ -138,29 +149,61 @@ ${
 }
 ${unsubscribeHeader}
 
-${mixedBoundary ? `--${mixedBoundary}\n` : ''}${
-    mixedBoundary ? `Content-Type: multipart/alternative; boundary="${boundary}"\n\n` : ''
-  }--${boundary}
+`;
+
+  // building the body
+  if (mixedBoundary) {
+    rawMessage += `--${mixedBoundary}\n`;
+    if (relatedBoundary) {
+      rawMessage += `Content-Type: multipart/related; boundary="${relatedBoundary}"\n\n`;
+      rawMessage += `--${relatedBoundary}\n`;
+    }
+  } else if (relatedBoundary) {
+    rawMessage += `--${relatedBoundary}\n`;
+  }
+
+  // If we are nested, we need to specify that this next part is the alternative container
+  if (mixedBoundary || relatedBoundary) {
+    rawMessage += `Content-Type: multipart/alternative; boundary="${altBoundary}"\n\n`;
+  }
+
+  // The alternative part content (always contains HTML)
+  rawMessage += `--${altBoundary}
 Content-Type: text/html; charset=utf-8
 Content-Transfer-Encoding: 7bit
 
 ${breakLongLines(content.html, 500)}
---${boundary}--
-${
-  attachments && attachments.length > 0
-    ? '\n' +
-      attachments
-        .map(
-          attachment => `--${mixedBoundary}
+--${altBoundary}--
+`;
+
+  // Add inline attachments to the related container
+  if (relatedBoundary) {
+    const inlineAttachments = attachments?.filter(a => a.disposition === 'inline') ?? [];
+    for (const attachment of inlineAttachments) {
+      rawMessage += `\n--${relatedBoundary}
+Content-Type: ${attachment.contentType}
+Content-Transfer-Encoding: base64
+Content-ID: <${attachment.contentId || attachment.filename}>
+Content-Disposition: inline; filename="${attachment.filename}"
+
+${breakLongLines(attachment.content, 76, true)}`;
+    }
+    rawMessage += `\n--${relatedBoundary}--`;
+  }
+
+  // Add regular attachments to the mixed container
+  if (mixedBoundary) {
+    const regularAttachments = attachments?.filter(a => (a.disposition ?? 'attachment') === 'attachment') ?? [];
+    for (const attachment of regularAttachments) {
+      rawMessage += `\n--${mixedBoundary}
 Content-Type: ${attachment.contentType}
 Content-Transfer-Encoding: base64
 Content-Disposition: attachment; filename="${attachment.filename}"
 
-${breakLongLines(attachment.content, 76, true)}`,
-        )
-        .join('\n')
-    : ''
-}${mixedBoundary ? `\n--${mixedBoundary}--` : ''}`;
+${breakLongLines(attachment.content, 76, true)}`;
+    }
+    rawMessage += `\n--${mixedBoundary}--`;
+  }
 
   // Determine which configuration set to use
   // Only use NO_TRACKING if tracking toggle is enabled AND tracking is disabled
@@ -258,6 +301,13 @@ export const disableFeedbackForwarding = async (domain: string): Promise<void> =
   });
 };
 
+/**
+ * Delete a verified domain identity from AWS SES
+ */
+export const deleteIdentity = async (domain: string): Promise<void> => {
+  await ses.deleteIdentity({Identity: domain});
+};
+
 /**
  * Get AWS SES account sending quota and rate limit
  * @returns MaxSendRate (emails per second) or null if the call fails

apps/api/src/services/SecurityService.ts

@@ -1,3 +1,5 @@
+import crypto from 'crypto';
+
 import {ProjectDisabledEmail, sendPlatformEmail} from '@plunk/email';
 import React from 'react';
 import signale from 'signale';
@@ -15,7 +17,7 @@ import {AUTO_PROJECT_DISABLE, DASHBOARD_URI, LANDING_URI} from '../app/constants
  * These limits protect AWS SES reputation and prevent account suspension
  */
 const SECURITY_THRESHOLDS = {
-  // Minimum emails required before enforcing limits (prevents false positives)
+  // Minimum emails required before enforcing rate-based limits (prevents false positives)
   MIN_EMAILS_FOR_ENFORCEMENT: 100,
 
   // Bounce rate thresholds (hard bounces only)
@@ -25,10 +27,43 @@ const SECURITY_THRESHOLDS = {
   BOUNCE_ALLTIME_CRITICAL: 8,
 
   // Complaint rate thresholds (spam reports)
-  COMPLAINT_7DAY_WARNING: 0.05,
-  COMPLAINT_7DAY_CRITICAL: 0.1,
-  COMPLAINT_ALLTIME_WARNING: 0.02,
-  COMPLAINT_ALLTIME_CRITICAL: 0.08,
+  COMPLAINT_7DAY_WARNING: 0.075,
+  COMPLAINT_7DAY_CRITICAL: 0.15,
+  COMPLAINT_ALLTIME_WARNING: 0.03,
+  COMPLAINT_ALLTIME_CRITICAL: 0.12,
+
+  // Minimum absolute counts (prevents small sample size false positives)
+  // Both percentage AND absolute count must be exceeded to trigger rate-based checks
+  MIN_BOUNCES_FOR_CRITICAL: 10,
+  MIN_BOUNCES_FOR_WARNING: 5,
+  MIN_COMPLAINTS_FOR_CRITICAL: 5,
+  MIN_COMPLAINTS_FOR_WARNING: 3,
+
+  // === Absolute count ceilings ===
+  // These trigger regardless of rate — catches high-volume spammers who dilute their bounce rate
+  // 24-hour absolute ceilings
+  BOUNCE_24H_CEILING_WARNING: 50,
+  BOUNCE_24H_CEILING_CRITICAL: 100,
+  COMPLAINT_24H_CEILING_WARNING: 10,
+  COMPLAINT_24H_CEILING_CRITICAL: 25,
+
+  // 7-day absolute ceilings
+  BOUNCE_7DAY_CEILING_WARNING: 200,
+  BOUNCE_7DAY_CEILING_CRITICAL: 500,
+  COMPLAINT_7DAY_CEILING_WARNING: 30,
+  COMPLAINT_7DAY_CEILING_CRITICAL: 75,
+
+  // === New project thresholds (projects < 30 days old) ===
+  // Legitimate senders ramp up gradually; spammers blast immediately
+  NEW_PROJECT_AGE_DAYS: 30,
+  NEW_PROJECT_BOUNCE_24H_CEILING_WARNING: 10,
+  NEW_PROJECT_BOUNCE_24H_CEILING_CRITICAL: 25,
+  NEW_PROJECT_BOUNCE_7DAY_CEILING_WARNING: 25,
+  NEW_PROJECT_BOUNCE_7DAY_CEILING_CRITICAL: 50,
+  NEW_PROJECT_COMPLAINT_24H_CEILING_WARNING: 3,
+  NEW_PROJECT_COMPLAINT_24H_CEILING_CRITICAL: 7,
+  NEW_PROJECT_COMPLAINT_7DAY_CEILING_WARNING: 10,
+  NEW_PROJECT_COMPLAINT_7DAY_CEILING_CRITICAL: 20,
 } as const;
 
 interface RateData {
@@ -43,15 +78,84 @@ interface SecurityStatus {
   projectId: string;
   isHealthy: boolean;
   shouldDisable: boolean;
+  twentyFourHour: RateData;
   sevenDay: RateData;
   allTime: RateData;
+  isNewProject: boolean;
   violations: string[];
   warnings: string[];
 }
 
+const SNS_CERT_HOST_RE = /^sns\.[a-z0-9-]+\.amazonaws\.(com|cn)$/;
+const snsSigningCertCache = new Map<string, string>();
+
+async function fetchSigningCert(certUrl: string): Promise<string> {
+  const cached = snsSigningCertCache.get(certUrl);
+  if (cached) return cached;
+
+  const response = await fetch(certUrl);
+  if (!response.ok) throw new Error(`Failed to fetch SNS signing cert: ${response.statusText}`);
+
+  const pem = await response.text();
+  snsSigningCertCache.set(certUrl, pem);
+  return pem;
+}
+
+function buildSnsStringToSign(message: Record<string, string>): string {
+  const fields =
+    message['Type'] === 'Notification'
+      ? ['Message', 'MessageId', 'Subject', 'Timestamp', 'TopicArn', 'Type']
+      : ['Message', 'MessageId', 'SubscribeURL', 'Timestamp', 'Token', 'TopicArn', 'Type'];
+
+  return fields
+    .filter(key => message[key] !== undefined)
+    .map(key => `${key}\n${message[key]}\n`)
+    .join('');
+}
+
 export class SecurityService {
   private static readonly CACHE_TTL = 300; // 5 minutes
 
+  /**
+   * Verify an AWS SNS message signature. Returns false if the cert URL is
+   * untrusted, or the signature doesn't match.
+   */
+  public static async verifySnsSignature(body: Record<string, string>): Promise<boolean> {
+    try {
+      const certUrl = body['SigningCertURL'];
+      const signature = body['Signature'];
+
+      if (!certUrl || !signature) {
+        signale.warn('[SNS] Missing SigningCertURL or Signature');
+        return false;
+      }
+
+      let parsedUrl: URL;
+      try {
+        parsedUrl = new URL(certUrl);
+      } catch {
+        signale.warn('[SNS] Unparseable SigningCertURL');
+        return false;
+      }
+
+      if (parsedUrl.protocol !== 'https:' || !SNS_CERT_HOST_RE.test(parsedUrl.hostname)) {
+        signale.warn(`[SNS] Untrusted SigningCertURL host: ${parsedUrl.hostname}`);
+        return false;
+      }
+
+      const pem = await fetchSigningCert(certUrl);
+      const stringToSign = buildSnsStringToSign(body);
+      const algorithm = body['SignatureVersion'] === '2' ? 'RSA-SHA256' : 'RSA-SHA1';
+
+      const verifier = crypto.createVerify(algorithm);
+      verifier.update(stringToSign, 'utf8');
+      return verifier.verify(pem, signature, 'base64');
+    } catch (err) {
+      signale.error('[SNS] Signature verification error:', err);
+      return false;
+    }
+  }
+
   /**
    * Get security status for a project (with caching)
    */
@@ -79,6 +183,13 @@ export class SecurityService {
         projectId,
         isHealthy: true,
         shouldDisable: false,
+        twentyFourHour: {
+          total: 0,
+          bounces: 0,
+          complaints: 0,
+          bounceRate: 0,
+          complaintRate: 0,
+        },
         sevenDay: {
           total: 0,
           bounces: 0,
@@ -93,6 +204,7 @@ export class SecurityService {
           bounceRate: 0,
           complaintRate: 0,
         },
+        isNewProject: false,
         violations: [],
         warnings: [],
       };
@@ -126,12 +238,20 @@ export class SecurityService {
             `[SECURITY] Project ${projectId} (${project.name}) has CRITICAL security violations but auto-disable is turned off:`,
             status.violations,
           );
+          signale.info(
+            `[SECURITY] 24-hour stats: ${status.twentyFourHour.bounces} bounces, ${status.twentyFourHour.complaints} complaints out of ${status.twentyFourHour.total} emails`,
+          );
           signale.info(
             `[SECURITY] 7-day stats: ${status.sevenDay.bounces} bounces, ${status.sevenDay.complaints} complaints out of ${status.sevenDay.total} emails`,
           );
           signale.info(
             `[SECURITY] All-time stats: ${status.allTime.bounces} bounces, ${status.allTime.complaints} complaints out of ${status.allTime.total} emails`,
           );
+          if (status.isNewProject) {
+            signale.info(
+              `[SECURITY] Project is under ${SECURITY_THRESHOLDS.NEW_PROJECT_AGE_DAYS} days old — stricter ceilings apply`,
+            );
+          }
 
           // Send notification about critical security violations
           await NtfyService.notifySecurityWarning(project.name, projectId, status.violations);
@@ -194,11 +314,17 @@ export class SecurityService {
   }
 
   /**
-   * Get a project's security metrics (for admin/dashboard display)
+   * Get a project's security metrics (for dashboard display)
+   * Does NOT expose internal thresholds — only computed health levels
    */
   public static async getProjectSecurityMetrics(projectId: string): Promise<{
     status: SecurityStatus;
-    thresholds: typeof SECURITY_THRESHOLDS;
+    levels: {
+      bounce7Day: 'healthy' | 'warning' | 'critical';
+      bounceAllTime: 'healthy' | 'warning' | 'critical';
+      complaint7Day: 'healthy' | 'warning' | 'critical';
+      complaintAllTime: 'healthy' | 'warning' | 'critical';
+    };
     isDisabled: boolean;
   }> {
     const [status, project] = await Promise.all([
@@ -209,13 +335,55 @@ export class SecurityService {
       }),
     ]);
 
+    // Strip internal details from the client-facing response:
+    // - Replace detailed violation/warning messages (they contain exact thresholds)
+    // - Remove 24-hour data and new project flag (reveals enforcement windows)
+    const sanitizedStatus: SecurityStatus = {
+      ...status,
+      twentyFourHour: {total: 0, bounces: 0, complaints: 0, bounceRate: 0, complaintRate: 0},
+      isNewProject: false,
+      violations: status.violations.map(() => 'Security threshold exceeded'),
+      warnings: status.warnings.map(() => 'Approaching security threshold'),
+    };
+
     return {
-      status,
-      thresholds: SECURITY_THRESHOLDS,
+      status: sanitizedStatus,
+      levels: {
+        bounce7Day: this.computeLevel(
+          status.sevenDay.bounceRate,
+          SECURITY_THRESHOLDS.BOUNCE_7DAY_WARNING,
+          SECURITY_THRESHOLDS.BOUNCE_7DAY_CRITICAL,
+        ),
+        bounceAllTime: this.computeLevel(
+          status.allTime.bounceRate,
+          SECURITY_THRESHOLDS.BOUNCE_ALLTIME_WARNING,
+          SECURITY_THRESHOLDS.BOUNCE_ALLTIME_CRITICAL,
+        ),
+        complaint7Day: this.computeLevel(
+          status.sevenDay.complaintRate,
+          SECURITY_THRESHOLDS.COMPLAINT_7DAY_WARNING,
+          SECURITY_THRESHOLDS.COMPLAINT_7DAY_CRITICAL,
+        ),
+        complaintAllTime: this.computeLevel(
+          status.allTime.complaintRate,
+          SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_WARNING,
+          SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_CRITICAL,
+        ),
+      },
       isDisabled: project?.disabled ?? false,
     };
   }
 
+  private static computeLevel(
+    value: number,
+    warningThreshold: number,
+    criticalThreshold: number,
+  ): 'healthy' | 'warning' | 'critical' {
+    if (value >= criticalThreshold) return 'critical';
+    if (value >= warningThreshold) return 'warning';
+    return 'healthy';
+  }
+
   /**
    * Calculate bounce and complaint rates for a project
    */
@@ -263,10 +431,21 @@ export class SecurityService {
    */
   private static async calculateSecurityStatus(projectId: string): Promise<SecurityStatus> {
     const now = new Date();
+    const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
     const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
 
-    // Get 7-day and all-time rates in parallel
-    const [sevenDay, allTime] = await Promise.all([
+    // Get project age to determine if stricter new-project thresholds apply
+    const project = await prisma.project.findUnique({
+      where: {id: projectId},
+      select: {createdAt: true},
+    });
+
+    const projectAgeDays = project ? (now.getTime() - project.createdAt.getTime()) / (1000 * 60 * 60 * 24) : Infinity;
+    const isNewProject = projectAgeDays < SECURITY_THRESHOLDS.NEW_PROJECT_AGE_DAYS;
+
+    // Get 24-hour, 7-day and all-time rates in parallel
+    const [twentyFourHour, sevenDay, allTime] = await Promise.all([
+      this.calculateRates(projectId, oneDayAgo),
       this.calculateRates(projectId, sevenDaysAgo),
       this.calculateRates(projectId),
     ]);
@@ -274,57 +453,158 @@ export class SecurityService {
     const violations: string[] = [];
     const warnings: string[] = [];
 
+    // Pick absolute count ceilings based on project age
+    const bounceCeilings = isNewProject
+      ? {
+          ceiling24hWarning: SECURITY_THRESHOLDS.NEW_PROJECT_BOUNCE_24H_CEILING_WARNING,
+          ceiling24hCritical: SECURITY_THRESHOLDS.NEW_PROJECT_BOUNCE_24H_CEILING_CRITICAL,
+          ceiling7dWarning: SECURITY_THRESHOLDS.NEW_PROJECT_BOUNCE_7DAY_CEILING_WARNING,
+          ceiling7dCritical: SECURITY_THRESHOLDS.NEW_PROJECT_BOUNCE_7DAY_CEILING_CRITICAL,
+        }
+      : {
+          ceiling24hWarning: SECURITY_THRESHOLDS.BOUNCE_24H_CEILING_WARNING,
+          ceiling24hCritical: SECURITY_THRESHOLDS.BOUNCE_24H_CEILING_CRITICAL,
+          ceiling7dWarning: SECURITY_THRESHOLDS.BOUNCE_7DAY_CEILING_WARNING,
+          ceiling7dCritical: SECURITY_THRESHOLDS.BOUNCE_7DAY_CEILING_CRITICAL,
+        };
+
+    const complaintCeilings = isNewProject
+      ? {
+          ceiling24hWarning: SECURITY_THRESHOLDS.NEW_PROJECT_COMPLAINT_24H_CEILING_WARNING,
+          ceiling24hCritical: SECURITY_THRESHOLDS.NEW_PROJECT_COMPLAINT_24H_CEILING_CRITICAL,
+          ceiling7dWarning: SECURITY_THRESHOLDS.NEW_PROJECT_COMPLAINT_7DAY_CEILING_WARNING,
+          ceiling7dCritical: SECURITY_THRESHOLDS.NEW_PROJECT_COMPLAINT_7DAY_CEILING_CRITICAL,
+        }
+      : {
+          ceiling24hWarning: SECURITY_THRESHOLDS.COMPLAINT_24H_CEILING_WARNING,
+          ceiling24hCritical: SECURITY_THRESHOLDS.COMPLAINT_24H_CEILING_CRITICAL,
+          ceiling7dWarning: SECURITY_THRESHOLDS.COMPLAINT_7DAY_CEILING_WARNING,
+          ceiling7dCritical: SECURITY_THRESHOLDS.COMPLAINT_7DAY_CEILING_CRITICAL,
+        };
+
+    const projectLabel = isNewProject ? ' (new project)' : '';
+
+    // === Absolute count ceiling checks (rate-independent) ===
+    // These catch high-volume spammers who dilute their bounce rate by blasting emails
+
+    // 24-hour bounce ceilings
+    if (twentyFourHour.bounces >= bounceCeilings.ceiling24hCritical) {
+      violations.push(
+        `24-hour bounce count${projectLabel} (${twentyFourHour.bounces} bounces) exceeds critical ceiling (${bounceCeilings.ceiling24hCritical})`,
+      );
+    } else if (twentyFourHour.bounces >= bounceCeilings.ceiling24hWarning) {
+      warnings.push(
+        `24-hour bounce count${projectLabel} (${twentyFourHour.bounces} bounces) exceeds warning ceiling (${bounceCeilings.ceiling24hWarning})`,
+      );
+    }
+
+    // 7-day bounce ceilings
+    if (sevenDay.bounces >= bounceCeilings.ceiling7dCritical) {
+      violations.push(
+        `7-day bounce count${projectLabel} (${sevenDay.bounces} bounces) exceeds critical ceiling (${bounceCeilings.ceiling7dCritical})`,
+      );
+    } else if (sevenDay.bounces >= bounceCeilings.ceiling7dWarning) {
+      warnings.push(
+        `7-day bounce count${projectLabel} (${sevenDay.bounces} bounces) exceeds warning ceiling (${bounceCeilings.ceiling7dWarning})`,
+      );
+    }
+
+    // 24-hour complaint ceilings
+    if (twentyFourHour.complaints >= complaintCeilings.ceiling24hCritical) {
+      violations.push(
+        `24-hour complaint count${projectLabel} (${twentyFourHour.complaints} complaints) exceeds critical ceiling (${complaintCeilings.ceiling24hCritical})`,
+      );
+    } else if (twentyFourHour.complaints >= complaintCeilings.ceiling24hWarning) {
+      warnings.push(
+        `24-hour complaint count${projectLabel} (${twentyFourHour.complaints} complaints) exceeds warning ceiling (${complaintCeilings.ceiling24hWarning})`,
+      );
+    }
+
+    // 7-day complaint ceilings
+    if (sevenDay.complaints >= complaintCeilings.ceiling7dCritical) {
+      violations.push(
+        `7-day complaint count${projectLabel} (${sevenDay.complaints} complaints) exceeds critical ceiling (${complaintCeilings.ceiling7dCritical})`,
+      );
+    } else if (sevenDay.complaints >= complaintCeilings.ceiling7dWarning) {
+      warnings.push(
+        `7-day complaint count${projectLabel} (${sevenDay.complaints} complaints) exceeds warning ceiling (${complaintCeilings.ceiling7dWarning})`,
+      );
+    }
+
+    // === Rate-based checks (existing logic) ===
     // Only enforce if minimum emails threshold is met
     const hasMinimumVolumeAllTime = allTime.total >= SECURITY_THRESHOLDS.MIN_EMAILS_FOR_ENFORCEMENT;
     const hasMinimumVolume7Day = sevenDay.total >= SECURITY_THRESHOLDS.MIN_EMAILS_FOR_ENFORCEMENT;
 
     // Check 7-day bounce rate (only if 7-day volume is sufficient)
     if (hasMinimumVolume7Day) {
-      if (sevenDay.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_7DAY_CRITICAL) {
+      if (
+        sevenDay.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_7DAY_CRITICAL &&
+        sevenDay.bounces >= SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_CRITICAL
+      ) {
         violations.push(
-          `7-day bounce rate (${sevenDay.bounceRate.toFixed(2)}%) exceeds critical threshold (${SECURITY_THRESHOLDS.BOUNCE_7DAY_CRITICAL}%)`,
+          `7-day bounce rate (${sevenDay.bounceRate.toFixed(2)}%, ${sevenDay.bounces} bounces) exceeds critical threshold (${SECURITY_THRESHOLDS.BOUNCE_7DAY_CRITICAL}%, ${SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_CRITICAL} minimum)`,
         );
-      } else if (sevenDay.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_7DAY_WARNING) {
+      } else if (
+        sevenDay.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_7DAY_WARNING &&
+        sevenDay.bounces >= SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_WARNING
+      ) {
         warnings.push(
-          `7-day bounce rate (${sevenDay.bounceRate.toFixed(2)}%) exceeds warning threshold (${SECURITY_THRESHOLDS.BOUNCE_7DAY_WARNING}%)`,
+          `7-day bounce rate (${sevenDay.bounceRate.toFixed(2)}%, ${sevenDay.bounces} bounces) exceeds warning threshold (${SECURITY_THRESHOLDS.BOUNCE_7DAY_WARNING}%, ${SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_WARNING} minimum)`,
         );
       }
     }
 
     // Check 7-day complaint rate (only if 7-day volume is sufficient)
     if (hasMinimumVolume7Day) {
-      if (sevenDay.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_7DAY_CRITICAL) {
+      if (
+        sevenDay.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_7DAY_CRITICAL &&
+        sevenDay.complaints >= SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_CRITICAL
+      ) {
         violations.push(
-          `7-day complaint rate (${sevenDay.complaintRate.toFixed(3)}%) exceeds critical threshold (${SECURITY_THRESHOLDS.COMPLAINT_7DAY_CRITICAL}%)`,
+          `7-day complaint rate (${sevenDay.complaintRate.toFixed(3)}%, ${sevenDay.complaints} complaints) exceeds critical threshold (${SECURITY_THRESHOLDS.COMPLAINT_7DAY_CRITICAL}%, ${SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_CRITICAL} minimum)`,
         );
-      } else if (sevenDay.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_7DAY_WARNING) {
+      } else if (
+        sevenDay.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_7DAY_WARNING &&
+        sevenDay.complaints >= SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_WARNING
+      ) {
         warnings.push(
-          `7-day complaint rate (${sevenDay.complaintRate.toFixed(3)}%) exceeds warning threshold (${SECURITY_THRESHOLDS.COMPLAINT_7DAY_WARNING}%)`,
+          `7-day complaint rate (${sevenDay.complaintRate.toFixed(3)}%, ${sevenDay.complaints} complaints) exceeds warning threshold (${SECURITY_THRESHOLDS.COMPLAINT_7DAY_WARNING}%, ${SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_WARNING} minimum)`,
         );
       }
     }
 
     // Check all-time rates (only if all-time volume is sufficient)
     if (hasMinimumVolumeAllTime) {
-      // Check all-time bounce rate
-      if (allTime.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_ALLTIME_CRITICAL) {
+      if (
+        allTime.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_ALLTIME_CRITICAL &&
+        allTime.bounces >= SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_CRITICAL
+      ) {
         violations.push(
-          `All-time bounce rate (${allTime.bounceRate.toFixed(2)}%) exceeds critical threshold (${SECURITY_THRESHOLDS.BOUNCE_ALLTIME_CRITICAL}%)`,
+          `All-time bounce rate (${allTime.bounceRate.toFixed(2)}%, ${allTime.bounces} bounces) exceeds critical threshold (${SECURITY_THRESHOLDS.BOUNCE_ALLTIME_CRITICAL}%, ${SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_CRITICAL} minimum)`,
         );
-      } else if (allTime.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_ALLTIME_WARNING) {
+      } else if (
+        allTime.bounceRate >= SECURITY_THRESHOLDS.BOUNCE_ALLTIME_WARNING &&
+        allTime.bounces >= SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_WARNING
+      ) {
         warnings.push(
-          `All-time bounce rate (${allTime.bounceRate.toFixed(2)}%) exceeds warning threshold (${SECURITY_THRESHOLDS.BOUNCE_ALLTIME_WARNING}%)`,
+          `All-time bounce rate (${allTime.bounceRate.toFixed(2)}%, ${allTime.bounces} bounces) exceeds warning threshold (${SECURITY_THRESHOLDS.BOUNCE_ALLTIME_WARNING}%, ${SECURITY_THRESHOLDS.MIN_BOUNCES_FOR_WARNING} minimum)`,
         );
       }
 
-      // Check all-time complaint rate
-      if (allTime.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_CRITICAL) {
+      if (
+        allTime.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_CRITICAL &&
+        allTime.complaints >= SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_CRITICAL
+      ) {
         violations.push(
-          `All-time complaint rate (${allTime.complaintRate.toFixed(3)}%) exceeds critical threshold (${SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_CRITICAL}%)`,
+          `All-time complaint rate (${allTime.complaintRate.toFixed(3)}%, ${allTime.complaints} complaints) exceeds critical threshold (${SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_CRITICAL}%, ${SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_CRITICAL} minimum)`,
         );
-      } else if (allTime.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_WARNING) {
+      } else if (
+        allTime.complaintRate >= SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_WARNING &&
+        allTime.complaints >= SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_WARNING
+      ) {
         warnings.push(
-          `All-time complaint rate (${allTime.complaintRate.toFixed(3)}%) exceeds warning threshold (${SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_WARNING}%)`,
+          `All-time complaint rate (${allTime.complaintRate.toFixed(3)}%, ${allTime.complaints} complaints) exceeds warning threshold (${SECURITY_THRESHOLDS.COMPLAINT_ALLTIME_WARNING}%, ${SECURITY_THRESHOLDS.MIN_COMPLAINTS_FOR_WARNING} minimum)`,
         );
       }
     }
@@ -333,8 +613,10 @@ export class SecurityService {
       projectId,
       isHealthy: violations.length === 0,
       shouldDisable: violations.length > 0,
+      twentyFourHour,
       sevenDay,
       allTime,
+      isNewProject,
       violations,
       warnings,
     };

apps/api/src/services/SegmentService.ts

@@ -1,5 +1,5 @@
 import {type Contact, Prisma, type Segment} from '@plunk/db';
-import type {FilterCondition, FilterGroup, PaginatedResponse, SegmentFilter} from '@plunk/types';
+import type {FilterCondition, FilterGroup, PaginatedResponse, SegmentFilter, SegmentType} from '@plunk/types';
 import {fromPrismaJson, toPrismaJson} from '@plunk/types';
 import signale from 'signale';
 
@@ -66,11 +66,33 @@ export class SegmentService {
     pageSize = 20,
   ): Promise<PaginatedResponse<Contact>> {
     const segment = await this.get(projectId, segmentId);
-    const condition = fromPrismaJson<FilterCondition>(segment.condition);
-
-    const where = this.buildWhereClause(projectId, condition);
     const skip = (page - 1) * pageSize;
 
+    if (segment.type === 'STATIC') {
+      // For static segments, query via SegmentMembership records
+      const [memberships, total] = await Promise.all([
+        prisma.segmentMembership.findMany({
+          where: {segmentId, exitedAt: null},
+          include: {contact: true},
+          skip,
+          take: pageSize,
+          orderBy: {enteredAt: 'desc'},
+        }),
+        prisma.segmentMembership.count({where: {segmentId, exitedAt: null}}),
+      ]);
+
+      return {
+        data: memberships.map(m => m.contact),
+        total,
+        page,
+        pageSize,
+        totalPages: Math.ceil(total / pageSize),
+      };
+    }
+
+    const condition = fromPrismaJson<FilterCondition>(segment.condition);
+    const where = this.buildWhereClause(projectId, condition);
+
     const [contacts, total] = await Promise.all([
       prisma.contact.findMany({
         where,
@@ -98,23 +120,35 @@ export class SegmentService {
     data: {
       name: string;
       description?: string;
-      condition: FilterCondition;
+      type?: SegmentType;
+      condition?: FilterCondition;
       trackMembership?: boolean;
     },
   ): Promise<Segment> {
-    // Validate condition
-    this.validateCondition(data.condition);
+    const segmentType = data.type ?? 'DYNAMIC';
+    let memberCount = 0;
+    let conditionJson: Prisma.InputJsonValue | typeof Prisma.JsonNull = Prisma.JsonNull;
 
-    // Compute initial member count
-    const where = this.buildWhereClause(projectId, data.condition);
-    const memberCount = await prisma.contact.count({where});
+    if (segmentType === 'DYNAMIC') {
+      if (!data.condition) {
+        throw new HttpException(400, 'Condition is required for DYNAMIC segments');
+      }
+      // Validate condition
+      this.validateCondition(data.condition);
+
+      // Compute initial member count
+      const where = this.buildWhereClause(projectId, data.condition);
+      memberCount = await prisma.contact.count({where});
+      conditionJson = toPrismaJson(data.condition);
+    }
 
     const segment = await prisma.segment.create({
       data: {
         projectId,
         name: data.name,
         description: data.description,
-        condition: toPrismaJson(data.condition),
+        type: segmentType,
+        condition: conditionJson,
         trackMembership: data.trackMembership ?? false,
         memberCount,
       },
@@ -145,12 +179,7 @@ export class SegmentService {
     },
   ): Promise<Segment> {
     // First verify segment exists and belongs to project
-    await this.get(projectId, segmentId);
-
-    // Validate condition if provided
-    if (data.condition) {
-      this.validateCondition(data.condition);
-    }
+    const existing = await this.get(projectId, segmentId);
 
     const updateData: Prisma.SegmentUpdateInput = {};
 
@@ -160,7 +189,9 @@ export class SegmentService {
     if (data.description !== undefined) {
       updateData.description = data.description;
     }
-    if (data.condition !== undefined) {
+    if (data.condition !== undefined && existing.type !== 'STATIC') {
+      // Validate condition if provided (only for DYNAMIC segments)
+      this.validateCondition(data.condition);
       updateData.condition = toPrismaJson(data.condition);
 
       // Recompute member count when condition changes
@@ -229,10 +260,16 @@ export class SegmentService {
    */
   public static async refreshMemberCount(projectId: string, segmentId: string): Promise<number> {
     const segment = await this.get(projectId, segmentId);
-    const condition = fromPrismaJson<FilterCondition>(segment.condition);
-    const where = this.buildWhereClause(projectId, condition);
 
-    const memberCount = await prisma.contact.count({where});
+    let memberCount: number;
+
+    if (segment.type === 'STATIC') {
+      memberCount = await prisma.segmentMembership.count({where: {segmentId, exitedAt: null}});
+    } else {
+      const condition = fromPrismaJson<FilterCondition>(segment.condition);
+      const where = this.buildWhereClause(projectId, condition);
+      memberCount = await prisma.contact.count({where});
+    }
 
     await prisma.segment.update({
       where: {id: segmentId},
@@ -249,7 +286,7 @@ export class SegmentService {
   public static async refreshAllMemberCounts(projectId: string): Promise<void> {
     const segments = await prisma.segment.findMany({
       where: {projectId},
-      select: {id: true, condition: true},
+      select: {id: true, type: true, condition: true},
     });
 
     // Process in batches to avoid overwhelming the database
@@ -260,9 +297,17 @@ export class SegmentService {
       await Promise.all(
         batch.map(async segment => {
           try {
-            const condition = fromPrismaJson<FilterCondition>(segment.condition);
-            const where = this.buildWhereClause(projectId, condition);
-            const memberCount = await prisma.contact.count({where});
+            let memberCount: number;
+
+            if (segment.type === 'STATIC') {
+              memberCount = await prisma.segmentMembership.count({
+                where: {segmentId: segment.id, exitedAt: null},
+              });
+            } else {
+              const condition = fromPrismaJson<FilterCondition>(segment.condition);
+              const where = this.buildWhereClause(projectId, condition);
+              memberCount = await prisma.contact.count({where});
+            }
 
             await prisma.segment.update({
               where: {id: segment.id},
@@ -276,6 +321,104 @@ export class SegmentService {
     }
   }
 
+  /**
+   * Add contacts to a static segment by email
+   */
+  public static async addContacts(
+    projectId: string,
+    segmentId: string,
+    emails: string[],
+  ): Promise<{added: number; notFound: string[]}> {
+    const segment = await this.get(projectId, segmentId);
+
+    if (segment.type !== 'STATIC') {
+      throw new HttpException(400, 'Can only add contacts to STATIC segments');
+    }
+
+    // Look up contacts by email (case-insensitive)
+    const contacts = await prisma.contact.findMany({
+      where: {
+        projectId,
+        email: {in: emails, mode: 'insensitive'},
+      },
+      select: {id: true, email: true},
+    });
+
+    const foundEmails = new Set(contacts.map(c => c.email.toLowerCase()));
+    const notFound = emails.filter(e => !foundEmails.has(e.toLowerCase()));
+
+    if (contacts.length > 0) {
+      // Check for existing memberships (to reactivate vs create new)
+      const existingMemberships = await prisma.segmentMembership.findMany({
+        where: {segmentId, contactId: {in: contacts.map(c => c.id)}},
+        select: {contactId: true},
+      });
+      const existingIds = new Set(existingMemberships.map(m => m.contactId));
+
+      const newContactIds = contacts.filter(c => !existingIds.has(c.id)).map(c => c.id);
+      const reEntryIds = contacts.filter(c => existingIds.has(c.id)).map(c => c.id);
+
+      if (newContactIds.length > 0) {
+        await prisma.segmentMembership.createMany({
+          data: newContactIds.map(contactId => ({segmentId, contactId, enteredAt: new Date()})),
+          skipDuplicates: true,
+        });
+      }
+
+      if (reEntryIds.length > 0) {
+        await prisma.segmentMembership.updateMany({
+          where: {segmentId, contactId: {in: reEntryIds}},
+          data: {exitedAt: null, enteredAt: new Date()},
+        });
+      }
+
+      // Update member count
+      const memberCount = await prisma.segmentMembership.count({where: {segmentId, exitedAt: null}});
+      await prisma.segment.update({where: {id: segmentId}, data: {memberCount}});
+    }
+
+    return {added: contacts.length, notFound};
+  }
+
+  /**
+   * Remove contacts from a static segment by email
+   */
+  public static async removeContacts(
+    projectId: string,
+    segmentId: string,
+    emails: string[],
+  ): Promise<{removed: number}> {
+    const segment = await this.get(projectId, segmentId);
+
+    if (segment.type !== 'STATIC') {
+      throw new HttpException(400, 'Can only remove contacts from STATIC segments');
+    }
+
+    // Look up contacts by email
+    const contacts = await prisma.contact.findMany({
+      where: {
+        projectId,
+        email: {in: emails, mode: 'insensitive'},
+      },
+      select: {id: true},
+    });
+
+    if (contacts.length > 0) {
+      const contactIds = contacts.map(c => c.id);
+
+      await prisma.segmentMembership.updateMany({
+        where: {segmentId, contactId: {in: contactIds}, exitedAt: null},
+        data: {exitedAt: new Date()},
+      });
+
+      // Update member count
+      const memberCount = await prisma.segmentMembership.count({where: {segmentId, exitedAt: null}});
+      await prisma.segment.update({where: {id: segmentId}, data: {memberCount}});
+    }
+
+    return {removed: contacts.length};
+  }
+
   /**
    * Compute or recompute segment membership for all contacts
    * Now uses cursor-based pagination for memory efficiency with large contact lists
@@ -290,6 +433,13 @@ export class SegmentService {
       throw new HttpException(400, 'Segment does not have membership tracking enabled');
     }
 
+    if (segment.type === 'STATIC') {
+      // For static segments, just update the count from memberships — no contact scanning
+      const total = await prisma.segmentMembership.count({where: {segmentId, exitedAt: null}});
+      await prisma.segment.update({where: {id: segmentId}, data: {memberCount: total}});
+      return {added: 0, removed: 0, total};
+    }
+
     const condition = fromPrismaJson<FilterCondition>(segment.condition);
     const where = this.buildWhereClause(projectId, condition);
 
@@ -584,8 +734,10 @@ export class SegmentService {
       'exists',
       'notExists',
       'within',
+      'olderThan',
       'triggered',
       'triggeredWithin',
+      'triggeredOlderThan',
       'notTriggered',
     ];
 
@@ -604,7 +756,9 @@ export class SegmentService {
       'greaterThanOrEqual',
       'lessThanOrEqual',
       'within',
+      'olderThan',
       'triggeredWithin',
+      'triggeredOlderThan',
     ];
 
     if (operatorsNeedingValue.includes(filter.operator) && filter.value === undefined) {
@@ -612,7 +766,7 @@ export class SegmentService {
     }
 
     // Validate unit for time-based operators
-    if (['within', 'triggeredWithin'].includes(filter.operator) && !filter.unit) {
+    if (['within', 'triggeredWithin', 'olderThan', 'triggeredOlderThan'].includes(filter.operator) && !filter.unit) {
       throw new HttpException(400, `"${filter.operator}" operator requires a unit (days, hours, or minutes)`);
     }
   }
@@ -729,6 +883,20 @@ export class SegmentService {
         // Use ISO string for lexicographic comparison in JSON
         return {data: {path, gte: since.toISOString() as Prisma.InputJsonValue}};
       }
+      case 'olderThan': {
+        // Note: Requires JSON date fields in ISO 8601 format for proper comparison
+        if (!unit) {
+          throw new HttpException(400, 'Unit is required for "olderThan" operator');
+        }
+
+        // Calculate the "before" date (X time units ago from now)
+        const now = new Date();
+        const milliseconds = this.getMilliseconds(value as number, unit);
+        const before = new Date(now.getTime() - milliseconds);
+
+        // Use ISO string for lexicographic comparison in JSON
+        return {data: {path, lt: before.toISOString() as Prisma.InputJsonValue}};
+      }
       default:
         throw new HttpException(400, `Unsupported operator for JSON field: ${operator}`);
     }
@@ -822,6 +990,18 @@ export class SegmentService {
 
         return {[field]: {gte: since}};
       }
+      case 'olderThan': {
+        // "olderThan X days/hours/minutes" means more than X time units ago
+        if (!unit) {
+          throw new HttpException(400, 'Unit is required for "olderThan" operator');
+        }
+
+        const now = new Date();
+        const milliseconds = this.getMilliseconds(value as number, unit);
+        const before = new Date(now.getTime() - milliseconds);
+
+        return {[field]: {lt: before}};
+      }
       default:
         throw new HttpException(400, `Unsupported operator for date field: ${operator}`);
     }
@@ -921,6 +1101,42 @@ export class SegmentService {
         };
       }
 
+      case 'triggeredOlderThan': {
+        // Contact triggered this event, but only more than X time ago (not recently)
+        // This means: has event AND all occurrences are before the cutoff
+        if (!unit) {
+          throw new HttpException(400, 'Unit is required for "triggeredOlderThan" operator');
+        }
+
+        const now = new Date();
+        const milliseconds = this.getMilliseconds(value as number, unit);
+        const before = new Date(now.getTime() - milliseconds);
+
+        return {
+          AND: [
+            // Must have triggered the event at some point
+            {
+              events: {
+                some: {
+                  name: eventName,
+                },
+              },
+            },
+            // But NOT within the recent timeframe
+            {
+              events: {
+                none: {
+                  name: eventName,
+                  createdAt: {
+                    gte: before,
+                  },
+                },
+              },
+            },
+          ],
+        };
+      }
+
       case 'notTriggered':
         // Contact has never triggered this event
         return {
@@ -995,6 +1211,42 @@ export class SegmentService {
         };
       }
 
+      case 'triggeredOlderThan': {
+        // Contact had this email activity, but only more than X time ago (not recently)
+        if (!unit) {
+          throw new HttpException(400, 'Unit is required for "triggeredOlderThan" operator');
+        }
+
+        const now = new Date();
+        const milliseconds = this.getMilliseconds(value as number, unit);
+        const before = new Date(now.getTime() - milliseconds);
+
+        return {
+          AND: [
+            // Must have the email activity at some point
+            {
+              emails: {
+                some: {
+                  [field]: {
+                    not: null,
+                  },
+                },
+              },
+            },
+            // But NOT within the recent timeframe
+            {
+              emails: {
+                none: {
+                  [field]: {
+                    gte: before,
+                  },
+                },
+              },
+            },
+          ],
+        };
+      }
+
       case 'notTriggered':
         // Contact has never had this email activity
         return {

apps/api/src/services/UserService.ts

@@ -10,6 +10,7 @@ import {Keys} from './keys.js';
  * Extract base domain from URL for cookie sharing across subdomains
  * e.g., "http://api.example.com" -> ".example.com"
  * e.g., "http://api.localhost" -> ".localhost"
+ * e.g., "http://app.plunk.local" -> ".plunk.local"
  */
 function getCookieDomain(): string | undefined {
   if (NODE_ENV === 'development') {
@@ -28,10 +29,14 @@ function getCookieDomain(): string | undefined {
     // Extract base domain (last two parts for most domains, or .localhost)
     const parts = hostname.split('.');
     if (parts.length >= 2) {
-      // For *.localhost or *.local, use the full hostname with leading dot
-      if (hostname.endsWith('.localhost') || hostname.endsWith('.local')) {
+      // For *.localhost, use .localhost (reserved TLD)
+      if (hostname.endsWith('.localhost')) {
         return '.localhost';
       }
+      // For *.local (mDNS TLD), use the actual base domain
+      if (hostname.endsWith('.local')) {
+        return `.${parts.slice(-2).join('.')}`;
+      }
       // For other domains, use the last two parts (e.g., .example.com)
       return `.${parts.slice(-2).join('.')}`;
     }

apps/api/src/services/WorkflowExecutionService.ts

@@ -10,6 +10,8 @@ import type {
 import {StepExecutionStatus, WorkflowExecutionStatus} from '@plunk/db';
 import {toPrismaJson} from '@plunk/types';
 import {renderTemplate, WorkflowStepConfigSchemas} from '@plunk/shared';
+import dns from 'node:dns/promises';
+import net from 'node:net';
 import signale from 'signale';
 
 import {prisma} from '../database/prisma.js';
@@ -519,18 +521,22 @@ export class WorkflowExecutionService {
   }
 
   /**
-   * SEND_EMAIL step - Send an email to the contact
+   * SEND_EMAIL step - Send an email to the contact or a custom recipient
    */
   private static async executeSendEmail(
     step: WorkflowStepWithTemplate,
     execution: WorkflowExecutionWithRelations,
     stepExecution: WorkflowStepExecution,
-    _config: StepConfig,
+    config: StepConfig,
   ): Promise<StepResult> {
     if (!step.template) {
       throw new Error('No template configured for SEND_EMAIL step');
     }
 
+    // Parse and validate step config using schema
+    const stepConfig = WorkflowStepConfigSchemas.sendEmail.parse(config);
+    const recipientConfig = stepConfig.recipient || {type: 'CONTACT' as const};
+
     // Get contact data for variable substitution
     const contact = execution.contact;
     const contactData =
@@ -558,10 +564,14 @@ export class WorkflowExecutionService {
     const renderedSubject = this.renderTemplate(step.template.subject, variables);
     const renderedBody = this.renderTemplate(step.template.body, variables);
 
+    // Determine recipient email
+    // Schema validation ensures customEmail exists when type is CUSTOM
+    const recipientEmail = recipientConfig.type === 'CUSTOM' ? recipientConfig.customEmail! : contact.email;
+
     // Send email via EmailService
     const email = await EmailService.sendWorkflowEmail({
       projectId: execution.workflow.projectId,
-      contactId: contact.id,
+      contactId: contact.id, // Keep original contact for tracking
       workflowExecutionId: execution.id,
       workflowStepExecutionId: stepExecution.id, // Use stepExecution.id, not step.id
       templateId: step.template.id,
@@ -570,11 +580,15 @@ export class WorkflowExecutionService {
       from: step.template.from,
       fromName: step.template.fromName || undefined,
       replyTo: step.template.replyTo || undefined,
+      // Pass custom recipient email if specified
+      recipientEmail: recipientConfig.type === 'CUSTOM' ? recipientConfig.customEmail : undefined,
     });
 
     return {
       emailId: email.id,
       sentAt: email.createdAt,
+      recipientType: recipientConfig.type,
+      recipientEmail,
     };
   }
 
@@ -706,7 +720,7 @@ export class WorkflowExecutionService {
     _stepExecution: WorkflowStepExecution,
     config: StepConfig,
   ): Promise<StepResult> {
-    const {field, operator, value} = WorkflowStepConfigSchemas.condition.parse(config);
+    const parsed = WorkflowStepConfigSchemas.condition.parse(config);
 
     // Get the value to evaluate
     const contact = execution.contact;
@@ -722,7 +736,7 @@ export class WorkflowExecutionService {
     // - data.firstName, data.lastName, etc.
     // - workflow.* (execution context - alias for event data)
     // - event.* (event data that triggered the workflow)
-    const actualValue = this.resolveField(field, {
+    const fieldData = {
       contact: {
         email: contact.email,
         subscribed: contact.subscribed,
@@ -730,16 +744,47 @@ export class WorkflowExecutionService {
       data: contactData,
       workflow: context,
       event: context, // Alias for easier access to event data
-    });
+    };
 
-    // Evaluate the condition
+    // Multi-branch mode (switch/case)
+    if ('mode' in parsed && parsed.mode === 'multi') {
+      const actualValue = this.resolveField(parsed.field, fieldData);
+
+      for (const branch of parsed.branches) {
+        if (this.evaluateCondition(actualValue, branch.operator, branch.value)) {
+          return {
+            field: parsed.field,
+            mode: 'multi',
+            matchedBranch: branch.name,
+            actualValue,
+            branch: branch.id,
+          };
+        }
+      }
+
+      // No branch matched — use default
+      return {
+        field: parsed.field,
+        mode: 'multi',
+        matchedBranch: 'default',
+        actualValue,
+        branch: 'default',
+      };
+    }
+
+    // Legacy binary mode (if/else)
+    const field = parsed.field;
+    const operator = 'operator' in parsed ? parsed.operator : 'equals';
+    const value = 'value' in parsed ? parsed.value : undefined;
+    const actualValue = this.resolveField(field, fieldData);
     const result = this.evaluateCondition(actualValue, operator, value);
 
     return {
       field,
       operator,
       expectedValue: value,
-      actualValue,
+      // Convert undefined to null so it's preserved in JSON (JSON.stringify removes undefined)
+      actualValue: actualValue === undefined ? null : actualValue,
       result,
       branch: result ? 'yes' : 'no',
     };
@@ -779,6 +824,89 @@ export class WorkflowExecutionService {
     };
   }
 
+  /**
+   * Validates that an IP address is not in a private/reserved range to prevent SSRF.
+   * Blocks loopback, private, link-local, and cloud metadata ranges.
+   */
+  private static isPrivateIp(ip: string): boolean {
+    // Normalize IPv6-mapped IPv4 (e.g. ::ffff:192.168.1.1)
+    const addr = ip.startsWith('::ffff:') ? ip.slice(7) : ip;
+
+    if (net.isIPv4(addr)) {
+      const parts = addr.split('.').map(Number);
+      const a = parts[0] ?? -1;
+      const b = parts[1] ?? -1;
+
+      return (
+        a === 127 || // 127.0.0.0/8 loopback
+        a === 10 || // 10.0.0.0/8 private
+        (a === 172 && b >= 16 && b <= 31) || // 172.16.0.0/12 private
+        (a === 192 && b === 168) || // 192.168.0.0/16 private
+        (a === 169 && b === 254) || // 169.254.0.0/16 link-local / cloud metadata
+        (a === 100 && b >= 64 && b <= 127) || // 100.64.0.0/10 shared address space
+        a === 0 || // 0.0.0.0/8
+        a >= 224 // 224.0.0.0+ multicast and reserved
+      );
+    }
+
+    if (net.isIPv6(addr)) {
+      const normalized = addr.toLowerCase();
+      return (
+        normalized === '::1' || // loopback
+        normalized.startsWith('fe80:') || // link-local
+        normalized.startsWith('fc') || // unique local
+        normalized.startsWith('fd') || // unique local
+        normalized.startsWith('ff') // multicast
+      );
+    }
+
+    // Unknown format — reject to be safe
+    return true;
+  }
+
+  /**
+   * SSRF-safe fetch. Resolves the hostname, validates the IP is not internal,
+   * and manually follows redirects re-validating each hop.
+   */
+  private static async safeFetch(url: string, options: RequestInit): Promise<Response> {
+    const MAX_REDIRECTS = 5;
+    let currentUrl = url;
+
+    for (let redirects = 0; redirects <= MAX_REDIRECTS; redirects++) {
+      const parsed = new URL(currentUrl);
+
+      if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') {
+        throw new Error(`Webhook URL scheme not allowed: ${parsed.protocol}`);
+      }
+
+      const {address} = await dns.lookup(parsed.hostname);
+
+      if (WorkflowExecutionService.isPrivateIp(address)) {
+        throw new Error(`Webhook URL resolves to a private/internal IP address: ${address}`);
+      }
+
+      const response = await fetch(currentUrl, {
+        ...options,
+        redirect: 'manual',
+        signal: AbortSignal.timeout(10_000),
+      });
+
+      if (response.status >= 300 && response.status < 400) {
+        const location = response.headers.get('location');
+        if (!location) {
+          throw new Error('Redirect with no Location header');
+        }
+        // Resolve relative redirects against the current URL
+        currentUrl = new URL(location, currentUrl).toString();
+        continue;
+      }
+
+      return response;
+    }
+
+    throw new Error('Too many redirects');
+  }
+
   /**
    * WEBHOOK step - Call an external webhook
    */
@@ -816,7 +944,7 @@ export class WorkflowExecutionService {
     };
 
     // Make HTTP request
-    const response = await fetch(url, {
+    const response = await WorkflowExecutionService.safeFetch(url, {
       method,
       headers: {
         'Content-Type': 'application/json',
@@ -975,7 +1103,15 @@ export class WorkflowExecutionService {
    * Helper: Resolve field value from object using dot notation
    */
   private static resolveField(field: string, data: Record<string, unknown>): unknown {
-    const parts = field.split('.');
+    // Handle legacy "contact.data.X" format by converting to "data.X"
+    // The UI historically showed examples like "contact.data.plan" but the field structure
+    // has "data" as a top-level key, not nested under "contact"
+    let normalizedField = field;
+    if (field.startsWith('contact.data.')) {
+      normalizedField = field.substring(8); // Remove "contact." prefix, leaving "data.X"
+    }
+
+    const parts = normalizedField.split('.');
     let value: unknown = data;
 
     for (const part of parts) {

apps/api/src/services/WorkflowService.ts

@@ -194,25 +194,57 @@ export class WorkflowService {
       }
     }
 
-    const updateData: Prisma.WorkflowUpdateInput = {};
+    // Use transaction to update workflow and TRIGGER step atomically
+    const updated = await prisma.$transaction(async tx => {
+      const updateData: Prisma.WorkflowUpdateInput = {};
 
-    if (data.name !== undefined) updateData.name = data.name;
-    if (data.description !== undefined) updateData.description = data.description;
-    if (data.triggerType !== undefined) updateData.triggerType = data.triggerType;
-    if (data.triggerConfig !== undefined) {
-      updateData.triggerConfig = data.triggerConfig === null ? Prisma.JsonNull : data.triggerConfig;
-    }
-    if (data.enabled !== undefined) updateData.enabled = data.enabled;
-    if (data.allowReentry !== undefined) updateData.allowReentry = data.allowReentry;
+      if (data.name !== undefined) updateData.name = data.name;
+      if (data.description !== undefined) updateData.description = data.description;
+      if (data.triggerType !== undefined) updateData.triggerType = data.triggerType;
+      if (data.triggerConfig !== undefined) {
+        updateData.triggerConfig = data.triggerConfig === null ? Prisma.JsonNull : data.triggerConfig;
+      }
+      if (data.enabled !== undefined) updateData.enabled = data.enabled;
+      if (data.allowReentry !== undefined) updateData.allowReentry = data.allowReentry;
 
-    const updated = await prisma.workflow.update({
-      where: {id: workflowId},
-      data: updateData,
-      include: {
-        project: {
-          select: {name: true},
+      const updatedWorkflow = await tx.workflow.update({
+        where: {id: workflowId},
+        data: updateData,
+        include: {
+          project: {
+            select: {name: true},
+          },
         },
-      },
+      });
+
+      // If triggerConfig changed and it's an EVENT trigger, update the TRIGGER step
+      if (data.triggerConfig !== undefined && updatedWorkflow.triggerType === 'EVENT') {
+        const newTriggerConfig = data.triggerConfig as {eventName?: string} | null;
+        const eventName = newTriggerConfig?.eventName;
+
+        if (eventName) {
+          // Find the TRIGGER step
+          const triggerStep = await tx.workflowStep.findFirst({
+            where: {
+              workflowId: workflowId,
+              type: 'TRIGGER',
+            },
+          });
+
+          if (triggerStep) {
+            // Update TRIGGER step config and name to match
+            await tx.workflowStep.update({
+              where: {id: triggerStep.id},
+              data: {
+                name: `Trigger: ${eventName}`,
+                config: {eventName},
+              },
+            });
+          }
+        }
+      }
+
+      return updatedWorkflow;
     });
 
     // Invalidate workflow cache if enabled status changed or workflow is enabled
@@ -220,6 +252,11 @@ export class WorkflowService {
       await EventService.invalidateWorkflowCache(projectId);
     }
 
+    // Also invalidate cache if triggerConfig changed on an enabled workflow
+    if (data.triggerConfig !== undefined && updated.enabled) {
+      await EventService.invalidateWorkflowCache(projectId);
+    }
+
     // Send notification if enabled status changed
     if (data.enabled !== undefined && data.enabled !== workflow.enabled) {
       if (data.enabled) {

apps/api/src/services/__tests__/EmailService.test.ts

@@ -1,11 +1,32 @@
-import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {EmailSourceType, EmailStatus} from '@plunk/db';
+import {beforeEach, describe, expect, it, vi, type Mock} from 'vitest';
+import {EmailSourceType, EmailStatus, TemplateType} from '@plunk/db';
 import {ActionSchemas} from '@plunk/shared';
 import {EmailService} from '../EmailService';
 import {sendRawEmail} from '../SESService';
 import {factories, getPrismaClient} from '../../../../../test/helpers';
 
-// Mock SES service
+// Mock AWS SDK globally (used by real SESService calls in MIME tests)
+vi.mock('@aws-sdk/client-ses', () => {
+  const SESMock = vi.fn();
+  SESMock.prototype.sendRawEmail = vi.fn().mockResolvedValue({MessageId: 'test-message-id'});
+  return {SES: SESMock};
+});
+
+// Mock constants to provide AWS credentials for SESService, preserving other exports
+vi.mock('../../app/constants.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../app/constants.js')>();
+  return {
+    ...actual,
+    AWS_SES_ACCESS_KEY_ID: 'test-key-id',
+    AWS_SES_REGION: 'us-east-1',
+    AWS_SES_SECRET_ACCESS_KEY: 'test-secret',
+    SES_CONFIGURATION_SET: 'test-config-set',
+    SES_CONFIGURATION_SET_NO_TRACKING: 'test-no-tracking-set',
+    TRACKING_TOGGLE_ENABLED: true,
+  };
+});
+
+// Mock SES service (default behavior for most tests)
 vi.mock('../SESService', () => ({
   sendRawEmail: vi.fn(),
 }));
@@ -166,6 +187,84 @@ describe('EmailService', () => {
       });
     });
 
+    describe('Headless Email Behaviour', () => {
+      it('should NOT send headless workflow emails to unsubscribed contacts', async () => {
+        const unsubscribedContact = await factories.createContact({
+          projectId,
+          subscribed: false,
+        });
+
+        const headlessTemplate = await factories.createTemplate({
+          projectId,
+          type: 'HEADLESS',
+        });
+
+        const workflow = await factories.createWorkflow({projectId});
+        const execution = await factories.createWorkflowExecution(workflow.id, unsubscribedContact.id);
+
+        const email = await EmailService.sendWorkflowEmail({
+          projectId,
+          contactId: unsubscribedContact.id,
+          templateId: headlessTemplate.id,
+          subject: 'Newsletter',
+          body: 'Content',
+          from: '[email protected]',
+          workflowExecutionId: execution.id,
+        });
+
+        expect(email.status).toBe(EmailStatus.FAILED);
+        expect(email.error).toMatch(/unsubscribed/i);
+      });
+
+      it('should keep CAMPAIGN sourceType when campaign type is HEADLESS (no template)', async () => {
+        const contact = await factories.createContact({projectId, subscribed: true});
+
+        // Campaign typed HEADLESS directly — no template involved (inline body)
+        const campaign = await factories.createCampaign({
+          projectId,
+          type: TemplateType.HEADLESS,
+          body: 'Content with <a href="https://example.com/unsubscribe">unsubscribe</a>',
+        });
+
+        const email = await EmailService.sendCampaignEmail({
+          projectId,
+          contactId: contact.id,
+          campaignId: campaign.id,
+          subject: 'Newsletter',
+          body: campaign.body,
+          from: '[email protected]',
+        });
+
+        expect(email.sourceType).toBe(EmailSourceType.CAMPAIGN);
+        expect(email.status).toBe(EmailStatus.PENDING);
+      });
+
+      it('should keep CAMPAIGN sourceType when campaign uses headless template', async () => {
+        const contact = await factories.createContact({projectId, subscribed: true});
+
+        const headlessTemplate = await factories.createTemplate({
+          projectId,
+          type: 'HEADLESS',
+        });
+
+        const campaign = await factories.createCampaign({projectId});
+
+        const email = await EmailService.sendCampaignEmail({
+          projectId,
+          contactId: contact.id,
+          campaignId: campaign.id,
+          templateId: headlessTemplate.id,
+          subject: 'Newsletter',
+          body: 'Content with <a href="https://example.com/unsubscribe">unsubscribe</a>',
+          from: '[email protected]',
+        });
+
+        // HEADLESS is not transactional — sourceType stays CAMPAIGN
+        expect(email.sourceType).toBe(EmailSourceType.CAMPAIGN);
+        expect(email.status).toBe(EmailStatus.PENDING);
+      });
+    });
+
     describe('Template Type Determines Email Type', () => {
       it('should use TRANSACTIONAL sourceType when campaign uses transactional template', async () => {
         const contact = await factories.createContact({
@@ -801,5 +900,204 @@ describe('EmailService', () => {
         expect(result.success).toBe(true);
       }
     });
+
+    it('should accept inline attachment with contentId', () => {
+      const result = ActionSchemas.send.safeParse({
+        to: '[email protected]',
+        from: '[email protected]',
+        subject: 'Inline Image',
+        body: '<img src="cid:logo" />',
+        attachments: [
+          {
+            filename: 'logo.png',
+            content: Buffer.from('image').toString('base64'),
+            contentType: 'image/png',
+            contentId: 'logo',
+            disposition: 'inline',
+          },
+        ],
+      });
+
+      expect(result.success).toBe(true);
+      if (result.success) {
+        const attachment = result.data.attachments![0];
+        expect(attachment.contentId).toBe('logo');
+        expect(attachment.disposition).toBe('inline');
+      }
+    });
+
+    it('should reject contentId exceeding 255 chars', () => {
+      const result = ActionSchemas.send.safeParse({
+        to: '[email protected]',
+        subject: 'Test',
+        body: 'Test',
+        attachments: [
+          {
+            filename: 'image.png',
+            content: Buffer.from('content').toString('base64'),
+            contentType: 'image/png',
+            contentId: 'a'.repeat(256),
+            disposition: 'inline',
+          },
+        ],
+      });
+
+      expect(result.success).toBe(false);
+    });
+
+    it('should reject invalid disposition', () => {
+      const result = ActionSchemas.send.safeParse({
+        to: '[email protected]',
+        subject: 'Test',
+        body: 'Test',
+        attachments: [
+          {
+            filename: 'image.png',
+            content: Buffer.from('content').toString('base64'),
+            contentType: 'image/png',
+            disposition: 'invalid-disposition',
+          },
+        ],
+      });
+
+      expect(result.success).toBe(false);
+    });
+
+  });
+});
+
+// ========================================
+// SES MIME BOUNDARY STRUCTURE
+// ========================================
+// These tests verify the raw MIME assembly logic inside sendRawEmail.
+// They need the REAL sendRawEmail (not the mock above), so we mock
+// at the AWS SDK level instead.
+
+describe('SES MIME Boundary Structure', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should correctly structure MIME boundaries for mixed content (attachments)', async () => {
+    const {sendRawEmail: realSendRawEmail, ses} = await vi.importActual<typeof import('../SESService')>('../SESService');
+
+    const params = {
+      from: {name: 'Sender', email: '[email protected]'},
+      to: ['[email protected]'],
+      content: {subject: 'Test Subject', html: '<p>Hello world</p>'},
+      attachments: [
+        {
+          filename: 'test.txt',
+          content: 'SGVsbG8=',
+          contentType: 'text/plain',
+          disposition: 'attachment' as const,
+        },
+      ],
+    };
+
+    await realSendRawEmail(params);
+
+    expect(ses.sendRawEmail).toHaveBeenCalled();
+    const callArgs = (ses.sendRawEmail as Mock).mock.calls[0][0];
+    const rawMessage = new TextDecoder().decode(callArgs.RawMessage.Data);
+
+    // Verify boundary hierarchy: Mixed -> Alternative
+    expect(rawMessage).toMatch(/^From:.*Content-Type: multipart\/mixed; boundary="([^"]+)"/s);
+    expect(rawMessage).toMatch(/Content-Type: multipart\/alternative; boundary="([^"]+)"/);
+
+    const mixedBoundaryMatch = rawMessage.match(/boundary="([^"]+)"/);
+    const mixedBoundary = mixedBoundaryMatch ? mixedBoundaryMatch[1] : '';
+
+    expect(rawMessage).toContain(`--${mixedBoundary}\nContent-Type: multipart/alternative`);
+    expect(rawMessage).toContain(`--${mixedBoundary}--`);
+  });
+
+  it('should correctly structure MIME boundaries for related content (inline images)', async () => {
+    const {sendRawEmail: realSendRawEmail, ses} = await vi.importActual<typeof import('../SESService')>('../SESService');
+
+    const params = {
+      from: {name: 'Sender', email: '[email protected]'},
+      to: ['[email protected]'],
+      content: {subject: 'Test Subject', html: '<p>Hello world <img src="cid:image1"></p>'},
+      attachments: [
+        {
+          filename: 'image.png',
+          content:
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+          contentType: 'image/png',
+          contentId: 'image1',
+          disposition: 'inline' as const,
+        },
+      ],
+    };
+
+    await realSendRawEmail(params);
+
+    const callArgs = (ses.sendRawEmail as Mock).mock.calls[0][0];
+    const rawMessage = new TextDecoder().decode(callArgs.RawMessage.Data);
+
+    // Verify boundary hierarchy: Related -> Alternative
+    expect(rawMessage).toMatch(/^From:.*Content-Type: multipart\/related; boundary="([^"]+)"/s);
+
+    const relatedBoundaryMatch = rawMessage.match(/boundary="([^"]+)"/);
+    const relatedBoundary = relatedBoundaryMatch ? relatedBoundaryMatch[1] : '';
+
+    expect(rawMessage).toContain(`--${relatedBoundary}\nContent-Type: multipart/alternative`);
+    expect(rawMessage).toContain(`Content-Disposition: inline; filename="image.png"`);
+    expect(rawMessage).toContain(`--${relatedBoundary}--`);
+  });
+
+  it('should correctly nest mixed > related > alternative boundaries', async () => {
+    const {sendRawEmail: realSendRawEmail, ses} = await vi.importActual<typeof import('../SESService')>('../SESService');
+
+    const params = {
+      from: {name: 'Sender', email: '[email protected]'},
+      to: ['[email protected]'],
+      content: {subject: 'Test Subject', html: '<p>Hello world <img src="cid:image1"></p>'},
+      attachments: [
+        {
+          filename: 'test.txt',
+          content: 'SGVsbG8=',
+          contentType: 'text/plain',
+          disposition: 'attachment' as const,
+        },
+        {
+          filename: 'image.png',
+          content:
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+          contentType: 'image/png',
+          contentId: 'image1',
+          disposition: 'inline' as const,
+        },
+      ],
+    };
+
+    await realSendRawEmail(params);
+
+    const callArgs = (ses.sendRawEmail as Mock).mock.calls[0][0];
+    const rawMessage = new TextDecoder().decode(callArgs.RawMessage.Data);
+
+    // Root should be mixed
+    expect(rawMessage).toMatch(/^From:.*Content-Type: multipart\/mixed; boundary="([^"]+)"/s);
+
+    const mixedMatch = rawMessage.match(/Content-Type: multipart\/mixed; boundary="([^"]+)"/);
+    const mixedBoundary = mixedMatch ? mixedMatch[1] : 'NOT_FOUND_MIXED';
+
+    // Within mixed, we should find related
+    expect(rawMessage).toContain(`--${mixedBoundary}\nContent-Type: multipart/related`);
+
+    const relatedMatch = rawMessage.match(/Content-Type: multipart\/related; boundary="([^"]+)"/);
+    const relatedBoundary = relatedMatch ? relatedMatch[1] : 'NOT_FOUND_RELATED';
+
+    // Within related, we should find alternative
+    expect(rawMessage).toContain(`--${relatedBoundary}\nContent-Type: multipart/alternative`);
+
+    const altMatch = rawMessage.match(/Content-Type: multipart\/alternative; boundary="([^"]+)"/);
+    const altBoundary = altMatch ? altMatch[1] : 'NOT_FOUND_ALT';
+
+    // Verify all closing boundaries exist
+    expect(rawMessage).toContain(`--${altBoundary}--`);
+    expect(rawMessage).toContain(`--${relatedBoundary}--`);
+    expect(rawMessage).toContain(`--${mixedBoundary}--`);
   });
 });

apps/api/src/services/__tests__/SecurityService.test.ts

@@ -0,0 +1,274 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {EmailStatus, EmailSourceType} from '@plunk/db';
+import {SecurityService} from '../SecurityService';
+import {factories, getPrismaClient} from '../../../../../test/helpers';
+import {redis} from '../../database/redis';
+
+vi.mock('../../app/constants.js', async () => {
+  const actual = await vi.importActual('../../app/constants.js');
+  return {
+    ...actual,
+    AUTO_PROJECT_DISABLE: true,
+  };
+});
+
+// Mock NtfyService to prevent actual notifications
+vi.mock('../NtfyService.js', () => ({
+  NtfyService: {
+    notifySecurityWarning: vi.fn(),
+    notifyProjectDisabledForSecurity: vi.fn(),
+  },
+}));
+
+// Mock email sending for project disabled notifications
+vi.mock('@plunk/email', () => ({
+  ProjectDisabledEmail: vi.fn(),
+  sendPlatformEmail: vi.fn(),
+}));
+
+describe('SecurityService', () => {
+  let projectId: string;
+  let contactId: string;
+  const prisma = getPrismaClient();
+
+  beforeEach(async () => {
+    const {project} = await factories.createUserWithProject();
+    projectId = project.id;
+
+    const contact = await factories.createContact({projectId});
+    contactId = contact.id;
+
+    // Clear redis cache
+    await redis.flushdb();
+  });
+
+  /**
+   * Helper to create N emails, some of which are bounced
+   */
+  async function createEmails(count: number, opts?: {bouncedCount?: number; complainedCount?: number; createdAt?: Date}) {
+    const bouncedCount = opts?.bouncedCount ?? 0;
+    const complainedCount = opts?.complainedCount ?? 0;
+    const createdAt = opts?.createdAt ?? new Date();
+
+    const emails = [];
+    for (let i = 0; i < count; i++) {
+      emails.push(
+        prisma.email.create({
+          data: {
+            projectId,
+            contactId,
+            subject: `Test ${i}`,
+            body: '<p>test</p>',
+            from: '[email protected]',
+            status: EmailStatus.SENT,
+            sourceType: EmailSourceType.TRANSACTIONAL,
+            sentAt: createdAt,
+            createdAt,
+            bouncedAt: i < bouncedCount ? createdAt : null,
+            complainedAt: i >= bouncedCount && i < bouncedCount + complainedCount ? createdAt : null,
+          },
+        }),
+      );
+    }
+    await Promise.all(emails);
+  }
+
+  describe('Rate-based checks (existing behavior)', () => {
+    it('should report healthy when bounce rate is below warning', async () => {
+      // 200 emails, 5 bounces = 2.5% (below 5% warning)
+      await createEmails(200, {bouncedCount: 5});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isHealthy).toBe(true);
+      expect(status.shouldDisable).toBe(false);
+      expect(status.violations).toHaveLength(0);
+      expect(status.warnings).toHaveLength(0);
+    });
+
+    it('should trigger warning when 7-day bounce rate exceeds warning threshold', async () => {
+      // 100 emails, 6 bounces = 6% (above 5% warning, below 10% critical)
+      await createEmails(100, {bouncedCount: 6});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isHealthy).toBe(true);
+      expect(status.warnings.length).toBeGreaterThan(0);
+    });
+
+    it('should trigger violation when 7-day bounce rate exceeds critical threshold', async () => {
+      // 100 emails, 11 bounces = 11% (above 10% critical)
+      await createEmails(100, {bouncedCount: 11});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isHealthy).toBe(false);
+      expect(status.shouldDisable).toBe(true);
+      expect(status.violations.length).toBeGreaterThan(0);
+    });
+
+    it('should not enforce rate checks when below minimum volume', async () => {
+      // 50 emails (below 100 minimum), 10 bounces = 20% (would exceed critical)
+      await createEmails(50, {bouncedCount: 10});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      // Rate-based check doesn't trigger, but absolute count ceiling might
+      // With 10 bounces in 24h, this is below the 50-bounce ceiling for established projects
+      expect(status.violations).toHaveLength(0);
+    });
+  });
+
+  describe('Absolute count ceilings (established projects)', () => {
+    // Age the project past the new-project window so standard ceilings apply
+    beforeEach(async () => {
+      const oldDate = new Date(Date.now() - 31 * 24 * 60 * 60 * 1000);
+      await prisma.project.update({
+        where: {id: projectId},
+        data: {createdAt: oldDate},
+      });
+    });
+
+    it('should trigger critical when 24-hour bounce count exceeds ceiling', async () => {
+      // 20,000 emails, 101 bounces = 0.5% rate (well below rate threshold)
+      // But 101 bounces > 100 (24h critical ceiling for established projects)
+      await createEmails(20000, {bouncedCount: 101});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.shouldDisable).toBe(true);
+      expect(status.violations.some(v => v.includes('24-hour bounce count'))).toBe(true);
+    });
+
+    it('should trigger warning when 24-hour bounce count exceeds warning ceiling', async () => {
+      // 10,000 emails, 51 bounces = 0.51% (below rate threshold)
+      // But 51 > 50 (24h warning ceiling), below 100 critical
+      await createEmails(10000, {bouncedCount: 51});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isHealthy).toBe(true); // warnings don't make it unhealthy
+      expect(status.warnings.some(w => w.includes('24-hour bounce count'))).toBe(true);
+    });
+
+    it('should trigger critical when 24-hour complaint count exceeds ceiling', async () => {
+      // 20,000 emails, 26 complaints = 0.13% (below complaint rate critical of 0.15%)
+      // But 26 > 25 (24h complaint critical ceiling)
+      await createEmails(20000, {complainedCount: 26});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.shouldDisable).toBe(true);
+      expect(status.violations.some(v => v.includes('24-hour complaint count'))).toBe(true);
+    });
+
+    it('should NOT trigger ceiling when bounce count is below ceiling', async () => {
+      // 20,000 emails, 40 bounces = below 50 warning ceiling for established projects
+      await createEmails(20000, {bouncedCount: 40});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isHealthy).toBe(true);
+      expect(status.violations).toHaveLength(0);
+      expect(status.warnings).toHaveLength(0);
+    });
+  });
+
+  describe('New project stricter thresholds', () => {
+    it('should apply stricter ceilings for projects under 30 days old', async () => {
+      // Default project is created "now", so it's a new project
+      // 10,000 emails, 26 bounces (above 25 new project 24h critical ceiling)
+      await createEmails(10000, {bouncedCount: 26});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isNewProject).toBe(true);
+      expect(status.shouldDisable).toBe(true);
+      expect(status.violations.some(v => v.includes('new project'))).toBe(true);
+    });
+
+    it('should apply standard ceilings for projects over 30 days old', async () => {
+      // Age the project to 31 days
+      const oldDate = new Date(Date.now() - 31 * 24 * 60 * 60 * 1000);
+      await prisma.project.update({
+        where: {id: projectId},
+        data: {createdAt: oldDate},
+      });
+
+      // 10,000 emails, 26 bounces (above 25 new project ceiling, below 50 standard warning ceiling)
+      await createEmails(10000, {bouncedCount: 26});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isNewProject).toBe(false);
+      // 26 is below the 50-bounce 24h warning ceiling for established projects
+      expect(status.warnings.some(w => w.includes('24-hour bounce count'))).toBe(false);
+      // And below the 100-bounce 24h critical ceiling
+      expect(status.violations.some(v => v.includes('24-hour bounce count'))).toBe(false);
+    });
+
+    it('should catch new project blasting emails with delayed bounces', async () => {
+      // Simulate the spammer scenario: new project sends 20K emails,
+      // only 30 bounces have come back so far (rate is tiny: 0.15%)
+      await createEmails(20000, {bouncedCount: 30});
+
+      const status = await SecurityService.getSecurityStatus(projectId);
+      expect(status.isNewProject).toBe(true);
+      expect(status.shouldDisable).toBe(true);
+      // 30 > 25 new project 24h critical ceiling
+      expect(status.violations.some(v => v.includes('24-hour bounce count'))).toBe(true);
+    });
+  });
+
+  describe('checkAndEnforceSecurityLimits', () => {
+    it('should disable project when critical thresholds are exceeded', async () => {
+      // Create enough bounces to trigger critical
+      await createEmails(20000, {bouncedCount: 101});
+
+      await SecurityService.checkAndEnforceSecurityLimits(projectId);
+
+      const project = await prisma.project.findUnique({
+        where: {id: projectId},
+        select: {disabled: true},
+      });
+      expect(project?.disabled).toBe(true);
+    });
+
+    it('should NOT disable project when only warnings exist', async () => {
+      // 10,000 emails, 51 bounces (above warning but below critical for established project)
+      const oldDate = new Date(Date.now() - 31 * 24 * 60 * 60 * 1000);
+      await prisma.project.update({
+        where: {id: projectId},
+        data: {createdAt: oldDate},
+      });
+      await createEmails(10000, {bouncedCount: 51});
+
+      await SecurityService.checkAndEnforceSecurityLimits(projectId);
+
+      const project = await prisma.project.findUnique({
+        where: {id: projectId},
+        select: {disabled: true},
+      });
+      expect(project?.disabled).toBe(false);
+    });
+  });
+
+  describe('getProjectSecurityMetrics (client-facing)', () => {
+    it('should NOT expose internal thresholds or detailed violation messages', async () => {
+      // Create a violation scenario
+      await createEmails(100, {bouncedCount: 15});
+
+      const metrics = await SecurityService.getProjectSecurityMetrics(projectId);
+
+      // Should have levels, not thresholds
+      expect(metrics.levels).toBeDefined();
+      expect((metrics as Record<string, unknown>).thresholds).toBeUndefined();
+
+      // Violation messages should be generic
+      if (metrics.status.violations.length > 0) {
+        for (const v of metrics.status.violations) {
+          expect(v).toBe('Security threshold exceeded');
+          expect(v).not.toMatch(/\d+%/); // No percentages
+          expect(v).not.toMatch(/\d+ minimum/); // No absolute numbers
+        }
+      }
+
+      // 24-hour data should be zeroed out
+      expect(metrics.status.twentyFourHour.total).toBe(0);
+      expect(metrics.status.twentyFourHour.bounces).toBe(0);
+
+      // New project flag should be hidden
+      expect(metrics.status.isNewProject).toBe(false);
+    });
+  });
+});

apps/api/src/services/__tests__/TemplateService.test.ts

@@ -193,6 +193,7 @@ describe('TemplateService', () => {
       await factories.createTemplate({projectId, type: TemplateType.MARKETING});
       await factories.createTemplate({projectId, type: TemplateType.MARKETING});
       await factories.createTemplate({projectId, type: TemplateType.TRANSACTIONAL});
+      await factories.createTemplate({projectId, type: TemplateType.HEADLESS});
 
       const marketingResult = await TemplateService.list(projectId, 1, 20, undefined, TemplateType.MARKETING);
       expect(marketingResult.total).toBe(2);
@@ -201,6 +202,10 @@ describe('TemplateService', () => {
       const transactionalResult = await TemplateService.list(projectId, 1, 20, undefined, TemplateType.TRANSACTIONAL);
       expect(transactionalResult.total).toBe(1);
       expect(transactionalResult.data[0].type).toBe(TemplateType.TRANSACTIONAL);
+
+      const headlessResult = await TemplateService.list(projectId, 1, 20, undefined, TemplateType.HEADLESS);
+      expect(headlessResult.total).toBe(1);
+      expect(headlessResult.data[0].type).toBe(TemplateType.HEADLESS);
     });
 
     it('should combine search and type filters', async () => {
@@ -293,6 +298,19 @@ describe('TemplateService', () => {
       expect(updated.type).toBe(TemplateType.TRANSACTIONAL);
     });
 
+    it('should update template type to HEADLESS', async () => {
+      const template = await factories.createTemplate({
+        projectId,
+        type: TemplateType.MARKETING,
+      });
+
+      const updated = await TemplateService.update(projectId, template.id, {
+        type: TemplateType.HEADLESS,
+      });
+
+      expect(updated.type).toBe(TemplateType.HEADLESS);
+    });
+
     it('should update email fields (from, fromName, replyTo)', async () => {
       const template = await factories.createTemplate({projectId});
 

apps/api/src/services/__tests__/WorkflowConditions.operators.test.ts

@@ -722,4 +722,260 @@ describe('Workflow CONDITION Step - Comprehensive Operator Tests', () => {
       expect(branch).toBe('yes');
     });
   });
+
+  // ========================================
+  // MULTI-BRANCH CONDITIONS (switch/case)
+  // ========================================
+  describe('Multi-Branch Conditions', () => {
+    /**
+     * Helper to create a workflow with a multi-branch condition step
+     * Creates one exit step per branch + one for default
+     */
+    async function createMultiBranchWorkflow(
+      contactData: Record<string, unknown>,
+      conditionConfig: Record<string, unknown>,
+    ) {
+      const contact = await factories.createContact({
+        projectId,
+        data: contactData,
+      });
+
+      const workflow = await factories.createWorkflow({projectId});
+      const triggerStep = await prisma.workflowStep.findFirstOrThrow({
+        where: {workflowId: workflow.id, type: WorkflowStepType.TRIGGER},
+      });
+
+      const conditionStep = await prisma.workflowStep.create({
+        data: {
+          workflowId: workflow.id,
+          type: WorkflowStepType.CONDITION,
+          name: 'Multi Condition',
+          position: {x: 100, y: 0},
+          config: conditionConfig,
+        },
+      });
+
+      // Create exit steps for each branch + default
+      const branches = conditionConfig.branches as Array<{id: string; name: string; operator: string; value?: unknown}>;
+      const branchExits: Record<string, string> = {};
+      for (let i = 0; i < branches.length; i++) {
+        const branch = branches[i]!;
+        const exitStep = await prisma.workflowStep.create({
+          data: {
+            workflowId: workflow.id,
+            type: WorkflowStepType.EXIT,
+            name: `${branch.name} Path`,
+            position: {x: 200, y: i * 100},
+            config: {reason: branch.name},
+          },
+        });
+        branchExits[branch.id] = exitStep.id;
+
+        await prisma.workflowTransition.create({
+          data: {
+            fromStepId: conditionStep.id,
+            toStepId: exitStep.id,
+            condition: {branch: branch.id},
+            priority: i,
+          },
+        });
+      }
+
+      // Create default exit
+      const defaultExit = await prisma.workflowStep.create({
+        data: {
+          workflowId: workflow.id,
+          type: WorkflowStepType.EXIT,
+          name: 'Default Path',
+          position: {x: 200, y: branches.length * 100},
+          config: {reason: 'default'},
+        },
+      });
+
+      await prisma.workflowTransition.create({
+        data: {
+          fromStepId: conditionStep.id,
+          toStepId: defaultExit.id,
+          condition: {branch: 'default'},
+          priority: branches.length,
+        },
+      });
+
+      // Connect trigger to condition
+      await prisma.workflowTransition.create({
+        data: {fromStepId: triggerStep.id, toStepId: conditionStep.id},
+      });
+
+      const execution = await prisma.workflowExecution.create({
+        data: {
+          workflowId: workflow.id,
+          contactId: contact.id,
+          status: WorkflowExecutionStatus.RUNNING,
+          currentStepId: triggerStep.id,
+          context: {},
+        },
+      });
+
+      return {execution, triggerStep, conditionStep, contact, branchExits, defaultExitId: defaultExit.id};
+    }
+
+    const planBranches = {
+      mode: 'multi' as const,
+      field: 'data.plan',
+      branches: [
+        {id: 'br-premium', name: 'Premium', operator: 'equals', value: 'premium'},
+        {id: 'br-free', name: 'Free', operator: 'equals', value: 'free'},
+        {id: 'br-enterprise', name: 'Enterprise', operator: 'equals', value: 'enterprise'},
+      ],
+    };
+
+    it('should match the first matching branch', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {plan: 'premium'},
+        planBranches,
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('br-premium');
+    });
+
+    it('should match a non-first branch correctly', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {plan: 'enterprise'},
+        planBranches,
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('br-enterprise');
+    });
+
+    it('should fall through to default when no branch matches', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {plan: 'starter'},
+        planBranches,
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('default');
+    });
+
+    it('should fall through to default when field is missing', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {other: 'value'},
+        planBranches,
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('default');
+    });
+
+    it('should support mixed operators across branches', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {score: 85},
+        {
+          mode: 'multi',
+          field: 'data.score',
+          branches: [
+            {id: 'br-high', name: 'High', operator: 'greaterThanOrEqual', value: 90},
+            {id: 'br-medium', name: 'Medium', operator: 'greaterThanOrEqual', value: 70},
+            {id: 'br-low', name: 'Low', operator: 'lessThan', value: 70},
+          ],
+        },
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      // 85 >= 90 is false, 85 >= 70 is true → should match "Medium"
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('br-medium');
+    });
+
+    it('should respect branch evaluation order (first match wins)', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {plan: 'premium'},
+        {
+          mode: 'multi',
+          field: 'data.plan',
+          branches: [
+            {id: 'br-first', name: 'First', operator: 'contains', value: 'prem'},
+            {id: 'br-second', name: 'Second', operator: 'equals', value: 'premium'},
+          ],
+        },
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      // Both match, but first one should win
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('br-first');
+    });
+
+    it('should support exists/notExists operators in branches', async () => {
+      const {execution, triggerStep, conditionStep} = await createMultiBranchWorkflow(
+        {plan: 'premium'},
+        {
+          mode: 'multi',
+          field: 'data.plan',
+          branches: [
+            {id: 'br-has-plan', name: 'Has Plan', operator: 'exists'},
+          ],
+        },
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+      await WorkflowExecutionService.processStepExecution(execution.id, conditionStep.id);
+
+      const branch = await getConditionBranch(execution.id, conditionStep.id);
+      expect(branch).toBe('br-has-plan');
+    });
+
+    it('should route to correct exit step via transitions', async () => {
+      const {execution, triggerStep, branchExits, defaultExitId} = await createMultiBranchWorkflow(
+        {plan: 'free'},
+        planBranches,
+      );
+
+      await WorkflowExecutionService.processStepExecution(execution.id, triggerStep.id);
+
+      // Check the execution completed and ended at the correct exit step
+      const completedExecution = await prisma.workflowExecution.findUnique({
+        where: {id: execution.id},
+      });
+
+      // Workflow completed after reaching exit step
+      expect(['EXITED', 'COMPLETED']).toContain(completedExecution?.status);
+
+      // Verify it went through the "free" branch exit, not default
+      const exitStepExecution = await prisma.workflowStepExecution.findFirst({
+        where: {
+          executionId: execution.id,
+          stepId: branchExits['br-free'],
+        },
+      });
+      expect(exitStepExecution).not.toBeNull();
+
+      // Verify it did NOT go through the default exit
+      const defaultStepExecution = await prisma.workflowStepExecution.findFirst({
+        where: {
+          executionId: execution.id,
+          stepId: defaultExitId,
+        },
+      });
+      expect(defaultStepExecution).toBeNull();
+    });
+  });
 });

apps/api/src/services/__tests__/WorkflowExecutionService.integration.test.ts

@@ -4,6 +4,12 @@ import {toPrismaJson} from '@plunk/types';
 import {WorkflowExecutionService} from '../WorkflowExecutionService';
 import {factories, getPrismaClient} from '../../../../../test/helpers';
 
+vi.mock('node:dns/promises', () => ({
+  default: {
+    lookup: vi.fn(async () => ({address: '1.2.3.4', family: 4})),
+  },
+}));
+
 /**
  * Integration Tests: Workflow Execution Engine
  *

apps/landing/next-sitemap.config.js

@@ -1,5 +1,5 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
-  siteUrl: process.env.NEXT_PUBLIC_LANDING_URI || 'https://next.useplunk.com',
+  siteUrl: process.env.NEXT_PUBLIC_LANDING_URI || 'https://www.useplunk.com',
   generateRobotsTxt: true,
 };

apps/landing/package.json

@@ -27,7 +27,7 @@
     "@tiptap/starter-kit": "^3.11.0",
     "juice": "^11.0.3",
     "lucide-react": "^0.553.0",
-    "next": "^16.0.10",
+    "next": "^16.2.3",
     "next-seo": "^6.6.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",

apps/landing/public/assets/logo.svg

@@ -1,7 +1,3 @@
-<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="1080" height="1080" fill="white"/>
-    <path d="M976 284.628C976 348.237 959.54 406.608 926.62 459.74C893.701 512.873 845.817 556.276 782.97 589.952C720.124 623.627 645.306 643.458 558.517 649.445L510.26 919.971C491.556 1023.99 440.68 1076 357.632 1076C311.993 1076 269.721 1062.53 230.816 1035.59C192.659 1008.65 161.984 967.49 138.79 912.113C115.597 856.736 104 788.637 104 707.816C104 555.902 128.316 427.187 176.947 321.671C226.327 215.407 292.166 136.082 374.466 83.6984C457.514 30.5661 548.791 4 648.299 4C718.627 4 778.107 16.3476 826.739 41.0429C876.118 65.7382 913.153 99.4136 937.843 142.069C963.281 183.976 976 231.496 976 284.628ZM578.718 533.826C732.094 514.369 808.783 434.671 808.783 294.731C808.783 245.34 792.323 205.304 759.403 174.622C727.231 143.192 677.103 127.476 609.019 127.476C531.957 127.476 464.621 151.798 407.012 200.44C350.15 249.082 306.008 316.807 274.584 403.615C243.909 489.674 228.571 588.081 228.571 698.836C228.571 745.233 233.06 786.392 242.039 822.312C251.765 858.232 263.736 886.295 277.951 906.501C292.915 925.957 307.13 935.686 320.597 935.686C339.302 935.686 353.517 909.868 363.243 858.232L400.278 646.078C371.099 641.587 358.38 639.717 362.121 640.465C339.676 636.723 325.086 629.988 318.353 620.26C311.619 609.783 308.252 596.687 308.252 580.972C308.252 564.508 312.741 551.412 321.719 541.684C331.446 531.955 344.539 527.091 360.999 527.091C368.481 527.091 374.092 527.465 377.833 528.214C395.789 531.207 409.63 533.078 419.357 533.826C429.083 475.455 442.924 397.254 460.88 299.221C465.369 273.777 475.47 255.817 491.182 245.34C507.641 234.115 526.72 228.503 548.417 228.503C573.107 228.503 590.689 233.367 601.163 243.095C612.386 252.075 617.997 266.668 617.997 286.873C617.997 298.847 617.249 308.575 615.753 316.059L578.718 533.826Z"
-          fill="black"/>
-    <path d="M304.835 467.541L426.099 489.952L411.851 580.937L391.091 699.816L266.088 676.643L304.835 467.541Z"
-          fill="white"/>
+<svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M955 296.539C955 357.181 939.314 412.83 907.942 463.484C876.57 514.138 830.938 555.517 771.046 587.622C711.155 619.727 639.855 638.633 557.147 644.34L511.158 902.248C493.333 1001.42 444.849 1051 365.707 1051C322.214 1051 281.929 1038.16 244.853 1012.47C208.49 986.791 179.257 947.551 157.154 894.757C135.051 841.963 124 777.04 124 699.988C124 555.161 147.172 432.449 193.517 331.854C240.575 230.546 303.319 154.922 381.749 104.981C460.892 54.327 547.878 29 642.707 29C709.728 29 766.412 40.7717 812.757 64.3152C859.815 87.8586 895.108 119.963 918.637 160.629C942.879 200.582 955 245.885 955 296.539ZM576.398 534.114C722.562 515.565 795.645 439.584 795.645 306.171C795.645 259.084 779.959 220.915 748.587 191.664C717.928 161.699 670.157 146.717 605.274 146.717C531.835 146.717 467.665 169.904 412.764 216.278C358.577 262.651 316.51 327.217 286.564 409.976C257.331 492.021 242.714 585.838 242.714 691.427C242.714 735.66 246.992 774.9 255.548 809.145C264.817 843.39 276.225 870.143 289.772 889.406C304.032 907.956 317.579 917.23 330.413 917.23C348.238 917.23 361.785 892.617 371.054 843.39L406.347 641.13L405.633 646.299L411.708 611.502L416.534 583.854L420.128 561.451L424.529 534.114C433.798 478.466 446.988 403.912 464.1 310.451C468.378 286.194 478.004 269.072 492.977 259.084C508.663 248.382 526.844 243.031 547.521 243.031C571.05 243.031 587.806 247.669 597.788 256.943C608.483 265.505 613.83 279.417 613.83 298.68C613.83 310.095 613.117 319.369 611.691 326.504C597.908 407.581 590.181 453.037 576.398 534.114Z" fill="black"/>
 </svg>

apps/landing/src/components/ComparisonTable.tsx

@@ -13,26 +13,21 @@ interface ComparisonTableProps {
   rows: ComparisonRow[];
 }
 
-/**
- * Reusable comparison table component for competitor pages
- */
 export function ComparisonTable({competitorName, rows}: ComparisonTableProps) {
   return (
-    <div className={'overflow-hidden rounded-xl border border-neutral-200'}>
-      {/* Header */}
+    <div className={'overflow-hidden rounded-[24px] border border-neutral-200'}>
       <div className={'grid grid-cols-3 gap-px bg-neutral-200'}>
-        <div className={'bg-white p-6'}>
-          <span className={'text-sm font-semibold text-neutral-900'}>Feature</span>
+        <div className={'bg-neutral-50 p-6'}>
+          <span style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>Feature</span>
         </div>
-        <div className={'bg-white p-6 text-center'}>
-          <span className={'text-sm font-semibold text-neutral-900'}>Plunk</span>
+        <div className={'bg-neutral-900 p-6 text-center'}>
+          <span style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-white'}>Plunk</span>
         </div>
-        <div className={'bg-white p-6 text-center'}>
-          <span className={'text-sm font-semibold text-neutral-900'}>{competitorName}</span>
+        <div className={'bg-neutral-50 p-6 text-center'}>
+          <span style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>{competitorName}</span>
         </div>
       </div>
 
-      {/* Rows */}
       <div className={'grid gap-px bg-neutral-200'}>
         {rows.map((row, index) => (
           <motion.div
@@ -40,22 +35,22 @@ export function ComparisonTable({competitorName, rows}: ComparisonTableProps) {
             initial={{opacity: 0, y: 10}}
             whileInView={{opacity: 1, y: 0}}
             viewport={{once: true}}
-            transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
+            transition={{duration: 0.4, delay: index * 0.04, ease: [0.22, 1, 0.36, 1]}}
             className={'grid grid-cols-3 gap-px bg-neutral-200'}
           >
             <div className={'bg-white p-6'}>
-              <span className={'text-sm text-neutral-600'}>{row.feature}</span>
+              <span className={'text-sm text-neutral-700'}>{row.feature}</span>
             </div>
-            <div className={'bg-white p-6'}>
+            <div className={'bg-neutral-50/70 p-6'}>
               <div className={'flex justify-center'}>
                 {typeof row.plunk === 'boolean' ? (
                   row.plunk ? (
                     <Check className="h-5 w-5 text-neutral-900" strokeWidth={2} />
                   ) : (
-                    <X className="h-5 w-5 text-neutral-400" strokeWidth={2} />
+                    <X className="h-5 w-5 text-neutral-300" strokeWidth={2} />
                   )
                 ) : (
-                  <span className={'text-sm text-neutral-900'}>{row.plunk}</span>
+                  <span className={'text-sm font-medium text-neutral-900'}>{row.plunk}</span>
                 )}
               </div>
             </div>
@@ -65,10 +60,10 @@ export function ComparisonTable({competitorName, rows}: ComparisonTableProps) {
                   row.competitor ? (
                     <Check className="h-5 w-5 text-neutral-900" strokeWidth={2} />
                   ) : (
-                    <X className="h-5 w-5 text-neutral-400" strokeWidth={2} />
+                    <X className="h-5 w-5 text-neutral-300" strokeWidth={2} />
                   )
                 ) : (
-                  <span className={'text-sm text-neutral-900'}>{row.competitor}</span>
+                  <span className={'text-sm text-neutral-600'}>{row.competitor}</span>
                 )}
               </div>
             </div>

apps/landing/src/components/FAQSection.tsx

@@ -12,9 +12,6 @@ interface FAQSectionProps {
   schemaId?: string;
 }
 
-/**
- * Reusable FAQ section component with structured data support
- */
 export function FAQSection({faqs, schemaId = 'faq-schema'}: FAQSectionProps) {
   return (
     <>
@@ -37,34 +34,44 @@ export function FAQSection({faqs, schemaId = 'faq-schema'}: FAQSectionProps) {
         }}
       />
 
-      <section className={'py-32'}>
-        <motion.div
-          initial={{opacity: 0, y: 20}}
-          whileInView={{opacity: 1, y: 0}}
-          viewport={{once: true}}
-          transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-          className={'mx-auto max-w-4xl'}
-        >
-          <h2 className={'mb-16 text-center text-5xl font-bold tracking-tight text-neutral-900'}>
-            Frequently asked questions
-          </h2>
+      <section className={'border-t border-neutral-200'}>
+        <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:px-10 sm:py-20'}>
+          <motion.div
+            initial={{opacity: 0, y: 20}}
+            whileInView={{opacity: 1, y: 0}}
+            viewport={{once: true}}
+            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            className={'mb-12'}
+          >
+            <h2
+              style={{fontFamily: 'var(--font-display)'}}
+              className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+            >
+              Frequently asked questions
+            </h2>
+          </motion.div>
 
-          <div className={'space-y-8'}>
+          <div className={'mx-auto max-w-3xl divide-y divide-neutral-200'}>
             {faqs.map((faq, index) => (
               <motion.div
                 key={index}
-                initial={{opacity: 0, y: 20}}
+                initial={{opacity: 0, y: 16}}
                 whileInView={{opacity: 1, y: 0}}
                 viewport={{once: true}}
-                transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
-                className={'border-b border-neutral-200 pb-8 last:border-b-0'}
+                transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                className={'py-8'}
               >
-                <h3 className={'text-xl font-semibold text-neutral-900'}>{faq.question}</h3>
-                <p className={'mt-4 leading-relaxed text-neutral-600'}>{faq.answer}</p>
+                <h3
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={'text-lg font-bold tracking-[-0.02em] text-neutral-900'}
+                >
+                  {faq.question}
+                </h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>{faq.answer}</p>
               </motion.div>
             ))}
           </div>
-        </motion.div>
+        </div>
       </section>
     </>
   );

apps/landing/src/components/Footer/Footer.tsx

@@ -10,15 +10,15 @@ export default function Footer() {
   return (
     <>
       <footer className={'border-t border-neutral-200 bg-white'}>
-        <div className="mx-auto max-w-7xl px-8 py-20 xl:px-0">
+        <div className="mx-auto max-w-[88rem] px-6 py-20 sm:px-10">
           <div className="grid gap-12 lg:grid-cols-12">
             {/* Logo and description */}
-            <div className="space-y-6 lg:col-span-4">
+            <div className="space-y-6 lg:col-span-3">
               <div className={'relative h-8 w-8'}>
                 <Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
               </div>
               <p className="text-sm leading-relaxed text-neutral-600">
-                Open-source email automation platform that scales
+                Open-source email platform for transactional, marketing, and automation. EU-hosted, GDPR compliant.
               </p>
               <div className="flex items-center gap-4">
                 <Link
@@ -57,9 +57,9 @@ export default function Footer() {
             </div>
 
             {/* Links */}
-            <div className="grid grid-cols-2 gap-8 lg:col-span-8 lg:grid-cols-3">
+            <div className="grid grid-cols-2 gap-8 lg:col-span-9 lg:grid-cols-5">
               <div>
-                <h3 className="text-sm font-semibold text-neutral-900">Product</h3>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Product</h3>
                 <ul role="list" className="mt-6 space-y-4">
                   <li>
                     <Link href={'/pricing'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
@@ -67,27 +67,102 @@ export default function Footer() {
                     </Link>
                   </li>
                   <li>
-                    <Link
-                      href={'/made-by-humans'}
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
-                      Made by humans
+                    <Link href={WIKI_URI} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Documentation
                     </Link>
                   </li>
                   <li>
-                    <Link
-                      href={WIKI_URI}
-                      target={'_blank'}
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
-                      Documentation
+                    <Link href={'/guides'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Guides
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/tools'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Tools
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/made-by-humans'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Made by humans
                     </Link>
                   </li>
                 </ul>
               </div>
 
               <div>
-                <h3 className="text-sm font-semibold text-neutral-900">Community</h3>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Features</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  <li>
+                    <Link href={'/features/email-editor'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Email editor
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/features/workflows'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Workflows
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/features/segments'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Segments
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/features/smtp'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      SMTP
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/features/inbound-email'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Inbound email
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Compare</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  <li>
+                    <Link href={'/vs'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      All comparisons
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/mailchimp'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs Mailchimp
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/sendgrid'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs SendGrid
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/resend'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs Resend
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/brevo'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs Brevo
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/mailgun'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs Mailgun
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/vs/convertkit'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      vs ConvertKit
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Community</h3>
                 <ul role="list" className="mt-6 space-y-4">
                   <li>
                     <Link href={'/discord'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
@@ -95,28 +170,18 @@ export default function Footer() {
                     </Link>
                   </li>
                   <li>
-                    <Link
-                      href={'https://github.com/useplunk'}
-                      target={'_blank'}
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
+                    <Link href={'https://github.com/useplunk'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
                       GitHub
                     </Link>
                   </li>
                   <li>
-                    <Link
-                      href={'https://status.useplunk.com'}
-                      target={'_blank'}
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
+                    <Link href={'https://status.useplunk.com'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
                       Status
                     </Link>
                   </li>
                 </ul>
-              </div>
 
-              <div>
-                <h3 className="text-sm font-semibold text-neutral-900">Legal</h3>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="mt-8 text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Legal</h3>
                 <ul role="list" className="mt-6 space-y-4">
                   <li>
                     <Link href={'/privacy'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
@@ -128,6 +193,52 @@ export default function Footer() {
                       Terms
                     </Link>
                   </li>
+                  <li>
+                    <Link href={'/dpa'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      DPA
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h3 style={{fontFamily: 'var(--font-mono)'}} className="text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">Guides</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  <li>
+                    <Link href={'/guides/email-deliverability'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Email deliverability
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/transactional-vs-marketing-email'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Transactional vs marketing
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/what-is-dkim'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      What is DKIM?
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/what-is-spf'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      What is SPF?
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/what-is-dmarc'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      What is DMARC?
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/email-open-rate'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Email open rates
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href={'/guides/email-bounce-rate'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
+                      Email bounce rates
+                    </Link>
+                  </li>
                 </ul>
               </div>
             </div>

apps/landing/src/components/Navbar/Navbar.tsx

@@ -4,193 +4,305 @@ import {AnimatePresence, motion} from 'framer-motion';
 import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
 import Image from 'next/image';
 import logo from '../../../public/assets/logo.svg';
+import {ChevronDown, GitBranch, Inbox, Mail, Server, Users} from 'lucide-react';
+
+const featuresMenu = [
+  {
+    title: 'Email Editor',
+    description: 'Create beautiful emails with visual or code editing',
+    href: '/features/email-editor',
+    icon: <Mail className="h-5 w-5" />,
+  },
+  {
+    title: 'Workflows',
+    description: 'Automate email sequences with triggers and conditions',
+    href: '/features/workflows',
+    icon: <GitBranch className="h-5 w-5" />,
+  },
+  {
+    title: 'Inbound Email',
+    description: 'Receive and process incoming emails',
+    href: '/features/inbound-email',
+    icon: <Inbox className="h-5 w-5" />,
+  },
+  {
+    title: 'Segments',
+    description: 'Organize contacts with dynamic filtering',
+    href: '/features/segments',
+    icon: <Users className="h-5 w-5" />,
+  },
+  {
+    title: 'SMTP',
+    description: 'Send emails via SMTP or API',
+    href: '/features/smtp',
+    icon: <Server className="h-5 w-5" />,
+  },
+];
 
 /**
  *
  */
 export default function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [featuresOpen, setFeaturesOpen] = useState(false);
 
   return (
-    <nav className={'relative top-0 z-40 mx-auto max-w-7xl px-8 xl:px-0'}>
-      <div className={'z-40 py-6'}>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-12">
-            <div className="flex flex-shrink-0 items-center">
-              <Link href={'/'} className={'flex items-center gap-x-3'}>
-                <div className={'relative h-8 w-8'}>
-                  <Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
+    <header className={'sticky top-0 z-40 w-full border-b border-neutral-200 bg-white/95 backdrop-blur-sm'}>
+      <div className={'relative mx-auto max-w-[88rem] px-6 sm:px-10'}>
+        <div className={'py-5'}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-12">
+              <div className="flex flex-shrink-0 items-center">
+                <Link href={'/'} className={'flex items-center gap-x-3'}>
+                  <div className={'relative h-8 w-8'}>
+                    <Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
+                  </div>
+                  <span className={'sr-only'}>Plunk</span>
+                </Link>
+              </div>
+              <div className="hidden items-center gap-8 md:flex">
+                <div className={'relative'}>
+                  <button
+                    onMouseEnter={() => setFeaturesOpen(true)}
+                    onMouseLeave={() => setFeaturesOpen(false)}
+                    className={
+                      'flex items-center gap-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
+                    }
+                  >
+                    Features
+                    <ChevronDown className={`h-4 w-4 transition-transform ${featuresOpen ? 'rotate-180' : ''}`} />
+                  </button>
+
+                  <AnimatePresence>
+                    {featuresOpen && (
+                      <motion.div
+                        initial={{opacity: 0, y: -10}}
+                        animate={{opacity: 1, y: 0}}
+                        exit={{opacity: 0, y: -10}}
+                        transition={{duration: 0.2, ease: [0.22, 1, 0.36, 1]}}
+                        onMouseEnter={() => setFeaturesOpen(true)}
+                        onMouseLeave={() => setFeaturesOpen(false)}
+                        className={
+                          'absolute left-0 top-full z-50 mt-2 w-80 rounded-[16px] border border-neutral-200 bg-white p-2 shadow-lg'
+                        }
+                      >
+                        {featuresMenu.map(feature => (
+                          <Link
+                            key={feature.href}
+                            href={feature.href}
+                            className={'flex items-start gap-3 rounded-[10px] p-3 transition hover:bg-neutral-50'}
+                          >
+                            <div
+                              className={
+                                'mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
+                              }
+                            >
+                              {feature.icon}
+                            </div>
+                            <div className={'flex-1'}>
+                              <div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
+                              <div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
+                            </div>
+                          </Link>
+                        ))}
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
                 </div>
-                <span className={'sr-only'}>Plunk</span>
-              </Link>
+
+                <Link
+                  href={'/made-by-humans'}
+                  className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
+                >
+                  By humans
+                </Link>
+
+                <Link
+                  href={'/pricing'}
+                  className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
+                >
+                  Pricing
+                </Link>
+
+                <Link
+                  href={'/guides'}
+                  className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
+                >
+                  Guides
+                </Link>
+
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  rel={'noreferrer'}
+                  className={
+                    'flex items-center gap-x-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
+                  }
+                >
+                  Docs
+                  <svg className={'h-3.5 w-3.5'} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"
+                    />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.25 9.25V4.75H14.75" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 5L11.75 12.25" />
+                  </svg>
+                </Link>
+              </div>
             </div>
-            <div className="hidden items-center gap-8 md:flex">
-              <Link
-                href={'/made-by-humans'}
+
+            <div className="hidden items-center gap-6 md:flex">
+              <a
+                href={`${DASHBOARD_URI}/auth/login`}
                 className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
               >
-                By humans
-              </Link>
-
-              <Link
-                href={'/pricing'}
-                className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
-              >
-                Pricing
-              </Link>
-
-              <Link
-                href={'/guides'}
-                className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
-              >
-                Guides
-              </Link>
-
-              <Link
-                href={WIKI_URI}
-                target={'_blank'}
-                rel={'noreferrer'}
+                Sign in
+              </a>
+              <motion.a
+                whileHover={{scale: 1.02}}
+                whileTap={{scale: 0.98}}
+                href={`${DASHBOARD_URI}/auth/signup`}
                 className={
-                  'flex items-center gap-x-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
+                  'rounded-full bg-neutral-900 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Docs
-                <svg className={'h-3.5 w-3.5'} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"
-                  />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.25 9.25V4.75H14.75" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 5L11.75 12.25" />
+                Get started
+              </motion.a>
+            </div>
+
+            <div className="-mr-2 flex items-center md:hidden">
+              <button
+                onClick={() => setMobileOpen(!mobileOpen)}
+                type="button"
+                className="inline-flex items-center justify-center rounded-lg p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-900"
+                aria-controls="mobile-menu"
+                aria-expanded={mobileOpen}
+              >
+                <span className="sr-only">Open main menu</span>
+
+                <svg
+                  className={`${mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
-              </Link>
+
+                <svg
+                  className={`${!mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
             </div>
           </div>
-
-          <div className="hidden items-center gap-6 md:flex">
-            <a
-              href={`${DASHBOARD_URI}/auth/login`}
-              className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
-            >
-              Sign in
-            </a>
-            <motion.a
-              whileHover={{scale: 1.02}}
-              whileTap={{scale: 0.98}}
-              href={`${DASHBOARD_URI}/auth/signup`}
-              className={
-                'rounded-lg bg-neutral-900 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800'
-              }
-            >
-              Get started
-            </motion.a>
-          </div>
-
-          <div className="-mr-2 flex items-center md:hidden">
-            <button
-              onClick={() => setMobileOpen(!mobileOpen)}
-              type="button"
-              className="inline-flex items-center justify-center rounded-lg p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-900"
-              aria-controls="mobile-menu"
-              aria-expanded="false"
-            >
-              <span className="sr-only">Open main menu</span>
-
-              <svg
-                className={`${mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-
-              <svg
-                className={`${!mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
         </div>
-      </div>
 
-      <AnimatePresence>
-        {mobileOpen && (
-          <motion.div
-            initial={{height: 0, opacity: 0}}
-            animate={{height: 'auto', opacity: 1}}
-            exit={{height: 0, opacity: 0}}
-            transition={{duration: 0.2}}
-            className="absolute left-0 top-full z-50 mt-2 w-full rounded-lg border border-neutral-200 bg-white shadow-lg backdrop-blur-sm sm:hidden"
-          >
+        <AnimatePresence>
+          {mobileOpen && (
             <motion.div
-              initial={{opacity: 0}}
-              animate={{opacity: 1}}
-              exit={{opacity: 0}}
+              initial={{height: 0, opacity: 0}}
+              animate={{height: 'auto', opacity: 1}}
+              exit={{height: 0, opacity: 0}}
               transition={{duration: 0.2}}
-              className="space-y-1 p-4"
+              className="absolute left-0 top-full z-50 w-full overflow-hidden border-t border-neutral-100 bg-white shadow-lg md:hidden"
             >
-              <Link
-                href={'/made-by-humans'}
-                onClick={() => setMobileOpen(false)}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
+              <motion.div
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                exit={{opacity: 0}}
+                transition={{duration: 0.2}}
+                className="space-y-1 p-4"
               >
-                By humans
-              </Link>
+                <div className="mb-2">
+                  <div style={{fontFamily: 'var(--font-mono)'}} className="px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500">
+                    Features
+                  </div>
+                  {featuresMenu.map(feature => (
+                    <Link
+                      key={feature.href}
+                      href={feature.href}
+                      onClick={() => setMobileOpen(false)}
+                      className="flex items-start gap-3 rounded-lg px-4 py-3 transition hover:bg-neutral-100"
+                    >
+                      <div
+                        className={
+                          'mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
+                        }
+                      >
+                        {feature.icon}
+                      </div>
+                      <div className={'flex-1'}>
+                        <div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
+                        <div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
 
-              <Link
-                href={'/pricing'}
-                onClick={() => setMobileOpen(false)}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
-              >
-                Pricing
-              </Link>
-
-              <Link
-                href={'/guides'}
-                onClick={() => setMobileOpen(false)}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
-              >
-                Guides
-              </Link>
-
-              <a
-                href={WIKI_URI}
-                target={'_blank'}
-                rel={'noreferrer'}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
-              >
-                Docs
-              </a>
-
-              <div className="border-t border-neutral-200 pt-4">
-                <a
-                  href={`${DASHBOARD_URI}/auth/login`}
+                <Link
+                  href={'/made-by-humans'}
+                  onClick={() => setMobileOpen(false)}
                   className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
                 >
-                  Sign in
-                </a>
-                <a
-                  href={`${DASHBOARD_URI}/auth/signup`}
-                  className="mt-2 block rounded-lg bg-neutral-900 px-4 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
+                  By humans
+                </Link>
+
+                <Link
+                  href={'/pricing'}
+                  onClick={() => setMobileOpen(false)}
+                  className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
                 >
-                  Get started
+                  Pricing
+                </Link>
+
+                <Link
+                  href={'/guides'}
+                  onClick={() => setMobileOpen(false)}
+                  className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
+                >
+                  Guides
+                </Link>
+
+                <a
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  rel={'noreferrer'}
+                  className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
+                >
+                  Docs
                 </a>
-              </div>
+
+                <div className="border-t border-neutral-200 pt-4">
+                  <a
+                    href={`${DASHBOARD_URI}/auth/login`}
+                    className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
+                  >
+                    Sign in
+                  </a>
+                  <a
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className="mt-2 block rounded-full bg-neutral-900 px-4 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
+                  >
+                    Get started
+                  </a>
+                </div>
+              </motion.div>
             </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </nav>
+          )}
+        </AnimatePresence>
+      </div>
+    </header>
   );
 }

apps/landing/src/components/SectionHeader.tsx

@@ -0,0 +1,48 @@
+import {motion} from 'framer-motion';
+import React from 'react';
+
+export function SectionHeader({
+  number,
+  label,
+  title,
+  titleAccent,
+  subtitle,
+}: {
+  number: string;
+  label: string;
+  title: string;
+  titleAccent?: string;
+  subtitle?: string;
+}) {
+  return (
+    <motion.div
+      initial={{opacity: 0, y: 16}}
+      whileInView={{opacity: 1, y: 0}}
+      viewport={{once: true, margin: '-10%'}}
+      transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+      className={'grid gap-8 lg:grid-cols-12 lg:gap-16'}
+    >
+      <div
+        style={{fontFamily: 'var(--font-mono)'}}
+        className={
+          'flex items-center gap-4 border-t border-neutral-900 pt-4 text-[11px] uppercase tracking-[0.2em] text-neutral-700 lg:col-span-3 lg:self-start'
+        }
+      >
+        <span className={'font-medium text-neutral-900'}>§ {number}</span>
+        <span className={'text-neutral-500'}>{label}</span>
+      </div>
+      <div className={'lg:col-span-9'}>
+        <h2
+          style={{fontFamily: 'var(--font-display)'}}
+          className={
+            'text-[clamp(2.25rem,5.5vw,4.5rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'
+          }
+        >
+          {title}
+          {titleAccent && <> {titleAccent}</>}
+        </h2>
+        {subtitle && <p className={'mt-6 max-w-2xl text-lg leading-relaxed text-neutral-600'}>{subtitle}</p>}
+      </div>
+    </motion.div>
+  );
+}

apps/landing/src/components/guides/GuideLayout.tsx

@@ -25,7 +25,7 @@ export function GuideLayout({
   readTime,
   children,
   canonical,
-  ogImage = 'https://next.useplunk.com/assets/card.png',
+  ogImage = 'https://www.useplunk.com/assets/card.png',
 }: GuideLayoutProps) {
   const [headings, setHeadings] = useState<{id: string; text: string; level: number}[]>([]);
   const [activeId, setActiveId] = useState<string>('');
@@ -74,8 +74,8 @@ export function GuideLayout({
 
   // Generate breadcrumb items
   const breadcrumbItems = [
-    {position: 1, name: 'Home', item: 'https://next.useplunk.com'},
-    {position: 2, name: 'Guides', item: 'https://next.useplunk.com/guides'},
+    {position: 1, name: 'Home', item: 'https://www.useplunk.com'},
+    {position: 2, name: 'Guides', item: 'https://www.useplunk.com/guides'},
     {position: 3, name: title, item: canonical || ''},
   ];
 
@@ -114,7 +114,7 @@ export function GuideLayout({
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-4 sm:px-8 w-full overflow-x-hidden'}>
+      <main className={'mx-auto max-w-[88rem] px-4 sm:px-8 w-full overflow-x-hidden'}>
         <div className={'flex flex-col lg:flex-row gap-8 lg:gap-12 py-8 sm:py-16 w-full'}>
           {/* Main Content */}
           <article className={'flex-1 max-w-full lg:max-w-4xl w-full'}>
@@ -148,7 +148,10 @@ export function GuideLayout({
               transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
               className={'mb-8 sm:mb-12 w-full'}
             >
-              <h1 className={'text-2xl sm:text-4xl font-bold tracking-tight text-neutral-900 break-words max-w-full'}>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-3xl sm:text-4xl font-bold tracking-[-0.02em] text-neutral-900 break-words max-w-full'}
+              >
                 {title}
               </h1>
               <p
@@ -199,16 +202,16 @@ export function GuideLayout({
               <div className={'rounded-xl border border-neutral-200 bg-white p-6 shadow-sm'}>
                 <h2 className={'text-sm font-semibold text-neutral-900 mb-4 uppercase tracking-wide'}>On this page</h2>
                 <nav>
-                  <ul className={'space-y-1'}>
+                  <ul className={'space-y-0.5'}>
                     {headings.map(heading => (
-                      <li key={heading.id} className={heading.level === 3 ? 'ml-4 mt-0.5' : 'mt-2 first:mt-0'}>
+                      <li key={heading.id} className={heading.level === 3 ? 'ml-3' : ''}>
                         <a
                           href={`#${heading.id}`}
                           onClick={e => {
                             e.preventDefault();
                             const element = document.getElementById(heading.id);
                             if (element) {
-                              const offset = 100; // Account for fixed header
+                              const offset = 100;
                               const elementPosition = element.getBoundingClientRect().top + window.scrollY;
                               window.scrollTo({
                                 top: elementPosition - offset,
@@ -216,14 +219,14 @@ export function GuideLayout({
                               });
                             }
                           }}
-                          className={`block py-1 border-l-2 -ml-px pl-3 transition-all duration-200 ${
+                          className={`block rounded px-2 py-1.5 transition-all duration-200 ${
                             heading.level === 2
                               ? activeId === heading.id
-                                ? 'border-neutral-900 text-neutral-900 font-semibold text-sm'
-                                : 'border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 font-medium text-sm'
+                                ? 'bg-neutral-100 text-sm font-semibold text-neutral-900'
+                                : 'text-sm font-medium text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
                               : activeId === heading.id
-                                ? 'border-neutral-700 text-neutral-800 font-medium text-xs'
-                                : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-200 text-xs'
+                                ? 'bg-neutral-50 text-xs font-medium text-neutral-800'
+                                : 'text-xs text-neutral-500 hover:bg-neutral-50 hover:text-neutral-700'
                           }`}
                         >
                           {heading.text}

apps/landing/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './Footer';
 export * from './ComparisonTable';
 export * from './FAQSection';
 export * from './CodeBlock';
+export * from './SectionHeader';

apps/landing/src/components/tools/EmailVerificationResult.tsx

@@ -2,15 +2,16 @@ import {
   AlertCircle,
   AlertTriangle,
   CheckCircle,
+  Forward,
   Info,
   Mail,
   Server,
   Shield,
   Trash2,
+  User,
   XCircle,
-  Forward,
 } from 'lucide-react';
-import type {EmailVerificationResult as VerificationResult} from '../../lib/emailVerification';
+import type {EmailVerificationResult as VerificationResult} from '@plunk/types';
 
 interface EmailVerificationResultProps {
   result: VerificationResult;
@@ -52,7 +53,7 @@ export function EmailVerificationResult({result}: EmailVerificationResultProps)
               <Server className="h-5 w-5 text-neutral-600" />
               <div>
                 <p className="font-medium text-neutral-900">Domain Exists</p>
-                <p className="text-sm text-neutral-600">DNS A/AAAA records found</p>
+                <p className="text-sm text-neutral-600">Domain has nameservers (NS records)</p>
               </div>
             </div>
             {result.domainExists ? (
@@ -78,6 +79,22 @@ export function EmailVerificationResult({result}: EmailVerificationResultProps)
             )}
           </div>
 
+          {/* Website/A Records */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Has Website</p>
+                <p className="text-sm text-neutral-600">DNS A/AAAA records found</p>
+              </div>
+            </div>
+            {result.hasWebsite ? (
+              <CheckCircle className="h-5 w-5 text-green-600" />
+            ) : (
+              <Info className="h-5 w-5 text-neutral-400" />
+            )}
+          </div>
+
           {/* Disposable Email */}
           <div className="flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-3">
@@ -94,6 +111,22 @@ export function EmailVerificationResult({result}: EmailVerificationResultProps)
             )}
           </div>
 
+          {/* Personal Email */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <User className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Personal Email</p>
+                <p className="text-sm text-neutral-600">Free email provider (Gmail, Hotmail, etc.)</p>
+              </div>
+            </div>
+            {result.isPersonalEmail ? (
+              <Info className="h-5 w-5 text-blue-600" />
+            ) : (
+              <span className="text-sm text-neutral-500">No</span>
+            )}
+          </div>
+
           {/* Alias/Forwarding Email */}
           <div className="flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-3">

apps/landing/src/content/pages.ts

@@ -0,0 +1,343 @@
+export const MARKDOWN_PAGES: Record<string, string> = {
+  index: `# Plunk — The Open-Source Email Platform
+
+Transactional emails, marketing campaigns, and workflow automation — in one platform.
+Self-hostable, $0.001 per email, no contact limits.
+
+[Get started free](https://next-app.useplunk.com/auth/signup) | [Read the docs](https://docs.useplunk.com)
+
+---
+
+## Key facts
+
+| Metric | Value |
+|--------|-------|
+| Price | $0.001 / email |
+| GitHub stars | 5,000+ |
+| Contacts | Unlimited, always free |
+| Setup time | < 5 minutes |
+| License | AGPL-3.0 |
+
+---
+
+## Replace your email stack
+
+One tool in place of Resend, SendGrid, Mailchimp, Customer.io, and Mailgun.
+
+- [Plunk vs Resend](/vs/resend)
+- [Plunk vs SendGrid](/vs/sendgrid)
+- [Plunk vs Mailchimp](/vs/mailchimp)
+- [Plunk vs Customer.io](/vs/customerio)
+- [Plunk vs Mailgun](/vs/mailgun)
+
+---
+
+## Why Plunk
+
+### Setup — < 5 min
+Most email platforms take days to configure. Plunk is running in under five minutes — domain, DKIM, and first send included.
+
+### Pricing — 0 limits
+Other platforms charge more as your list grows. Plunk stores unlimited contacts for free and bills only on send.
+
+### Ownership — AGPL-3.0
+Closed-source platforms own your stack. Plunk is fully inspectable, forkable, and self-hostable on your own infra.
+
+---
+
+## Features
+
+### Workflow Automation
+Visual builder for complex email sequences with triggers, delays, and conditional logic. No code required.
+
+### Dynamic Segments
+Real-time audience segmentation based on contact data and behavior.
+
+### Campaign Management
+Broadcast emails with scheduling and performance tracking.
+
+### Analytics
+Detailed metrics on opens, clicks, bounces, and conversions across campaigns.
+
+### Inbound Email
+Receive and process incoming emails with webhook notifications.
+
+### Custom Domains
+Brand consistency with DKIM authentication and custom sending domains.
+
+---
+
+## Data model
+
+Every interaction flows into a single contact record — transactional, campaign, and workflow events unified in one source of truth.
+
+- **Transactional** — Receipts, password resets, event-driven sends
+- **Campaigns** — Newsletters, product launches, announcements
+- **Workflows** — Onboarding sequences, drip campaigns
+
+---
+
+## Open source
+
+- **License**: AGPL-3.0
+- **Hosting**: EU-hosted, GDPR compliant
+- **Deployment**: Self-hostable via Docker Compose
+- **Community**: 5,000+ GitHub stars
+
+[View on GitHub](https://github.com/useplunk/plunk)
+
+---
+
+## Pricing comparison
+
+**Plunk: $0.001 / email**
+
+| Provider | Price / email |
+|----------|--------------|
+| Plunk | $0.001 |
+| Mailgun | $0.003 |
+| SendGrid | $0.002 |
+| Mailchimp | $0.004 |
+
+*Based on plans matching Plunk at 10,000 emails per month.*
+
+[Full pricing details](/pricing)
+
+---
+
+## Testimonials
+
+> "Transparent and intuitive UI, extremely easy setup & automation and great support."
+> — Artur Czemiel, Founder at GraphQL Editor
+
+> "I've been using Plunk for building & sending out marketing emails and genuinely love it!"
+> — Joe Ashwell, Founder at UnwindHR
+
+> "I loved the ease of use, beautiful UI and great UX. Everything simply works."
+> — Alisson Leal, Founder at Brapi
+
+> "Clean design, easy to understand, fair pricing."
+> — Pierre Jacquel, Founder at Landingly
+
+> "Simple to use, efficient and no regrets!"
+> — Noah Di Gesu, Founder at Smoothey
+
+> "Lots of care put into Plunk"
+> — Jonni Lundy, Founding Operations Manager at Resend
+
+---
+
+## FAQ
+
+**How is Plunk different from other email automation tools?**
+Plunk is built for SaaS businesses, indie hackers, and developers. Create complex automated email flows and trigger them from anywhere through a single API call.
+
+**Can I use Plunk for transactional emails?**
+Yes. Plunk handles transactional emails — sign-ups, cancellations, plan changes — alongside marketing emails in the same platform.
+
+**Can I use Plunk for newsletters?**
+Yes. Plunk lets you send newsletters and broadcast emails to your full list or any segment.
+
+**What programming languages does Plunk support?**
+Any language capable of HTTP requests. Plunk provides a REST API plus SDKs for Node.js, Python, and more.
+
+**How much does Plunk cost?**
+Free plan includes 1,000 emails/month. Paid plan is $0.001 per email with no contact limits.
+
+---
+
+Start sending in 5 minutes. Free plan available. No contact limits, no surprises.
+
+[Create free account](https://next-app.useplunk.com/auth/signup) | [Read the docs](https://docs.useplunk.com)
+`,
+
+  pricing: `# Plunk Pricing — Simple, Transparent
+
+Free plan: 1,000 emails/month. Paid plan: $0.001/email. Unlimited contacts, no hidden fees.
+
+---
+
+## Plans
+
+### Free forever
+
+**1,000 emails / month** — No credit card required
+
+Includes:
+- Transactional emails
+- Workflow automation
+- Campaign broadcasts
+- Custom domains
+- Click & open tracking
+- Unlimited contacts
+- Plunk branding on emails (removed on paid)
+
+[Start for free](https://next-app.useplunk.com/auth/signup)
+
+---
+
+### Pay as you grow
+
+**$0.001 / email** — No base fee
+
+Includes everything in Free, plus:
+- No Plunk branding
+- Monthly spend cap
+- Unlimited emails
+
+[Get started](https://next-app.useplunk.com/auth/signup)
+
+---
+
+## Every feature, every plan
+
+No feature tiers, no add-ons, no surprises.
+
+| Feature | Description |
+|---------|-------------|
+| Transactional emails | API and SMTP delivery for receipts, password resets, and event-driven email. |
+| Workflow automation | Event-triggered sequences with delays, conditions, and branching logic. |
+| Campaign broadcasts | Send newsletters and announcements to your full list or a targeted segment. |
+| Unlimited contacts | Store as many contacts as you need. Growing your list never costs more. |
+| Full API access | REST API with SDKs for Node.js, Python, and more. |
+| Custom domains | Send from your own domain with DKIM, SPF, and DMARC set up automatically. |
+| Audience segmentation | Dynamic segments built on behavior, attributes, and engagement data. |
+| Analytics & tracking | Opens, clicks, bounces, and unsubscribes. Real data, no guessing. |
+| Open source | AGPL-3.0 licensed. Inspect the code, self-host it, or contribute. |
+
+---
+
+## Self-host for free
+
+Run Plunk on your own infrastructure — full data ownership, no per-email costs, GDPR compliance by default.
+Deploy with Docker Compose in minutes.
+
+[View on GitHub](https://github.com/useplunk/plunk)
+
+---
+
+Start sending in 5 minutes. Free plan, no credit card required.
+
+[Create free account](https://next-app.useplunk.com/auth/signup) | [Self-host for free](https://github.com/useplunk/plunk)
+`,
+
+  'features/workflows': `# Workflow Automation — Plunk
+
+Visual builder for complex email sequences with triggers, delays, and conditional logic. No code required.
+
+[Get started free](https://next-app.useplunk.com/auth/signup) | [Documentation](https://docs.useplunk.com)
+
+---
+
+## What are workflows?
+
+Workflows are automated email sequences that trigger based on events in your application. Define who receives emails, when they receive them, and what conditions must be met — all without writing code.
+
+## Key capabilities
+
+- **Event-triggered**: Start workflows from any API event
+- **Delays**: Wait minutes, hours, or days between steps
+- **Conditional branching**: Branch paths based on contact data or behavior
+- **Visual builder**: Drag-and-drop interface, no code required
+- **Unlimited steps**: As complex as your use case demands
+
+## Use cases
+
+- **Onboarding sequences**: Welcome new users and guide them to activation
+- **Drip campaigns**: Nurture leads over time with educational content
+- **Re-engagement**: Win back inactive contacts automatically
+- **Lifecycle emails**: Upgrades, renewals, cancellations
+
+[Back to features](/features) | [Pricing](/pricing)
+`,
+
+  'features/segments': `# Dynamic Segments — Plunk
+
+Real-time audience segmentation based on contact data and behavior.
+
+[Get started free](https://next-app.useplunk.com/auth/signup)
+
+---
+
+## What are segments?
+
+Segments are dynamic groups of contacts that update automatically as contact data changes. Target campaigns and workflows to exactly the right audience without manual list management.
+
+## Capabilities
+
+- **Attribute-based**: Filter by any contact property
+- **Behavior-based**: Segment by email opens, clicks, and engagement
+- **Real-time**: Segments update instantly as contact data changes
+- **Combinable**: AND/OR logic for complex targeting
+- **Unlimited contacts**: No per-segment contact limits
+
+[Back to features](/features) | [Pricing](/pricing)
+`,
+
+  'features/inbound-email': `# Inbound Email — Plunk
+
+Receive and process incoming emails with webhook notifications.
+
+[Get started free](https://next-app.useplunk.com/auth/signup)
+
+---
+
+## What is inbound email?
+
+Inbound email lets your application receive emails sent to your Plunk domain. When a message arrives, Plunk parses it and delivers the content to your webhook endpoint in real time.
+
+## Capabilities
+
+- **Webhook delivery**: Parsed email payload posted to your endpoint
+- **Attachment handling**: Access attachments programmatically
+- **Custom addresses**: Route different addresses to different webhooks
+- **Reply detection**: Track email threads automatically
+
+[Back to features](/features) | [Pricing](/pricing)
+`,
+
+  'features/email-editor': `# Email Editor — Plunk
+
+Design beautiful emails with a drag-and-drop builder or write in Markdown.
+
+[Get started free](https://next-app.useplunk.com/auth/signup)
+
+---
+
+## What is the email editor?
+
+Plunk's email editor lets you build professional emails without writing HTML. Choose from the visual drag-and-drop builder or write in Markdown — both export to responsive HTML email.
+
+## Capabilities
+
+- **Drag-and-drop builder**: Compose layouts with blocks and columns
+- **Markdown mode**: Write in plain text, render as rich email
+- **Responsive**: Emails adapt to any screen size automatically
+- **Preview**: See how your email looks on desktop and mobile
+- **Reusable templates**: Save and reuse your designs
+
+[Back to features](/features) | [Pricing](/pricing)
+`,
+
+  'features/smtp': `# SMTP — Plunk
+
+Send emails through Plunk using standard SMTP — no API changes required.
+
+[Get started free](https://next-app.useplunk.com/auth/signup)
+
+---
+
+## SMTP access
+
+Plunk provides SMTP credentials so you can send emails from any application or framework that supports standard SMTP. Drop in your Plunk credentials and start sending immediately — no code changes needed beyond configuration.
+
+## Details
+
+- **Host**: SMTP endpoint provided in your dashboard
+- **Port**: 587 (TLS) or 465 (SSL)
+- **Authentication**: Username and password from your Plunk project
+- **Compatible with**: Any language, framework, or tool that supports SMTP
+
+[Back to features](/features) | [Pricing](/pricing) | [Documentation](https://docs.useplunk.com)
+`,
+};

apps/landing/src/lib/emailVerification.ts

@@ -1,15 +1,4 @@
-export interface EmailVerificationResult {
-  email: string;
-  valid: boolean;
-  isDisposable: boolean;
-  isAlias: boolean;
-  isTypo: boolean;
-  isPlusAddressed: boolean;
-  domainExists: boolean;
-  hasMxRecords: boolean;
-  suggestedEmail?: string;
-  reasons: string[];
-}
+import type {EmailVerificationResult} from '@plunk/types';
 
 export async function verifyEmail(email: string): Promise<EmailVerificationResult> {
   const response = await fetch('/api/verify-email', {

apps/landing/src/lib/toolsContent.ts

@@ -1,4 +1,4 @@
-import {CheckCircle, Mail, Search, Shield} from 'lucide-react';
+import {CheckCircle, Mail, Search, Shield, User} from 'lucide-react';
 
 /**
  * Educational content for the email verification tool
@@ -29,6 +29,11 @@ export const EMAIL_VERIFICATION_FEATURES = [
     description: 'Identify temporary email addresses that are often used for spam or fake signups.',
     icon: Mail,
   },
+  {
+    title: 'Personal Email Detection',
+    description: 'Detect personal/free email providers like Gmail, Hotmail, Yahoo for B2B validation.',
+    icon: User,
+  },
   {
     title: 'Plus Addressing',
     description: 'Detect plus-addressed emails ([email protected]) which can be useful for tracking.',

apps/landing/src/middleware.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+type Negotiated = 'markdown' | 'html' | 'none';
+
+function parseAccept(accept: string): Array<{ type: string; q: number }> {
+  return accept.split(',').map(part => {
+    const segments = part.trim().split(';');
+    const type = segments[0]?.trim().toLowerCase() ?? '';
+    const qParam = segments.slice(1).find(s => s.trim().startsWith('q='));
+    const q = qParam ? parseFloat(qParam.split('=')[1] ?? '1') : 1;
+    return { type, q: isNaN(q) ? 1 : q };
+  });
+}
+
+function getQ(types: Array<{ type: string; q: number }>, target: string): number {
+  const exact = types.find(t => t.type === target);
+  if (exact) return exact.q;
+  const [main] = target.split('/');
+  const sub = types.find(t => t.type === `${main}/*`);
+  if (sub) return sub.q;
+  const wildcard = types.find(t => t.type === '*/*');
+  return wildcard ? wildcard.q : -1;
+}
+
+function negotiate(accept: string): Negotiated {
+  if (!accept) return 'html';
+  const types = parseAccept(accept);
+  const mdQ = getQ(types, 'text/markdown');
+  const htmlQ = getQ(types, 'text/html');
+  if (mdQ <= 0 && htmlQ <= 0) return 'none';
+  if (mdQ > 0 && mdQ >= htmlQ) return 'markdown';
+  return 'html';
+}
+
+export function middleware(request: NextRequest) {
+  const accept = request.headers.get('accept') ?? '';
+  const { pathname } = request.nextUrl;
+  const result = negotiate(accept);
+
+  if (result === 'none') {
+    return new NextResponse(null, { status: 406, headers: { 'Vary': 'Accept' } });
+  }
+
+  if (result === 'markdown') {
+    const headers = new Headers(request.headers);
+    headers.set('x-md-path', pathname);
+    const response = NextResponse.rewrite(new URL('/api/md', request.url), { request: { headers } });
+    response.headers.set('Vary', 'Accept');
+    return response;
+  }
+
+  const response = NextResponse.next();
+  response.headers.set('Vary', 'Accept');
+  return response;
+}
+
+export const config = {
+  matcher: ['/((?!api|_next|favicon\\.ico|assets|.*\\.(?:png|jpg|jpeg|gif|svg|ico|webp|woff|woff2|ttf|css|js)).*)',],
+};

apps/landing/src/pages/_app.tsx

@@ -6,6 +6,29 @@ import {toast, Toaster} from 'sonner';
 import {SWRConfig} from 'swr';
 import {network} from '../lib/network';
 import {DefaultSeo} from 'next-seo';
+import Script from 'next/script';
+import {Bricolage_Grotesque, Hanken_Grotesk, JetBrains_Mono} from 'next/font/google';
+
+const display = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-display',
+  display: 'swap',
+  weight: ['400', '500', '600', '700', '800'],
+});
+
+const body = Hanken_Grotesk({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+});
+
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+  weight: ['400', '500'],
+});
 
 /**
  * Main app component
@@ -15,10 +38,6 @@ import {DefaultSeo} from 'next-seo';
  */
 function App({Component, pageProps}: AppProps) {
   useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
     const searchParams = new URLSearchParams(window.location.search);
     const message = searchParams.get('message');
 
@@ -28,7 +47,7 @@ function App({Component, pageProps}: AppProps) {
   }, []);
 
   return (
-    <>
+    <div className={`${display.variable} ${body.variable} ${mono.variable}`}>
       <Head>
         <title>Plunk | The Open-Source Email Platform</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" key={'viewport'} />
@@ -36,7 +55,7 @@ function App({Component, pageProps}: AppProps) {
       <Toaster position={'top-right'} />
 
       <Component {...pageProps} />
-    </>
+    </div>
   );
 }
 
@@ -63,11 +82,18 @@ export default function WithProviders(props: AppProps) {
           title: 'Plunk | The Open-Source Email Platform',
           description:
             'Open-source email automation platform with workflows, segments, and developer API. Scale from 0 to millions of emails at $0.001 per email. Self-hostable and privacy-first.',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk'}],
         }}
         additionalMetaTags={[{property: 'title', content: 'Plunk | The Open-Source Email Platform'}]}
       />
 
+      <Script
+        defer
+        src="https://analytics.driaug.com/script.js"
+        data-website-id="6ed9fa6c-3a75-4926-ad4d-f607557f79f1"
+        data-domains="www.useplunk.com"
+      />
+
       <App {...props} />
     </SWRConfig>
   );

apps/landing/src/pages/_document.tsx

@@ -6,14 +6,6 @@ export default class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          {/* Start fonts */}
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500&display=swap"
-            rel="stylesheet"
-          />
-          {/* End fonts */}
           {/* Start favicon */}
           <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />

apps/landing/src/pages/api/md.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { MARKDOWN_PAGES } from '../../content/pages';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const pathname = req.headers['x-md-path'];
+  if (typeof pathname !== 'string') {
+    res.status(406).end();
+    return;
+  }
+
+  const slug = pathname.replace(/^\/+|\/+$/g, '') || 'index';
+
+  res.setHeader('Vary', 'Accept');
+
+  const content = MARKDOWN_PAGES[slug];
+  if (!content) {
+    res.status(406).end();
+    return;
+  }
+
+  res.setHeader('Content-Type', 'text/markdown; charset=utf-8');
+  res.status(200).send(content);
+}

apps/landing/src/pages/api/verify-email.ts

@@ -1,24 +1,16 @@
 import type {NextApiRequest, NextApiResponse} from 'next';
+import type {EmailVerificationResult} from '@plunk/types';
 import {UtilitySchemas} from '@plunk/shared';
 import {API_URI} from '../../lib/constants';
 
-interface VerifyEmailResponse {
-  email: string;
-  valid: boolean;
-  isDisposable: boolean;
-  isTypo: boolean;
-  isPlusAddressed: boolean;
-  domainExists: boolean;
-  hasMxRecords: boolean;
-  suggestedEmail?: string;
-  reasons: string[];
-}
-
 interface ErrorResponse {
   error: string;
 }
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse<VerifyEmailResponse | ErrorResponse>) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<EmailVerificationResult | ErrorResponse>,
+) {
   // Only allow POST requests
   if (req.method !== 'POST') {
     return res.status(405).json({error: 'Method not allowed'});

apps/landing/src/pages/dpa.tsx

@@ -0,0 +1,695 @@
+import {NextSeo} from 'next-seo';
+import React from 'react';
+import {Navbar} from '../components';
+
+export default function DataProcessingAgreement() {
+  return (
+    <>
+      <NextSeo
+        title="Plunk Data Processing Agreement (DPA) | GDPR Compliance"
+        description="Data Processing Agreement for Plunk customers. GDPR-compliant DPA covering data processing activities, sub-processors, security measures, and data subject rights."
+        openGraph={{
+          title: 'Plunk Data Processing Agreement (DPA) | GDPR Compliance',
+          description:
+            'Data Processing Agreement for Plunk customers. GDPR-compliant DPA covering data processing activities, sub-processors, security measures, and data subject rights.',
+        }}
+        additionalMetaTags={[
+          {
+            property: 'title',
+            content: 'Plunk Data Processing Agreement (DPA) | GDPR Compliance',
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-white">
+        <div className="px-8 pb-32 sm:px-12 md:px-16 lg:px-20 xl:px-24 2xl:px-56">
+          <Navbar />
+
+          <div className="mx-auto max-w-4xl py-16">
+            {/* Hero */}
+            <div className="mb-12">
+              <h1 className="text-4xl font-bold text-neutral-900">Data Processing Agreement</h1>
+              <p className="mt-2 text-sm text-neutral-600">Last Updated: February 18, 2026</p>
+              <p className="mt-4 text-base leading-relaxed text-neutral-700">
+                This Data Processing Agreement ("DPA") forms part of the Terms of Service between you ("Customer", "Data
+                Controller") and Plunk ("Processor", "we", "us") and governs the processing of Personal Data in
+                accordance with GDPR requirements.
+              </p>
+              <div className="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
+                <p className="text-sm leading-relaxed text-blue-900">
+                  <strong className="font-semibold">GDPR Requirement:</strong> This DPA is required under Article 28 of
+                  the GDPR. By using Plunk's hosted service, you accept and agree to the terms of this DPA.
+                </p>
+              </div>
+            </div>
+
+            {/* Table of Contents */}
+            <nav className="mb-12 rounded-lg border border-neutral-200 bg-neutral-50 p-6">
+              <h2 className="mb-4 text-lg font-semibold text-neutral-900">Contents</h2>
+              <ol className="space-y-2 text-sm text-neutral-700">
+                <li>
+                  <a href="#definitions" className="text-blue-600 hover:underline">
+                    1. Definitions
+                  </a>
+                </li>
+                <li>
+                  <a href="#scope" className="text-blue-600 hover:underline">
+                    2. Scope & Applicability
+                  </a>
+                </li>
+                <li>
+                  <a href="#processing-details" className="text-blue-600 hover:underline">
+                    3. Processing Details
+                  </a>
+                </li>
+                <li>
+                  <a href="#obligations" className="text-blue-600 hover:underline">
+                    4. Data Processor Obligations
+                  </a>
+                </li>
+                <li>
+                  <a href="#security" className="text-blue-600 hover:underline">
+                    5. Security Measures
+                  </a>
+                </li>
+                <li>
+                  <a href="#sub-processors" className="text-blue-600 hover:underline">
+                    6. Sub-Processors
+                  </a>
+                </li>
+                <li>
+                  <a href="#data-subject-rights" className="text-blue-600 hover:underline">
+                    7. Data Subject Rights
+                  </a>
+                </li>
+                <li>
+                  <a href="#data-breach" className="text-blue-600 hover:underline">
+                    8. Data Breach Notification
+                  </a>
+                </li>
+                <li>
+                  <a href="#international-transfers" className="text-blue-600 hover:underline">
+                    9. International Data Transfers
+                  </a>
+                </li>
+                <li>
+                  <a href="#audits" className="text-blue-600 hover:underline">
+                    10. Audits & Compliance
+                  </a>
+                </li>
+                <li>
+                  <a href="#deletion" className="text-blue-600 hover:underline">
+                    11. Data Deletion & Return
+                  </a>
+                </li>
+                <li>
+                  <a href="#liability" className="text-blue-600 hover:underline">
+                    12. Liability & Indemnification
+                  </a>
+                </li>
+                <li>
+                  <a href="#term" className="text-blue-600 hover:underline">
+                    13. Term & Termination
+                  </a>
+                </li>
+              </ol>
+            </nav>
+
+            {/* Content Sections */}
+            <div className="space-y-12">
+              {/* Section 1 */}
+              <section id="definitions" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">1. Definitions</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Terms used in this DPA have the meanings set forth in the GDPR. Specifically:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"Personal Data"</strong> means any information
+                    relating to an identified or identifiable natural person processed via Plunk
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"Data Controller"</strong> means the Customer who
+                    determines the purposes and means of processing Personal Data
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"Data Processor"</strong> means Plunk, which
+                    processes Personal Data on behalf of the Data Controller
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"Sub-processor"</strong> means any third party
+                    engaged by Plunk to process Personal Data
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"Data Subject"</strong> means the individuals
+                    whose Personal Data is processed (your contacts/subscribers)
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">"GDPR"</strong> means Regulation (EU) 2016/679
+                    (General Data Protection Regulation)
+                  </li>
+                </ul>
+              </section>
+
+              {/* Section 2 */}
+              <section id="scope" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">2. Scope & Applicability</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Hosted Service Only</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  This DPA applies ONLY to customers using Plunk's hosted service (useplunk.com). Self-hosted
+                  deployments are NOT covered by this DPA - you are solely responsible for GDPR compliance when
+                  self-hosting.
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Agreement Hierarchy</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  This DPA supplements the Plunk Terms of Service and Privacy Policy. In case of conflict regarding data
+                  processing:
+                </p>
+                <ol className="mb-4 ml-6 list-decimal space-y-2 text-neutral-700">
+                  <li>This DPA takes precedence</li>
+                  <li>Then the Terms of Service</li>
+                  <li>Then the Privacy Policy</li>
+                </ol>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Acceptance</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  By using Plunk's hosted service, you acknowledge that you have read, understood, and agree to be bound
+                  by this DPA. This constitutes a legally binding agreement between Customer and Plunk.
+                </p>
+              </section>
+
+              {/* Section 3 */}
+              <section id="processing-details" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">3. Processing Details</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  As required by GDPR Article 28(3), the following details describe the processing activities:
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Subject Matter</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Processing of Personal Data necessary to provide email automation, transactional email, marketing
+                  campaigns, and workflow automation services.
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Duration</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Processing occurs for the duration of your Plunk subscription/account, plus 30 days for API logs
+                  (which are automatically deleted), and until you request account deletion.
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Nature & Purpose</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Storing and managing contact databases</li>
+                  <li>Sending transactional, marketing, and workflow-triggered emails</li>
+                  <li>Tracking email delivery, opens, clicks, bounces, and complaints (per your settings)</li>
+                  <li>Managing email templates and automation workflows</li>
+                  <li>Processing email events and webhooks</li>
+                  <li>Providing analytics and reporting</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Type of Personal Data</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Email addresses (required)</li>
+                  <li>Names and custom contact fields (optional, Customer-defined)</li>
+                  <li>Email content (subject lines, message bodies, attachments)</li>
+                  <li>Subscription status and preferences</li>
+                  <li>Email activity data (opens, clicks, bounces, complaints)</li>
+                  <li>Timestamps and metadata</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Categories of Data Subjects</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Customer's email subscribers and contacts</li>
+                  <li>Recipients of transactional emails</li>
+                  <li>Marketing campaign recipients</li>
+                  <li>Workflow automation recipients</li>
+                </ul>
+              </section>
+
+              {/* Section 4 */}
+              <section id="obligations" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">4. Data Processor Obligations</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Plunk commits to the following obligations as Data Processor:
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Processing Instructions</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    Process Personal Data only on documented instructions from Customer (via API, dashboard, etc.)
+                  </li>
+                  <li>Not process Personal Data for any other purpose without Customer's prior written consent</li>
+                  <li>Immediately inform Customer if instructions violate GDPR or other EU data protection laws</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Confidentiality</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Ensure persons authorized to process Personal Data are bound by confidentiality obligations</li>
+                  <li>Maintain confidentiality of all Personal Data processed via Plunk</li>
+                  <li>
+                    Not disclose Personal Data to third parties except as required by law or with Customer consent
+                  </li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Cooperation</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Assist Customer in responding to Data Subject rights requests (see Section 7)</li>
+                  <li>
+                    Assist Customer in ensuring compliance with GDPR security, breach notification, and impact
+                    assessment obligations
+                  </li>
+                  <li>Provide information necessary to demonstrate compliance with Article 28</li>
+                </ul>
+              </section>
+
+              {/* Section 5 */}
+              <section id="security" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">5. Security Measures</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  As required by GDPR Article 32, Plunk implements appropriate technical and organizational measures to
+                  ensure a level of security appropriate to the risk:
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Technical Safeguards</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Industry-standard password hashing (never stored in plaintext)</li>
+                  <li>HTTPS-only API access (TLS 1.2+)</li>
+                  <li>Database connections encrypted via TLS/SSL</li>
+                  <li>HttpOnly, secure cookies with appropriate SameSite settings</li>
+                  <li>Authentication tokens with limited expiration periods</li>
+                  <li>Rate limiting to prevent brute force attacks</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Organizational Safeguards</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Access controls limiting personnel access to Personal Data</li>
+                  <li>Automated bounce and complaint rate monitoring</li>
+                  <li>Regular security updates and patching</li>
+                  <li>Data segregation by project (multi-tenancy with isolation)</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Data Residency</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Primary data storage: EU/EEA (Hetzner infrastructure)</li>
+                  <li>Database and file storage remain within EU/EEA</li>
+                  <li>Email delivery may transit non-EU regions (see Section 9)</li>
+                </ul>
+              </section>
+
+              {/* Section 6 */}
+              <section id="sub-processors" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">6. Sub-Processors</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Customer authorizes Plunk to engage the following sub-processors to process Personal Data:
+                </p>
+
+                <div className="mb-6 overflow-x-auto">
+                  <table className="min-w-full border border-neutral-300">
+                    <thead className="bg-neutral-50">
+                      <tr>
+                        <th className="border border-neutral-300 px-4 py-2 text-left text-sm font-semibold text-neutral-900">
+                          Sub-Processor
+                        </th>
+                        <th className="border border-neutral-300 px-4 py-2 text-left text-sm font-semibold text-neutral-900">
+                          Service
+                        </th>
+                        <th className="border border-neutral-300 px-4 py-2 text-left text-sm font-semibold text-neutral-900">
+                          Location
+                        </th>
+                        <th className="border border-neutral-300 px-4 py-2 text-left text-sm font-semibold text-neutral-900">
+                          Purpose
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="bg-white">
+                      <tr>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Amazon Web Services (AWS SES)
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">Email Delivery</td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Global (data in transit only)
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Sending emails to recipients
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">Stripe, Inc.</td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Payment Processing
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          USA (PCI-DSS compliant)
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Billing for paid accounts
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Hetzner Online GmbH
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Infrastructure Hosting
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          EU/EEA (Germany)
+                        </td>
+                        <td className="border border-neutral-300 px-4 py-2 text-sm text-neutral-700">
+                          Database and application hosting
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Sub-Processor Obligations</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>All sub-processors are bound by data protection obligations equivalent to this DPA</li>
+                  <li>Plunk remains fully liable to Customer for sub-processor performance</li>
+                  <li>Sub-processors have executed Data Processing Agreements with Plunk</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Changes to Sub-Processors</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Plunk will provide 30 days advance notice of new or replacement sub-processors via email</li>
+                  <li>Notice will be sent to the email address associated with your account</li>
+                  <li>
+                    If you object on reasonable grounds related to data protection, you may terminate your account
+                    within 30 days
+                  </li>
+                  <li>Updated sub-processor list will be maintained on this page (check "Last Updated" date)</li>
+                </ul>
+              </section>
+
+              {/* Section 7 */}
+              <section id="data-subject-rights" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">7. Data Subject Rights</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Plunk will assist Customer in fulfilling Data Subject rights requests under GDPR Articles 15-22:
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Self-Service via API</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Customer can fulfill most Data Subject requests independently via API:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    <strong className="font-semibold text-neutral-900">Access (Art. 15):</strong> Retrieve contact data
+                    via GET /contacts/:id
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">Rectification (Art. 16):</strong> Update contact
+                    data via PATCH /contacts/:id
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">Erasure (Art. 17):</strong> Delete contact via
+                    DELETE /contacts/:id
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">Restriction (Art. 18):</strong> Update
+                    subscription status to "unsubscribed"
+                  </li>
+                  <li>
+                    <strong className="font-semibold text-neutral-900">Portability (Art. 20):</strong> Use API to access
+                    data in JSON format
+                  </li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Assistance from Plunk</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  If Customer cannot fulfill a request via API, contact [email protected]:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Provide Data Subject's email address and nature of request</li>
+                  <li>Plunk will respond within 10 business days with requested information or assistance</li>
+                  <li>
+                    Customer remains responsible for verifying Data Subject identity before disclosing information
+                  </li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Email Activity Data</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Email opens, clicks, bounces, and complaints are linked to contact records</li>
+                  <li>Deleting a contact will cascade delete associated email activity</li>
+                  <li>API logs (non-Personal Data) are automatically deleted after 30 days</li>
+                </ul>
+              </section>
+
+              {/* Section 8 */}
+              <section id="data-breach" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">8. Data Breach Notification</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Notification Obligation</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  In the event of a Personal Data breach affecting Customer data, Plunk will:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    Notify Customer without undue delay and within 72 hours of becoming aware of the breach (per GDPR
+                    Art. 33)
+                  </li>
+                  <li>Send notification to the primary email address associated with Customer's account</li>
+                  <li>Provide information to enable Customer to meet any GDPR breach reporting obligations</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Breach Information</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Notifications will include (to the extent known):
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Nature of the breach (what happened)</li>
+                  <li>Categories and approximate number of Data Subjects affected</li>
+                  <li>Categories and approximate number of Personal Data records affected</li>
+                  <li>Likely consequences of the breach</li>
+                  <li>Measures taken or proposed to address the breach and mitigate harm</li>
+                  <li>Contact point for more information ([email protected])</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Customer Responsibility</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Customer is responsible for notifying their supervisory authority if required by GDPR Art. 33</li>
+                  <li>Customer is responsible for notifying affected Data Subjects if required by GDPR Art. 34</li>
+                  <li>Plunk's breach notification to Customer does NOT constitute legal or compliance advice</li>
+                </ul>
+              </section>
+
+              {/* Section 9 */}
+              <section id="international-transfers" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">9. International Data Transfers</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Primary Storage (EU/EEA)</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>All contact data, templates, workflows, and account data stored in EU/EEA (Hetzner, Germany)</li>
+                  <li>No routine transfers of stored Personal Data outside EU/EEA</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Data in Transit (Email Delivery)</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  When emails are sent to recipients, Personal Data may transit through non-EU regions:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>AWS SES processes emails globally for delivery purposes</li>
+                  <li>Data is in transit only (not stored long-term outside EU/EEA)</li>
+                  <li>Protected by AWS Data Processing Agreement and Standard Contractual Clauses (SCCs)</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Payment Data (Stripe)</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Payment information (credit cards) processed by Stripe (USA-based)</li>
+                  <li>Stripe is PCI-DSS Level 1 certified</li>
+                  <li>Protected by Stripe's Data Processing Agreement and Standard Contractual Clauses</li>
+                  <li>Plunk does NOT store credit card numbers (tokenized by Stripe)</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Standard Contractual Clauses</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  All sub-processors that process Personal Data outside EU/EEA have executed Standard Contractual
+                  Clauses (SCCs) approved by the European Commission, providing appropriate safeguards for international
+                  transfers per GDPR Article 46.
+                </p>
+              </section>
+
+              {/* Section 10 */}
+              <section id="audits" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">10. Audits & Compliance</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Information Provision</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Plunk will make available to Customer information necessary to demonstrate compliance with GDPR
+                  Article 28 obligations, including:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>This DPA (publicly available)</li>
+                  <li>Privacy Policy describing processing activities</li>
+                  <li>Sub-processor list (Section 6 above)</li>
+                  <li>Security measures documentation (available upon reasonable request)</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Audit Rights</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Customer may audit Plunk's compliance with this DPA, subject to the following:
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Audits limited to once per year unless required by supervisory authority</li>
+                  <li>Request must be submitted in writing to legal@useplunk.com with 30 days notice</li>
+                  <li>Audits must be conducted by independent third-party auditors bound by confidentiality</li>
+                  <li>Audits conducted during business hours with minimal disruption to operations</li>
+                  <li>Customer bears all costs of audit</li>
+                  <li>Audit scope limited to GDPR compliance (not general security assessments)</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Alternative to Audits</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  In lieu of conducting a full audit, Customer may request and review sub-processor certifications and
+                  compliance documentation (SOC 2, ISO 27001, etc.) where available.
+                </p>
+              </section>
+
+              {/* Section 11 */}
+              <section id="deletion" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">11. Data Deletion & Return</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Account Deletion</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  When Customer deletes their Plunk account (via dashboard or by request):
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>All Personal Data is immediately deleted from production systems</li>
+                  <li>No grace period or recovery window (deletion is permanent)</li>
+                  <li>
+                    Customer should access or backup data via API before deletion (Plunk does NOT provide data export)
+                  </li>
+                  <li>Deletion includes: contacts, emails, templates, workflows, campaigns, and email activity</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Backup Retention</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Deleted data may remain in encrypted backups for up to 30 days for disaster recovery purposes</li>
+                  <li>Backup data is not accessible or restorable after account deletion</li>
+                  <li>Backups are automatically overwritten after retention period</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Legal Retention</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Plunk may retain certain data if required by law (e.g., accounting records, fraud prevention):
+                </p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Billing records: Retained per tax/accounting laws (typically 7 years)</li>
+                  <li>Fraud/abuse records: Retained for security purposes (email addresses of suspended accounts)</li>
+                  <li>Legal requests: Data subject to legal holds retained as required by law</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">No Data Return</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Plunk does NOT provide data export or return upon termination. Customer must retrieve data via API
+                  before deleting account. Once deleted, data cannot be recovered.
+                </p>
+              </section>
+
+              {/* Section 12 */}
+              <section id="liability" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">12. Liability & Indemnification</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Customer Responsibilities</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">Customer (Data Controller) is responsible for:</p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    Ensuring lawful basis for processing under GDPR (consent, contract, legitimate interest, etc.)
+                  </li>
+                  <li>Obtaining necessary consents from Data Subjects before adding them to Plunk</li>
+                  <li>Providing privacy notices to Data Subjects per GDPR Article 13/14</li>
+                  <li>Complying with anti-spam laws (CAN-SPAM, CASL, GDPR, etc.)</li>
+                  <li>Verifying Data Subject identity before fulfilling rights requests</li>
+                  <li>Notifying supervisory authorities and Data Subjects of breaches where required</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Plunk's Liability</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Plunk is liable to Customer for compliance with this DPA and GDPR Article 28 obligations</li>
+                  <li>Plunk is liable for sub-processor acts/omissions to the same extent as its own acts</li>
+                  <li>
+                    Liability limitations in Terms of Service apply, except where prohibited by GDPR (particularly Art.
+                    82)
+                  </li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Indemnification</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>
+                    Customer indemnifies Plunk for claims arising from Customer's violation of GDPR or data protection
+                    laws
+                  </li>
+                  <li>
+                    Plunk indemnifies Customer for claims arising solely from Plunk's breach of this DPA or GDPR Article
+                    28
+                  </li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">GDPR Fines</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Under GDPR Article 82(3), liability for damages is allocated between Controller and Processor based on
+                  fault. Each party is liable only for the damage caused by its own GDPR violation.
+                </p>
+              </section>
+
+              {/* Section 13 */}
+              <section id="term" className="mb-12">
+                <h2 className="mb-4 text-2xl font-bold text-neutral-900">13. Term & Termination</h2>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Effective Date</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  This DPA is effective as of the date you first use Plunk's hosted service and remains in effect for
+                  the duration of the Terms of Service.
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Termination</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">This DPA terminates automatically when:</p>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Customer deletes their Plunk account</li>
+                  <li>Terms of Service are terminated</li>
+                  <li>All Personal Data has been deleted per Section 11</li>
+                </ul>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">Survival</h3>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  Obligations regarding confidentiality, data deletion, and liability survive termination to the extent
+                  necessary to fulfill their purpose.
+                </p>
+
+                <h3 className="mb-3 mt-6 text-xl font-semibold text-neutral-900">DPA Updates</h3>
+                <ul className="mb-4 ml-6 list-disc space-y-2 text-neutral-700">
+                  <li>Plunk may update this DPA to reflect changes in law, sub-processors, or processing activities</li>
+                  <li>Material changes will be notified via email 30 days in advance</li>
+                  <li>Continued use of Plunk after changes constitutes acceptance</li>
+                  <li>Check "Last Updated" date at top of page for version tracking</li>
+                </ul>
+              </section>
+
+              {/* Contact Section */}
+              <section className="mb-12 rounded-lg border border-neutral-200 bg-neutral-50 p-6">
+                <h2 className="mb-4 text-xl font-semibold text-neutral-900">Questions or Requests?</h2>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  For questions about this DPA, data processing activities, or to exercise audit rights:
+                </p>
+                <p className="mb-2 leading-relaxed text-neutral-700">
+                  <strong className="font-semibold text-neutral-900">Email:</strong> legal@useplunk.com
+                </p>
+                <p className="mb-4 leading-relaxed text-neutral-700">
+                  <strong className="font-semibold text-neutral-900">Response Time:</strong> Within 10 business days
+                </p>
+                <p className="text-sm text-neutral-600">
+                  For Data Subject rights requests, Customers should use the API (see Section 7) or contact
+                  legal@useplunk.com with Data Subject's email address and nature of request.
+                </p>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/landing/src/pages/features/email-editor.tsx

@@ -0,0 +1,381 @@
+import {Footer, Navbar} from '../../components';
+import {motion} from 'framer-motion';
+import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
+import React from 'react';
+import Link from 'next/link';
+import {ArrowRight, Code2, Eye, Mail, Palette, Sparkles, Type, Zap} from 'lucide-react';
+import Head from 'next/head';
+
+const features = [
+  {
+    icon: <Type className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Visual WYSIWYG Editor',
+    description:
+      'Rich text editing with formatting toolbar. Bold, italic, headings, lists, links, images, and tables. No code required.',
+    featured: true,
+  },
+  {
+    icon: <Code2 className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Full HTML Editor',
+    description: 'Syntax highlighting, auto-completion, and bracket matching. Write custom HTML when you need complete control.',
+  },
+  {
+    icon: <Zap className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Smart Mode Switching',
+    description: 'Automatically detects complex HTML and switches to code mode. Warns you before changes that would lose custom formatting.',
+  },
+  {
+    icon: <Sparkles className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Powerful Variables',
+    description: 'Autocomplete with {{variable}} syntax. Supports fallbacks, nested properties, and custom contact fields.',
+  },
+  {
+    icon: <Eye className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Live Preview',
+    description: 'Preview with real contact data. Test on desktop, tablet, and mobile views before sending.',
+  },
+  {
+    icon: <Palette className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Email-Safe HTML',
+    description: 'Automatic CSS inlining and email-client-friendly code generation. Yes, even in Outlook.',
+  },
+];
+
+const useCases = [
+  {
+    icon: <Code2 className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'For Developers',
+    description:
+      'Full HTML control when you need it. Powerful variable system with autocomplete and fallbacks. Use templates in API calls, workflows, and campaigns.',
+    example: 'Password resets → API-triggered alerts → Webhook notifications',
+  },
+  {
+    icon: <Palette className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'For Marketers',
+    description:
+      'Visual editor for quick changes. Live preview with real customer data. Create professional emails without waiting for developers.',
+    example: 'Product announcements → Newsletter campaigns → Promotional emails → Customer onboarding',
+  },
+  {
+    icon: <Zap className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'For Teams',
+    description:
+      'One tool for everyone. Developers can code, marketers can design, everyone can preview. Reusable templates across campaigns and workflows.',
+    example: 'Launch announcements → Feature updates → User engagement → Lifecycle emails',
+  },
+];
+
+export default function EmailEditorFeature() {
+  return (
+    <>
+      <Head>
+        <title>Email Editor - Create Beautiful Emails Without Fighting Your Tools | Plunk</title>
+        <meta
+          name="description"
+          content="The email editor that speaks both languages. Switch seamlessly between visual and code editing, preview with real data, and create templates that work everywhere."
+        />
+        <meta property="og:title" content="Email Editor - Create Beautiful Emails Without Fighting Your Tools | Plunk" />
+        <meta
+          property="og:description"
+          content="The email editor that speaks both languages. Switch seamlessly between visual and code editing, preview with real data, and create templates that work everywhere."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            >
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
+              >
+                <span className={'text-neutral-400'}>Features</span>
+                <span className={'mx-3 text-neutral-300'}>—</span>
+                <span className={'font-medium text-neutral-900'}>Email Editor & Templates</span>
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
+                The editor that
+                <br />
+                speaks both languages.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Switch seamlessly between visual and code editing. Preview with real customer data. Create templates that
+                work everywhere.
+              </p>
+
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
+                >
+                  Try the editor free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  className={
+                    'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
+                >
+                  View documentation
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Features grid */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Two editors, one experience
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Visual editing for speed, code editing for control</p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
+              {features.map((feature, index) => {
+                const highlighted = feature.featured;
+                return (
+                  <motion.div
+                    key={feature.title}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                    className={
+                      highlighted
+                        ? 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white'
+                        : 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                    }
+                  >
+                    <div className={'flex items-start justify-between'}>
+                      <div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={`text-[11px] uppercase tracking-[0.18em] ${highlighted ? 'text-neutral-500' : 'text-neutral-400'}`}
+                      >
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        style={{fontFamily: 'var(--font-display)'}}
+                        className={`mt-8 text-xl font-bold tracking-[-0.02em] ${highlighted ? 'text-white' : 'text-neutral-900'}`}
+                      >
+                        {feature.title}
+                      </h3>
+                      <p className={`mt-2 text-sm leading-relaxed ${highlighted ? 'text-neutral-300' : 'text-neutral-600'}`}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* How it works */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                From first draft to send
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Create, preview, and deploy templates in minutes</p>
+            </motion.div>
+
+            <div className={'mx-auto max-w-4xl'}>
+              <div className={'grid gap-px bg-neutral-200 sm:grid-cols-3'}>
+                {[
+                  {
+                    step: '01',
+                    title: 'Create your template',
+                    body: 'Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete.',
+                  },
+                  {
+                    step: '02',
+                    title: 'Preview with real data',
+                    body: 'Select any contact and see exactly what they\'ll receive. Test on desktop, tablet, and mobile.',
+                  },
+                  {
+                    step: '03',
+                    title: 'Use everywhere',
+                    body: 'Use your template in campaigns, workflows, and API calls. One template, unlimited uses.',
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    key={item.step}
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                    className={'bg-white p-10'}
+                  >
+                    <div
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
+                    >
+                      Step {item.step}
+                    </div>
+                    <h3 className={'text-lg font-semibold text-neutral-900'}>{item.title}</h3>
+                    <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{item.body}</p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use cases */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Built for every team
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Whether you&apos;re a developer, marketer, or founder</p>
+            </motion.div>
+
+            <ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {useCases.map((useCase, index) => (
+                <motion.li
+                  key={useCase.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
+                >
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
+                  >
+                    {useCase.title}
+                  </h3>
+                  <div className={'col-span-12 sm:col-span-8'}>
+                    <p className={'leading-relaxed text-neutral-600'}>{useCase.description}</p>
+                    <p
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mt-5 text-[11px] uppercase tracking-[0.16em] text-neutral-400'}
+                    >
+                      {useCase.example}
+                    </p>
+                  </div>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Build your first template today.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Free plan available. $0.001 per email on paid. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started for free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/pages/features/inbound-email.tsx

@@ -0,0 +1,385 @@
+import {Footer, Navbar} from '../../components';
+import {motion} from 'framer-motion';
+import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
+import React from 'react';
+import Link from 'next/link';
+import {ArrowRight, Bell, Database, Inbox, Mail, Shield, Zap} from 'lucide-react';
+import Head from 'next/head';
+
+const features = [
+  {
+    icon: <Database className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Automatic Contact Capture',
+    description: 'Every sender is automatically added to your contact database with no manual data entry required.',
+    featured: true,
+  },
+  {
+    icon: <Zap className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Workflow Automation',
+    description: 'Trigger automated workflows when emails are received to create sophisticated two-way communication.',
+  },
+  {
+    icon: <Shield className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Built-in Security',
+    description: 'Spam, virus, SPF, DKIM, and DMARC filtering keeps your inbox clean. The spam stays out, the good stuff gets in.',
+  },
+  {
+    icon: <Bell className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Webhook Notifications',
+    description: 'Get instant notifications with rich metadata whenever an email arrives at your domain.',
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Simple DNS Setup',
+    description: 'Add one MX record to your domain and start receiving emails immediately. No PhD required.',
+  },
+  {
+    icon: <Inbox className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Real-Time Processing',
+    description: 'Emails are processed instantly and can trigger workflows or webhooks in real-time.',
+  },
+];
+
+const useCases = [
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Support Ticket Creation',
+    description:
+      'Automatically create support tickets when customers email [email protected]. Send auto-replies and route to your help desk system via webhooks. Your support team will thank you.',
+    benefits: ['Instant acknowledgment', 'Automatic ticket creation', 'No emails missed'],
+  },
+  {
+    icon: <Database className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Lead Capture from Email',
+    description:
+      'Receive emails at [email protected] and automatically add senders to your CRM. Trigger nurture workflows based on when they reached out.',
+    benefits: ['Zero-friction lead capture', 'Auto-segmentation', 'Instant follow-up'],
+  },
+  {
+    icon: <Zap className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Two-Way Conversations',
+    description:
+      'Let customers reply to your campaign emails and automatically trigger engagement workflows. Tag contacts as "engaged" when they respond.',
+    benefits: ['Build conversation history', 'Track engagement', 'Personalized responses'],
+  },
+];
+
+export default function InboundEmailFeature() {
+  return (
+    <>
+      <Head>
+        <title>Inbound Email - Receive & Process Incoming Emails | Plunk</title>
+        <meta
+          name="description"
+          content="Receive emails at your custom domain and automatically process them. Capture leads, create support tickets, and trigger workflows from incoming emails."
+        />
+        <meta property="og:title" content="Inbound Email - Turn Incoming Emails into Automated Actions | Plunk" />
+        <meta
+          property="og:description"
+          content="Receive emails at your custom domain and automatically process them. Capture leads, create support tickets, and trigger workflows from incoming emails."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            >
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
+              >
+                <span className={'text-neutral-400'}>Features</span>
+                <span className={'mx-3 text-neutral-300'}>—</span>
+                <span className={'font-medium text-neutral-900'}>Inbound Email</span>
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
+                Emails in,
+                <br />
+                actions out.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Receive emails at your custom domain and automatically trigger workflows, capture leads, or create support
+                tickets. Two-way email communication made simple.
+              </p>
+
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
+                >
+                  Start receiving emails
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  className={
+                    'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
+                >
+                  View documentation
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Features grid */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Complete inbound email solution
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to receive and process incoming emails</p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
+              {features.map((feature, index) => {
+                const highlighted = feature.featured;
+                return (
+                  <motion.div
+                    key={feature.title}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                    className={
+                      highlighted
+                        ? 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white'
+                        : 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                    }
+                  >
+                    <div className={'flex items-start justify-between'}>
+                      <div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={`text-[11px] uppercase tracking-[0.18em] ${highlighted ? 'text-neutral-500' : 'text-neutral-400'}`}
+                      >
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        style={{fontFamily: 'var(--font-display)'}}
+                        className={`mt-8 text-xl font-bold tracking-[-0.02em] ${highlighted ? 'text-white' : 'text-neutral-900'}`}
+                      >
+                        {feature.title}
+                      </h3>
+                      <p className={`mt-2 text-sm leading-relaxed ${highlighted ? 'text-neutral-300' : 'text-neutral-600'}`}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* How it works */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Set up in minutes
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>One MX record is all it takes</p>
+            </motion.div>
+
+            <div className={'mx-auto max-w-4xl'}>
+              <div className={'grid gap-px bg-neutral-200 sm:grid-cols-3'}>
+                {[
+                  {
+                    step: '01',
+                    title: 'Verify your domain',
+                    body: 'Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings.',
+                  },
+                  {
+                    step: '02',
+                    title: 'Add MX record',
+                    body: 'Add one MX record to your DNS to route incoming emails to Plunk. Copy the record directly from your dashboard.',
+                  },
+                  {
+                    step: '03',
+                    title: 'Start receiving',
+                    body: 'Emails sent to any address at your domain are automatically received and can trigger workflows or webhooks.',
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    key={item.step}
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                    className={'bg-white p-10'}
+                  >
+                    <div
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
+                    >
+                      Step {item.step}
+                    </div>
+                    <h3 className={'text-lg font-semibold text-neutral-900'}>{item.title}</h3>
+                    <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{item.body}</p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use cases */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Powerful use cases
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>From support to sales, inbound email unlocks new automation possibilities</p>
+            </motion.div>
+
+            <ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {useCases.map((useCase, index) => (
+                <motion.li
+                  key={useCase.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
+                >
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
+                  >
+                    {useCase.title}
+                  </h3>
+                  <div className={'col-span-12 sm:col-span-8'}>
+                    <p className={'leading-relaxed text-neutral-600'}>{useCase.description}</p>
+                    <div className={'mt-5 flex flex-wrap gap-x-6 gap-y-1'}>
+                      {useCase.benefits.map(b => (
+                        <span
+                          key={b}
+                          style={{fontFamily: 'var(--font-mono)'}}
+                          className={'text-[11px] uppercase tracking-[0.16em] text-neutral-400'}
+                        >
+                          → {b}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Your domain can receive emails too.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Free plan available. $0.001 per email on paid. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started for free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/pages/features/segments.tsx

@@ -0,0 +1,445 @@
+import {Footer, Navbar} from '../../components';
+import {motion} from 'framer-motion';
+import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
+import React from 'react';
+import Link from 'next/link';
+import {ArrowRight, Filter, GitBranch, Mail, Target, TrendingUp, Users} from 'lucide-react';
+import Head from 'next/head';
+
+const features = [
+  {
+    icon: <Filter className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Dynamic Filtering',
+    description: 'Create segments based on contact data, custom fields, email activity, and events with powerful AND/OR logic.',
+    featured: true,
+  },
+  {
+    icon: <TrendingUp className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Real-Time Updates',
+    description: 'Dynamic segments automatically update as contact data changes, always keeping your audience current.',
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Workflow Integration',
+    description: 'Trigger workflows when contacts enter or exit segments, or use segment conditions in workflow branching.',
+  },
+  {
+    icon: <Target className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Campaign Targeting',
+    description: 'Send targeted campaigns to specific segments instead of your entire contact list. Less noise, more signal.',
+  },
+  {
+    icon: <Users className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Static Segments',
+    description: 'Manually curate contact lists for special groups like beta testers or VIP customers.',
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Behavior-Based',
+    description: 'Segment by email engagement — who opened, clicked, bounced, or never received your emails.',
+  },
+];
+
+const filterExamples = [
+  {
+    title: 'Active Users',
+    description: 'Target users who signed up recently and are actively engaging',
+    filters: ['Created within 30 days', 'Opened email within 7 days', 'Custom field: plan equals "pro"'],
+  },
+  {
+    title: 'Re-engagement Needed',
+    description: 'Find inactive users who need a nudge to come back',
+    filters: ['Last activity older than 60 days', 'Email sent but not opened', 'Subscribed equals true'],
+  },
+  {
+    title: 'High-Value Customers',
+    description: 'Identify your most valuable customers for special treatment',
+    filters: ['Custom field: totalSpent greater than 1000', 'Triggered event: purchase', 'Plan equals "enterprise"'],
+  },
+];
+
+const useCases = [
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Targeted Campaigns',
+    description:
+      'Send newsletters and announcements to specific audience segments instead of blasting everyone. Increase open rates by sending relevant content to the right people.',
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Behavior-Based Workflows',
+    description:
+      'Trigger workflows when contacts enter segments like "VIP Customers" or "Churning Users". Create personalized automations based on segment membership.',
+  },
+  {
+    icon: <Target className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'A/B Testing',
+    description:
+      'Create segments for test groups and control groups. Send different campaigns to each segment and measure results.',
+  },
+];
+
+export default function SegmentsFeature() {
+  return (
+    <>
+      <Head>
+        <title>Audience Segmentation - Target the Right Contacts | Plunk</title>
+        <meta
+          name="description"
+          content="Create dynamic and static segments to organize your contacts. Filter by behavior, attributes, and engagement. Target campaigns and trigger workflows based on segment membership."
+        />
+        <meta property="og:title" content="Audience Segmentation - Smart Contact Organization | Plunk" />
+        <meta
+          property="og:description"
+          content="Create dynamic and static segments to organize your contacts. Filter by behavior, attributes, and engagement."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            >
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
+              >
+                <span className={'text-neutral-400'}>Features</span>
+                <span className={'mx-3 text-neutral-300'}>—</span>
+                <span className={'font-medium text-neutral-900'}>Audience Segmentation</span>
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
+                Target the right audience,
+                <br />
+                every time.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted
+                campaigns and trigger personalized workflows.
+              </p>
+
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
+                >
+                  Start segmenting
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  className={
+                    'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
+                >
+                  View documentation
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Features grid */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                The right message to the right person
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Build precise audiences and send campaigns that land</p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
+              {features.map((feature, index) => {
+                const highlighted = feature.featured;
+                return (
+                  <motion.div
+                    key={feature.title}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                    className={
+                      highlighted
+                        ? 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white'
+                        : 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                    }
+                  >
+                    <div className={'flex items-start justify-between'}>
+                      <div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={`text-[11px] uppercase tracking-[0.18em] ${highlighted ? 'text-neutral-500' : 'text-neutral-400'}`}
+                      >
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        style={{fontFamily: 'var(--font-display)'}}
+                        className={`mt-8 text-xl font-bold tracking-[-0.02em] ${highlighted ? 'text-white' : 'text-neutral-900'}`}
+                      >
+                        {feature.title}
+                      </h3>
+                      <p className={`mt-2 text-sm leading-relaxed ${highlighted ? 'text-neutral-300' : 'text-neutral-600'}`}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* Filter examples */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Flexible filtering options
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Build complex segments with nested AND/OR logic</p>
+            </motion.div>
+
+            <div className={'space-y-5'}>
+              {filterExamples.map((example, index) => (
+                <motion.div
+                  key={example.title}
+                  initial={{opacity: 0, y: 20}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                  className={'rounded-[24px] border border-neutral-200 bg-white p-8'}
+                >
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'text-xl font-bold tracking-[-0.02em] text-neutral-900'}
+                  >
+                    {example.title}
+                  </h3>
+                  <p className={'mt-1 text-neutral-600'}>{example.description}</p>
+                  <div className={'mt-6 space-y-2'}>
+                    {example.filters.map((filter, filterIndex) => (
+                      <div key={filterIndex} className={'flex items-center gap-3 rounded-xl border border-neutral-100 bg-neutral-50 px-4 py-3'}>
+                        <Filter className="h-4 w-4 flex-shrink-0 text-neutral-400" />
+                        <span style={{fontFamily: 'var(--font-mono)'}} className={'text-sm text-neutral-700'}>
+                          {filter}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Segment types */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Two types of segments
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2'}>
+              {[
+                {
+                  icon: <TrendingUp className="h-6 w-6" strokeWidth={1.5} />,
+                  title: 'Dynamic Segments',
+                  description: 'Automatically update based on filter conditions. As contact data changes, segment membership updates in real-time.',
+                  bullets: ['Filter-based membership', 'Automatic updates', 'Optional entry/exit tracking'],
+                },
+                {
+                  icon: <Users className="h-6 w-6" strokeWidth={1.5} />,
+                  title: 'Static Segments',
+                  description: 'Manually curate your segment by adding specific contacts. Membership stays fixed until you change it.',
+                  bullets: ['Manual contact selection', 'Fixed membership', 'Perfect for VIP lists'],
+                },
+              ].map((type, i) => (
+                <motion.div
+                  key={type.title}
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                  className={'rounded-[24px] border border-neutral-200 bg-white p-8'}
+                >
+                  <div className={'text-neutral-900'}>{type.icon}</div>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}
+                  >
+                    {type.title}
+                  </h3>
+                  <p className={'mt-2 text-neutral-600'}>{type.description}</p>
+                  <ul className={'mt-6 space-y-2'}>
+                    {type.bullets.map(b => (
+                      <li key={b} className={'flex items-center gap-2 text-sm text-neutral-600'}>
+                        <div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-900'} />
+                        {b}
+                      </li>
+                    ))}
+                  </ul>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Use cases */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Use segments everywhere
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p>
+            </motion.div>
+
+            <ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {useCases.map((useCase, index) => (
+                <motion.li
+                  key={useCase.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
+                >
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
+                  >
+                    {useCase.title}
+                  </h3>
+                  <p className={'col-span-12 leading-relaxed text-neutral-600 sm:col-span-8'}>
+                    {useCase.description}
+                  </p>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Stop sending the same email to everyone.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Build precise audience segments and watch your open rates climb. 1,000 emails free, no credit card
+                  required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started for free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/pages/features/smtp.tsx

@@ -0,0 +1,380 @@
+import {Footer, Navbar} from '../../components';
+import {motion} from 'framer-motion';
+import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
+import React from 'react';
+import Link from 'next/link';
+import {ArrowRight, Code2, Lock, Mail, Server, Settings, Shield} from 'lucide-react';
+import Head from 'next/head';
+
+const features = [
+  {
+    icon: <Settings className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Simple Configuration',
+    description: 'Quick setup with your project credentials. Works with any email client or application.',
+    featured: true,
+  },
+  {
+    icon: <Lock className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Secure Connections',
+    description: 'TLS/SSL encryption on ports 465 and 587. Your emails are always transmitted securely.',
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Universal Compatibility',
+    description: 'Works with Outlook, Thunderbird, Apple Mail, or any SMTP-compatible application.',
+  },
+  {
+    icon: <Server className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Domain Validation',
+    description: 'Automatic verification that your sender domain is verified before accepting emails.',
+  },
+  {
+    icon: <Shield className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Full Feature Support',
+    description: 'Attachments, custom headers, HTML emails, and multiple recipients.',
+  },
+  {
+    icon: <Code2 className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Same Infrastructure',
+    description: 'SMTP emails use the same reliable delivery infrastructure as API emails with full tracking.',
+  },
+];
+
+const comparisonData = [
+  {feature: 'Protocol', traditional: 'SMTP', plunkSMTP: 'SMTP', plunkAPI: 'HTTP/REST'},
+  {feature: 'Setup Complexity', traditional: 'Medium', plunkSMTP: 'Easy', plunkAPI: 'Easy'},
+  {feature: 'Tracking & Analytics', traditional: '✗', plunkSMTP: '✓', plunkAPI: '✓'},
+  {feature: 'Works with Email Clients', traditional: '✓', plunkSMTP: '✓', plunkAPI: '✗'},
+  {feature: 'Domain Verification', traditional: 'Manual', plunkSMTP: 'Automatic', plunkAPI: 'Automatic'},
+  {feature: 'Attachments', traditional: '✓', plunkSMTP: '✓', plunkAPI: '✓'},
+  {feature: 'Template Support', traditional: '✗', plunkSMTP: '✗', plunkAPI: '✓'},
+  {feature: 'Workflow Automation', traditional: '✗', plunkSMTP: '✗', plunkAPI: '✓'},
+];
+
+const useCases = [
+  {
+    icon: <Settings className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Legacy System Integration',
+    description:
+      'Already have applications using SMTP? No need to rewrite code. Just swap your SMTP credentials and keep everything else the same.',
+    benefit: 'Zero code changes required',
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Email Client Sending',
+    description:
+      'Marketing teams can send emails directly from Outlook, Thunderbird, or Apple Mail using familiar tools without learning new APIs.',
+    benefit: 'No technical knowledge needed',
+  },
+  {
+    icon: <Code2 className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Framework Compatibility',
+    description:
+      'Works with any framework or language that supports SMTP. Perfect for older systems or platforms without HTTP API support.',
+    benefit: 'Universal protocol support',
+  },
+];
+
+export default function SMTPFeature() {
+  return (
+    <>
+      <Head>
+        <title>SMTP Email Sending - Send via SMTP or API | Plunk</title>
+        <meta
+          name="description"
+          content="Send emails via SMTP or API. Works with any email client or application. Secure TLS/SSL connections with automatic domain validation and full tracking."
+        />
+        <meta property="og:title" content="SMTP Email Sending - Flexible Sending Options | Plunk" />
+        <meta
+          property="og:description"
+          content="Send emails via SMTP or API. Works with any email client or application. Secure TLS/SSL connections with automatic domain validation and full tracking."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            >
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
+              >
+                <span className={'text-neutral-400'}>Features</span>
+                <span className={'mx-3 text-neutral-300'}>—</span>
+                <span className={'font-medium text-neutral-900'}>SMTP</span>
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
+                Send via SMTP
+                <br />
+                or API. Your call.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Use our HTTP API for modern apps or drop in SMTP credentials for any legacy system. Same deliverability,
+                same pricing, zero lock-in.
+              </p>
+
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
+                >
+                  Get SMTP credentials
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  className={
+                    'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
+                >
+                  View documentation
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Features grid */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                SMTP that works with everything
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>
+                Full authentication, tracking, and deliverability out of the box
+              </p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
+              {features.map((feature, index) => {
+                const highlighted = feature.featured;
+                return (
+                  <motion.div
+                    key={feature.title}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                    className={
+                      highlighted
+                        ? 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white'
+                        : 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                    }
+                  >
+                    <div className={'flex items-start justify-between'}>
+                      <div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={`text-[11px] uppercase tracking-[0.18em] ${highlighted ? 'text-neutral-500' : 'text-neutral-400'}`}
+                      >
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        style={{fontFamily: 'var(--font-display)'}}
+                        className={`mt-8 text-xl font-bold tracking-[-0.02em] ${highlighted ? 'text-white' : 'text-neutral-900'}`}
+                      >
+                        {feature.title}
+                      </h3>
+                      <p className={`mt-2 text-sm leading-relaxed ${highlighted ? 'text-neutral-300' : 'text-neutral-600'}`}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* Comparison table */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-12'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                SMTP vs API
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Choose the right option for your use case</p>
+            </motion.div>
+
+            <div className={'overflow-hidden rounded-[24px] border border-neutral-200 bg-white'}>
+              <table className={'w-full'}>
+                <thead className={'border-b border-neutral-200 bg-neutral-50'}>
+                  <tr>
+                    <th className={'px-6 py-4 text-left text-sm font-semibold text-neutral-900'}>Feature</th>
+                    <th className={'px-6 py-4 text-center text-sm font-semibold text-neutral-500'}>Traditional SMTP</th>
+                    <th className={'bg-neutral-900 px-6 py-4 text-center text-sm font-semibold text-white'}>Plunk SMTP</th>
+                    <th className={'px-6 py-4 text-center text-sm font-semibold text-neutral-500'}>Plunk API</th>
+                  </tr>
+                </thead>
+                <tbody className={'divide-y divide-neutral-100'}>
+                  {comparisonData.map((row, index) => (
+                    <tr key={index} className={'transition hover:bg-neutral-50'}>
+                      <td className={'px-6 py-4 text-sm font-medium text-neutral-900'}>{row.feature}</td>
+                      <td className={'px-6 py-4 text-center text-sm text-neutral-500'}>{row.traditional}</td>
+                      <td className={'bg-neutral-50 px-6 py-4 text-center text-sm font-semibold text-neutral-900'}>{row.plunkSMTP}</td>
+                      <td className={'px-6 py-4 text-center text-sm text-neutral-500'}>{row.plunkAPI}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <p className={'mt-4 text-sm text-neutral-500'}>
+              Recommendation: Use the API for modern applications with workflow automation. Use SMTP for email clients
+              and legacy systems.
+            </p>
+          </div>
+        </section>
+
+        {/* Use cases */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                When to use SMTP
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Perfect for these scenarios</p>
+            </motion.div>
+
+            <ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {useCases.map((useCase, index) => (
+                <motion.li
+                  key={useCase.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
+                >
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
+                  >
+                    {useCase.title}
+                  </h3>
+                  <div className={'col-span-12 sm:col-span-8'}>
+                    <p className={'leading-relaxed text-neutral-600'}>{useCase.description}</p>
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mt-5 inline-block text-[11px] uppercase tracking-[0.16em] text-neutral-400'}
+                    >
+                      → {useCase.benefit}
+                    </span>
+                  </div>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Start sending via SMTP today.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Get your SMTP credentials and start sending from any client or application. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started for free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/pages/features/workflows.tsx

@@ -0,0 +1,384 @@
+import {Footer, Navbar} from '../../components';
+import {motion} from 'framer-motion';
+import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
+import React from 'react';
+import Link from 'next/link';
+import {ArrowRight, Clock, GitBranch, Mail, RefreshCw, UserPlus, Webhook, Zap} from 'lucide-react';
+import Head from 'next/head';
+
+const features = [
+  {
+    icon: <Zap className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Event-Driven Triggers',
+    description: 'Start workflows automatically when users sign up, make a purchase, or perform any custom action.',
+    featured: true,
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Smart Email Sequences',
+    description: 'Send personalized emails at the right time with dynamic content based on user data.',
+  },
+  {
+    icon: <Clock className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Time-Based Delays',
+    description: 'Add strategic delays between steps to create perfectly timed email journeys. Patience is a virtue.',
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Conditional Logic',
+    description: 'Branch workflows based on user behavior, attributes, or engagement to personalize every journey.',
+  },
+  {
+    icon: <Webhook className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'External Integrations',
+    description: 'Connect to external systems with webhooks to sync data or trigger actions outside of Plunk.',
+  },
+  {
+    icon: <RefreshCw className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Re-entry Control',
+    description: 'Decide whether contacts can enter workflows multiple times or just once. No spam, just strategy.',
+  },
+];
+
+const useCases = [
+  {
+    icon: <UserPlus className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'User Onboarding',
+    description:
+      'Welcome new users with a personalized email series that guides them through your product features and helps them get started.',
+    example: 'Trigger on signup → Send welcome email → Wait 2 days → Send getting started tips',
+  },
+  {
+    icon: <Mail className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Abandoned Cart Recovery',
+    description:
+      'Automatically remind customers about items left in their cart with timely follow-ups and special incentives.',
+    example: 'Trigger on cart abandoned → Wait 1 hour → Send reminder → Wait 1 day → Send discount offer',
+  },
+  {
+    icon: <RefreshCw className="h-6 w-6" strokeWidth={1.5} />,
+    title: 'Re-engagement Campaigns',
+    description:
+      'Win back inactive users with targeted campaigns based on their last activity and engagement patterns.',
+    example: 'Trigger on 30 days inactive → Check if opened last email → Yes: Send update / No: Send special offer',
+  },
+];
+
+export default function WorkflowsFeature() {
+  return (
+    <>
+      <Head>
+        <title>Email Workflow Automation | Plunk</title>
+        <meta
+          name="description"
+          content="Build sophisticated email automation workflows with visual no-code builder. Create event-driven sequences, conditional branching, and time-based delays."
+        />
+        <meta property="og:title" content="Email Workflow Automation - Automate Your Email Marketing | Plunk" />
+        <meta
+          property="og:description"
+          content="Build sophisticated email automation workflows with visual no-code builder. Create event-driven sequences, conditional branching, and time-based delays."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+            >
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
+              >
+                <span className={'text-neutral-400'}>Features</span>
+                <span className={'mx-3 text-neutral-300'}>—</span>
+                <span className={'font-medium text-neutral-900'}>Workflow Automation</span>
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
+                Email automation
+                <br />
+                that actually works.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Turn events into personalized email journeys. Build sophisticated automation workflows with our visual
+                no-code builder.
+              </p>
+
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
+                >
+                  Start building workflows
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link
+                  href={WIKI_URI}
+                  target={'_blank'}
+                  className={
+                    'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
+                >
+                  View documentation
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Features grid */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'
+                }
+              >
+                Everything you need for email automation
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Powerful features that make complex automations simple</p>
+            </motion.div>
+
+            <div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
+              {features.map((feature, index) => {
+                const highlighted = feature.featured;
+                return (
+                  <motion.div
+                    key={feature.title}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                    className={
+                      highlighted
+                        ? 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white'
+                        : 'flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                    }
+                  >
+                    <div className={'flex items-start justify-between'}>
+                      <div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={`text-[11px] uppercase tracking-[0.18em] ${highlighted ? 'text-neutral-500' : 'text-neutral-400'}`}
+                      >
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        style={{fontFamily: 'var(--font-display)'}}
+                        className={`mt-8 text-xl font-bold tracking-[-0.02em] ${highlighted ? 'text-white' : 'text-neutral-900'}`}
+                      >
+                        {feature.title}
+                      </h3>
+                      <p className={`mt-2 text-sm leading-relaxed ${highlighted ? 'text-neutral-300' : 'text-neutral-600'}`}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* How it works */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Visual workflow builder
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>
+                Create complex email automations without writing a single line of code
+              </p>
+            </motion.div>
+
+            <div className={'mx-auto max-w-4xl'}>
+              <div className={'grid gap-px bg-neutral-200 sm:grid-cols-3'}>
+                {[
+                  {
+                    step: '01',
+                    title: 'Choose a trigger',
+                    body: 'Select an event that starts your workflow, like user signup, purchase, or any custom action you track.',
+                  },
+                  {
+                    step: '02',
+                    title: 'Build your flow',
+                    body: 'Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more.',
+                  },
+                  {
+                    step: '03',
+                    title: 'Activate and monitor',
+                    body: 'Enable your workflow and watch it run automatically. Monitor executions in real-time with full visibility.',
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    key={item.step}
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                    className={'bg-white p-10'}
+                  >
+                    <div
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
+                    >
+                      Step {item.step}
+                    </div>
+                    <h3 className={'text-lg font-semibold text-neutral-900'}>{item.title}</h3>
+                    <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{item.body}</p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use cases */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mb-16'}
+            >
+              <h2
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
+              >
+                Built for every use case
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>From onboarding to re-engagement, workflows handle it all</p>
+            </motion.div>
+
+            <ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {useCases.map((useCase, index) => (
+                <motion.li
+                  key={useCase.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
+                >
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
+                  >
+                    {useCase.title}
+                  </h3>
+                  <div className={'col-span-12 sm:col-span-8'}>
+                    <p className={'leading-relaxed text-neutral-600'}>{useCase.description}</p>
+                    <p
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'mt-5 text-[11px] uppercase tracking-[0.16em] text-neutral-400'}
+                    >
+                      {useCase.example}
+                    </p>
+                  </div>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Set up your first workflow in minutes.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Free plan available. $0.001 per email on paid. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started for free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/pages/guides/email-api-guide.tsx

@@ -10,7 +10,7 @@ export default function EmailAPIGuide() {
       description="Complete guide to email APIs: how they work, implementation examples, best practices, and choosing the right solution for your application."
       lastUpdated="2025-12-20"
       readTime="12 min"
-      canonical="https://next.useplunk.com/guides/email-api-guide"
+      canonical="https://www.useplunk.com/guides/email-api-guide"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -78,7 +78,7 @@ export default function EmailAPIGuide() {
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">How Email APIs Work</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Authentication</h3>
             <p className="text-neutral-700">
               You authenticate requests using an API key (usually passed in headers). This identifies your account and
@@ -86,14 +86,14 @@ export default function EmailAPIGuide() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Make HTTP Request</h3>
             <p className="text-neutral-700">
               Send a POST request to the API endpoint with email details (recipient, subject, body, etc.) as JSON.
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. API Validates & Queues</h3>
             <p className="text-neutral-700">
               The API validates your request, queues the email for delivery, and returns a response with the email ID
@@ -101,14 +101,14 @@ export default function EmailAPIGuide() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Delivery</h3>
             <p className="text-neutral-700">
               The service handles SMTP connections, retry logic, and delivery to the recipient's mail server.
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Webhooks & Tracking</h3>
             <p className="text-neutral-700">
               You receive webhook notifications for delivery events (delivered, bounced, opened, clicked) and can query
@@ -535,7 +535,7 @@ func main() {
         </p>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Deliverability Reputation</h3>
             <p className="text-neutral-700">
               Choose providers with strong deliverability rates and sender reputation. Poor deliverability means your
@@ -543,7 +543,7 @@ func main() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Feature Set</h3>
             <p className="text-neutral-700">
               Ensure the API supports your needs: templates, webhooks, analytics, scheduling, attachments, etc. Some
@@ -551,7 +551,7 @@ func main() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Pricing Model</h3>
             <p className="text-neutral-700">
               Understand pricing: per-email charges, monthly tiers, overage fees. Calculate costs for your expected
@@ -559,7 +559,7 @@ func main() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Developer Experience</h3>
             <p className="text-neutral-700">
               Good documentation, SDKs in your language, clear error messages, and responsive support make
@@ -567,7 +567,7 @@ func main() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Scalability & Reliability</h3>
             <p className="text-neutral-700">
               Can the provider handle your peak volumes? What's their uptime guarantee (SLA)? Do they have redundancy
@@ -575,7 +575,7 @@ func main() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">Compliance & Security</h3>
             <p className="text-neutral-700">
               Ensure the provider complies with GDPR, CAN-SPAM, and other relevant regulations. Check their security

apps/landing/src/pages/guides/email-bounce-rate.tsx

@@ -10,7 +10,7 @@ export default function EmailBounceRate() {
       description="Understand email bounce rates, the difference between hard and soft bounces, and proven strategies to reduce bounces and protect your sender reputation."
       lastUpdated="2025-12-20"
       readTime="9 min"
-      canonical="https://next.useplunk.com/guides/email-bounce-rate"
+      canonical="https://www.useplunk.com/guides/email-bounce-rate"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">

apps/landing/src/pages/guides/email-click-through-rate.tsx

@@ -10,7 +10,7 @@ export default function EmailClickThroughRate() {
       description="Learn what affects email click-through rates, industry benchmarks, and proven tactics to optimize CTAs and boost engagement."
       lastUpdated="2025-12-20"
       readTime="10 min"
-      canonical="https://next.useplunk.com/guides/email-click-through-rate"
+      canonical="https://www.useplunk.com/guides/email-click-through-rate"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -141,7 +141,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Click-Through Rates?</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Call-to-Action (CTA) Design</h3>
             <p className="text-neutral-700">
               Your CTA's design, placement, and copy directly impact clicks. Clear, prominent, action-oriented CTAs
@@ -149,7 +149,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Relevance</h3>
             <p className="text-neutral-700">
               Targeted, personalized content generates 2-3x higher CTR than generic blasts. Segmentation and
@@ -157,7 +157,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Value Proposition</h3>
             <p className="text-neutral-700">
               Recipients need a clear reason to click. Compelling value propositions—exclusive content, limited offers,
@@ -165,7 +165,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Mobile Optimization</h3>
             <p className="text-neutral-700">
               60%+ of emails are read on mobile. Unoptimized emails with small links or poorly formatted content see 50%
@@ -173,7 +173,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Content Scannability</h3>
             <p className="text-neutral-700">
               Most people skim emails. Clear structure with headers, bullet points, and whitespace helps readers find
@@ -181,7 +181,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Number of CTAs</h3>
             <p className="text-neutral-700">
               More CTAs = divided attention. Emails with one primary CTA convert 371% better than those with multiple
@@ -402,14 +402,14 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">Common CTR Mistakes to Avoid</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Too Many CTAs</h3>
             <p className="text-neutral-700">
               Multiple competing CTAs confuse readers and reduce overall clicks. Focus on one primary action per email.
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Vague CTA Copy</h3>
             <p className="text-neutral-700">
               "Click here" and "Learn more" don't communicate value. Be specific: "Download free guide" or "Start 14-day
@@ -417,7 +417,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Image-Only CTAs</h3>
             <p className="text-neutral-700">
               Many email clients block images by default. If your CTA is an image, users won't see it. Use HTML buttons
@@ -425,14 +425,14 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Small, Hard-to-Tap Links</h3>
             <p className="text-neutral-700">
               Tiny text links are difficult to tap on mobile. Use large buttons (minimum 44x44px) for easy tapping.
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ No Clear Value Proposition</h3>
             <p className="text-neutral-700">
               Readers won't click if they don't know why they should. Clearly communicate the benefit of clicking before

apps/landing/src/pages/guides/email-deliverability.tsx

@@ -9,7 +9,7 @@ export default function EmailDeliverability() {
       description="Learn proven strategies to improve email deliverability, avoid spam filters, and maximize inbox placement rates. Complete guide with best practices."
       lastUpdated="2025-12-20"
       readTime="12 min"
-      canonical="https://next.useplunk.com/guides/email-deliverability"
+      canonical="https://www.useplunk.com/guides/email-deliverability"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -71,7 +71,7 @@ export default function EmailDeliverability() {
         </p>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Sender Reputation</h3>
             <p className="text-neutral-700">
               Email providers track your sending behavior over time. High engagement rates, low spam complaints, and few
@@ -79,7 +79,7 @@ export default function EmailDeliverability() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Authentication</h3>
             <p className="text-neutral-700">
               SPF, DKIM, and DMARC authenticate your emails and prove they're legitimate. Without proper authentication,
@@ -87,7 +87,7 @@ export default function EmailDeliverability() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Email Content</h3>
             <p className="text-neutral-700">
               Spam filters analyze your subject lines, body content, links, and images. Spammy language, excessive
@@ -95,7 +95,7 @@ export default function EmailDeliverability() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Engagement</h3>
             <p className="text-neutral-700">
               Sending to engaged subscribers who want your emails is crucial. High open rates and clicks signal quality.
@@ -103,7 +103,7 @@ export default function EmailDeliverability() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Technical Infrastructure</h3>
             <p className="text-neutral-700">
               Your sending IP address, domain reputation, and email infrastructure affect how providers perceive your

apps/landing/src/pages/guides/email-marketing-best-practices.tsx

@@ -9,7 +9,7 @@ export default function EmailMarketingBestPractices() {
       description="Master email marketing with proven best practices for content, design, timing, deliverability, and compliance. Comprehensive guide for 2025."
       lastUpdated="2025-12-20"
       readTime="15 min"
-      canonical="https://next.useplunk.com/guides/email-marketing-best-practices"
+      canonical="https://www.useplunk.com/guides/email-marketing-best-practices"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -107,7 +107,7 @@ export default function EmailMarketingBestPractices() {
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Content Best Practices</h2>
 
         <div className="space-y-6 mb-8">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Craft Compelling Subject Lines</h3>
             <p className="text-neutral-700 mb-3">
               Your subject line determines whether emails get opened. Keep them under 50 characters, create curiosity,
@@ -125,7 +125,7 @@ export default function EmailMarketingBestPractices() {
             </div>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Personalize Beyond First Names</h3>
             <p className="text-neutral-700">
               Use behavioral data, purchase history, browsing activity, or preferences. Personalized emails deliver 6x
@@ -133,7 +133,7 @@ export default function EmailMarketingBestPractices() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Focus on One Primary Goal</h3>
             <p className="text-neutral-700">
               Each email should have one clear call-to-action (CTA). Multiple CTAs confuse readers and reduce conversion
@@ -141,7 +141,7 @@ export default function EmailMarketingBestPractices() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Write Scannable Content</h3>
             <p className="text-neutral-700 mb-3">Most people skim emails. Structure content for easy scanning:</p>
             <ul className="list-disc list-inside space-y-1 text-neutral-700">
@@ -153,7 +153,7 @@ export default function EmailMarketingBestPractices() {
             </ul>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Create Compelling CTAs</h3>
             <p className="text-neutral-700 mb-3">Effective CTAs are:</p>
             <ul className="list-disc list-inside space-y-1 text-neutral-700">
@@ -172,7 +172,7 @@ export default function EmailMarketingBestPractices() {
             </ul>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Provide Real Value</h3>
             <p className="text-neutral-700">
               Every email should benefit the reader. Share insights, solve problems, offer exclusive content, or provide
@@ -361,7 +361,7 @@ export default function EmailMarketingBestPractices() {
         </p>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">What to A/B Test</h3>
             <ul className="space-y-2 text-neutral-700">
               <li>
@@ -385,7 +385,7 @@ export default function EmailMarketingBestPractices() {
             </ul>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">A/B Testing Best Practices</h3>
             <ul className="space-y-2 text-neutral-700">
               <li>• Test one variable at a time for clear results</li>

apps/landing/src/pages/guides/email-open-rate.tsx

@@ -10,7 +10,7 @@ export default function EmailOpenRate() {
       description="Learn what affects email open rates, industry benchmarks, and proven tactics to improve opens. Complete guide with actionable tips."
       lastUpdated="2025-12-20"
       readTime="10 min"
-      canonical="https://next.useplunk.com/guides/email-open-rate"
+      canonical="https://www.useplunk.com/guides/email-open-rate"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -131,7 +131,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Email Open Rates?</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Subject Line</h3>
             <p className="text-neutral-700 mb-3">
               Your subject line is the #1 factor. It must be compelling, relevant, and create curiosity without being
@@ -161,7 +161,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </div>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Sender Name</h3>
             <p className="text-neutral-700">
               Recipients decide whether to open based on who it's from. Use a recognizable name—either your brand or a
@@ -169,7 +169,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Send Time & Day</h3>
             <p className="text-neutral-700">
               Timing impacts visibility. B2B emails typically perform best Tuesday-Thursday, 10am-2pm. B2C varies more
@@ -177,7 +177,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Segmentation</h3>
             <p className="text-neutral-700">
               Engaged subscribers open more. Segmenting by behavior, interests, or demographics ensures relevance.
@@ -185,7 +185,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Deliverability & Sender Reputation</h3>
             <p className="text-neutral-700">
               If emails land in spam, they won't be opened. Maintain good sender reputation through proper
@@ -193,7 +193,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Email Frequency</h3>
             <p className="text-neutral-700">
               Too frequent leads to fatigue and unsubscribes. Too infrequent and subscribers forget you. Find the sweet
@@ -201,7 +201,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Mobile Optimization</h3>
             <p className="text-neutral-700">
               60%+ of emails are opened on mobile. Use short subject lines (40-50 characters), clear preview text, and

apps/landing/src/pages/guides/email-sender-reputation.tsx

@@ -10,7 +10,7 @@ export default function EmailSenderReputation() {
       description="Learn how sender reputation works, what affects it, and proven strategies to build and maintain a positive reputation for maximum deliverability."
       lastUpdated="2025-12-20"
       readTime="11 min"
-      canonical="https://next.useplunk.com/guides/email-sender-reputation"
+      canonical="https://www.useplunk.com/guides/email-sender-reputation"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -70,7 +70,7 @@ export default function EmailSenderReputation() {
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Sender Reputation?</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Spam Complaint Rate</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Critical.</strong> When recipients mark your emails as spam, it severely damages
@@ -81,7 +81,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Engagement Metrics</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Very High.</strong> Email providers track opens, clicks, replies, forwards, and deletes.
@@ -92,7 +92,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Bounce Rate</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: High.</strong> High bounce rates (especially hard bounces) indicate poor list hygiene,
@@ -103,7 +103,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Authentication</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: High.</strong> Proper SPF, DKIM, and DMARC authentication proves your emails are
@@ -114,7 +114,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Spam Trap Hits</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Critical.</strong> Spam traps are email addresses used to catch senders with poor
@@ -125,7 +125,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Sending Volume & Consistency</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Moderate.</strong> Sudden spikes in volume look suspicious. Inconsistent sending (long
@@ -136,7 +136,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Content Quality</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Moderate.</strong> Spammy content (excessive links, misleading subject lines, all caps)
@@ -147,7 +147,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">8. Blacklist Status</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Critical.</strong> Being listed on major blacklists (Spamhaus, Barracuda, SURBL) can block
@@ -158,7 +158,7 @@ export default function EmailSenderReputation() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">9. Sending History</h3>
             <p className="text-neutral-700 mb-3">
               <strong>Impact: Cumulative.</strong> Reputation is built over time. New domains/IPs have no history (zero

apps/landing/src/pages/guides/index.tsx

@@ -10,7 +10,7 @@ interface Guide {
   title: string;
   description: string;
   href: string;
-  icon: React.ComponentType<{className?: string}>;
+  icon: React.ComponentType<{className?: string; strokeWidth?: number}>;
   badge?: string;
 }
 
@@ -94,170 +94,190 @@ const guides: Guide[] = [
   },
 ];
 
-/**
- * Email Guides hub page
- */
+const badgeOrder = ['Authentication', 'Deliverability', 'Analytics', 'Technical', 'Best Practices', 'Fundamentals'];
+
 export default function GuidesIndex() {
+  const categories = badgeOrder
+    .map(name => ({name, guides: guides.filter(g => g.badge === name)}))
+    .filter(c => c.guides.length > 0);
+
   return (
     <>
       <NextSeo
         title="Email Marketing & Deliverability Guides | Plunk"
         description="Learn email best practices, authentication (DKIM, SPF, DMARC), deliverability optimization, and more. Free guides from Plunk."
-        canonical="https://next.useplunk.com/guides"
+        canonical="https://www.useplunk.com/guides"
         openGraph={{
           title: 'Email Marketing & Deliverability Guides | Plunk',
           description:
             'Learn email best practices, authentication (DKIM, SPF, DMARC), deliverability optimization, and more.',
-          url: 'https://next.useplunk.com/guides',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Guides'}],
+          url: 'https://www.useplunk.com/guides',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Guides'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
           <div
+            aria-hidden
             className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
             }
           />
-
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
-            <div
-              className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
-              }
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             >
-              <Book className="h-4 w-4 text-neutral-600" />
-              <span className={'text-sm text-neutral-600'}>Free Email Guides</span>
-            </div>
-
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Master email
-              <br />
-              marketing & deliverability
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Free guides on email authentication, deliverability, best practices, and technical implementation. Learn
-              from the experts.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
+              <div
+                style={{fontFamily: 'var(--font-mono)'}}
+                className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
+              >
+                Free Guides
+              </div>
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
                 className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
                 }
               >
-                <span className={'flex items-center gap-2'}>
-                  Try Plunk free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-            </div>
-          </motion.div>
-        </section>
+                Master email,
+                <br />
+                start to finish.
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Free guides on email authentication, deliverability, best practices, and technical implementation.
+              </p>
 
-        {/* Guides Grid */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Browse all guides</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to master email</p>
-          </motion.div>
-
-          <div className={'grid gap-6 sm:grid-cols-2 lg:grid-cols-3'}>
-            {guides.map((guide, index) => {
-              const Icon = guide.icon;
-              return (
-                <motion.div
-                  key={guide.href}
-                  initial={{opacity: 0, y: 20}}
-                  whileInView={{opacity: 1, y: 0}}
-                  viewport={{once: true}}
-                  transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a
+                  whileHover={{scale: 1.015}}
+                  whileTap={{scale: 0.985}}
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  className={
+                    'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
+                  }
                 >
-                  <Link
-                    href={guide.href}
-                    className={
-                      'group block h-full rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
-                    }
-                  >
-                    <div className={'flex items-start justify-between mb-4'}>
-                      <div
-                        className={
-                          'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                        }
-                      >
-                        <Icon className="h-5 w-5" />
-                      </div>
-                      {guide.badge && (
-                        <span className={'rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-700'}>
-                          {guide.badge}
-                        </span>
-                      )}
-                    </div>
-                    <h3 className={'text-xl font-semibold text-neutral-900 mb-2 group-hover:text-neutral-700'}>
-                      {guide.title}
-                    </h3>
-                    <p className={'text-sm text-neutral-600 leading-relaxed'}>{guide.description}</p>
-                  </Link>
-                </motion.div>
-              );
-            })}
+                  Try Plunk free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+              </div>
+            </motion.div>
           </div>
         </section>
 
-        {/* CTA Section */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to get started?</h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              Put these guides into practice with Plunk's modern email platform. Start free, no credit card required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start free trial
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing
-              </Link>
+        {/* Guides - Categorized */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
+            <div className={'space-y-16'}>
+              {categories.map((category, catIndex) => (
+                <motion.div
+                  key={category.name}
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.6, delay: catIndex * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                >
+                  <div className={'mb-6 flex items-center gap-4'}>
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'shrink-0 text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
+                    >
+                      {category.name}
+                    </span>
+                    <div className={'h-px flex-1 bg-neutral-200'} />
+                  </div>
+
+                  <div className={'divide-y divide-neutral-100'}>
+                    {category.guides.map(guide => {
+                      const Icon = guide.icon;
+                      return (
+                        <Link
+                          key={guide.href}
+                          href={guide.href}
+                          className={
+                            'group -mx-4 flex items-center gap-5 rounded-lg px-4 py-5 transition hover:bg-neutral-50 sm:gap-6'
+                          }
+                        >
+                          <Icon
+                            className={'h-5 w-5 shrink-0 text-neutral-400 transition group-hover:text-neutral-600'}
+                            strokeWidth={1.5}
+                          />
+                          <div className={'min-w-0 flex-1'}>
+                            <h3
+                              style={{fontFamily: 'var(--font-display)'}}
+                              className={'font-bold tracking-[-0.01em] text-neutral-900'}
+                            >
+                              {guide.title}
+                            </h3>
+                            <p className={'mt-0.5 truncate text-sm text-neutral-500'}>{guide.description}</p>
+                          </div>
+                          <ArrowRight
+                            className={
+                              'h-4 w-4 shrink-0 text-neutral-300 transition-transform group-hover:translate-x-0.5 group-hover:text-neutral-600'
+                            }
+                          />
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </motion.div>
+              ))}
             </div>
-          </motion.div>
+          </div>
         </section>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Put it into practice.
+              </motion.h2>
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Start free. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}
+                  >
+                    Get started free
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'/pricing'}
+                    className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}
+                  >
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
       </main>
 
       <Footer />

apps/landing/src/pages/guides/transactional-vs-marketing-email.tsx

@@ -9,7 +9,7 @@ export default function TransactionalVsMarketingEmail() {
       description="Understand the critical differences between transactional and marketing emails, including legal requirements, deliverability, and best practices."
       lastUpdated="2025-12-20"
       readTime="10 min"
-      canonical="https://next.useplunk.com/guides/transactional-vs-marketing-email"
+      canonical="https://www.useplunk.com/guides/transactional-vs-marketing-email"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">

apps/landing/src/pages/guides/what-is-dkim.tsx

@@ -10,7 +10,7 @@ export default function WhatIsDKIM() {
       description="Learn how DKIM (DomainKeys Identified Mail) protects your emails from spoofing and improves deliverability. Complete guide with setup examples."
       lastUpdated="2025-12-20"
       readTime="8 min"
-      canonical="https://next.useplunk.com/guides/what-is-dkim"
+      canonical="https://www.useplunk.com/guides/what-is-dkim"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -33,7 +33,7 @@ export default function WhatIsDKIM() {
         </p>
 
         <div className="space-y-6 mb-8">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. The Sending Server Signs the Email</h3>
             <p className="text-neutral-700">
               When you send an email, your email server adds a DKIM signature to the email header. This signature is
@@ -41,7 +41,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. The Signature is Added to Headers</h3>
             <p className="text-neutral-700">
               The DKIM signature includes a hash of specific email components (like the subject, body, and sender) and
@@ -49,7 +49,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Verifies</h3>
             <p className="text-neutral-700">
               When the email arrives, the receiving server looks up your domain's public DKIM key in DNS, then uses it
@@ -57,7 +57,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Delivery Decision</h3>
             <p className="text-neutral-700">
               Passing DKIM verification improves your sender reputation and deliverability. Failing or missing DKIM may
@@ -252,7 +252,7 @@ export default function WhatIsDKIM() {
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">DKIM Best Practices</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-green-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Use 2048-bit Keys</h3>
             <p className="text-neutral-700">
               While 1024-bit keys still work, 2048-bit keys provide better security and are recommended by Gmail and
@@ -260,7 +260,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-green-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Implement SPF and DMARC Too</h3>
             <p className="text-neutral-700">
               DKIM works best when combined with SPF and DMARC for comprehensive email authentication. Use all three for
@@ -268,7 +268,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-green-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Monitor DKIM Status</h3>
             <p className="text-neutral-700">
               Regularly check that your DKIM signatures are passing. Most email platforms provide authentication
@@ -276,7 +276,7 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-green-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Rotate Keys Periodically</h3>
             <p className="text-neutral-700">
               For enhanced security, rotate your DKIM keys every 6-12 months. Plan key rotation carefully to avoid
@@ -284,14 +284,14 @@ export default function WhatIsDKIM() {
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Share Private Keys</h3>
             <p className="text-neutral-700">
               Your DKIM private key should never be shared or stored insecurely. Treat it like a password.
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Use the Same Key Across Domains</h3>
             <p className="text-neutral-700">
               Each domain should have its own unique DKIM key pair for security and proper authentication.

apps/landing/src/pages/guides/what-is-dmarc.tsx

@@ -10,7 +10,7 @@ export default function WhatIsDMARC() {
       description="Learn how DMARC works with SPF and DKIM to protect your domain from email spoofing. Complete setup guide with policy examples."
       lastUpdated="2025-12-20"
       readTime="9 min"
-      canonical="https://next.useplunk.com/guides/what-is-dmarc"
+      canonical="https://www.useplunk.com/guides/what-is-dmarc"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -32,7 +32,7 @@ export default function WhatIsDMARC() {
         </p>
 
         <div className="space-y-6 mb-8">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Email Authentication</h3>
             <p className="text-neutral-700">
               When an email is received, the server first checks SPF and DKIM authentication. At least one of these must
@@ -40,7 +40,7 @@ export default function WhatIsDMARC() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Alignment Check</h3>
             <p className="text-neutral-700">
               DMARC checks if the domain in the "From" header aligns with the domain that passed SPF or DKIM. This is
@@ -48,7 +48,7 @@ export default function WhatIsDMARC() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Policy Application</h3>
             <p className="text-neutral-700">
               If authentication and alignment pass, the email is delivered. If they fail, the receiving server follows
@@ -56,7 +56,7 @@ export default function WhatIsDMARC() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Reporting</h3>
             <p className="text-neutral-700">
               Receiving servers send daily reports to your specified email address, showing authentication results for

apps/landing/src/pages/guides/what-is-spf.tsx

@@ -10,7 +10,7 @@ export default function WhatIsSPF() {
       description="Learn how SPF records work, prevent email spoofing, and improve deliverability. Complete guide with setup examples and best practices."
       lastUpdated="2025-12-20"
       readTime="7 min"
-      canonical="https://next.useplunk.com/guides/what-is-spf"
+      canonical="https://www.useplunk.com/guides/what-is-spf"
     >
       {/* Introduction */}
       <section id="introduction" className="mb-12">
@@ -32,7 +32,7 @@ export default function WhatIsSPF() {
         </p>
 
         <div className="space-y-6 mb-8">
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">1. You Publish an SPF Record</h3>
             <p className="text-neutral-700">
               You add a TXT record to your domain's DNS that lists all IP addresses and services authorized to send
@@ -40,7 +40,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">2. An Email is Sent</h3>
             <p className="text-neutral-700">
               When someone sends an email claiming to be from your domain, the receiving server notes the IP address of
@@ -48,7 +48,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Checks SPF</h3>
             <p className="text-neutral-700">
               The receiving server looks up your domain's SPF record in DNS and checks if the sending server's IP
@@ -56,7 +56,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-neutral-900 pl-6">
+          <div className="">
             <h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Pass or Fail</h3>
             <p className="text-neutral-700">
               If the IP matches, SPF passes. If not, SPF fails and the email may be flagged as spam or rejected,
@@ -268,7 +268,7 @@ export default function WhatIsSPF() {
         <h2 className="text-3xl font-bold text-neutral-900 mb-6">Common SPF Mistakes to Avoid</h2>
 
         <div className="space-y-6">
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Multiple SPF Records</h3>
             <p className="text-neutral-700">
               Never create multiple SPF TXT records. You can only have ONE SPF record per domain. Combine all authorized
@@ -276,7 +276,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Exceeding 10 DNS Lookups</h3>
             <p className="text-neutral-700">
               Each <code>include:</code> mechanism counts toward the 10 lookup limit. Too many includes will cause SPF
@@ -284,7 +284,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Forgetting to Update SPF</h3>
             <p className="text-neutral-700">
               When you add new email services, remember to update your SPF record. Outdated SPF records cause legitimate
@@ -292,7 +292,7 @@ export default function WhatIsSPF() {
             </p>
           </div>
 
-          <div className="border-l-4 border-red-500 pl-6 py-2">
+          <div className="py-2">
             <h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Using +all</h3>
             <p className="text-neutral-700">
               Never use <code>+all</code> (pass all). This completely defeats the purpose of SPF by allowing anyone to

apps/landing/src/pages/pricing.tsx

@@ -1,15 +1,73 @@
 import {NextSeo} from 'next-seo';
 import React from 'react';
-import {Footer, Navbar} from '../components';
+import {Footer, Navbar, SectionHeader} from '../components';
 import {motion} from 'framer-motion';
-
 import {DASHBOARD_URI} from '../lib/constants';
+import {
+  ArrowRight,
+  BarChart3,
+  Code2,
+  Globe,
+  Mail,
+  PackageOpen,
+  Shield,
+  Users,
+  Zap,
+  X,
+  Check,
+} from 'lucide-react';
+import Link from 'next/link';
 import {GithubIcon} from 'lucide-react';
 
-/**
- *
- */
-export default function Index() {
+const includedFeatures = [
+  {
+    icon: <Mail className="h-5 w-5" />,
+    title: 'Transactional emails',
+    description: 'API and SMTP delivery for receipts, password resets, and any event-driven email.',
+  },
+  {
+    icon: <Zap className="h-5 w-5" />,
+    title: 'Workflow automation',
+    description: 'Build event-triggered sequences with delays, conditions, and branching logic.',
+  },
+  {
+    icon: <BarChart3 className="h-5 w-5" />,
+    title: 'Campaign broadcasts',
+    description: 'Send newsletters and announcements to your full list or a targeted segment.',
+  },
+  {
+    icon: <Users className="h-5 w-5" />,
+    title: 'Unlimited contacts',
+    description: 'Store as many contacts as you need. Growing your list never costs more.',
+  },
+  {
+    icon: <Code2 className="h-5 w-5" />,
+    title: 'Full API access',
+    description: 'REST API with SDKs for Node.js, Python, and more. Comprehensive documentation.',
+  },
+  {
+    icon: <Shield className="h-5 w-5" />,
+    title: 'Custom domains',
+    description: 'Send from your own domain with DKIM, SPF, and DMARC set up automatically.',
+  },
+  {
+    icon: <Globe className="h-5 w-5" />,
+    title: 'Audience segmentation',
+    description: 'Dynamic segments built on behavior, attributes, and engagement data.',
+  },
+  {
+    icon: <BarChart3 className="h-5 w-5" />,
+    title: 'Analytics & tracking',
+    description: 'Opens, clicks, bounces, and unsubscribes. Real data, no guessing.',
+  },
+  {
+    icon: <PackageOpen className="h-5 w-5" />,
+    title: 'Open source',
+    description: 'AGPL-3.0 licensed. Inspect the code, self-host it, or contribute to it.',
+  },
+];
+
+export default function Pricing() {
   return (
     <>
       <NextSeo
@@ -20,208 +78,90 @@ export default function Index() {
         openGraph={{
           title: 'Plunk Pricing | The Open-Source Email Platform',
           description:
-            'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 1,000 emails/month across transactional, workflow, and campaign emails. No hidden fees, pay only for what you use.',
+            'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 1,000 emails/month. No hidden fees.',
         }}
-        additionalMetaTags={[
-          {
-            property: 'title',
-            content: 'Plunk Pricing | The Open-Source Email Platform',
-          },
-        ]}
+        additionalMetaTags={[{property: 'title', content: 'Plunk Pricing | The Open-Source Email Platform'}]}
       />
 
       <Navbar />
 
-      <div className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        <main>
-          <section className={'py-32'}>
-            <div className={'mx-auto max-w-4xl text-center'}>
-              <h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl">
+      <main className={'text-neutral-800'}>
+
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div
+            aria-hidden
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
+            }
+          />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div
+              initial={{opacity: 0, y: 16}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mx-auto max-w-4xl text-center'}
+            >
+              <h1
+                style={{fontFamily: 'var(--font-display)'}}
+                className={
+                  'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                }
+              >
                 Simple, transparent pricing
               </h1>
-              <p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">Start free, pay only for what you use</p>
-            </div>
+              <p className={'mx-auto mt-6 max-w-2xl text-xl text-neutral-600'}>
+                Free plan: 1,000 emails per month. Paid plan: $0.001 per email. Unlimited contacts, no hidden fees.
+              </p>
+            </motion.div>
+          </div>
+        </section>
 
-            {/* Pricing Tiers */}
-            <div className="mx-auto mt-20 grid max-w-5xl gap-8 lg:grid-cols-2">
-              {/* Free Tier */}
+        {/* Pricing tiers */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
+            <div className={'mx-auto grid max-w-4xl gap-px bg-neutral-200 sm:grid-cols-2'}>
+              {/* Free */}
               <motion.div
                 initial={{opacity: 0, y: 20}}
                 animate={{opacity: 1, y: 0}}
-                transition={{delay: 0.2}}
-                className="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 p-10 shadow-2xl"
+                transition={{delay: 0.1, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex flex-col bg-white p-10'}
               >
-                <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
-                <div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
-
-                <div className="relative flex flex-1 flex-col">
-                  <div className="mb-6 inline-block self-start rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-sm font-semibold text-white backdrop-blur-sm">
-                    Free Forever
-                  </div>
-
-                  <div className="mb-2 flex items-baseline gap-2">
-                    <span className="text-6xl font-bold tracking-tight text-white">1,000</span>
-                    <span className="text-xl font-medium text-white/60">emails</span>
-                  </div>
-                  <p className="mb-8 text-base text-white/60">per month</p>
-
-                  <ul className="flex-1 space-y-3">
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Transactional emails</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Workflow automation</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Campaign broadcasts</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Custom domains</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Click & open tracking</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/80">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>No credit card required</span>
-                    </li>
-                    <li className="flex items-start gap-3 text-white/60">
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                          fillRule="evenodd"
-                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span>Plunk branding</span>
-                    </li>
-                  </ul>
-
-                  <motion.a
-                    href={`${DASHBOARD_URI}/auth/signup`}
-                    whileHover={{scale: 1.02}}
-                    whileTap={{scale: 0.98}}
-                    className="mt-8 block w-full rounded-lg border-2 border-white bg-white px-6 py-3 text-center font-semibold text-neutral-900 transition hover:bg-white/90"
+                <p
+                  style={{fontFamily: 'var(--font-mono)'}}
+                  className={'text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400'}
+                >
+                  Free forever
+                </p>
+                <div className={'mt-4 flex items-baseline gap-2'}>
+                  <span
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'text-6xl font-extrabold tracking-[-0.03em] text-neutral-900'}
                   >
-                    Start for free
-                  </motion.a>
+                    1,000
+                  </span>
+                  <span className={'text-lg text-neutral-500'}>emails / mo</span>
                 </div>
-              </motion.div>
+                <p className={'mt-2 text-sm text-neutral-500'}>No credit card required</p>
 
-              {/* Pay as you grow */}
-              <motion.div
-                initial={{opacity: 0, y: 20}}
-                animate={{opacity: 1, y: 0}}
-                transition={{delay: 0.3}}
-                className="relative flex flex-col overflow-hidden rounded-2xl border-2 border-neutral-200 bg-white p-10 shadow-lg"
-              >
-                <div className="mb-6 inline-block self-start rounded-full bg-neutral-100 px-4 py-1.5 text-sm font-semibold text-neutral-900">
-                  Pay as you grow
-                </div>
-
-                <div className="mb-2 flex items-baseline gap-2">
-                  <span className="text-6xl font-bold tracking-tight text-neutral-900">$0.001</span>
-                  <span className="text-xl font-medium text-neutral-500">per email</span>
-                </div>
-                <p className="mb-8 text-base text-neutral-500">No contact limits, pay only for what you send</p>
-
-                <ul className="flex-1 space-y-3">
-                  <li className="flex items-start gap-3 text-neutral-600">
-                    <svg
-                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <span>Everything in Free</span>
-                  </li>
-                  <li className="flex items-start gap-3 text-neutral-600">
-                    <svg
-                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <span>No Plunk branding</span>
-                  </li>
-                  <li className="flex items-start gap-3 text-neutral-600">
-                    <svg
-                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <span>Billing limits</span>
-                  </li>
-                  <li className="flex items-start gap-3 text-neutral-600">
-                    <svg
-                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <span>Unlimited emails</span>
+                <ul className={'mt-8 flex-1 space-y-3'}>
+                  {[
+                    'Transactional emails',
+                    'Workflow automation',
+                    'Campaign broadcasts',
+                    'Custom domains',
+                    'Click & open tracking',
+                    'Unlimited contacts',
+                  ].map(item => (
+                    <li key={item} className={'flex items-center gap-3 text-sm text-neutral-600'}>
+                      <Check className={'h-4 w-4 flex-shrink-0 text-neutral-900'} />
+                      {item}
+                    </li>
+                  ))}
+                  <li className={'flex items-center gap-3 text-sm text-neutral-400'}>
+                    <X className={'h-4 w-4 flex-shrink-0'} />
+                    Plunk branding on emails
                   </li>
                 </ul>
 
@@ -229,76 +169,196 @@ export default function Index() {
                   href={`${DASHBOARD_URI}/auth/signup`}
                   whileHover={{scale: 1.02}}
                   whileTap={{scale: 0.98}}
-                  className="mt-8 block w-full rounded-lg bg-neutral-900 px-6 py-3 text-center font-semibold text-white transition hover:bg-neutral-800"
+                  className={
+                    'mt-10 block w-full rounded-full border border-neutral-300 px-6 py-3 text-center text-sm font-semibold text-neutral-900 transition hover:border-neutral-900'
+                  }
                 >
                   Start for free
                 </motion.a>
               </motion.div>
-            </div>
 
-            {/* Features Grid */}
-            <div className="mx-auto mt-24 max-w-5xl">
-              <h2 className="mb-12 text-center text-2xl font-bold text-neutral-900">Everything included</h2>
-              <div className="grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3">
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">Unlimited emails</h3>
-                  <p className="mt-2 text-sm text-neutral-600">
-                    Send unlimited transactional, campaign, and automated emails
+              {/* Pay as you grow */}
+              <motion.div
+                initial={{opacity: 0, y: 20}}
+                animate={{opacity: 1, y: 0}}
+                transition={{delay: 0.2, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex flex-col bg-neutral-900 p-10 text-white'}
+              >
+                <p
+                  style={{fontFamily: 'var(--font-mono)'}}
+                  className={'text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-400'}
+                >
+                  Pay as you grow
+                </p>
+                <div className={'mt-4 flex items-baseline gap-2'}>
+                  <span
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'text-6xl font-extrabold tracking-[-0.03em] text-white'}
+                  >
+                    $0.001
+                  </span>
+                  <span className={'text-lg text-neutral-400'}>/ email</span>
+                </div>
+                <p className={'mt-2 text-sm'}>&nbsp;</p>
+
+                <ul className={'mt-8 flex-1 space-y-3'}>
+                  {['Everything in Free', 'No Plunk branding', 'Monthly spend cap', 'Unlimited emails'].map(item => (
+                    <li key={item} className={'flex items-center gap-3 text-sm text-neutral-300'}>
+                      <Check className={'h-4 w-4 flex-shrink-0 text-white'} />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+
+                <motion.a
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  whileHover={{scale: 1.02}}
+                  whileTap={{scale: 0.98}}
+                  className={
+                    'mt-10 block w-full rounded-full bg-white px-6 py-3 text-center text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'
+                  }
+                >
+                  Get started
+                </motion.a>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Every feature included */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
+            <SectionHeader
+              number={'01'}
+              label={'Included'}
+              title={'Every feature, every plan.'}
+              subtitle={'No feature tiers, no add-ons, no surprises.'}
+            />
+
+            <ul className={'mt-16 divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {includedFeatures.map((feature, index) => (
+                <motion.li
+                  key={feature.title}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: index * 0.04, ease: [0.22, 1, 0.36, 1]}}
+                  className={'grid gap-3 py-7 sm:grid-cols-[1fr_2fr] sm:items-baseline sm:gap-12 sm:py-8'}
+                >
+                  <h3
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'text-base font-semibold text-neutral-900'}
+                  >
+                    {feature.title}
+                  </h3>
+                  <p className={'text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+                </motion.li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Self-host */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'overflow-hidden rounded-[24px] border border-neutral-200 bg-white'}
+            >
+              <div className={'flex flex-col items-center gap-6 p-10 sm:flex-row sm:gap-0'}>
+                <div className={'flex-1 text-center sm:text-left'}>
+                  <div
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'mb-3 inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
+                  >
+                    <PackageOpen className={'h-3.5 w-3.5'} />
+                    Self-hostable
+                  </div>
+                  <h2
+                    style={{fontFamily: 'var(--font-display)'}}
+                    className={'text-2xl font-bold tracking-[-0.025em] text-neutral-900'}
+                  >
+                    Run it on your own infrastructure
+                  </h2>
+                  <p className={'mt-2 text-neutral-600'}>
+                    Full data ownership, no per-email costs, and GDPR compliance by default. Deploy with Docker Compose
+                    in minutes.
                   </p>
                 </div>
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">Unlimited contacts</h3>
-                  <p className="mt-2 text-sm text-neutral-600">
-                    No limits on your audience size. Grow without restrictions
-                  </p>
-                </div>
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">Custom domains</h3>
-                  <p className="mt-2 text-sm text-neutral-600">Send from your own domain with full authentication</p>
-                </div>
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">Analytics & tracking</h3>
-                  <p className="mt-2 text-sm text-neutral-600">Detailed metrics on opens, clicks, and conversions</p>
-                </div>
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">Workflow automation</h3>
-                  <p className="mt-2 text-sm text-neutral-600">Build complex email sequences with visual editor</p>
-                </div>
-                <div className="bg-white p-8">
-                  <h3 className="text-lg font-semibold text-neutral-900">API access</h3>
-                  <p className="mt-2 text-sm text-neutral-600">Full REST API with comprehensive documentation</p>
+                <div className={'sm:ml-auto sm:pl-8'}>
+                  <motion.button
+                    onClick={() => window.open('https://github.com/useplunk/plunk', '_blank')}
+                    whileHover={{scale: 1.02}}
+                    whileTap={{scale: 0.98}}
+                    className={
+                      'flex w-full items-center justify-center gap-x-3 rounded-full bg-neutral-900 px-6 py-3 text-base font-semibold text-white transition hover:bg-neutral-800 sm:w-auto'
+                    }
+                  >
+                    <GithubIcon size={18} />
+                    View on GitHub
+                  </motion.button>
                 </div>
               </div>
+            </motion.div>
+          </div>
+        </section>
 
-              <div className="mt-12 overflow-hidden rounded-lg border border-neutral-200">
-                <div className="flex flex-col items-center space-y-6 p-10 sm:flex-row sm:space-y-0">
-                  <div className="flex-1 text-center sm:text-left">
-                    <h2 className={'text-2xl font-bold text-neutral-900'}>Self-host</h2>
-                    <p className={'mt-2 text-neutral-600'}>
-                      Host Plunk on your own infrastructure. The perfect solution for when you require full control.
-                    </p>
-                  </div>
-                  <div className={'sm:ml-auto'}>
-                    <motion.button
-                      onClick={() => {
-                        window.open('https://github.com/useplunk/plunk', '_blank');
-                      }}
-                      whileHover={{scale: 1.02}}
-                      whileTap={{scale: 0.98}}
-                      className={
-                        'flex w-full items-center justify-center gap-x-3 rounded-lg bg-neutral-900 px-6 py-3 text-base font-semibold text-white transition hover:bg-neutral-800 sm:w-auto'
-                      }
-                    >
-                      <GithubIcon size={20} />
-                      View GitHub
-                    </motion.button>
-                  </div>
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-display)'}}
+                className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+              >
+                Start sending in 5 minutes.
+              </motion.h2>
+
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                className={'flex max-w-md flex-col gap-6'}
+              >
+                <p className={'text-base text-neutral-300 sm:text-lg'}>
+                  Start free. No credit card required.
+                </p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    className={
+                      'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'
+                    }
+                  >
+                    Create free account
+                    <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link
+                    href={'https://github.com/useplunk/plunk'}
+                    target={'_blank'}
+                    className={
+                      'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'
+                    }
+                  >
+                    Self-host for free
+                  </Link>
                 </div>
-              </div>
+              </motion.div>
             </div>
-          </section>
-        </main>
-      </div>
+          </div>
+        </section>
+
+      </main>
 
       <Footer />
     </>

apps/landing/src/pages/tools/index.tsx

@@ -1,268 +1,323 @@
-import {Footer, Navbar} from '../../components';
+import {Footer, Navbar, SectionHeader} from '../../components';
 import {motion} from 'framer-motion';
 import {DASHBOARD_URI} from '../../lib/constants';
 import React from 'react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, Code2, Mail, Search, Sparkles, Wrench} from 'lucide-react';
+import {ArrowRight, ArrowUpRight, Code2, Search} from 'lucide-react';
+import {Bricolage_Grotesque, Hanken_Grotesk, JetBrains_Mono} from 'next/font/google';
+
+const display = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-display',
+  display: 'swap',
+  weight: ['400', '500', '600', '700', '800'],
+});
+
+const body = Hanken_Grotesk({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+});
+
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+  weight: ['400', '500'],
+});
 
 const tools = [
   {
     name: 'Markdown to Email',
     slug: 'markdown-to-email',
-    description: 'Convert rich text to email-safe HTML with our visual editor and instant preview.',
-    features: ['Visual Editor', 'Email-Safe HTML', 'Inline CSS', 'Copy to Clipboard'],
+    description: 'Convert rich text to email-safe HTML with a visual editor and instant preview.',
     icon: Code2,
+    number: '01',
   },
   {
     name: 'Email Verification',
     slug: 'verify-email',
     description: 'Verify email addresses instantly. Check DNS, MX records, typos, and disposable domains.',
-    features: ['DNS Validation', 'Typo Detection', 'MX Records', 'Disposable Check'],
     icon: Search,
+    number: '02',
   },
 ];
 
-/**
- * Free Email Tools index page
- */
 export default function ToolsIndex() {
   return (
     <>
       <NextSeo
         title="Free Email Tools | Markdown to Email & Email Verification | Plunk"
         description="Free tools for email developers: Convert markdown to email-safe HTML and verify email addresses instantly. No sign-up required."
-        canonical="https://next.useplunk.com/tools"
+        canonical="https://www.useplunk.com/tools"
         openGraph={{
           title: 'Free Email Tools | Markdown to Email & Email Verification | Plunk',
           description:
             'Free tools for email developers: Convert markdown to email-safe HTML and verify email addresses instantly.',
-          url: 'https://next.useplunk.com/tools',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email Tools'}],
+          url: 'https://www.useplunk.com/tools',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email Tools'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
-
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
+      <div className={`${display.variable} ${body.variable} ${mono.variable}`}>
+        <main className={'text-neutral-800'}>
+          {/* ========== HERO ========== */}
+          <section className={'relative overflow-hidden'}>
             <div
+              aria-hidden
               className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
+                'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
               }
-            >
-              <Wrench className="h-4 w-4 text-neutral-600" />
-              <span className={'text-sm text-neutral-600'}>Free Email Tools</span>
-            </div>
+            />
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Free tools for
-              <br />
-              email developers
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Build better emails with our free tools. Convert markdown to email-safe HTML, verify email addresses, and
-              more. No sign-up required.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
+            <div className={'mx-auto max-w-[88rem] px-6 pb-24 pt-20 sm:px-10 sm:pt-28 lg:pb-36'}>
+              <motion.div
+                initial={{opacity: 0, y: 8}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-mono)'}}
                 className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
+                  'mb-16 flex items-center justify-between border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700 sm:mb-24'
                 }
               >
-                <span className={'flex items-center gap-2'}>
-                  Try Plunk free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-              <Link
-                href="/guides"
-                className={
-                  'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
+                <span className={'font-medium text-neutral-900'}>§ Tools &nbsp;— &nbsp;Plunk</span>
+              </motion.div>
+
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                className={'mx-auto max-w-5xl text-center'}
               >
-                Browse guides
-              </Link>
-            </div>
-          </motion.div>
-        </section>
+                <h1
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={
+                    'text-[clamp(3rem,9vw,8rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                  }
+                >
+                  Free email
+                  <br />
+                  developer tools
+                </h1>
+                <p className={'mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-neutral-600 sm:text-xl'}>
+                  Convert markdown to email-safe HTML, verify addresses, and more. No sign-up required.
+                </p>
 
-        {/* Tools Grid */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Available Tools</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to work with emails</p>
-          </motion.div>
-
-          <div className={'grid gap-8 md:grid-cols-2 lg:grid-cols-2 max-w-4xl mx-auto'}>
-            {tools.map((tool, index) => {
-              const Icon = tool.icon;
-              return (
-                <Link key={tool.slug} href={`/tools/${tool.slug}`}>
-                  <motion.div
-                    initial={{opacity: 0, y: 20}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                <div className={'mt-10 flex flex-wrap justify-center gap-3'}>
+                  <motion.a
+                    whileHover={{scale: 1.015}}
+                    whileTap={{scale: 0.985}}
+                    href={`${DASHBOARD_URI}/auth/signup`}
                     className={
-                      'group rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg cursor-pointer h-full'
+                      'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'
                     }
                   >
-                    <div className={'flex items-start justify-between mb-4'}>
-                      <div
+                    Try Plunk free
+                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                  </motion.a>
+                  <Link
+                    href="/guides"
+                    className={
+                      'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'
+                    }
+                  >
+                    Browse guides
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+          </section>
+
+          {/* ========== TOOLS LIST ========== */}
+          <section className={'mx-auto max-w-[88rem] px-6 py-28 sm:px-10 sm:py-36'}>
+            <SectionHeader
+              number={'01'}
+              label={'Tools'}
+              title={'Available tools.'}
+              subtitle={'Everything you need to work with email. No sign-up, no limits.'}
+            />
+
+            <ul className={'mt-20 divide-y divide-neutral-200 border-y border-neutral-200'}>
+              {tools.map((tool, i) => (
+                <motion.li
+                  key={tool.slug}
+                  initial={{opacity: 0, y: 12}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.5, delay: i * 0.06, ease: [0.22, 1, 0.36, 1]}}
+                >
+                  <Link
+                    href={`/tools/${tool.slug}`}
+                    className={
+                      'group flex items-center justify-between gap-6 py-6 transition-colors hover:bg-neutral-50 sm:py-8'
+                    }
+                  >
+                    <div className={'flex items-center gap-6 sm:gap-10'}>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
+                        className={'w-12 text-xs tabular-nums tracking-[0.18em] text-neutral-400 sm:w-16'}
+                      >
+                        {tool.number}
+                      </span>
+                      <div>
+                        <span
+                          style={{fontFamily: 'var(--font-display)'}}
+                          className={
+                            'block text-4xl font-bold tracking-[-0.03em] text-neutral-900 transition-transform duration-300 group-hover:-translate-x-1 sm:text-5xl lg:text-6xl'
+                          }
+                        >
+                          {tool.name}
+                        </span>
+                        <p className={'mt-2 text-sm text-neutral-500'}>{tool.description}</p>
+                      </div>
+                    </div>
+                    <div className={'flex items-center gap-4'}>
+                      <span
+                        style={{fontFamily: 'var(--font-mono)'}}
                         className={
-                          'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
+                          'hidden text-xs uppercase tracking-[0.18em] text-neutral-500 transition group-hover:text-neutral-900 sm:inline'
                         }
                       >
-                        <Icon className="h-5 w-5" />
-                      </div>
-                      <Sparkles className="h-5 w-5 text-neutral-400" />
+                        Open tool
+                      </span>
+                      <span
+                        className={
+                          'flex h-11 w-11 items-center justify-center rounded-full border border-neutral-300 text-neutral-900 transition group-hover:border-neutral-900 group-hover:bg-neutral-900 group-hover:text-white sm:h-14 sm:w-14'
+                        }
+                      >
+                        <ArrowUpRight className={'h-5 w-5'} strokeWidth={2} />
+                      </span>
                     </div>
-                    <h3 className={'text-2xl font-bold text-neutral-900 mb-3'}>{tool.name}</h3>
-                    <p className={'mb-6 leading-relaxed text-neutral-600'}>{tool.description}</p>
-                    <div className={'space-y-2'}>
-                      {tool.features.map(feature => (
-                        <div key={feature} className={'flex items-center gap-2 text-sm text-neutral-600'}>
-                          <div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
-                          <span>{feature}</span>
-                        </div>
-                      ))}
+                  </Link>
+                </motion.li>
+              ))}
+            </ul>
+          </section>
+
+          {/* ========== WHY ========== */}
+          <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-28 sm:px-10 sm:py-36'}>
+              <SectionHeader
+                number={'02'}
+                label={'Why'}
+                title={'Built for developers,'}
+                titleAccent={'free forever.'}
+                subtitle={'No sign-up, no paywalls. Tools built by email experts for real-world workflows.'}
+              />
+
+              <div className={'mt-20 grid gap-10 sm:grid-cols-3 sm:gap-16'}>
+                {[
+                  {
+                    tag: 'Access',
+                    big: '$0',
+                    title: 'Free forever',
+                    body: 'No sign-up, no paywalls, no limits. Use these tools as much as you need, completely free.',
+                  },
+                  {
+                    tag: 'Focus',
+                    big: 'Dev-first',
+                    title: 'Developer-focused',
+                    body: 'Built by developers who work with email every day. Clean outputs, instant results, real-world workflows.',
+                  },
+                  {
+                    tag: 'Output',
+                    big: '100%',
+                    title: 'Production ready',
+                    body: 'Email-safe HTML that works across all email clients. Industry-standard validation. Battle-tested by thousands.',
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    key={item.tag}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.6, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                    className={'flex flex-col gap-6'}
+                  >
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'text-[11px] uppercase tracking-[0.2em] text-neutral-500'}
+                    >
+                      / {item.tag}
+                    </span>
+                    <div
+                      style={{fontFamily: 'var(--font-display)'}}
+                      className={'text-5xl font-extrabold tracking-[-0.035em] text-neutral-900 sm:text-6xl'}
+                    >
+                      {item.big}
                     </div>
+                    <div className={'h-px w-full bg-neutral-300'} />
+                    <h3
+                      style={{fontFamily: 'var(--font-display)'}}
+                      className={'text-xl font-semibold text-neutral-900'}
+                    >
+                      {item.title}
+                    </h3>
+                    <p className={'text-base leading-relaxed text-neutral-600'}>{item.body}</p>
                   </motion.div>
-                </Link>
-              );
-            })}
-          </div>
-        </section>
-
-        {/* Why Use These Tools */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why use these tools?</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Built by email experts for email developers</p>
-          </motion.div>
-
-          <div className={'grid gap-8 lg:grid-cols-3'}>
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
-              className={
-                'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
-              }
-            >
-              <Mail className="h-8 w-8 text-blue-500 mb-4" />
-              <h3 className={'text-2xl font-bold text-neutral-900'}>Free Forever</h3>
-              <p className={'mt-4 leading-relaxed text-neutral-600'}>
-                No sign-up, no paywalls, no limits. Use our tools as much as you need, completely free. We believe in
-                giving back to the email development community.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
-              className={
-                'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
-              }
-            >
-              <Code2 className="h-8 w-8 text-green-500 mb-4" />
-              <h3 className={'text-2xl font-bold text-neutral-900'}>Developer-Focused</h3>
-              <p className={'mt-4 leading-relaxed text-neutral-600'}>
-                Built by developers who work with email every day. Clean outputs, instant results, and designed for
-                real-world email workflows.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
-              className={
-                'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
-              }
-            >
-              <Sparkles className="h-8 w-8 text-yellow-500 mb-4" />
-              <h3 className={'text-2xl font-bold text-neutral-900'}>Production Ready</h3>
-              <p className={'mt-4 leading-relaxed text-neutral-600'}>
-                Generate email-safe HTML that works across all email clients. Verify emails with industry-standard
-                checks. Our tools are battle-tested and used by thousands of developers.
-              </p>
-            </motion.div>
-          </div>
-        </section>
-
-        {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Need production-grade email tools?</h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              These free tools are great for development, but Plunk offers so much more: templates, scheduling,
-              automation, analytics, and deliverability optimization. Start free, scale as you grow.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start with Plunk
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing
-              </Link>
+                ))}
+              </div>
             </div>
-          </motion.div>
-        </section>
-      </main>
+          </section>
+
+          {/* ========== CTA ========== */}
+          <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+              <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+                <motion.h2
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={
+                    'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'
+                  }
+                >
+                  Need production-grade email?
+                </motion.h2>
+
+                <motion.div
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                  className={'flex max-w-md flex-col gap-6'}
+                >
+                  <p className={'text-base text-neutral-300 sm:text-lg'}>
+                    Templates, scheduling, automation, analytics, and deliverability. Start free, scale as you grow.
+                  </p>
+                  <div className={'flex flex-wrap gap-3'}>
+                    <motion.a
+                      whileHover={{scale: 1.015}}
+                      whileTap={{scale: 0.985}}
+                      href={`${DASHBOARD_URI}/auth/signup`}
+                      className={
+                        'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'
+                      }
+                    >
+                      Start with Plunk
+                      <ArrowRight className="h-4 w-4" />
+                    </motion.a>
+                    <Link
+                      href="/pricing"
+                      className={
+                        'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'
+                      }
+                    >
+                      View pricing
+                    </Link>
+                  </div>
+                </motion.div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
 
       <Footer />
     </>

apps/landing/src/pages/tools/markdown-to-email.tsx

@@ -1,21 +1,41 @@
-import {Footer, Navbar} from '../../components';
+import {Footer, Navbar, SectionHeader} from '../../components';
 import {motion} from 'framer-motion';
 import {DASHBOARD_URI} from '../../lib/constants';
 import React, {useMemo, useState} from 'react';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, Check, Code2, Copy, Sparkles} from 'lucide-react';
+import {ArrowRight, Check, Code2, Copy} from 'lucide-react';
 import {MarkdownEmailEditor} from '../../components/tools/MarkdownEmailEditor';
 import {convertToCompleteEmailHtml} from '../../lib/emailHtmlConverter';
 import {Button} from '@plunk/ui';
+import {Bricolage_Grotesque, Hanken_Grotesk, JetBrains_Mono} from 'next/font/google';
+import Link from 'next/link';
+
+const display = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-display',
+  display: 'swap',
+  weight: ['400', '500', '600', '700', '800'],
+});
+
+const body = Hanken_Grotesk({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+});
+
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+  weight: ['400', '500'],
+});
 
 export default function MarkdownToEmail() {
   const [editorContent, setEditorContent] = useState('<p>Hello!</p><p>Try editing this text...</p>');
   const [copied, setCopied] = useState(false);
 
-  // Convert editor content to complete, ready-to-send email HTML
-  const emailSafeHtml = useMemo(() => {
-    return convertToCompleteEmailHtml(editorContent);
-  }, [editorContent]);
+  const emailSafeHtml = useMemo(() => convertToCompleteEmailHtml(editorContent), [editorContent]);
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(emailSafeHtml);
@@ -28,135 +48,242 @@ export default function MarkdownToEmail() {
       <NextSeo
         title="Free Markdown to Email HTML Converter | Plunk"
         description="Convert markdown and rich text to email-safe HTML instantly. Free online tool with live preview. Perfect for email developers and marketers."
-        canonical="https://next.useplunk.com/tools/markdown-to-email"
+        canonical="https://www.useplunk.com/tools/markdown-to-email"
         openGraph={{
           title: 'Free Markdown to Email HTML Converter | Plunk',
           description:
             'Convert markdown and rich text to email-safe HTML instantly. Free online tool with live preview.',
-          url: 'https://next.useplunk.com/tools/markdown-to-email',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email HTML Converter'}],
+          url: 'https://www.useplunk.com/tools/markdown-to-email',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email HTML Converter'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
-
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
+      <div className={`${display.variable} ${body.variable} ${mono.variable}`}>
+        <main className={'text-neutral-800'}>
+          {/* ========== HERO ========== */}
+          <section className={'relative overflow-hidden'}>
             <div
+              aria-hidden
               className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
+                'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
               }
-            >
-              <Sparkles className="h-4 w-4 text-neutral-600" />
-              <span className={'text-sm text-neutral-600'}>Free Tool</span>
-            </div>
+            />
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Markdown to Email
-              <br />
-              HTML Converter
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Create beautiful, email-safe HTML instantly. Format your text with our visual editor and get
-              production-ready HTML with inlined styles that works across all email clients.
-            </p>
-          </motion.div>
-        </section>
-
-        {/* Editor Section */}
-        <section className={'py-16'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'grid gap-6 lg:grid-cols-2'}
-          >
-            {/* Left: Editor */}
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-xl font-semibold text-neutral-900">Visual Editor</h2>
-                <div className="flex items-center gap-2 text-sm text-neutral-600">
-                  <Code2 className="h-4 w-4" />
-                  <span>Format your content</span>
-                </div>
-              </div>
-              <MarkdownEmailEditor value={editorContent} onChange={setEditorContent} />
-            </div>
-
-            {/* Right: Email-Safe HTML Output */}
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-xl font-semibold text-neutral-900">Email-Safe HTML</h2>
-                <Button onClick={handleCopy} size="sm" variant="outline" className="gap-2">
-                  {copied ? (
-                    <>
-                      <Check className="h-4 w-4" />
-                      Copied!
-                    </>
-                  ) : (
-                    <>
-                      <Copy className="h-4 w-4" />
-                      Copy
-                    </>
-                  )}
-                </Button>
-              </div>
-              <div className="border border-neutral-200 rounded-lg overflow-hidden bg-white">
-                <pre className="p-4 text-xs font-mono overflow-x-auto min-h-[500px] max-h-[500px] overflow-y-auto">
-                  <code className="text-neutral-700">{emailSafeHtml}</code>
-                </pre>
-              </div>
-            </div>
-          </motion.div>
-        </section>
-
-        {/* CTA Section */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to send great emails?</h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              This tool is great for creating email HTML, but Plunk handles everything: templates, sending, tracking,
-              and deliverability. Start free, no credit card required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
+            <div className={'mx-auto max-w-[88rem] px-6 pb-24 pt-20 sm:px-10 sm:pt-28 lg:pb-36'}>
+              <motion.div
+                initial={{opacity: 0, y: 8}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-mono)'}}
                 className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                  'mb-16 flex items-center justify-between border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700 sm:mb-24'
                 }
               >
-                <span className={'flex items-center gap-2'}>
-                  Start with Plunk
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
+                <span className={'font-medium text-neutral-900'}>§ T-01 &nbsp;— &nbsp;Tool</span>
+                <Link
+                  href="/tools"
+                  className={'text-neutral-500 transition hover:text-neutral-900'}
+                >
+                  ← All tools
+                </Link>
+              </motion.div>
+
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                className={'mx-auto max-w-5xl text-center'}
+              >
+                <h1
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={
+                    'text-[clamp(2.5rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                  }
+                >
+                  Markdown to
+                  <br />
+                  Email HTML
+                </h1>
+                <p className={'mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-neutral-600 sm:text-xl'}>
+                  Format your content with the visual editor and get production-ready HTML with inlined styles that works across all email clients.
+                </p>
+              </motion.div>
             </div>
-          </motion.div>
-        </section>
-      </main>
+          </section>
+
+          {/* ========== EDITOR ========== */}
+          <section className={'mx-auto max-w-[88rem] px-6 py-16 sm:px-10 sm:py-20'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'grid gap-6 lg:grid-cols-2'}
+            >
+              {/* Left: Editor */}
+              <div>
+                <div className={'mb-4 flex items-center justify-between'}>
+                  <div className={'flex items-center gap-3'}>
+                    <Code2 className={'h-4 w-4 text-neutral-500'} strokeWidth={1.5} />
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
+                    >
+                      Visual Editor
+                    </span>
+                  </div>
+                </div>
+                <MarkdownEmailEditor value={editorContent} onChange={setEditorContent} />
+              </div>
+
+              {/* Right: Email-Safe HTML Output */}
+              <div>
+                <div className={'mb-4 flex items-center justify-between'}>
+                  <span
+                    style={{fontFamily: 'var(--font-mono)'}}
+                    className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
+                  >
+                    Email-Safe HTML
+                  </span>
+                  <Button onClick={handleCopy} size="sm" variant="outline" className={'gap-2'}>
+                    {copied ? (
+                      <>
+                        <Check className={'h-4 w-4'} />
+                        Copied!
+                      </>
+                    ) : (
+                      <>
+                        <Copy className={'h-4 w-4'} />
+                        Copy
+                      </>
+                    )}
+                  </Button>
+                </div>
+                <div className={'overflow-hidden rounded-[16px] border border-neutral-200 bg-white'}>
+                  <pre className={'max-h-[500px] min-h-[500px] overflow-x-auto overflow-y-auto p-4 text-xs'}>
+                    <code style={{fontFamily: 'var(--font-mono)'}} className={'text-neutral-700'}>
+                      {emailSafeHtml}
+                    </code>
+                  </pre>
+                </div>
+              </div>
+            </motion.div>
+          </section>
+
+          {/* ========== ABOUT ========== */}
+          <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-28 sm:px-10 sm:py-36'}>
+              <SectionHeader
+                number={'01'}
+                label={'How it works'}
+                title={'Write once,'}
+                titleAccent={'send everywhere.'}
+                subtitle={
+                  'Email clients ignore most CSS. This tool inlines every style rule so your formatting survives any inbox.'
+                }
+              />
+
+              <div className={'mt-20 grid gap-10 sm:grid-cols-3 sm:gap-16'}>
+                {[
+                  {
+                    tag: 'Step 1',
+                    big: 'Write',
+                    title: 'Format your content',
+                    body: 'Use the visual editor to format text, add headings, lists, and links — just like a word processor.',
+                  },
+                  {
+                    tag: 'Step 2',
+                    big: 'Convert',
+                    title: 'Styles get inlined',
+                    body: 'Every CSS rule is moved inline so email clients like Outlook, Gmail, and Apple Mail render it correctly.',
+                  },
+                  {
+                    tag: 'Step 3',
+                    big: 'Copy',
+                    title: 'Drop it in your send',
+                    body: 'Copy the output HTML and paste it into any email service, SMTP template, or API payload.',
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    key={item.tag}
+                    initial={{opacity: 0, y: 16}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.6, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                    className={'flex flex-col gap-6'}
+                  >
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'text-[11px] uppercase tracking-[0.2em] text-neutral-500'}
+                    >
+                      / {item.tag}
+                    </span>
+                    <div
+                      style={{fontFamily: 'var(--font-display)'}}
+                      className={'text-5xl font-extrabold tracking-[-0.035em] text-neutral-900 sm:text-6xl'}
+                    >
+                      {item.big}
+                    </div>
+                    <div className={'h-px w-full bg-neutral-300'} />
+                    <h3
+                      style={{fontFamily: 'var(--font-display)'}}
+                      className={'text-xl font-semibold text-neutral-900'}
+                    >
+                      {item.title}
+                    </h3>
+                    <p className={'text-base leading-relaxed text-neutral-600'}>{item.body}</p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* ========== CTA ========== */}
+          <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+              <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+                <motion.h2
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+                >
+                  Ready to send great emails?
+                </motion.h2>
+
+                <motion.div
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                  className={'flex max-w-md flex-col gap-6'}
+                >
+                  <p className={'text-base text-neutral-300 sm:text-lg'}>
+                    Plunk handles everything: templates, sending, tracking, and deliverability. Start free, no credit card required.
+                  </p>
+                  <div className={'flex flex-wrap gap-3'}>
+                    <motion.a
+                      whileHover={{scale: 1.015}}
+                      whileTap={{scale: 0.985}}
+                      href={`${DASHBOARD_URI}/auth/signup`}
+                      className={
+                        'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'
+                      }
+                    >
+                      Start with Plunk
+                      <ArrowRight className={'h-4 w-4'} />
+                    </motion.a>
+                  </div>
+                </motion.div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
 
       <Footer />
     </>

apps/landing/src/pages/tools/verify-email.tsx

@@ -1,13 +1,37 @@
-import {Footer, Navbar} from '../../components';
+import {Footer, Navbar, SectionHeader} from '../../components';
 import {motion} from 'framer-motion';
 import {DASHBOARD_URI} from '../../lib/constants';
 import React, {useState} from 'react';
 import {NextSeo} from 'next-seo';
 import {ArrowRight, CheckCircle, Loader2, Search} from 'lucide-react';
-import {type EmailVerificationResult as VerificationResult, verifyEmail} from '../../lib/emailVerification';
+import type {EmailVerificationResult as VerificationResult} from '@plunk/types';
+import {verifyEmail} from '../../lib/emailVerification';
 import {EmailVerificationResult} from '../../components/tools/EmailVerificationResult';
 import {Button, Input} from '@plunk/ui';
 import {EMAIL_VERIFICATION_FEATURES} from '../../lib/toolsContent';
+import {Bricolage_Grotesque, Hanken_Grotesk, JetBrains_Mono} from 'next/font/google';
+import Link from 'next/link';
+
+const display = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-display',
+  display: 'swap',
+  weight: ['400', '500', '600', '700', '800'],
+});
+
+const body = Hanken_Grotesk({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+});
+
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+  weight: ['400', '500'],
+});
 
 export default function VerifyEmailPage() {
   const [email, setEmail] = useState('');
@@ -36,195 +60,229 @@ export default function VerifyEmailPage() {
       <NextSeo
         title="Free Email Verification Tool | Check Email Validity | Plunk"
         description="Verify email addresses instantly. Check for typos, disposable domains, MX records, and more. Free email validation tool with detailed results."
-        canonical="https://next.useplunk.com/tools/verify-email"
+        canonical="https://www.useplunk.com/tools/verify-email"
         openGraph={{
           title: 'Free Email Verification Tool | Check Email Validity | Plunk',
           description: 'Verify email addresses instantly. Check for typos, disposable domains, MX records, and more.',
-          url: 'https://next.useplunk.com/tools/verify-email',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email Verification Tool'}],
+          url: 'https://www.useplunk.com/tools/verify-email',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email Verification Tool'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
-
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
+      <div className={`${display.variable} ${body.variable} ${mono.variable}`}>
+        <main className={'text-neutral-800'}>
+          {/* ========== HERO ========== */}
+          <section className={'relative overflow-hidden'}>
             <div
+              aria-hidden
               className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
+                'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'
               }
-            >
-              <Search className="h-4 w-4 text-neutral-600" />
-              <span className={'text-sm text-neutral-600'}>Free Tool</span>
-            </div>
+            />
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Email Verification
-              <br />
-              Tool
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Verify email addresses instantly. Check for typos, disposable domains, DNS configuration, and more. Get
-              detailed verification results in seconds.
-            </p>
-          </motion.div>
-        </section>
-
-        {/* Verification Tool Section */}
-        <section className={'pb-16'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-2xl'}
-          >
-            {/* Input Form */}
-            <div className="rounded-lg border border-neutral-200 bg-white p-8 shadow-lg">
-              <form onSubmit={handleVerify} className="space-y-4">
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-neutral-900 mb-2">
-                    Email Address
-                  </label>
-                  <Input
-                    id="email"
-                    type="email"
-                    value={email}
-                    onChange={e => setEmail(e.target.value)}
-                    placeholder="[email protected]"
-                    required
-                    disabled={loading}
-                    className="w-full"
-                  />
-                </div>
-
-                <Button type="submit" disabled={loading || !email} className="w-full gap-2">
-                  {loading ? (
-                    <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Verifying...
-                    </>
-                  ) : (
-                    <>
-                      <CheckCircle className="h-4 w-4" />
-                      Verify Email
-                    </>
-                  )}
-                </Button>
-              </form>
-
-              {/* Error Display */}
-              {error && (
-                <div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-4">
-                  <p className="text-sm text-red-700">{error}</p>
-                </div>
-              )}
-            </div>
-
-            {/* Results Display */}
-            {result && (
+            <div className={'mx-auto max-w-[88rem] px-6 pb-24 pt-20 sm:px-10 sm:pt-28 lg:pb-36'}>
               <motion.div
-                initial={{opacity: 0, y: 20}}
+                initial={{opacity: 0, y: 8}}
                 animate={{opacity: 1, y: 0}}
-                transition={{duration: 0.5}}
-                className="mt-8"
-              >
-                <EmailVerificationResult result={result} />
-              </motion.div>
-            )}
-          </motion.div>
-        </section>
-
-        {/* Educational Content */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why verify email addresses?</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>
-              Email verification helps improve deliverability and protect your sender reputation.
-            </p>
-          </motion.div>
-
-          <div className={'grid gap-6 sm:grid-cols-2 lg:grid-cols-3'}>
-            {EMAIL_VERIFICATION_FEATURES.map((feature, index) => {
-              const Icon = feature.icon;
-              return (
-                <motion.div
-                  key={feature.title}
-                  initial={{opacity: 0, y: 20}}
-                  whileInView={{opacity: 1, y: 0}}
-                  viewport={{once: true}}
-                  transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
-                  className={
-                    'group block h-full rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
-                  }
-                >
-                  <div
-                    className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white mb-4'}
-                  >
-                    <Icon className="h-5 w-5" />
-                  </div>
-                  <h3 className={'text-xl font-semibold text-neutral-900 mb-2'}>{feature.title}</h3>
-                  <p className={'text-sm text-neutral-600 leading-relaxed'}>{feature.description}</p>
-                </motion.div>
-              );
-            })}
-          </div>
-        </section>
-
-        {/* CTA Section */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
-              Ready for production-grade email verification?
-            </h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              This tool is great for testing individual emails, but Plunk offers bulk verification, real-time
-              validation, and seamless integration with your email workflows. Start free, no credit card required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
+                transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
+                style={{fontFamily: 'var(--font-mono)'}}
                 className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                  'mb-16 flex items-center justify-between border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700 sm:mb-24'
                 }
               >
-                <span className={'flex items-center gap-2'}>
-                  Start with Plunk
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
+                <span className={'font-medium text-neutral-900'}>§ T-02 &nbsp;— &nbsp;Tool</span>
+                <Link href="/tools" className={'text-neutral-500 transition hover:text-neutral-900'}>
+                  ← All tools
+                </Link>
+              </motion.div>
+
+              <motion.div
+                initial={{opacity: 0, y: 16}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                className={'mx-auto max-w-5xl text-center'}
+              >
+                <h1
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={
+                    'text-[clamp(2.5rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'
+                  }
+                >
+                  Email address
+                  <br />
+                  verification
+                </h1>
+                <p className={'mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-neutral-600 sm:text-xl'}>
+                  Check for typos, disposable domains, DNS configuration, and MX records. Detailed results in seconds.
+                </p>
+              </motion.div>
             </div>
-          </motion.div>
-        </section>
-      </main>
+          </section>
+
+          {/* ========== VERIFICATION TOOL ========== */}
+          <section className={'mx-auto max-w-[88rem] px-6 py-16 sm:px-10 sm:py-20'}>
+            <motion.div
+              initial={{opacity: 0, y: 20}}
+              whileInView={{opacity: 1, y: 0}}
+              viewport={{once: true}}
+              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+              className={'mx-auto max-w-2xl'}
+            >
+              <div className={'overflow-hidden rounded-[20px] border border-neutral-200 bg-white'}>
+                <div className={'border-b border-neutral-200 px-8 py-5'}>
+                  <div className={'flex items-center gap-3'}>
+                    <Search className={'h-4 w-4 text-neutral-500'} strokeWidth={1.5} />
+                    <span
+                      style={{fontFamily: 'var(--font-mono)'}}
+                      className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
+                    >
+                      Verify an address
+                    </span>
+                  </div>
+                </div>
+
+                <form onSubmit={handleVerify} className={'space-y-4 p-8'}>
+                  <div>
+                    <label htmlFor="email" className={'mb-2 block text-sm font-medium text-neutral-900'}>
+                      Email address
+                    </label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={e => setEmail(e.target.value)}
+                      placeholder="[email protected]"
+                      required
+                      disabled={loading}
+                      className={'w-full'}
+                    />
+                  </div>
+
+                  <Button type="submit" disabled={loading || !email} className={'w-full gap-2'}>
+                    {loading ? (
+                      <>
+                        <Loader2 className={'h-4 w-4 animate-spin'} />
+                        Verifying…
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className={'h-4 w-4'} />
+                        Verify email
+                      </>
+                    )}
+                  </Button>
+                </form>
+
+                {error && (
+                  <div className={'mx-8 mb-8 rounded-lg border border-red-200 bg-red-50 p-4'}>
+                    <p className={'text-sm text-red-700'}>{error}</p>
+                  </div>
+                )}
+              </div>
+
+              {result && (
+                <motion.div
+                  initial={{opacity: 0, y: 16}}
+                  animate={{opacity: 1, y: 0}}
+                  transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
+                  className={'mt-6'}
+                >
+                  <EmailVerificationResult result={result} />
+                </motion.div>
+              )}
+            </motion.div>
+          </section>
+
+          {/* ========== WHY VERIFY ========== */}
+          <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-28 sm:px-10 sm:py-36'}>
+              <SectionHeader
+                number={'01'}
+                label={'Why verify'}
+                title={'Protect your'}
+                titleAccent={'sender reputation.'}
+                subtitle={'Invalid addresses hurt deliverability. Verification keeps your list clean before you send.'}
+              />
+
+              <div className={'mt-20 grid gap-6 sm:grid-cols-2 lg:grid-cols-3'}>
+                {EMAIL_VERIFICATION_FEATURES.map((feature, index) => {
+                  const Icon = feature.icon;
+                  return (
+                    <motion.div
+                      key={feature.title}
+                      initial={{opacity: 0, y: 16}}
+                      whileInView={{opacity: 1, y: 0}}
+                      viewport={{once: true}}
+                      transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
+                      className={
+                        'flex flex-col gap-8 rounded-[20px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
+                      }
+                    >
+                      <div className={'text-neutral-900'}>
+                        <Icon className={'h-6 w-6'} strokeWidth={1.5} />
+                      </div>
+                      <div>
+                        <h3
+                          style={{fontFamily: 'var(--font-display)'}}
+                          className={'text-xl font-bold tracking-[-0.02em] text-neutral-900'}
+                        >
+                          {feature.title}
+                        </h3>
+                        <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* ========== CTA ========== */}
+          <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+            <div className={'mx-auto max-w-[88rem] px-6 py-32 sm:px-10 sm:py-40'}>
+              <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+                <motion.h2
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}}
+                  style={{fontFamily: 'var(--font-display)'}}
+                  className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}
+                >
+                  Ready for production-grade verification?
+                </motion.h2>
+
+                <motion.div
+                  initial={{opacity: 0, y: 16}}
+                  whileInView={{opacity: 1, y: 0}}
+                  viewport={{once: true}}
+                  transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}}
+                  className={'flex max-w-md flex-col gap-6'}
+                >
+                  <p className={'text-base text-neutral-300 sm:text-lg'}>
+                    Bulk verification, real-time validation, and seamless integration with your email workflows. Start free, no credit card required.
+                  </p>
+                  <div className={'flex flex-wrap gap-3'}>
+                    <motion.a
+                      whileHover={{scale: 1.015}}
+                      whileTap={{scale: 0.985}}
+                      href={`${DASHBOARD_URI}/auth/signup`}
+                      className={
+                        'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'
+                      }
+                    >
+                      Start with Plunk
+                      <ArrowRight className={'h-4 w-4'} />
+                    </motion.a>
+                  </div>
+                </motion.div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
 
       <Footer />
     </>

apps/landing/src/pages/vs/activecampaign.tsx

@@ -4,7 +4,7 @@ import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
 import React from 'react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, Code2, DollarSign, Globe, PackageOpen, Workflow, Zap} from 'lucide-react';
+import {ArrowRight, Check, Code2, DollarSign, Globe, PackageOpen, Workflow, Zap} from 'lucide-react';
 import type {ComparisonRow} from '../../components/ComparisonTable';
 import type {FAQ} from '../../components/FAQSection';
 
@@ -25,12 +25,12 @@ const faqs: FAQ[] = [
   {
     question: 'When should I choose ActiveCampaign over Plunk?',
     answer:
-      'Choose ActiveCampaign if you need a full CRM with sales automation, lead scoring, and machine learning features. ActiveCampaign is designed for marketing and sales teams that need an all-in-one platform. Choose Plunk if you need powerful email automation without the complexity—perfect for developers who want to integrate email into their product without CRM overhead.',
+      'Choose ActiveCampaign if you need a full CRM with sales automation, lead scoring, and machine learning features. ActiveCampaign is designed for marketing and sales teams that need an all-in-one platform. Choose Plunk if you need powerful email automation without the complexity. It is built for developers who want to integrate email into their product without CRM overhead.',
   },
   {
     question: 'What is the price difference between Plunk and ActiveCampaign?',
     answer:
-      'ActiveCampaign starts at $29/month for basic features and quickly scales to $149/month or more for automation features. Plunk uses pay-as-you-go pricing—you only pay for emails sent. For email-focused needs, Plunk typically costs 50-80% less than ActiveCampaign while providing the same email automation capabilities.',
+      'ActiveCampaign starts at $29/month for basic features and quickly scales to $149/month or more for automation features. Plunk uses pay-as-you-go pricing. You only pay for emails sent. For email-focused needs, Plunk typically costs 50-80% less than ActiveCampaign while providing the same email automation capabilities.',
   },
   {
     question: "Can Plunk match ActiveCampaign's automation capabilities?",
@@ -40,7 +40,7 @@ const faqs: FAQ[] = [
   {
     question: 'Is migration from ActiveCampaign to Plunk difficult?',
     answer:
-      "It depends on your ActiveCampaign usage. If you're primarily using email automation and campaigns, migration is straightforward—export contacts, recreate workflows, and integrate Plunk's API. If you heavily rely on CRM, lead scoring, or sales automation, you'll need separate tools for those features. Most developers migrate in a day or less.",
+      "It depends on your ActiveCampaign usage. If you're primarily using email automation and campaigns, migration is straightforward: export contacts, recreate workflows, and integrate Plunk's API. If you heavily rely on CRM, lead scoring, or sales automation, you'll need separate tools for those features. Most developers migrate in a day or less.",
   },
   {
     question: 'What ActiveCampaign features does Plunk not have?',
@@ -49,380 +49,150 @@ const faqs: FAQ[] = [
   },
 ];
 
-/**
- * Plunk vs ActiveCampaign comparison page
- */
 export default function ActiveCampaignComparison() {
   return (
     <>
       <NextSeo
         title="ActiveCampaign Alternative: Open-Source & Affordable | Plunk"
         description="Powerful email automation without ActiveCampaign's complexity and cost. Open-source, developer-friendly, pay-as-you-go pricing. No CRM bloat."
-        canonical="https://next.useplunk.com/vs/activecampaign"
+        canonical="https://www.useplunk.com/vs/activecampaign"
         openGraph={{
           title: 'ActiveCampaign Alternative: Open-Source & Affordable | Plunk',
           description:
             "Powerful email automation without ActiveCampaign's complexity and cost. Open-source, developer-friendly, pay-as-you-go pricing.",
-          url: 'https://next.useplunk.com/vs/activecampaign',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs ActiveCampaign'}],
+          url: 'https://www.useplunk.com/vs/activecampaign',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs ActiveCampaign'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
+      <main className={'text-neutral-800'}>
 
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
-            <div
-              className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
-              }
-            >
-              <span className={'text-sm text-neutral-600'}>Comparing</span>
-              <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ActiveCampaign</span>
-            </div>
-
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Open-source alternative
-              <br />
-              for ActiveCampaign
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              ActiveCampaign is powerful but expensive and complex. Plunk delivers essential email automation without
-              CRM bloat, sales features, or enterprise pricing. Built for developers, not marketing departments.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
-                }
-              >
-                <span className={'flex items-center gap-2'}>
-                  Get started free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-              <Link
-                href={WIKI_URI}
-                target={'_blank'}
-                className={
-                  'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View documentation
-              </Link>
-            </div>
-          </motion.div>
-        </section>
-
-        {/* Pricing Model Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
-              Enterprise Features Without Enterprise Prices
-            </h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Email automation that doesn't break the bank</p>
-          </motion.div>
-
-          <div className={'grid gap-8 lg:grid-cols-2'}>
-            <motion.div
-              initial={{opacity: 0, x: -20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border-2 border-neutral-900 bg-white p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-white'}>Plunk</span>
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div aria-hidden className={'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'} />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div initial={{opacity: 0, y: 16}} animate={{opacity: 1, y: 0}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}>
+              <div style={{fontFamily: 'var(--font-mono)'}} className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>
+                Plunk vs ActiveCampaign
               </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Simple pay-as-you-go</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Only pay for emails sent. All features included, no tier gating, no forced upgrades.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>Pay-as-you-go</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>All automation features included</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>No monthly minimums or contracts</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Typical savings: 50-80% vs ActiveCampaign</span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, x: 20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border border-neutral-200 bg-neutral-50 p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-200 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-neutral-900'}>ActiveCampaign</span>
-              </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Expensive subscription tiers</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Complex pricing with feature gating. Automation requires higher tiers.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>From $29/month</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Advanced automation: $149+/month</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Feature limits on lower tiers</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Includes CRM/sales features you may not need</span>
-                </div>
+              <h1 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'}>
+                Open-source alternative
+                <br />
+                for ActiveCampaign
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>ActiveCampaign is powerful but expensive and complex. Plunk delivers essential email automation without CRM bloat, sales features, or enterprise pricing. Built for developers, not marketing departments.</p>
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'}>
+                  Get started free <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link href={WIKI_URI} target={'_blank'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'}>
+                  View documentation
+                </Link>
               </div>
             </motion.div>
           </div>
         </section>
 
-        {/* Key Advantages */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-20 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Automation Without Complexity</h2>
-          </motion.div>
-
-          <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <DollarSign className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Affordable Pricing</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Pay-as-you-go with all features included. No expensive tier upgrades required for automation. Typically
-                50-80% cheaper than ActiveCampaign.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Zap className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>5-Minute Setup</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Start sending in minutes. No CRM to configure, no sales pipeline to set up. Just authenticate and build
-                your email workflows.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Code2 className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Developer-First</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Clean API designed for developers, not marketing teams. Integrate email into your product without
-                learning complex enterprise software.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <PackageOpen className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                AGPL-3.0 licensed. Full transparency into how your emails are processed. Contribute features, understand
-                the system. ActiveCampaign is proprietary.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Globe className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Self-Hostable</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Deploy on your own infrastructure with Docker. Full data control, compliance-ready, no vendor lock-in.
-                ActiveCampaign is cloud-only.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Workflow className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Workflow Automation</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Event-based triggers, segmentation, and automated sequences. All the email automation power of
-                ActiveCampaign without CRM complexity.
-              </p>
+        {/* Pricing comparison */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>
+                Enterprise Features Without Enterprise Prices
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Email automation that doesn't break the bank</p>
             </motion.div>
+            <div className={'grid gap-4 lg:grid-cols-2'}>
+              <motion.div initial={{opacity: 0, x: -20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-900 bg-neutral-900 p-10 text-white'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-400'}>Plunk</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-white'}>Simple pay-as-you-go</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-300'}>Only pay for emails sent. All features included, no tier gating, no forced upgrades.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-white'}>Pay-as-you-go</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />All automation features included</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />No monthly minimums or contracts</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Typical savings: 50-80% vs ActiveCampaign</li>
+                </ul>
+              </motion.div>
+              <motion.div initial={{opacity: 0, x: 20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-200 bg-white p-10'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>ActiveCampaign</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-neutral-900'}>Expensive subscription tiers</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Complex pricing with feature gating. Automation requires higher tiers.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-neutral-900'}>From $29/month</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Advanced automation: $149+/month</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Feature limits on lower tiers</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Includes CRM/sales features you may not need</li>
+                </ul>
+              </motion.div>
+            </div>
           </div>
         </section>
 
-        {/* Feature Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2>
-          </motion.div>
+        {/* Key advantages */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Automation Without Complexity</h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Powerful email workflows without the enterprise overhead</p>
+            </motion.div>
+            <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+              {[
+                {icon: <Workflow className="h-5 w-5" />, title: 'Workflow Automation', body: 'Build automated email sequences with triggers, delays, and conditions. No CRM required. Pure email automation that integrates with your product.'},
+                {icon: <Code2 className="h-5 w-5" />, title: 'Developer-First API', body: 'Integrate email into your application with a clean REST API. No complex marketing UI to navigate — just code and send.'},
+                {icon: <DollarSign className="h-5 w-5" />, title: '50-80% Cost Savings', body: 'ActiveCampaign charges $149+/month for automation features. Plunk charges for emails sent only. The savings add up fast.'},
+                {icon: <PackageOpen className="h-5 w-5" />, title: 'Open Source', body: 'AGPL-3.0 licensed. Inspect the code, understand the system, contribute features. No proprietary algorithms or black-box systems.'},
+                {icon: <Globe className="h-5 w-5" />, title: 'Self-Hostable', body: 'Deploy on your own infrastructure with Docker. Full data ownership and compliance control. ActiveCampaign is cloud-only.'},
+                {icon: <Zap className="h-5 w-5" />, title: 'Fast Setup', body: 'Start sending in 5 minutes. Simple authentication, clean API, comprehensive docs. No CRM to configure before you can send your first email.'},
+              ].map((item, i) => (
+                <motion.div key={item.title} initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                  <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}>{item.icon}</div>
+                  <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>{item.title}</h3>
+                  <p className={'mt-3 leading-relaxed text-neutral-600'}>{item.body}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
 
-          <ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} />
+        {/* Feature comparison table */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Feature comparison</h2>
+            </motion.div>
+            <ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} />
+          </div>
         </section>
 
         {/* FAQ */}
         <FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
-              Get email automation without the bloat
-            </h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              Join developers choosing focused email automation over enterprise complexity. Start free, no credit card
-              required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start free trial
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing
-              </Link>
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2 initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}} style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}>
+                Email automation, not enterprise complexity.
+              </motion.h2>
+              <motion.div initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}} className={'flex max-w-md flex-col gap-6'}>
+                <p className={'text-base text-neutral-300 sm:text-lg'}>Save 50-80% on email automation. Open-source, self-hostable, pay-as-you-go. Start free.</p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}>
+                    Get started free <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link href={'/pricing'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}>
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
             </div>
-          </motion.div>
+          </div>
         </section>
-      </main>
 
+      </main>
       <Footer />
     </>
   );

apps/landing/src/pages/vs/bento.tsx

@@ -4,7 +4,7 @@ import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
 import React from 'react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, Code2, DollarSign, Globe, Mail, PackageOpen, Zap} from 'lucide-react';
+import {ArrowRight, Check, Code2, DollarSign, Globe, PackageOpen, Zap} from 'lucide-react';
 import type {ComparisonRow} from '../../components/ComparisonTable';
 import type {FAQ} from '../../components/FAQSection';
 
@@ -25,17 +25,17 @@ const faqs: FAQ[] = [
   {
     question: 'When should I choose Bento over Plunk?',
     answer:
-      "Choose Bento if you need an all-in-one platform with CRM, live chat, and customer relationship features alongside email. Bento is designed for small businesses and creators who want everything in one place. Choose Plunk if you're a developer who needs focused email automation without CRM bloat—perfect for integrating email into your product.",
+      "Choose Bento if you need an all-in-one platform with CRM, live chat, and customer relationship features alongside email. Bento is designed for small businesses and creators who want everything in one place. Choose Plunk if you're a developer who needs focused email automation without CRM bloat. It's built specifically for integrating email into your product.",
   },
   {
     question: 'What is the pricing difference between Plunk and Bento?',
     answer:
-      'Bento offers a 30-day unlimited trial, then switches to subscription pricing. Plunk uses pay-as-you-go pricing with no trials needed—you only pay for emails sent. For email-focused needs, Plunk is typically more cost-effective. Bento includes CRM and live chat in the price, so if you need those features, Bento may offer better value.',
+      'Bento offers a 30-day unlimited trial, then switches to subscription pricing. Plunk uses pay-as-you-go pricing with no trials needed. You only pay for emails sent. For email-focused needs, Plunk is typically more cost-effective. Bento includes CRM and live chat in the price, so if you need those features, Bento may offer better value.',
   },
   {
     question: 'Can Plunk handle email automation like Bento?',
     answer:
-      'Yes. Plunk supports workflow automation, event-based triggers, transactional emails, and marketing campaigns—all the email features Bento offers. The difference is Plunk focuses purely on email, while Bento includes CRM, live chat, and customer relationship management. If you only need email automation, Plunk is simpler.',
+      'Yes. Plunk supports workflow automation, event-based triggers, transactional emails, and marketing campaigns. All the email features Bento offers. The difference is Plunk focuses purely on email, while Bento includes CRM, live chat, and customer relationship management. If you only need email automation, Plunk is simpler.',
   },
   {
     question: 'How does the developer experience compare?',
@@ -49,378 +49,149 @@ const faqs: FAQ[] = [
   },
 ];
 
-/**
- * Plunk vs Bento comparison page
- */
 export default function BentoComparison() {
   return (
     <>
       <NextSeo
         title="Bento Alternative: Developer-First Email Platform | Plunk"
         description="Open-source alternative to Bento. API-first email platform without CRM bloat. Self-hostable, pay-as-you-go pricing, built for developers."
-        canonical="https://next.useplunk.com/vs/bento"
+        canonical="https://www.useplunk.com/vs/bento"
         openGraph={{
           title: 'Bento Alternative: Developer-First Email Platform | Plunk',
           description:
             'Open-source alternative to Bento. API-first email platform without CRM bloat. Self-hostable, pay-as-you-go pricing.',
-          url: 'https://next.useplunk.com/vs/bento',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Bento'}],
+          url: 'https://www.useplunk.com/vs/bento',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Bento'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
+      <main className={'text-neutral-800'}>
 
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
-            <div
-              className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
-              }
-            >
-              <span className={'text-sm text-neutral-600'}>Comparing</span>
-              <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Bento</span>
-            </div>
-
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Open-source alternative
-              <br />
-              for Bento
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Bento is an all-in-one platform. Plunk is focused on email. Get powerful email automation without CRM,
-              live chat, or multi-channel complexity. Developer-first, API-driven, transparent pricing.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
-                }
-              >
-                <span className={'flex items-center gap-2'}>
-                  Get started free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-              <Link
-                href={WIKI_URI}
-                target={'_blank'}
-                className={
-                  'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View documentation
-              </Link>
-            </div>
-          </motion.div>
-        </section>
-
-        {/* Pricing Model Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
-              Focused Email vs All-in-One Complexity
-            </h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not what you don't need</p>
-          </motion.div>
-
-          <div className={'grid gap-8 lg:grid-cols-2'}>
-            <motion.div
-              initial={{opacity: 0, x: -20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border-2 border-neutral-900 bg-white p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-white'}>Plunk</span>
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div aria-hidden className={'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'} />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div initial={{opacity: 0, y: 16}} animate={{opacity: 1, y: 0}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}>
+              <div style={{fontFamily: 'var(--font-mono)'}} className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>
+                Plunk vs Bento
               </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per email sent</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Pay-as-you-go for email only. No CRM or chat features you don't need. Simple, transparent pricing.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>Pay-as-you-go</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Only pay for emails sent</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>No monthly commitments</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Focus on email, nothing more</span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, x: 20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border border-neutral-200 bg-neutral-50 p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-200 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-neutral-900'}>Bento</span>
-              </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Trial then subscription</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                30-day unlimited trial, then subscription pricing. Includes CRM, chat, and multi-channel features.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>30-day trial</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Trial ends, then monthly subscription</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Includes features beyond email</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>All-in-one platform approach</span>
-                </div>
+              <h1 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'}>
+                Open-source alternative
+                <br />
+                for Bento
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>Bento is an all-in-one platform. Plunk is focused on email. Get powerful email automation without CRM, live chat, or multi-channel complexity. Developer-first, API-driven, transparent pricing.</p>
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'}>
+                  Get started free <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link href={WIKI_URI} target={'_blank'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'}>
+                  View documentation
+                </Link>
               </div>
             </motion.div>
           </div>
         </section>
 
-        {/* Key Advantages */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-20 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Developer-First Email Platform</h2>
-          </motion.div>
-
-          <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Code2 className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>API-First Design</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Built for developers who integrate email into their applications. Clean REST API, comprehensive docs,
-                webhook support.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <PackageOpen className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                AGPL-3.0 licensed. Full code transparency, contribute features, understand the system. Bento is
-                proprietary closed-source.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <DollarSign className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Pay-as-you-go</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Only pay for emails sent. No subscriptions, no trials that expire, no forced plan upgrades. Predictable
-                costs based on usage.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Zap className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Simple Setup</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Start sending in 5 minutes. No CRM to configure, no multi-channel setup, no live chat integration. Just
-                email, done right.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Globe className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Self-Hostable</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Deploy on your infrastructure with Docker. Full data control, compliance-ready, no vendor lock-in. Bento
-                is cloud-only.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Mail className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Email-Focused</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Do one thing exceptionally well: email. No feature bloat, no CRM complexity, no multi-channel confusion.
-                Just powerful email automation.
-              </p>
+        {/* Pricing comparison */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>
+                Focused Email vs All-in-One Complexity
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not what you don't need</p>
             </motion.div>
+            <div className={'grid gap-4 lg:grid-cols-2'}>
+              <motion.div initial={{opacity: 0, x: -20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-900 bg-neutral-900 p-10 text-white'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-400'}>Plunk</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-white'}>Pay per email sent</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-300'}>Pay-as-you-go for email only. No CRM or chat features you don't need. Simple, transparent pricing.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-white'}>Pay-as-you-go</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Only pay for emails sent</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />No monthly commitments</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Focus on email, nothing more</li>
+                </ul>
+              </motion.div>
+              <motion.div initial={{opacity: 0, x: 20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-200 bg-white p-10'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>Bento</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-neutral-900'}>Trial then subscription</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>30-day unlimited trial, then subscription pricing. Includes CRM, chat, and multi-channel features.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-neutral-900'}>30-day trial</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Trial ends, then monthly subscription</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Includes features beyond email</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />All-in-one platform approach</li>
+                </ul>
+              </motion.div>
+            </div>
           </div>
         </section>
 
-        {/* Feature Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2>
-          </motion.div>
+        {/* Key advantages */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Developer-First Email Platform</h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Everything you need for email, nothing you don't</p>
+            </motion.div>
+            <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+              {[
+                {icon: <Code2 className="h-5 w-5" />, title: 'API-First Design', body: 'Built for developers who integrate email into their applications. Clean REST API, comprehensive docs, webhook support.'},
+                {icon: <PackageOpen className="h-5 w-5" />, title: 'Open Source', body: 'AGPL-3.0 licensed. Full code transparency, contribute features, understand the system. Bento is proprietary closed-source.'},
+                {icon: <DollarSign className="h-5 w-5" />, title: 'Pay-as-you-go', body: 'Only pay for emails sent. No subscriptions, no trials that expire, no forced plan upgrades. Predictable costs based on usage.'},
+                {icon: <Zap className="h-5 w-5" />, title: 'Simple Setup', body: 'Start sending in 5 minutes. No CRM to configure, no multi-channel setup, no live chat integration. Just email, done right.'},
+                {icon: <Globe className="h-5 w-5" />, title: 'Self-Hostable', body: 'Deploy on your infrastructure with Docker. Full data ownership, compliance control, no vendor lock-in. Bento is cloud-only.'},
+              ].map((item, i) => (
+                <motion.div key={item.title} initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                  <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}>{item.icon}</div>
+                  <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>{item.title}</h3>
+                  <p className={'mt-3 leading-relaxed text-neutral-600'}>{item.body}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
 
-          <ComparisonTable competitorName="Bento" rows={comparisonData} />
+        {/* Feature comparison table */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Feature comparison</h2>
+            </motion.div>
+            <ComparisonTable competitorName="Bento" rows={comparisonData} />
+          </div>
         </section>
 
         {/* FAQ */}
         <FAQSection faqs={faqs} schemaId="faq-schema-bento" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Get focused email automation</h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              Join developers choosing focused email solutions over all-in-one complexity. Start free, no credit card
-              required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start free trial
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing
-              </Link>
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2 initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}} style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}>
+                Focused email. No bloat.
+              </motion.h2>
+              <motion.div initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}} className={'flex max-w-md flex-col gap-6'}>
+                <p className={'text-base text-neutral-300 sm:text-lg'}>API-first email without CRM complexity. Open-source, self-hostable, pay-as-you-go. Start free.</p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}>
+                    Get started free <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link href={'/pricing'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}>
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
             </div>
-          </motion.div>
+          </div>
         </section>
-      </main>
 
+      </main>
       <Footer />
     </>
   );

apps/landing/src/pages/vs/brevo.tsx

@@ -4,7 +4,7 @@ import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
 import React from 'react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, BarChart3, DollarSign, Globe, PackageOpen, Users, Zap} from 'lucide-react';
+import {ArrowRight, BarChart3, Check, DollarSign, Globe, PackageOpen, Users, Zap} from 'lucide-react';
 import type {ComparisonRow} from '../../components/ComparisonTable';
 import type {FAQ} from '../../components/FAQSection';
 
@@ -57,368 +57,165 @@ export default function BrevoComparison() {
       <NextSeo
         title="Brevo (Sendinblue) Alternative: Developer-First & Open Source | Plunk"
         description="Plunk offers a simpler, developer-focused alternative to Brevo with pay-as-you-go pricing, open-source code, and self-hosting. No contact limits."
-        canonical="https://next.useplunk.com/vs/brevo"
+        canonical="https://www.useplunk.com/vs/brevo"
         openGraph={{
           title: 'Brevo (Sendinblue) Alternative: Developer-First & Open Source | Plunk',
           description:
             'Plunk offers a simpler, developer-focused alternative to Brevo with pay-as-you-go pricing, open-source code, and self-hosting.',
-          url: 'https://next.useplunk.com/vs/brevo',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Brevo'}],
+          url: 'https://www.useplunk.com/vs/brevo',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Brevo'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
+      <main className={'text-neutral-800'}>
 
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
-            <div
-              className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
-              }
-            >
-              <span className={'text-sm text-neutral-600'}>Comparing</span>
-              <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Brevo</span>
-            </div>
-
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Open-source alternative
-              <br />
-              for Brevo
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Simpler pricing, cleaner API, open-source code. All the email power, none of the bloat. Built for
-              developers, not marketing teams.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
-                }
-              >
-                <span className={'flex items-center gap-2'}>
-                  Get started free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-              <Link
-                href={WIKI_URI}
-                target={'_blank'}
-                className={
-                  'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View documentation
-              </Link>
-            </div>
-          </motion.div>
-        </section>
-
-        {/* Pricing Model Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Pricing That Scales With You</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p>
-          </motion.div>
-
-          <div className={'grid gap-8 lg:grid-cols-2'}>
-            <motion.div
-              initial={{opacity: 0, x: -20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border-2 border-neutral-900 bg-white p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-white'}>Plunk</span>
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div aria-hidden className={'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'} />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div initial={{opacity: 0, y: 16}} animate={{opacity: 1, y: 0}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}>
+              <div style={{fontFamily: 'var(--font-mono)'}} className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>
+                Plunk vs Brevo
               </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per email</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Simple pay-as-you-go pricing. Unlimited contacts, pay only for emails sent.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>$0.001/email</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Unlimited contacts included</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>All features on all plans</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>No monthly minimums</span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, x: 20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border border-neutral-200 bg-neutral-50 p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-200 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-neutral-900'}>Brevo</span>
-              </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Tiered by contacts</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Monthly subscription tiers based on contact count with feature restrictions on lower plans.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>Contact-based</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Pricing increases with contacts</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Features gated by tier</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Monthly subscription required</span>
-                </div>
+              <h1 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'}>
+                Open-source alternative
+                <br />
+                for Brevo
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>Simpler pricing, cleaner API, open-source code. All the email power, none of the bloat. Built for developers, not marketing teams.</p>
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'}>
+                  Get started free <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link href={WIKI_URI} target={'_blank'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'}>
+                  View documentation
+                </Link>
               </div>
             </motion.div>
           </div>
         </section>
 
-        {/* Key Advantages */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-20 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk Over Brevo</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Focus on email, not feature overload</p>
-          </motion.div>
-
-          <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <DollarSign className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Simpler Pricing</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Pay $0.001 per email with unlimited contacts. No contact-based tiers, no surprise charges as you grow.
-                Predictable costs.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Zap className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Developer-First</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Clean API, clear documentation, 5-minute setup. Built for developers who want to ship fast, not navigate
-                complex marketing suites.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <PackageOpen className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                AGPL-3.0 licensed. Inspect the code, contribute features, fork if needed. Full transparency, no vendor
-                lock-in. Brevo is proprietary.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Globe className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Self-Hostable</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Run on your infrastructure with Docker. Full data control, compliance-ready, cost-optimized. Brevo is
-                cloud-only.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Users className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Unlimited Contacts</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Store unlimited contacts at no extra cost. Brevo charges more as your contact list grows. With Plunk,
-                you only pay for emails sent.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <BarChart3 className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Email-Focused</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Plunk does email and does it well. No SMS, chat, CRM bloat. If you need just email automation, Plunk is
-                simpler and more focused.
-              </p>
+        {/* Pricing comparison */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>
+                Pricing That Scales With You
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p>
             </motion.div>
+            <div className={'grid gap-4 lg:grid-cols-2'}>
+              <motion.div initial={{opacity: 0, x: -20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-900 bg-neutral-900 p-10 text-white'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-400'}>Plunk</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-white'}>Pay per email</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-300'}>Simple pay-as-you-go pricing. Unlimited contacts, pay only for emails sent.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-white'}>$0.001/email</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Unlimited contacts included</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />All features on all plans</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />No monthly minimums</li>
+                </ul>
+              </motion.div>
+              <motion.div initial={{opacity: 0, x: 20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-200 bg-white p-10'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>Brevo</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-neutral-900'}>Tiered by contacts</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Monthly subscription tiers based on contact count with feature restrictions on lower plans.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-neutral-900'}>Contact-based</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Pricing increases with contacts</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Features gated by tier</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Monthly subscription required</li>
+                </ul>
+              </motion.div>
+            </div>
           </div>
         </section>
 
-        {/* Feature Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature Comparison</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p>
-          </motion.div>
+        {/* Key advantages */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Why Choose Plunk Over Brevo</h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Focus on email, not feature overload</p>
+            </motion.div>
+            <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><DollarSign className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Simpler Pricing</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Pay $0.001 per email with unlimited contacts. No contact-based tiers, no surprise charges as you grow. Predictable costs.</p>
+              </motion.div>
 
-          <ComparisonTable competitorName="Brevo" rows={comparisonData} />
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Zap className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Developer-First</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Clean API, clear documentation, 5-minute setup. Built for developers who want to ship fast, not navigate complex marketing suites.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><PackageOpen className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Open Source</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>AGPL-3.0 licensed. Inspect the code, contribute features, fork if needed. Full transparency, no vendor lock-in. Brevo is proprietary.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Globe className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Self-Hostable</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Run on your infrastructure with Docker. Full data control, compliance-ready, cost-optimized. Brevo is cloud-only.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Users className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Unlimited Contacts</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Store unlimited contacts at no extra cost. Brevo charges more as your contact list grows. With Plunk, you only pay for emails sent.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><BarChart3 className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Email-Focused</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Plunk does email and does it well. No SMS, chat, CRM bloat. If you need just email automation, Plunk is simpler and more focused.</p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Feature comparison table */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Feature comparison</h2>
+            </motion.div>
+            <ComparisonTable competitorName="Brevo" rows={comparisonData} />
+          </div>
         </section>
 
         {/* FAQ */}
         <FAQSection faqs={faqs} schemaId="faq-schema-brevo" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Make the switch to simplicity</h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              Join developers choosing focused tools over bloated marketing suites. Start free, no credit card required.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start free trial
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing details
-              </Link>
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2 initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}} style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}>
+                Make the switch to simplicity
+              </motion.h2>
+              <motion.div initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}} className={'flex max-w-md flex-col gap-6'}>
+                <p className={'text-base text-neutral-300 sm:text-lg'}>Join developers choosing focused tools over bloated marketing suites. Start free, no credit card required.</p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}>
+                    Get started free <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link href={'/pricing'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}>
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
             </div>
-          </motion.div>
+          </div>
         </section>
-      </main>
 
+      </main>
       <Footer />
     </>
   );

apps/landing/src/pages/vs/convertkit.tsx

@@ -4,7 +4,7 @@ import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
 import React from 'react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
-import {ArrowRight, Code2, DollarSign, Globe, PackageOpen, Users, Zap} from 'lucide-react';
+import {ArrowRight, Check, Code2, DollarSign, Globe, PackageOpen, Users, Zap} from 'lucide-react';
 import type {ComparisonRow} from '../../components/ComparisonTable';
 import type {FAQ} from '../../components/FAQSection';
 
@@ -30,12 +30,12 @@ const faqs: FAQ[] = [
   {
     question: 'What is the pricing difference between Plunk and ConvertKit?',
     answer:
-      'ConvertKit charges based on subscriber count—your cost increases as your list grows, regardless of how many emails you send. Plunk uses pay-as-you-go pricing where you only pay for emails actually sent. This means with ConvertKit, a list of 10,000 subscribers costs $119/month even if you rarely email them. With Plunk, you only pay when you send.',
+      'ConvertKit charges based on subscriber count. Your cost increases as your list grows, regardless of how many emails you send. Plunk uses pay-as-you-go pricing where you only pay for emails actually sent. This means with ConvertKit, a list of 10,000 subscribers costs $119/month even if you rarely email them. With Plunk, you only pay when you send.',
   },
   {
     question: 'Can Plunk handle creator workflows like ConvertKit?',
     answer:
-      "Yes, Plunk supports email automation, workflows, and segmentation similar to ConvertKit. You can create automated sequences, trigger emails based on events, and segment your audience. The main difference is Plunk doesn't include landing page builders or product selling features—it's focused purely on email delivery and automation.",
+      "Yes, Plunk supports email automation, workflows, and segmentation similar to ConvertKit. You can create automated sequences, trigger emails based on events, and segment your audience. The main difference is Plunk doesn't include landing page builders or product selling features. It's focused purely on email delivery and automation.",
   },
   {
     question: 'Does Plunk have landing pages like ConvertKit?',
@@ -57,370 +57,165 @@ export default function ConvertkitComparison() {
     <>
       <NextSeo
         title="ConvertKit Alternative for Developers | Plunk"
-        description="Developer-first alternative to ConvertKit. Pay per email instead of per subscriber. Open-source, self-hostable, with powerful automation—no landing page bloat."
-        canonical="https://next.useplunk.com/vs/convertkit"
+        description="Developer-first alternative to ConvertKit. Pay per email instead of per subscriber. Open-source, self-hostable, with powerful automation. No landing page bloat."
+        canonical="https://www.useplunk.com/vs/convertkit"
         openGraph={{
           title: 'ConvertKit Alternative for Developers | Plunk',
           description:
             'Developer-first alternative to ConvertKit. Pay per email instead of per subscriber. Open-source, self-hostable, with powerful automation.',
-          url: 'https://next.useplunk.com/vs/convertkit',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs ConvertKit'}],
+          url: 'https://www.useplunk.com/vs/convertkit',
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs ConvertKit'}],
         }}
       />
 
       <Navbar />
 
-      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        {/* Hero Section */}
-        <section className={'relative py-32 sm:py-48'}>
-          <div
-            className={
-              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
-            }
-          />
+      <main className={'text-neutral-800'}>
 
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-4xl text-center'}
-          >
-            <div
-              className={
-                'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
-              }
-            >
-              <span className={'text-sm text-neutral-600'}>Comparing</span>
-              <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ConvertKit</span>
-            </div>
-
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Open-source alternative
-              <br />
-              for ConvertKit
-            </h1>
-
-            <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              ConvertKit is built for creators. Plunk is built for developers who need powerful email automation without
-              the creator-focused bloat. Same automation, better DX, pay-as-you-go.
-            </p>
-
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
-                }
-              >
-                <span className={'flex items-center gap-2'}>
-                  Get started free
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
-              </motion.a>
-              <Link
-                href={WIKI_URI}
-                target={'_blank'}
-                className={
-                  'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View documentation
-              </Link>
-            </div>
-          </motion.div>
-        </section>
-
-        {/* Pricing Model Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Pay for Emails, Not Subscribers</h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Pricing that grows with usage, not list size</p>
-          </motion.div>
-
-          <div className={'grid gap-8 lg:grid-cols-2'}>
-            <motion.div
-              initial={{opacity: 0, x: -20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border-2 border-neutral-900 bg-white p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-white'}>Plunk</span>
+        {/* Hero */}
+        <section className={'relative overflow-hidden'}>
+          <div aria-hidden className={'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#eeeeee_1px,transparent_1px),linear-gradient(to_bottom,#eeeeee_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_30%,#000_40%,transparent_95%)]'} />
+          <div className={'mx-auto max-w-[88rem] px-6 pb-20 pt-20 sm:px-10 sm:pt-28 sm:pb-28'}>
+            <motion.div initial={{opacity: 0, y: 16}} animate={{opacity: 1, y: 0}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}>
+              <div style={{fontFamily: 'var(--font-mono)'}} className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>
+                Plunk vs ConvertKit
               </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per email sent</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Pay-as-you-go pricing. Only pay for emails you send, not for subscribers you store.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>Pay-as-you-go</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Unlimited subscribers at no cost</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Only pay when you actually send</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-white'} />
-                  </div>
-                  <span>Grow your list without price increases</span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, x: 20}}
-              whileInView={{opacity: 1, x: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-              className={'rounded-2xl border border-neutral-200 bg-neutral-50 p-10'}
-            >
-              <div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-200 px-4 py-1.5'}>
-                <span className={'text-sm font-semibold text-neutral-900'}>ConvertKit</span>
-              </div>
-              <h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per subscriber count</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Monthly subscription based on total subscribers, whether you email them or not.
-              </p>
-              <div className={'mt-6 text-4xl font-bold text-neutral-900'}>From $25/month</div>
-              <div className={'mt-8 space-y-3'}>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Price increases with subscriber count</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>Pay even if you don't send emails</span>
-                </div>
-                <div className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  <div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
-                    <div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
-                  </div>
-                  <span>10K subscribers = $119/month</span>
-                </div>
+              <h1 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.75rem,7vw,6.5rem)] font-extrabold leading-[0.92] tracking-[-0.04em] text-neutral-900'}>
+                Open-source alternative
+                <br />
+                for ConvertKit
+              </h1>
+              <p className={'mt-6 max-w-2xl text-xl text-neutral-600'}>ConvertKit is built for creators. Plunk is built for developers who need powerful email automation without the creator-focused bloat. Same automation, better DX, pay-as-you-go.</p>
+              <div className={'mt-10 flex flex-wrap gap-3'}>
+                <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'group inline-flex items-center gap-2 rounded-full bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-[0_10px_30px_-10px_rgba(23,23,23,0.35)] transition hover:bg-neutral-800'}>
+                  Get started free <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </motion.a>
+                <Link href={WIKI_URI} target={'_blank'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-900'}>
+                  View documentation
+                </Link>
               </div>
             </motion.div>
           </div>
         </section>
 
-        {/* Key Advantages */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-20 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Built for Developers, Not Creators</h2>
-          </motion.div>
-
-          <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Code2 className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Developer-First API</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Modern REST API designed for developers. No visual builder complexity, just clean endpoints for sending
-                emails and managing workflows.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <DollarSign className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Pay-as-you-go Pricing</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Only pay for emails sent, not subscribers stored. Grow your list without worrying about tier upgrades or
-                subscription increases.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <PackageOpen className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                AGPL-3.0 licensed. Inspect the code, contribute features, understand exactly how your emails are sent.
-                ConvertKit is proprietary.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Globe className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Self-Hostable</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Run on your own infrastructure with Docker. Full data control, compliance-ready, cost-optimized for
-                scale. ConvertKit is cloud-only.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Zap className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>5-Minute Setup</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Start sending emails in minutes. No form builders to configure, no landing pages to design. Just
-                authenticate and send.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              whileInView={{opacity: 1, y: 0}}
-              viewport={{once: true}}
-              transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
-              className={'group bg-white p-12 transition hover:bg-neutral-50'}
-            >
-              <div
-                className={
-                  'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
-                }
-              >
-                <Users className="h-5 w-5" />
-              </div>
-              <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Unlimited Contacts</h3>
-              <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Store unlimited contacts without penalty. No subscriber tiers, no forced upgrades. Your contact database
-                grows freely.
-              </p>
+        {/* Pricing comparison */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>
+                Pay for Emails, Not Subscribers
+              </h2>
+              <p className={'mt-4 text-lg text-neutral-600'}>Pricing that grows with usage, not list size</p>
             </motion.div>
+            <div className={'grid gap-4 lg:grid-cols-2'}>
+              <motion.div initial={{opacity: 0, x: -20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-900 bg-neutral-900 p-10 text-white'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-400'}>Plunk</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-white'}>Pay per email sent</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-300'}>Pay-as-you-go pricing. Only pay for emails you send, not for subscribers you store.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-white'}>Pay-as-you-go</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Unlimited subscribers at no cost</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Only pay when you actually send</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-300'}><Check className="h-4 w-4 flex-shrink-0 text-neutral-400" />Grow your list without price increases</li>
+                </ul>
+              </motion.div>
+              <motion.div initial={{opacity: 0, x: 20}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'rounded-[24px] border border-neutral-200 bg-white p-10'}>
+                <div style={{fontFamily: 'var(--font-mono)'}} className={'text-[11px] uppercase tracking-[0.18em] text-neutral-500'}>ConvertKit</div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-2xl font-bold tracking-[-0.025em] text-neutral-900'}>Pay per subscriber count</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Monthly subscription based on total subscribers, whether you email them or not.</p>
+                <div style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-4xl font-extrabold tracking-[-0.03em] text-neutral-900'}>From $25/month</div>
+                <ul className={'mt-8 space-y-3'}>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Price increases with subscriber count</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />Pay even if you don't send emails</li>
+                  <li className={'flex items-center gap-3 text-sm text-neutral-600'}><div className={'h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-400'} />10K subscribers = $119/month</li>
+                </ul>
+              </motion.div>
+            </div>
           </div>
         </section>
 
-        {/* Feature Comparison */}
-        <section className={'py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mb-16 text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2>
-          </motion.div>
+        {/* Key advantages */}
+        <section className={'border-t border-neutral-200 bg-neutral-50/60'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Built for Developers, Not Creators</h2>
+            </motion.div>
+            <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Code2 className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Developer-First API</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Modern REST API designed for developers. No visual builder complexity, just clean endpoints for sending emails and managing workflows.</p>
+              </motion.div>
 
-          <ComparisonTable competitorName="ConvertKit" rows={comparisonData} />
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><DollarSign className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Pay-as-you-go Pricing</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Only pay for emails sent, not subscribers stored. Grow your list without worrying about tier upgrades or subscription increases.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><PackageOpen className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Open Source</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>AGPL-3.0 licensed. Inspect the code, contribute features, understand exactly how your emails are sent. ConvertKit is proprietary.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Globe className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Self-Hostable</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Run on your own infrastructure with Docker. Full data control, compliance-ready, cost-optimized for scale. ConvertKit is cloud-only.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Zap className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>5-Minute Setup</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Start sending emails in minutes. No form builders to configure, no landing pages to design. Just authenticate and send.</p>
+              </motion.div>
+
+              <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}} className={'bg-white p-10'}>
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}><Users className="h-5 w-5" /></div>
+                <h3 style={{fontFamily: 'var(--font-display)'}} className={'mt-6 text-xl font-bold tracking-[-0.02em] text-neutral-900'}>Unlimited Contacts</h3>
+                <p className={'mt-3 leading-relaxed text-neutral-600'}>Store unlimited contacts without penalty. No subscriber tiers, no forced upgrades. Your contact database grows freely.</p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Feature comparison table */}
+        <section className={'border-t border-neutral-200'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-16 sm:py-20 sm:px-10'}>
+            <motion.div initial={{opacity: 0, y: 20}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} className={'mb-10'}>
+              <h2 style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}>Feature comparison</h2>
+            </motion.div>
+            <ComparisonTable competitorName="ConvertKit" rows={comparisonData} />
+          </div>
         </section>
 
         {/* FAQ */}
         <FAQSection faqs={faqs} schemaId="faq-schema-convertkit" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
-          <motion.div
-            initial={{opacity: 0, y: 20}}
-            whileInView={{opacity: 1, y: 0}}
-            viewport={{once: true}}
-            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-            className={'mx-auto max-w-3xl text-center'}
-          >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
-              Ready for a developer-first email platform?
-            </h2>
-            <p className={'mt-6 text-lg text-neutral-600'}>
-              Join developers who've switched from ConvertKit to Plunk for better API design and transparent
-              pay-as-you-go pricing.
-            </p>
-            <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
-              <motion.a
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                href={`${DASHBOARD_URI}/auth/signup`}
-                className={
-                  'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
-                }
-              >
-                Start free trial
-              </motion.a>
-              <Link
-                href="/pricing"
-                className={
-                  'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
-                }
-              >
-                View pricing
-              </Link>
+        <section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
+          <div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+            <div className={'flex flex-col items-start gap-12 lg:flex-row lg:items-end lg:justify-between'}>
+              <motion.h2 initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, ease: [0.22, 1, 0.36, 1]}} style={{fontFamily: 'var(--font-display)'}} className={'text-[clamp(2.5rem,7vw,6rem)] font-extrabold leading-[0.95] tracking-[-0.035em]'}>
+                Ready for a developer-first email platform?
+              </motion.h2>
+              <motion.div initial={{opacity: 0, y: 16}} whileInView={{opacity: 1, y: 0}} viewport={{once: true}} transition={{duration: 0.9, delay: 0.15, ease: [0.22, 1, 0.36, 1]}} className={'flex max-w-md flex-col gap-6'}>
+                <p className={'text-base text-neutral-300 sm:text-lg'}>Join developers who've switched from ConvertKit to Plunk for better API design and transparent pay-as-you-go pricing.</p>
+                <div className={'flex flex-wrap gap-3'}>
+                  <motion.a whileHover={{scale: 1.015}} whileTap={{scale: 0.985}} href={`${DASHBOARD_URI}/auth/signup`} className={'inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100'}>
+                    Get started free <ArrowRight className="h-4 w-4" />
+                  </motion.a>
+                  <Link href={'/pricing'} className={'inline-flex items-center gap-2 rounded-full border border-neutral-700 px-7 py-3.5 text-sm font-semibold text-white transition hover:border-white'}>
+                    View pricing
+                  </Link>
+                </div>
+              </motion.div>
             </div>
-          </motion.div>
+          </div>
         </section>
-      </main>
 
+      </main>
       <Footer />
     </>
   );