Skip to content

Commit 4cb2621

Browse files
bernaferraribernaferrari
committed
feat: update EmailPanel header content and styling.
1 parent fc892c5 commit 4cb2621

File tree

1 file changed

+141
-21
lines changed

1 file changed

+141
-21
lines changed

‎packages/plugin-ui/src/components/EmailPanel.tsx‎

Lines changed: 141 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,145 @@
11
import React from "react";
2-
import {
3-
SparklesIcon,
2+
import {
3+
SparklesIcon,
44
ExternalLinkIcon,
55
BotIcon,
6-
ArrowRightIcon
6+
ArrowRightIcon,
77
} from "lucide-react";
88

99
// Correct Figma Icon Path (Monochrome)
1010
const CustomFigmaIcon = ({ className }: { className?: string }) => (
11-
<svg xmlns="http://www.w3.org/2000/svg" className={className} fill="currentColor" viewBox="0 0 256 256"><path d="M192,96a40,40,0,0,0-24-72H96A40,40,0,0,0,72,96a40,40,0,0,0,1.37,65A44,44,0,1,0,144,196V160a40,40,0,1,0,48-64Zm0-32a24,24,0,0,1-24,24H144V40h24A24,24,0,0,1,192,64ZM72,64A24,24,0,0,1,96,40h32V88H96A24,24,0,0,1,72,64Zm24,88a24,24,0,0,1,0-48h32v48H96Zm32,44a28,28,0,1,1-28-28h28Zm40-44a24,24,0,1,1,24-24A24,24,0,0,1,168,152Z"></path></svg>
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
className={className}
14+
fill="currentColor"
15+
viewBox="0 0 256 256"
16+
>
17+
<path d="M192,96a40,40,0,0,0-24-72H96A40,40,0,0,0,72,96a40,40,0,0,0,1.37,65A44,44,0,1,0,144,196V160a40,40,0,1,0,48-64Zm0-32a24,24,0,0,1-24,24H144V40h24A24,24,0,0,1,192,64ZM72,64A24,24,0,0,1,96,40h32V88H96A24,24,0,0,1,72,64Zm24,88a24,24,0,0,1,0-48h32v48H96Zm32,44a28,28,0,1,1-28-28h28Zm40-44a24,24,0,1,1,24-24A24,24,0,0,1,168,152Z"></path>
18+
</svg>
19+
);
20+
21+
const CustomKopiIcon = ({ className }: { className?: string }) => (
22+
<svg
23+
width="245"
24+
height="258"
25+
viewBox="0 0 245 258"
26+
fill="none"
27+
xmlns="http://www.w3.org/2000/svg"
28+
className={className}
29+
>
30+
<path
31+
d="M182.795 184.569C148.649 217.944 93.9133 217.318 60.539 183.172C27.1647 149.025 27.7904 94.2875 61.9364 60.9123C82.0013 41.3004 104.926 14.6396 130.698 18.4112C148.784 21.058 170.43 48.2282 184.193 62.3096C217.567 96.4565 216.941 151.194 182.795 184.569Z"
32+
fill="#FF7670"
33+
/>
34+
<g filter="url(#filter0_d_648_1676)">
35+
<path
36+
d="M184.596 161.597C163.89 196.277 118.992 207.606 84.3126 186.9C49.633 166.195 38.3046 121.295 59.0098 86.6148C66.8947 73.408 78.4774 59.3746 91.4787 53.4203C101.6 48.7849 114.218 56.9657 125.392 57.2423C137.556 57.5434 148.101 54.629 159.293 61.3114C193.973 82.0172 205.301 126.917 184.596 161.597Z"
37+
fill="#FFC070"
38+
/>
39+
</g>
40+
<g filter="url(#filter1_d_648_1676)">
41+
<path
42+
d="M172.727 158.586C152.463 185.978 113.83 191.755 86.4384 171.49C59.047 151.225 53.2696 112.591 73.5342 85.1992C83.0748 72.303 104.377 87.558 118.97 84.7058C135.374 81.4998 145.328 61.5705 159.823 72.2948C187.214 92.5599 192.992 131.194 172.727 158.586Z"
43+
fill="#FFF06F"
44+
/>
45+
</g>
46+
<defs>
47+
<filter
48+
id="filter0_d_648_1676"
49+
x="8.65625"
50+
y="32"
51+
width="226.289"
52+
height="225.254"
53+
filterUnits="userSpaceOnUse"
54+
color-interpolation-filters="sRGB"
55+
>
56+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
57+
<feColorMatrix
58+
in="SourceAlpha"
59+
type="matrix"
60+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
61+
result="hardAlpha"
62+
/>
63+
<feOffset dy="20" />
64+
<feGaussianBlur stdDeviation="20" />
65+
<feColorMatrix
66+
type="matrix"
67+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
68+
/>
69+
<feBlend
70+
mode="normal"
71+
in2="BackgroundImageFix"
72+
result="effect1_dropShadow_648_1676"
73+
/>
74+
<feBlend
75+
mode="normal"
76+
in="SourceGraphic"
77+
in2="effect1_dropShadow_648_1676"
78+
result="shape"
79+
/>
80+
</filter>
81+
<filter
82+
id="filter1_d_648_1676"
83+
x="21.4297"
84+
y="49.1562"
85+
width="203.398"
86+
height="194.438"
87+
filterUnits="userSpaceOnUse"
88+
color-interpolation-filters="sRGB"
89+
>
90+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
91+
<feColorMatrix
92+
in="SourceAlpha"
93+
type="matrix"
94+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
95+
result="hardAlpha"
96+
/>
97+
<feOffset dy="20" />
98+
<feGaussianBlur stdDeviation="20" />
99+
<feColorMatrix
100+
type="matrix"
101+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
102+
/>
103+
<feBlend
104+
mode="normal"
105+
in2="BackgroundImageFix"
106+
result="effect1_dropShadow_648_1676"
107+
/>
108+
<feBlend
109+
mode="normal"
110+
in="SourceGraphic"
111+
in2="effect1_dropShadow_648_1676"
112+
result="shape"
113+
/>
114+
</filter>
115+
</defs>
116+
</svg>
12117
);
13118

14119
const EmailPanel = () => {
15120
return (
16-
<div className="flex flex-col h-full overflow-y-auto px-5 py-8 bg-gradient-to-b from-white to-gray-50 dark:from-black dark:to-[#0a0a0a]">
121+
<div className="flex flex-col h-full overflow-y-auto px-5 pt-4 pb-4 bg-gradient-to-b from-white to-gray-50 dark:from-black dark:to-[#0a0a0a]">
17122
{/* Header */}
18-
<div className="text-center mb-10">
19-
<div className="inline-flex items-center justify-center p-3.5 mb-5 rounded-3xl bg-black dark:bg-white shadow-xl shadow-black/5 dark:shadow-white/5 ring-1 ring-black/5 dark:ring-white/10">
20-
<BotIcon className="w-8 h-8 text-white dark:text-black" />
123+
<div className="text-center mb-4">
124+
<div className="inline-flex items-center justify-center">
125+
<CustomKopiIcon className="w-14 h-14 text-white dark:text-black" />
21126
</div>
22127
<h1 className="text-4xl font-bold dark:text-white mb-3 tracking-tighter font-display">
23128
Kopi AI
24129
</h1>
25130
<p className="text-xs text-gray-500 dark:text-gray-400 mt-3 max-w-[260px] mx-auto leading-relaxed">
26-
AI email marketing design agent.
131+
HTML Email Design Agent.
132+
</p>
133+
</div>
134+
135+
<div className="w-full bg-[#f8f8f8] dark:bg-zinc-900 rounded-xl p-4 mb-8">
136+
<p className="text-sm text-foreground leading-relaxed text-left">
137+
I'm launching my next project! Kopi is a tool for creating HTML
138+
marketing emails with AI, especially for Shopify stores working with
139+
Klaviyo, Mailchimp, etc.
140+
</p>
141+
<p className="text-sm text-muted-foreground mt-3 text-right">
142+
—Bernardo, creator of Figma to Code
27143
</p>
28144
</div>
29145

@@ -32,13 +148,15 @@ const EmailPanel = () => {
32148
{/* Create with AI Card */}
33149
<div className="group relative overflow-hidden p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 shadow-sm hover:shadow-md transition-all duration-300">
34150
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-violet-100/50 to-transparent dark:from-violet-900/10 dark:to-transparent rounded-bl-3xl -mr-4 -mt-4 transition-transform group-hover:scale-110" />
35-
151+
36152
<div className="relative flex items-center gap-4">
37153
<div className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/30 flex items-center justify-center shrink-0 border border-violet-100 dark:border-violet-900/50">
38154
<SparklesIcon className="w-5 h-5 text-violet-600 dark:text-violet-400" />
39155
</div>
40156
<div>
41-
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Create with AI</h3>
157+
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">
158+
Create with AI
159+
</h3>
42160
<p className="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 leading-snug">
43161
Generate emails from scratch tailored to your brand
44162
</p>
@@ -49,31 +167,33 @@ const EmailPanel = () => {
49167
{/* Brand Loyal Card */}
50168
<div className="group relative overflow-hidden p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 shadow-sm hover:shadow-md transition-all duration-300">
51169
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-orange-100/50 to-transparent dark:from-orange-900/10 dark:to-transparent rounded-bl-3xl -mr-4 -mt-4 transition-transform group-hover:scale-110" />
52-
170+
53171
<div className="relative flex items-center gap-4">
54172
<div className="w-10 h-10 rounded-xl bg-orange-50 dark:bg-orange-950/30 flex items-center justify-center shrink-0 border border-orange-100 dark:border-orange-900/50">
55173
<CustomFigmaIcon className="w-6 h-6 text-gray-900 dark:text-gray-100" />
56174
</div>
57175
<div>
58-
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Generate from Figma</h3>
176+
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">
177+
Generate from Figma
178+
</h3>
59179
<p className="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 leading-snug">
60-
Generate emails from Figma designs
180+
Generate emails from Figma designs
61181
</p>
62182
</div>
63183
</div>
64184
</div>
65185
</div>
66186

67-
{/* Subtext */}
68-
<div className="flex justify-center mt-6 mb-4">
69-
<p className="text-[11px] leading-relaxed text-gray-400 dark:text-gray-500 text-center max-w-[280px]">
70-
Clean, responsive, on-brand email HTML
71-
</p>
72-
</div>
187+
{/* Subtext */}
188+
<div className="flex justify-center mt-4 mb-2">
189+
<p className="text-[11px] leading-relaxed text-gray-400 dark:text-gray-500 text-center max-w-[280px]">
190+
Clean, responsive, on-brand email HTML
191+
</p>
192+
</div>
73193

74194
{/* CTA */}
75195
<div className="mt-auto pt-4 text-center">
76-
<a
196+
<a
77197
href="https://docs.google.com/forms/d/e/1FAIpQLSe6F4CKOoj3FgEsualL2pUunTki2aMfO2WK0v5ExO7k_8HjmA/viewform?usp=sharing&ouid=115251107698498111547"
78198
target="_blank"
79199
rel="noopener noreferrer"

0 commit comments

Comments
 (0)