Skip to content

Commit 218b6cb

Browse files
SaltyAomSaltyAom
committed
🎉 feat: add kawaii=true
1 parent 03f6b3c commit 218b6cb

File tree

2 files changed

+218
-148
lines changed

2 files changed

+218
-148
lines changed

‎docs/components/fern/hero.vue‎

Lines changed: 218 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -8,171 +8,238 @@
88
class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient"
99
></div>
1010
<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"
11+
class="relative flex w-full pt-6 md:pt-0 mb-16 md:mb-8 px-6 overflow-hidden transition-all"
12+
:class="
13+
kawaii
14+
? 'flex-col lg:flex-row justify-center items-around p-0 lg:px-0'
15+
: 'flex-col justify-center items-center'
16+
"
1217
style="min-height: calc(100vh - 64px)"
1318
>
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"
19+
<div
20+
class="flex flex-col justify-center items-center transition-all"
21+
:class="
22+
kawaii
23+
? 'flex flex-col justify-center items-start my-auto lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl lg:pl-16'
24+
: 'flex flex-col justify-center items-center'
25+
"
1626
>
17-
ElysiaJS
18-
</h1> -->
19-
<img
20-
src="/assets/elysia_v.webp"
21-
alt="Curved text logo saying 'Elysia JS'"
22-
class="max-w-[40ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
23-
style="aspect-ratio: 1.5 / 1"
24-
/>
25-
<h2
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-violet-400 mb-6"
27-
>
28-
Ergonomic Framework for Humans
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"
27+
<!-- <h1
28+
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"
29+
>
30+
ElysiaJS
31+
</h1> -->
32+
<img
33+
src="/assets/elysia_v.webp"
34+
alt="Curved text logo saying 'Elysia JS'"
35+
class="max-w-[40ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
36+
style="aspect-ratio: 1.5 / 1"
37+
/>
38+
<h2
39+
class="relative md:leading-tight font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-violet-400 mb-6"
40+
:class="
41+
kawaii
42+
? 'text-5xl text-left'
43+
: 'text-5xl md:text-6xl md:text-center'
44+
"
3145
>
32-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
33-
<rect width="256" height="256" fill="none" />
34-
<path
35-
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"
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-
/>
86-
</svg>
87-
</span>
88-
</h2>
89-
<h3
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-2xl"
91-
>
92-
TypeScript with
93-
<span
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-
>, type integrity, and exceptional developer experience.
97-
Supercharged by Bun.
98-
</h3>
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-semibold text-lg bg-pink-400 dark:bg-pink-500 px-6 py-2.5 rounded-full"
104-
id="hero-get-started"
105-
href="/at-glance"
106-
>
107-
Get Started
108-
</a>
109-
<div class="relative flex flex-1 gap-3 text-pink-500">
110-
<code
111-
class="text-pink-500 font-mono font-medium text-lg bg-pink-200/25 dark:bg-pink-500/20 px-6 py-2.5 rounded-full"
112-
>
113-
bun create elysia app
114-
</code>
46+
Ergonomic Framework <br v-if="kawaii" />
47+
for
11548
<button
116-
id="hero-copy"
117-
class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-pink-200/25 focus:bg-pink-200/25 active:bg-pink-200/50 hover:dark:bg-pink-500/20 focus:dark:bg-pink-500/20 active:dark:bg-pink-500/20 transition-all"
118-
@click="copied = true"
49+
type="button"
50+
class="appearance-none rounded-lg interact:bg-violet-500/7.5 px-0.5 transition-colors duration-100"
51+
@click="toggleKawaii"
52+
>
53+
{{ kawaii ? 'Humans & Fox Girls' : 'Humans' }}
54+
</button>
55+
<span
56+
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 transition-all"
57+
:class="
58+
kawaii
59+
? 'md:-translate-x-2 md:translate-y-4 md:scale-80'
60+
: ''
61+
"
11962
>
12063
<svg
12164
xmlns="http://www.w3.org/2000/svg"
122-
width="24"
123-
height="24"
124-
viewBox="0 0 24 24"
125-
fill="none"
126-
stroke="currentColor"
127-
stroke-width="2"
128-
stroke-linecap="round"
129-
stroke-linejoin="round"
130-
class="feather feather-copy"
65+
viewBox="0 0 256 256"
13166
>
132-
<rect
133-
x="9"
134-
y="9"
135-
width="13"
136-
height="13"
137-
rx="2"
138-
ry="2"
139-
/>
67+
<rect width="256" height="256" fill="none" />
14068
<path
141-
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
69+
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"
70+
fill="currentcolor"
71+
stroke="currentcolor"
72+
stroke-linecap="round"
73+
stroke-linejoin="round"
74+
stroke-width="0"
75+
/>
76+
<line
77+
x1="176"
78+
y1="16"
79+
x2="176"
80+
y2="64"
81+
fill="none"
82+
stroke="currentcolor"
83+
stroke-linecap="round"
84+
stroke-linejoin="round"
85+
stroke-width="16"
86+
/>
87+
<line
88+
x1="200"
89+
y1="40"
90+
x2="152"
91+
y2="40"
92+
fill="none"
93+
stroke="currentcolor"
94+
stroke-linecap="round"
95+
stroke-linejoin="round"
96+
stroke-width="16"
97+
/>
98+
<line
99+
x1="224"
100+
y1="72"
101+
x2="224"
102+
y2="104"
103+
fill="none"
104+
stroke="currentcolor"
105+
stroke-linecap="round"
106+
stroke-linejoin="round"
107+
stroke-width="16"
108+
/>
109+
<line
110+
x1="240"
111+
y1="88"
112+
x2="208"
113+
y2="88"
114+
fill="none"
115+
stroke="currentcolor"
116+
stroke-linecap="round"
117+
stroke-linejoin="round"
118+
stroke-width="16"
142119
/>
143120
</svg>
144-
</button>
145-
<p v-if="copied" className="absolute -bottom-8 right-0">
146-
Copied
147-
</p>
148-
</div>
149-
</section>
150-
<p class="flex justify-center items-center gap-2 text-gray-400">
151-
See why developers love Elysia
152-
<svg
153-
xmlns="http://www.w3.org/2000/svg"
154-
width="24"
155-
height="24"
156-
viewBox="0 0 24 24"
157-
fill="none"
158-
stroke="currentColor"
159-
stroke-width="1.5"
160-
stroke-linecap="round"
161-
stroke-linejoin="round"
162-
class="w-6 h-6 motion-safe:animate-bounce"
121+
</span>
122+
</h2>
123+
<h3
124+
class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left w-full max-w-2xl transition-all"
125+
:class="kawaii ? '' : 'md:text-center'"
163126
>
164-
<line x1="12" y1="5" x2="12" y2="19"></line>
165-
<polyline points="19 12 12 19 5 12"></polyline>
166-
</svg>
167-
</p>
127+
TypeScript with
128+
<span
129+
class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
130+
>End-to-End Type Safety</span
131+
>, type integrity, and exceptional developer experience.
132+
Supercharged by Bun.
133+
</h3>
134+
<section
135+
class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-8 mb-12"
136+
>
137+
<a
138+
class="text-white font-semibold text-lg bg-pink-400 dark:bg-pink-500 px-6 py-2.5 rounded-full"
139+
id="hero-get-started"
140+
href="/at-glance"
141+
>
142+
Get Started
143+
</a>
144+
<div class="relative flex flex-1 gap-3 text-pink-500">
145+
<code
146+
class="text-pink-500 font-mono font-medium text-lg bg-pink-200/25 dark:bg-pink-500/20 px-6 py-2.5 rounded-full"
147+
>
148+
bun create elysia app
149+
</code>
150+
<button
151+
id="hero-copy"
152+
class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-pink-200/25 focus:bg-pink-200/25 active:bg-pink-200/50 hover:dark:bg-pink-500/20 focus:dark:bg-pink-500/20 active:dark:bg-pink-500/20 transition-all"
153+
@click="copied = true"
154+
>
155+
<svg
156+
xmlns="http://www.w3.org/2000/svg"
157+
width="24"
158+
height="24"
159+
viewBox="0 0 24 24"
160+
fill="none"
161+
stroke="currentColor"
162+
stroke-width="2"
163+
stroke-linecap="round"
164+
stroke-linejoin="round"
165+
class="feather feather-copy"
166+
>
167+
<rect
168+
x="9"
169+
y="9"
170+
width="13"
171+
height="13"
172+
rx="2"
173+
ry="2"
174+
/>
175+
<path
176+
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
177+
/>
178+
</svg>
179+
</button>
180+
<p v-if="copied" className="absolute -bottom-8 right-0">
181+
Copied
182+
</p>
183+
</div>
184+
</section>
185+
<p
186+
class="flex justify-center items-center gap-2 text-gray-400"
187+
:class="kawaii ? 'mx-auto lg:mx-0' : ''"
188+
>
189+
See why developers love Elysia
190+
<svg
191+
xmlns="http://www.w3.org/2000/svg"
192+
width="24"
193+
height="24"
194+
viewBox="0 0 24 24"
195+
fill="none"
196+
stroke="currentColor"
197+
stroke-width="1.5"
198+
stroke-linecap="round"
199+
stroke-linejoin="round"
200+
class="w-6 h-6 motion-safe:animate-bounce"
201+
>
202+
<line x1="12" y1="5" x2="12" y2="19"></line>
203+
<polyline points="19 12 12 19 5 12"></polyline>
204+
</svg>
205+
</p>
206+
</div>
207+
<div
208+
class="overflow-hidden flex-1 transition-all"
209+
:class="kawaii ? 'lg:flex max-w-4xl' : 'hidden'"
210+
style="max-height: calc(100vh - 64px)"
211+
>
212+
<img
213+
src="/assets/elysia_chan.webp"
214+
class="object-cover z-20 select-none pointer-events-none"
215+
style="object-position: 50% 7.5%"
216+
/>
217+
</div>
168218
</header>
169219
</template>
170220

