Skip to content

Commit 0dbbb97

Browse files
mychidarkomychidarko
committed
feat: update homepage
1 parent 3a14f75 commit 0dbbb97

File tree

3 files changed

+211
-6
lines changed

3 files changed

+211
-6
lines changed

‎.vitepress/theme/components/Home/FlexibleFrontend.vue‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<template>
2+
<section
3+
class="flex flex-col justify-center items-center sm:!max-w-3xl lg:!max-w-5xl xl:!max-w-7xl w-full !px-2 sm:!px-10 !py-28 !my-48 rounded-3xl">
4+
<div class="text-center mb-4 max-w-4xl mx-auto">
5+
<h2 class="!text-3xl md:!text-4xl font-bold !mb-4 text-gray-800 dark:text-gray-100 !border-none">Worried about
6+
frontend lock-in? Don't be.</h2>
7+
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4 max-w-3xl mx-auto">
8+
If you're tired of frameworks that dictate your frontend choices, Leaf is different. Use any frontend framework
9+
you prefer — Vue, React, Svelte, Blade or bring your own view engine.
10+
</p>
11+
<a href="/docs/frontend/" class="inline-flex items-center text-blue-500 font-medium hover:text-blue-600">
12+
Learn more
13+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
14+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
15+
<path d="M5 12h14"></path>
16+
<path d="m12 5 7 7-7 7"></path>
17+
</svg>
18+
</a>
19+
</div>
20+
21+
<div class="mt-10 max-w-4xl w-full">
22+
<div class="code-preview-container rounded-lg overflow-hidden shadow-lg">
23+
<!-- Code Window -->
24+
<div class="bg-[var(--vp-code-block-bg)] p-8 text-white">
25+
<!-- <div class="flex items-center mb-3">
26+
<div class="flex space-x-2">
27+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
28+
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
29+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
30+
</div>
31+
<div class="ml-4 text-gray-400 text-xs">file.php</div>
32+
</div> -->
33+
<pre class="shiki shiki-themes one-dark-pro one-dark-pro vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">app</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">()-&gt;</span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">get</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#98C379;--shiki-dark:#98C379;">'/menu/items'</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#C678DD;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">() {</span></span>
34+
<span class="line"><span style="--shiki-light:#C678DD;--shiki-dark:#C678DD;"> return</span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;"> response</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">()-&gt;</span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">inertia</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#98C379;--shiki-dark:#98C379;">'menu'</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">, [</span></span>
35+
<span class="line"><span style="--shiki-light:#98C379;--shiki-dark:#98C379;"> 'items'</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;"> =&gt; </span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">db</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">()-&gt;</span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">select</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#98C379;--shiki-dark:#98C379;">'menu_items'</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">)-&gt;</span><span style="--shiki-light:#61AFEF;--shiki-dark:#61AFEF;">all</span><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">()</span></span>
36+
<span class="line"><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;"> ]);</span></span>
37+
<span class="line"><span style="--shiki-light:#ABB2BF;--shiki-dark:#ABB2BF;">});</span></span></code></pre>
38+
</div>
39+
40+
<!-- Preview Tabs -->
41+
<div class="bg-white dark:bg-gray-800">
42+
43+
<!-- Preview Content -->
44+
<div class="p-4">
45+
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
46+
<div class="w-10 h-10 bg-orange-100 dark:bg-orange-900 rounded-md mr-3 flex items-center justify-center">
47+
<span class="text-orange-600 dark:text-orange-300">🍔</span>
48+
</div>
49+
<div class="flex-1">
50+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Veggie Loaded Burger</h4>
51+
<p class="text-xs text-gray-500 dark:text-gray-400">Vegan • 4 stars</p>
52+
<div class="text-sm font-semibold text-blue-500">$8.99</div>
53+
</div>
54+
</div>
55+
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
56+
<div class="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-md mr-3 flex items-center justify-center">
57+
<span class="text-red-600 dark:text-red-300">🍗</span>
58+
</div>
59+
<div class="flex-1">
60+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Southern Fried Chicken</h4>
61+
<p class="text-xs text-gray-500 dark:text-gray-400">Spicy • 5 stars</p>
62+
<div class="text-sm font-semibold text-blue-500">$9.49</div>
63+
</div>
64+
</div>
65+
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
66+
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-900 rounded-md mr-3 flex items-center justify-center">
67+
<span class="text-amber-600 dark:text-amber-300">🥩</span>
68+
</div>
69+
<div class="flex-1">
70+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Healthy Beef Burger</h4>
71+
<p class="text-xs text-gray-500 dark:text-gray-400">Low-carb • 4 stars</p>
72+
<div class="text-sm font-semibold text-blue-500">$8.99</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<!-- Framework Icons -->
80+
<div class="flex justify-center mt-8 gap-10">
81+
<div class="flex flex-col items-center">
82+
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-full mb-2">
83+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
84+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
85+
class="text-blue-500">
86+
<path d="M16 18l6-6-6-6"></path>
87+
<path d="M8 6l-6 6 6 6"></path>
88+
</svg>
89+
</div>
90+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">React</span>
91+
</div>
92+
<div class="flex flex-col items-center">
93+
<div class="w-12 h-12 flex items-center justify-center bg-green-100 dark:bg-green-900 rounded-full mb-2">
94+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
95+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
96+
class="text-green-500">
97+
<circle cx="12" cy="12" r="10"></circle>
98+
<circle cx="12" cy="12" r="4"></circle>
99+
</svg>
100+
</div>
101+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Vue</span>
102+
</div>
103+
<div class="flex flex-col items-center">
104+
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-900 rounded-full mb-2">
105+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
106+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
107+
class="text-orange-500">
108+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
109+
<line x1="3" y1="9" x2="21" y2="9"></line>
110+
<line x1="9" y1="21" x2="9" y2="9"></line>
111+
</svg>
112+
</div>
113+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Svelte</span>
114+
</div>
115+
<div class="flex flex-col items-center">
116+
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 dark:bg-purple-900 rounded-full mb-2">
117+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
118+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
119+
class="text-purple-500">
120+
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
121+
<polyline points="13 2 13 9 20 9"></polyline>
122+
</svg>
123+
</div>
124+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Blade</span>
125+
</div>
126+
</div>
127+
</div>
128+
</section>
129+
</template>
130+
131+
<style scoped>
132+
.text-blue-500 {
133+
color: var(--vt-c-brand);
134+
}
135+
136+
.text-blue-600 {
137+
color: var(--vt-c-brand-dark);
138+
}
139+
140+
.border-blue-500 {
141+
border-color: var(--vt-c-brand);
142+
}
143+
144+
.bg-blue-100 {
145+
background-color: rgba(var(--vt-c-brand-rgb), 0.1);
146+
}
147+
148+
.bg-blue-900 {
149+
background-color: rgba(var(--vt-c-brand-rgb), 0.2);
150+
}
151+
152+
.text-green-500 {
153+
color: #10b981;
154+
}
155+
156+
.bg-green-100 {
157+
background-color: rgba(16, 185, 129, 0.1);
158+
}
159+
160+
.bg-green-900 {
161+
background-color: rgba(16, 185, 129, 0.2);
162+
}
163+
164+
.text-orange-500 {
165+
color: #f97316;
166+
}
167+
168+
.bg-orange-100 {
169+
background-color: rgba(249, 115, 22, 0.1);
170+
}
171+
172+
.bg-orange-900 {
173+
background-color: rgba(249, 115, 22, 0.2);
174+
}
175+
176+
.text-purple-500 {
177+
color: #8b5cf6;
178+
}
179+
180+
.bg-purple-100 {
181+
background-color: rgba(139, 92, 246, 0.1);
182+
}
183+
184+
.bg-purple-900 {
185+
background-color: rgba(139, 92, 246, 0.2);
186+
}
187+
188+
.bg-red-100 {
189+
background-color: rgba(239, 68, 68, 0.1);
190+
}
191+
192+
.bg-red-900 {
193+
background-color: rgba(239, 68, 68, 0.2);
194+
}
195+
196+
.bg-amber-100 {
197+
background-color: rgba(245, 158, 11, 0.1);
198+
}
199+
200+
.bg-amber-900 {
201+
background-color: rgba(245, 158, 11, 0.2);
202+
}
203+
</style>

