Skip to content

Commit 094e2d1

Browse files
mythzmythz
committed
tweak component headers
1 parent 88f3614 commit 094e2d1

File tree

3 files changed

+520
-21
lines changed

3 files changed

+520
-21
lines changed

‎MyApp/Pages/React/Index.cshtml‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,9 @@
156156
<section style="margin-top:-100px">
157157
<div class="mx-auto max-w-5xl py-24 sm:py-32">
158158
<div id="gallery" class="mt-16 max-w-2xl mx-auto">
159-
<div class="flex justify-center">
159+
160+
161+
<!--div class="flex justify-center">
160162
<a href="https://react.servicestack.net/gallery/autoquerygrid" class="flex items-center">
161163
<svg class="w-28 h-28 sm:w-44 sm:h-44 iconify iconify--la" xmlns="http://www.w3.org/2000/svg"
162164
xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 32 32">
@@ -186,12 +188,59 @@
186188
<h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
187189
Component Gallery</h1>
188190
<p class="mt-2 text-lg text-gray-500 dark:text-gray-400">Explore React Tailwind Component Gallery</p>
191+
</div-->
192+
193+
<div class="relative overflow-hidden bg-slate-50 dark:bg-gray-900 border-b border-slate-200 dark:border-gray-800">
194+
<!-- Decorative background glow (Matches Vue Green/Tailwind Blue) -->
195+
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-gradient-to-r from-teal-100/60 to-blue-100/60 dark:from-teal-900/30 dark:to-blue-900/30 blur-3xl rounded-full pointer-events-none"></div>
196+
197+
<div class="relative z-10 px-6 py-16 flex flex-col items-center text-center">
198+
199+
<!-- Logos Container -->
200+
<div class="flex items-center justify-center space-x-10 sm:space-x-14 mb-8">
201+
<!-- ServiceStack Logo -->
202+
<a href="https://docs.servicestack.net/vue/autoquerygrid" class="transition-transform duration-300 hover:scale-110">
203+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm text-gray-800 dark:text-white" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
204+
<path d="M10 6c1.544 1.76 2.276 4.15 2.217 6.61c3.968 1.67 9.924 6.12 11.181 12.39H28C26.051 14.31 14.918 6.77 10 6zm-2 7c4.67 4.913.81 11.582-4 12h18.97C21.5 18.289 11.95 13.533 8 13z"></path>
205+
</svg>
206+
</a>
207+
208+
<!-- React Logo -->
209+
<div class="transition-transform duration-300 hover:scale-110">
210+
211+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-11 -10.13 22 20.27">
212+
<circle r="2" fill="#087ea4"/>
213+
<g stroke="#087ea4">
214+
<ellipse rx="10" ry="4.5"/>
215+
<ellipse rx="10" ry="4.5" transform="rotate(60)"/>
216+
<ellipse rx="10" ry="4.5" transform="rotate(120)"/>
217+
</g>
218+
</svg>
219+
</div>
220+
221+
<!-- Tailwind Logo -->
222+
<div class="transition-transform duration-300 hover:scale-110">
223+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
224+
<path fill="#44a8b3" d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Z"></path>
225+
</svg>
226+
</div>
227+
</div>
228+
229+
<!-- Text Content -->
230+
<h1 class="text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-5xl mb-4">
231+
Component Gallery
232+
</h1>
233+
<p class="text-lg text-slate-600 dark:text-slate-400 font-medium max-w-2xl mx-auto">
234+
Explore Vue Tailwind Component Gallery
235+
</p>
236+
</div>
189237
</div>
190-
<div class="pt-4 pb-16">
238+
239+
<div class="pb-16">
191240
<div class="mx-auto max-w-2xl not-prose">
192241
<div>
193242
<ul role="list"
194-
class="mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800">
243+
class="divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800">
195244
<li class="relative flex items-start space-x-4 py-6">
196245
<div class="flex-shrink-0">
197246
<span

‎MyApp/Pages/Vue/Index.cshtml‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -217,27 +217,58 @@
217217
<div class="mx-auto max-w-5xl">
218218

