1+ import Templates , { Index } from "./Templates.mjs"
2+
3+ export default {
4+ components : { Templates } ,
5+ template :`
6+ <div class="mb-24 not-prose">
7+ <!-- Simple header -->
8+ <div class="mb-8">
9+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl flex justify-between items-center">
10+ <div>{{ Index[name].name }}</div>
11+ <a class="group inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
12+ :href="'https://github.com/NetCoreTemplates/' + name">
13+ <svg class="size-5 group-hover:rotate-12 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
14+ Source Code
15+ </a>
16+ </h2>
17+ <p class="mt-3 text-xl text-gray-600 dark:text-gray-400 mb-8">
18+ {{ description }}
19+ </p>
20+ </div>
21+
22+ <!-- Templates section with enhanced styling -->
23+ <div class="my-10 transform transition-all duration-300 hover:scale-[1.02]">
24+ <Templates :templates="[Index[name]]" />
25+ </div>
26+
27+ <!-- Screenshots with enhanced hover effects and layout -->
28+ <div class="flex flex-col lg:flex-row justify-center items-center gap-8 lg:gap-10 my-10">
29+ <!-- light screenshot -->
30+ <a class="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1"
31+ :href="'https://' + name + '.web-templates.io'">
32+ <div class="absolute inset-0 bg-gradient-to-tr from-blue-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
33+ <img class="w-80 h-80 md:w-96 md:h-96 object-cover ring-4 ring-gray-200 group-hover:ring-indigo-400 transition-all duration-300"
34+ :src="'/img/pages/react/' + name + '.webp'"
35+ :alt="Index[name].name + ' light theme'">
36+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
37+ <p class="text-white text-base font-semibold">Light Theme</p>
38+ </div>
39+ </a>
40+
41+ <!-- dark screenshot -->
42+ <a class="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 hover:rotate-1"
43+ :href="'https://' + name + '.web-templates.io'">
44+ <div class="absolute inset-0 bg-gradient-to-tr from-purple-500 to-pink-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
45+ <img class="w-80 h-80 md:w-96 md:h-96 object-cover ring-4 ring-gray-200 group-hover:ring-purple-400 transition-all duration-300"
46+ :src="'/img/pages/react/' + name + '-dark.webp'"
47+ :alt="Index[name].name + ' dark theme'">
48+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
49+ <p class="text-white text-base font-semibold">Dark Theme</p>
50+ </div>
51+ </a>
52+ </div>
53+ </div>
54+ ` ,
55+ props : {
56+ name :String ,
57+ description :String
58+ } ,
59+ setup ( ) {
60+ return { Index }
61+ }
62+ }
0 commit comments