@ossy/booking 1.15.5 → 1.15.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -7
- package/src/home.page.jsx +373 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ossy/booking",
|
|
3
3
|
"description": "Booking feature package — services, availability, and appointment management for Ossy consultants",
|
|
4
|
-
"version": "1.15.
|
|
4
|
+
"version": "1.15.6",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.js",
|
|
7
7
|
"module": "./src/index.js",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"src": "./src"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@ossy/email": "^1.5.
|
|
18
|
-
"@ossy/event-store": "^1.7.
|
|
19
|
-
"@ossy/observability": "^1.7.
|
|
20
|
-
"@ossy/platform": "^1.38.
|
|
21
|
-
"@ossy/resources": "^1.11.
|
|
17
|
+
"@ossy/email": "^1.5.6",
|
|
18
|
+
"@ossy/event-store": "^1.7.6",
|
|
19
|
+
"@ossy/observability": "^1.7.6",
|
|
20
|
+
"@ossy/platform": "^1.38.6",
|
|
21
|
+
"@ossy/resources": "^1.11.6"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@ossy/design-system": ">=1.0.0",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"/src",
|
|
35
35
|
"README.md"
|
|
36
36
|
],
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "72d150cf20ff7ba25b328bc5b429b065c2840b2b"
|
|
38
38
|
}
|
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { View, Title, Text, Button, Icon2, PageSection } from '@ossy/design-system'
|
|
3
|
+
|
|
4
|
+
export const metadata = {
|
|
5
|
+
id: 'booking/home',
|
|
6
|
+
title: 'Bokningskalender – Ossy',
|
|
7
|
+
description: 'Låt kunder boka tid direkt. Dela en länk, kunder väljer tid, du fokuserar på jobbet.',
|
|
8
|
+
path: { sv: '/boka', en: '/booking' },
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// ─── Pain points ─────────────────────────────────────────────────────────────
|
|
12
|
+
|
|
13
|
+
const painPoints = [
|
|
14
|
+
{
|
|
15
|
+
icon: 'email',
|
|
16
|
+
title: 'E-postpingpong',
|
|
17
|
+
text: 'Fram och tillbaka i flera dagar bara för att hitta ett gemensamt tidslucka.',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
icon: 'warning',
|
|
21
|
+
title: 'Dubbelbokningar',
|
|
22
|
+
text: 'En kalender här, en länk där – det är lätt att råka boka samma tid två gånger.',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
icon: 'alert',
|
|
26
|
+
title: 'Missade bokningar',
|
|
27
|
+
text: 'Påminnelser glöms bort. Kunden dyker inte upp. Tid och pengar går till spillo.',
|
|
28
|
+
},
|
|
29
|
+
]
|
|
30
|
+
|
|
31
|
+
// ─── Features ────────────────────────────────────────────────────────────────
|
|
32
|
+
|
|
33
|
+
const features = [
|
|
34
|
+
{
|
|
35
|
+
icon: 'share',
|
|
36
|
+
title: 'Din bokningssida',
|
|
37
|
+
text: 'En personlig sida på ossy.se/boka/ditt-namn. Dela länken med kunder – det är allt som krävs.',
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
icon: 'check-circle',
|
|
41
|
+
title: 'Automatiska bekräftelser',
|
|
42
|
+
text: 'Kunden får en bekräftelse med kalenderinbjudan direkt. Inga manuella steg från din sida.',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
icon: 'calendar',
|
|
46
|
+
title: 'Hantera din tid',
|
|
47
|
+
text: 'Ange när du är tillgänglig. Vi visar bara lediga tider – aldrig dubbelbokade.',
|
|
48
|
+
},
|
|
49
|
+
]
|
|
50
|
+
|
|
51
|
+
// ─── Personas ─────────────────────────────────────────────────────────────────
|
|
52
|
+
|
|
53
|
+
const personas = [
|
|
54
|
+
{ icon: 'person', label: 'Coach', text: 'Boka coachingsessioner utan mellanhänder.' },
|
|
55
|
+
{ icon: 'code', label: 'IT-konsult', text: 'Låt kunder boka möten direkt i din kalender.' },
|
|
56
|
+
{ icon: 'brush', label: 'Designer', text: 'Fyll din agenda med kundmöten på dina villkor.' },
|
|
57
|
+
]
|
|
58
|
+
|
|
59
|
+
// ─── Pricing ─────────────────────────────────────────────────────────────────
|
|
60
|
+
|
|
61
|
+
const included = [
|
|
62
|
+
{ icon: 'infinity', text: 'Obegränsade bokningar' },
|
|
63
|
+
{ icon: 'bell', text: 'Automatiska påminnelser' },
|
|
64
|
+
{ icon: 'calendar', text: 'Kalenderinbjudningar' },
|
|
65
|
+
{ icon: 'link', text: 'Din personliga bokningssida' },
|
|
66
|
+
]
|
|
67
|
+
|
|
68
|
+
// ─── Page ─────────────────────────────────────────────────────────────────────
|
|
69
|
+
|
|
70
|
+
export default function BookingHomePage() {
|
|
71
|
+
return (
|
|
72
|
+
<>
|
|
73
|
+
<style href="@ossy/booking-sales-page" precedence="high">{`
|
|
74
|
+
.bsp-hero {
|
|
75
|
+
min-height: min(52vh, 560px);
|
|
76
|
+
padding: var(--space-xl) var(--space-m);
|
|
77
|
+
background: linear-gradient(
|
|
78
|
+
155deg,
|
|
79
|
+
hsl(200, 100%, 97%) 0%,
|
|
80
|
+
hsl(170, 60%, 94%) 60%,
|
|
81
|
+
hsl(160, 70%, 90%) 100%
|
|
82
|
+
);
|
|
83
|
+
border-radius: var(--space-m);
|
|
84
|
+
text-align: center;
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
gap: var(--space-l);
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.bsp-section {
|
|
94
|
+
padding: var(--space-xl) var(--space-m);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.bsp-grid-3 {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-template-columns: repeat(3, 1fr);
|
|
100
|
+
gap: var(--space-m);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.bsp-grid-2 {
|
|
104
|
+
display: grid;
|
|
105
|
+
grid-template-columns: repeat(3, 1fr);
|
|
106
|
+
gap: var(--space-m);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@media (max-width: 860px) {
|
|
110
|
+
.bsp-grid-3,
|
|
111
|
+
.bsp-grid-2 {
|
|
112
|
+
grid-template-columns: 1fr;
|
|
113
|
+
}
|
|
114
|
+
.bsp-hero {
|
|
115
|
+
padding: var(--space-l) var(--space-s);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@media (min-width: 860px) and (max-width: 1100px) {
|
|
120
|
+
.bsp-grid-3 {
|
|
121
|
+
grid-template-columns: repeat(3, 1fr);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
`}</style>
|
|
125
|
+
|
|
126
|
+
<PageSection maxWidth="l" gap="l" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xl)' }}>
|
|
127
|
+
|
|
128
|
+
{/* ── Hero ─────────────────────────────────────────────────────── */}
|
|
129
|
+
<div className="bsp-hero">
|
|
130
|
+
<View gap="m" alignItems="center" style={{ maxWidth: 680 }}>
|
|
131
|
+
<Title as="h1" variant="display" style={{ textWrap: 'balance', letterSpacing: '-0.5px' }}>
|
|
132
|
+
Låt kunder boka tid direkt
|
|
133
|
+
</Title>
|
|
134
|
+
<Text style={{ fontSize: '1.2rem', lineHeight: 1.6, opacity: 0.8 }}>
|
|
135
|
+
Dela en länk. Kunder väljer tid. Du fokuserar på jobbet.
|
|
136
|
+
</Text>
|
|
137
|
+
</View>
|
|
138
|
+
|
|
139
|
+
<View layout="row" gap="m" justifyContent="center" style={{ flexWrap: 'wrap' }}>
|
|
140
|
+
<Button variant="cta" href="/sign-up" style={{ padding: '12px 32px', fontSize: '1rem' }}>
|
|
141
|
+
Kom igång gratis
|
|
142
|
+
</Button>
|
|
143
|
+
<Button variant="secondary" href="/boka/demo" style={{ padding: '12px 32px', fontSize: '1rem' }}>
|
|
144
|
+
Se ett exempel
|
|
145
|
+
</Button>
|
|
146
|
+
</View>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
{/* ── Problem ──────────────────────────────────────────────────── */}
|
|
150
|
+
<View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
|
|
151
|
+
<View gap="s" alignItems="center">
|
|
152
|
+
<Title as="h2" variant="secondary">
|
|
153
|
+
Trött på e-postpingpong för att hitta en tid som passar?
|
|
154
|
+
</Title>
|
|
155
|
+
<Text style={{ maxWidth: 560, opacity: 0.75 }}>
|
|
156
|
+
Du är inte ensam. De flesta konsulter och frilansare slösar timmar i veckan på att koordinera möten.
|
|
157
|
+
</Text>
|
|
158
|
+
</View>
|
|
159
|
+
|
|
160
|
+
<div className="bsp-grid-3">
|
|
161
|
+
{painPoints.map(({ icon, title, text }) => (
|
|
162
|
+
<View
|
|
163
|
+
key={title}
|
|
164
|
+
gap="m"
|
|
165
|
+
inset="l"
|
|
166
|
+
roundness="m"
|
|
167
|
+
style={{
|
|
168
|
+
border: '1px solid var(--separator)',
|
|
169
|
+
background: 'hsl(0, 0%, 99%)',
|
|
170
|
+
textAlign: 'left',
|
|
171
|
+
}}
|
|
172
|
+
>
|
|
173
|
+
<View
|
|
174
|
+
style={{
|
|
175
|
+
width: 44,
|
|
176
|
+
height: 44,
|
|
177
|
+
borderRadius: 12,
|
|
178
|
+
background: 'hsl(0, 80%, 95%)',
|
|
179
|
+
display: 'flex',
|
|
180
|
+
alignItems: 'center',
|
|
181
|
+
justifyContent: 'center',
|
|
182
|
+
}}
|
|
183
|
+
>
|
|
184
|
+
<Icon2 name={icon} size="s" />
|
|
185
|
+
</View>
|
|
186
|
+
<Title as="h3" variant="tertiary">{title}</Title>
|
|
187
|
+
<Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
|
|
188
|
+
</View>
|
|
189
|
+
))}
|
|
190
|
+
</div>
|
|
191
|
+
</View>
|
|
192
|
+
|
|
193
|
+
{/* ── Features ─────────────────────────────────────────────────── */}
|
|
194
|
+
<View
|
|
195
|
+
gap="l"
|
|
196
|
+
inset="l"
|
|
197
|
+
roundness="m"
|
|
198
|
+
className="bsp-section"
|
|
199
|
+
style={{
|
|
200
|
+
background: 'hsl(170, 30%, 97%)',
|
|
201
|
+
border: '1px solid hsl(170, 30%, 90%)',
|
|
202
|
+
}}
|
|
203
|
+
>
|
|
204
|
+
<View gap="s" alignItems="center" style={{ textAlign: 'center' }}>
|
|
205
|
+
<Title as="h2" variant="secondary">Allt du behöver, inget du inte behöver</Title>
|
|
206
|
+
<Text style={{ opacity: 0.75 }}>Enkelt att komma igång. Kraftfullt nog att lita på varje dag.</Text>
|
|
207
|
+
</View>
|
|
208
|
+
|
|
209
|
+
<div className="bsp-grid-3">
|
|
210
|
+
{features.map(({ icon, title, text }) => (
|
|
211
|
+
<View
|
|
212
|
+
key={title}
|
|
213
|
+
gap="m"
|
|
214
|
+
inset="l"
|
|
215
|
+
roundness="m"
|
|
216
|
+
style={{
|
|
217
|
+
background: 'hsl(0, 0%, 100%)',
|
|
218
|
+
border: '1px solid hsl(170, 20%, 88%)',
|
|
219
|
+
boxShadow: '0 2px 8px hsl(170, 30%, 88%)',
|
|
220
|
+
}}
|
|
221
|
+
>
|
|
222
|
+
<View
|
|
223
|
+
style={{
|
|
224
|
+
width: 48,
|
|
225
|
+
height: 48,
|
|
226
|
+
borderRadius: 14,
|
|
227
|
+
background: 'hsl(167, 89%, 43%)',
|
|
228
|
+
display: 'flex',
|
|
229
|
+
alignItems: 'center',
|
|
230
|
+
justifyContent: 'center',
|
|
231
|
+
}}
|
|
232
|
+
>
|
|
233
|
+
<Icon2 name={icon} size="s" style={{ color: 'white' }} />
|
|
234
|
+
</View>
|
|
235
|
+
<Title as="h3" variant="tertiary">{title}</Title>
|
|
236
|
+
<Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
|
|
237
|
+
</View>
|
|
238
|
+
))}
|
|
239
|
+
</div>
|
|
240
|
+
</View>
|
|
241
|
+
|
|
242
|
+
{/* ── Social proof ─────────────────────────────────────────────── */}
|
|
243
|
+
<View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
|
|
244
|
+
<View gap="s" alignItems="center">
|
|
245
|
+
<Title as="h2" variant="secondary">Byggd för konsulter och frilansare</Title>
|
|
246
|
+
<Text style={{ opacity: 0.75, maxWidth: 500 }}>
|
|
247
|
+
Oavsett vad du jobbar med – om du säljer din tid, passar Ossy.
|
|
248
|
+
</Text>
|
|
249
|
+
</View>
|
|
250
|
+
|
|
251
|
+
<div className="bsp-grid-3">
|
|
252
|
+
{personas.map(({ icon, label, text }) => (
|
|
253
|
+
<View
|
|
254
|
+
key={label}
|
|
255
|
+
gap="m"
|
|
256
|
+
inset="l"
|
|
257
|
+
roundness="m"
|
|
258
|
+
alignItems="center"
|
|
259
|
+
style={{
|
|
260
|
+
border: '1px solid var(--separator)',
|
|
261
|
+
textAlign: 'center',
|
|
262
|
+
}}
|
|
263
|
+
>
|
|
264
|
+
<View
|
|
265
|
+
style={{
|
|
266
|
+
width: 52,
|
|
267
|
+
height: 52,
|
|
268
|
+
borderRadius: '50%',
|
|
269
|
+
background: 'hsl(200, 60%, 93%)',
|
|
270
|
+
display: 'flex',
|
|
271
|
+
alignItems: 'center',
|
|
272
|
+
justifyContent: 'center',
|
|
273
|
+
}}
|
|
274
|
+
>
|
|
275
|
+
<Icon2 name={icon} size="m" />
|
|
276
|
+
</View>
|
|
277
|
+
<Title as="h3" variant="tertiary">{label}</Title>
|
|
278
|
+
<Text variant="small" style={{ opacity: 0.75, lineHeight: 1.6 }}>{text}</Text>
|
|
279
|
+
</View>
|
|
280
|
+
))}
|
|
281
|
+
</div>
|
|
282
|
+
</View>
|
|
283
|
+
|
|
284
|
+
{/* ── Pricing ──────────────────────────────────────────────────── */}
|
|
285
|
+
<View gap="l" className="bsp-section" alignItems="center" style={{ textAlign: 'center' }}>
|
|
286
|
+
<View gap="s" alignItems="center">
|
|
287
|
+
<Title as="h2" variant="secondary">Enkel och transparent prissättning</Title>
|
|
288
|
+
<Text style={{ opacity: 0.75 }}>Inga överraskningar. Avsluta när du vill.</Text>
|
|
289
|
+
</View>
|
|
290
|
+
|
|
291
|
+
<View
|
|
292
|
+
gap="l"
|
|
293
|
+
inset="xl"
|
|
294
|
+
roundness="m"
|
|
295
|
+
alignItems="center"
|
|
296
|
+
style={{
|
|
297
|
+
background: 'hsl(0, 0%, 100%)',
|
|
298
|
+
border: '2px solid hsl(167, 89%, 43%)',
|
|
299
|
+
boxShadow: '0 4px 24px hsl(167, 89%, 88%)',
|
|
300
|
+
maxWidth: 420,
|
|
301
|
+
width: '100%',
|
|
302
|
+
}}
|
|
303
|
+
>
|
|
304
|
+
<View gap="xs" alignItems="center">
|
|
305
|
+
<Text variant="small" style={{ opacity: 0.6, letterSpacing: 1, textTransform: 'uppercase' }}>
|
|
306
|
+
Bokningskalender
|
|
307
|
+
</Text>
|
|
308
|
+
<Title as="p" variant="display" style={{ lineHeight: 1, letterSpacing: '-1px' }}>
|
|
309
|
+
299
|
|
310
|
+
<span style={{ fontSize: '1.2rem', fontWeight: 500, opacity: 0.7 }}> SEK/mån</span>
|
|
311
|
+
</Title>
|
|
312
|
+
</View>
|
|
313
|
+
|
|
314
|
+
<View gap="s" style={{ width: '100%', textAlign: 'left' }}>
|
|
315
|
+
{included.map(({ icon, text }) => (
|
|
316
|
+
<View key={text} layout="row" gap="s" alignItems="center">
|
|
317
|
+
<Icon2 name={icon} size="xs" style={{ color: 'hsl(167, 89%, 43%)', flexShrink: 0 }} />
|
|
318
|
+
<Text variant="small">{text}</Text>
|
|
319
|
+
</View>
|
|
320
|
+
))}
|
|
321
|
+
</View>
|
|
322
|
+
|
|
323
|
+
<Button
|
|
324
|
+
variant="cta"
|
|
325
|
+
href="/sign-up"
|
|
326
|
+
style={{ width: '100%', padding: '14px 0', fontSize: '1rem', textAlign: 'center' }}
|
|
327
|
+
>
|
|
328
|
+
Starta din bokningssida
|
|
329
|
+
</Button>
|
|
330
|
+
|
|
331
|
+
<Text variant="small" style={{ opacity: 0.5 }}>
|
|
332
|
+
Inget betalkort krävs för att komma igång.
|
|
333
|
+
</Text>
|
|
334
|
+
</View>
|
|
335
|
+
</View>
|
|
336
|
+
|
|
337
|
+
{/* ── Footer CTA ───────────────────────────────────────────────── */}
|
|
338
|
+
<View
|
|
339
|
+
gap="l"
|
|
340
|
+
inset="xl"
|
|
341
|
+
roundness="m"
|
|
342
|
+
alignItems="center"
|
|
343
|
+
style={{
|
|
344
|
+
background: 'linear-gradient(135deg, hsl(200, 100%, 17%) 0%, hsl(170, 70%, 22%) 100%)',
|
|
345
|
+
textAlign: 'center',
|
|
346
|
+
}}
|
|
347
|
+
>
|
|
348
|
+
<View gap="m" alignItems="center" style={{ maxWidth: 540 }}>
|
|
349
|
+
<Title
|
|
350
|
+
as="h2"
|
|
351
|
+
variant="secondary"
|
|
352
|
+
style={{ color: 'hsl(0, 0%, 98%)', letterSpacing: '-0.25px' }}
|
|
353
|
+
>
|
|
354
|
+
Redo att sluta jaga tider?
|
|
355
|
+
</Title>
|
|
356
|
+
<Text style={{ color: 'hsl(0, 0%, 80%)', fontSize: '1.05rem', lineHeight: 1.6 }}>
|
|
357
|
+
Kom igång på under fem minuter. Din bokningssida är live direkt.
|
|
358
|
+
</Text>
|
|
359
|
+
</View>
|
|
360
|
+
|
|
361
|
+
<Button
|
|
362
|
+
variant="cta"
|
|
363
|
+
href="/sign-up"
|
|
364
|
+
style={{ padding: '14px 40px', fontSize: '1.05rem' }}
|
|
365
|
+
>
|
|
366
|
+
Kom igång gratis
|
|
367
|
+
</Button>
|
|
368
|
+
</View>
|
|
369
|
+
|
|
370
|
+
</PageSection>
|
|
371
|
+
</>
|
|
372
|
+
)
|
|
373
|
+
}
|