219219
<div id="gallery" class="max-w-2xl mx-auto">
220-
<div class="flex justify-center">
221-
<a href="https://docs.servicestack.net/vue/autoquerygrid" class="flex items-center">
222-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="w-28 h-28 sm:w-44 sm:h-44 iconify iconify--la" width="1em" height="1em" viewBox="0 0 32 32">
223-
<path fill="currentColor" d="M10 6c1.544 1.76 2.276 4.15 2.217 6.61c3.968 1.67 9.924 6.12 11.181 12.39H28C26.051 14.31 14.918 6.77 10 6zm-2 7c4.67 4.913.81 11.582-4 12h18.97C21.5 18.289 11.95 13.533 8 13z"></path>
224-
</svg>
225-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="w-28 h-28 sm:w-44 sm:h-44 iconify iconify--vscode-icons" width="1em" height="1em" viewBox="0 0 32 32">
226-
<path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z"></path><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"></path>
227-
</svg>
228-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="w-28 h-28 sm:w-44 sm:h-44 iconify iconify--vscode-icons" width="1em" height="1em" viewBox="0 0 32 32">
229-
<path fill="#44a8b3" d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Z"></path>
230-
</svg>
231-
</a>
232-
</div>
233-
<div class="text-center">
234-
<h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">Component Gallery</h1>
235-
<p class="mt-2 text-lg text-gray-500 dark:text-gray-400">Explore Vue Tailwind Component Gallery</p>
220+
221+
<div class="relative overflow-hidden bg-slate-50 dark:bg-gray-900 border-b border-slate-200 dark:border-gray-800">
222+
<!-- Decorative background glow (Matches Vue Green/Tailwind Blue) -->
223+
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-gradient-to-r from-teal-100/60 to-blue-100/60 dark:from-teal-900/30 dark:to-blue-900/30 blur-3xl rounded-full pointer-events-none"></div>
224+
225+
<div class="relative z-10 px-6 py-16 flex flex-col items-center text-center">
226+
227+
<!-- Logos Container -->
228+
<div class="flex items-center justify-center space-x-10 sm:space-x-14 mb-8">
229+
<!-- ServiceStack Logo -->
230+
<a href="https://docs.servicestack.net/vue/autoquerygrid" class="transition-transform duration-300 hover:scale-110">
231+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm text-gray-800 dark:text-white" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
232+
<path d="M10 6c1.544 1.76 2.276 4.15 2.217 6.61c3.968 1.67 9.924 6.12 11.181 12.39H28C26.051 14.31 14.918 6.77 10 6zm-2 7c4.67 4.913.81 11.582-4 12h18.97C21.5 18.289 11.95 13.533 8 13z"></path>
233+
</svg>
234+
</a>
235+
236+
<!-- Vue Logo -->
237+
<div class="transition-transform duration-300 hover:scale-110">
238+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg">
239+
<g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
240+
<g transform="translate(178.06 235.01)">
241+
<path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/>
242+
</g>
243+
<g transform="translate(178.06 235.01)">
244+
<path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/>
245+
</g>
246+
</g>
247+
</svg>
248+
</div>
249+
250+
<!-- Tailwind Logo -->
251+
<div class="transition-transform duration-300 hover:scale-110">
252+
<svg class="w-16 h-16 sm:w-20 sm:h-20 drop-shadow-sm" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
253+
<path fill="#44a8b3" d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1q-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1Z"></path>
254+
</svg>
255+
</div>
256+
</div>
257+
258+
<!-- Text Content -->
259+
<h1 class="text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-5xl mb-4">
260+
Component Gallery
261+
</h1>
262+
<p class="text-lg text-slate-600 dark:text-slate-400 font-medium max-w-2xl mx-auto">
263+
Explore Vue Tailwind Component Gallery
264+
</p>
265+
</div>
236266
</div>
237-
<div class="pt-4 pb-16">
267+
268+
<div class="pb-16">
238269
<div class="mx-auto max-w-2xl not-prose">
239270
<div>
240-
<ul role="list" class="mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800">
271+
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800">
241272
<li class="relative flex items-start space-x-4 py-6">
242273
<div class="flex-shrink-0">
243274
<span class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900">

0 commit comments

Comments
 (0)