Skip to content

Commit 84ab1cc

Browse files
maksym-workmaksym-work
committed
feat: add ChatGPT PRO signup form and enhance layout in ChatIntroduction component
1 parent 6a74225 commit 84ab1cc

File tree

1 file changed

+165
-26
lines changed

1 file changed

+165
-26
lines changed

‎src/lib/components/chat/ChatIntroduction.svelte‎

Lines changed: 165 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,21 @@
2121
</script>
2222

2323
<div class="my-auto flex flex-col">
24-
<div class="mb-3 flex flex-col gap-1 items-center text-2xl font-semibold">
25-
<Logo classNames="mr-1 flex-none size-[46.66px]" />
26-
<span class="text-2xl font-[700] text-[#306FC7] text-[25.3px] font-nunito">{publicConfig.PUBLIC_APP_NAME}</span>
27-
<!-- <div
24+
<div class="mb-3 flex flex-col items-center gap-1 text-2xl font-semibold">
25+
<Logo classNames="mr-1 flex-none size-[46.66px]" />
26+
<span class="font-nunito text-2xl text-[25.3px] font-[700] text-[#306FC7]"
27+
>{publicConfig.PUBLIC_APP_NAME}</span
28+
>
29+
<!-- <div
2830
class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
2931
>
3032
v{publicConfig.PUBLIC_VERSION}
3133
</div> -->
32-
<p class="text-[18px] font-sans text-center text-[#757575] dark:text-[#575757]">
33-
{publicConfig.PUBLIC_APP_DESCRIPTION ||
34-
"Making the community's best AI chat models available to everyone."}
35-
</p>
36-
</div>
34+
<p class="text-center font-sans text-[18px] text-[#757575] dark:text-[#575757]">
35+
{publicConfig.PUBLIC_APP_DESCRIPTION ||
36+
"Making the community's best AI chat models available to everyone."}
37+
</p>
38+
</div>
3739
<div class="lg:col-span-2 lg:pl-24">
3840
{#each JSON5.parse(publicConfig.PUBLIC_ANNOUNCEMENT_BANNERS || "[]") as banner}
3941
<AnnouncementBanner classNames="mb-4" title={banner.title}>
@@ -76,12 +78,12 @@
7678
{#if currentModel.promptExamples}
7779
<div class="lg:col-span-3 lg:mt-6">
7880
<div
79-
class="flex flex-col md:flex-row max-h-60 gap-2 overflow-x-auto pb-2 text-center scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 lg:grid lg:grid-cols-3 lg:overflow-y-auto lg:text-left"
81+
class="flex max-h-60 flex-col gap-2 overflow-x-auto pb-2 text-center scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 md:flex-row lg:grid lg:grid-cols-3 lg:overflow-y-auto lg:text-left"
8082
>
8183
{#each currentModel.promptExamples as example}
8284
<button
8385
type="button"
84-
class="flex-shrink-0 rounded-xl bg-gray-50 p-2.5 text-sm text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-3 lg:w-full xl:p-3.5 xl:text-base"
86+
class="flex-shrink-0 rounded-xl bg-gray-50 p-2.5 text-sm text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-3 lg:w-full xl:p-3.5 xl:text-base"
8587
onclick={() => dispatch("message", example.prompt)}
8688
>
8789
{example.title}
@@ -90,41 +92,178 @@
9092
</div>
9193
</div>
9294
{/if}
93-
<div class="flex flex-col items-center w-full py-2">
95+
<div class="flex w-full flex-col items-center py-2">
9496
<div class="mb-3 flex items-center text-2xl font-semibold">
95-
<span class="text-[24px] font-[700] text-[#306FC7] font-nunito">Tasuta rakendused</span>
97+
<span class="font-nunito text-[24px] font-[700] text-[#306FC7]">Tasuta rakendused</span>
9698
</div>
97-
<p class="text-[18px] font-sans text-center font-[600] text-[#757575] dark:text-[#575757]">
98-
Neil kolmel rakendusel on tasuta limiidid, mis lähtestatakse iga kuu ja töötavad suurepäraselt eesti keeles.
99+
<p class="text-center font-sans text-[18px] font-[600] text-[#757575] dark:text-[#575757]">
100+
Neil kolmel rakendusel on tasuta limiidid, mis lähtestatakse iga kuu ja töötavad suurepäraselt
101+
eesti keeles.
99102
</p>
100103
</div>
101-
<div class="w-full flex items-center justify-center py-2">
102-
<div class="w-full max-w-[400px] flex items-center justify-around">
104+
<div class="flex w-full items-center justify-center py-2">
105+
<div class="flex w-full max-w-[400px] items-center justify-around">
103106
<div class="flex flex-col items-center gap-1">
104-
<div class="size-[77px] rounded-full bg-[#508DEF1A] flex items-center justify-center">
105-
<img src="{publicConfig.assetPath}/icons/chatgpt.svg" alt="ChatGPT" class="size-[37.44px]">
107+
<div class="flex size-[77px] items-center justify-center rounded-full bg-[#508DEF1A]">
108+
<img
109+
src="{publicConfig.assetPath}/icons/chatgpt.svg"
110+
alt="ChatGPT"
111+
class="size-[37.44px]"
112+
/>
106113
</div>
107-
<div class="text-[18px] font-sans text-center font-[600] text-[#757575] dark:text-[#575757]">
114+
<div
115+
class="text-center font-sans text-[18px] font-[600] text-[#757575] dark:text-[#575757]"
116+
>
108117
ChatGPT
109118
</div>
110119
</div>
111120
<div class="flex flex-col items-center gap-1">
112-
<div class="size-[77px] rounded-full bg-[#508DEF1A] flex items-center justify-center">
113-
<img src="{publicConfig.assetPath}/icons/deepseek.svg" alt="DeepSeek" class="size-[37.44px]">
121+
<div class="flex size-[77px] items-center justify-center rounded-full bg-[#508DEF1A]">
122+
<img
123+
src="{publicConfig.assetPath}/icons/deepseek.svg"
124+
alt="DeepSeek"
125+
class="size-[37.44px]"
126+
/>
114127
</div>
115-
<div class="text-[18px] font-sans text-center font-[600] text-[#757575] dark:text-[#575757]">
128+
<div
129+
class="text-center font-sans text-[18px] font-[600] text-[#757575] dark:text-[#575757]"
130+
>
116131
deepseek
117132
</div>
118133
</div>
119134
<div class="flex flex-col items-center gap-1">
120-
<div class="size-[77px] rounded-full bg-[#508DEF1A] flex items-center justify-center">
121-
<img src="{publicConfig.assetPath}/icons/gemini.svg" alt="Gemini" class="size-[37.44px]">
135+
<div class="flex size-[77px] items-center justify-center rounded-full bg-[#508DEF1A]">
136+
<img
137+
src="{publicConfig.assetPath}/icons/gemini.svg"
138+
alt="Gemini"
139+
class="size-[37.44px]"
140+
/>
122141
</div>
123-
<div class="text-[18px] font-sans text-center font-[600] text-[#757575] dark:text-[#575757]">
142+
<div
143+
class="text-center font-sans text-[18px] font-[600] text-[#757575] dark:text-[#575757]"
144+
>
124145
Gemini
125146
</div>
126147
</div>
127148
</div>
128149
</div>
150+
151+
<!-- ChatGPT PRO Signup Form -->
152+
<div class="flex w-full items-center justify-center py-6">
153+
<div class="w-full max-w-[320px] rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
154+
<!-- Top Icons -->
155+
<div class="mb-6 flex items-center justify-center gap-4">
156+
<div class="flex flex-col items-center gap-1">
157+
<div class="flex size-[50px] items-center justify-center rounded-full bg-[#508DEF1A]">
158+
<img
159+
src="{publicConfig.assetPath}/icons/chatgpt.svg"
160+
alt="ChatGPT"
161+
class="size-[24px]"
162+
/>
163+
</div>
164+
<span class="text-xs font-medium text-gray-600 dark:text-gray-300">ChatGPT</span>
165+
</div>
166+
<div class="flex flex-col items-center gap-1">
167+
<div class="flex size-[50px] items-center justify-center rounded-full bg-[#508DEF1A]">
168+
<img
169+
src="{publicConfig.assetPath}/icons/deepseek.svg"
170+
alt="Deepseek"
171+
class="size-[24px]"
172+
/>
173+
</div>
174+
<span class="text-xs font-medium text-gray-600 dark:text-gray-300">Deepseek</span>
175+
</div>
176+
<div class="flex flex-col items-center gap-1">
177+
<div class="flex size-[50px] items-center justify-center rounded-full bg-[#508DEF1A]">
178+
<svg
179+
class="size-[24px]"
180+
viewBox="0 0 24 24"
181+
fill="none"
182+
xmlns="http://www.w3.org/2000/svg"
183+
>
184+
<path
185+
d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
186+
fill="#4285F4"
187+
/>
188+
</svg>
189+
</div>
190+
<span class="text-xs font-medium text-gray-600 dark:text-gray-300">Gemini</span>
191+
</div>
192+
</div>
193+
194+
<!-- Form Title -->
195+
<div class="mb-6 text-center">
196+
<h3 class="mb-2 text-lg font-bold text-[#306FC7]">Jagatud ChatGPT PRO Konto</h3>
197+
<p class="text-sm text-gray-600 dark:text-gray-300">Sisesta oma andmed ja saa kutse</p>
198+
</div>
199+
200+
<!-- Form Fields -->
201+
<form class="space-y-4">
202+
<div>
203+
<label
204+
for="email-input"
205+
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Meil*</label
206+
>
207+
<input
208+
id="email-input"
209+
type="email"
210+
placeholder="[email protected]"
211+
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-[#306FC7] dark:border-gray-600 dark:bg-gray-700 dark:text-white"
212+
required
213+
/>
214+
</div>
215+
216+
<div>
217+
<label
218+
for="phone-input"
219+
class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
220+
>Telefoninumber*</label
221+
>
222+
<input
223+
id="phone-input"
224+
type="tel"
225+
placeholder="+372 123 4567"
226+
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-[#306FC7] dark:border-gray-600 dark:bg-gray-700 dark:text-white"
227+
required
228+
/>
229+
</div>
230+
231+
<div class="text-xs leading-relaxed text-gray-500 dark:text-gray-400">
232+
Annan nõusoleku, et minu e-posti aadressi ja telefoninumbrit kasutatakse, et saata mulle
233+
meeldetuletusi haldamiseks kohta.
234+
</div>
235+
236+
<div class="flex items-center gap-2">
237+
<span class="text-sm text-gray-600 dark:text-gray-300"
238+
>Millise sagedusega soovid meeldetuletusi saada?</span
239+
>
240+
<select
241+
class="rounded border border-gray-300 bg-white px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700"
242+
>
243+
<option>2 Korda</option>
244+
<option>1 Kord</option>
245+
<option>3 Korda</option>
246+
</select>
247+
</div>
248+
249+
<button
250+
type="submit"
251+
class="flex w-full items-center justify-center gap-2 rounded-lg bg-[#306FC7] px-4 py-3 font-medium text-white transition-colors duration-200 hover:bg-[#2859a3]"
252+
>
253+
Esita
254+
<svg class="size-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
255+
<path
256+
d="M5 12H19M19 12L12 5M19 12L12 19"
257+
stroke="currentColor"
258+
stroke-width="2"
259+
stroke-linecap="round"
260+
stroke-linejoin="round"
261+
/>
262+
</svg>
263+
</button>
264+
</form>
265+
</div>
266+
</div>
267+
129268
<div class="h-40 sm:h-24"></div>
130269
</div>

0 commit comments

Comments
 (0)