x-learn-ghost-theme/courses.hbs at main · hoccungduy/x-learn-ghost-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
{{!< default}} {{#contentFor "metaTitle" }} <title>{{meta_title}}</title>
   {{/contentFor}}

   <div class="courses-page relative">
      <!-- Hero Section -->
      <div class="relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden">
         <!-- Background Decorations -->
         <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
            <div class="absolute top-0 right-1/4 w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px]"></div>
            <div class="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-indigo-500/10 rounded-full blur-[100px]">
            </div>
         </div>

         <div class="container mx-auto relative z-10 text-center px-4">
            <div
               class="inline-flex items-center justify-center p-2 mb-6 rounded-full bg-blue-500/10 border border-blue-500/20 backdrop-blur-sm">
               <span class="px-3 py-1 text-xs font-bold text-blue-600 dark:text-blue-400 uppercase tracking-wider">{{t
                  "courses"}}</span>
            </div>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 tracking-tight">
               {{t "explore-courses"}}
            </h1>
            <p class="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed">
               {{t "course-description"}}
            </p>
         </div>
      </div>

      <div class="container mx-auto px-4 pb-20">
         {{#if posts}}
         <!-- Featured Course (First Item) -->
         <div class="mb-16">
            {{#foreach posts to="1"}}
            <article
               class="relative group grid grid-cols-1 lg:grid-cols-12 gap-8 items-center bg-white dark:bg-slate-900 rounded-3xl p-6 border border-gray-100 dark:border-white/5 hover:border-blue-500/50 transition-all duration-500 shadow-xl shadow-gray-200/50 dark:shadow-none">
               <!-- Image -->
               <div
                  class="lg:col-span-7 relative overflow-hidden rounded-2xl aspect-video group-hover:shadow-2xl transition-all duration-500">
                  <a href="{{url}}" class="block h-full">
                     {{#if feature_image}}
                     <img class="w-full h-full object-cover transition-transform duration-700"
                        srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image size="m" }} 600w,
                        {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
                        sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" l"}}"
                        alt="{{title}}" loading="lazy" />
                     {{else}}
                     <div class="w-full h-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                        <span class="text-gray-400">{{t "no-image"}}</span>
                     </div>
                     {{/if}}
                     <div
                        class="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                     </div>
                  </a>
               </div>

               <!-- Content -->
               <div class="lg:col-span-5 flex flex-col justify-center">
                  <div class="mb-4 flex items-center gap-3">
                     <span
                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20">
                        {{t "courses"}}
                     </span>
                     <span class="text-sm text-gray-500 font-medium">{{date published_at format="MMM DD, YYYY"}}</span>
                  </div>

                  <h2
                     class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                     <a href="{{url}}">{{title}}</a>
                  </h2>

                  <p class="text-gray-600 dark:text-gray-400 mb-6 line-clamp-3 text-base leading-relaxed">
                     {{excerpt}}
                  </p>

                  <!-- Author -->
                  <div
                     class="flex items-center justify-between mt-auto pt-6 border-t border-gray-100 dark:border-gray-800">
                     {{#primary_author}}
                     <div class="flex items-center gap-3">
                        {{#if profile_image}}
                        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-800"
                           src="{{img_url profile_image size=" xs"}}" alt="{{name}}">
                        {{else}}
                        <div
                           class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-sm font-bold text-gray-500">
                           {{name.[0]}}</div>
                        {{/if}}
                        <div>
                           <h6 class="text-sm font-bold text-gray-900 dark:text-white">{{name}}</h6>
                           <span class="text-xs text-gray-500">{{t "published-by"}}</span>
                        </div>
                     </div>
                     {{/primary_author}}

                     <a href="{{url}}"
                        class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-50 dark:bg-slate-800 text-gray-600 dark:text-gray-400 group-hover:bg-blue-500 group-hover:text-white transition-all duration-300">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                     </a>
                  </div>
               </div>
            </article>
            {{/foreach}}
         </div>

         <!-- Remaining Posts Grid -->
         <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 posts mb-16" id="posts-container">
            {{#foreach posts from="2"}}
            {{> cards/card-course}}
            {{/foreach}}
         </div>

         <!-- Load More -->
         {{#if pagination.next}}
         <div class="text-center">
            <button
               class="js-load-posts group relative inline-flex items-center justify-center px-8 py-3 font-bold text-white transition-all duration-300 bg-blue-600 rounded-full hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
               <span class="mr-2">{{t "load-more-courses"}}</span>
               <svg class="w-5 h-5 transition-transform duration-300 group-hover:translate-y-1" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3">
                  </path>
               </svg>
            </button>
         </div>
         {{/if}}

         {{else}}
         <div class="text-center py-20">
            <div
               class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
               <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
                  </path>
               </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{t "no-courses-found"}}</h3>
            <p class="text-gray-500">{{t "check-back-later"}}</p>
         </div>
         {{/if}}
      </div>
   </div>

   {{#contentFor "scripts"}}
   <script>
      // Simple load more logic (placeholder)
      document.querySelector('.js-load-posts')?.addEventListener('click', function () {
         console.log('Load more clicked');
      });
   </script>
   {{/contentFor}}