Skip to content

Commit 1c97697

Browse files
mychidarkomychidarko
committed
fix: update frontend lockin
1 parent 0dbbb97 commit 1c97697

File tree

1 file changed

+46
-35
lines changed

1 file changed

+46
-35
lines changed

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

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</div>
2020

2121
<div class="mt-10 max-w-4xl w-full">
22-
<div class="code-preview-container rounded-lg overflow-hidden shadow-lg">
22+
<div class="code-preview-container rounded-3xl overflow-hidden shadow-lg">
2323
<!-- Code Window -->
2424
<div class="bg-[var(--vp-code-block-bg)] p-8 text-white">
2525
<!-- <div class="flex items-center mb-3">
@@ -42,33 +42,33 @@
4242

4343
<!-- Preview Content -->
4444
<div class="p-4">
45-
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
45+
<div class="flex items-start p-6 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
4646
<div class="w-10 h-10 bg-orange-100 dark:bg-orange-900 rounded-md mr-3 flex items-center justify-center">
4747
<span class="text-orange-600 dark:text-orange-300">🍔</span>
4848
</div>
4949
<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>
50+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 !m-0">Veggie Loaded Burger</h4>
51+
<p class="text-xs !m-0 text-gray-500 dark:text-gray-400">Vegan • 4 stars</p>
5252
<div class="text-sm font-semibold text-blue-500">$8.99</div>
5353
</div>
5454
</div>
55-
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
55+
<div class="flex items-start p-6 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3">
5656
<div class="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-md mr-3 flex items-center justify-center">
5757
<span class="text-red-600 dark:text-red-300">🍗</span>
5858
</div>
5959
<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>
60+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 !m-0">Southern Fried Chicken</h4>
61+
<p class="text-xs !m-0 text-gray-500 dark:text-gray-400">Spicy • 5 stars</p>
6262
<div class="text-sm font-semibold text-blue-500">$9.49</div>
6363
</div>
6464
</div>
65-
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
65+
<div class="flex items-start p-6 bg-gray-50 dark:bg-gray-700 rounded-lg">
6666
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-900 rounded-md mr-3 flex items-center justify-center">
6767
<span class="text-amber-600 dark:text-amber-300">🥩</span>
6868
</div>
6969
<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>
70+
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 !m-0">Healthy Beef Burger</h4>
71+
<p class="text-xs !m-0 text-gray-500 dark:text-gray-400">Low-carb • 4 stars</p>
7272
<div class="text-sm font-semibold text-blue-500">$8.99</div>
7373
</div>
7474
</div>
@@ -79,46 +79,57 @@
7979
<!-- Framework Icons -->
8080
<div class="flex justify-center mt-8 gap-10">
8181
<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>
82+
<div class="w-12 h-12 flex items-center justify-center rounded-full mb-2">
83+
<svg width="48" height="48" fill="none" aria-hidden="true" class="text-blue-400">
84+
<path
85+
d="M30.685 27.536c-5.353 9.182-12.462 15.042-15.878 13.089-3.416-1.953-1.846-10.98 3.508-20.161 5.353-9.182 12.462-15.042 15.878-13.089 3.416 1.953 1.846 10.98-3.508 20.161Z"
86+
fill="currentColor" fill-opacity="0" stroke="currentColor" stroke-width="2"></path>
87+
<ellipse cx="24" cy="24" rx="7" ry="19" transform="rotate(90 24 24)" fill="currentColor" fill-opacity="0"
88+
stroke="currentColor" stroke-width="2"></ellipse>
89+
<path
90+
d="M17.315 27.536c5.353 9.182 12.462 15.042 15.878 13.089 3.416-1.953 1.846-10.98-3.508-20.161-5.353-9.182-12.462-15.042-15.878-13.089-3.416 1.953-1.846 10.98 3.508 20.161Z"
91+
fill="currentColor" fill-opacity="0" stroke="currentColor" stroke-width="2"></path>
92+
<path d="M24 27a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="none" stroke="currentColor" stroke-width="2"></path>
8893
</svg>
8994
</div>
9095
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">React</span>
9196
</div>
9297
<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>
98+
<div class="w-12 h-12 flex items-center justify-center rounded-full mb-2">
99+
<svg width="48" height="48" fill="none" aria-hidden="true" class="text-green-500">
100+
<path d="M24 12.814 20.474 7H15l9 15 9-15h-5.476l-3.525 5.814Z" fill="currentColor" fill-opacity="0"
101+
stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
102+
<path d="M37.408 7 24 28.982 10.592 7H3l21 34L45 7h-7.592Z" fill="currentColor" fill-opacity="0"
103+
stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
99104
</svg>
100105
</div>
101106
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Vue</span>
102107
</div>
103108
<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>
109+
<div class="w-12 h-12 flex items-center justify-center rounded-full mb-2">
110+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48" height="42"
111+
id="Layer_1" x="0px" y="0px" viewBox="0 0 98.1 118" xml:space="preserve">
112+
<path class="fill-orange-500"
113+
d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3 c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1 c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6" />
114+
<path class="fill-[var(--vp-c-bg)]"
115+
d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1 c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72 c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7 c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5 c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1 c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1 c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5 c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9" />
111116
</svg>
112117
</div>
113118
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Svelte</span>
114119
</div>
115120
<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>
121+
<div class="w-12 h-12 flex items-center justify-center rounded-full mb-2">
122+
<svg width="48" height="48" fill="none" aria-hidden="true" class="text-red-500">
123+
<path d="m7.5 10.5 6.5-3 7 3.5v16l7-4v-8l7-4 7 4v8l-7 3.5V34l-14 7.5L7.5 34V10.5Z" fill="currentColor"
124+
fill-opacity="0"></path>
125+
<path d="m7 11 7-4 7 4-7 4-7-4ZM21 11v16M21 35v7" stroke="currentColor" stroke-width="2"
126+
stroke-linecap="round" stroke-linejoin="round"></path>
127+
<path d="M7 11v23l14 8 14-8V19" stroke="currentColor" stroke-width="2" stroke-linecap="round"
128+
stroke-linejoin="round"></path>
129+
<path d="M14 15v16l7 4 21-12v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"
130+
stroke-linejoin="round"></path>
131+
<path d="m28 15 7-4 7 4-7 4-7-4ZM28 15v8l7 4M14 31l14-8" stroke="currentColor" stroke-width="2"
132+
stroke-linecap="round" stroke-linejoin="round"></path>
122133
</svg>
123134
</div>
124135
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Blade</span>

0 commit comments

Comments
 (0)