Skip to content

Commit e9059f3

Browse files
griffinkellygriffinkelly
authored
SDK Email use case pages and blog (#95)
1 parent 619d240 commit e9059f3

5 files changed

Lines changed: 587 additions & 9 deletions

File tree

‎public/assets/blog/sdk-users/sdkusers.webp‎

88.2 KB
Loading

‎src/app/sdk/email/page.tsx‎

Lines changed: 384 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,384 @@
1+
"use client";
2+
3+
import cn from "classnames";
4+
import HeaderStandalone from "../../ai/header";
5+
import FooterStandalone from "../../ai/footer";
6+
import urls from "@/lib/urls";
7+
8+
const clsFullWhite = "!brightness-0 !invert";
9+
const clsSmallLogo = "!h-[40px]";
10+
11+
const customers = [
12+
{
13+
src: "/assets/images/external-logos/bytedance.png",
14+
alt: "ByteDance",
15+
className: cn(clsFullWhite, clsSmallLogo),
16+
},
17+
{
18+
src: "/assets/images/external-logos/microsoft.png",
19+
alt: "Microsoft",
20+
className: clsFullWhite,
21+
},
22+
{
23+
src: "/assets/images/external-logos/gainsight.png",
24+
alt: "Gainsight",
25+
className: cn(clsFullWhite, clsSmallLogo),
26+
},
27+
{
28+
src: "/assets/images/external-logos/bbc.png",
29+
alt: "BBC",
30+
className: clsFullWhite,
31+
},
32+
{
33+
src: "/assets/images/external-logos/braze.png",
34+
alt: "Braze",
35+
className: clsFullWhite,
36+
},
37+
{
38+
src: "/assets/images/external-logos/phresia.png",
39+
alt: "Phresia",
40+
className: clsFullWhite,
41+
},
42+
];
43+
44+
const benefits = [
45+
{
46+
title: "Security First",
47+
description: "Keep all email data in-house. No third-party database access. No vendor lock-in. Complete control over sensitive information.",
48+
details: [
49+
"Self-hosted data and assets",
50+
"No external service dependencies",
51+
"Compliance-ready architecture",
52+
"Zero vendor security risks"
53+
]
54+
},
55+
{
56+
title: "Unlimited Scalability",
57+
description: "Front-end architecture means no backend bottlenecks. Scale to millions of users without infrastructure constraints.",
58+
details: [
59+
"Client-side processing",
60+
"Horizontal scaling built-in",
61+
"No email service provider limits",
62+
"Global performance"
63+
]
64+
},
65+
{
66+
title: "Complete Flexibility",
67+
description: "GrapesJS is a framework, not a platform. Customize every aspect to match your brand and workflows.",
68+
details: [
69+
"Full UI customization",
70+
"Custom components and plugins",
71+
"Framework API access",
72+
"Integrate with any backend"
73+
]
74+
}
75+
];
76+
77+
const problems = [
78+
{
79+
title: "Vendor Lock-In",
80+
description: "Traditional email platforms like Mailchimp, Klaviyo, and Constant Contact require you to store all your email content, customer data, and templates on their servers. This creates dependency and limits your flexibility."
81+
},
82+
{
83+
title: "Data Security Risks",
84+
description: "Sending sensitive email content through third-party services means your data passes through external infrastructure. This raises compliance concerns and security risks."
85+
},
86+
{
87+
title: "Limited Customization",
88+
description: "Closed platforms force you into their UI, workflows, and limitations. You can't fully customize the experience to match your brand or integrate with your existing systems."
89+
},
90+
{
91+
title: "Scaling Constraints",
92+
description: "Third-party email services have usage limits, API rate limits, and infrastructure constraints that can limit your growth and increase costs as you scale."
93+
}
94+
];
95+
96+
export default function EmailSDKPage() {
97+
return (
98+
<div className="min-h-screen flex flex-col bg-black text-white">
99+
<HeaderStandalone />
100+
<main className="flex-1">
101+
{/* Hero Section */}
102+
<section className="relative py-20 px-8 max-sm:px-4 bg-gradient-to-b from-black via-black to-gray-900">
103+
<div className="max-w-5xl mx-auto text-center">
104+
<h1 className="text-5xl md:text-6xl font-bold mb-6 text-white">
105+
Build Secure Email Editors
106+
<br />
107+
<span className="text-violet-400">Without Vendor Lock-In</span>
108+
</h1>
109+
<h2 className="text-xl md:text-2xl text-gray-300 font-light mb-8 max-w-3xl mx-auto">
110+
Keep your email data in-house. Scale without limits. Customize everything.
111+
The Grapes Studio SDK gives you enterprise-grade email editing without sharing sensitive data with third parties.
112+
</h2>
113+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-12">
114+
<a
115+
href={urls.getSdkLicensesUrl({ ref: "emailHeroCta" })}
116+
className="inline-block px-8 py-4 bg-violet-600 text-white font-semibold rounded-lg hover:bg-violet-700 transition-colors duration-200 text-lg"
117+
>
118+
Get Started for Free
119+
</a>
120+
<a
121+
href={urls.getGettingStartedDocsUrl()}
122+
className="inline-block px-8 py-4 border-2 border-gray-600 text-gray-100 font-semibold rounded-lg hover:border-gray-500 hover:bg-gray-900 transition-colors duration-200 text-lg"
123+
>
124+
View Documentation
125+
</a>
126+
</div>
127+
<div className="mt-16 max-w-6xl mx-auto">
128+
<img
129+
src="/assets/images/newsletterplain.webp"
130+
alt="Grapes Studio SDK Email Editor"
131+
className="w-full rounded-lg shadow-2xl"
132+
/>
133+
</div>
134+
</div>
135+
</section>
136+
137+
{/* Customer Banner */}
138+
<section className="py-16 px-8 max-sm:px-4 bg-gray-900/50 border-y border-gray-700">
139+
<div className="max-w-6xl mx-auto">
140+
<div className="text-center mb-12">
141+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-300 mb-2">
142+
POWERING SOLUTIONS FOR
143+
</h2>
144+
<hr className="w-24 h-0.5 bg-violet-500 mx-auto" />
145+
</div>
146+
<div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">
147+
{customers.map(({ src, alt, className }) => (
148+
<div
149+
key={alt}
150+
className="flex items-center justify-center h-12 md:h-16 opacity-70 hover:opacity-100 transition-opacity"
151+
>
152+
<img
153+
src={src}
154+
alt={alt}
155+
onError={(e) => {
156+
const target = e.target as HTMLImageElement;
157+
target.style.display = 'none';
158+
const parent = target.parentElement;
159+
if (parent) {
160+
parent.innerHTML = `<div class="text-gray-400 text-sm font-semibold">${alt}</div>`;
161+
}
162+
}}
163+
className={cn("max-h-full max-w-[120px] object-contain", className)}
164+
/>
165+
</div>
166+
))}
167+
</div>
168+
</div>
169+
</section>
170+
171+
{/* Use Case Section */}
172+
<section className="py-20 px-8 max-sm:px-4 bg-black">
173+
<div className="max-w-5xl mx-auto">
174+
<div className="text-center mb-16">
175+
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-white">
176+
Trusted by Enterprise Leaders
177+
</h2>
178+
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
179+
Companies like ByteDance use the Studio SDK
180+
for internal email creation to maintain complete control over their data.
181+
</p>
182+
</div>
183+
<div className="bg-gray-900/50 rounded-2xl p-8 md:p-12 border border-gray-800">
184+
<h3 className="text-2xl font-bold text-white mb-4">
185+
ByteDance: Internal Email Creation Without Compromise
186+
</h3>
187+
<p className="text-gray-300 leading-relaxed">
188+
ByteDance chose the Grapes Studio SDK for their internal email creation workflow
189+
because it allows them to keep sensitive data completely in-house. Instead of routing
190+
email content through third-party services that require database access, their teams
191+
can create professional emails directly within their own infrastructure. They handle
192+
email delivery through their own backend systems, maintaining full control over the
193+
entire email pipeline while avoiding the security risks that come with third-party integrations.
194+
</p>
195+
</div>
196+
</div>
197+
</section>
198+
199+
{/* Problems Section */}
200+
<section className="py-20 px-8 max-sm:px-4 bg-gray-900/30">
201+
<div className="max-w-6xl mx-auto">
202+
<div className="text-center mb-16">
203+
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-white">
204+
The Problem with Traditional Email Platforms
205+
</h2>
206+
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
207+
Mailchimp, Klaviyo, and other email service providers require you to share
208+
your data and lock you into their ecosystem.
209+
</p>
210+
</div>
211+
<div className="grid md:grid-cols-2 gap-6">
212+
{problems.map((problem, index) => (
213+
<div
214+
key={index}
215+
className="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-gray-700 transition-colors"
216+
>
217+
<h3 className="text-xl font-bold text-white mb-3">
218+
{problem.title}
219+
</h3>
220+
<p className="text-gray-400 leading-relaxed">
221+
{problem.description}
222+
</p>
223+
</div>
224+
))}
225+
</div>
226+
</div>
227+
</section>
228+
229+
{/* Benefits Section */}
230+
<section className="py-20 px-8 max-sm:px-4 bg-black">
231+
<div className="max-w-6xl mx-auto">
232+
<div className="text-center mb-16">
233+
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-white">
234+
Why Choose the Studio SDK for Email?
235+
</h2>
236+
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
237+
Three core benefits that make the SDK ideal for enterprise email creation
238+
</p>
239+
</div>
240+
<div className="grid md:grid-cols-3 gap-8">
241+
{benefits.map((benefit, index) => (
242+
<div
243+
key={index}
244+
className="bg-gradient-to-br from-gray-900/50 to-gray-800/30 rounded-xl p-8 border border-gray-800"
245+
>
246+
<h3 className="text-2xl font-bold text-white mb-4">
247+
{benefit.title}
248+
</h3>
249+
<p className="text-gray-300 mb-6 leading-relaxed">
250+
{benefit.description}
251+
</p>
252+
<ul className="space-y-2">
253+
{benefit.details.map((detail, detailIndex) => (
254+
<li key={detailIndex} className="flex items-start gap-2 text-gray-400">
255+
<span className="text-violet-400 mt-1">✓</span>
256+
<span>{detail}</span>
257+
</li>
258+
))}
259+
</ul>
260+
</div>
261+
))}
262+
</div>
263+
</div>
264+
</section>
265+
266+
{/* How It Works Section */}
267+
<section className="py-20 px-8 max-sm:px-4 bg-gray-900/30">
268+
<div className="max-w-5xl mx-auto">
269+
<h2 className="text-4xl md:text-5xl font-bold text-center mb-16 text-white">
270+
How It Works
271+
</h2>
272+
<div className="grid md:grid-cols-3 gap-8">
273+
{/* Step 1 */}
274+
<div className="text-center">
275+
<div className="w-16 h-16 rounded-full bg-violet-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
276+
1
277+
</div>
278+
<h3 className="text-xl font-semibold mb-4 text-white">
279+
Embed the SDK
280+
</h3>
281+
<p className="text-gray-400">
282+
Integrate the Studio SDK into your application. It runs entirely on the front-end,
283+
so all email creation happens in your users' browsers.
284+
</p>
285+
</div>
286+
287+
{/* Step 2 */}
288+
<div className="text-center">
289+
<div className="w-16 h-16 rounded-full bg-violet-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
290+
2
291+
</div>
292+
<h3 className="text-xl font-semibold mb-4 text-white">
293+
Customize & Brand
294+
</h3>
295+
<p className="text-gray-400">
296+
Customize the editor UI to match your brand. Add custom components, integrate with
297+
your data sources, and configure workflows.
298+
</p>
299+
</div>
300+
301+
{/* Step 3 */}
302+
<div className="text-center">
303+
<div className="w-16 h-16 rounded-full bg-violet-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
304+
3
305+
</div>
306+
<h3 className="text-xl font-semibold mb-4 text-white">
307+
Export & Send
308+
</h3>
309+
<p className="text-gray-400">
310+
Export email HTML/MJML and send through your own backend. No third-party services.
311+
Complete control over delivery and data.
312+
</p>
313+
</div>
314+
</div>
315+
</div>
316+
</section>
317+
318+
{/* Comparison Section */}
319+
<section className="py-20 px-8 max-sm:px-4 bg-black">
320+
<div className="max-w-5xl mx-auto">
321+
<h2 className="text-4xl md:text-5xl font-bold text-center mb-12 text-white">
322+
Studio SDK vs. Traditional Email Platforms
323+
</h2>
324+
<div className="bg-gray-900/50 rounded-xl overflow-hidden border border-gray-800">
325+
<div className="grid grid-cols-3 gap-4 p-6 bg-gray-800/50 border-b border-gray-700">
326+
<div className="font-semibold text-gray-300">Feature</div>
327+
<div className="font-semibold text-gray-300 text-center">Mailchimp/Klaviyo</div>
328+
<div className="font-semibold text-violet-400 text-center">Studio SDK</div>
329+
</div>
330+
{[
331+
{ feature: "Data Storage", traditional: "On vendor servers", sdk: "Your infrastructure" },
332+
{ feature: "Database Access", traditional: "Required by vendor", sdk: "Not required" },
333+
{ feature: "Vendor Lock-In", traditional: "Yes", sdk: "No" },
334+
{ feature: "Customization", traditional: "Limited", sdk: "Complete" },
335+
{ feature: "Scaling Limits", traditional: "Usage-based limits", sdk: "Unlimited" },
336+
{ feature: "Backend Control", traditional: "Vendor-managed", sdk: "Your control" },
337+
{ feature: "Compliance", traditional: "Vendor-dependent", sdk: "Your control" },
338+
{ feature: "Cost at Scale", traditional: "Increases with usage", sdk: "Fixed infrastructure" },
339+
].map((row, index) => (
340+
<div key={index} className="grid grid-cols-3 gap-4 p-6 border-b border-gray-800 last:border-b-0">
341+
<div className="text-gray-300">{row.feature}</div>
342+
<div className="text-gray-500 text-center">{row.traditional}</div>
343+
<div className="text-violet-400 text-center font-medium">{row.sdk}</div>
344+
</div>
345+
))}
346+
</div>
347+
</div>
348+
</section>
349+
350+
{/* CTA Section */}
351+
<section className="py-20 px-8 max-sm:px-4 bg-gradient-to-b from-gray-900 to-black">
352+
<div className="max-w-3xl mx-auto text-center">
353+
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-white">
354+
Ready to Build Secure Email Editors?
355+
</h2>
356+
<p className="text-xl text-gray-300 mb-8">
357+
Join companies like ByteDance and Microsoft who trust the Studio SDK
358+
for enterprise-grade email creation without vendor lock-in.
359+
</p>
360+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
361+
<a
362+
href={urls.getSdkLicensesUrl({ ref: "emailCta" })}
363+
className="inline-block px-8 py-4 bg-violet-600 text-white font-semibold rounded-lg hover:bg-violet-700 transition-colors duration-200 text-lg"
364+
>
365+
Get Started for Free
366+
</a>
367+
<a
368+
href={urls.getContactUsUrl()}
369+
className="inline-block px-8 py-4 border-2 border-gray-600 text-gray-100 font-semibold rounded-lg hover:border-gray-500 hover:bg-gray-900 transition-colors duration-200 text-lg"
370+
>
371+
Contact Sales
372+
</a>
373+
</div>
374+
<p className="text-sm text-gray-500 mt-6">
375+
No credit card required. Start building today.
376+
</p>
377+
</div>
378+
</section>
379+
</main>
380+
<FooterStandalone />
381+
</div>
382+
);
383+
}
384+

0 commit comments

Comments
 (0)