fix: Sync display name in TemplateSearchPicker when initialName changes

Bumps [picomatch](https://github.com/micromatch/picomatch) from 2.3.1 to 2.3.2.
- [Release notes](https://github.com/micromatch/picomatch/releases)
- [Changelog](https://github.com/micromatch/picomatch/blob/master/CHANGELOG.md)
- [Commits](https://github.com/micromatch/picomatch/compare/2.3.1...2.3.2)

---
updated-dependencies:
- dependency-name: picomatch
  dependency-version: 2.3.2
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

.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)

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.5.0"
+  ".": "0.8.0"
 }

CHANGELOG.md

@@ -1,5 +1,92 @@
 # Changelog
 
+## [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)
 
 

CLAUDE.md

@@ -68,8 +68,8 @@ to run them separately (e.g., for debugging), use `dev:server` and `dev:worker`
   - 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)
+- **landing**: Next.js app (Pages Router) - Marketing site (www.useplunk.com)
-- **wiki**: Next.js app - Documentation site (next-wiki.useplunk.com)
+- **wiki**: Next.js app - Documentation site (docs.useplunk.com)
 
 ### Background Job Architecture
 

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)
+- **landing**: Next.js marketing site (www.useplunk.com)
-- **wiki**: Next.js documentation site (next-wiki.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 LANDING_URI=https://www.useplunk.com
-ARG WIKI_URI=https://next-wiki.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/package.json

@@ -37,7 +37,7 @@
     "jsonwebtoken": "^9.0.2",
     "mailchecker": "^6.0.19",
     "morgan": "^1.10.0",
-    "multer": "^2.0.2",
+    "multer": "^2.1.1",
     "signale": "^1.4.0",
     "stripe": "^20.0.0"
   },

apps/api/src/controllers/Actions.ts

@@ -72,12 +72,13 @@ export class Actions {
 
     // Create or update contact with persistent data only
     // ContactService.upsert will filter out non-persistent fields
-    // Event tracking should subscribe contacts by default
+    // 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,
       data as Record<string, unknown> | undefined,
-      subscribed ?? true,
+      subscribed,
     );
 
     // Track the event with ALL data (persistent + non-persistent)
