Skip to content

Commit fa23bfe

Browse files
seferturanseferturan
committed
feat: adds vip upsell cta to welcome page and banner
1 parent 8c7011f commit fa23bfe

7 files changed

Lines changed: 331 additions & 64 deletions

File tree

‎projects/client/i18n/meta/en.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7427,6 +7427,18 @@
74277427
"default": "See all import options",
74287428
"description": "Link on the Welcome page to the full data import settings page."
74297429
},
7430+
"welcome_vip_upsell_heading": {
7431+
"default": "Become a VIP",
7432+
"description": "Heading on the compact VIP upsell shown to free members on the Welcome page."
7433+
},
7434+
"welcome_vip_upsell_description": {
7435+
"default": "Want to support our community or get more from Trakt?",
7436+
"description": "Body copy on the compact VIP upsell shown to free members on the Welcome page, inviting them to upgrade and support the team."
7437+
},
7438+
"welcome_outro_heading": {
7439+
"default": "Now the fun begins.",
7440+
"description": "Closing heading at the bottom of the Welcome page, above the start exploring button."
7441+
},
74307442
"welcome_tvtime_badge": {
74317443
"default": "TV Time is shutting down",
74327444
"description": "Badge on the prominent TV Time notice highlighting that TV Time is closing."

‎projects/client/src/lib/components/icons/SparkleStarIcon.svelte‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
<svg
22
xmlns="http://www.w3.org/2000/svg"
3-
width="24"
4-
height="24"
5-
viewBox="0 0 256 256"
6-
fill="none"
3+
height="24px"
4+
viewBox="0 0 24 24"
5+
width="24px"
6+
fill="currentColor"
77
>
8+
<!-- Main 4-point star, weighted toward the lower-left. -->
89
<path
9-
fill="currentColor"
10-
d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144Z"
10+
d="M10 5.5 L11.6 12.4 L18.5 14 L11.6 15.6 L10 22.5 L8.4 15.6 L1.5 14 L8.4 12.4 Z"
11+
/>
12+
<!-- Accent sparkle, top-right. -->
13+
<path
14+
d="M16.3 2 L17.16 4.94 L20.1 5.8 L17.16 6.66 L16.3 9.6 L15.44 6.66 L12.5 5.8 L15.44 4.94 Z"
15+
/>
16+
<!-- Matching accent sparkle, further out. -->
17+
<path
18+
d="M20 7.2 L20.86 10.14 L23.8 11 L20.86 11.86 L20 14.8 L19.14 11.86 L16.2 11 L19.14 10.14 Z"
1119
/>
1220
</svg>

‎projects/client/src/lib/sections/banner/welcome/WelcomeBanner.svelte‎

Lines changed: 135 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
22
import Button from "$lib/components/buttons/Button.svelte";
3+
import SparkleStarIcon from "$lib/components/icons/SparkleStarIcon.svelte";
34
import MessageWithLink from "$lib/components/link/MessageWithLink.svelte";
45
import LogoMarkCircle from "$lib/components/logo/LogoMarkCircle.svelte";
56
import * as m from "$lib/features/i18n/messages.ts";
67
import RenderFor from "$lib/guards/RenderFor.svelte";
8+
import GetVIPLink from "$lib/sections/navbar/components/GetVIPLink.svelte";
79
import { UrlBuilder } from "$lib/utils/url/UrlBuilder.ts";
810
import BannerContainer from "../_internal/BannerContainer.svelte";
911
import DismissButton from "../_internal/DismissButton.svelte";
@@ -19,38 +21,61 @@
1921
<DismissButton onDismiss={dismiss} />
2022
</div>
2123

22-
<RenderFor audience="all" device={["tablet-lg", "desktop"]}>
23-
<div class="welcome-banner-icon" aria-hidden="true">
24-
<LogoMarkCircle />
24+
<div class="welcome-banner-main">
25+
<RenderFor audience="all" device={["tablet-lg", "desktop"]}>
26+
<div class="welcome-banner-icon" aria-hidden="true">
27+
<LogoMarkCircle />
28+
</div>
29+
</RenderFor>
30+
31+
<div class="welcome-banner-content">
32+
<h2 class="bold welcome-banner-title">
33+
{m.welcome_banner_heading()}
34+
<RenderFor audience="all" device={["tablet-sm", "mobile"]}>
35+
<LogoMarkCircle />
36+
</RenderFor>
37+
</h2>
38+
<p class="secondary">
39+
<MessageWithLink
40+
message={m.welcome_banner_description()}
41+
href={UrlBuilder.welcome()}
42+
target="_self"
43+
/>
44+
</p>
2545
</div>
26-
</RenderFor>
2746

28-
<div class="welcome-banner-content">
29-
<h2 class="bold welcome-banner-title">
30-
{m.welcome_banner_heading()}
31-
<RenderFor audience="all" device={["tablet-sm", "mobile"]}>
32-
<LogoMarkCircle />
33-
</RenderFor>
34-
</h2>
35-
<p class="secondary">
36-
<MessageWithLink
37-
message={m.welcome_banner_description()}
38-
href={UrlBuilder.welcome()}
39-
target="_self"
40-
/>
41-
</p>
47+
<Button
48+
href={UrlBuilder.settings.data()}
49+
color="purple"
50+
variant="primary"
51+
style="flat"
52+
size="small"
53+
label={m.welcome_banner_action()}
54+
>
55+
{m.welcome_banner_action()}
56+
</Button>
4257
</div>
4358

44-
<Button
45-
href={UrlBuilder.settings.data()}
46-
color="purple"
47-
variant="primary"
48-
style="flat"
49-
size="small"
50-
label={m.welcome_banner_action()}
51-
>
52-
{m.welcome_banner_action()}
53-
</Button>
59+
<RenderFor audience="free">
60+
<div class="welcome-banner-upsell">
61+
<div class="upsell-lead">
62+
<span class="upsell-cue" aria-hidden="true">
63+
<SparkleStarIcon />
64+
</span>
65+
66+
<div class="upsell-copy">
67+
<p class="bold">{m.welcome_vip_upsell_heading()}</p>
68+
<p class="secondary">
69+
{m.welcome_vip_upsell_description()}
70+
</p>
71+
</div>
72+
</div>
73+
74+
<div class="upsell-cta">
75+
<GetVIPLink source="welcome-banner" />
76+
</div>
77+
</div>
78+
</RenderFor>
5479
</section>
5580
</BannerContainer>
5681
{/if}
@@ -63,7 +88,7 @@
6388
overflow: hidden;
6489
6590
display: flex;
66-
align-items: center;
91+
flex-direction: column;
6792
gap: var(--gap-l);
6893
6994
width: 100%;
@@ -98,13 +123,23 @@
98123
);
99124
}
100125
126+
@include for-tablet-sm-and-below {
127+
padding: var(--gap-l);
128+
padding-inline-end: var(--ni-48);
129+
}
130+
}
131+
132+
.welcome-banner-main {
133+
position: relative;
134+
135+
display: flex;
136+
align-items: center;
137+
gap: var(--gap-l);
138+
101139
@include for-tablet-sm-and-below {
102140
flex-direction: column;
103141
align-items: flex-start;
104142
gap: var(--gap-m);
105-
106-
padding: var(--gap-l);
107-
padding-inline-end: var(--ni-48);
108143
}
109144
}
110145
@@ -156,4 +191,72 @@
156191
height: var(--ni-18);
157192
}
158193
}
194+
195+
.welcome-banner-upsell {
196+
position: relative;
197+
198+
display: flex;
199+
align-items: center;
200+
gap: var(--gap-m);
201+
202+
padding-block-start: var(--gap-s);
203+
border-block-start: var(--ni-1) solid
204+
color-mix(in srgb, var(--purple-500) 30%, transparent);
205+
}
206+
207+
.upsell-lead {
208+
display: flex;
209+
align-items: center;
210+
gap: var(--gap-l);
211+
min-width: 0;
212+
213+
flex: 1 1 auto;
214+
215+
@include for-tablet-sm-and-below {
216+
gap: var(--gap-m);
217+
}
218+
}
219+
220+
.upsell-cue {
221+
display: inline-flex;
222+
align-items: center;
223+
justify-content: center;
224+
flex-shrink: 0;
225+
226+
width: var(--ni-48);
227+
height: var(--ni-48);
228+
box-sizing: border-box;
229+
230+
color: var(--color-foreground);
231+
232+
:global(svg) {
233+
width: var(--ni-24);
234+
height: var(--ni-24);
235+
}
236+
237+
@include for-tablet-sm-and-below {
238+
display: none;
239+
}
240+
}
241+
242+
.upsell-copy {
243+
display: flex;
244+
flex-direction: column;
245+
gap: var(--ni-2);
246+
min-width: 0;
247+
248+
flex: 1 1 auto;
249+
250+
@include for-mobile {
251+
p {
252+
font-size: var(--font-size-text-small);
253+
}
254+
}
255+
}
256+
257+
.upsell-cta {
258+
display: flex;
259+
align-items: center;
260+
flex-shrink: 0;
261+
}
159262
</style>

