vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Make guide pages responsive on small screens

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-20 21:03:17 +01:00
parent 35f5275d88
commit 708dc81b88
9 changed files with 276 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/components/CodeBlock.tsx
+5 -3
View File
@@ -27,7 +27,7 @@ export function CodeBlock({code, language = 'javascript', title, showCopy = true
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'group relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-900'} className={'group relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-900 w-full max-w-full'}
> >
{(title || showCopy) && ( {(title || showCopy) && (
<div className={'flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-6 py-3'}> <div className={'flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-6 py-3'}>
@@ -56,8 +56,10 @@ export function CodeBlock({code, language = 'javascript', title, showCopy = true
)} )}
</div> </div>
)} )}
<pre className={'overflow-x-auto p-6 text-neutral-100'}> <pre className={'overflow-x-auto p-6 text-neutral-100 w-full max-w-full'} style={{boxSizing: 'border-box'}}>
<code className={'font-mono text-sm leading-relaxed'}>{code}</code> <code className={'font-mono text-sm leading-relaxed'} style={{whiteSpace: 'pre-wrap', wordBreak: 'break-word'}}>
{code}
</code>
</pre> </pre>
</motion.div> </motion.div>
); );
apps/landing/src/components/guides/GuideLayout.tsx
+36 -13
View File
@@ -114,26 +114,30 @@ export function GuideLayout({
<Navbar /> <Navbar />
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}> <main className={'mx-auto max-w-7xl px-4 sm:px-8 w-full overflow-x-hidden'}>
<div className={'flex gap-12 py-16'}> <div className={'flex flex-col lg:flex-row gap-8 lg:gap-12 py-8 sm:py-16 w-full'}>
{/* Main Content */} {/* Main Content */}
<article className={'flex-1 max-w-4xl'}> <article className={'flex-1 max-w-full lg:max-w-4xl w-full'}>
{/* Breadcrumbs */} {/* Breadcrumbs */}
<nav className={'mb-8'}> <nav className={'mb-6 sm:mb-8 w-full overflow-x-auto'}>
<ol className={'flex items-center gap-2 text-sm text-neutral-600'}> <ol
<li> className={
'flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm text-neutral-600 whitespace-normal'
}
>
<li className={'truncate max-w-[90vw]'}>
<Link href="/" className={'hover:text-neutral-900'}> <Link href="/" className={'hover:text-neutral-900'}>
Home Home
</Link> </Link>
</li> </li>
<li>/</li> <li>/</li>
<li> <li className={'truncate max-w-[90vw]'}>
<Link href="/guides" className={'hover:text-neutral-900'}> <Link href="/guides" className={'hover:text-neutral-900'}>
Guides Guides
</Link> </Link>
</li> </li>
<li>/</li> <li>/</li>
<li className={'text-neutral-900 font-medium'}>{title}</li> <li className={'text-neutral-900 font-medium truncate max-w-[90vw]'}>{title}</li>
</ol> </ol>
</nav> </nav>
@@ -142,12 +146,22 @@ export function GuideLayout({
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
animate={{opacity: 1, y: 0}} animate={{opacity: 1, y: 0}}
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-12'} className={'mb-8 sm:mb-12 w-full'}
> >
<h1 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>{title}</h1> <h1 className={'text-2xl sm:text-4xl font-bold tracking-tight text-neutral-900 break-words max-w-full'}>
<p className={'mt-6 text-lg text-neutral-600 leading-relaxed'}>{description}</p> {title}
</h1>
<p
className={'mt-4 sm:mt-6 text-base sm:text-lg text-neutral-600 leading-relaxed break-words max-w-full'}
>
{description}
</p>
<div className={'mt-8 flex items-center gap-6 text-sm text-neutral-600'}> <div
className={
'mt-6 sm:mt-8 flex flex-wrap items-center gap-4 sm:gap-6 text-xs sm:text-sm text-neutral-600'
}
>
<div className={'flex items-center gap-2'}> <div className={'flex items-center gap-2'}>
<Calendar className="h-4 w-4" /> <Calendar className="h-4 w-4" />
<span> <span>
@@ -167,7 +181,16 @@ export function GuideLayout({
</motion.header> </motion.header>
{/* Content */} {/* Content */}
<div className={'prose prose-neutral max-w-none'}>{children}</div> <div className={'prose prose-neutral max-w-full'} style={{overflowX: 'visible'}}>
{/* Responsive table and code block styles */}
<style>{`
.prose table { display: block; width: 100%; overflow-x: auto; }
.prose th, .prose td { white-space: normal; word-break: break-word; }
.prose pre, .prose code { max-width: 100vw; overflow-x: auto; word-break: break-word; }
.prose img { max-width: 100%; height: auto; }
`}</style>
{children}
</div>
</article> </article>
{/* Table of Contents - Desktop Only */} {/* Table of Contents - Desktop Only */}
apps/landing/src/pages/guides/email-api-guide.tsx
+80 -62
View File
@@ -36,27 +36,31 @@ export default function EmailAPIGuide() {
<div className="grid gap-6 md:grid-cols-2 mb-8"> <div className="grid gap-6 md:grid-cols-2 mb-8">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">SMTP (Traditional)</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">SMTP (Traditional)</h3>
<li>• Direct protocol for sending email</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Requires managing connections</li> <li>• Direct protocol for sending email</li>
<li>• Manual error handling</li> <li>• Requires managing connections</li>
<li>• Limited delivery tracking</li> <li>• Manual error handling</li>
<li>• More complex implementation</li> <li>• Limited delivery tracking</li>
<li>• Port 25, 587, or 465</li> <li>• More complex implementation</li>
</ul> <li>• Port 25, 587, or 465</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Email API (Modern)</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Email API (Modern)</h3>
<li>• HTTP-based RESTful interface</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• No connection management needed</li> <li>• HTTP-based RESTful interface</li>
<li>• Structured error responses</li> <li>• No connection management needed</li>
<li>• Built-in tracking & analytics</li> <li>• Structured error responses</li>
<li>• Simpler to implement</li> <li>• Built-in tracking & analytics</li>
<li>• Standard HTTP/HTTPS</li> <li>• Simpler to implement</li>
</ul> <li>• Standard HTTP/HTTPS</li>
</ul>
</div>
</div> </div>
</div> </div>
@@ -324,53 +328,61 @@ func main() {
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Sending Features</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Sending Features</h3>
<li>• Send individual or batch emails</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• HTML and plain text support</li> <li>• Send individual or batch emails</li>
<li>• Attachments</li> <li>• HTML and plain text support</li>
<li>• CC, BCC recipients</li> <li>• Attachments</li>
<li>• Custom headers</li> <li>• CC, BCC recipients</li>
<li>• Template rendering</li> <li>• Custom headers</li>
<li>• Scheduled sending</li> <li>• Template rendering</li>
</ul> <li>• Scheduled sending</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Tracking & Analytics</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Tracking & Analytics</h3>
<li>• Delivery status tracking</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Open tracking</li> <li>• Delivery status tracking</li>
<li>• Click tracking</li> <li>• Open tracking</li>
<li>• Bounce detection</li> <li>• Click tracking</li>
<li>• Spam complaint monitoring</li> <li>• Bounce detection</li>
<li>• Unsubscribe management</li> <li>• Spam complaint monitoring</li>
<li>• Real-time analytics</li> <li>• Unsubscribe management</li>
</ul> <li>• Real-time analytics</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Webhooks & Events</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Webhooks & Events</h3>
<li>• Delivery notifications</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Bounce notifications</li> <li>• Delivery notifications</li>
<li>• Spam complaint alerts</li> <li>• Bounce notifications</li>
<li>• Unsubscribe events</li> <li>• Spam complaint alerts</li>
<li>• Open and click events</li> <li>• Unsubscribe events</li>
<li>• Custom event triggers</li> <li>• Open and click events</li>
</ul> <li>• Custom event triggers</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Management Features</h3> <div className="w-full max-w-full wrap-break-word">
<ul className="space-y-2 text-sm text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Management Features</h3>
<li>• Suppression list management</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Contact management</li> <li>• Suppression list management</li>
<li>• Domain verification</li> <li>• Contact management</li>
<li>• Template management</li> <li>• Domain verification</li>
<li>• API key management</li> <li>• Template management</li>
<li>• Rate limiting</li> <li>• API key management</li>
</ul> <li>• Rate limiting</li>
</ul>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -581,22 +593,28 @@ func main() {
href="/guides/transactional-vs-marketing-email" href="/guides/transactional-vs-marketing-email"
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg" className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
> >
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Transactional vs Marketing Email</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-sm text-neutral-600">Understand email types for APIs.</p> <h3 className="text-lg font-semibold text-neutral-900 mb-2">Transactional vs Marketing Email</h3>
<p className="text-sm text-neutral-600">Understand email types for APIs.</p>
</div>
</Link> </Link>
<Link <Link
href="/guides/email-deliverability" href="/guides/email-deliverability"
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg" className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
> >
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-sm text-neutral-600">Ensure API-sent emails reach the inbox.</p> <h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
<p className="text-sm text-neutral-600">Ensure API-sent emails reach the inbox.</p>
</div>
</Link> </Link>
<Link <Link
href="/guides/email-sender-reputation" href="/guides/email-sender-reputation"
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg" className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
> >
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-sm text-neutral-600">Maintain good sender reputation.</p> <h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3>
<p className="text-sm text-neutral-600">Maintain good sender reputation.</p>
</div>
</Link> </Link>
</div> </div>
</section> </section>
apps/landing/src/pages/guides/email-bounce-rate.tsx
+8 -8
View File
@@ -213,7 +213,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
1 1
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3> <h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Require new subscribers to confirm their email address by clicking a verification link. This ensures the Require new subscribers to confirm their email address by clicking a verification link. This ensures the
@@ -227,7 +227,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
2 2
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Validate Email Addresses</h3> <h3 className="font-semibold text-neutral-900 mb-2">Validate Email Addresses</h3>
<p className="text-neutral-700 mb-3"> <p className="text-neutral-700 mb-3">
Use real-time email validation on signup forms to catch typos and invalid formats. Validate: Use real-time email validation on signup forms to catch typos and invalid formats. Validate:
@@ -245,7 +245,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
3 3
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Remove Hard Bounces Immediately</h3> <h3 className="font-semibold text-neutral-900 mb-2">Remove Hard Bounces Immediately</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Automate removal of hard bounce addresses from your list. Never send to them again. Continued sending to Automate removal of hard bounce addresses from your list. Never send to them again. Continued sending to
@@ -258,7 +258,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
4 4
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your List Regularly</h3> <h3 className="font-semibold text-neutral-900 mb-2">Clean Your List Regularly</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Remove or re-engage inactive subscribers every 6-12 months. Email addresses become invalid over time Remove or re-engage inactive subscribers every 6-12 months. Email addresses become invalid over time
@@ -271,7 +271,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
5 5
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Never Buy Email Lists</h3> <h3 className="font-semibold text-neutral-900 mb-2">Never Buy Email Lists</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Purchased lists have 20-40% invalid addresses and zero engagement. They'll destroy your bounce rate and Purchased lists have 20-40% invalid addresses and zero engagement. They'll destroy your bounce rate and
@@ -284,7 +284,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
6 6
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Soft Bounces</h3> <h3 className="font-semibold text-neutral-900 mb-2">Monitor Soft Bounces</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Track addresses that repeatedly soft bounce. After 3-5 consecutive soft bounces over multiple campaigns, Track addresses that repeatedly soft bounce. After 3-5 consecutive soft bounces over multiple campaigns,
@@ -297,7 +297,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
7 7
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Email Size</h3> <h3 className="font-semibold text-neutral-900 mb-2">Optimize Email Size</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Keep email size under 100KB to avoid soft bounces from size limits. Compress images, minimize code, and Keep email size under 100KB to avoid soft bounces from size limits. Compress images, minimize code, and
@@ -310,7 +310,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
8 8
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3> <h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Send regularly to maintain list freshness. Long gaps between sends (3+ months) increase bounce rates as Send regularly to maintain list freshness. Long gaps between sends (3+ months) increase bounce rates as
apps/landing/src/pages/guides/email-open-rate.tsx
+8 -8
View File
@@ -220,7 +220,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
1 1
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Write Compelling Subject Lines</h3> <h3 className="font-semibold text-neutral-900 mb-2">Write Compelling Subject Lines</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Test different approaches: questions, personalization, numbers, urgency (without being spammy). Keep Test different approaches: questions, personalization, numbers, urgency (without being spammy). Keep
@@ -233,7 +233,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
2 2
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Personalize Beyond First Names</h3> <h3 className="font-semibold text-neutral-900 mb-2">Personalize Beyond First Names</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Use behavioral data, past purchases, browsing history, or location. "Products you recently viewed" or Use behavioral data, past purchases, browsing history, or location. "Products you recently viewed" or
@@ -246,7 +246,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
3 3
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h3> <h3 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Send targeted emails to specific groups based on engagement level, purchase history, demographics, or Send targeted emails to specific groups based on engagement level, purchase history, demographics, or
@@ -259,7 +259,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
4 4
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Preview Text</h3> <h3 className="font-semibold text-neutral-900 mb-2">Optimize Preview Text</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Preview text appears next to the subject line. Use it to complement your subject, add context, or create Preview text appears next to the subject line. Use it to complement your subject, add context, or create
@@ -272,7 +272,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
5 5
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your Email List Regularly</h3> <h3 className="font-semibold text-neutral-900 mb-2">Clean Your Email List Regularly</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Remove subscribers who haven't engaged in 6-12 months. While this reduces list size, it dramatically Remove subscribers who haven't engaged in 6-12 months. While this reduces list size, it dramatically
@@ -285,7 +285,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
6 6
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Test Send Times</h3> <h3 className="font-semibold text-neutral-900 mb-2">Test Send Times</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Run A/B tests sending the same email at different times. Track when your specific audience is most Run A/B tests sending the same email at different times. Track when your specific audience is most
@@ -298,7 +298,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
7 7
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Re-engage Inactive Subscribers</h3> <h3 className="font-semibold text-neutral-900 mb-2">Re-engage Inactive Subscribers</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Before removing inactive users, send a re-engagement campaign: "We miss you" or "Still interested?" Before removing inactive users, send a re-engagement campaign: "We miss you" or "Still interested?"
@@ -311,7 +311,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
8 8
</div> </div>
<div> <div className="w-full max-w-full break-words">
<h3 className="font-semibold text-neutral-900 mb-2">Use a Recognizable Sender Name</h3> <h3 className="font-semibold text-neutral-900 mb-2">Use a Recognizable Sender Name</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Build consistency with your sender name. People are more likely to open emails from names they Build consistency with your sender name. People are more likely to open emails from names they
apps/landing/src/pages/guides/email-sender-reputation.tsx
+14 -16
View File
@@ -183,7 +183,7 @@ export default function EmailSenderReputation() {
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
1 1
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Warm Up New IPs and Domains</h3> <h3 className="font-semibold text-neutral-900 mb-2">Warm Up New IPs and Domains</h3>
<p className="text-neutral-700 mb-3"> <p className="text-neutral-700 mb-3">
Gradually increase sending volume over 4-8 weeks. Start with your most engaged subscribers. Gradually increase sending volume over 4-8 weeks. Start with your most engaged subscribers.
@@ -210,7 +210,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
2 2
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Start with Highly Engaged Subscribers</h3> <h3 className="font-semibold text-neutral-900 mb-2">Start with Highly Engaged Subscribers</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
During warm-up, send only to subscribers who recently opened or clicked. High engagement in early sends During warm-up, send only to subscribers who recently opened or clicked. High engagement in early sends
@@ -223,7 +223,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
3 3
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Implement Full Authentication</h3> <h3 className="font-semibold text-neutral-900 mb-2">Implement Full Authentication</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Set up SPF, DKIM, and DMARC before sending. Proper authentication is table stakes for building Set up SPF, DKIM, and DMARC before sending. Proper authentication is table stakes for building
@@ -236,7 +236,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
4 4
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3> <h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Send regularly (daily or weekly) rather than sporadic blasts. Consistency builds trust with email Send regularly (daily or weekly) rather than sporadic blasts. Consistency builds trust with email
@@ -249,7 +249,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
5 5
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3> <h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Require email confirmation before adding subscribers. This ensures list quality and prevents spam trap Require email confirmation before adding subscribers. This ensures list quality and prevents spam trap
@@ -262,7 +262,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
6 6
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Metrics Closely</h3> <h3 className="font-semibold text-neutral-900 mb-2">Monitor Metrics Closely</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Track bounce rate, spam complaints, and engagement during warm-up. If metrics degrade, slow down volume Track bounce rate, spam complaints, and engagement during warm-up. If metrics degrade, slow down volume
@@ -275,7 +275,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
7 7
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Provide Immediate Value</h3> <h3 className="font-semibold text-neutral-900 mb-2">Provide Immediate Value</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Your first emails set the tone. Deliver on promises made during signup. High engagement on early emails Your first emails set the tone. Deliver on promises made during signup. High engagement on early emails
@@ -289,9 +289,7 @@ Adjust based on engagement and bounce rates.`}
{/* Maintaining Reputation */} {/* Maintaining Reputation */}
<section id="maintaining" className="mb-12"> <section id="maintaining" className="mb-12">
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Maintaining Good Sender Reputation</h2> <h2 className="text-3xl font-bold text-neutral-900 mb-6">Maintaining Good Sender Reputation</h2>
<p className="text-neutral-700 leading-relaxed mb-6"> <p className="text-neutral-700 leading-relaxed mb-6">Once built, reputation requires ongoing attention:</p>
Once built, reputation requires ongoing attention:
</p>
<div className="space-y-6"> <div className="space-y-6">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
@@ -367,7 +365,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
1 1
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Identify the Root Cause</h3> <h3 className="font-semibold text-amber-900 mb-2">Identify the Root Cause</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Review recent campaigns for spam complaints, high bounces, poor engagement. Check if you're blacklisted. Review recent campaigns for spam complaints, high bounces, poor engagement. Check if you're blacklisted.
@@ -380,7 +378,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
2 2
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Clean Your List Aggressively</h3> <h3 className="font-semibold text-amber-900 mb-2">Clean Your List Aggressively</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Remove all unengaged subscribers, bounced addresses, and anyone who hasn't opened in 6+ months. Yes, Remove all unengaged subscribers, bounced addresses, and anyone who hasn't opened in 6+ months. Yes,
@@ -393,7 +391,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
3 3
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Reduce Volume Temporarily</h3> <h3 className="font-semibold text-amber-900 mb-2">Reduce Volume Temporarily</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Cut sending volume by 50-70% while you fix issues. Send only to highly engaged subscribers. Rebuild Cut sending volume by 50-70% while you fix issues. Send only to highly engaged subscribers. Rebuild
@@ -406,7 +404,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
4 4
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Request Blacklist Removal</h3> <h3 className="font-semibold text-amber-900 mb-2">Request Blacklist Removal</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
If blacklisted, identify which lists, fix the underlying issues, then request delisting. Most blacklists If blacklisted, identify which lists, fix the underlying issues, then request delisting. Most blacklists
@@ -419,7 +417,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
5 5
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Send Valuable, Engaging Content</h3> <h3 className="font-semibold text-amber-900 mb-2">Send Valuable, Engaging Content</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Recovery requires proving you send emails people want. Focus on value, not promotions. High engagement Recovery requires proving you send emails people want. Focus on value, not promotions. High engagement
@@ -432,7 +430,7 @@ Adjust based on engagement and bounce rates.`}
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
6 6
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-amber-900 mb-2">Be Patient</h3> <h3 className="font-semibold text-amber-900 mb-2">Be Patient</h3>
<p className="text-neutral-700"> <p className="text-neutral-700">
Reputation recovery typically takes 4-12 weeks of consistently good behavior. Monitor metrics closely Reputation recovery typically takes 4-12 weeks of consistently good behavior. Monitor metrics closely
apps/landing/src/pages/guides/transactional-vs-marketing-email.tsx
+88 -72
View File
@@ -84,51 +84,59 @@ export default function TransactionalVsMarketingEmail() {
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Transactional Emails</h3> <h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Transactional Emails</h3>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Account & Authentication</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Account & Authentication</h4>
<li>• Welcome emails after signup</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Email verification/confirmation</li> <li>• Welcome emails after signup</li>
<li>• Password reset requests</li> <li>• Email verification/confirmation</li>
<li>• Login notifications</li> <li>• Password reset requests</li>
<li>• Two-factor authentication codes</li> <li>• Login notifications</li>
<li>• Account deletion confirmations</li> <li>• Two-factor authentication codes</li>
</ul> <li>• Account deletion confirmations</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Commerce & Transactions</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Commerce & Transactions</h4>
<li>• Order confirmations</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Shipping notifications</li> <li>• Order confirmations</li>
<li>• Delivery updates</li> <li>• Shipping notifications</li>
<li>• Payment receipts</li> <li>• Delivery updates</li>
<li>• Refund confirmations</li> <li>• Payment receipts</li>
<li>• Invoice emails</li> <li>• Refund confirmations</li>
</ul> <li>• Invoice emails</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Notifications & Alerts</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Notifications & Alerts</h4>
<li>• Activity notifications</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Comment or mention alerts</li> <li>• Activity notifications</li>
<li>• Security alerts</li> <li>• Comment or mention alerts</li>
<li>• System status updates</li> <li>• Security alerts</li>
<li>• Subscription renewals</li> <li>• System status updates</li>
<li>• Trial expiration notices</li> <li>• Subscription renewals</li>
</ul> <li>• Trial expiration notices</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Account Management</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Account Management</h4>
<li>• Billing statements</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Usage reports</li> <li>• Billing statements</li>
<li>• Account updates</li> <li>• Usage reports</li>
<li>• Plan changes</li> <li>• Account updates</li>
<li>• Subscription confirmations</li> <li>• Plan changes</li>
<li>• Account deactivation notices</li> <li>• Subscription confirmations</li>
</ul> <li>• Account deactivation notices</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -215,51 +223,59 @@ export default function TransactionalVsMarketingEmail() {
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Marketing Emails</h3> <h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Marketing Emails</h3>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Promotional Campaigns</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Promotional Campaigns</h4>
<li>• Product announcements</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Sale and discount promotions</li> <li>• Product announcements</li>
<li>• New feature launches</li> <li>• Sale and discount promotions</li>
<li>• Seasonal campaigns</li> <li>• New feature launches</li>
<li>• Limited-time offers</li> <li>• Seasonal campaigns</li>
<li>• Flash sales</li> <li>• Limited-time offers</li>
</ul> <li>• Flash sales</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Content Marketing</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Content Marketing</h4>
<li>• Newsletters</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Blog post roundups</li> <li>• Newsletters</li>
<li>• Educational content</li> <li>• Blog post roundups</li>
<li>• Industry news and trends</li> <li>• Educational content</li>
<li>• Case studies</li> <li>• Industry news and trends</li>
<li>• Webinar invitations</li> <li>• Case studies</li>
</ul> <li>• Webinar invitations</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Nurture & Engagement</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Nurture & Engagement</h4>
<li>• Welcome series (beyond initial welcome)</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Onboarding sequences</li> <li>• Welcome series (beyond initial welcome)</li>
<li>• Re-engagement campaigns</li> <li>• Onboarding sequences</li>
<li>• Win-back emails</li> <li>• Re-engagement campaigns</li>
<li>• Customer surveys</li> <li>• Win-back emails</li>
<li>• Loyalty program updates</li> <li>• Customer surveys</li>
</ul> <li>• Loyalty program updates</li>
</ul>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h4 className="font-semibold text-neutral-900 mb-3">Lifecycle Marketing</h4> <div className="w-full max-w-full break-words">
<ul className="space-y-2 text-sm text-neutral-700"> <h4 className="font-semibold text-neutral-900 mb-3">Lifecycle Marketing</h4>
<li>• Abandoned cart reminders</li> <ul className="space-y-2 text-sm text-neutral-700">
<li>• Product recommendations</li> <li>• Abandoned cart reminders</li>
<li>• Upsell/cross-sell campaigns</li> <li>• Product recommendations</li>
<li>• Birthday or anniversary emails</li> <li>• Upsell/cross-sell campaigns</li>
<li>• Renewal reminders (if promotional)</li> <li>• Birthday or anniversary emails</li>
<li>• Review requests</li> <li>• Renewal reminders (if promotional)</li>
</ul> <li>• Review requests</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
apps/landing/src/pages/guides/what-is-dkim.tsx
+35 -25
View File
@@ -81,16 +81,18 @@ export default function WhatIsDKIM() {
A DKIM record is a TXT record in your DNS that contains your public key. Here's an example: A DKIM record is a TXT record in your DNS that contains your public key. Here's an example:
</p> </p>
<CodeBlock <div className="w-full max-w-full overflow-x-auto">
language="dns" <CodeBlock
title="Example DKIM DNS Record" language="dns"
code={`default._domainkey.yourdomain.com IN TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3QEKyU1fSma0axspqYK5iAj+54lsAg4qRRCnpKK68hawSJfliq9vKD6czJ..." title="Example DKIM DNS Record"
code={`default._domainkey.yourdomain.com IN TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3QEKyU1fSma0axspqYK5iAj+54lsAg4qRRCnpKK68hawSJfliq9vKD6czJ..."
# Breaking down the components: # Breaking down the components:
# v=DKIM1 -> DKIM version # v=DKIM1 -> DKIM version
# k=rsa -> Key type (RSA encryption) # k=rsa -> Key type (RSA encryption)
# p=MIGfMA0... -> Public key (base64 encoded)`} # p=MIGfMA0... -> Public key (base64 encoded)`}
/> />
</div>
<InfoBox type="info" title="Selector Names"> <InfoBox type="info" title="Selector Names">
<p> <p>
@@ -106,35 +108,43 @@ export default function WhatIsDKIM() {
<div className="grid gap-6 md:grid-cols-2 mb-8"> <div className="grid gap-6 md:grid-cols-2 mb-8">
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3>
DKIM makes it nearly impossible for spammers to forge emails from your domain. The cryptographic signature <p className="text-neutral-700">
can't be replicated without your private key. DKIM makes it nearly impossible for spammers to forge emails from your domain. The cryptographic
</p> signature can't be replicated without your private key.
</p>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3>
Major email providers (Gmail, Outlook, Yahoo) use DKIM as a trust signal. Emails with valid DKIM <p className="text-neutral-700">
signatures are more likely to reach the inbox. Major email providers (Gmail, Outlook, Yahoo) use DKIM as a trust signal. Emails with valid DKIM
</p> signatures are more likely to reach the inbox.
</p>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Brand Reputation</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Brand Reputation</h3>
By preventing domain spoofing, DKIM protects your brand from being used in phishing attacks that could <p className="text-neutral-700">
damage your reputation. By preventing domain spoofing, DKIM protects your brand from being used in phishing attacks that could
</p> damage your reputation.
</p>
</div>
</div> </div>
<div className="rounded-xl border border-neutral-200 bg-white p-6"> <div className="rounded-xl border border-neutral-200 bg-white p-6">
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Enables DMARC</h3> <div className="w-full max-w-full wrap-break-word">
<p className="text-neutral-700"> <h3 className="text-lg font-semibold text-neutral-900 mb-3">Enables DMARC</h3>
DKIM is a prerequisite for implementing DMARC, which provides even stronger email authentication and <p className="text-neutral-700">
reporting capabilities. DKIM is a prerequisite for implementing DMARC, which provides even stronger email authentication and
</p> reporting capabilities.
</p>
</div>
</div> </div>
</div> </div>
apps/landing/src/pages/guides/what-is-spf.tsx
+2 -5
View File
@@ -207,15 +207,12 @@ export default function WhatIsSPF() {
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
2 2
</div> </div>
<div> <div className="w-full max-w-full wrap-break-word">
<h3 className="font-semibold text-neutral-900 mb-2">Gather SPF Include Values</h3> <h3 className="font-semibold text-neutral-900 mb-2">Gather SPF Include Values</h3>
<p className="text-neutral-700 mb-3">Each email service provides SPF values to include. For example:</p> <p className="text-neutral-700 mb-3">Each email service provides SPF values to include. For example:</p>
<CodeBlock <CodeBlock
language="text" language="text"
code={`Google Workspace: include:_spf.google.com code={`Google Workspace: include:_spf.google.com\nMicrosoft 365: include:spf.protection.outlook.com\nPlunk: include:spf.useplunk.com\nSendGrid: include:sendgrid.net`}
Microsoft 365: include:spf.protection.outlook.com
Plunk: include:spf.useplunk.com
SendGrid: include:sendgrid.net`}
showCopy={false} showCopy={false}
/> />
</div> </div>