Skip to content

Commit 2523ce7

Browse files
arivveraarivvera
committed
Introduce the Meet Our Mascot section
Make small tweaks to all other sections.
1 parent 76a9eed commit 2523ce7

File tree

6 files changed

+140
-115
lines changed

6 files changed

+140
-115
lines changed

‎src/components/landing/GetStarted.astro‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
---
22
import Installation from "./Installation.astro";
3+
import SeeTheMagic from "./SeeTheMagic.astro";
34
import Usage from "./Usage.astro";
45
---
56

67
<section class="px-4 py-20" id="get-started">
7-
<div class="container mx-auto max-w-6xl">
8-
<div class="mb-12 text-center">
9-
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
10-
<span
11-
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
12-
>
13-
Getting Started
14-
</span>
15-
</h2>
16-
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
17-
Start harnessing the power of the vibe with <b>Cascarilla.js</b> 🫨. From
18-
modern server side rendered frameworks 🚀, to traditional single page applications
19-
🧘‍♂️, to good old static sites 📼 using Javascript from a <code
20-
>{"<script>"}</code
21-
> tag, the vibes will get to you, my friend 😎.
22-
</p>
23-
</div>
8+
<div class="container mx-auto max-w-6xl">
9+
<div class="mb-12 text-center">
10+
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
11+
<span
12+
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
13+
>
14+
Getting Started
15+
</span>
16+
</h2>
17+
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
18+
Start harnessing the power of the vibe with Cascarilla.js 🫨.
19+
From modern server side rendered frameworks 🚀, to traditional
20+
single page applications 🧘‍♂️, to good old static sites 📼 using
21+
Javascript from a
22+
<code>{"<script>"}</code> tag, the vibes will get to you, my friend
23+
😎.
24+
</p>
25+
</div>
2426

25-
<Installation />
26-
<Usage />
27-
</div>
27+
<Installation />
28+
<Usage />
29+
<SeeTheMagic />
30+
</div>
2831
</section>

‎src/components/landing/Installation.astro‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,58 @@ import { Scroll } from "lucide-astro";
33
---
44

55
<div class="flex flex-col gap-8 mb-12">
6-
<div class="rounded-2xl border border-purple-500/20 bg-purple-500/[0.02] p-6">
7-
<h3 class="mb-4 text-xl font-semibold text-purple-200">Installation</h3>
8-
<p class="mb-4 text-purple-200/70">
9-
Install <code>cascarilla</code> using your favorite package manager 🎁.
10-
</p>
11-
<div class="mb-6 space-y-4">
12-
<div class="rounded-lg bg-black/50 p-4">
13-
<div class="flex items-center justify-between">
14-
<code class="font-mono text-pink-400">npm i cascarilla</code>
15-
<button
16-
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
17-
onclick="navigator.clipboard.writeText('npm install cascarilla')"
18-
>
19-
<Scroll class="h-4 w-4" />
20-
<span class="sr-only">Copy to clipboard</span>
21-
</button>
22-
</div>
23-
</div>
6+
<div
7+
class="rounded-2xl border border-purple-500/20 bg-purple-500/[0.02] p-6"
8+
>
9+
<h3 class="mb-4 text-xl font-semibold text-purple-200">Installation</h3>
10+
<p class="mb-4 text-purple-200/70">
11+
📦 Install <code>cascarilla</code> using your favorite package manager.
12+
</p>
13+
<div class="mb-6 space-y-4">
14+
<div class="rounded-lg bg-black/50 p-4">
15+
<div class="flex items-center justify-between">
16+
<code class="font-mono text-purple-400"
17+
>npm i cascarilla</code
18+
>
19+
<button
20+
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
21+
onclick="navigator.clipboard.writeText('npm install cascarilla')"
22+
>
23+
<Scroll class="h-4 w-4" />
24+
<span class="sr-only">Copy to clipboard</span>
25+
</button>
26+
</div>
27+
</div>
2428