‎.vitepress/theme/components/Home/Home.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Sponsors from './Sponsors.vue';
77
import Testimonials from './Testimonials.vue';
88
import Community from './Community.vue';
99
import Footer from './Footer.vue';
10+
import FlexibleFrontend from './FlexibleFrontend.vue';
1011
import NewsLetterSubstack from './../Community/NewsLetterSubstack.vue';
1112
import Blog from '../Community/Blog.vue';
1213
import Speak from '../Community/Speak.vue';
@@ -17,6 +18,7 @@ import WallOfFame from '../Community/WallOfFame.vue';
1718
<Hero />
1819
<Deploy />
1920
<Tooling />
21+
<FlexibleFrontend />
2022
<Testimonials />
2123
<TryIt />
2224
<Sponsors />

‎.vitepress/theme/components/Home/Tooling.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ const tooling = [
4747
// description: 'There are no “Oh no!” moments with Leaf. We\'ve got all the tools you need to fail-in-style: from devtools to debug modes and custom errors.',
4848
// link: '/docs/routing/error-handling',
4949
// },
50-
{
51-
icon: '🎨',
52-
title: 'Dynamic View Layer',
53-
description: 'Leaf supports multiple template engines and even frameworks like React, Vue and Svelte.',
54-
link: '/docs/frontend/',
55-
},
50+
// {
51+
// icon: '🎨',
52+
// title: 'Dynamic View Layer',
53+
// description: 'Leaf supports multiple template engines and even frameworks like React, Vue and Svelte.',
54+
// link: '/docs/frontend/',
55+
// },
5656
// {
5757
// icon: '🔧',
5858
// title: 'Friendly system utilities',

0 commit comments

Comments
 (0)