Skip to content

Commit b742536

Browse files
andrew-boydandrew-boyd
committed
feat: updates homepage promo to be KickStart promo
1 parent e104353 commit b742536

File tree

2 files changed

+292
-2
lines changed

2 files changed

+292
-2
lines changed

‎docs/src/components/KickstartPromo.vue

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<template>
2+
<div class="kickstart-promo">
3+
<a
4+
href="https://kickstart.formkit.com/?utm_source=auto_animate_kickstart_promo&utm_medium=web"
5+
target="_blank"
6+
class="kickstart-promo__cta"
7+
/>
8+
9+
<span class="announcement-icon">
10+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
11+
<path
12+
fill="currentColor"
13+
d="M544 32c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V64c0-17.7 14.3-32 32-32zM64 190.3L480 64V448L348.9 408.2C338.2 449.5 300.7 480 256 480c-53 0-96-43-96-96c0-11 1.9-21.7 5.3-31.5L64 321.7C63.1 338.6 49.1 352 32 352c-17.7 0-32-14.3-32-32V192c0-17.7 14.3-32 32-32c17.1 0 31.1 13.4 32 30.3zm239 203.9l-91.6-27.8c-2.1 5.4-3.3 11.4-3.3 17.6c0 26.5 21.5 48 48 48c23 0 42.2-16.2 46.9-37.8z"
14+
/>
15+
</svg>
16+
</span>
17+
18+
<div class="kickstart-promo__image" aria-label="Kickstart">
19+
<svg
20+
id="b"
21+
data-name="Layer 2"
22+
xmlns="http://www.w3.org/2000/svg"
23+
width="562.4"
24+
height="100.3"
25+
xmlns:xlink="http://www.w3.org/1999/xlink"
26+
viewBox="0 0 562.4 100.3"
27+
>
28+
<defs>
29+
<linearGradient
30+
id="d"
31+
x1="3.1"
32+
y1="-330.7"
33+
x2="67.8"
34+
y2="-430.7"
35+
gradientTransform="translate(0 -319.9) scale(1 -1)"
36+
gradientUnits="userSpaceOnUse"
37+
>
38+
<stop offset="0" stop-color="#f79259" />
39+
<stop offset="1" stop-color="#f8ce68" />
40+
</linearGradient>
41+
</defs>
42+
<g id="c" data-name="Layer 2">
43+
<path
44+
class="e"
45+
d="m16.7,0H0v16.7h16.7V0Zm0,66.7H0v16.7h16.7v-16.7Zm33.4,16.7h50v16.7h-50v-16.7ZM33.4,16.7h-16.7v16.7h16.7v16.7h16.7v-16.7h-16.7v-16.7Zm-16.7,33.3h16.7v16.7h-16.7v-16.7Z"
46+
/>
47+
<g>
48+
<path
49+
class="f"
50+
d="m131.3,100h-11.2v-17.6h11.2v2.4h-8.4v5.2h8v2.3h-8v5.5h8.4v2.4Z"
51+
/>
52+
<path
53+
class="f"
54+
d="m149.8,95.3h-6.7l-1.6,4.8h-2.8l6.4-17.6h3l6.4,17.6h-2.9l-1.6-4.8Zm-6-2.2h5.3l-2.6-7.7h0l-2.6,7.7Z"
55+
/>
56+
<path
57+
class="f"
58+
d="m164.9,100h-2.7v-17.6h6.9c3.6,0,5.9,2.1,5.9,5.4s-1.3,4.3-3.4,5l4,7.2h-3.2l-3.6-6.8h-3.9v6.8Zm0-9h3.9c2.1,0,3.3-1.2,3.3-3.2s-1.3-3.2-3.4-3.2h-3.9v6.3Z"
59+
/>
60+
<path class="f" d="m194.4,100h-10.9v-17.6h2.7v15.2h8.2v2.4Z" />
61+
<path
62+
class="f"
63+
d="m205,100v-7.2l-6.2-10.4h3.1l4.5,7.8h0l4.5-7.8h3l-6.2,10.4v7.2h-2.7Z"
64+
/>
65+
<path
66+
class="f"
67+
d="m243.2,95.3h-6.7l-1.6,4.8h-2.8l6.4-17.6h3l6.4,17.6h-2.9l-1.6-4.8Zm-6-2.2h5.3l-2.6-7.7h0l-2.6,7.7Z"
68+
/>
69+
<path
70+
class="f"
71+
d="m254.3,91.2c0-5.6,3.2-9.1,8.1-9.1s7,2.5,7.5,6.1h-2.7c-.5-2.3-2.4-3.7-4.8-3.7s-5.3,2.6-5.3,6.7,2.1,6.7,5.3,6.7,4.2-1.3,4.7-3.4h2.7c-.7,3.6-3.4,5.8-7.5,5.8s-8.1-3.5-8.1-9.1Z"
72+
/>
73+
<path
74+
class="f"
75+
d="m277.5,91.2c0-5.6,3.2-9.1,8.1-9.1s7,2.5,7.5,6.1h-2.7c-.5-2.3-2.4-3.7-4.8-3.7s-5.3,2.6-5.3,6.7,2.1,6.7,5.3,6.7,4.2-1.3,4.7-3.4h2.7c-.7,3.6-3.4,5.8-7.5,5.8s-8.1-3.5-8.1-9.1Z"
76+
/>
77+
<path
78+
class="f"
79+
d="m312.6,100h-11.2v-17.6h11.2v2.4h-8.4v5.2h8v2.3h-8v5.5h8.4v2.4Z"
80+
/>
81+
<path
82+
class="f"
83+
d="m323.2,95.1c.2,1.7,1.9,2.9,4.2,2.9s3.8-1.1,3.8-2.7-1-2.2-3.2-2.7l-2.3-.5c-3.2-.8-4.7-2.3-4.7-4.7s2.6-5.1,6.4-5.1,6.3,2.1,6.4,5.1h-2.7c-.2-1.8-1.6-2.8-3.7-2.8s-3.6,1.1-3.6,2.6.9,2,3.2,2.5l1.9.5c3.6.9,5.1,2.3,5.1,4.9s-2.6,5.4-6.8,5.4-6.5-2-6.7-5.2h2.7Z"
84+
/>
85+
<path
86+
class="f"
87+
d="m344.3,95.1c.2,1.7,1.9,2.9,4.2,2.9s3.8-1.1,3.8-2.7-1-2.2-3.2-2.7l-2.3-.5c-3.2-.8-4.7-2.3-4.7-4.7s2.6-5.1,6.4-5.1,6.3,2.1,6.4,5.1h-2.7c-.2-1.8-1.6-2.8-3.7-2.8s-3.6,1.1-3.6,2.6.9,2,3.2,2.5l1.9.5c3.6.9,5.1,2.3,5.1,4.9s-2.6,5.4-6.8,5.4-6.5-2-6.7-5.2h2.7Z"
88+
/>
89+
</g>
90+
<g>
91+
<path
92+
class="g"
93+
d="m120.1,75.9V5.5h17.9v31h.4l24-31h19.2l-24.6,31.3,26,39.2h-21l-18-27.5-6,7.6v19.9h-17.9Z"
94+
/>
95+
<path
96+
class="g"
97+
d="m187.4,8.5c0-4.9,4-8.5,8.9-8.5s8.9,3.7,8.9,8.5-4,8.5-8.9,8.5-8.9-3.6-8.9-8.5Zm.2,13h17.3v54.3h-17.3V21.6Z"
98+
/>
99+
<path
100+
class="g"
101+
d="m249.1,42.9c-.6-5.6-4.1-9.3-9.4-9.3s-10.2,5.6-10.2,15.1,3.8,15.1,10.2,15.1,8.7-3.2,9.4-8.9h15.9c-.5,13.7-10.3,22.1-25.5,22.1s-27.5-10.7-27.5-28.4,10.5-28.3,27.4-28.3,25,9,25.5,22.5h-15.9Z"
102+
/>
103+
<path
104+
class="g"
105+
d="m305.5,21.6h19.3l-19.5,23.3,20.7,31.1h-19.9l-13.5-20.7-3.3,3.9v16.8h-17.3V2h17.3v40.4h.3l16-20.8Z"
106+
/>
107+
<path
108+
class="g"
109+
d="m344.7,55.5c.6,4.8,6.1,8.1,12.7,8.1s11.5-3.1,11.5-7.4-3-5.8-11-7.5l-9.2-1.8c-13-2.5-19.7-9.5-19.7-20.2s11.7-22.5,28-22.5,28,8.5,28.2,21.8h-16.5c-.3-5.1-5.1-8.2-11.5-8.2s-10.4,2.8-10.4,7.1,3.1,5.9,10.5,7.4l9.1,1.7c13.9,2.7,20.2,9,20.2,20.1s-11.6,22.9-29.7,22.9-29.1-8-29.2-21.6h17Z"
110+
/>
111+
<path
112+
class="g"
113+
d="m415.7,9.6v12h9.8v12.8h-9.8v23.2c0,3.8,2.1,5.7,6.3,5.7s2.5,0,3.5-.2v12.3c-1.7.4-4.2.7-7.6.7-14,0-19.5-4.3-19.5-15v-26.7h-7.3v-12.8h7.3v-12h17.3Z"
114+
/>
115+
<path
116+
class="g"
117+
d="m430.9,60.2c0-10.2,7.8-15.8,22-16.7l12.7-.8v-3.1c0-4.4-3.2-6.8-8.1-6.8s-7.9,2.5-8.3,5.9h-15.6c.4-11,10.1-18.3,24.8-18.3s24.1,7.4,24.1,18.3v37.2h-16.8v-7.8h-.3c-2.9,5.5-9.6,8.5-16.2,8.5-10.2,0-18.4-6.7-18.4-16.5Zm34.8-3.9v-3.8l-10,.7c-4.9.3-7.6,2.4-7.6,5.8s2.9,5.6,7.3,5.6,10.3-3.3,10.3-8.3Z"
118+
/>
119+
<path
120+
class="g"
121+
d="m491.2,21.6h16.8v10.2h.3c2-7.2,6.4-10.9,12.8-10.9s3.3.3,4.4.7v14.8c-1.5-.6-3.5-1-5.6-1-7.4,0-11.5,4.2-11.5,11.8v28.7h-17.3V21.6Z"
122+
/>
123+
<path
124+
class="g"
125+
d="m552.6,9.6v12h9.8v12.8h-9.8v23.2c0,3.8,2.1,5.7,6.3,5.7s2.5,0,3.5-.2v12.3c-1.7.4-4.2.7-7.6.7-14,0-19.5-4.3-19.5-15v-26.7h-7.3v-12.8h7.3v-12h17.3Z"
126+
/>
127+
</g>
128+
</g>
129+
</svg>
130+
</div>
131+
<div class="kickstart-promo__content">
132+
<h2 class="kickstart-promo__title">
133+
AI-generated Vue forms in seconds
134+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
135+
<path
136+
fill="currentColor"
137+
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
138+
/>
139+
</svg>
140+
</h2>
141+
<p class="kickstart-promo__description">
142+
KickStart your next FormKit form in seconds. Generate from a prompt,
143+
image, or text attachment. Copy & paste as Vue components or FormKit
144+
schema.
145+
</p>
146+
</div>
147+
</div>
148+
</template>
149+
150+
<style scoped>
151+
.kickstart-promo {
152+
background: #1f478d;
153+
border: 1px solid #b1e2fd;
154+
padding: 1rem;
155+
border-radius: 0.5rem;
156+
display: flex;
157+
flex-direction: column;
158+
position: relative;
159+
max-width: 900px;
160+
margin: 0 auto;
161+
margin-bottom: 2em;
162+
box-shadow: none;
163+
transition: all 0.2s ease;
164+
overflow: hidden;
165+
cursor: pointer;
166+
}
167+
.kickstart-promo::before {
168+
content: "";
169+
position: absolute;
170+
inset: 0;
171+
z-index: 2;
172+
filter: brightness(80%) contrast(100%);
173+
mix-blend-mode: overlay;
174+
background-size: cover;
175+
background-image: radial-gradient(
176+
circle at 50% 40%,
177+
rgba(0, 0, 0, 0),
178+
rgba(0, 0, 0, 0.25)
179+
),
180+
url("data:image/svg+xml,%3Csvg viewBox='0 0 10000 10000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
181+
}
182+
.kickstart-promo:hover {
183+
transform: translateY(-0.25rem);
184+
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
185+
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
186+
filter: brightness(120%);
187+
}
188+
[data-dark-mode="true"] .kickstart-promo {
189+
background: #5d0667;
190+
border: 1px solid #650a75;
191+
}
192+
@media (min-width: 768px) {
193+
.kickstart-promo {
194+
flex-direction: row;
195+
}
196+
}
197+
@media (min-width: 960px) {
198+
.kickstart-promo {
199+
margin-bottom: -2em;
200+
}
201+
}
202+
203+
.announcement-icon {
204+
position: absolute;
205+
top: 0.5rem;
206+
right: 0.5rem;
207+
padding: 0.5rem;
208+
background: #fff;
209+
color: #1f2a8d;
210+
border-radius: 50%;
211+
font-size: 2rem;
212+
width: 1rem;
213+
height: 1rem;
214+
}
215+
.announcement-icon svg {
216+
display: block;
217+
width: 100%;
218+
height: 100%;
219+
}
220+
221+
.kickstart-promo__cta {
222+
display: block;
223+
width: 100%;
224+
height: 100%;
225+
position: absolute;
226+
top: 0;
227+
left: 0;
228+
z-index: 5;
229+
}
230+
231+
.kickstart-promo__image {
232+
width: 100%;
233+
max-width: 10rem;
234+
aspect-ratio: 523/191;
235+
mix-blend-mode: screen;
236+
position: relative;
237+
z-index: 1;
238+
}
239+
.kickstart-promo__image svg {
240+
width: 100%;
241+
height: 100%;
242+
filter: invert(1);
243+
}
244+
245+
.kickstart-promo__content {
246+
color: white;
247+
padding: 1rem;
248+
display: flex;
249+
flex-direction: column;
250+
justify-content: center;
251+
align-items: center;
252+
position: relative;
253+
z-index: 2;
254+
}
255+
@media (min-width: 768px) {
256+
.kickstart-promo__content {
257+
justify-content: flex-start;
258+
align-items: flex-start;
259+
padding-left: 2rem;
260+
}
261+
}
262+
263+
.kickstart-promo__title {
264+
margin-top: 0.25rem;
265+
margin-bottom: 0.1rem;
266+
padding-top: 0;
267+
font-size: 1.25rem;
268+
color: #fff;
269+
letter-spacing: -0.05rem;
270+
}
271+
@media (min-width: 768px) {
272+
.kickstart-promo {
273+
font-size: 1.33rem;
274+
}
275+
}
276+
277+
.kickstart-promo__title svg {
278+
width: 0.75em;
279+
height: 0.75em;
280+
margin-left: 0.25em;
281+
}
282+
283+
.kickstart-promo__description {
284+
opacity: 0.66;
285+
font-size: 0.85rem;
286+
}
287+
.kickstart-promo__content p:last-child {
288+
margin-bottom: 0;
289+
}
290+
</style>

‎docs/src/pages/PageHome.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import SectionUsage from "../sections/SectionUsage.vue"
1010
import SectionExamples from "../sections/SectionExamples.vue"
1111
import SectionPlugins from "../sections/SectionPlugins.vue"
1212
import ReducedMotionWarning from "../components/ReducedMotionWarning.vue"
13-
import TempoPromo from "../components/TempoPromo.vue"
13+
import KickstartPromo from "../components/KickstartPromo.vue"
1414
1515
const prefersReducedMotion = ref(false)
1616
onMounted(() => {
@@ -23,7 +23,7 @@ onMounted(() => {
2323
<template>
2424
<TheHeader />
2525
<HeroTitle />
26-
<TempoPromo />
26+
<KickstartPromo />
2727
<div class="documentation">
2828
<Navigation />
2929
<ReducedMotionWarning v-if="prefersReducedMotion" />

0 commit comments

Comments
 (0)