@@ -268,7 +269,9 @@ export class Actions {
 
       // Create or update contact with metadata
       // Transactional emails should not subscribe contacts by default
-      const contact = await ContactService.upsert(auth.projectId, recipient.email, recipientData, subscribed ?? false);
+      // 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/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/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/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') {
+    const segmentType = type ?? 'DYNAMIC';
-      return res.status(400).json({error: 'Condition is required and must be an object'});
+
+    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,15 +1,21 @@
 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 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';
@@ -32,11 +38,35 @@ export class Webhooks {
       // 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({
@@ -48,7 +78,6 @@ export class Webhooks {
             return res.status(200).json({
               success: false,
               message: 'Failed to confirm subscription',
-              subscribeURL: req.body.SubscribeURL,
             });
           }
         } catch (confirmError) {
@@ -56,7 +85,6 @@ export class Webhooks {
           return res.status(200).json({
             success: false,
             message: 'Error confirming subscription',
-            subscribeURL: req.body.SubscribeURL,
           });
         }
       }
@@ -122,6 +150,16 @@ export class Webhooks {
             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) {
@@ -133,6 +171,32 @@ export class Webhooks {
                 );
               }
 
+              // Create an Email record for tracking (no actual email content since it's inbound)
+              const inboundEmail = await prisma.email.create({
+                data: {
+                  projectId: domainRecord.projectId,
+                  contactId: contact!.id,
+                  subject: body.mail?.commonHeaders?.subject || '(No subject)',
+                  body: '', // Inbound emails don't have body content in our system
+                  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
               const eventData = {
                 messageId: body.mail?.messageId,
@@ -158,7 +222,7 @@ export class Webhooks {
                 domainRecord.projectId,
                 'email.received',
                 contact?.id,
-                undefined, // No emailId for inbound emails (they're not sent by us)
+                inboundEmail.id, // Link the event to the inbound email record
                 eventData,
               );
 
@@ -459,6 +523,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},
@@ -469,10 +543,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 prisma.project.update({
-          await NtfyService.notifyPaymentFailed(project.name, project.id);
+            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/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

apps/api/src/services/ActivityService.ts

@@ -376,6 +376,9 @@ export class ActivityService {
     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}});
     }
@@ -485,6 +488,22 @@ export class ActivityService {
         });
       }
 
+      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`,

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(

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 (value !== null && value !== undefined && 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) {
             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 {deleteIdentity, 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,6 +126,14 @@ 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);
 

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 {
@@ -36,6 +38,7 @@ interface SendEmailParams {
   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)
 }
 
 /**
@@ -114,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},
@@ -288,9 +293,8 @@ export class EmailService {
       include: {
         contact: true,
         project: true,
-        template: {
+        template: {select: {type: true}},
-          select: {type: true},
+        campaign: {select: {type: true}},
-        },
       },
     });
 
@@ -352,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
@@ -381,7 +389,13 @@ export class EmailService {
       // 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
@@ -585,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}}),
@@ -599,6 +614,7 @@ export class EmailService {
       total,
       sent,
       delivered,
+      received,
       opened,
       clicked,
       bounced,
@@ -640,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)
@@ -655,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
       ? (() => {
@@ -709,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/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)
    */
@@ -229,7 +240,7 @@ export class NtfyService {
 
   /**
    * 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,
@@ -240,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 bounceListKey = `ntfy:bounce:latest`;
-    const projectListKey = `ntfy:bounce:projects`;
 
     // Increment global counter
     const globalCount = await redis.incr(globalCountKey);
 
-    // Increment project-specific counter
+    // Store this bounce event in a list (keep latest 20)
-    await redis.incr(projectCountKey);
+    const bounceEvent = JSON.stringify({
-
+      projectName,
-    // Add project to the set of projects with bounces (for tracking)
+      projectId,
-    await redis.sadd(projectListKey, 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
+      // Get the latest 20 bounces
-      const projectIds = await redis.smembers(projectListKey);
+      const latestBounces = await redis.lrange(bounceListKey, 0, 19);
 
-      // Get bounce counts for each project
+      // Parse and format the bounce events
-      const projectCounts: Array<{projectId: string; count: number; name: string}> = [];
+      const bounceDetails = latestBounces
-      for (const pid of projectIds) {
+        .map(bounce => {
-        const count = await redis.get(`ntfy:bounce:count:${pid}`);
+          try {
-        if (count) {
+            const parsed = JSON.parse(bounce);
-          // Fetch project name from database
+            return `  • ${parsed.recipientEmail} (${parsed.bounceType}) - ${parsed.projectName}`;
-          const {prisma} = await import('../database/prisma.js');
+          } catch {
-          const project = await prisma.project.findUnique({
+            return null;
-            where: {id: pid},
+          }
-            select: {name: true},
+        })
-          });
+        .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],
       });

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

@@ -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 altBoundary = `----=_AltPart_${Math.random().toString(36).substring(2)}`;
-  const mixedBoundary = attachments?.length ? `----=_MixedPart_${Math.random().toString(36).substring(2)}` : null;
+  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
-${
+Content-Type: ${rootContentType}
-  mixedBoundary
-    ? `Content-Type: multipart/mixed; boundary="${mixedBoundary}"`
-    : `Content-Type: multipart/alternative; boundary="${boundary}"`
-}
 ${
   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}--
+--${altBoundary}--
-${
+`;
-  attachments && attachments.length > 0
+
-    ? '\n' +
+  // Add inline attachments to the related container
-      attachments
+  if (relatedBoundary) {
-        .map(
+    const inlineAttachments = attachments?.filter(a => a.disposition === 'inline') ?? [];
-          attachment => `--${mixedBoundary}
+    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)}`,
+${breakLongLines(attachment.content, 76, true)}`;
-        )
+    }
-        .join('\n')
+    rawMessage += `\n--${mixedBoundary}--`;
-    : ''
+  }
-}${mixedBoundary ? `\n--${mixedBoundary}--` : ''}`;
 
   // Determine which configuration set to use
   // Only use NO_TRACKING if tracking toggle is enabled AND tracking is disabled

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
+    const segmentType = data.type ?? 'DYNAMIC';
-    this.validateCondition(data.condition);
+    let memberCount = 0;
+    let conditionJson: Prisma.InputJsonValue | typeof Prisma.JsonNull = Prisma.JsonNull;
 
-    // Compute initial member count
+    if (segmentType === 'DYNAMIC') {
-    const where = this.buildWhereClause(projectId, data.condition);
+      if (!data.condition) {
-    const memberCount = await prisma.contact.count({where});
+        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);
+    const existing = await this.get(projectId, segmentId);
-
-    // Validate condition if provided
-    if (data.condition) {
-      this.validateCondition(data.condition);
-    }
 
     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);
+            let memberCount: number;
-            const where = this.buildWhereClause(projectId, condition);
+
-            const memberCount = await prisma.contact.count({where});
+            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);
 

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
+      // For *.localhost, use .localhost (reserved TLD)
-      if (hostname.endsWith('.localhost') || hostname.endsWith('.local')) {
+      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';
@@ -531,12 +533,9 @@ export class WorkflowExecutionService {
       throw new Error('No template configured for SEND_EMAIL step');
     }
 
-    // Parse step config to get recipient configuration
+    // Parse and validate step config using schema
-    const stepConfig = config && typeof config === 'object' && !Array.isArray(config) ? config : {};
+    const stepConfig = WorkflowStepConfigSchemas.sendEmail.parse(config);
-    const recipientConfig =
+    const recipientConfig = stepConfig.recipient || {type: 'CONTACT' as const};
-      stepConfig.recipient && typeof stepConfig.recipient === 'object' && !Array.isArray(stepConfig.recipient)
-        ? (stepConfig.recipient as {type?: string; customEmail?: string})
-        : {type: 'CONTACT'};
 
     // Get contact data for variable substitution
     const contact = execution.contact;
@@ -566,19 +565,13 @@ export class WorkflowExecutionService {
     const renderedBody = this.renderTemplate(step.template.body, variables);
 
     // Determine recipient email
-    let recipientEmail = contact.email;
+    // Schema validation ensures customEmail exists when type is CUSTOM
-    let recipientContactId = contact.id;
+    const recipientEmail = recipientConfig.type === 'CUSTOM' ? recipientConfig.customEmail! : contact.email;
-
-    if (recipientConfig.type === 'CUSTOM' && recipientConfig.customEmail) {
-      recipientEmail = recipientConfig.customEmail;
-      // For custom recipients, we don't associate with a contact
-      recipientContactId = contact.id; // Keep original contact for tracking
-    }
 
     // Send email via EmailService
     const email = await EmailService.sendWorkflowEmail({
       projectId: execution.workflow.projectId,
-      contactId: recipientContactId,
+      contactId: contact.id, // Keep original contact for tracking
       workflowExecutionId: execution.id,
       workflowStepExecutionId: stepExecution.id, // Use stepExecution.id, not step.id
       templateId: step.template.id,
@@ -588,7 +581,7 @@ export class WorkflowExecutionService {
       fromName: step.template.fromName || undefined,
       replyTo: step.template.replyTo || undefined,
       // Pass custom recipient email if specified
-      recipientEmail: recipientConfig.type === 'CUSTOM' ? recipientEmail : undefined,
+      recipientEmail: recipientConfig.type === 'CUSTOM' ? recipientConfig.customEmail : undefined,
     });
 
     return {
@@ -727,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;
@@ -743,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,
@@ -751,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',
     };
@@ -800,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
    */
@@ -837,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',
@@ -996,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.name !== undefined) updateData.name = data.name;
-    if (data.description !== undefined) updateData.description = data.description;
+      if (data.description !== undefined) updateData.description = data.description;
-    if (data.triggerType !== undefined) updateData.triggerType = data.triggerType;
+      if (data.triggerType !== undefined) updateData.triggerType = data.triggerType;
-    if (data.triggerConfig !== undefined) {
+      if (data.triggerConfig !== undefined) {
-      updateData.triggerConfig = data.triggerConfig === null ? Prisma.JsonNull : data.triggerConfig;
+        updateData.triggerConfig = data.triggerConfig === null ? Prisma.JsonNull : data.triggerConfig;
-    }
+      }
-    if (data.enabled !== undefined) updateData.enabled = data.enabled;
+      if (data.enabled !== undefined) updateData.enabled = data.enabled;
-    if (data.allowReentry !== undefined) updateData.allowReentry = data.allowReentry;
+      if (data.allowReentry !== undefined) updateData.allowReentry = data.allowReentry;
 
-    const updated = await prisma.workflow.update({
+      const updatedWorkflow = await tx.workflow.update({
-      where: {id: workflowId},
+        where: {id: workflowId},
-      data: updateData,
+        data: updateData,
-      include: {
+        include: {
-        project: {
+          project: {
-          select: {name: true},
+            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 {beforeEach, describe, expect, it, vi, type Mock} from 'vitest';
-import {EmailSourceType, EmailStatus} from '@plunk/db';
+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__/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.1.5",
+    "next": "^16.1.7",
     "next-seo": "^6.6.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",

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

@@ -13,12 +13,12 @@ export default function Footer() {
         <div className="mx-auto max-w-7xl px-8 py-20 xl:px-0">
           <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,7 +57,7 @@ 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>
                 <ul role="list" className="mt-6 space-y-4">
@@ -67,20 +67,95 @@ export default function Footer() {
                     </Link>
                   </li>
                   <li>
-                    <Link
+                    <Link href={WIKI_URI} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
-                      href={'/made-by-humans'}
+                      Documentation
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
-                      Made by humans
                     </Link>
                   </li>
                   <li>
-                    <Link
+                    <Link href={'/guides'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
-                      href={WIKI_URI}
+                      Guides
-                      target={'_blank'}
+                    </Link>
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
+                  </li>
-                    >
+                  <li>
-                      Documentation
+                    <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">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 className="text-sm font-semibold text-neutral-900">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>
@@ -95,28 +170,18 @@ export default function Footer() {
                     </Link>
                   </li>
                   <li>
-                    <Link
+                    <Link href={'https://github.com/useplunk'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
-                      href={'https://github.com/useplunk'}
-                      target={'_blank'}
-                      className="text-sm text-neutral-600 transition hover:text-neutral-900"
-                    >
                       GitHub
                     </Link>
                   </li>
                   <li>
-                    <Link
+                    <Link href={'https://status.useplunk.com'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
-                      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="mt-8 text-sm font-semibold text-neutral-900">Legal</h3>
-                <h3 className="text-sm font-semibold text-neutral-900">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 className="text-sm font-semibold text-neutral-900">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'}>
+    <header className={'sticky top-0 z-40 w-full border-b border-neutral-100 bg-white/95 backdrop-blur-sm'}>
-      <div className={'z-40 py-6'}>
+      <div className={'relative mx-auto max-w-7xl px-8 xl:px-0'}>
-        <div className="flex items-center justify-between">
+        <div className={'py-5'}>
-          <div className="flex items-center gap-12">
+          <div className="flex items-center justify-between">
-            <div className="flex flex-shrink-0 items-center">
+            <div className="flex items-center gap-12">
-              <Link href={'/'} className={'flex items-center gap-x-3'}>
+              <div className="flex flex-shrink-0 items-center">
-                <div className={'relative h-8 w-8'}>
+                <Link href={'/'} className={'flex items-center gap-x-3'}>
-                  <Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
+                  <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-lg 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-lg 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
+            <div className="hidden items-center gap-6 md:flex">
-                href={'/made-by-humans'}
+              <a
+                href={`${DASHBOARD_URI}/auth/login`}
                 className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
               >
-                By humans
+                Sign in
-              </Link>
+              </a>
-
+              <motion.a
-              <Link
+                whileHover={{scale: 1.02}}
-                href={'/pricing'}
+                whileTap={{scale: 0.98}}
-                className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
+                href={`${DASHBOARD_URI}/auth/signup`}
-              >
-                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'
+                  'rounded-lg bg-neutral-900 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800'
                 }
               >
-                Docs
+                Get started
-                <svg className={'h-3.5 w-3.5'} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              </motion.a>
-                  <path
+            </div>
-                    strokeLinecap="round"
+
-                    strokeLinejoin="round"
+            <div className="-mr-2 flex items-center md:hidden">
-                    strokeWidth="2"
+              <button
-                    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"
+                onClick={() => setMobileOpen(!mobileOpen)}
-                  />
+                type="button"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.25 9.25V4.75H14.75" />
+                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"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 5L11.75 12.25" />
+                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>
+        <AnimatePresence>
-        {mobileOpen && (
+          {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"
-          >
             <motion.div
-              initial={{opacity: 0}}
+              initial={{height: 0, opacity: 0}}
-              animate={{opacity: 1}}
+              animate={{height: 'auto', opacity: 1}}
-              exit={{opacity: 0}}
+              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
+              <motion.div
-                href={'/made-by-humans'}
+                initial={{opacity: 0}}
-                onClick={() => setMobileOpen(false)}
+                animate={{opacity: 1}}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
+                exit={{opacity: 0}}
+                transition={{duration: 0.2}}
+                className="space-y-1 p-4"
               >
-                By humans
+                <div className="mb-2">
-              </Link>
+                  <div className="px-4 py-2 text-xs font-semibold uppercase tracking-wider 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
+                <Link
-                href={'/pricing'}
+                  href={'/made-by-humans'}
-                onClick={() => setMobileOpen(false)}
+                  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`}
                   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
+                  By humans
-                </a>
+                </Link>
-                <a
+
-                  href={`${DASHBOARD_URI}/auth/signup`}
+                <Link
-                  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"
+                  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-lg 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>
-      </AnimatePresence>
+      </div>
-    </nav>
+    </header>
   );
 }

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: 1, name: 'Home', item: 'https://www.useplunk.com'},
-    {position: 2, name: 'Guides', item: 'https://next.useplunk.com/guides'},
+    {position: 2, name: 'Guides', item: 'https://www.useplunk.com/guides'},
     {position: 3, name: title, item: canonical || ''},
   ];
 

apps/landing/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import {toast, Toaster} from 'sonner';
 import {SWRConfig} from 'swr';
 import {network} from '../lib/network';
 import {DefaultSeo} from 'next-seo';
+import Script from 'next/script';
 
 /**
  * Main app component
@@ -15,10 +16,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');
 
@@ -63,11 +60,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/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 legal@useplunk.com:
+                </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 (legal@useplunk.com)</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,358 @@
+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-5 w-5" />,
+    title: 'Visual WYSIWYG Editor',
+    description:
+      'Rich text editing with formatting toolbar. Bold, italic, headings, lists, links, images, and tables. No code required.',
+  },
+  {
+    icon: <Code2 className="h-5 w-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-5 w-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-5 w-5" />,
+    title: 'Powerful Variables',
+    description:
+      'Autocomplete with {{variable}} syntax. Supports fallbacks, nested properties, and custom contact fields.',
+  },
+  {
+    icon: <Eye className="h-5 w-5" />,
+    title: 'Live Preview',
+    description: 'Preview with real contact data. Test on desktop, tablet, and mobile views before sending.',
+  },
+  {
+    icon: <Palette className="h-5 w-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" />,
+    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 → Those cat meme attachments',
+  },
+  {
+    icon: <Palette className="h-6 w-6" />,
+    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" />,
+    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={'mx-auto max-w-7xl px-8 sm:px-0'}>
+        {/* Hero Section */}
+        <section className={'relative py-20 sm:py-32'}>
+          {/* Subtle background grid */}
+          <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={'mb-6 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2 text-sm'}>
+              <Mail className="h-4 w-4 text-neutral-600" />
+              <span className={'font-medium text-neutral-600'}>Email Editor & Templates</span>
+            </div>
+
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              The Email Editor
+              <br />
+              That Speaks Both Languages
+            </h1>
+            <p className={'mx-auto mt-8 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-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'}>
+                  Try the editor 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>
+
+        {/* Features Grid */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {features.map((feature, index) => (
+              <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.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'group bg-white p-10 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'
+                  }
+                >
+                  {feature.icon}
+                </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className={'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-4xl text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              From first draft to send
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>Create, preview, and deploy templates in minutes</p>
+          </motion.div>
+
+          <div className={'mx-auto mt-16 max-w-5xl'}>
+            <div className={'grid gap-12 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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    1
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Create your template</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    2
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Preview with real data</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Select any contact and see exactly what they'll receive. Test on desktop, tablet, and mobile. No
+                  surprises.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    3
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Use everywhere</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Use your template in campaigns, workflows, and API calls. One template, unlimited uses.
+                </p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Built for every team</h2>
+            <p className={'mt-4 text-lg text-neutral-600'}>Whether you're a developer, marketer, or founder</p>
+          </motion.div>
+
+          <div className={'mx-auto max-w-5xl space-y-8'}>
+            {useCases.map((useCase, index) => (
+              <motion.div
+                key={useCase.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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start gap-6'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
+                    }
+                  >
+                    {useCase.icon}
+                  </div>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
+                    <div className={'mt-4 rounded-lg bg-neutral-50 p-4'}>
+                      <p className={'text-sm text-neutral-700'}>{useCase.example}</p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Build your first template today
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              1,000 emails free every month. Then $0.001 per email. No contact limits, 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={
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                }
+              >
+                <span className={'flex items-center gap-2'}>
+                  Get started for free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </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>
+          </motion.div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,430 @@
+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-5 w-5" />,
+    title: 'Automatic Contact Capture',
+    description: 'Every sender is automatically added to your contact database with no manual data entry required.',
+  },
+  {
+    icon: <Zap className="h-5 w-5" />,
+    title: 'Workflow Automation',
+    description: 'Trigger automated workflows when emails are received to create sophisticated two-way communication.',
+  },
+  {
+    icon: <Shield className="h-5 w-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-5 w-5" />,
+    title: 'Webhook Notifications',
+    description: 'Get instant notifications with rich metadata whenever an email arrives at your domain.',
+  },
+  {
+    icon: <Mail className="h-5 w-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-5 w-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" />,
+    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" />,
+    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" />,
+    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={'mx-auto max-w-7xl px-8 sm:px-0'}>
+        {/* Hero Section */}
+        <section className={'relative py-20 sm:py-32'}>
+          {/* Subtle background grid */}
+          <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={'mb-6 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2 text-sm'}>
+              <Inbox className="h-4 w-4 text-neutral-600" />
+              <span className={'font-medium text-neutral-600'}>Inbound Email</span>
+            </div>
+
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              Turn Incoming Emails
+              <br />
+              into Actions
+            </h1>
+            <p className={'mx-auto mt-8 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-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'}>
+                  Start receiving emails
+                  <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>
+
+        {/* Features Grid */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {features.map((feature, index) => (
+              <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.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'group bg-white p-10 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'
+                  }
+                >
+                  {feature.icon}
+                </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className={'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-4xl text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Set up in minutes</h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>Get started with inbound email in three simple steps</p>
+          </motion.div>
+
+          <div className={'mx-auto mt-16 max-w-5xl'}>
+            <div className={'grid gap-12 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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
+                    }
+                  >
+                    1
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Verify your domain</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
+                    }
+                  >
+                    2
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Add MX record</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Add one MX record to your DNS to route incoming emails to Plunk. Copy the record from your dashboard.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
+                    }
+                  >
+                    3
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Start receiving</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Emails sent to any address at your domain are automatically received and can trigger workflows or
+                  webhooks.
+                </p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>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>
+
+          <div className={'mx-auto max-w-5xl space-y-8'}>
+            {useCases.map((useCase, index) => (
+              <motion.div
+                key={useCase.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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start gap-6'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
+                    }
+                  >
+                    {useCase.icon}
+                  </div>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
+                    <div className={'mt-4 flex flex-wrap gap-2'}>
+                      {useCase.benefits.map(benefit => (
+                        <span
+                          key={benefit}
+                          className={'rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700'}
+                        >
+                          {benefit}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* Technical Details */}
+        <section className={'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-4xl'}
+          >
+            <div className={'rounded-2xl border border-neutral-200 bg-white p-8 sm:p-12'}>
+              <h2 className={'text-3xl font-bold tracking-tight text-neutral-900 text-balance'}>
+                What happens when an email arrives?
+              </h2>
+              <div className={'mt-10'}>
+                {[
+                  {
+                    title: 'Email arrives at your domain',
+                    description: 'Your MX record routes the email to Plunk for processing',
+                  },
+                  {
+                    title: 'Security checks pass',
+                    description: 'Automatic validation of spam, virus, SPF, DKIM, and DMARC',
+                  },
+                  {
+                    title: 'Contact is created or updated',
+                    description: 'The sender is automatically added to your contact database',
+                  },
+                  {
+                    title: 'Workflows trigger automatically',
+                    description: 'Configured workflows start running based on the incoming email',
+                  },
+                ].map((step, i, arr) => (
+                  <div key={step.title} className={'relative flex gap-6'}>
+                    {/* Vertical connector */}
+                    {i < arr.length - 1 && (
+                      <div className={'absolute left-[1.125rem] top-10 bottom-0 w-px bg-neutral-200'} />
+                    )}
+                    <div className={'relative flex-shrink-0'}>
+                      <div
+                        className={
+                          'flex h-9 w-9 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-sm font-bold text-neutral-900'
+                        }
+                      >
+                        {i + 1}
+                      </div>
+                    </div>
+                    <div className={i < arr.length - 1 ? 'pb-8' : ''}>
+                      <p className={'font-semibold text-neutral-900'}>{step.title}</p>
+                      <p className={'mt-1 text-sm text-neutral-600'}>{step.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        </section>
+
+        {/* CTA Section */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Your domain can receive emails too
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              Set up inbound email on any verified domain in minutes. Replies, support tickets, and webhooks, all from
+              one platform.
+            </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 transition hover:bg-neutral-800'
+                }
+              >
+                <span className={'flex items-center gap-2'}>
+                  Get started for free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </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>
+          </motion.div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,418 @@
+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-5 w-5" />,
+    title: 'Dynamic Filtering',
+    description:
+      'Create segments based on contact data, custom fields, email activity, and events with powerful AND/OR logic.',
+  },
+  {
+    icon: <TrendingUp className="h-5 w-5" />,
+    title: 'Real-Time Updates',
+    description: 'Dynamic segments automatically update as contact data changes, always keeping your audience current.',
+  },
+  {
+    icon: <GitBranch className="h-5 w-5" />,
+    title: 'Workflow Integration',
+    description:
+      'Trigger workflows when contacts enter or exit segments, or use segment conditions in workflow branching.',
+  },
+  {
+    icon: <Target className="h-5 w-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-5 w-5" />,
+    title: 'Static Segments',
+    description: 'Manually curate contact lists for special groups like beta testers or VIP customers.',
+  },
+  {
+    icon: <Mail className="h-5 w-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. Sometimes they just need a reminder.',
+    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" />,
+    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. Your unsubscribe rate will thank you.',
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" />,
+    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" />,
+    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. Target campaigns and trigger workflows based on segment membership."
+        />
+      </Head>
+
+      <Navbar />
+
+      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
+        {/* Hero Section */}
+        <section className={'relative py-20 sm:py-32'}>
+          {/* Subtle background grid */}
+          <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={'mb-6 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2 text-sm'}>
+              <Users className="h-4 w-4 text-neutral-600" />
+              <span className={'font-medium text-neutral-600'}>Audience Segmentation</span>
+            </div>
+
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              Target the Right Audience,
+              <br />
+              Every Time
+            </h1>
+            <p className={'mx-auto mt-8 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-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'}>
+                  Start segmenting
+                  <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>
+
+        {/* Features Grid */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {features.map((feature, index) => (
+              <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.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'group bg-white p-10 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'
+                  }
+                >
+                  {feature.icon}
+                </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* Filter Examples */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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={'mx-auto max-w-5xl space-y-6'}>
+            {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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start justify-between gap-6'}>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{example.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{example.description}</p>
+                  </div>
+                </div>
+                <div className={'mt-6 space-y-2'}>
+                  {example.filters.map((filter, filterIndex) => (
+                    <div key={filterIndex} className={'flex items-center gap-3 rounded-lg bg-neutral-50 px-4 py-3'}>
+                      <Filter className="h-4 w-4 flex-shrink-0 text-neutral-400" />
+                      <span className={'font-mono text-sm text-neutral-700'}>{filter}</span>
+                    </div>
+                  ))}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* Types of Segments */}
+        <section className={'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-4xl text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Two types of segments</h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p>
+          </motion.div>
+
+          <div className={'mx-auto mt-16 max-w-5xl'}>
+            <div className={'grid gap-8 lg:grid-cols-2'}>
+              <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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
+                  <TrendingUp className="h-6 w-6" />
+                </div>
+                <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Dynamic Segments</h3>
+                <p className={'mt-2 text-neutral-600'}>
+                  Automatically update based on filter conditions. As contact data changes, segment membership updates
+                  in real-time.
+                </p>
+                <div className={'mt-6 space-y-2'}>
+                  <div 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>Filter-based membership</span>
+                  </div>
+                  <div 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>Automatic updates</span>
+                  </div>
+                  <div 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>Optional entry/exit tracking</span>
+                  </div>
+                </div>
+              </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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
+                  <Users className="h-6 w-6" />
+                </div>
+                <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Static Segments</h3>
+                <p className={'mt-2 text-neutral-600'}>
+                  Manually curate your segment by adding specific contacts. Membership stays fixed until you change it.
+                </p>
+                <div className={'mt-6 space-y-2'}>
+                  <div 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>Manual contact selection</span>
+                  </div>
+                  <div 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>Fixed membership</span>
+                  </div>
+                  <div 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>Perfect for VIP lists</span>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Use segments everywhere
+            </h2>
+            <p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p>
+          </motion.div>
+
+          <div className={'mx-auto max-w-5xl space-y-8'}>
+            {useCases.map((useCase, index) => (
+              <motion.div
+                key={useCase.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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start gap-6'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
+                    }
+                  >
+                    {useCase.icon}
+                  </div>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Stop sending the same email to everyone
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              Build precise audience segments and watch your open rates climb. 1,000 emails 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={
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                }
+              >
+                <span className={'flex items-center gap-2'}>
+                  Get started for free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </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>
+          </motion.div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,335 @@
+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-5 w-5" />,
+    title: 'Simple Configuration',
+    description: 'Quick setup with your project credentials. Works with any email client or application.',
+  },
+  {
+    icon: <Lock className="h-5 w-5" />,
+    title: 'Secure Connections',
+    description: 'TLS/SSL encryption on ports 465 and 587. Your emails are always transmitted securely.',
+  },
+  {
+    icon: <Mail className="h-5 w-5" />,
+    title: 'Universal Compatibility',
+    description:
+      'Works with Outlook, Thunderbird, Apple Mail, or any SMTP-compatible application. Even that ancient email client from 2005.',
+  },
+  {
+    icon: <Server className="h-5 w-5" />,
+    title: 'Domain Validation',
+    description: 'Automatic verification that your sender domain is verified before accepting emails.',
+  },
+  {
+    icon: <Shield className="h-5 w-5" />,
+    title: 'Full Feature Support',
+    description:
+      'Attachments, custom headers, HTML emails, and multiple recipients. Send those cat memes with confidence.',
+  },
+  {
+    icon: <Code2 className="h-5 w-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" />,
+    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. Your PM will love you.',
+    benefit: 'Zero code changes required',
+  },
+  {
+    icon: <Mail className="h-6 w-6" />,
+    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" />,
+    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={'mx-auto max-w-7xl px-8 sm:px-0'}>
+        {/* Hero Section */}
+        <section className={'relative py-20 sm:py-32'}>
+          {/* Subtle background grid */}
+          <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={'mb-6 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2 text-sm'}>
+              <Server className="h-4 w-4 text-neutral-600" />
+              <span className={'font-medium text-neutral-600'}>SMTP Email Sending</span>
+            </div>
+
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              Send Emails via SMTP or API
+            </h1>
+            <p className={'mx-auto mt-8 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-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 SMTP credentials
+                  <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>
+
+        {/* Features Grid */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>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-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {features.map((feature, index) => (
+              <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.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'group bg-white p-10 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'
+                  }
+                >
+                  {feature.icon}
+                </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* Comparison Table */}
+        <section className={'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 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>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={'mx-auto max-w-4xl'}>
+            <div className={'overflow-hidden rounded-xl border border-neutral-200 bg-white'}>
+              <table className={'w-full'}>
+                <thead className={'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-900'}>Traditional SMTP</th>
+                    <th className={'bg-neutral-100 px-6 py-4 text-center text-sm font-semibold text-neutral-900'}>
+                      Plunk SMTP
+                    </th>
+                    <th className={'px-6 py-4 text-center text-sm font-semibold text-neutral-900'}>Plunk API</th>
+                  </tr>
+                </thead>
+                <tbody className={'divide-y divide-neutral-200'}>
+                  {comparisonData.map((row, index) => (
+                    <tr key={index} className={'transition hover:bg-neutral-50'}>
+                      <td className={'px-6 py-4 text-sm text-neutral-900'}>{row.feature}</td>
+                      <td className={'px-6 py-4 text-center text-sm text-neutral-600'}>{row.traditional}</td>
+                      <td className={'bg-neutral-50 px-6 py-4 text-center text-sm font-medium text-neutral-900'}>
+                        {row.plunkSMTP}
+                      </td>
+                      <td className={'px-6 py-4 text-center text-sm text-neutral-600'}>{row.plunkAPI}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className={'mt-6 rounded-lg bg-neutral-50 p-4 text-center'}>
+              <p className={'text-sm text-neutral-600'}>
+                <strong>Recommendation:</strong> Use API for modern applications with workflow automation. Use SMTP for
+                email clients and legacy systems.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>When to use SMTP</h2>
+            <p className={'mt-4 text-lg text-neutral-600'}>Perfect for these scenarios</p>
+          </motion.div>
+
+          <div className={'mx-auto max-w-5xl space-y-8'}>
+            {useCases.map((useCase, index) => (
+              <motion.div
+                key={useCase.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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start gap-6'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
+                    }
+                  >
+                    {useCase.icon}
+                  </div>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
+                    <div className={'mt-4 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2'}>
+                      <div className={'h-2 w-2 rounded-full bg-green-500'} />
+                      <span className={'text-sm font-medium text-neutral-700'}>{useCase.benefit}</span>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Start sending via SMTP</h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              Get your SMTP credentials and start sending emails from any client or application. 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={
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                }
+              >
+                <span className={'flex items-center gap-2'}>
+                  Get started for free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </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>
+          </motion.div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,355 @@
+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-5 w-5" />,
+    title: 'Event-Driven Triggers',
+    description: 'Start workflows automatically when users sign up, make a purchase, or perform any custom action.',
+  },
+  {
+    icon: <Mail className="h-5 w-5" />,
+    title: 'Smart Email Sequences',
+    description: 'Send personalized emails at the right time with dynamic content based on user data.',
+  },
+  {
+    icon: <Clock className="h-5 w-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-5 w-5" />,
+    title: 'Conditional Logic',
+    description: 'Branch workflows based on user behavior, attributes, or engagement to personalize every journey.',
+  },
+  {
+    icon: <Webhook className="h-5 w-5" />,
+    title: 'External Integrations',
+    description: 'Connect to external systems with webhooks to sync data or trigger actions outside of Plunk.',
+  },
+  {
+    icon: <RefreshCw className="h-5 w-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" />,
+    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" />,
+    title: 'Abandoned Cart Recovery',
+    description:
+      'Automatically remind customers about items left in their cart with timely follow-ups and special incentives. Those forgotten items need a gentle nudge.',
+    example: 'Trigger on cart abandoned → Wait 1 hour → Send reminder → Wait 1 day → Send discount offer',
+  },
+  {
+    icon: <RefreshCw className="h-6 w-6" />,
+    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={'mx-auto max-w-7xl px-8 sm:px-0'}>
+        {/* Hero Section */}
+        <section className={'relative py-20 sm:py-32'}>
+          {/* Subtle background grid */}
+          <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={'mb-6 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-4 py-2 text-sm'}>
+              <Zap className="h-4 w-4 text-neutral-600" />
+              <span className={'font-medium text-neutral-600'}>Workflow Automation</span>
+            </div>
+
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              Email Automation
+              <br />
+              That Actually Works
+            </h1>
+            <p className={'mx-auto mt-8 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-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'}>
+                  Start building workflows
+                  <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>
+
+        {/* Features Grid */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {features.map((feature, index) => (
+              <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.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'group bg-white p-10 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'
+                  }
+                >
+                  {feature.icon}
+                </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className={'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-4xl text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Visual workflow builder
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              Create complex email automations without writing a single line of code
+            </p>
+          </motion.div>
+
+          <div className={'mx-auto mt-16 max-w-5xl'}>
+            <div className={'grid gap-12 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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    1
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Choose a trigger</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Select an event that starts your workflow, like user signup, purchase, or any custom action you track.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    2
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Build your flow</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more.
+                </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]}}
+              >
+                <div className={'mb-5 flex items-center gap-4'}>
+                  <div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
+                    3
+                  </div>
+                </div>
+                <h3 className={'text-lg font-semibold text-neutral-900'}>Activate and monitor</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                  Enable your workflow and watch it run automatically. Monitor executions in real-time with full
+                  visibility.
+                </p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Use Cases */}
+        <section className={'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-16 text-center'}
+          >
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              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>
+
+          <div className={'mx-auto max-w-5xl space-y-8'}>
+            {useCases.map((useCase, index) => (
+              <motion.div
+                key={useCase.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-xl border border-neutral-200 bg-white p-8'}
+              >
+                <div className={'flex items-start gap-6'}>
+                  <div
+                    className={
+                      'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
+                    }
+                  >
+                    {useCase.icon}
+                  </div>
+                  <div className={'flex-1'}>
+                    <h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
+                    <p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
+                    <div className={'mt-4 rounded-lg bg-neutral-50 p-4'}>
+                      <p className={'font-mono text-sm text-neutral-700'}>{useCase.example}</p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Set up your first workflow in minutes
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              1,000 emails free every month. Then $0.001 per email. No contact limits, 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={
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
+                }
+              >
+                <span className={'flex items-center gap-2'}>
+                  Get started for free
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </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>
+          </motion.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">

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">

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">

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">

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">

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">

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

@@ -103,13 +103,13 @@ export default function GuidesIndex() {
       <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',
+          url: 'https://www.useplunk.com/guides',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Guides'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Guides'}],
         }}
       />
 
@@ -224,7 +224,12 @@ export default function GuidesIndex() {
         </section>
 
         {/* CTA Section */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -245,7 +250,7 @@ export default function GuidesIndex() {
                   'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                Get started free
               </motion.a>
               <Link
                 href="/pricing"

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">

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">

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">

apps/landing/src/pages/index.tsx

@@ -15,8 +15,8 @@ import {
   ArrowRight,
   BarChart3,
   Clock,
-  Code2,
   Globe,
+  Inbox,
   Lock,
   Mail,
   Megaphone,
@@ -72,17 +72,18 @@ const features = [
   {
     icon: <Workflow className="h-5 w-5" />,
     title: 'Workflow Automation',
-    description: 'Visual builder for complex email sequences with triggers, delays, and conditional logic.',
+    description:
+      'Visual builder for complex email sequences with triggers, delays, and conditional logic. No code required.',
   },
   {
     icon: <Users className="h-5 w-5" />,
     title: 'Dynamic Segments',
-    description: 'Real-time audience segmentation based on contact data and behavior.',
+    description: 'Real-time audience segmentation based on contact data and behavior. Less noise, more signal.',
   },
   {
     icon: <Mail className="h-5 w-5" />,
     title: 'Campaign Management',
-    description: 'Broadcast emails with scheduling and performance tracking.',
+    description: 'Broadcast emails with scheduling and performance tracking. Send the right message at the right time.',
   },
   {
     icon: <BarChart3 className="h-5 w-5" />,
@@ -90,14 +91,14 @@ const features = [
     description: 'Detailed metrics on opens, clicks, bounces, and conversions across campaigns.',
   },
   {
-    icon: <Code2 className="h-5 w-5" />,
+    icon: <Inbox className="h-5 w-5" />,
-    title: 'Developer API',
+    title: 'Inbound Email',
-    description: 'RESTful API with comprehensive documentation.',
+    description: 'Receive and process incoming emails with webhook notifications. Your inbox, automated.',
   },
   {
     icon: <Globe className="h-5 w-5" />,
     title: 'Custom Domains',
-    description: 'Brand consistency with DKIM authentication and custom sending domains.',
+    description: 'Brand consistency with DKIM authentication and custom sending domains. Yes, even in Outlook.',
   },
 ];
 
@@ -224,13 +225,36 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-4xl text-center'}
           >
-            <h1 className={'text-7xl font-bold tracking-tight text-neutral-900 sm:text-8xl lg:text-9xl'}>
+            <motion.div
+              initial={{opacity: 0, y: 10}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
+              className={
+                'mb-8 inline-flex flex-col sm:flex-row items-center gap-x-2 gap-y-1 rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'
+              }
+            >
+              <span className={'flex items-center gap-2'}>
+                <svg className="h-4 w-4 text-neutral-700" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    fillRule="evenodd"
+                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span className={'font-medium text-neutral-700'}>5,000+ Stars on GitHub</span>
+              </span>
+              <span className={'hidden sm:inline text-neutral-300'}>·</span>
+              <span className={'text-neutral-500'}>AGPL-3.0 Open Source</span>
+            </motion.div>
+
+            <h1 className={'text-7xl font-bold tracking-tight text-neutral-900 sm:text-8xl lg:text-9xl text-balance'}>
               Open-Source
               <br />
               Email Platform
             </h1>
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Open-source email automation. Build workflows, segment audiences, and send emails with a simple API.
+              Transactional emails, marketing campaigns, and workflow automation in one platform. Open-source,
+              self-hostable, $0.001 per email, no contact limits.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -269,14 +293,14 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-5xl text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
-              Replace Resend, SendGrid, Mailchimp, and More
+              Replace your email stack
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>
-              The open-source alternative to proprietary email platforms
+              The open-source alternative to Resend, SendGrid, Mailchimp, and more
             </p>
 
-            <div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-5'}>
+            <div className={'mt-16 grid grid-cols-2 gap-px bg-neutral-200 lg:grid-cols-5'}>
               <Link href={'/vs/resend'} className={'group bg-white p-10 transition hover:bg-neutral-50'}>
                 <div className={'flex flex-col items-center gap-4'}>
                   <div className={'text-2xl font-bold text-neutral-400 transition group-hover:text-neutral-900'}>
@@ -334,7 +358,7 @@ export default function Index() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Most email tools weren't built to scale
             </h2>
           </motion.div>
@@ -355,7 +379,9 @@ export default function Index() {
                 <Clock className="h-5 w-5" />
               </div>
               <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Complex setup</h3>
-              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>Hours of configuration needed</p>
+              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                Most email platforms take days to configure. Plunk is up and running in under 5 minutes.
+              </p>
             </motion.div>
 
             <motion.div
@@ -373,7 +399,9 @@ export default function Index() {
                 <TrendingUp className="h-5 w-5" />
               </div>
               <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Contact limits</h3>
-              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>Growth penalties</p>
+              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                Other platforms charge more as your list grows. Plunk stores unlimited contacts for free.
+              </p>
             </motion.div>
 
             <motion.div
@@ -391,7 +419,9 @@ export default function Index() {
                 <Lock className="h-5 w-5" />
               </div>
               <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Vendor lock-in</h3>
-              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>Closed source platforms</p>
+              <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
+                Closed-source platforms own your stack. Plunk is AGPL-3.0 licensed and fully self-hostable.
+              </p>
             </motion.div>
           </div>
         </section>
@@ -405,7 +435,7 @@ export default function Index() {
             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 scale</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Built for scale</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to run email at any volume</p>
           </motion.div>
 
@@ -442,11 +472,12 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-4xl text-center'}
           >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
-              One contact, unified across everything
+              One contact, complete history
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
-              Every interaction flows into a single contact record with complete history
+              Every interaction flows into a single contact record. Transactional emails, campaigns, and workflows, all
+              tracked in one place.
             </p>
           </motion.div>
 
@@ -602,31 +633,40 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-4xl text-center'}
           >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Open source, privacy first</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
+              Open source, privacy first
+            </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
-              Transparent codebase, privacy-focused infrastructure, and the option to self-host
+              AGPL-3.0 licensed, EU-hosted, and GDPR compliant. Inspect the code, self-host on your own infrastructure,
+              or use our cloud.
             </p>
 
             <div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-3'}>
               <div className={'bg-white p-12'}>
-                <div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
+                <div
-                  <PackageOpen className={'h-7 w-7 text-neutral-900'} />
+                  className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
+                >
+                  <PackageOpen className={'h-7 w-7'} />
                 </div>
                 <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Open Source</h3>
                 <p className={'mt-2 text-sm text-neutral-600'}>AGPL-3.0 licensed</p>
-                <p className={'mt-4 text-xs text-neutral-500'}>4K+ stars on GitHub</p>
+                <p className={'mt-4 text-xs text-neutral-500'}>5K+ stars on GitHub</p>
               </div>
               <div className={'bg-white p-12'}>
-                <div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
+                <div
-                  <Shield className={'h-7 w-7 text-neutral-900'} />
+                  className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
+                >
+                  <Shield className={'h-7 w-7'} />
                 </div>
                 <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Privacy First</h3>
                 <p className={'mt-2 text-sm text-neutral-600'}>EU hosted</p>
                 <p className={'mt-4 text-xs text-neutral-500'}>GDPR compliant</p>
               </div>
               <div className={'bg-white p-12'}>
-                <div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
+                <div
-                  <Globe className={'h-7 w-7 text-neutral-900'} />
+                  className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
+                >
+                  <Globe className={'h-7 w-7'} />
                 </div>
                 <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Self-Hostable</h3>
                 <p className={'mt-2 text-sm text-neutral-600'}>Deploy anywhere</p>
@@ -660,8 +700,12 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-4xl text-center'}
           >
-            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Simple, transparent pricing</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
-            <p className={'mt-6 text-lg text-neutral-600'}>Pay for what you use, nothing more</p>
+              Simple, transparent pricing
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              Pay for what you use, nothing more. No surprises at scale.
+            </p>
 
             <div className={'mt-20'}>
               <div className={'flex items-baseline justify-center gap-3'}>
@@ -735,7 +779,7 @@ export default function Index() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
           >
             <div className={'mb-20 text-center'}>
-              <h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Trusted by the best</h2>
+              <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Trusted by the best</h2>
             </div>
 
             <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -748,9 +792,8 @@ export default function Index() {
                   transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
                   className={'flex flex-col bg-white p-10'}
                 >
-                  <p className={'min-h-[3.5rem] text-sm leading-relaxed text-neutral-600'}>
+                  <div className={'mb-2 font-serif text-5xl leading-none text-neutral-200'}>&ldquo;</div>
-                    &ldquo;{t.testimonial}&rdquo;
+                  <p className={'text-sm leading-relaxed text-neutral-700'}>{t.testimonial}</p>
-                  </p>
                   <div className={'mt-auto flex items-center gap-4 pt-6'}>
                     <div className={'relative h-12 w-12 overflow-hidden rounded-full'}>
                       <Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} />
@@ -767,7 +810,12 @@ export default function Index() {
         </section>
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -775,9 +823,11 @@ export default function Index() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
+              Start sending in 5 minutes
+            </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
-              Join thousands of businesses building better email experiences with Plunk
+              1,000 emails free every month. Then $0.001 per email. No contact limits, no surprises.
             </p>
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
               <motion.a

apps/landing/src/pages/pricing.tsx

@@ -2,14 +2,63 @@ import {NextSeo} from 'next-seo';
 import React from 'react';
 import {Footer, Navbar} 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';
 
+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 Index() {
+export default function Pricing() {
   return (
     <>
       <NextSeo
@@ -32,273 +81,221 @@ export default function Index() {
 
       <Navbar />
 
-      <div className={'mx-auto max-w-7xl px-8 sm:px-0'}>
+      <main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
-        <main>
+        {/* Hero */}
-          <section className={'py-32'}>
+        <section className={'relative py-20 sm:py-32'}>
-            <div className={'mx-auto max-w-4xl text-center'}>
+          <div
-              <h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl">
+            className={
-                Simple, transparent pricing
+              '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%)]'
-              </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>
 
-            {/* Pricing Tiers */}
+          <motion.div
-            <div className="mx-auto mt-20 grid max-w-5xl gap-8 lg:grid-cols-2">
+            initial={{opacity: 0, y: 20}}
-              {/* Free Tier */}
+            animate={{opacity: 1, y: 0}}
-              <motion.div
+            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-                initial={{opacity: 0, y: 20}}
+            className={'mx-auto max-w-4xl text-center'}
-                animate={{opacity: 1, y: 0}}
+          >
-                transition={{delay: 0.2}}
+            <h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl text-balance">
-                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"
+              Simple, transparent pricing
+            </h1>
+            <p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">
+              1,000 emails free every month. Then $0.001 per email. Unlimited contacts, no hidden fees.
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Pricing tiers */}
+        <section className={'pb-20'}>
+          <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.1, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
+              className={'flex flex-col bg-white p-10'}
+            >
+              <p className={'text-sm font-semibold uppercase tracking-widest text-neutral-400'}>Free forever</p>
+              <div className={'mt-4 flex items-baseline gap-2'}>
+                <span className={'text-6xl font-bold tracking-tight text-neutral-900'}>1,000</span>
+                <span className={'text-lg text-neutral-500'}>emails / mo</span>
+              </div>
+              <p className={'mt-2 text-sm text-neutral-500'}>No credit card required</p>
+
+              <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>
+
+              <motion.a
+                href={`${DASHBOARD_URI}/auth/signup`}
+                whileHover={{scale: 1.02}}
+                whileTap={{scale: 0.98}}
+                className={'mt-10 block w-full rounded-lg border border-neutral-300 px-6 py-3 text-center text-sm font-semibold text-neutral-900 transition hover:border-neutral-400'}
               >
-                <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
+                Start for free
-                <div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
+              </motion.a>
+            </motion.div>
 
-                <div className="relative flex flex-1 flex-col">
+            {/* Pay as you grow */}
-                  <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">
+            <motion.div
-                    Free Forever
+              initial={{opacity: 0, y: 20}}
-                  </div>
+              animate={{opacity: 1, y: 0}}
+              transition={{delay: 0.2, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
+              className={'flex flex-col bg-white p-10'}
+            >
+              <p className={'text-sm font-semibold uppercase tracking-widest text-neutral-400'}>Pay as you grow</p>
+              <div className={'mt-4 flex items-baseline gap-2'}>
+                <span className={'text-6xl font-bold tracking-tight text-neutral-900'}>$0.001</span>
+                <span className={'text-lg text-neutral-500'}>/ email</span>
+              </div>
+              <p className={'mt-2 text-sm'}>&nbsp;</p>
 
-                  <div className="mb-2 flex items-baseline gap-2">
+              <ul className={'mt-8 flex-1 space-y-3'}>
-                    <span className="text-6xl font-bold tracking-tight text-white">1,000</span>
+                {['Everything in Free', 'No Plunk branding', 'Monthly spend cap', 'Unlimited emails'].map(item => (
-                    <span className="text-xl font-medium text-white/60">emails</span>
+                  <li key={item} className={'flex items-center gap-3 text-sm text-neutral-600'}>
-                  </div>
+                    <Check className={'h-4 w-4 flex-shrink-0 text-neutral-900'} />
-                  <p className="mb-8 text-base text-white/60">per month</p>
+                    {item}
+                  </li>
+                ))}
+              </ul>
 
-                  <ul className="flex-1 space-y-3">
+              <motion.a
-                    <li className="flex items-start gap-3 text-white/80">
+                href={`${DASHBOARD_URI}/auth/signup`}
-                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                whileHover={{scale: 1.02}}
-                        <path
+                whileTap={{scale: 0.98}}
-                          fillRule="evenodd"
+                className={'mt-10 block w-full rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800'}
-                          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"
+                Get started
-                        />
-                      </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
+              </motion.a>
-                    href={`${DASHBOARD_URI}/auth/signup`}
+            </motion.div>
-                    whileHover={{scale: 1.02}}
+          </div>
-                    whileTap={{scale: 0.98}}
+        </section>
-                    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"
+
-                  >
+        {/* Every feature included */}
-                    Start for free
+        <section className={'py-20'}>
-                  </motion.a>
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Every feature on every plan
+            </h2>
+            <p className={'mt-4 text-lg text-neutral-600'}>No feature tiers, no add-ons, no surprises</p>
+          </motion.div>
+
+          <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
+            {includedFeatures.map((feature, index) => (
+              <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 bg-white p-10 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'}>
+                  {feature.icon}
                 </div>
+                <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
+                <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
               </motion.div>
+            ))}
+          </div>
+        </section>
 
-              {/* Pay as you grow */}
+        {/* Self-host */}
-              <motion.div
+        <section className={'py-20'}>
-                initial={{opacity: 0, y: 20}}
+          <motion.div
-                animate={{opacity: 1, y: 0}}
+            initial={{opacity: 0, y: 20}}
-                transition={{delay: 0.3}}
+            whileInView={{opacity: 1, y: 0}}
-                className="relative flex flex-col overflow-hidden rounded-2xl border-2 border-neutral-200 bg-white p-10 shadow-lg"
+            viewport={{once: true}}
-              >
+            transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
-                <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">
+            className={'overflow-hidden rounded-xl border border-neutral-200 bg-white'}
-                  Pay as you grow
+          >
+            <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 className={'mb-3 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-700'}>
+                  <PackageOpen className={'h-3.5 w-3.5'} />
+                  Self-hostable
                 </div>
-
+                <h2 className={'text-2xl font-bold text-neutral-900'}>Run it on your own infrastructure</h2>
-                <div className="mb-2 flex items-baseline gap-2">
+                <p className={'mt-2 text-neutral-600'}>
-                  <span className="text-6xl font-bold tracking-tight text-neutral-900">$0.001</span>
+                  Full data ownership, no per-email costs, and GDPR compliance by default. Deploy with Docker Compose in minutes.
-                  <span className="text-xl font-medium text-neutral-500">per email</span>
+                </p>
-                </div>
+              </div>
-                <p className="mb-8 text-base text-neutral-500">No contact limits, pay only for what you send</p>
+              <div className={'sm:ml-auto sm:pl-8'}>
-
+                <motion.button
-                <ul className="flex-1 space-y-3">
+                  onClick={() => {
-                  <li className="flex items-start gap-3 text-neutral-600">
+                    window.open('https://github.com/useplunk/plunk', '_blank');
-                    <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>
-                  </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 bg-neutral-900 px-6 py-3 text-center font-semibold text-white transition hover:bg-neutral-800"
+                  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'}
                 >
-                  Start for free
+                  <GithubIcon size={18} />
-                </motion.a>
+                  View on GitHub
-              </motion.div>
+                </motion.button>
-            </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
-                  </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>
-              </div>
-
-              <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>
-                </div>
               </div>
             </div>
-          </section>
+          </motion.div>
-        </main>
+        </section>
-      </div>
+
+        {/* CTA */}
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
+          <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-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Start sending in 5 minutes
+            </h2>
+            <p className={'mt-6 text-lg text-neutral-600'}>
+              1,000 emails free every month. 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={'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'}
+              >
+                <span className={'flex items-center gap-2'}>
+                  Create free account
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </span>
+              </motion.a>
+              <Link
+                href={'https://github.com/useplunk/plunk'}
+                target={'_blank'}
+                className={'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'}
+              >
+                Self-host for free
+              </Link>
+            </div>
+          </motion.div>
+        </section>
+      </main>
 
       <Footer />
     </>

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

@@ -32,13 +32,13 @@ export default function ToolsIndex() {
       <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',
+          url: 'https://www.useplunk.com/tools',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email Tools'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email Tools'}],
         }}
       />
 
@@ -68,7 +68,7 @@ export default function ToolsIndex() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Free tools for
               <br />
               email developers
@@ -114,7 +114,7 @@ export default function ToolsIndex() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Available Tools</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to work with emails</p>
           </motion.div>
 
@@ -168,7 +168,7 @@ export default function ToolsIndex() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why use these tools?</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Built by email experts for email developers</p>
           </motion.div>
 
@@ -235,7 +235,7 @@ export default function ToolsIndex() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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.

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

@@ -28,13 +28,13 @@ 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',
+          url: 'https://www.useplunk.com/tools/markdown-to-email',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email HTML Converter'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email HTML Converter'}],
         }}
       />
 
@@ -64,7 +64,7 @@ export default function MarkdownToEmail() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Markdown to Email
               <br />
               HTML Converter
@@ -134,7 +134,7 @@ export default function MarkdownToEmail() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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.

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

@@ -37,12 +37,12 @@ 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',
+          url: 'https://www.useplunk.com/tools/verify-email',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk Email Verification Tool'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk Email Verification Tool'}],
         }}
       />
 
@@ -72,7 +72,7 @@ export default function VerifyEmailPage() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Email Verification
               <br />
               Tool
@@ -159,7 +159,7 @@ export default function VerifyEmailPage() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
@@ -201,7 +201,7 @@ export default function VerifyEmailPage() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Ready for production-grade email verification?
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>

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

@@ -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?',
@@ -58,13 +58,13 @@ export default function ActiveCampaignComparison() {
       <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',
+          url: 'https://www.useplunk.com/vs/activecampaign',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs ActiveCampaign'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs ActiveCampaign'}],
         }}
       />
 
@@ -94,7 +94,7 @@ export default function ActiveCampaignComparison() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for ActiveCampaign
@@ -141,7 +141,7 @@ export default function ActiveCampaignComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Enterprise Features Without Enterprise Prices
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Email automation that doesn't break the bank</p>
@@ -233,7 +233,7 @@ export default function ActiveCampaignComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Automation Without Complexity</h2>
           </motion.div>
 
           <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -374,7 +374,7 @@ export default function ActiveCampaignComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function ActiveCampaignComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function ActiveCampaignComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Get email automation without the bloat
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
@@ -405,10 +410,13 @@ export default function ActiveCampaignComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -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?',
@@ -58,13 +58,13 @@ export default function BentoComparison() {
       <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',
+          url: 'https://www.useplunk.com/vs/bento',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Bento'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Bento'}],
         }}
       />
 
@@ -94,7 +94,7 @@ export default function BentoComparison() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Bento
@@ -141,7 +141,7 @@ export default function BentoComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               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>
@@ -233,7 +233,7 @@ export default function BentoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Developer-First Email Platform</h2>
           </motion.div>
 
           <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -374,7 +374,7 @@ export default function BentoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Bento" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function BentoComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-bento" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function BentoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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.
@@ -403,10 +408,13 @@ export default function BentoComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -57,13 +57,13 @@ 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',
+          url: 'https://www.useplunk.com/vs/brevo',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Brevo'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Brevo'}],
         }}
       />
 
@@ -93,7 +93,7 @@ export default function BrevoComparison() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Brevo
@@ -140,7 +140,7 @@ export default function BrevoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -230,7 +230,7 @@ export default function BrevoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Brevo</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Focus on email, not feature overload</p>
           </motion.div>
 
@@ -372,7 +372,7 @@ export default function BrevoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -383,7 +383,12 @@ export default function BrevoComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-brevo" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function BrevoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
@@ -401,10 +406,13 @@ export default function BrevoComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -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,14 +57,14 @@ 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."
+        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"
+        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',
+          url: 'https://www.useplunk.com/vs/convertkit',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs ConvertKit'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs ConvertKit'}],
         }}
       />
 
@@ -94,7 +94,7 @@ export default function ConvertkitComparison() {
               <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'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for ConvertKit
@@ -141,7 +141,7 @@ export default function ConvertkitComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -231,7 +231,7 @@ export default function ConvertkitComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Built for Developers, Not Creators</h2>
           </motion.div>
 
           <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -372,7 +372,7 @@ export default function ConvertkitComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="ConvertKit" rows={comparisonData} />
@@ -382,7 +382,12 @@ export default function ConvertkitComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-convertkit" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -390,7 +395,7 @@ export default function ConvertkitComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Ready for a developer-first email platform?
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
@@ -403,10 +408,13 @@ export default function ConvertkitComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -53,13 +53,13 @@ export default function CustomerioComparison() {
       <NextSeo
         title="Customer.io Alternative: Open-Source & Developer-Focused | Plunk"
         description="Compare Plunk and Customer.io. Customer.io is powerful but complex. Plunk is open-source, developer-friendly, with simple workflows and transparent pricing."
-        canonical="https://next.useplunk.com/vs/customerio"
+        canonical="https://www.useplunk.com/vs/customerio"
         openGraph={{
           title: 'Customer.io Alternative: Open-Source & Developer-Focused | Plunk',
           description:
             'Compare Plunk and Customer.io. Plunk is open-source, developer-friendly, with simple workflows and transparent pricing.',
-          url: 'https://next.useplunk.com/vs/customerio',
+          url: 'https://www.useplunk.com/vs/customerio',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Customer.io'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Customer.io'}],
         }}
       />
 
@@ -89,15 +89,14 @@ export default function CustomerioComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Customer.io</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Customer.io
             </h1>
 
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Customer.io is powerful but complex. Plunk gives developers the automation they need without the
+              Customer.io starts at $100/month and takes weeks to set up. Plunk delivers the same event-driven automation in an open-source platform you can be sending from in under 5 minutes.
-              enterprise overhead.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function CustomerioComparison() {
             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'}>Simple Pricing That Scales</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Simple Pricing That Scales</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Transparent pay-as-you-go vs complex enterprise tiers</p>
           </motion.div>
 
@@ -226,7 +225,7 @@ export default function CustomerioComparison() {
             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</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Customer.io" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function CustomerioComparison() {
             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'}>Key Advantages</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Key Advantages</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Why developers choose Plunk</p>
           </motion.div>
 
@@ -378,7 +377,12 @@ export default function CustomerioComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-customerio" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -386,7 +390,7 @@ export default function CustomerioComparison() {
             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'}>Try Plunk free</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               1,000 emails/month free. No credit card required. Developer-friendly from day one.
             </p>
@@ -396,10 +400,13 @@ export default function CustomerioComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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}

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

@@ -96,13 +96,13 @@ export default function CompetitorsIndex() {
       <NextSeo
         title="Plunk vs Email Competitors | Compare Email Platforms"
         description="Compare Plunk with Postmark, SendGrid, Mailgun, Mailchimp, ConvertKit, ActiveCampaign, Klaviyo, MailerLite, and more. See why Plunk offers transactional emails plus marketing features in one open-source platform."
-        canonical="https://next.useplunk.com/vs"
+        canonical="https://www.useplunk.com/vs"
         openGraph={{
           title: 'Plunk vs Email Competitors | Compare Email Platforms',
           description:
             'Compare Plunk with 13 leading email platforms. Transactional + marketing emails in one open-source solution.',
-          url: 'https://next.useplunk.com/vs',
+          url: 'https://www.useplunk.com/vs',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Competitors'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Competitors'}],
         }}
       />
 
@@ -131,15 +131,14 @@ export default function CompetitorsIndex() {
               <span className={'text-sm text-neutral-600'}>Email Platform Comparisons</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Plunk vs the
               <br />
               competition
             </h1>
 
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Compare Plunk with leading email platforms. See why developers choose our open-source alternative for
+              Most email platforms charge by the contact, lock you in, and split transactional from marketing. Plunk does all three in one open-source platform at $0.001 per email.
-              transactional emails plus marketing features.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -178,7 +177,7 @@ export default function CompetitorsIndex() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Compare Plunk with Industry Leaders
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>See how Plunk stacks up against popular email platforms</p>
@@ -223,7 +222,7 @@ export default function CompetitorsIndex() {
             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 Choose Plunk</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>One platform for all your email needs</p>
           </motion.div>
 
@@ -237,11 +236,10 @@ export default function CompetitorsIndex() {
                 '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" />
+              <Mail className="h-8 w-8 text-neutral-900 mb-4" />
               <h3 className={'text-2xl font-bold text-neutral-900'}>Transactional + Marketing</h3>
               <p className={'mt-4 leading-relaxed text-neutral-600'}>
-                Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns,
+                Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns, automation, and segmentation. All in one platform.
-                automation, and segmentation—all in one platform.
               </p>
             </motion.div>
 
@@ -254,7 +252,7 @@ export default function CompetitorsIndex() {
                 'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
               }
             >
-              <Code className="h-8 w-8 text-green-500 mb-4" />
+              <Code className="h-8 w-8 text-neutral-900 mb-4" />
               <h3 className={'text-2xl font-bold text-neutral-900'}>Open Source & Self-Hostable</h3>
               <p className={'mt-4 leading-relaxed text-neutral-600'}>
                 AGPL-3.0 licensed code you can inspect, modify, and self-host. Full control over your data and
@@ -271,7 +269,7 @@ export default function CompetitorsIndex() {
                 'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
               }
             >
-              <DollarSign className="h-8 w-8 text-yellow-500 mb-4" />
+              <DollarSign className="h-8 w-8 text-neutral-900 mb-4" />
               <h3 className={'text-2xl font-bold text-neutral-900'}>Simple Pricing</h3>
               <p className={'mt-4 leading-relaxed text-neutral-600'}>
                 Pay-as-you-go pricing with all features included. No separate charges for transactional vs marketing
@@ -282,7 +280,12 @@ export default function CompetitorsIndex() {
         </section>
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -290,7 +293,7 @@ export default function CompetitorsIndex() {
             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 try Plunk?</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Ready to try Plunk?</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               Join thousands of developers using Plunk for reliable email delivery. Start free, scale as you grow.
             </p>
@@ -300,10 +303,13 @@ export default function CompetitorsIndex() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -25,12 +25,12 @@ const faqs: FAQ[] = [
   {
     question: 'When should I choose Klaviyo over Plunk?',
     answer:
-      'Choose Klaviyo if you need deep native e-commerce integrations (Shopify, WooCommerce), SMS marketing, and AI-powered predictive analytics. Klaviyo excels for established e-commerce brands with dedicated marketing teams and budget for enterprise features. Choose Plunk if you need powerful email automation for e-commerce (or any use case) without the premium price tag—perfect for developers and growing businesses.',
+      'Choose Klaviyo if you need deep native e-commerce integrations (Shopify, WooCommerce), SMS marketing, and AI-powered predictive analytics. Klaviyo excels for established e-commerce brands with dedicated marketing teams and budget for enterprise features. Choose Plunk if you need powerful email automation for e-commerce (or any use case) without the premium price tag. It is built for developers and growing businesses who want the capabilities without the cost.',
   },
   {
     question: 'How much cheaper is Plunk compared to Klaviyo?',
     answer:
-      'Klaviyo can be dramatically more expensive. With 10,000 contacts, Klaviyo costs $150-300+/month depending on email volume. Plunk uses pay-as-you-go pricing—you only pay for emails sent, not contacts stored. For most use cases, Plunk costs 60-90% less than Klaviyo while providing the same email automation capabilities. The savings increase as your contact list grows.',
+      'Klaviyo can be dramatically more expensive. With 10,000 contacts, Klaviyo costs $150-300+/month depending on email volume. Plunk uses pay-as-you-go pricing. You only pay for emails sent, not contacts stored. For most use cases, Plunk costs 60-90% less than Klaviyo while providing the same email automation capabilities. The savings increase as your contact list grows.',
   },
   {
     question: 'Can Plunk handle e-commerce emails?',
@@ -58,13 +58,13 @@ export default function KlaviyoComparison() {
       <NextSeo
         title="Klaviyo Alternative: Affordable E-commerce Email | Plunk"
         description="E-commerce email automation without Klaviyo's price tag. Pay-as-you-go pricing, open-source, self-hostable. Perfect for developers building e-commerce."
-        canonical="https://next.useplunk.com/vs/klaviyo"
+        canonical="https://www.useplunk.com/vs/klaviyo"
         openGraph={{
           title: 'Klaviyo Alternative: Affordable E-commerce Email | Plunk',
           description:
             "E-commerce email automation without Klaviyo's price tag. Pay-as-you-go pricing, open-source, self-hostable.",
-          url: 'https://next.useplunk.com/vs/klaviyo',
+          url: 'https://www.useplunk.com/vs/klaviyo',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Klaviyo'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Klaviyo'}],
         }}
       />
 
@@ -94,15 +94,14 @@ export default function KlaviyoComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Klaviyo</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Klaviyo
             </h1>
 
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Klaviyo is powerful for e-commerce but extremely expensive. Plunk delivers email automation for any use
+              Klaviyo is powerful for e-commerce but extremely expensive. Plunk delivers the same email automation, including full e-commerce support, at a fraction of the cost. No hidden fees, no contact-based pricing.
-              case—including e-commerce—at a fraction of the cost. No hidden fees, no contact-based pricing.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -141,7 +140,7 @@ export default function KlaviyoComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               E-commerce Email Without the Premium Price
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p>
@@ -233,7 +232,7 @@ export default function KlaviyoComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               E-commerce Email, Developer-Friendly
             </h2>
           </motion.div>
@@ -376,7 +375,7 @@ export default function KlaviyoComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Klaviyo" rows={comparisonData} />
@@ -386,7 +385,12 @@ export default function KlaviyoComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-klaviyo" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -394,7 +398,7 @@ export default function KlaviyoComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               E-commerce email at a fraction of the cost
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
@@ -407,10 +411,13 @@ export default function KlaviyoComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -39,7 +39,7 @@ const faqs: FAQ[] = [
   {
     question: 'Does Plunk have the same modern features as Loops?',
     answer:
-      'Yes. Plunk offers transactional emails, marketing campaigns, workflow automation, dynamic segmentation, and a modern API—just like Loops. The key difference is Plunk is open-source, self-hostable, and has no contact limits.',
+      'Yes. Plunk offers transactional emails, marketing campaigns, workflow automation, dynamic segmentation, and a modern API, just like Loops. The key difference is Plunk is open-source, self-hostable, and has no contact limits.',
   },
   {
     question: 'How easy is it to migrate from Loops to Plunk?',
@@ -57,13 +57,13 @@ export default function LoopsComparison() {
       <NextSeo
         title="Loops Alternative: Open Source & Self-Hostable | Plunk"
         description="Plunk offers an open-source alternative to Loops with pay-as-you-go pricing, self-hosting, and no contact limits. Same modern features, full transparency."
-        canonical="https://next.useplunk.com/vs/loops"
+        canonical="https://www.useplunk.com/vs/loops"
         openGraph={{
           title: 'Loops Alternative: Open Source & Self-Hostable | Plunk',
           description:
             'Plunk offers an open-source alternative to Loops with pay-as-you-go pricing, self-hosting, and no contact limits.',
-          url: 'https://next.useplunk.com/vs/loops',
+          url: 'https://www.useplunk.com/vs/loops',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Loops'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Loops'}],
         }}
       />
 
@@ -93,7 +93,7 @@ export default function LoopsComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Loops</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Loops
@@ -140,7 +140,7 @@ export default function LoopsComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Transparent Pricing vs Vendor Lock-In
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay per email, not per contact</p>
@@ -232,7 +232,7 @@ export default function LoopsComparison() {
             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 Loops</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Loops</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Open-source transparency meets modern SaaS features</p>
           </motion.div>
 
@@ -358,8 +358,7 @@ export default function LoopsComparison() {
               </div>
               <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>All Features Included</h3>
               <p className={'mt-3 leading-relaxed text-neutral-600'}>
-                Transactional emails, campaigns, workflows, segmentation—all included. No artificial feature gating
+                Transactional emails, campaigns, workflows, segmentation. All included. No artificial feature gating based on your plan.
-                based on your plan.
               </p>
             </motion.div>
           </div>
@@ -374,7 +373,7 @@ export default function LoopsComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -385,7 +384,12 @@ export default function LoopsComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-loops" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -393,7 +397,7 @@ export default function LoopsComparison() {
             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'}>Switch to open source</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Switch to open source</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               Join developers choosing transparency and control over proprietary platforms. Start free, no credit card
               required.
@@ -404,10 +408,13 @@ export default function LoopsComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -58,13 +58,13 @@ export default function MailchimpComparison() {
       <NextSeo
         title="Mailchimp Alternative for Developers | Plunk"
         description="Plunk is Mailchimp for developers: code-first email platform with modern API. Pay per email, not per contact. Transactional + marketing in one platform."
-        canonical="https://next.useplunk.com/vs/mailchimp"
+        canonical="https://www.useplunk.com/vs/mailchimp"
         openGraph={{
           title: 'Mailchimp Alternative for Developers | Plunk',
           description:
             'Plunk is Mailchimp for developers: code-first email platform with modern API. Pay per email, not per contact.',
-          url: 'https://next.useplunk.com/vs/mailchimp',
+          url: 'https://www.useplunk.com/vs/mailchimp',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Mailchimp'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Mailchimp'}],
         }}
       />
 
@@ -94,7 +94,7 @@ export default function MailchimpComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailchimp</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Mailchimp
@@ -141,7 +141,7 @@ export default function MailchimpComparison() {
             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'}>The Pricing Model That Makes Sense</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you store</p>
           </motion.div>
 
@@ -231,7 +231,7 @@ export default function MailchimpComparison() {
             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 Developers Choose Plunk</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Developers Choose Plunk</h2>
           </motion.div>
 
           <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -367,7 +367,7 @@ export default function MailchimpComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Mailchimp" rows={comparisonData} />
@@ -377,7 +377,12 @@ export default function MailchimpComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -385,7 +390,7 @@ export default function MailchimpComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Ready for a better developer experience?
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
@@ -398,10 +403,13 @@ export default function MailchimpComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -30,7 +30,7 @@ const faqs: FAQ[] = [
   {
     question: 'Is Plunk more expensive than MailerLite?',
     answer:
-      'It depends on your usage pattern. MailerLite charges based on subscriber count (e.g., $10/month for 1,000 subscribers), while Plunk charges per email sent. If you have a large subscriber list but send infrequently, Plunk is typically cheaper. If you email your entire list frequently, costs are similar. The key difference is predictability—Plunk only charges for actual usage.',
+      'It depends on your usage pattern. MailerLite charges based on subscriber count (e.g., $10/month for 1,000 subscribers), while Plunk charges per email sent. If you have a large subscriber list but send infrequently, Plunk is typically cheaper. If you email your entire list frequently, costs are similar. The key difference is predictability: Plunk only charges for actual usage.',
   },
   {
     question: 'Can I self-host Plunk unlike MailerLite?',
@@ -58,13 +58,13 @@ export default function MailerliteComparison() {
       <NextSeo
         title="MailerLite Alternative: Open-Source & Self-Hostable | Plunk"
         description="The truly developer-first MailerLite alternative. Open-source, self-hostable, pay per email not per subscriber. Modern API, full transparency."
-        canonical="https://next.useplunk.com/vs/mailerlite"
+        canonical="https://www.useplunk.com/vs/mailerlite"
         openGraph={{
           title: 'MailerLite Alternative: Open-Source & Self-Hostable | Plunk',
           description:
             'The truly developer-first MailerLite alternative. Open-source, self-hostable, pay per email not per subscriber.',
-          url: 'https://next.useplunk.com/vs/mailerlite',
+          url: 'https://www.useplunk.com/vs/mailerlite',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs MailerLite'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs MailerLite'}],
         }}
       />
 
@@ -94,7 +94,7 @@ export default function MailerliteComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs MailerLite</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for MailerLite
@@ -141,7 +141,7 @@ export default function MailerliteComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Open Source Meets Developer Experience
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not subscribers stored</p>
@@ -233,7 +233,7 @@ export default function MailerliteComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               The Truly Developer-First Alternative
             </h2>
           </motion.div>
@@ -376,7 +376,7 @@ export default function MailerliteComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
           </motion.div>
 
           <ComparisonTable competitorName="MailerLite" rows={comparisonData} />
@@ -386,7 +386,12 @@ export default function MailerliteComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-mailerlite" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -394,7 +399,7 @@ export default function MailerliteComparison() {
             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'}>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
               Experience true developer-first email
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
@@ -407,10 +412,13 @@ export default function MailerliteComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -53,13 +53,13 @@ export default function MailgunComparison() {
       <NextSeo
         title="Mailgun Alternative: Open-Source with Marketing & Automation | Plunk"
         description="Compare Plunk and Mailgun. Mailgun focuses on transactional emails, while Plunk adds marketing campaigns, workflows, and is open-source."
-        canonical="https://next.useplunk.com/vs/mailgun"
+        canonical="https://www.useplunk.com/vs/mailgun"
         openGraph={{
           title: 'Mailgun Alternative: Open-Source with Marketing & Automation | Plunk',
           description:
             'Compare Plunk and Mailgun. Mailgun is excellent for transactional emails. Plunk adds marketing, workflows, and is open-source.',
-          url: 'https://next.useplunk.com/vs/mailgun',
+          url: 'https://www.useplunk.com/vs/mailgun',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Mailgun'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Mailgun'}],
         }}
       />
 
@@ -89,15 +89,14 @@ export default function MailgunComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailgun</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Mailgun
             </h1>
 
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Mailgun is excellent for transactional emails. Plunk adds marketing campaigns, workflow automation, and is
+              Mailgun only handles transactional email. Plunk adds marketing campaigns, workflow automation, and segmentation on top, all open-source and self-hostable at $0.001 per email.
-              open-source.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function MailgunComparison() {
             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'}>The Pricing Model That Makes Sense</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p>
           </motion.div>
 
@@ -226,7 +225,7 @@ export default function MailgunComparison() {
             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</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Mailgun" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function MailgunComparison() {
             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'}>What Plunk Adds</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>What Plunk Adds</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p>
           </motion.div>
 
@@ -376,7 +375,12 @@ export default function MailgunComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-mailgun" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function MailgunComparison() {
             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'}>Try Plunk free</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
             </p>
@@ -394,10 +398,13 @@ export default function MailgunComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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}

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

@@ -54,13 +54,13 @@ export default function PostmarkComparison() {
       <NextSeo
         title="Postmark Alternative: Transactional + Marketing Emails | Plunk"
         description="Plunk offers everything Postmark has for transactional emails, plus marketing campaigns, workflows, and segmentation. Open-source and self-hostable."
-        canonical="https://next.useplunk.com/vs/postmark"
+        canonical="https://www.useplunk.com/vs/postmark"
         openGraph={{
           title: 'Postmark Alternative: Transactional + Marketing Emails | Plunk',
           description:
             'Plunk offers everything Postmark has for transactional emails, plus marketing campaigns, workflows, and segmentation.',
-          url: 'https://next.useplunk.com/vs/postmark',
+          url: 'https://www.useplunk.com/vs/postmark',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Postmark'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Postmark'}],
         }}
       />
 
@@ -90,7 +90,7 @@ export default function PostmarkComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Postmark</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Postmark
@@ -137,7 +137,7 @@ export default function PostmarkComparison() {
             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'}>One Platform for All Your Emails</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>One Platform for All Your Emails</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Transactional reliability meets marketing power</p>
           </motion.div>
 
@@ -227,7 +227,7 @@ export default function PostmarkComparison() {
             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 Postmark</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Postmark</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Do more with one platform instead of two</p>
           </motion.div>
 
@@ -270,7 +270,7 @@ export default function PostmarkComparison() {
               <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Workflow Automation</h3>
               <p className={'mt-3 leading-relaxed text-neutral-600'}>
                 Build automated email sequences with triggers, delays, and conditions. Onboard users, nurture leads,
-                re-engage customers—all automated.
+                re-engage customers. All automated.
               </p>
             </motion.div>
 
@@ -369,7 +369,7 @@ export default function PostmarkComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -380,7 +380,12 @@ export default function PostmarkComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-postmark" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -388,7 +393,7 @@ export default function PostmarkComparison() {
             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 more from your email platform</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Get more from your email platform</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               Stop juggling multiple tools. Get transactional reliability plus marketing power in one platform. Start
               free.
@@ -399,10 +404,13 @@ export default function PostmarkComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

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

@@ -53,13 +53,13 @@ export default function ResendComparison() {
       <NextSeo
         title="Plunk vs Resend: Open-Source Alternative with Marketing | Plunk"
         description="Compare Plunk and Resend. Resend focuses on transactional emails, while Plunk adds marketing campaigns, workflows, and is open-source. Choose based on your needs."
-        canonical="https://next.useplunk.com/vs/resend"
+        canonical="https://www.useplunk.com/vs/resend"
         openGraph={{
           title: 'Plunk vs Resend: Open-Source Alternative with Marketing',
           description:
             'Compare Plunk and Resend. Resend focuses on transactional emails, while Plunk adds marketing, workflows, and is open-source.',
-          url: 'https://next.useplunk.com/vs/resend',
+          url: 'https://www.useplunk.com/vs/resend',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs Resend'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Resend'}],
         }}
       />
 
@@ -89,15 +89,14 @@ export default function ResendComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Resend</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for Resend
             </h1>
 
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
-              Resend is excellent for transactional emails. Plunk adds marketing campaigns, workflow automation, and is
+              Resend is transactional-only. Plunk gives you transactional emails, marketing campaigns, and workflow automation in a single open-source platform. No second tool, no second bill.
-              open-source. Choose based on what you need.
             </p>
 
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function ResendComparison() {
             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'}>The Pricing Model That Makes Sense</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p>
           </motion.div>
 
@@ -226,7 +225,7 @@ export default function ResendComparison() {
             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</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
           </motion.div>
 
           <ComparisonTable competitorName="Resend" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function ResendComparison() {
             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'}>What Plunk Adds</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>What Plunk Adds</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p>
           </motion.div>
 
@@ -376,7 +375,12 @@ export default function ResendComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-resend" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function ResendComparison() {
             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'}>Try Plunk free</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
             </p>
@@ -394,10 +398,13 @@ export default function ResendComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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}

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

@@ -57,13 +57,13 @@ export default function SendGridComparison() {
       <NextSeo
         title="SendGrid Alternative: Pay-As-You-Go & Open Source | Plunk"
         description="Plunk offers pay-as-you-go pricing instead of monthly subscriptions, with a modern API and no complex setup. Open source alternative to SendGrid."
-        canonical="https://next.useplunk.com/vs/sendgrid"
+        canonical="https://www.useplunk.com/vs/sendgrid"
         openGraph={{
           title: 'SendGrid Alternative: Pay-As-You-Go & Open Source | Plunk',
           description:
             'Plunk offers pay-as-you-go pricing instead of monthly subscriptions, with a modern API and no complex setup.',
-          url: 'https://next.useplunk.com/vs/sendgrid',
+          url: 'https://www.useplunk.com/vs/sendgrid',
-          images: [{url: 'https://next.useplunk.com/assets/card.png', alt: 'Plunk vs SendGrid'}],
+          images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs SendGrid'}],
         }}
       />
 
@@ -93,7 +93,7 @@ export default function SendGridComparison() {
               <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs SendGrid</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
               Open-source alternative
               <br />
               for SendGrid
@@ -140,7 +140,7 @@ export default function SendGridComparison() {
             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'}>The Pricing Model That Makes Sense</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you might use</p>
           </motion.div>
 
@@ -230,7 +230,7 @@ export default function SendGridComparison() {
             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 SendGrid</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over SendGrid</h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Built for modern developers, not enterprise sales teams</p>
           </motion.div>
 
@@ -372,7 +372,7 @@ export default function SendGridComparison() {
             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>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>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>
 
@@ -383,7 +383,12 @@ export default function SendGridComparison() {
         <FAQSection faqs={faqs} schemaId="faq-schema-sendgrid" />
 
         {/* CTA */}
-        <section className={'border-t border-neutral-200 py-32'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-32'}>
+          <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%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function SendGridComparison() {
             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 today</h2>
+            <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Make the switch today</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
               Join hundreds of developers who've ditched SendGrid's complexity for Plunk's simplicity.
             </p>
@@ -401,10 +406,13 @@ export default function SendGridComparison() {
                 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'
+                  'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
                 }
               >
-                Start free trial
+                <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="/pricing"

apps/smtp/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@plunk/db": "*",
     "dotenv": "^17.2.3",
-    "mailparser": "^3.7.1",
+    "mailparser": "^3.9.3",
     "signale": "^1.4.0",
     "smtp-server": "^3.13.4"
   },

apps/web/package.json

@@ -41,7 +41,7 @@
     "framer-motion": "^12.23.24",
     "juice": "^11.0.3",
     "lucide-react": "^0.553.0",
-    "next": "^16.1.5",
+    "next": "^16.1.7",
     "next-seo": "^6.6.0",
     "nuqs": "^2.7.3",
     "react": "19.2.3",

apps/web/src/components/ActivityItem.tsx

@@ -9,6 +9,7 @@ import {
   CheckCircle,
   ChevronRight,
   Eye,
+  Inbox,
   MousePointerClick,
   Send,
   ShieldAlert,
@@ -99,6 +100,7 @@ function isEmailActivity(type: string): boolean {
   return [
     'email.sent',
     'email.delivered',
+    'email.received',
     'email.opened',
     'email.clicked',
     'email.bounced',
@@ -181,6 +183,19 @@ function getActivityConfig(activity: Activity): ActivityConfig {
         },
       };
 
+    case 'email.received':
+      return {
+        icon: Inbox,
+        color: 'text-blue-600',
+        bgColor: 'bg-blue-100',
+        title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email received',
+        description: typeof metadata.from === 'string' ? `From: ${metadata.from}` : 'Inbound email',
+        badge: {
+          label: 'Received',
+          variant: 'default',
+        },
+      };
+
     case 'email.opened':
       return {
         icon: Eye,

apps/web/src/components/BillingLimits.tsx

@@ -78,6 +78,7 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
       workflows: null,
       campaigns: null,
       transactional: null,
+      inbound: null,
     },
   });
 
@@ -88,6 +89,7 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
         workflows: limitsData.workflows.limit,
         campaigns: limitsData.campaigns.limit,
         transactional: limitsData.transactional.limit,
+        inbound: limitsData.inbound.limit,
       });
     }
   }, [limitsData, form]);
@@ -121,6 +123,7 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
         workflows: limitsData.workflows.limit,
         campaigns: limitsData.campaigns.limit,
         transactional: limitsData.transactional.limit,
+        inbound: limitsData.inbound.limit,
       });
     }
     setIsEditing(false);
@@ -217,6 +220,7 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
                     usage={limitsData.transactional}
                     currency={limitsData.currency}
                   />
+                  <UsageDisplay category="Inbound" usage={limitsData.inbound} currency={limitsData.currency} />
                 </>
               )}
 
@@ -322,6 +326,36 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
                   }}
                 />
 
+                <FormField
+                  control={form.control}
+                  name="inbound"
+                  render={({field}) => {
+                    const estimatedCost =
+                      limitsData?.currency && field.value
+                        ? formatEmailCost(Number(field.value), limitsData.currency)
+                        : null;
+                    return (
+                      <FormItem>
+                        <FormLabel>Inbound Emails Limit</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            placeholder="Unlimited"
+                            {...field}
+                            value={field.value ?? ''}
+                            onChange={e => field.onChange(e.target.value === '' ? null : e.target.value)}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          Maximum inbound emails per month. Leave empty for unlimited.
+                          {estimatedCost && <span className="text-neutral-500"> ≈ {estimatedCost}/month</span>}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    );
+                  }}
+                />
+
                 <div className="flex justify-end gap-2 pt-4">
                   <Button type="button" variant="outline" onClick={handleCancel}>
                     Cancel

apps/web/src/components/ContactPicker.tsx

@@ -0,0 +1,152 @@
+import type {Contact} from '@plunk/db';
+import type {CursorPaginatedResponse} from '@plunk/types';
+import {Input, Popover, PopoverContent, PopoverTrigger} from '@plunk/ui';
+import {Check, ChevronsUpDown, MailCheck, MailX, Search, X} from 'lucide-react';
+import {useEffect, useRef, useState} from 'react';
+import useSWR from 'swr';
+
+interface ContactPickerProps {
+  /** Currently selected emails */
+  selected: string[];
+  /** Called when selection changes */
+  onChange: (emails: string[]) => void;
+  /** Emails already in the segment (shown as disabled) */
+  existing?: string[];
+  placeholder?: string;
+}
+
+/**
+ * Searchable multi-select contact picker backed by the /contacts API.
+ * Only fetches when the user types (safe for large contact lists).
+ */
+export function ContactPicker({
+  selected,
+  onChange,
+  existing = [],
+  placeholder = 'Search contacts...',
+}: ContactPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setDebouncedSearch(search), 300);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [search]);
+
+  // Only fetch when there's a search term — avoids loading all contacts on open
+  const {data, isLoading} = useSWR<CursorPaginatedResponse<Contact>>(
+    open && debouncedSearch.length > 0 ? `/contacts?limit=20&search=${encodeURIComponent(debouncedSearch)}` : null,
+    {revalidateOnFocus: false},
+  );
+
+  const contacts = data?.data ?? [];
+
+  const toggle = (email: string) => {
+    if (selected.includes(email)) {
+      onChange(selected.filter(e => e !== email));
+    } else {
+      onChange([...selected, email]);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <Popover open={open} onOpenChange={v => { setOpen(v); if (!v) setSearch(''); }}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            role="combobox"
+            aria-expanded={open}
+            className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-0 transition-colors"
+          >
+            <span>{placeholder}</span>
+            <ChevronsUpDown className="h-4 w-4 opacity-40 shrink-0" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          style={{width: 'var(--radix-popover-trigger-width)'}}
+          align="start"
+        >
+          {/* Search input */}
+          <div className="flex items-center border-b border-neutral-200 px-3 py-2">
+            <Search className="mr-2 h-4 w-4 shrink-0 text-neutral-400" />
+            <Input
+              placeholder="Type an email to search..."
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="border-0 p-0 h-8 focus-visible:ring-0 focus-visible:ring-offset-0 text-sm"
+              autoFocus
+            />
+          </div>
+
+          {/* Results */}
+          <div className="max-h-[240px] overflow-y-auto p-1">
+            {debouncedSearch.length === 0 ? (
+              <p className="py-6 text-center text-sm text-neutral-400">Type to search contacts</p>
+            ) : isLoading ? (
+              <p className="py-6 text-center text-sm text-neutral-400">Searching...</p>
+            ) : contacts.length === 0 ? (
+              <p className="py-6 text-center text-sm text-neutral-400">No contacts found</p>
+            ) : (
+              contacts.map(contact => {
+                const isSelected = selected.includes(contact.email);
+                const isExisting = existing.includes(contact.email);
+
+                return (
+                  <button
+                    key={contact.id}
+                    type="button"
+                    disabled={isExisting}
+                    onClick={() => toggle(contact.email)}
+                    className="w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-neutral-50 disabled:opacity-40 disabled:cursor-not-allowed text-left transition-colors"
+                  >
+                    {contact.subscribed ? (
+                      <MailCheck className="h-4 w-4 text-green-600 shrink-0" />
+                    ) : (
+                      <MailX className="h-4 w-4 text-red-500 shrink-0" />
+                    )}
+                    <span className="flex-1 truncate text-neutral-900">{contact.email}</span>
+                    {isExisting && (
+                      <span className="text-xs text-neutral-400 shrink-0">already member</span>
+                    )}
+                    {isSelected && !isExisting && (
+                      <Check className="h-4 w-4 text-neutral-900 shrink-0" />
+                    )}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Selected chips */}
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selected.map(email => (
+            <span
+              key={email}
+              className="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 border border-neutral-200 pl-3 pr-1.5 py-1 text-sm text-neutral-800"
+            >
+              {email}
+              <button
+                type="button"
+                onClick={() => onChange(selected.filter(e => e !== email))}
+                className="rounded-full p-0.5 hover:bg-neutral-300 transition-colors"
+                aria-label={`Remove ${email}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/components/DashboardLayout.tsx

@@ -22,7 +22,7 @@ import {
 import Image from 'next/image';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
-import {useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -74,6 +74,11 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
   const mobileProjectMenuRef = useRef<HTMLDivElement>(null);
   const mobileUserMenuRef = useRef<HTMLDivElement>(null);
 
+  // Sort projects alphabetically by name
+  const sortedProjects = useMemo(() => {
+    return [...availableProjects].sort((a, b) => a.name.localeCompare(b.name));
+  }, [availableProjects]);
+
   // Handle click outside for project menu
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -179,8 +184,8 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
 
           {/* Project Dropdown */}
           {showProjectMenu && (
-            <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
+            <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto min-w-full w-max">
-              {availableProjects.map(project => (
+              {sortedProjects.map(project => (
                 <button
                   key={project.id}
                   onClick={e => {
@@ -189,14 +194,14 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
                     setActiveProject(project);
                     setShowProjectMenu(false);
                   }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors whitespace-nowrap"
                 >
-                  <div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
+                  <div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
                     {project.name.charAt(0).toUpperCase()}
                   </div>
                   <span className="text-neutral-900 text-left flex-1">{project.name}</span>
                   {activeProject?.id === project.id && (
-                    <div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
+                    <div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900 flex-shrink-0" />
                   )}
                 </button>
               ))}
@@ -204,7 +209,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
               <Link
                 href="/projects/create"
                 onClick={() => setShowProjectMenu(false)}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700 whitespace-nowrap"
               >
                 <Plus className="h-4 w-4" />
                 <span>Create project</span>

apps/web/src/components/EmailEditor/EmailEditor.tsx

@@ -31,6 +31,7 @@ import {
 } from '@plunk/ui';
 import {Code2, Eye, Monitor, Smartphone, Tablet, Upload, X} from 'lucide-react';
 import {network} from '../../lib/network';
+import {detectCustomHtmlPatterns, wrapEmailWithStyles} from '../../lib/emailStyles';
 import 'tippy.js/dist/tippy.css';
 
 interface EmailEditorProps {
@@ -51,54 +52,6 @@ const commonVariables = [
   {name: 'manageUrl', description: 'Manage link'},
 ];
 
-const detectCustomHtmlPatterns = (html: string): boolean => {
-  if (!html || html.trim() === '') return false;
-
-  // Check for common patterns that indicate custom HTML
-  const hasInlineStyles = /<[^>]+style\s*=\s*["'][^"']*["']/i.test(html);
-
-  // Check for custom classes (exclude TipTap's generated classes)
-  const classMatches = html.matchAll(/class\s*=\s*["']([^"']*)["']/gi);
-  let hasCustomClasses = false;
-  for (const match of classMatches) {
-    const classValue = match[1];
-    if (!classValue) continue;
-    // Split by whitespace to get individual classes
-    const classes = classValue.split(/\s+/).filter(c => c.length > 0);
-    // Check if any class is NOT in the allowed list
-    const allowedPrefixes = [
-      'prose',
-      'variable-',
-      'email-image',
-      'ProseMirror',
-      'resizable-image',
-      'selected',
-      'resize-handle',
-    ];
-    const hasDisallowedClass = classes.some(cls => !allowedPrefixes.some(prefix => 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); // Nested tables
-  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
-  );
-};
-
 export function EmailEditor({value, onChange, placeholder, subject, from, replyTo}: EmailEditorProps) {
   // Detect if initial value has custom HTML and start in appropriate mode
   const initialMode = detectCustomHtmlPatterns(value) ? 'html' : 'visual';
@@ -348,31 +301,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
 
       if (iframeDoc) {
         const previewContent = getPreviewHtml();
-        const fullHtml = `
+        const fullHtml = wrapEmailWithStyles(previewContent);
-          <!DOCTYPE html>
-          <html>
-            <head>
-              <meta charset="utf-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <style>
-                body {
-                  margin: 0;
-                  padding: 16px;
-                  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-                  font-size: 16px;
-                  line-height: 1.6;
-                  color: #374151;
-                }
-                * {
-                  box-sizing: border-box;
-                }
-              </style>
-            </head>
-            <body>
-              ${previewContent}
-            </body>
-          </html>
-        `;
 
         iframeDoc.open();
         iframeDoc.write(fullHtml);

apps/web/src/components/EmailPreviewModal.tsx

@@ -1,6 +1,7 @@
 import {Button, Dialog, DialogContent, DialogHeader, DialogTitle} from '@plunk/ui';
 import {Monitor, Smartphone, Tablet} from 'lucide-react';
 import {useState} from 'react';
+import {wrapEmailWithStyles} from '../lib/emailStyles';
 
 interface EmailPreviewModalProps {
   open: boolean;
@@ -16,391 +17,6 @@ interface EmailPreviewModalProps {
 
 type PreviewDevice = 'mobile' | 'tablet' | 'desktop';
 
-// Detects if HTML contains custom patterns that indicate it was written in the HTML editor
-// rather than the visual editor. Custom HTML should render as-is without prose wrapper.
-const detectCustomHtmlPatterns = (html: string): boolean => {
-  if (!html || html.trim() === '') return false;
-
-  // Check for common patterns that indicate custom HTML
-  const hasInlineStyles = /<[^>]+style\s*=\s*["'][^"']*["']/i.test(html);
-
-  // Check for custom classes (exclude TipTap's generated classes)
-  const classMatches = html.matchAll(/class\s*=\s*["']([^"']*)["']/gi);
-  let hasCustomClasses = false;
-  for (const match of classMatches) {
-    const classValue = match[1];
-    if (!classValue) continue;
-    // Split by whitespace to get individual classes
-    const classes = classValue.split(/\s+/).filter(c => c.length > 0);
-    // Check if any class is NOT in the allowed list
-    const allowedPrefixes = [
-      'prose',
-      'variable-',
-      'email-image',
-      'ProseMirror',
-      'resizable-image',
-      'selected',
-      'resize-handle',
-    ];
-    const hasDisallowedClass = classes.some(cls => !allowedPrefixes.some(prefix => 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); // Nested tables
-  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
-  );
-};
-
-// Helper function to wrap email body with necessary styles for proper rendering
-// Only wraps visual editor content - custom HTML is returned as-is
-const wrapEmailWithStyles = (htmlBody: string): string => {
-  // If this is custom HTML (from HTML editor), return it as-is without wrapping
-  if (detectCustomHtmlPatterns(htmlBody)) {
-    return htmlBody;
-  }
-
-  // For visual editor content, wrap with prose styles
-  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: 65ch;
-    }
-    .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-color: #e5e7eb;
-      border-top-width: 1px;
-      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;
-    }
-
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 16px 0;
-    }
-
-    th, td {
-      border: 1px solid #e5e7eb;
-      padding: 8px 12px;
-      text-align: left;
-      min-width: 100px;
-    }
-
-    th {
-      background-color: #f3f4f6;
-      font-weight: 600;
-    }
-
-    img {
-      max-width: 100%;
-      height: auto;
-      display: block;
-      margin: 16px 0;
-    }
-
-    .resizable-image-wrapper {
-      display: block;
-      margin: 16px 0;
-    }
-
-    .resizable-image-container {
-      display: inline-block;
-      position: relative;
-      max-width: 100%;
-    }
-
-    .resizable-image-container img {
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <div class="prose prose-sm max-w-none">
-    ${htmlBody}
-  </div>
-</body>
-</html>`;
-};
-
 export function EmailPreviewModal({
   open,
   onOpenChange,

apps/web/src/components/QuickStart.tsx

@@ -1,7 +1,8 @@
 import {Button, Card, CardContent, CardDescription, CardHeader, CardTitle} from '@plunk/ui';
-import {BookOpen, CheckCircle2, Mail, MessageCircle, Shield, Users, Zap} from 'lucide-react';
+import {AnimatePresence, motion} from 'framer-motion';
+import {BookOpen, Check, CheckCircle2, Mail, MessageCircle, Shield, Users, Zap} from 'lucide-react';
 import Link from 'next/link';
-import {useMemo} from 'react';
+import {useMemo, useState} from 'react';
 import {LANDING_URI, WIKI_URI} from '../lib/constants';
 import type {ProjectSetupState} from '../lib/hooks/useProjectSetupState';
 import {useConfig} from '../lib/hooks/useConfig';
@@ -23,6 +24,14 @@ interface QuickStartProps {
 
 // Help resources that always appear
 function HelpResources() {
+  const [copied, setCopied] = useState(false);
+
+  const copyEmail = () => {
+    void navigator.clipboard.writeText('[email protected]');
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <div className="mt-4 pt-4 border-t border-neutral-200">
       <p className="text-xs font-medium text-neutral-500 mb-3">Need help?</p>
@@ -39,6 +48,39 @@ function HelpResources() {
             Join Discord
           </Button>
         </Link>
+        <motion.button
+          onClick={copyEmail}
+          whileTap={{scale: 0.97}}
+          className="flex-1 relative flex items-center justify-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700 overflow-hidden transition-colors hover:bg-neutral-50 hover:text-neutral-900 hover:border-neutral-300"
+        >
+          <AnimatePresence mode="wait" initial={false}>
+            {copied ? (
+              <motion.span
+                key="copied"
+                className="flex items-center gap-1.5"
+                initial={{opacity: 0, y: 6}}
+                animate={{opacity: 1, y: 0}}
+                exit={{opacity: 0, y: -6}}
+                transition={{duration: 0.15}}
+              >
+                <Check className="h-3.5 w-3.5 text-green-600" />
+                <span className="text-green-600">Copied!</span>
+              </motion.span>
+            ) : (
+              <motion.span
+                key="idle"
+                className="flex items-center gap-1.5"
+                initial={{opacity: 0, y: 6}}
+                animate={{opacity: 1, y: 0}}
+                exit={{opacity: 0, y: -6}}
+                transition={{duration: 0.15}}
+              >
+                <Mail className="h-3.5 w-3.5" />
+                Email support
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </motion.button>
       </div>
     </div>
   );

apps/web/src/components/TemplateSearchPicker.tsx

@@ -0,0 +1,106 @@
+import {Input} from '@plunk/ui';
+import type {Template} from '@plunk/db';
+import type {PaginatedResponse} from '@plunk/types';
+import {Command, CommandGroup, CommandItem, CommandList} from '@plunk/ui';
+import {useCallback, useRef, useState} from 'react';
+import useSWR from 'swr';
+
+interface TemplateSearchPickerProps {
+  /** Currently selected template ID */
+  value: string;
+  /** Display name for the pre-selected template (avoids a fetch just to show the name) */
+  initialName?: string;
+  onChange: (id: string) => void;
+}
+
+/**
+ * Inline combobox for picking a template.
+ * Fires a debounced server-side search (/templates?search=…&pageSize=20)
+ * so it works correctly regardless of how many templates exist.
+ */
+export function TemplateSearchPicker({value, initialName, onChange}: TemplateSearchPickerProps) {
+  const [query, setQuery] = useState(initialName ?? '');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevInitialName = useRef(initialName);
+
+  // Sync display name when initialName changes (e.g. dialog re-opens with a different selection)
+  if (initialName !== prevInitialName.current) {
+    prevInitialName.current = initialName;
+    setQuery(initialName ?? '');
+  }
+
+  const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setQuery(val);
+    setOpen(true);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setDebouncedQuery(val), 300);
+  }, []);
+
+  const {data, isLoading} = useSWR<PaginatedResponse<Template>>(
+    open || debouncedQuery
+      ? `/templates?pageSize=20${debouncedQuery ? `&search=${encodeURIComponent(debouncedQuery)}` : ''}`
+      : null,
+    {revalidateOnFocus: false},
+  );
+
+  // When closed, show the selected template's name rather than the raw query
+  const displayValue = open
+    ? query
+    : (value ? (data?.data.find(t => t.id === value)?.name ?? initialName ?? value) : '');
+
+  return (
+    <div className="relative">
+      <Input
+        type="text"
+        value={displayValue}
+        onChange={handleInput}
+        onFocus={() => {
+          setOpen(true);
+          setDebouncedQuery(query);
+        }}
+        onBlur={() => setTimeout(() => setOpen(false), 150)}
+        placeholder="Search templates…"
+        autoComplete="off"
+      />
+
+      {open && (
+        <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md max-h-60 overflow-y-auto">
+          {isLoading ? (
+            <div className="px-3 py-2 text-sm text-neutral-500">Searching…</div>
+          ) : !data?.data.length ? (
+            <div className="px-3 py-2 text-sm text-neutral-500">No templates found</div>
+          ) : (
+            <Command>
+              <CommandList>
+                <CommandGroup>
+                  {data.data.map(t => (
+                    <CommandItem
+                      key={t.id}
+                      value={t.id}
+                      onSelect={() => {
+                        onChange(t.id);
+                        setQuery(t.name);
+                        setOpen(false);
+                      }}
+                    >
+                      <span className="flex-1 truncate">{t.name}</span>
+                      <span className="ml-2 text-xs text-neutral-400 shrink-0">{t.type}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          )}
+          {(data?.total ?? 0) > 20 && (
+            <div className="px-3 py-1.5 text-xs text-neutral-400 border-t border-neutral-100">
+              Showing 20 of {data!.total} — type to narrow results
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/components/TemplateSelectionDialog.tsx

@@ -39,7 +39,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
   const [search, setSearch] = useState('');
   const [searchInput, setSearchInput] = useState('');
   const [page, setPage] = useState(1);
-  const [typeFilter, setTypeFilter] = useState<'ALL' | 'TRANSACTIONAL' | 'MARKETING'>('ALL');
+  const [typeFilter, setTypeFilter] = useState<'ALL' | 'TRANSACTIONAL' | 'MARKETING' | 'HEADLESS'>('ALL');
   const [step, setStep] = useState<'select' | 'configure'>('select');
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
   const [selectedFields, setSelectedFields] = useState<SelectedFields>({
@@ -186,6 +186,17 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                 >
                   Transactional
                 </Button>
+                <Button
+                  type="button"
+                  onClick={() => {
+                    setTypeFilter('HEADLESS');
+                    setPage(1);
+                  }}
+                  variant={typeFilter === 'HEADLESS' ? 'default' : 'secondary'}
+                  size="sm"
+                >
+                  Headless
+                </Button>
               </div>
             </div>
 
@@ -233,7 +244,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1">
                           <CardTitle className="text-base truncate">{template.name}</CardTitle>
-                          <Badge className="capitalize" variant={template.type === 'MARKETING' ? 'info' : 'success'}>
+                          <Badge className="capitalize" variant={template.type === 'MARKETING' ? 'info' : template.type === 'HEADLESS' ? 'warning' : 'success'}>
                             {template.type.toLowerCase()}
                           </Badge>
                         </div>

apps/web/src/components/WorkflowBuilder.tsx

@@ -91,6 +91,34 @@ const STEP_TYPE_BG = {
   UPDATE_CONTACT: '#e0e7ff',
 };
 
+// Multi-branch condition helpers
+function getExpectedBranches(config: any): string[] {
+  if (config?.mode === 'multi') {
+    return [...(config.branches || []).map((b: any) => b.id), 'default'];
+  }
+  return ['yes', 'no'];
+}
+
+function getBranchLabel(config: any, branchId: string): string {
+  if (config?.mode === 'multi') {
+    if (branchId === 'default') return 'Default';
+    const branch = config.branches?.find((b: any) => b.id === branchId);
+    return branch?.name || branchId;
+  }
+  return branchId === 'yes' ? 'Yes' : 'No';
+}
+
+const BRANCH_COLORS = ['#16a34a', '#dc2626', '#2563eb', '#d97706', '#7c3aed', '#0891b2', '#be185d', '#059669'];
+
+function getBranchColor(config: any, branchId: string): string {
+  if (config?.mode === 'multi') {
+    if (branchId === 'default') return '#64748b';
+    const idx = config.branches?.findIndex((b: any) => b.id === branchId) ?? 0;
+    return BRANCH_COLORS[idx % BRANCH_COLORS.length]!;
+  }
+  return branchId === 'yes' ? '#16a34a' : '#dc2626';
+}
+
 // Dagre layout function
 function getLayoutedElements(nodes: Node[], edges: Edge[]) {
   const dagreGraph = new dagre.graphlib.Graph();
@@ -129,6 +157,7 @@ function getLayoutedElements(nodes: Node[], edges: Edge[]) {
   });
 
   // Center "Add Step" nodes directly below their parent nodes
+  // For condition nodes with multiple branches, let dagre handle horizontal spread
   const adjustedNodes = layoutedNodes.map(node => {
     if (node.type === 'addStep') {
       // Find the parent node (the source of the edge connecting to this add node)
@@ -136,7 +165,17 @@ function getLayoutedElements(nodes: Node[], edges: Edge[]) {
       if (parentEdge) {
         const parentNode = layoutedNodes.find(n => n.id === parentEdge.source);
         if (parentNode) {
-          // Center the add node below the parent node
+          // Check how many add-step siblings share this parent
+          const siblingAddNodes = edges.filter(
+            e => e.source === parentEdge.source && layoutedNodes.find(n => n.id === e.target && n.type === 'addStep'),
+          );
+
+          if (siblingAddNodes.length > 1) {
+            // Multiple branches — let dagre's spread positioning stand, only keep y
+            return node;
+          }
+
+          // Single add node — center below parent
           return {
             ...node,
             position: {
@@ -226,6 +265,22 @@ function CustomNode({
         onMouseLeave={() => setShowActions(false)}
       >
         {/* Action buttons - shown on hover */}
+        {showActions && data.type === 'TRIGGER' && (
+          <div className="absolute -top-3 -right-3 flex gap-1.5 z-10">
+            <Button
+              onClick={e => {
+                e.stopPropagation();
+                data.onEdit?.();
+              }}
+              variant="outline"
+              size="icon"
+              className="h-7 w-7 shadow-md"
+              title="Edit trigger settings"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        )}
         {showActions && data.type !== 'TRIGGER' && (
           <div className="absolute -top-3 -right-3 flex gap-1.5 z-10">
             <Button
@@ -308,9 +363,16 @@ function CustomNode({
                     : String(data.config.field)}
                 </span>
               </div>
-              <div className="text-[10px] text-neutral-500 ml-4">
+              {data.config.mode === 'multi' ? (
-                {data.config.operator} &quot;{String(data.config.value)}&quot;
+                <div className="text-[10px] text-neutral-500 ml-4">
-              </div>
+                  {data.config.branches?.length || 0} branch{(data.config.branches?.length || 0) !== 1 ? 'es' : ''} +
+                  default
+                </div>
+              ) : (
+                <div className="text-[10px] text-neutral-500 ml-4">
+                  {data.config.operator} &quot;{String(data.config.value)}&quot;
+                </div>
+              )}
             </div>
           </div>
         )}
@@ -322,6 +384,14 @@ function CustomNode({
             </div>
           </div>
         )}
+        {data.type === 'TRIGGER' && data.config?.eventName && (
+          <div className="mt-3 pt-3 border-t border-neutral-100">
+            <div className="flex items-center gap-2 text-xs text-neutral-600">
+              <Lightbulb className="h-3 w-3" />
+              <span className="truncate">{data.config.eventName}</span>
+            </div>
+          </div>
+        )}
         {data.type === 'WEBHOOK' && data.config?.url && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
@@ -369,17 +439,29 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
   const reactFlowInstance = useReactFlow();
   const [addStepContext, setAddStepContext] = useState<{
     fromStepId: string | null;
-    branch?: 'yes' | 'no';
+    branch?: string;
   } | null>(null);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [stepToDelete, setStepToDelete] = useState<string | null>(null);
 
   // Define handlers before they are used in useMemo
-  const handleEditStep = useCallback((stepId: string) => {
+  const handleEditStep = useCallback(
-    // This will be handled by the parent component
+    (stepId: string) => {
-    const event = new CustomEvent('workflow-edit-step', {detail: {stepId}});
+      // Check if this is a TRIGGER step
-    window.dispatchEvent(event);
+      const step = steps.find(s => s.id === stepId);
-  }, []);
+
+      if (step?.type === 'TRIGGER') {
+        // For TRIGGER steps, open workflow settings instead
+        const event = new CustomEvent('workflow-open-settings');
+        window.dispatchEvent(event);
+      } else {
+        // For other steps, open step editor
+        const event = new CustomEvent('workflow-edit-step', {detail: {stepId}});
+        window.dispatchEvent(event);
+      }
+    },
+    [steps],
+  );
 
   const handleDeleteStepClick = useCallback((stepId: string) => {
     setStepToDelete(stepId);
@@ -419,41 +501,27 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
       if (step.type === 'EXIT') return; // Exit steps can't have next steps
 
       if (step.type === 'CONDITION') {
-        // Check for yes and no branches
+        const expectedBranches = getExpectedBranches(step.config);
-        const hasYesBranch = step.outgoingTransitions?.some(t => {
-          const condition = t.condition;
-          return condition && typeof condition === 'object' && 'branch' in condition && condition.branch === 'yes';
-        });
-        const hasNoBranch = step.outgoingTransitions?.some(t => {
-          const condition = t.condition;
-          return condition && typeof condition === 'object' && 'branch' in condition && condition.branch === 'no';
-        });
 
-        if (!hasYesBranch) {
+        expectedBranches.forEach(branchId => {
-          nodes.push({
+          const hasBranch = step.outgoingTransitions?.some(t => {
-            id: `${step.id}-add-yes`,
+            const condition = t.condition;
-            type: 'addStep',
+            return condition && typeof condition === 'object' && 'branch' in condition && condition.branch === branchId;
-            position: {x: 0, y: 0},
-            draggable: false,
-            data: {
-              label: 'Yes',
-              onClick: () => setAddStepContext({fromStepId: step.id, branch: 'yes'}),
-            },
           });
-        }
 
-        if (!hasNoBranch) {
+          if (!hasBranch) {
-          nodes.push({
+            nodes.push({
-            id: `${step.id}-add-no`,
+              id: `${step.id}-add-${branchId}`,
-            type: 'addStep',
+              type: 'addStep',
-            position: {x: 0, y: 0},
+              position: {x: 0, y: 0},
-            draggable: false,
+              draggable: false,
-            data: {
+              data: {
-              label: 'No',
+                label: getBranchLabel(step.config, branchId),
-              onClick: () => setAddStepContext({fromStepId: step.id, branch: 'no'}),
+                onClick: () => setAddStepContext({fromStepId: step.id, branch: branchId}),
-            },
+              },
-          });
+            });
-        }
+          }
+        });
       } else {
         // For non-condition steps, add + node if no outgoing transitions
         if (!step.outgoingTransitions || step.outgoingTransitions.length === 0) {
@@ -484,7 +552,12 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
           const condition = transition.condition;
           const isConditional = condition && typeof condition === 'object' && 'branch' in condition;
           const branch =
-            condition && typeof condition === 'object' && 'branch' in condition ? condition.branch : undefined;
+            condition && typeof condition === 'object' && 'branch' in condition
+              ? (condition.branch as string)
+              : undefined;
+
+          const branchColor = branch ? getBranchColor(step.config, branch) : '#94a3b8';
+          const branchLabel = branch ? getBranchLabel(step.config, branch) : undefined;
 
           edges.push({
             id: transition.id,
@@ -492,9 +565,9 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
             target: transition.toStepId,
             type: 'smoothstep',
             animated: step.type === 'DELAY' || step.type === 'WAIT_FOR_EVENT',
-            label: isConditional ? (branch === 'yes' ? 'Yes' : 'No') : undefined,
+            label: isConditional ? branchLabel : undefined,
             labelStyle: {
-              fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b',
+              fill: isConditional ? branchColor : '#64748b',
               fontWeight: 600,
               fontSize: 12,
             },
@@ -505,12 +578,12 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
             labelBgPadding: [8, 4] as [number, number],
             labelBgBorderRadius: 4,
             style: {
-              stroke: isConditional ? (branch === 'yes' ? '#16a34a' : '#dc2626') : '#94a3b8',
+              stroke: isConditional ? branchColor : '#94a3b8',
               strokeWidth: 2.5,
             },
             markerEnd: {
               type: MarkerType.ArrowClosed,
-              color: isConditional ? (branch === 'yes' ? '#16a34a' : '#dc2626') : '#94a3b8',
+              color: isConditional ? branchColor : '#94a3b8',
               width: 22,
               height: 22,
             },
@@ -522,47 +595,37 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
       if (step.type === 'EXIT') return;
 
       if (step.type === 'CONDITION') {
-        const hasYesBranch = step.outgoingTransitions?.some(
+        const expectedBranches = getExpectedBranches(step.config);
-          t =>
-            t.condition && typeof t.condition === 'object' && 'branch' in t.condition && t.condition.branch === 'yes',
-        );
-        const hasNoBranch = step.outgoingTransitions?.some(
-          t => t.condition && typeof t.condition === 'object' && 'branch' in t.condition && t.condition.branch === 'no',
-        );
 
-        if (!hasYesBranch) {
+        expectedBranches.forEach(branchId => {
-          edges.push({
+          const hasBranch = step.outgoingTransitions?.some(
-            id: `${step.id}-add-yes-edge`,
+            t =>
-            source: step.id,
+              t.condition &&
-            target: `${step.id}-add-yes`,
+              typeof t.condition === 'object' &&
-            type: 'straight',
+              'branch' in t.condition &&
-            animated: false,
+              t.condition.branch === branchId,
-            label: 'Yes',
+          );
-            labelStyle: {fill: '#16a34a', fontWeight: 600, fontSize: 12},
-            labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
-            labelBgPadding: [8, 4] as [number, number],
-            labelBgBorderRadius: 4,
-            style: {stroke: '#16a34a', strokeWidth: 2.5, strokeDasharray: '5,5'},
-            markerEnd: {type: MarkerType.ArrowClosed, color: '#16a34a', width: 22, height: 22},
-          });
-        }
 
-        if (!hasNoBranch) {
+          if (!hasBranch) {
-          edges.push({
+            const color = getBranchColor(step.config, branchId);
-            id: `${step.id}-add-no-edge`,
+            const label = getBranchLabel(step.config, branchId);
-            source: step.id,
+
-            target: `${step.id}-add-no`,
+            edges.push({
-            type: 'straight',
+              id: `${step.id}-add-${branchId}-edge`,
-            animated: false,
+              source: step.id,
-            label: 'No',
+              target: `${step.id}-add-${branchId}`,
-            labelStyle: {fill: '#dc2626', fontWeight: 600, fontSize: 12},
+              type: 'smoothstep',
-            labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
+              animated: false,
-            labelBgPadding: [8, 4] as [number, number],
+              label,
-            labelBgBorderRadius: 4,
+              labelStyle: {fill: color, fontWeight: 600, fontSize: 12},
-            style: {stroke: '#dc2626', strokeWidth: 2.5, strokeDasharray: '5,5'},
+              labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
-            markerEnd: {type: MarkerType.ArrowClosed, color: '#dc2626', width: 22, height: 22},
+              labelBgPadding: [8, 4] as [number, number],
-          });
+              labelBgBorderRadius: 4,
-        }
+              style: {stroke: color, strokeWidth: 2.5, strokeDasharray: '5,5'},
+              markerEnd: {type: MarkerType.ArrowClosed, color, width: 22, height: 22},
+            });
+          }
+        });
       } else {
         if (!step.outgoingTransitions || step.outgoingTransitions.length === 0) {
           edges.push({
@@ -609,15 +672,13 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
               const connectedAddNodes = updatedNodes.filter(node => {
                 if (node.type !== 'addStep') return false;
                 // Check if this add node is connected to the moved node
-                return (
+                return node.id === `${movedNode.id}-add` || node.id.startsWith(`${movedNode.id}-add-`);
-                  node.id === `${movedNode.id}-add` ||
-                  node.id === `${movedNode.id}-add-yes` ||
-                  node.id === `${movedNode.id}-add-no`
-                );
               });
 
-              // Update positions of connected "+" nodes to stay centered below parent
+              // Update positions of connected "+" nodes to stay below parent
-              connectedAddNodes.forEach(addNode => {
+              if (connectedAddNodes.length === 1) {
+                // Single add node — center below parent
+                const addNode = connectedAddNodes[0]!;
                 const addNodeIndex = updatedNodes.findIndex(n => n.id === addNode.id);
                 if (addNodeIndex !== -1 && updatedNodes[addNodeIndex]) {
                   const existingNode = updatedNodes[addNodeIndex];
@@ -629,7 +690,24 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
                     },
                   };
                 }
-              });
+              } else if (connectedAddNodes.length > 1) {
+                // Multiple branches — move all add nodes by the same delta as the parent
+                const oldX = movedNode.position.x;
+                const deltaX = change.position.x - oldX;
+                connectedAddNodes.forEach(addNode => {
+                  const addNodeIndex = updatedNodes.findIndex(n => n.id === addNode.id);
+                  if (addNodeIndex !== -1 && updatedNodes[addNodeIndex]) {
+                    const existingNode = updatedNodes[addNodeIndex];
+                    updatedNodes[addNodeIndex] = {
+                      ...existingNode,
+                      position: {
+                        x: existingNode.position.x + deltaX,
+                        y: existingNode.position.y,
+                      },
+                    };
+                  }
+                });
+              }
             }
           });
 
@@ -697,7 +775,9 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
 
         // Create the transition with proper condition
         const condition = addStepContext.branch ? {branch: addStepContext.branch} : null;
-        const priority = addStepContext.branch === 'yes' ? 0 : addStepContext.branch === 'no' ? 1 : 0;
+        const expectedBranches = fromStep.type === 'CONDITION' ? getExpectedBranches(fromStep.config) : [];
+        const branchIndex = addStepContext.branch ? expectedBranches.indexOf(addStepContext.branch) : -1;
+        const priority = branchIndex >= 0 ? branchIndex : 0;
 
         await network.fetch<unknown, typeof WorkflowSchemas.createTransition>(
           'POST',

apps/web/src/lib/emailStyles.ts

@@ -0,0 +1,377 @@
+// Detects if HTML contains custom patterns that indicate it was written in the HTML editor
+// rather than the visual editor. Custom HTML should render as-is without prose wrapper.
+export const 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 => c.length > 0);
+    const allowedPrefixes = [
+      'prose',
+      'variable-',
+      'email-image',
+      'ProseMirror',
+      'resizable-image',
+      'selected',
+      'resize-handle',
+    ];
+    const hasDisallowedClass = classes.some(cls => !allowedPrefixes.some(prefix => 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
+  );
+};
+
+export const wrapEmailWithStyles = (htmlBody: string): string => {
+  if (detectCustomHtmlPatterns(htmlBody)) {
+    return htmlBody;
+  }
+
+  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>`;
+};

apps/web/src/pages/_app.tsx

@@ -14,6 +14,7 @@ import {network} from '../lib/network';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
+import Script from 'next/script';
 
 // Configure dayjs plugins globally
 dayjs.extend(relativeTime);
@@ -112,6 +113,14 @@ export default function WithProviders(props: AppProps) {
         }}
       >
         <DefaultSeo titleTemplate="%s | Plunk" defaultTitle="Plunk | Email Platform Dashboard" />
+
+        <Script
+          defer
+          src="https://analytics.driaug.com/script.js"
+          data-website-id="5880df93-9025-41ae-8e33-7c3da865f764"
+          data-domains="next-app.useplunk.com"
+        />
+
         <ActiveProjectProvider>
           <Root {...props} />
         </ActiveProjectProvider>

apps/web/src/pages/activity/index.tsx

@@ -119,10 +119,12 @@ export default function ActivityPage() {
                     <SelectContent>
                       <SelectItem value="ALL">All Activity Types</SelectItem>
                       <SelectItem value="event.triggered">Events</SelectItem>
-                      <SelectItem value="email.sent,email.delivered,email.opened,email.clicked,email.bounced,email.complaint">
+                      <SelectItem value="email.sent,email.delivered,email.received,email.opened,email.clicked,email.bounced,email.complaint">
                         Emails
                       </SelectItem>
                       <SelectItem value="email.sent">Emails Sent</SelectItem>
+                      <SelectItem value="email.delivered">Emails Delivered</SelectItem>
+                      <SelectItem value="email.received">Emails Received</SelectItem>
                       <SelectItem value="email.opened">Emails Opened</SelectItem>
                       <SelectItem value="email.clicked">Emails Clicked</SelectItem>
                       <SelectItem value="email.bounced">Emails Bounced</SelectItem>

apps/web/src/pages/campaigns/[id].tsx

@@ -29,8 +29,8 @@ import {
   StickySaveBar,
 } from '@plunk/ui';
 import type {Campaign, Segment} from '@plunk/db';
-import {CampaignAudienceType, CampaignStatus} from '@plunk/db';
+import {CampaignAudienceType, CampaignStatus, TemplateType} from '@plunk/db';
-import {CampaignSchemas} from '@plunk/shared';
+import {CampaignSchemas, detectUnsubscribeSignal} from '@plunk/shared';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {EmailSettings} from '../../components/EmailSettings';
 import {EmailEditor} from '../../components/EmailEditor';
@@ -49,6 +49,7 @@ import {
   TestTube,
   Trash2,
   TrendingUp,
+  TriangleAlert,
   Users,
   XCircle,
 } from 'lucide-react';
@@ -216,6 +217,7 @@ export default function CampaignDetailsPage() {
         from: editedCampaign.from,
         fromName: editedCampaign.fromName || null,
         replyTo: editedCampaign.replyTo || null,
+        type: editedCampaign.type,
         audienceType: editedCampaign.audienceType,
         segmentId: editedCampaign.segmentId || undefined,
       });
@@ -232,6 +234,7 @@ export default function CampaignDetailsPage() {
           from: updated.data.from,
           fromName: updated.data.fromName || '',
           replyTo: updated.data.replyTo || '',
+          type: updated.data.type,
           audienceType: updated.data.audienceType,
           segmentId: updated.data.segmentId || undefined,
         });
@@ -254,6 +257,7 @@ export default function CampaignDetailsPage() {
         from: campaign.data.from,
         fromName: campaign.data.fromName || '',
         replyTo: campaign.data.replyTo || '',
+        type: campaign.data.type,
         audienceType: campaign.data.audienceType,
         segmentId: campaign.data.segmentId || undefined,
       });
@@ -274,6 +278,7 @@ export default function CampaignDetailsPage() {
       editedCampaign.from !== campaign.data.from ||
       (editedCampaign.fromName || '') !== (campaign.data.fromName || '') ||
       (editedCampaign.replyTo || '') !== (campaign.data.replyTo || '') ||
+      editedCampaign.type !== campaign.data.type ||
       editedCampaign.audienceType !== campaign.data.audienceType ||
       (editedCampaign.segmentId || null) !== (campaign.data.segmentId || null);
 
@@ -461,6 +466,53 @@ export default function CampaignDetailsPage() {
                   />
                 </div>
 
+                <div>
+                  <Label>Campaign Type</Label>
+                  <div className="flex flex-col gap-2 mt-2">
+                    {([
+                      {value: TemplateType.MARKETING, label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
+                      {value: TemplateType.TRANSACTIONAL, label: 'Transactional', description: 'All contacts, no subscription check or footer'},
+                      {value: TemplateType.HEADLESS, label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
+                    ] as const).map(({value, label, description}) => (
+                      <button
+                        key={value}
+                        type="button"
+                        onClick={() => setEditedCampaign({...editedCampaign, type: value})}
+                        className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
+                          (editedCampaign.type ?? c.type) === value
+                            ? 'border-neutral-900 bg-neutral-50'
+                            : 'border-neutral-200 hover:border-neutral-300'
+                        }`}
+                      >
+                        <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
+                        <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
+                      </button>
+                    ))}
+                  </div>
+                  {(editedCampaign.type ?? c.type) === TemplateType.HEADLESS &&
+                    !detectUnsubscribeSignal(editedCampaign.body ?? c.body) && (
+                    <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
+                      <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
+                        <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                        <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                      </div>
+                      <div className="px-3 py-2.5 space-y-2">
+                        <p className="text-xs text-amber-800 leading-relaxed">
+                          You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                        </p>
+                        <div className="flex flex-wrap gap-1.5">
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{unsubscribeUrl}}'}
+                          </code>
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{manageUrl}}'}
+                          </code>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
                 <div>
                   <Label htmlFor="subject">Subject Line *</Label>
                   <Input
@@ -513,8 +565,8 @@ export default function CampaignDetailsPage() {
                     <SelectContent>
                       <SelectItemWithDescription
                         value={CampaignAudienceType.ALL}
-                        title="All Subscribed Contacts"
+                        title={(editedCampaign.type ?? c.type) === TemplateType.TRANSACTIONAL ? 'All Contacts' : 'All Subscribed Contacts'}
-                        description="Send to everyone who hasn't unsubscribed"
+                        description={(editedCampaign.type ?? c.type) === TemplateType.TRANSACTIONAL ? 'Send to all contacts regardless of subscription status' : "Send to everyone who hasn't unsubscribed"}
                       />
                       <SelectItemWithDescription
                         value={CampaignAudienceType.SEGMENT}
@@ -581,7 +633,11 @@ export default function CampaignDetailsPage() {
                       <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
                       <p className="text-xs text-blue-800">
                         This count will be recalculated right before sending to ensure accuracy. The final number may
-                        differ if contacts subscribe, unsubscribe, or segment membership changes.
+                        differ if contacts{' '}
+                        {(editedCampaign.type ?? c.type) === TemplateType.TRANSACTIONAL
+                          ? 'are added or removed, or segment membership changes.'
+                          : 'subscribe, unsubscribe, or segment membership changes.'
+                        }
                       </p>
                     </div>
                   </div>

apps/web/src/pages/campaigns/create.tsx

@@ -15,7 +15,7 @@ import {
   Textarea,
 } from '@plunk/ui';
 import type {Segment, Template} from '@plunk/db';
-import {CampaignAudienceType} from '@plunk/db';
+import {CampaignAudienceType, TemplateType} from '@plunk/db';
 import {NextSeo} from 'next-seo';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {EmailSettings} from '../../components/EmailSettings';
@@ -23,12 +23,13 @@ import {EmailEditor} from '../../components/EmailEditor';
 import {StepHeader} from '../../components/StepHeader';
 import {network} from '../../lib/network';
 import {EmailFormValidator} from '../../lib/validation';
-import {ArrowLeft, Save, Users} from 'lucide-react';
+import {ArrowLeft, Save, TriangleAlert, Users} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
 import {toast} from 'sonner';
 import useSWR from 'swr';
+import {detectUnsubscribeSignal} from '@plunk/shared';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 
 export default function CreateCampaignPage() {
@@ -41,6 +42,7 @@ export default function CreateCampaignPage() {
   const [from, setFrom] = useState('');
   const [fromName, setFromName] = useState('');
   const [replyTo, setReplyTo] = useState('');
+  const [campaignType, setCampaignType] = useState<TemplateType>(TemplateType.MARKETING);
   const [audienceType, setAudienceType] = useState<CampaignAudienceType>(CampaignAudienceType.ALL);
   const [segmentId, setSegmentId] = useState('');
   const [saving, setSaving] = useState(false);
@@ -150,6 +152,7 @@ export default function CreateCampaignPage() {
         from,
         fromName: fromName || null,
         replyTo: replyTo || null,
+        type: campaignType,
         audienceType,
         segmentId: audienceType === CampaignAudienceType.SEGMENT ? segmentId : undefined,
         audienceFilter: audienceType === CampaignAudienceType.FILTERED ? [] : undefined,
@@ -256,11 +259,89 @@ export default function CreateCampaignPage() {
                   </CardContent>
                 </Card>
 
-                {/* Email Settings */}
+                {/* Campaign Type */}
                 <Card>
                   <CardHeader>
                     <StepHeader
                       stepNumber={2}
+                      title="Campaign Type"
+                      description="Choose how this campaign should be treated"
+                    />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-3 gap-3">
+                      <button
+                        type="button"
+                        onClick={() => setCampaignType(TemplateType.MARKETING)}
+                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
+                          campaignType === TemplateType.MARKETING
+                            ? 'border-neutral-900 bg-neutral-50'
+                            : 'border-neutral-200 hover:border-neutral-300'
+                        }`}
+                      >
+                        <p className="font-medium text-sm text-neutral-900">Marketing</p>
+                        <p className="text-xs text-neutral-500 mt-1">
+                          Sent to subscribed contacts only. Includes unsubscribe link.
+                        </p>
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setCampaignType(TemplateType.TRANSACTIONAL)}
+                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
+                          campaignType === TemplateType.TRANSACTIONAL
+                            ? 'border-neutral-900 bg-neutral-50'
+                            : 'border-neutral-200 hover:border-neutral-300'
+                        }`}
+                      >
+                        <p className="font-medium text-sm text-neutral-900">Transactional</p>
+                        <p className="text-xs text-neutral-500 mt-1">
+                          Sent to all contacts regardless of subscription status. No unsubscribe footer.
+                        </p>
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setCampaignType(TemplateType.HEADLESS)}
+                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
+                          campaignType === TemplateType.HEADLESS
+                            ? 'border-neutral-900 bg-neutral-50'
+                            : 'border-neutral-200 hover:border-neutral-300'
+                        }`}
+                      >
+                        <p className="font-medium text-sm text-neutral-900">Headless</p>
+                        <p className="text-xs text-neutral-500 mt-1">
+                          Sent to subscribed contacts only. No Plunk footer — you provide the unsubscribe link.
+                        </p>
+                      </button>
+                    </div>
+                    {campaignType === TemplateType.HEADLESS && !detectUnsubscribeSignal(body) && (
+                      <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
+                        <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
+                          <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                          <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                        </div>
+                        <div className="px-3 py-2.5 space-y-2">
+                          <p className="text-xs text-amber-800 leading-relaxed">
+                            You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                          </p>
+                          <div className="flex flex-wrap gap-1.5">
+                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                              {'{{unsubscribeUrl}}'}
+                            </code>
+                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                              {'{{manageUrl}}'}
+                            </code>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* Email Settings */}
+                <Card>
+                  <CardHeader>
+                    <StepHeader
+                      stepNumber={3}
                       title="Email Settings"
                       description="Configure sender information and subject"
                     />
@@ -294,7 +375,7 @@ export default function CreateCampaignPage() {
                 {/* Email Content */}
                 <Card className="overflow-visible">
                   <CardHeader>
-                    <StepHeader stepNumber={3} title="Email Content" description="Design your email message" />
+                    <StepHeader stepNumber={4} title="Email Content" description="Design your email message" />
                   </CardHeader>
                   <CardContent>
                     <div className="space-y-2">
@@ -309,7 +390,7 @@ export default function CreateCampaignPage() {
                 {/* Audience Selection */}
                 <Card>
                   <CardHeader>
-                    <StepHeader stepNumber={4} title="Audience" description="Choose who will receive this campaign" />
+                    <StepHeader stepNumber={5} title="Audience" description="Choose who will receive this campaign" />
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="space-y-2">
@@ -327,8 +408,8 @@ export default function CreateCampaignPage() {
                         <SelectContent>
                           <SelectItemWithDescription
                             value={CampaignAudienceType.ALL}
-                            title="All Subscribed Contacts"
+                            title={campaignType === TemplateType.TRANSACTIONAL ? 'All Contacts' : 'All Subscribed Contacts'}
-                            description="Send to everyone who hasn't unsubscribed"
+                            description={campaignType === TemplateType.TRANSACTIONAL ? 'Send to all contacts regardless of subscription status' : "Send to everyone who hasn't unsubscribed"}
                           />
                           <SelectItemWithDescription
                             value={CampaignAudienceType.SEGMENT}
@@ -388,9 +469,13 @@ export default function CreateCampaignPage() {
                       <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
                         <Users className="h-5 w-5 text-blue-600 mt-0.5" />
                         <div>
-                          <p className="text-sm font-medium text-blue-900">All subscribed contacts</p>
+                          <p className="text-sm font-medium text-blue-900">
+                            {campaignType === TemplateType.TRANSACTIONAL ? 'All contacts' : 'All subscribed contacts'}
+                          </p>
                           <p className="text-xs text-blue-700 mt-1">
-                            This campaign will be sent to all contacts who haven&#39;t unsubscribed
+                            {campaignType === TemplateType.TRANSACTIONAL
+                              ? 'This campaign will be sent to all contacts regardless of subscription status'
+                              : "This campaign will be sent to all contacts who haven't unsubscribed"}
                           </p>
                         </div>
                       </div>
@@ -438,6 +523,13 @@ export default function CreateCampaignPage() {
                         </div>
                       )}
 
+                      <div className="flex justify-between py-2 border-b border-neutral-100">
+                        <span className="text-neutral-500">Type</span>
+                        <span className="font-medium">
+                          {campaignType === TemplateType.MARKETING ? 'Marketing' : campaignType === TemplateType.HEADLESS ? 'Headless' : 'Transactional'}
+                        </span>
+                      </div>
+
                       <div className="flex justify-between py-2 border-b border-neutral-100">
                         <span className="text-neutral-500">Audience</span>
                         <span className="font-medium">

apps/web/src/pages/segments/[id].tsx

@@ -13,7 +13,7 @@ import type {Contact, Segment} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
-import {ArrowLeft, Database, Filter, MailCheck, MailX, RefreshCw, Save, Trash2, Users} from 'lucide-react';
+import {ArrowLeft, Database, Filter, MailCheck, MailX, RefreshCw, Save, Trash2, UserMinus, Users} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
@@ -22,8 +22,12 @@ import useSWR from 'swr';
 import type {FilterCondition} from '@plunk/types';
 import {SegmentSchemas} from '@plunk/shared';
 import {SegmentFilterBuilder} from '../../components/SegmentFilterBuilder';
+import {ContactPicker} from '../../components/ContactPicker';
 import dayjs from 'dayjs';
 
+type SegmentType = 'DYNAMIC' | 'STATIC';
+type SegmentWithType = Segment & {type: SegmentType};
+
 // Count total filters in a condition (recursive)
 function countFilters(condition: FilterCondition): number {
   let count = 0;
@@ -40,11 +44,13 @@ export default function SegmentDetailPage() {
   const router = useRouter();
   const {id} = router.query;
 
-  const {data: segment, mutate, isLoading} = useSWR<Segment>(id ? `/segments/${id}` : null);
+  const {data: segment, mutate, isLoading} = useSWR<SegmentWithType>(id ? `/segments/${id}` : null);
   const [contactsPage, setContactsPage] = useState(1);
-  const {data: contactsData, isLoading: isLoadingContacts} = useSWR<PaginatedResponse<Contact>>(
+  const {
-    id ? `/segments/${id}/contacts?page=${contactsPage}&pageSize=10` : null,
+    data: contactsData,
-  );
+    isLoading: isLoadingContacts,
+    mutate: mutateContacts,
+  } = useSWR<PaginatedResponse<Contact>>(id ? `/segments/${id}/contacts?page=${contactsPage}&pageSize=10` : null);
 
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -57,7 +63,12 @@ export default function SegmentDetailPage() {
   const [isComputing, setIsComputing] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-    useEffect(() => {
+  // Static segment member management
+  const [pickedEmails, setPickedEmails] = useState<string[]>([]);
+  const [isAddingMembers, setIsAddingMembers] = useState(false);
+  const [removingEmail, setRemovingEmail] = useState<string | null>(null);
+
+  useEffect(() => {
     if (segment) {
       setName(segment.name);
       setDescription(segment.description || '');
@@ -79,7 +90,7 @@ export default function SegmentDetailPage() {
       await network.fetch<Segment, typeof SegmentSchemas.update>('PATCH', `/segments/${id}`, {
         name,
         description: description || undefined,
-        condition,
+        ...(segment?.type !== 'STATIC' && {condition}),
         trackMembership,
       });
       toast.success('Segment updated successfully');
@@ -112,6 +123,47 @@ export default function SegmentDetailPage() {
     }
   };
 
+  const handleAddMembers = async () => {
+    if (pickedEmails.length === 0) {
+      toast.error('Select at least one contact');
+      return;
+    }
+
+    setIsAddingMembers(true);
+    try {
+      const result = await network.fetch<{added: number; notFound: string[]}, typeof SegmentSchemas.members>(
+        'POST',
+        `/segments/${id}/members`,
+        {emails: pickedEmails},
+      );
+
+      toast.success(`Added ${result.added} contact${result.added !== 1 ? 's' : ''} to segment`);
+      setPickedEmails([]);
+      void mutate();
+      void mutateContacts();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to add contacts');
+    } finally {
+      setIsAddingMembers(false);
+    }
+  };
+
+  const handleRemoveMember = async (email: string) => {
+    setRemovingEmail(email);
+    try {
+      await network.fetch<{removed: number}, typeof SegmentSchemas.members>('DELETE', `/segments/${id}/members`, {
+        emails: [email],
+      });
+      toast.success(`Removed ${email} from segment`);
+      void mutate();
+      void mutateContacts();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to remove contact');
+    } finally {
+      setRemovingEmail(null);
+    }
+  };
+
   const handleDelete = async () => {
     try {
       await network.fetch('DELETE', `/segments/${id}`);
@@ -166,6 +218,8 @@ export default function SegmentDetailPage() {
     );
   }
 
+  const isStatic = segment.type === 'STATIC';
+
   return (
     <DashboardLayout>
       <div className="space-y-6">
@@ -178,8 +232,17 @@ export default function SegmentDetailPage() {
               </Button>
             </Link>
             <div>
-              <h1 className="text-3xl font-bold text-neutral-900">{segment.name}</h1>
+              <div className="flex items-center gap-2">
-              <p className="text-neutral-500 mt-1">{segment.description}</p>
+                <h1 className="text-3xl font-bold text-neutral-900">{segment.name}</h1>
+                <span
+                  className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                    isStatic ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'
+                  }`}
+                >
+                  {isStatic ? 'Static' : 'Dynamic'}
+                </span>
+              </div>
+              {segment.description && <p className="text-neutral-500 mt-1">{segment.description}</p>}
             </div>
           </div>
           <Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
@@ -244,12 +307,14 @@ export default function SegmentDetailPage() {
                 </CardContent>
               </Card>
 
-              {/* Filter Builder */}
+              {/* Filter Builder (DYNAMIC only) */}
-              <Card>
+              {!isStatic && (
-                <CardContent className="pt-6">
+                <Card>
-                  <SegmentFilterBuilder condition={condition} onChange={setCondition} />
+                  <CardContent className="pt-6">
-                </CardContent>
+                    <SegmentFilterBuilder condition={condition} onChange={setCondition} />
-              </Card>
+                  </CardContent>
+                </Card>
+              )}
 
               {/* Actions */}
               <div className="flex items-center justify-end">
@@ -260,15 +325,44 @@ export default function SegmentDetailPage() {
               </div>
             </form>
 
+            {/* Static member management */}
+            {isStatic && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Add Members</CardTitle>
+                  <CardDescription>Search and select contacts to add to this segment</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <ContactPicker
+                    selected={pickedEmails}
+                    onChange={setPickedEmails}
+                    existing={contactsData?.data.map(c => c.email) ?? []}
+                    placeholder="Search contacts to add..."
+                  />
+                  <Button
+                    type="button"
+                    onClick={handleAddMembers}
+                    disabled={isAddingMembers || pickedEmails.length === 0}
+                  >
+                    {isAddingMembers
+                      ? 'Adding...'
+                      : `Add ${pickedEmails.length > 0 ? pickedEmails.length : ''} Contact${pickedEmails.length !== 1 ? 's' : ''}`}
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+
             {/* Contacts */}
             <Card>
               <CardHeader>
                 <div className="flex items-center justify-between">
                   <div>
-                    <CardTitle>Matching Contacts</CardTitle>
+                    <CardTitle>{isStatic ? 'Members' : 'Matching Contacts'}</CardTitle>
-                    <CardDescription>Contacts that match this segment&apos;s filters</CardDescription>
+                    <CardDescription>
+                      {isStatic ? 'Contacts in this static segment' : "Contacts that match this segment's filters"}
+                    </CardDescription>
                   </div>
-                  {trackMembership && (
+                  {!isStatic && trackMembership && (
                     <Button variant="outline" size="sm" onClick={handleComputeMembership} disabled={isComputing}>
                       <RefreshCw className={`h-4 w-4 ${isComputing ? 'animate-spin' : ''}`} />
                       {isComputing ? 'Computing...' : 'Recompute'}
@@ -284,7 +378,9 @@ export default function SegmentDetailPage() {
                 ) : contactsData?.data.length === 0 ? (
                   <div className="text-center py-8">
                     <Users className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                    <p className="text-neutral-500">No contacts match this segment</p>
+                    <p className="text-neutral-500">
+                      {isStatic ? 'No members in this segment yet' : 'No contacts match this segment'}
+                    </p>
                   </div>
                 ) : (
                   <>
@@ -299,11 +395,24 @@ export default function SegmentDetailPage() {
                             )}
                             <span className="text-sm font-medium">{contact.email}</span>
                           </div>
-                          <Link href={`/contacts/${contact.id}`}>
+                          <div className="flex items-center gap-2">
-                            <Button variant="ghost" size="sm">
+                            <Link href={`/contacts/${contact.id}`}>
-                              View
+                              <Button variant="ghost" size="sm">
-                            </Button>
+                                View
-                          </Link>
+                              </Button>
+                            </Link>
+                            {isStatic && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleRemoveMember(contact.email)}
+                                disabled={removingEmail === contact.email}
+                                className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                              >
+                                <UserMinus className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
                         </div>
                       ))}
                     </div>
@@ -355,24 +464,28 @@ export default function SegmentDetailPage() {
                   <span className="text-2xl font-bold text-neutral-900">{segment.memberCount}</span>
                 </div>
 
-                <div className="flex items-center justify-between">
+                {!isStatic && (
-                  <div className="flex items-center gap-2">
+                  <>
-                    <Filter className="h-4 w-4 text-neutral-500" />
+                    <div className="flex items-center justify-between">
-                    <span className="text-sm text-neutral-600">Filters</span>
+                      <div className="flex items-center gap-2">
-                  </div>
+                        <Filter className="h-4 w-4 text-neutral-500" />
-                  <span className="text-lg font-semibold text-neutral-900">
+                        <span className="text-sm text-neutral-600">Filters</span>
-                    {countFilters(segment.condition as unknown as FilterCondition)}
+                      </div>
-                  </span>
+                      <span className="text-lg font-semibold text-neutral-900">
-                </div>
+                        {countFilters(segment.condition as unknown as FilterCondition)}
-                <div className="flex items-center justify-between">
+                      </span>
-                  <div className="flex items-center gap-2">
+                    </div>
-                    <Filter className="h-4 w-4 text-neutral-500" />
+                    <div className="flex items-center justify-between">
-                    <span className="text-sm text-neutral-600">Groups</span>
+                      <div className="flex items-center gap-2">
-                  </div>
+                        <Filter className="h-4 w-4 text-neutral-500" />
-                  <span className="text-lg font-semibold text-neutral-900">
+                        <span className="text-sm text-neutral-600">Groups</span>
-                    {(segment.condition as unknown as FilterCondition)?.groups?.length || 0}
+                      </div>
-                  </span>
+                      <span className="text-lg font-semibold text-neutral-900">
-                </div>
+                        {(segment.condition as unknown as FilterCondition)?.groups?.length || 0}
+                      </span>
+                    </div>
+                  </>
+                )}
               </CardContent>
             </Card>
 

apps/web/src/pages/segments/index.tsx

@@ -146,7 +146,18 @@ export default function SegmentsPage() {
                   <CardHeader>
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <CardTitle className="text-lg">{segment.name}</CardTitle>
+                        <div className="flex items-center gap-2">
+                          <CardTitle className="text-lg">{segment.name}</CardTitle>
+                          <span
+                            className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
+                              (segment as unknown as {type: string}).type === 'STATIC'
+                                ? 'bg-purple-100 text-purple-700'
+                                : 'bg-blue-100 text-blue-700'
+                            }`}
+                          >
+                            {(segment as unknown as {type: string}).type === 'STATIC' ? 'Static' : 'Dynamic'}
+                          </span>
+                        </div>
                         {segment.description && (
                           <CardDescription className="mt-1">{segment.description}</CardDescription>
                         )}
@@ -170,7 +181,9 @@ export default function SegmentsPage() {
                           <span className="text-sm text-neutral-600">Filters</span>
                         </div>
                         <span className="text-sm font-medium text-neutral-900">
-                          {countFiltersInCondition(segment.condition)}
+                          {(segment as unknown as {type: string}).type === 'STATIC'
+                            ? '—'
+                            : countFiltersInCondition(segment.condition)}
                         </span>
                       </div>
 

apps/web/src/pages/segments/new.tsx

@@ -2,6 +2,7 @@ import {Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input
 import {NextSeo} from 'next-seo';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {SegmentFilterBuilder} from '../../components/SegmentFilterBuilder';
+import {ContactPicker} from '../../components/ContactPicker';
 import {network} from '../../lib/network';
 import {ArrowLeft, Save} from 'lucide-react';
 import Link from 'next/link';
@@ -12,10 +13,13 @@ import type {FilterCondition} from '@plunk/types';
 import type {Segment} from '@plunk/db';
 import {SegmentSchemas} from '@plunk/shared';
 
+type SegmentType = 'DYNAMIC' | 'STATIC';
+
 export default function NewSegmentPage() {
   const router = useRouter();
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [segmentType, setSegmentType] = useState<SegmentType>('DYNAMIC');
   const [trackMembership, setTrackMembership] = useState(false);
   const [condition, setCondition] = useState<FilterCondition>({
     logic: 'AND',
@@ -25,6 +29,7 @@ export default function NewSegmentPage() {
       },
     ],
   });
+  const [selectedContacts, setSelectedContacts] = useState<string[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -32,13 +37,33 @@ export default function NewSegmentPage() {
     setIsSubmitting(true);
 
     try {
-      await network.fetch<Segment, typeof SegmentSchemas.create>('POST', '/segments', {
+      const segment = await network.fetch<Segment, typeof SegmentSchemas.create>('POST', '/segments', {
         name,
         description: description || undefined,
-        condition,
+        type: segmentType,
+        condition: segmentType === 'DYNAMIC' ? condition : undefined,
         trackMembership,
       });
-      toast.success('Segment created successfully');
+
+      // For static segments with pre-selected contacts, add them now
+      if (segmentType === 'STATIC' && selectedContacts.length > 0) {
+        try {
+          const result = await network.fetch<{added: number; notFound: string[]}, typeof SegmentSchemas.members>(
+            'POST',
+            `/segments/${segment.id}/members`,
+            {emails: selectedContacts},
+          );
+          toast.success(
+            `Segment created with ${result.added} contact${result.added !== 1 ? 's' : ''}`,
+          );
+        } catch {
+          // Segment was created; just warn about members
+          toast.warning('Segment created, but some contacts could not be added');
+        }
+      } else {
+        toast.success('Segment created successfully');
+      }
+
       void router.push('/segments');
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Failed to create segment');
@@ -61,10 +86,40 @@ export default function NewSegmentPage() {
             </Link>
             <div>
               <h1 className="text-3xl font-bold text-neutral-900">Create Segment</h1>
-              <p className="text-neutral-500 mt-1">Build complex audience filters with AND/OR logic</p>
+              <p className="text-neutral-500 mt-1">
+                {segmentType === 'DYNAMIC'
+                  ? 'Build complex audience filters with AND/OR logic'
+                  : 'Manually curate a list of contacts'}
+              </p>
             </div>
           </div>
 
+          {/* Type Toggle */}
+          <div className="flex gap-2 p-1 bg-neutral-100 rounded-lg w-fit">
+            <button
+              type="button"
+              onClick={() => setSegmentType('DYNAMIC')}
+              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                segmentType === 'DYNAMIC'
+                  ? 'bg-white text-neutral-900 shadow-sm'
+                  : 'text-neutral-600 hover:text-neutral-900'
+              }`}
+            >
+              Dynamic
+            </button>
+            <button
+              type="button"
+              onClick={() => setSegmentType('STATIC')}
+              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                segmentType === 'STATIC'
+                  ? 'bg-white text-neutral-900 shadow-sm'
+                  : 'text-neutral-600 hover:text-neutral-900'
+              }`}
+            >
+              Static
+            </button>
+          </div>
+
           <form onSubmit={handleSubmit} className="space-y-6">
             {/* Basic Info */}
             <Card>
@@ -118,12 +173,30 @@ export default function NewSegmentPage() {
               </CardContent>
             </Card>
 
-            {/* Filter Builder */}
+            {/* Filter Builder or Contact Picker */}
-            <Card>
+            {segmentType === 'DYNAMIC' ? (
-              <CardContent className="pt-6">
+              <Card>
-                <SegmentFilterBuilder condition={condition} onChange={setCondition} />
+                <CardContent className="pt-6">
-              </CardContent>
+                  <SegmentFilterBuilder condition={condition} onChange={setCondition} />
-            </Card>
+                </CardContent>
+              </Card>
+            ) : (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Initial Members</CardTitle>
+                  <CardDescription>
+                    Optionally add contacts now — you can always add or remove members later
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ContactPicker
+                    selected={selectedContacts}
+                    onChange={setSelectedContacts}
+                    placeholder="Search and select contacts..."
+                  />
+                </CardContent>
+              </Card>
+            )}
 
             {/* Actions */}
             <div className="flex items-center justify-end gap-2">

apps/web/src/pages/templates/[id].tsx

@@ -8,11 +8,6 @@ import {
   ConfirmDialog,
   Input,
   Label,
-  Select,
-  SelectContent,
-  SelectItemWithDescription,
-  SelectTrigger,
-  SelectValue,
   StickySaveBar,
 } from '@plunk/ui';
 import type {Template} from '@plunk/db';
@@ -21,13 +16,13 @@ import {EmailSettings} from '../../components/EmailSettings';
 import {EmailEditor} from '../../components/EmailEditor';
 import {network} from '../../lib/network';
 import {useChangeTracking} from '../../lib/hooks/useChangeTracking';
-import {ArrowLeft, Save, Trash2} from 'lucide-react';
+import {ArrowLeft, Save, Trash2, TriangleAlert} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
 import {toast} from 'sonner';
 import useSWR from 'swr';
-import {TemplateSchemas} from '@plunk/shared';
+import {TemplateSchemas, detectUnsubscribeSignal} from '@plunk/shared';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 
 export default function TemplateEditorPage() {
@@ -221,32 +216,49 @@ export default function TemplateEditorPage() {
                 </div>
 
                 <div>
-                  <Label htmlFor="type">Type *</Label>
+                  <Label>Type *</Label>
-                  <Select
+                  <div className="flex flex-col gap-2 mt-2">
-                    value={editedTemplate.type}
+                    {([
-                    onValueChange={value =>
+                      {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'} ,
-                      setEditedTemplate({...editedTemplate, type: value as 'MARKETING' | 'TRANSACTIONAL'})
+                      {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
-                    }
+                      {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
-                  >
+                    ] as const).map(({value, label, description}) => (
-                    <SelectTrigger id="type">
+                      <button
-                      <SelectValue />
+                        key={value}
-                    </SelectTrigger>
+                        type="button"
-                    <SelectContent>
+                        onClick={() => setEditedTemplate({...editedTemplate, type: value})}
-                      <SelectItemWithDescription
+                        className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
-                        value="MARKETING"
+                          editedTemplate.type === value
-                        title="Marketing"
+                            ? 'border-neutral-900 bg-neutral-50'
-                        description="Includes unsubscribe link, respects opt-out"
+                            : 'border-neutral-200 hover:border-neutral-300'
-                      />
+                        }`}
-                      <SelectItemWithDescription
+                      >
-                        value="TRANSACTIONAL"
+                        <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
-                        title="Transactional"
+                        <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
-                        description="For receipts, alerts - sent regardless of opt-out"
+                      </button>
-                      />
+                    ))}
-                    </SelectContent>
+                  </div>
-                  </Select>
+                  {editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && (
-                  <p className="text-xs text-neutral-500 mt-1">
+                    <div className="mt-2 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
-                    Marketing templates will automatically include a Plunk-hosted unsubscribe link.
+                      <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
-                  </p>
+                        <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                        <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                      </div>
+                      <div className="px-3 py-2.5 space-y-2">
+                        <p className="text-xs text-amber-800 leading-relaxed">
+                          You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                        </p>
+                        <div className="flex flex-wrap gap-1.5">
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{unsubscribeUrl}}'}
+                          </code>
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{manageUrl}}'}
+                          </code>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
                 <div>

apps/web/src/pages/templates/create.tsx

@@ -7,11 +7,6 @@ import {
   CardTitle,
   Input,
   Label,
-  Select,
-  SelectContent,
-  SelectItemWithDescription,
-  SelectTrigger,
-  SelectValue,
 } from '@plunk/ui';
 import {NextSeo} from 'next-seo';
 import {DashboardLayout} from '../../components/DashboardLayout';
@@ -19,12 +14,12 @@ import {EmailSettings} from '../../components/EmailSettings';
 import {EmailEditor} from '../../components/EmailEditor';
 import {network} from '../../lib/network';
 import {EmailFormValidator} from '../../lib/validation';
-import {ArrowLeft, Save} from 'lucide-react';
+import {ArrowLeft, Save, TriangleAlert} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useState} from 'react';
 import {toast} from 'sonner';
-import {TemplateSchemas} from '@plunk/shared';
+import {TemplateSchemas, detectUnsubscribeSignal} from '@plunk/shared';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 
 export default function CreateTemplatePage() {
@@ -37,7 +32,7 @@ export default function CreateTemplatePage() {
   const [from, setFrom] = useState('');
   const [fromName, setFromName] = useState('');
   const [replyTo, setReplyTo] = useState('');
-  const [type, setType] = useState<'MARKETING' | 'TRANSACTIONAL'>('MARKETING');
+  const [type, setType] = useState<'MARKETING' | 'TRANSACTIONAL' | 'HEADLESS'>('MARKETING');
   const [saving, setSaving] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -49,6 +44,7 @@ export default function CreateTemplatePage() {
       return;
     }
 
+
     setSaving(true);
 
     try {
@@ -108,41 +104,64 @@ export default function CreateTemplatePage() {
                 <CardDescription>Configure your template details and email settings</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
-                  <div>
+                  <Label htmlFor="name">Template Name *</Label>
-                    <Label htmlFor="name">Template Name *</Label>
+                  <Input
-                    <Input
+                    id="name"
-                      id="name"
+                    type="text"
-                      type="text"
+                    value={name}
-                      value={name}
+                    onChange={e => setName(e.target.value)}
-                      onChange={e => setName(e.target.value)}
+                    required
-                      required
+                    placeholder="Welcome Email"
-                      placeholder="Welcome Email"
+                  />
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="type">Template Type *</Label>
-                    <Select value={type} onValueChange={value => setType(value as 'MARKETING' | 'TRANSACTIONAL')}>
-                      <SelectTrigger id="type">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItemWithDescription
-                          value="MARKETING"
-                          title="Marketing"
-                          description="Includes unsubscribe link, respects opt-out"
-                        />
-                        <SelectItemWithDescription
-                          value="TRANSACTIONAL"
-                          title="Transactional"
-                          description="For receipts, alerts - sent regardless of opt-out"
-                        />
-                      </SelectContent>
-                    </Select>
-                  </div>
                 </div>
 
+                <div>
+                  <Label>Template Type *</Label>
+                    <div className="flex flex-col gap-2 mt-2">
+                      {([
+                        {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'} ,
+                        {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
+                        {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
+                      ] as const).map(({value, label, description}) => (
+                        <button
+                          key={value}
+                          type="button"
+                          onClick={() => setType(value)}
+                          className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
+                            type === value
+                              ? 'border-neutral-900 bg-neutral-50'
+                              : 'border-neutral-200 hover:border-neutral-300'
+                          }`}
+                        >
+                          <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
+                          <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
+                        </button>
+                      ))}
+                    </div>
+                    {type === 'HEADLESS' && !detectUnsubscribeSignal(body) && (
+                      <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
+                        <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
+                          <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                          <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                        </div>
+                        <div className="px-3 py-2.5 space-y-2">
+                          <p className="text-xs text-amber-800 leading-relaxed">
+                            You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                          </p>
+                          <div className="flex flex-wrap gap-1.5">
+                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                              {'{{unsubscribeUrl}}'}
+                            </code>
+                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                              {'{{manageUrl}}'}
+                            </code>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
                 <div>
                   <Label htmlFor="description">Description</Label>
                   <Input