‎projects/client/src/lib/sections/welcome/Welcome.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
import WelcomeBackdrop from "./components/WelcomeBackdrop.svelte";
33
import WelcomeImport from "./components/WelcomeImport.svelte";
44
import WelcomeIntro from "./components/WelcomeIntro.svelte";
5+
import WelcomeOutro from "./components/WelcomeOutro.svelte";
56
</script>
67

78
<WelcomeBackdrop />
89

910
<div class="trakt-welcome">
1011
<WelcomeIntro />
1112
<WelcomeImport />
13+
<WelcomeOutro />
1214
</div>
1315

1416
<style lang="scss">

‎projects/client/src/lib/sections/welcome/components/WelcomeIntro.svelte‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<script lang="ts">
2-
import Button from "$lib/components/buttons/Button.svelte";
3-
import PopcornIcon from "$lib/components/icons/PopcornIcon.svelte";
42
import { useUser } from "$lib/features/auth/stores/useUser.ts";
53
import * as m from "$lib/features/i18n/messages.ts";
64
import { toDisplayableName } from "$lib/utils/profile/toDisplayableName.ts";
7-
import { UrlBuilder } from "$lib/utils/url/UrlBuilder.ts";
85
96
const { user } = useUser();
107
@@ -22,22 +19,6 @@
2219
<section class="trakt-welcome-intro">
2320
<h1 class="welcome-intro-heading">{heading}</h1>
2421
<p class="secondary welcome-intro-description">{m.welcome_intro()}</p>
25-
26-
<div class="welcome-intro-actions">
27-
<Button
28-
href={UrlBuilder.home()}
29-
color="purple"
30-
variant="primary"
31-
style="flat"
32-
size="small"
33-
label={m.welcome_get_started()}
34-
>
35-
{m.welcome_get_started()}
36-
{#snippet icon()}
37-
<PopcornIcon />
38-
{/snippet}
39-
</Button>
40-
</div>
4122
</section>
4223

4324
<style lang="scss">
@@ -84,11 +65,4 @@
8465
font-size: var(--font-size-text);
8566
}
8667
}
87-
88-
.welcome-intro-actions {
89-
display: flex;
90-
justify-content: center;
91-
92-
margin-block-start: var(--gap-s);
93-
}
9468
</style>

0 commit comments

Comments
 (0)