171221
<script setup lang="ts">
172-
import { ref, watch } from 'vue'
222+
import { onMounted, ref, watch } from 'vue'
173223
174224
import Ray from './ray.vue'
175225
226+
const kawaii = ref(false)
227+
const toggleKawaii = () => {
228+
kawaii.value = !kawaii.value
229+
230+
localStorage.setItem('kawaii', kawaii.value + '')
231+
}
232+
233+
onMounted(() => {
234+
if (
235+
window.location.search.includes('kawaii=true') ||
236+
window.location.search.includes('uwu=true')
237+
)
238+
return (kawaii.value = true)
239+
240+
if (localStorage.getItem('kawaii') === 'true') return (kawaii.value = true)
241+
})
242+
176243
const copied = ref(false)
177244
watch(copied, (value) => {
178245
// [INFO] navigator.clipboard available only in secure contexts.
@@ -211,8 +278,11 @@ watch(copied, (value) => {
211278
);
212279
}
213280
214-
#hero-get-started, #hero-copy {
215-
@apply transform hover:scale-110 focus:scale-110;
216-
transition: all .35s cubic-bezier(0.68, -0.6, 0.32, 1.6), color .35s ease-out;
281+
#hero-get-started,
282+
#hero-copy {
283+
@apply transform hover:scale-110 focus:scale-110;
284+
transition:
285+
all 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6),
286+
color 0.35s ease-out;
217287
}
218288
</style>

‎docs/public/assets/elysia_chan.webp‎

158 KB
Loading

0 commit comments

Comments
 (0)