infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

ui: Polish details

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-19 09:03:50 +02:00
parent 6fdc29fc0f
commit 19ea8b0122
35 changed files with 478 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/pages/guides/email-api-guide.tsx
+11 -11
View File
@@ -78,7 +78,7 @@ export default function EmailAPIGuide() {
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How Email APIs Work</h2>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Authentication</h3>
<p className="text-neutral-700">
You authenticate requests using an API key (usually passed in headers). This identifies your account and
@@ -86,14 +86,14 @@ export default function EmailAPIGuide() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Make HTTP Request</h3>
<p className="text-neutral-700">
Send a POST request to the API endpoint with email details (recipient, subject, body, etc.) as JSON.
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. API Validates & Queues</h3>
<p className="text-neutral-700">
The API validates your request, queues the email for delivery, and returns a response with the email ID
@@ -101,14 +101,14 @@ export default function EmailAPIGuide() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Delivery</h3>
<p className="text-neutral-700">
The service handles SMTP connections, retry logic, and delivery to the recipient's mail server.
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Webhooks & Tracking</h3>
<p className="text-neutral-700">
You receive webhook notifications for delivery events (delivered, bounced, opened, clicked) and can query
@@ -535,7 +535,7 @@ func main() {
</p>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Deliverability Reputation</h3>
<p className="text-neutral-700">
Choose providers with strong deliverability rates and sender reputation. Poor deliverability means your
@@ -543,7 +543,7 @@ func main() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Feature Set</h3>
<p className="text-neutral-700">
Ensure the API supports your needs: templates, webhooks, analytics, scheduling, attachments, etc. Some
@@ -551,7 +551,7 @@ func main() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Pricing Model</h3>
<p className="text-neutral-700">
Understand pricing: per-email charges, monthly tiers, overage fees. Calculate costs for your expected
@@ -559,7 +559,7 @@ func main() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Developer Experience</h3>
<p className="text-neutral-700">
Good documentation, SDKs in your language, clear error messages, and responsive support make
@@ -567,7 +567,7 @@ func main() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Scalability & Reliability</h3>
<p className="text-neutral-700">
Can the provider handle your peak volumes? What's their uptime guarantee (SLA)? Do they have redundancy
@@ -575,7 +575,7 @@ func main() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">Compliance & Security</h3>
<p className="text-neutral-700">
Ensure the provider complies with GDPR, CAN-SPAM, and other relevant regulations. Check their security
apps/landing/src/pages/guides/email-click-through-rate.tsx
+11 -11
View File
@@ -141,7 +141,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Click-Through Rates?</h2>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Call-to-Action (CTA) Design</h3>
<p className="text-neutral-700">
Your CTA's design, placement, and copy directly impact clicks. Clear, prominent, action-oriented CTAs
@@ -149,7 +149,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Relevance</h3>
<p className="text-neutral-700">
Targeted, personalized content generates 2-3x higher CTR than generic blasts. Segmentation and
@@ -157,7 +157,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Value Proposition</h3>
<p className="text-neutral-700">
Recipients need a clear reason to click. Compelling value propositions—exclusive content, limited offers,
@@ -165,7 +165,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Mobile Optimization</h3>
<p className="text-neutral-700">
60%+ of emails are read on mobile. Unoptimized emails with small links or poorly formatted content see 50%
@@ -173,7 +173,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Content Scannability</h3>
<p className="text-neutral-700">
Most people skim emails. Clear structure with headers, bullet points, and whitespace helps readers find
@@ -181,7 +181,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Number of CTAs</h3>
<p className="text-neutral-700">
More CTAs = divided attention. Emails with one primary CTA convert 371% better than those with multiple
@@ -402,14 +402,14 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common CTR Mistakes to Avoid</h2>
<div className="space-y-6">
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Too Many CTAs</h3>
<p className="text-neutral-700">
Multiple competing CTAs confuse readers and reduce overall clicks. Focus on one primary action per email.
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Vague CTA Copy</h3>
<p className="text-neutral-700">
"Click here" and "Learn more" don't communicate value. Be specific: "Download free guide" or "Start 14-day
@@ -417,7 +417,7 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Image-Only CTAs</h3>
<p className="text-neutral-700">
Many email clients block images by default. If your CTA is an image, users won't see it. Use HTML buttons
@@ -425,14 +425,14 @@ CTOR = (294 ÷ 2,450) × 100 = 12.0%`}
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Small, Hard-to-Tap Links</h3>
<p className="text-neutral-700">
Tiny text links are difficult to tap on mobile. Use large buttons (minimum 44x44px) for easy tapping.
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ No Clear Value Proposition</h3>
<p className="text-neutral-700">
Readers won't click if they don't know why they should. Clearly communicate the benefit of clicking before
apps/landing/src/pages/guides/email-deliverability.tsx
+5 -5
View File
@@ -71,7 +71,7 @@ export default function EmailDeliverability() {
</p>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Sender Reputation</h3>
<p className="text-neutral-700">
Email providers track your sending behavior over time. High engagement rates, low spam complaints, and few
@@ -79,7 +79,7 @@ export default function EmailDeliverability() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Email Authentication</h3>
<p className="text-neutral-700">
SPF, DKIM, and DMARC authenticate your emails and prove they're legitimate. Without proper authentication,
@@ -87,7 +87,7 @@ export default function EmailDeliverability() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Email Content</h3>
<p className="text-neutral-700">
Spam filters analyze your subject lines, body content, links, and images. Spammy language, excessive
@@ -95,7 +95,7 @@ export default function EmailDeliverability() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Engagement</h3>
<p className="text-neutral-700">
Sending to engaged subscribers who want your emails is crucial. High open rates and clicks signal quality.
@@ -103,7 +103,7 @@ export default function EmailDeliverability() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Technical Infrastructure</h3>
<p className="text-neutral-700">
Your sending IP address, domain reputation, and email infrastructure affect how providers perceive your
apps/landing/src/pages/guides/email-marketing-best-practices.tsx
+8 -8
View File
@@ -107,7 +107,7 @@ export default function EmailMarketingBestPractices() {
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Email Content Best Practices</h2>
<div className="space-y-6 mb-8">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Craft Compelling Subject Lines</h3>
<p className="text-neutral-700 mb-3">
Your subject line determines whether emails get opened. Keep them under 50 characters, create curiosity,
@@ -125,7 +125,7 @@ export default function EmailMarketingBestPractices() {
</div>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Personalize Beyond First Names</h3>
<p className="text-neutral-700">
Use behavioral data, purchase history, browsing activity, or preferences. Personalized emails deliver 6x
@@ -133,7 +133,7 @@ export default function EmailMarketingBestPractices() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Focus on One Primary Goal</h3>
<p className="text-neutral-700">
Each email should have one clear call-to-action (CTA). Multiple CTAs confuse readers and reduce conversion
@@ -141,7 +141,7 @@ export default function EmailMarketingBestPractices() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Write Scannable Content</h3>
<p className="text-neutral-700 mb-3">Most people skim emails. Structure content for easy scanning:</p>
<ul className="list-disc list-inside space-y-1 text-neutral-700">
@@ -153,7 +153,7 @@ export default function EmailMarketingBestPractices() {
</ul>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Create Compelling CTAs</h3>
<p className="text-neutral-700 mb-3">Effective CTAs are:</p>
<ul className="list-disc list-inside space-y-1 text-neutral-700">
@@ -172,7 +172,7 @@ export default function EmailMarketingBestPractices() {
</ul>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Provide Real Value</h3>
<p className="text-neutral-700">
Every email should benefit the reader. Share insights, solve problems, offer exclusive content, or provide
@@ -361,7 +361,7 @@ export default function EmailMarketingBestPractices() {
</p>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">What to A/B Test</h3>
<ul className="space-y-2 text-neutral-700">
<li>
@@ -385,7 +385,7 @@ export default function EmailMarketingBestPractices() {
</ul>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">A/B Testing Best Practices</h3>
<ul className="space-y-2 text-neutral-700">
<li>• Test one variable at a time for clear results</li>
apps/landing/src/pages/guides/email-open-rate.tsx
+7 -7
View File
@@ -131,7 +131,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Email Open Rates?</h2>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Subject Line</h3>
<p className="text-neutral-700 mb-3">
Your subject line is the #1 factor. It must be compelling, relevant, and create curiosity without being
@@ -161,7 +161,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</div>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Sender Name</h3>
<p className="text-neutral-700">
Recipients decide whether to open based on who it's from. Use a recognizable name—either your brand or a
@@ -169,7 +169,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Send Time & Day</h3>
<p className="text-neutral-700">
Timing impacts visibility. B2B emails typically perform best Tuesday-Thursday, 10am-2pm. B2C varies more
@@ -177,7 +177,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. List Quality & Segmentation</h3>
<p className="text-neutral-700">
Engaged subscribers open more. Segmenting by behavior, interests, or demographics ensures relevance.
@@ -185,7 +185,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Deliverability & Sender Reputation</h3>
<p className="text-neutral-700">
If emails land in spam, they won't be opened. Maintain good sender reputation through proper
@@ -193,7 +193,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Email Frequency</h3>
<p className="text-neutral-700">
Too frequent leads to fatigue and unsubscribes. Too infrequent and subscribers forget you. Find the sweet
@@ -201,7 +201,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Mobile Optimization</h3>
<p className="text-neutral-700">
60%+ of emails are opened on mobile. Use short subject lines (40-50 characters), clear preview text, and
apps/landing/src/pages/guides/email-sender-reputation.tsx
+9 -9
View File
@@ -70,7 +70,7 @@ export default function EmailSenderReputation() {
<h2 className="text-3xl font-bold text-neutral-900 mb-6">What Affects Sender Reputation?</h2>
<div className="space-y-6">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Spam Complaint Rate</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Critical.</strong> When recipients mark your emails as spam, it severely damages
@@ -81,7 +81,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Engagement Metrics</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Very High.</strong> Email providers track opens, clicks, replies, forwards, and deletes.
@@ -92,7 +92,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Bounce Rate</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: High.</strong> High bounce rates (especially hard bounces) indicate poor list hygiene,
@@ -103,7 +103,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Email Authentication</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: High.</strong> Proper SPF, DKIM, and DMARC authentication proves your emails are
@@ -114,7 +114,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">5. Spam Trap Hits</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Critical.</strong> Spam traps are email addresses used to catch senders with poor
@@ -125,7 +125,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">6. Sending Volume & Consistency</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Moderate.</strong> Sudden spikes in volume look suspicious. Inconsistent sending (long
@@ -136,7 +136,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">7. Content Quality</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Moderate.</strong> Spammy content (excessive links, misleading subject lines, all caps)
@@ -147,7 +147,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">8. Blacklist Status</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Critical.</strong> Being listed on major blacklists (Spamhaus, Barracuda, SURBL) can block
@@ -158,7 +158,7 @@ export default function EmailSenderReputation() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">9. Sending History</h3>
<p className="text-neutral-700 mb-3">
<strong>Impact: Cumulative.</strong> Reputation is built over time. New domains/IPs have no history (zero
apps/landing/src/pages/guides/index.tsx
+59 -58
View File
@@ -94,7 +94,13 @@ const guides: Guide[] = [
},
];
const badgeOrder = ['Authentication', 'Deliverability', 'Analytics', 'Technical', 'Best Practices', 'Fundamentals'];
export default function GuidesIndex() {
const categories = badgeOrder
.map(name => ({name, guides: guides.filter(g => g.badge === name)}))
.filter(c => c.guides.length > 0);
return (
<>
<NextSeo
@@ -165,68 +171,63 @@ export default function GuidesIndex() {
</div>
</section>
{/* Guides grid */}
{/* Guides - Categorized */}
<section className={'border-t border-neutral-200'}>
<div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
<motion.div
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16'}
>
<h2
style={{fontFamily: 'var(--font-display)'}}
className={'text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'}
>
Browse all guides
</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to master email</p>
</motion.div>
<div className={'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'}>
{guides.map((guide, index) => {
const Icon = guide.icon;
return (
<motion.div
key={guide.href}
initial={{opacity: 0, y: 16}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: index * 0.04, ease: [0.22, 1, 0.36, 1]}}
>
<Link
href={guide.href}
className={
'group flex min-h-[16rem] flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
}
<div className={'space-y-16'}>
{categories.map((category, catIndex) => (
<motion.div
key={category.name}
initial={{opacity: 0, y: 16}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.6, delay: catIndex * 0.06, ease: [0.22, 1, 0.36, 1]}}
>
<div className={'mb-6 flex items-center gap-4'}>
<span
style={{fontFamily: 'var(--font-mono)'}}
className={'shrink-0 text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
>
<div className={'flex items-start justify-between'}>
<div className={'text-neutral-900'}>
<Icon className="h-6 w-6" strokeWidth={1.5} />
</div>
{guide.badge && (
<span
style={{fontFamily: 'var(--font-mono)'}}
className={'text-[11px] uppercase tracking-[0.18em] text-neutral-400'}
>
{guide.badge}
</span>
)}
</div>
<div>
<h3
style={{fontFamily: 'var(--font-display)'}}
className={'mt-8 text-xl font-bold tracking-[-0.02em] text-neutral-900'}
{category.name}
</span>
<div className={'h-px flex-1 bg-neutral-200'} />
</div>
<div className={'divide-y divide-neutral-100'}>
{category.guides.map(guide => {
const Icon = guide.icon;
return (
<Link
key={guide.href}
href={guide.href}
className={
'group -mx-4 flex items-center gap-5 rounded-lg px-4 py-5 transition hover:bg-neutral-50 sm:gap-6'
}
>
{guide.title}
</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{guide.description}</p>
</div>
</Link>
</motion.div>
);
})}
<Icon
className={'h-5 w-5 shrink-0 text-neutral-400 transition group-hover:text-neutral-600'}
strokeWidth={1.5}
/>
<div className={'min-w-0 flex-1'}>
<h3
style={{fontFamily: 'var(--font-display)'}}
className={'font-bold tracking-[-0.01em] text-neutral-900'}
>
{guide.title}
</h3>
<p className={'mt-0.5 truncate text-sm text-neutral-500'}>{guide.description}</p>
</div>
<ArrowRight
className={
'h-4 w-4 shrink-0 text-neutral-300 transition-transform group-hover:translate-x-0.5 group-hover:text-neutral-600'
}
/>
</Link>
);
})}
</div>
</motion.div>
))}
</div>
</div>
</section>
apps/landing/src/pages/guides/what-is-dkim.tsx
+10 -10
View File
@@ -33,7 +33,7 @@ export default function WhatIsDKIM() {
</p>
<div className="space-y-6 mb-8">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. The Sending Server Signs the Email</h3>
<p className="text-neutral-700">
When you send an email, your email server adds a DKIM signature to the email header. This signature is
@@ -41,7 +41,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. The Signature is Added to Headers</h3>
<p className="text-neutral-700">
The DKIM signature includes a hash of specific email components (like the subject, body, and sender) and
@@ -49,7 +49,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Verifies</h3>
<p className="text-neutral-700">
When the email arrives, the receiving server looks up your domain's public DKIM key in DNS, then uses it
@@ -57,7 +57,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Delivery Decision</h3>
<p className="text-neutral-700">
Passing DKIM verification improves your sender reputation and deliverability. Failing or missing DKIM may
@@ -252,7 +252,7 @@ export default function WhatIsDKIM() {
<h2 className="text-3xl font-bold text-neutral-900 mb-6">DKIM Best Practices</h2>
<div className="space-y-6">
<div className="border-l-4 border-green-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Use 2048-bit Keys</h3>
<p className="text-neutral-700">
While 1024-bit keys still work, 2048-bit keys provide better security and are recommended by Gmail and
@@ -260,7 +260,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-green-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Implement SPF and DMARC Too</h3>
<p className="text-neutral-700">
DKIM works best when combined with SPF and DMARC for comprehensive email authentication. Use all three for
@@ -268,7 +268,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-green-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Monitor DKIM Status</h3>
<p className="text-neutral-700">
Regularly check that your DKIM signatures are passing. Most email platforms provide authentication
@@ -276,7 +276,7 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-green-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✓ Rotate Keys Periodically</h3>
<p className="text-neutral-700">
For enhanced security, rotate your DKIM keys every 6-12 months. Plan key rotation carefully to avoid
@@ -284,14 +284,14 @@ export default function WhatIsDKIM() {
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Share Private Keys</h3>
<p className="text-neutral-700">
Your DKIM private key should never be shared or stored insecurely. Treat it like a password.
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Don't Use the Same Key Across Domains</h3>
<p className="text-neutral-700">
Each domain should have its own unique DKIM key pair for security and proper authentication.
apps/landing/src/pages/guides/what-is-dmarc.tsx
+4 -4
View File
@@ -32,7 +32,7 @@ export default function WhatIsDMARC() {
</p>
<div className="space-y-6 mb-8">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. Email Authentication</h3>
<p className="text-neutral-700">
When an email is received, the server first checks SPF and DKIM authentication. At least one of these must
@@ -40,7 +40,7 @@ export default function WhatIsDMARC() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. Alignment Check</h3>
<p className="text-neutral-700">
DMARC checks if the domain in the "From" header aligns with the domain that passed SPF or DKIM. This is
@@ -48,7 +48,7 @@ export default function WhatIsDMARC() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. Policy Application</h3>
<p className="text-neutral-700">
If authentication and alignment pass, the email is delivered. If they fail, the receiving server follows
@@ -56,7 +56,7 @@ export default function WhatIsDMARC() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Reporting</h3>
<p className="text-neutral-700">
Receiving servers send daily reports to your specified email address, showing authentication results for
apps/landing/src/pages/guides/what-is-spf.tsx
+8 -8
View File
@@ -32,7 +32,7 @@ export default function WhatIsSPF() {
</p>
<div className="space-y-6 mb-8">
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. You Publish an SPF Record</h3>
<p className="text-neutral-700">
You add a TXT record to your domain's DNS that lists all IP addresses and services authorized to send
@@ -40,7 +40,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. An Email is Sent</h3>
<p className="text-neutral-700">
When someone sends an email claiming to be from your domain, the receiving server notes the IP address of
@@ -48,7 +48,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Checks SPF</h3>
<p className="text-neutral-700">
The receiving server looks up your domain's SPF record in DNS and checks if the sending server's IP
@@ -56,7 +56,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-neutral-900 pl-6">
<div className="">
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Pass or Fail</h3>
<p className="text-neutral-700">
If the IP matches, SPF passes. If not, SPF fails and the email may be flagged as spam or rejected,
@@ -268,7 +268,7 @@ export default function WhatIsSPF() {
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common SPF Mistakes to Avoid</h2>
<div className="space-y-6">
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Multiple SPF Records</h3>
<p className="text-neutral-700">
Never create multiple SPF TXT records. You can only have ONE SPF record per domain. Combine all authorized
@@ -276,7 +276,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Exceeding 10 DNS Lookups</h3>
<p className="text-neutral-700">
Each <code>include:</code> mechanism counts toward the 10 lookup limit. Too many includes will cause SPF
@@ -284,7 +284,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Forgetting to Update SPF</h3>
<p className="text-neutral-700">
When you add new email services, remember to update your SPF record. Outdated SPF records cause legitimate
@@ -292,7 +292,7 @@ export default function WhatIsSPF() {
</p>
</div>
<div className="border-l-4 border-red-500 pl-6 py-2">
<div className="py-2">
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Using +all</h3>
<p className="text-neutral-700">
Never use <code>+all</code> (pass all). This completely defeats the purpose of SPF by allowing anyone to