Skip to content

Commit 859ff1f

Browse files
alex-fusionauthalex-fusionauth
committed
add pro
1 parent 1858ceb commit 859ff1f

File tree

9 files changed

+141
-19
lines changed

9 files changed

+141
-19
lines changed

‎apps/codingcatdev/src/routes/(home-partials)/(home-campaign)/CodeSvg.svelte

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
1+
<script>
2+
import { CodeBracketSquare } from '@steeze-ui/heroicons';
3+
import { Icon } from '@steeze-ui/svelte-icon';
4+
</script>
5+
16
<div class="mx-auto my-3">
27
<div class="relative d-inline-block z-1">
3-
<svg
4-
aria-hidden="true"
5-
height="24"
6-
viewBox="0 0 24 24"
7-
version="1.1"
8-
width="24"
9-
data-view-component="true"
10-
class="inline-block overflow-visible align-text-bottom fill-on-primary-token"
11-
>
12-
<path
13-
d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06Zm-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0Z"
14-
/>
15-
</svg>
16-
<span class="absolute left-0 top-0 h-full w-full bg-surface-900-50-token -z-10 blur-lg" />
8+
<Icon src={CodeBracketSquare} theme="solid" class="w-8" />
179
</div>
1810
</div>

‎apps/codingcatdev/src/routes/(home-partials)/(home-campaign)/GitLineGradient.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
export let rotate = false;
33
</script>
44

5-
<div class={`w-[3px] h-full rounded mx-auto ${rotate && 'rotate-180'}`} />
5+
<div class={`w-[3px] h-full mx-auto ${rotate && 'rotate-180'}`} />
66

