Skip to content

Commit 06e2168

Browse files
artfartf
authored
Mcp blog post (#103)
* Up copy * Add new blog post * Up blog media * Update copy * Up hero post * Up styles
1 parent deca72a commit 06e2168

8 files changed

Lines changed: 532 additions & 47 deletions

File tree

‎public/assets/blog/studio-mcp-app/grapes-studio-mcp-app-chatgpt.webp‎

67.1 KB
Loading

‎src/app/_components/HeroPost/index.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,33 @@ const Label = ({ label, children }: { label: string; children: ReactNode }) => {
2121

2222
export function HeroPost({ post }: { post: Post }) {
2323
const { title, author, slug } = post;
24+
const titleAndExcerpt = (
25+
<div className={styles.titleAndExcerpt}>
26+
<h3 className={styles.title}>
27+
<Link href={urls.getPathBlog(slug)}>{title}</Link>
28+
</h3>
29+
<p className={styles.excerpt}>{post.excerpt}</p>
30+
</div>
31+
);
32+
33+
const metadata = (
34+
<div className={styles.metadataContainer}>
35+
<Label label="Written by">
36+
<Avatar
37+
className={styles.metadata}
38+
name={author.name}
39+
picture={author.picture}
40+
/>
41+
</Label>
42+
<Label label="Published on">
43+
<DateFormatter className={styles.metadata} dateString={post.date} />
44+
</Label>
45+
<Label label="Read time">
46+
<PostReadTime className={styles.metadata} post={post} />
47+
</Label>
48+
</div>
49+
);
50+
2451
return (
2552
<section className={styles.postPreview}>
2653
<div className={styles.imageContainer}>
@@ -35,40 +62,15 @@ export function HeroPost({ post }: { post: Post }) {
3562
src={post.coverImage}
3663
slug={slug}
3764
/>
38-
<div className={styles.imageCaption}>
39-
<div className={styles.titleAndExcerpt}>
40-
<h3 className={styles.title}>
41-
<Link href={urls.getPathBlog(slug)}>
42-
{title}{" "}
43-
<Icon
44-
className={styles.linkIcon}
45-
path={mdiArrowTopRightThick}
46-
size={1}
47-
/>
48-
</Link>
49-
</h3>
50-
<p className={styles.excerpt}>{post.excerpt}</p>
51-
</div>
52-
<div className={styles.metadataContainer}>
53-
<Label label="Written by">
54-
<Avatar
55-
className={styles.metadata}
56-
name={author.name}
57-
picture={author.picture}
58-
/>
59-
</Label>
60-
<Label label="Published on">
61-
<DateFormatter
62-
className={styles.metadata}
63-
dateString={post.date}
64-
/>
65-
</Label>
66-
<Label label="Read time">
67-
<PostReadTime className={styles.metadata} post={post} />
68-
</Label>
69-
</div>
65+
<div className={styles.mobileCaption}>
66+
{titleAndExcerpt}
67+
{metadata}
7068
</div>
7169
</div>
70+
<div className={styles.desktopContent}>
71+
{titleAndExcerpt}
72+
{metadata}
73+
</div>
7274
</section>
7375
);
7476
}

‎src/app/_components/HeroPost/styles.module.css‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
gap: 20px;
88
}
99

10+
.coverImage {
11+
display: block;
12+
}
13+
1014
.backgroundImage {
1115
position: absolute;
1216
right: 0;
@@ -33,7 +37,7 @@
3337
opacity: 0.75;
3438
}
3539

36-
.imageCaption {
40+
.mobileCaption {
3741
padding: 24px;
3842
display: flex;
3943
flex-direction: column;
@@ -46,9 +50,14 @@
4650
pointer-events: none;
4751
}
4852

53+
.desktopContent {
54+
display: none;
55+
}
56+
4957
.metadataContainer {
5058
display: flex;
5159
flex-direction: row;
60+
flex-wrap: wrap;
5261
gap: 32px;
5362
}
5463

@@ -70,7 +79,7 @@
7079
.label {
7180
font-family: var(--font-inter);
7281
font-weight: 600;
73-
font-size: 14px;
82+
font-size: 13px;
7483
line-height: 20px;
7584

7685
color: var(--highEmphasisTextColor);
@@ -127,3 +136,49 @@
127136
color: var(--highEmphasisTextColor);
128137
padding: none;
129138
}
139+
140+
@media (min-width: 960px) {
141+
.postPreview {
142+
display: grid;
143+
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
144+
align-items: stretch;
145+
gap: 32px;
146+
}
147+
148+
.imageContainer {
149+
min-height: 100%;
150+
}
151+
152+
.coverImage {
153+
height: 100%;
154+
}
155+
156+
.coverImage img {
157+
width: 100%;
158+
height: 100%;
159+
object-fit: cover;
160+
}
161+
162+
.mobileCaption {
163+
display: none;
164+
}
165+
166+
.desktopContent {
167+
display: flex;
168+
flex-direction: column;
169+
justify-content: center;
170+
gap: 32px;
171+
padding: 16px 0;
172+
}
173+
174+
.title {
175+
font-size: 40px;
176+
line-height: 48px;
177+
}
178+
179+
.excerpt {
180+
font-size: 18px;
181+
line-height: 30px;
182+
color: var(--mediumEmphasisTextColor);
183+
}
184+
}

‎src/app/_components/PostPreview/styles.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
position: relative;
2727
overflow: hidden;
2828
border-radius: 12px;
29+
border: 1px solid #ffffff1a;
2930
transition: opacity var(--transitionDuration) var(--transitionTimingFunction);
3031
opacity: 1;
3132
}
@@ -39,7 +40,7 @@
3940
display: flex;
4041
flex-direction: column;
4142
align-items: start;
42-
border-top: 1px solid #ffffff4d;
43+
border-top: 1px solid #ffffff1a;
4344
background: #0000004d;
4445
backdrop-filter: blur(25px);
4546
width: 100%;

‎src/app/ai/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { Suspense } from "react";
44
import AiPage from "./ai";
55

66
export const metadata: Metadata = {
7-
title: "GrapesJS Studio AI Website and Email Builder",
7+
title: "Free AI Website and Email Builder | Grapes Studio AI",
88
description:
9-
"Build websites and emails with GrapesJS Studio AI. Generate with AI, refine with drag and drop, and export clean HTML with full visual control.",
9+
"Build websites and emails with Grapes Studio AI. Generate with AI, refine with drag and drop editing, and export clean HTML with full visual control.",
1010
alternates: {
1111
canonical: "/ai",
1212
languages: {
@@ -15,9 +15,6 @@ export const metadata: Metadata = {
1515
},
1616
},
1717
openGraph: {
18-
title: "GrapesJS Studio AI Website and Email Builder",
19-
description:
20-
"Build websites and emails with GrapesJS Studio AI. Generate with AI, refine with drag and drop, and export clean HTML with full visual control.",
2118
url: "/ai",
2219
images: [DEFAULT_OG_IMAGE],
2320
},

‎src/app/page.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,14 @@ import { DEFAULT_OG_IMAGE } from "@/lib/site";
33
import SDKPage from "./sdk/SdkPage";
44

55
export const metadata: Metadata = {
6-
title: "Embedded Visual Editor SDK for Newsletters, Websites, and Documents",
6+
title:
7+
"Embed a Visual Editor for Emails, Landing Pages, Websites & Documents | GrapesJS Studio SDK",
78
description:
8-
"Embed a white-label, AI-powered visual editor in your app. Build newsletters, websites, and documents with drag and drop, code editing, and HTML output.",
9+
"Embed a white-label, AI-powered visual editor in your app for emails, landing pages, websites, and documents. Includes drag-and-drop editing, code editing, reusable components, and clean HTML export.",
910
alternates: {
1011
canonical: "/",
1112
},
1213
openGraph: {
13-
title: "Embedded Visual Editor SDK for Newsletters, Websites, and Documents",
14-
description:
15-
"Embed a white-label, AI-powered visual editor in your app. Build newsletters, websites, and documents with drag and drop, code editing, and HTML output.",
1614
url: "/",
1715
images: [DEFAULT_OG_IMAGE],
1816
},

‎src/app/sdk/pricing/PricingContent.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const accentBorderClass = "border-[#d39cdd]";
3737
const accentButtonClass = `bg-[#d39cdd] ${darkTextClass} ${accentBorderClass} hover:bg-[#e4b9eb]`;
3838
const accentBadgeClass = "border-[#d39cdd]/35 bg-[#d39cdd]/10 text-[#f1c0f8]";
3939
const annualBadgeActiveClass = "border-[#e6c6ec] bg-[#f6e6f8] text-[#8f4b9c]";
40-
const annualBadgeInactiveClass = accentTextClass;
4140
const enterpriseBorderClass = "border-[#c98ad6]/70";
4241
const tableShellClass =
4342
"relative rounded-2xl border border-white/10 bg-[#120d14]/85 shadow-[0_24px_80px_rgba(0,0,0,0.28)]";
@@ -83,7 +82,7 @@ function BillingToggle({
8382
"Monthly"
8483
) : (
8584
<span className="flex items-center gap-3 whitespace-nowrap leading-none">
86-
<span>Annual</span>
85+
<span>Yearly</span>
8786
<span
8887
className={cn(
8988
"inline-flex items-center rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]",

0 commit comments

Comments
 (0)