Skip to content

Commit 82d11e8

Browse files
artfartf
authored
Up SDK page (#97)
1 parent 7b7f436 commit 82d11e8

4 files changed

Lines changed: 68 additions & 45 deletions

File tree

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

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,47 @@ const urlProps = { ref };
2828
const Header: React.FC<HeaderProps> = ({ isHome, className, ...rest }) => {
2929
const [open, setOpen] = useState(false);
3030
return (
31-
<header className={cn(styles.container, isHome && styles.home)} {...rest}>
32-
<div className={styles.navbar}>
33-
<div className={styles.content}>
34-
<div className={cn(styles.logo, "z-10")}>
35-
<Link href={urls.getHomeUrl()}>
36-
<Logo />
37-
</Link>
38-
</div>
39-
<MainNav />
40-
<button
41-
className={cn(styles.drawerButton, "z-10")}
42-
aria-label="Toggle menu"
43-
onClick={() => setOpen((open) => !open)}
31+
<>
32+
<div className="w-full border-b border-white/15 bg-gradient-to-r from-[#7b2d8e] via-[#973aa8] to-[#7b2d8e] text-white">
33+
<div className="mx-auto flex w-full max-w-[1150px] items-center justify-center gap-2 px-4 py-2.5 text-[12px] font-medium leading-5 sm:px-5 sm:text-sm">
34+
<span className="truncate">
35+
✨ <b>AI Chat Plugin is here!</b> Build AI agents that edit your
36+
projects.
37+
</span>
38+
<a
39+
href="https://app.grapesjs.com/docs-sdk/plugins/ai/overview"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="shrink-0 font-semibold text-purple-200 transition-colors hover:text-white"
4443
>
45-
<Icon path={open ? mdiClose : mdiMenu} size={1} />
46-
</button>
44+
View Docs -&gt;
45+
</a>
4746
</div>
4847
</div>
49-
<div className={cn(styles.drawer, open && styles.open)}>
50-
<MainNav onLinkClick={() => setOpen(false)} isVertical />
51-
</div>
52-
</header>
48+
49+
<header className={cn(styles.container, isHome && styles.home)} {...rest}>
50+
<div className={styles.navbar}>
51+
<div className={styles.content}>
52+
<div className={cn(styles.logo, "z-10")}>
53+
<Link href={urls.getHomeUrl()}>
54+
<Logo />
55+
</Link>
56+
</div>
57+
<MainNav />
58+
<button
59+
className={cn(styles.drawerButton, "z-10")}
60+
aria-label="Toggle menu"
61+
onClick={() => setOpen((open) => !open)}
62+
>
63+
<Icon path={open ? mdiClose : mdiMenu} size={1} />
64+
</button>
65+
</div>
66+
</div>
67+
<div className={cn(styles.drawer, open && styles.open)}>
68+
<MainNav onLinkClick={() => setOpen(false)} isVertical />
69+
</div>
70+
</header>
71+
</>
5372
);
5473
};
5574

@@ -136,7 +155,7 @@ function MainNav({
136155
className={cn(
137156
isVertical
138157
? "text-right"
139-
: cn(styles.navListLayer, "absolute w-auto")
158+
: cn(styles.navListLayer, "absolute w-auto"),
140159
)}
141160
>
142161
<ul
@@ -186,7 +205,7 @@ const ListItem = forwardRef<
186205
target={target}
187206
className={cn(
188207
"block select-none hover:bg-white/5 space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
189-
className
208+
className,
190209
)}
191210
{...props}
192211
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
justify-content: center;
44
position: sticky;
55
height: 0;
6-
top: 36px;
6+
top: 30px;
77
z-index: 10;
88
pointer-events: none;
99
margin: 0px;
@@ -15,6 +15,7 @@
1515
.navbar {
1616
height: fit-content;
1717
padding: 11px 20px;
18+
margin-top: 7px;
1819
box-sizing: border-box;
1920
position: relative;
2021
width: 100%;
@@ -126,7 +127,7 @@
126127
.container.home .drawer { */
127128
color: var(--textColor);
128129
background: var(--backgroundColor);
129-
padding-top: calc(36px + 68px + 16px);
130+
padding-top: calc(42px + 68px + 16px);
130131
padding-right: 48px;
131132
}
132133
.drawer.open {

‎src/app/sdk/page.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ const customers = [
3434
alt: "BBC",
3535
className: clsFullWhite,
3636
},
37-
{
38-
src: "assets/images/external-logos/braze.png",
37+
{
38+
src: "assets/images/external-logos/braze.png",
3939
alt: "Braze",
4040
className: clsFullWhite,
4141
},
42-
{
43-
src: "assets/images/external-logos/phresia.png",
42+
{
43+
src: "assets/images/external-logos/phresia.png",
4444
alt: "Phresia",
4545
className: clsFullWhite,
4646
},
@@ -68,14 +68,17 @@ export default function SDKPage() {
6868
</div>
6969
</BadgeLink> */}
7070
<h1 className={cn(styles.h1)}>
71-
The embeddable drag-and-drop builder
71+
Embed an AI-powered visual editor in your app.
7272
</h1>
7373
<p className={cn(styles.p)}>
74-
Seamlessly integrate and create within your application.
74+
White-label, no-code editor that integrates seamlessly into your
75+
stack.
7576
<br />
76-
Open-source, customizable, white-label, no-code, visual editor for:
77+
Build with AI, drag & drop, or code.
7778
<br />
78-
<b>Emails</b>, <b>Landing Pages</b>, and <b>Webpages</b>
79+
For <b className="text-white">Emails</b>,{" "}
80+
<b className="text-white">Landing Pages</b>, and{" "}
81+
<b className="text-white">Webpages</b>.
7982
</p>
8083

8184
<div className="flex flex-row gap-[16px] flex-wrap items-center justify-center pt-[50px] pb-[50px]">
@@ -93,27 +96,27 @@ export default function SDKPage() {
9396
<Tabs
9497
tabs={[
9598
{
96-
id: "editorImage",
97-
label: "HTML/Website Builder",
99+
id: "editorImage3",
100+
label: "Newsletter Builder",
98101
content: (
99102
<WindowShell>
100103
<img
101104
className="w-full"
102-
src="/assets/images/html_builder.webp"
103-
alt="GrapesJS Studio SDK Webpage Demo"
105+
src="/assets/images/newsletter.webp"
106+
alt="GrapesJS Studio SDK Email/Newsletter Demo"
104107
/>
105108
</WindowShell>
106109
),
107110
},
108111
{
109-
id: "editorImage3",
110-
label: "Newsletter Builder",
112+
id: "editorImage",
113+
label: "HTML/Website Builder",
111114
content: (
112115
<WindowShell>
113116
<img
114117
className="w-full"
115-
src="/assets/images/newsletter.webp"
116-
alt="GrapesJS Studio SDK Email/Newsletter Demo"
118+
src="/assets/images/html_builder.webp"
119+
alt="GrapesJS Studio SDK Webpage Demo"
117120
/>
118121
</WindowShell>
119122
),
@@ -323,7 +326,7 @@ export default function SDKPage() {
323326
<div className="flex flex-col gap-[8px] p-[32px] flex-1">
324327
<h4 className={styles.h4}>Responsive design</h4>
325328
<p className={cn(styles.p)}>
326-
All the tools you need to allow your uses to create content
329+
All the tools you need to allow your users to create content
327330
that looks great on any device.
328331
</p>
329332
</div>
@@ -437,9 +440,9 @@ export default function SDKPage() {
437440
</div>
438441

439442
<h3 className={cn(styles.h1)}>Plans that fit your scale</h3>
440-
<p className={cn(styles.p, "mb-10")}>
443+
{/* <p className={cn(styles.p, "mb-10")}>
441444
Simple, transparent pricing that grows with you.
442-
</p>
445+
</p> */}
443446

444447
<Pricing />
445448
</section>
@@ -478,7 +481,7 @@ export default function SDKPage() {
478481
alt="Phreesia logo"
479482
/>
480483
</a>
481-
<a
484+
{/* <a
482485
className={styles.sponsorLink}
483486
href="https://veepn.com/vpn-apps/download-vpn-for-pc/"
484487
>
@@ -488,7 +491,7 @@ export default function SDKPage() {
488491
src="/assets/images/logo_veepn.png"
489492
alt="Download the Best Windows VPN for PC"
490493
/>
491-
</a>
494+
</a> */}
492495
</div>
493496
<div className={styles.specialHeadingContainer}>
494497
<h2 className={styles.h2} id="sponsors">

‎src/app/styles.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
}
144144

145145
.h1 {
146-
font-size: 3.3rem;
146+
font-size: 4rem;
147147
font-weight: 700;
148148
text-align: center;
149149
color: var(--highEmphasisTextColor);

0 commit comments

Comments
 (0)