77
<style>
88
div {

‎apps/codingcatdev/src/routes/(home-partials)/(home-latest-course)/CoursesSvg.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@
55
<div class="mx-auto my-3">
66
<div class="relative d-inline-block z-1">
77
<Courses />
8-
<span class="absolute left-0 top-0 h-full w-full bg-surface-900-50-token -z-10 blur-lg" />
98
</div>
109
</div>

‎apps/codingcatdev/src/routes/(home-partials)/(home-latest-course)/HomeLatestCourse.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<CoursesSvg />
2020
<GitLineGradient rotate={true} />
2121
</div>
22-
<div class="basis-11/12 pt-44 pl-4 sm:pl-2 -mt-80">
22+
<div class="basis-11/12 pt-44 pl-4 sm:pl-2 -mt-80 pb-8">
2323
<div
2424
class="max-w-6xl -mt-80 flex flex-col gap-8 sm:gap-24 text-surface-50-900-token relative"
2525
>
@@ -91,14 +91,14 @@
9191
</div>
9292
<div class="grid grid-cols-1 sm:grid-rows-2 sm:grid-cols-2 gap-4 sm:gap-8 relative">
9393
<div class="flex sm:justify-end">
94-
<a href="/course/svelte" class="bcu-button sm:bcu-button-xl variant-filled flex gap-1"
94+
<a href="/course/svelte" class="bcu-button md:bcu-button-xl variant-filled flex gap-1"
9595
>Begin Course <Icon src={ArrowRight} theme="solid" class="w-6" />
9696
</a>
9797
</div>
9898
<div class="flex sm:justify-start">
9999
<a
100100
href="/courses"
101-
class="bcu-button sm:bcu-button-xl variant-ghost-surface !text-on-surface-token flex gap-1"
101+
class="bcu-button md:bcu-button-xl variant-ghost-surface !text-on-surface-token flex gap-1"
102102
>Explore other Courses
103103
</a>
104104
</div>

‎apps/codingcatdev/src/routes/(home-partials)/(home-pro-benefits)/CheckBadgeSvg.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import { CheckBadge } from '@steeze-ui/heroicons';
3+
import { Icon } from '@steeze-ui/svelte-icon';
4+
</script>
5+
6+
<div class="mx-auto my-3">
7+
<div class="relative d-inline-block z-1">
8+
<Icon src={CheckBadge} theme="solid" class="w-8" />
9+
</div>
10+
</div>

‎apps/codingcatdev/src/routes/(home-partials)/(home-pro-benefits)/HomeProBenefits.svelte

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script>
2+
import { RocketLaunch, Clock, ChatBubbleBottomCenter } from '@steeze-ui/heroicons';
3+
import { Icon } from '@steeze-ui/svelte-icon';
4+
import GitLineGradient from '../(home-campaign)/GitLineGradient.svelte';
5+
import CheckBadgeSvg from './CheckBadgeSvg.svelte';
6+
import ProSelect from './ProSelect.svelte';
7+
</script>
8+
9+
<section class="bg-primary-200-700-token">
10+
<div
11+
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 2xl:min-h-768 max-w-7xl relative"
12+
>
13+
<div class="flex">
14+
<div class="flex flex-col basis-1/12 relative">
15+
<GitLineGradient />
16+
<CheckBadgeSvg />
17+
<GitLineGradient rotate={true} />
18+
</div>
19+
<div class="basis-11/12 pl-4 sm:pl-2 py-20">
20+
<div class="flex flex-col lg:flex-row gap-8 items-center">
21+
<div class="sm:basis-2/3 flex flex-col justify-center gap-8">
22+
<div class="flex flex-col gap-4">
23+
<h2>Subscribe for Premium Benefits</h2>
24+
<p class="max-w-lg">
25+
Are you ready to take your experience to the next level? Our premium plan unlocks
26+
exclusive benefits that will help you achieve your goals faster.
27+
</p>
28+
</div>
29+
<div class="flex flex-col gap-4">
30+
<div class="flex items-center">
31+
<div class="flex h-full pr-4">
32+
<Icon src={RocketLaunch} theme="solid" class="w-6" />
33+
</div>
34+
<div class="flex flex-col">
35+
<h3>Advanced courses and tutorials</h3>
36+
<p class="max-w-lg">
37+
Get access to advanced courses and tutorials that cover the latest technologies
38+
and best practices in web development
39+
</p>
40+
</div>
41+
</div>
42+
<div class="flex items-center">
43+
<div class="flex h-full pr-4">
44+
<Icon src={Clock} theme="solid" class="w-6" />
45+
</div>
46+
<div class="flex flex-col">
47+
<h3>Lifetime access to all content</h3>
48+
<p class="max-w-lg">
49+
You can learn at your own pace and revisit the material as often as you need to.
50+
</p>
51+
</div>
52+
</div>
53+
<div class="flex items-center">
54+
<div class="flex h-full pr-4">
55+
<Icon src={ChatBubbleBottomCenter} theme="solid" class="w-6" />
56+
</div>
57+
<div class="flex flex-col">
58+
<h3>Personalized support</h3>
59+
<p class="max-w-lg">
60+
You'll get priority access to our support team and receive tailored advice and
61+
guidance to help you overcome any challenges you may face via Discord.
62+
</p>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
<div class="sm:basis-1/3 flex">
68+
<ProSelect />
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</section>

‎apps/codingcatdev/src/routes/(home-partials)/(home-pro-benefits)/ProSelect.svelte

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import { RadioGroup, RadioItem } from '@codingcatdev/blackcatui';
3+
import GitLineGradient from '../(home-campaign)/GitLineGradient.svelte';
4+
5+
let subscription = 1;
6+
</script>
7+
8+
<div class="bcu-card bg-gradient-to-b from-surface-700 to-primary-500 p-8 shadow-lg lg:w-full">
9+
<header class="bcu-card-header flex justify-center">
10+
<RadioGroup hover="hover:variant-ghost-surface" background="bg-primary-200-700-token">
11+
<RadioItem bind:group={subscription} name="justify" value={1}>Annual</RadioItem>
12+
<RadioItem bind:group={subscription} name="justify" value={0}>Monthly</RadioItem>
13+
</RadioGroup>
14+
</header>
15+
<section class="p-8 sm:p-20 flex justify-center text-surface-100">
16+
<div class="flex flex-col items-center relative">
17+
{#if subscription}
18+
<div class="absolute text-2xl top-0 left-0">$</div>
19+
<h6 class="!text-9xl !font-medium">48</h6>
20+
<div class="mb-6">
21+
<span class="font-medium text-xs">Save $12 compared to monthly</span>
22+
</div>
23+
{:else}
24+
<div class="absolute text-2xl top-0 left-0">$</div>
25+
<h6 class="!text-9xl !font-medium">5</h6>
26+
<div class="mb-6"><span class="font-medium text-xs">Just $0.17 per day</span></div>
27+
{/if}
28+
</div>
29+
</section>
30+
<footer class="bcu-card-footer text-surface-100-800-token">
31+
<div class="flex flex-col items-center gap-8">
32+
<a href="/terms-of-use" class="!text-surface-100-800-token">Terms & Conditions</a>
33+
<a href="/login?redirectTo=/dashboard" class="bcu-button variant-filled-surface w-full"
34+
>Let's do it!</a
35+
>
36+
</div>
37+
</footer>
38+
</div>

‎apps/codingcatdev/src/routes/(home-partials)/(home-reviews)/HomeReviews.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,10 @@
5858
</div>
5959
</div>
6060
</section>
61+
62+
<style>
63+
/* Scrollbars are ugly on horizontal */
64+
.scroll-smooth::-webkit-scrollbar {
65+
display: none;
66+
}
67+
</style>

‎apps/codingcatdev/src/routes/+page.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<script>
22
import HomeCampaign from './(home-partials)/(home-campaign)/HomeCampaign.svelte';
33
import HomeLatestCourse from './(home-partials)/(home-latest-course)/HomeLatestCourse.svelte';
4+
import HomeProBenefits from './(home-partials)/(home-pro-benefits)/HomeProBenefits.svelte';
45
import HomeReviews from './(home-partials)/(home-reviews)/HomeReviews.svelte';
56
</script>
67

78
<div class="relative">
89
<HomeCampaign />
910
<HomeReviews />
1011
<HomeLatestCourse />
12+
<HomeProBenefits />
1113
</div>

0 commit comments

Comments
 (0)