Skip to content

Commit 373b0ca

Browse files
SaltyAomSaltyAom
committed
📘 doc: elysia icon
1 parent b68d3d0 commit 373b0ca

File tree

4 files changed

+201
-38
lines changed

4 files changed

+201
-38
lines changed

‎components/midori/hero.vue

Lines changed: 131 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,143 @@
11
<template>
2-
<Ray class="h-[60vh] -top-16 pointer-events-none opacity-[.35] dark:opacity-50" />
3-
<div id="splash"
4-
class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient">
5-
</div>
6-
<header class="relative flex flex-col justify-center items-center w-full px-6 pt-20 mb-16 md:mb-8 overflow-hidden"
7-
style="min-height: calc(100vh - 64px)">
8-
<h1
9-
class="text-3xl leading-relaxed font-semibold text-center text-transparent mr-auto md:mx-auto bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
2+
<link rel="preload" as="image" href="/assets/elysia_v.webp" />
3+
<Ray
4+
class="h-[60vh] -top-16 pointer-events-none opacity-[.35] dark:opacity-50"
5+
/>
6+
<div
7+
id="splash"
8+
class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient"
9+
></div>
10+
<header
11+
class="relative flex flex-col justify-center items-center w-full px-6 pt-6 md:pt-0 mb-16 md:mb-8 overflow-hidden"
12+
style="min-height: calc(100vh - 64px)"
13+
>
14+
<!-- <h1
15+
class="text-3xl leading-relaxed font-semibold text-center text-transparent mr-auto md:mx-auto bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
16+
>
1017
ElysiaJS
11-
</h1>
18+
</h1> -->
19+
<img
20+
src="/assets/elysia_v.webp"
21+
alt="Curved text logo saying 'Elysia JS'"
22+
class="max-w-[52ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
23+
style="aspect-ratio: 2 / 1"
24+
/>
1225
<h2
13-
class="relative text-5xl md:text-6xl md:leading-tight font-bold md:text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mt-2 mb-6">
26+
class="relative text-5xl md:text-6xl md:leading-tight font-bold md:text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6"
27+
>
1428
Ergonomic Framework for Humans
15-
<span class="absolute w-10 md:w-12 h-10 md:h-12 bottom-0 mb-4 ml-2 md:ml-0 md:mb-10 text-indigo-400">
29+
<span
30+
class="absolute w-10 md:w-12 h-10 md:h-12 bottom-0 mb-4 ml-2 md:ml-0 md:mb-10 text-indigo-400"
31+
>
1632
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
1733
<rect width="256" height="256" fill="none" />
1834
<path
1935
d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
20-
fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"
21-
stroke-width="0" />
22-
<line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentcolor" stroke-linecap="round"
23-
stroke-linejoin="round" stroke-width="16" />
24-
<line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentcolor" stroke-linecap="round"
25-
stroke-linejoin="round" stroke-width="16" />
26-
<line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentcolor" stroke-linecap="round"
27-
stroke-linejoin="round" stroke-width="16" />
28-
<line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentcolor" stroke-linecap="round"
29-
stroke-linejoin="round" stroke-width="16" />
36+
fill="currentcolor"
37+
stroke="currentcolor"
38+
stroke-linecap="round"
39+
stroke-linejoin="round"
40+
stroke-width="0"
41+
/>
42+
<line
43+
x1="176"
44+
y1="16"
45+
x2="176"
46+
y2="64"
47+
fill="none"
48+
stroke="currentcolor"
49+
stroke-linecap="round"
50+
stroke-linejoin="round"
51+
stroke-width="16"
52+
/>
53+
<line
54+
x1="200"
55+
y1="40"
56+
x2="152"
57+
y2="40"
58+
fill="none"
59+
stroke="currentcolor"
60+
stroke-linecap="round"
61+
stroke-linejoin="round"
62+
stroke-width="16"
63+
/>
64+
<line
65+
x1="224"
66+
y1="72"
67+
x2="224"
68+
y2="104"
69+
fill="none"
70+
stroke="currentcolor"
71+
stroke-linecap="round"
72+
stroke-linejoin="round"
73+
stroke-width="16"
74+
/>
75+
<line
76+
x1="240"
77+
y1="88"
78+
x2="208"
79+
y2="88"
80+
fill="none"
81+
stroke="currentcolor"
82+
stroke-linecap="round"
83+
stroke-linejoin="round"
84+
stroke-width="16"
85+
/>
3086
</svg>
3187
</span>
3288
</h2>
3389
<h3
34-
class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[49rem]">
90+
class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[49rem]"
91+
>
3592
TypeScript with
3693
<span
37-
class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">End-to-End
38-
Type Safety</span>, unified type system and outstanding developer experience. Supercharged by Bun.
94+
class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
95+
>End-to-End Type Safety</span
96+
>, unified type system and outstanding developer experience.
97+
Supercharged by Bun.
3998
</h3>
40-
<section class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12">
41-
<a class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" href="/at-glance">
99+
<section
100+
class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12"
101+
>
102+
<a
103+
class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full"
104+
href="/at-glance"
105+
>
42106
Get Started
43107
</a>
44108
<div class="relative flex flex-1 gap-3 text-blue-500">
45109
<code
46-
class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full">
47-
bun create elysia app
48-
</code>
110+
class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full"
111+
>
112+
bun create elysia app
113+
</code>
49114
<button
50115
class="p-3 rounded-2xl active:rounded-full hover:bg-blue-200/25 focus:bg-blue-200/25 active:bg-blue-200/50 hover:dark:bg-blue-500/20 focus:dark:bg-blue-500/20 active:dark:bg-blue-500/20 transition-all"
51-
@click="copied = true">
52-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
53-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
54-
class="feather feather-copy">
55-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
56-
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
116+
@click="copied = true"
117+
>
118+
<svg
119+
xmlns="http://www.w3.org/2000/svg"
120+
width="24"
121+
height="24"
122+
viewBox="0 0 24 24"
123+
fill="none"
124+
stroke="currentColor"
125+
stroke-width="2"
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
class="feather feather-copy"
129+
>
130+
<rect
131+
x="9"
132+
y="9"
133+
width="13"
134+
height="13"
135+
rx="2"
136+
ry="2"
137+
/>
138+
<path
139+
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
140+
/>
57141
</svg>
58142
</button>
59143
<p v-if="copied" className="absolute -bottom-8 right-0">
@@ -63,9 +147,18 @@
63147
</section>
64148
<p class="flex justify-center items-center gap-2 text-gray-400">
65149
See why developers love Elysia
66-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
67-
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
68-
class="w-6 h-6 motion-safe:animate-bounce">
150+
<svg
151+
xmlns="http://www.w3.org/2000/svg"
152+
width="24"
153+
height="24"
154+
viewBox="0 0 24 24"
155+
fill="none"
156+
stroke="currentColor"
157+
stroke-width="1.5"
158+
stroke-linecap="round"
159+
stroke-linejoin="round"
160+
class="w-6 h-6 motion-safe:animate-bounce"
161+
>
69162
<line x1="12" y1="5" x2="12" y2="19"></line>
70163
<polyline points="19 12 12 19 5 12"></polyline>
71164
</svg>

0 commit comments

Comments
 (0)