25-
<div class="rounded-lg bg-black/50 p-4">
26-
<div class="flex items-center justify-between">
27-
<code class="font-mono text-pink-400">pnpm add cascarilla</code>
28-
<button
29-
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
30-
onclick="navigator.clipboard.writeText('pnpm add cascarilla')"
31-
>
32-
<Scroll class="h-4 w-4" />
33-
<span class="sr-only">Copy to clipboard</span>
34-
</button>
35-
</div>
36-
</div>
29+
<div class="rounded-lg bg-black/50 p-4">
30+
<div class="flex items-center justify-between">
31+
<code class="font-mono text-purple-400"
32+
>pnpm add cascarilla</code
33+
>
34+
<button
35+
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
36+
onclick="navigator.clipboard.writeText('pnpm add cascarilla')"
37+
>
38+
<Scroll class="h-4 w-4" />
39+
<span class="sr-only">Copy to clipboard</span>
40+
</button>
41+
</div>
42+
</div>
3743

38-
<div class="rounded-lg bg-black/50 p-4">
39-
<div class="flex items-center justify-between">
40-
<code class="font-mono text-pink-400">yarn add cascarilla</code>
41-
<button
42-
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
43-
onclick="navigator.clipboard.writeText('yarn add cascarilla')"
44-
>
45-
<Scroll class="h-4 w-4" />
46-
<span class="sr-only">Copy to clipboard</span>
47-
</button>
44+
<div class="rounded-lg bg-black/50 p-4">
45+
<div class="flex items-center justify-between">
46+
<code class="font-mono text-purple-400"
47+
>yarn add cascarilla</code
48+
>
49+
<button
50+
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
51+
onclick="navigator.clipboard.writeText('yarn add cascarilla')"
52+
>
53+
<Scroll class="h-4 w-4" />
54+
<span class="sr-only">Copy to clipboard</span>
55+
</button>
56+
</div>
57+
</div>
4858
</div>
49-
</div>
5059
</div>
51-
</div>
5260
</div>

‎src/components/landing/Landing.astro‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import Hero from "./Hero.astro";
55
import Testimonial from "./Testimonial.astro";
66
import GetStarted from "./GetStarted.astro";
77
import SeeTheMagic from "./SeeTheMagic.astro";
8+
import Mascot from "./Mascot.astro";
89
---
910

1011
<div
11-
class="relative min-h-screen bg-[radial-gradient(circle_at_50%_120%,#2a0450,#131033,#000)] backdrop-filter backdrop-opacity-90"
12+
class="relative min-h-screen bg-[radial-gradient(circle_at_50%_120%,#2a0450,#131033,#000)] backdrop-filter backdrop-opacity-90"
1213
>
13-
<Hero />
14-
<Features />
15-
<Testimonial />
16-
<GetStarted />
17-
<SeeTheMagic />
18-
<Footer />
14+
<Hero />
15+
<Features />
16+
<Mascot />
17+
<GetStarted />
18+
<!-- <Testimonial /> -->
19+
<Footer />
1920
</div>

‎src/components/landing/Mascot.astro‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="px-4 py-20 text-center">
2+
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
3+
<span
4+
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
5+
>
6+
Meet Our Mascot
7+
</span>
8+
</h2>
9+
<div
10+
class="flex flexcol flex-col justify-center items-center max-w-2xl mx-auto sm:flex-row sm:gap-10"
11+
>
12+
<p class="text-purple-200/70 text-lg mb-10 sm:mb-0">
13+
Meet your partner in crime, Cascarilla-kun 😀. He will vibe with you
14+
on every step of the way and help you get the most out of
15+
Cascarilla.js 🙂‍↕️. He is very supportive and attentive, even if he is
16+
still, like a mummy 🥸.
17+
</p>
18+
<img
19+
src="/public/web-app-manifest-512x512.png"
20+
class="w-auto h-60 rotate-12 sm:h-60 animate-float"
21+
/>
22+
</div>
23+
</div>

‎src/components/landing/SeeTheMagic.astro‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
---
2-
import { Terminal } from "lucide-astro";
2+
import { FileTerminal, SquareTerminal, Terminal } from "lucide-astro";
33
---
44

55
<section class="px-4 py-20 z-20">
6-
<div class="container mx-auto max-w-6xl">
7-
<div class="mb-12 text-center">
8-
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
9-
<span
10-
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
11-
>
12-
See the Magic
13-
</span>
14-
</h2>
15-
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
16-
Now check your browser's console by pressing <code
17-
class="p-1 bg-purple-400/5 rounded-sm">F12</code
18-
>, or check your server's logs, and see the magic 🤩. In either case you
19-
should see a little message like the one below, indicating that you
20-
have, indeed, been blessed 🙂‍↕️. Now you are vibing like a true master 😁.
21-
</p>
22-
</div>
23-
24-
<div
25-
class="rounded-xl border border-purple-500/20 bg-purple-500/[0.02] p-6 z-10"
26-
>
27-
<div class="flex items-center gap-2 mb-4">
28-
<Terminal class="text-purple-400 ml-0.5" />
29-
</div>
6+
<div class="container mx-auto max-w-6xl">
7+
<div class="mb-12 text-center">
8+
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
9+
<span
10+
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
11+
>
12+
See the Magic
13+
</span>
14+
</h2>
15+
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
16+
Now check your browser's console by pressing <code
17+
class="p-1 bg-purple-400/5 rounded-sm">F12</code
18+
>, or check your server logs, and see the magic 🤩. In either
19+
case you should see a little console message like the one shown
20+
below, indicating that you have, indeed, been blessed 🙂‍↕️. Now
21+
you are vibing like a true master 😁.
22+
</p>
23+
</div>
3024

31-
<div
32-
class="h-[100px] rounded-lg border border-purple-500/10 bg-black/50 p-4 font-mono"
33-
>
34-
<div class="flex h-full items-center text-sm text-purple-300/50">
35-
✨ This website is blessed with Cascarilla.js 💫
25+
<div
26+
class="rounded-xl border border-purple-500/20 bg-purple-500/[0.02] p-6 z-10 animate-float"
27+
>
28+
<div
29+
class="h-[100px] rounded-lg border border-purple-500/10 bg-black/50 p-4 font-mono flex items-center gap-1"
30+
>
31+
<span class="text-purple-300/50">
32+
✨ This website is blessed with Cascarilla.js 💫
33+
</span>
34+
</div>
3635
</div>
37-
</div>
3836
</div>
39-
</div>
4037
</section>

‎src/components/landing/Usage.astro‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,11 @@ import { Scroll } from "lucide-astro";
99

1010
<div class="flex flex-col gap-4">
1111
<p class="text-purple-200/70">
12-
Locate your application's root component, then just import <code
12+
📡 Locate your application's root component, then just import <code
1313
><b>cascarilla</b></code
14-
> as a regular node package. That's it 😎!
15-
</p>
16-
17-
<p class="text-purple-200/70">
18-
This way your blessing will be displayed on your server logs or in
19-
the browser's console, depending on where is your root component
20-
being rendered.
14+
> as a regular node package. This way your blessing will be displayed
15+
on your server or in your browser's console, depending on where your
16+
root component is being rendered.
2117
</p>
2218

2319
<div class="rounded-lg bg-black/50 p-4">
@@ -39,14 +35,11 @@ import { Scroll } from "lucide-astro";
3935

4036
<div class="flex flex-col gap-4">
4137
<p class="text-purple-200/70">
42-
Alternatively you can also add an old school <b
38+
📼 Alternatively you can also add an old school <b
4339
><code>{"<script>"}</code></b
44-
> tag 📼 to your application's entry point, with a link to the <code
40+
> tag to your application's entry point, with a link to the <code
4541
>cascarilla</code
46-
> script, as shown below.
47-
</p>
48-
<p class="text-purple-200/70">
49-
This ensure the blessings stay in the browser 😉.
42+
> script, to ensure the blessings stay in the browser.
5043
</p>
5144
<div class="rounded-lg bg-black/50 p-4">
5245
<div class="flex items-center justify-between">

0 commit comments

Comments
 (0)