--- /dev/null
+{{ define "main" }}
+<main class="min-h-screen px-4 py-12">
+ <article class="max-w-4xl mx-auto">
+ <!-- Page Title (Hero) -->
+ <div class="mb-12">
+ <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in">
+ {{ i18n "repositoryTitle" }}
+ </h1>
+ <p class="text-xl text-gray-600 dark:text-gray-400 animate-fade-in-delay">
+ {{ i18n "repositorySubtitle" }}
+ </p>
+ </div>
+
+ <!-- Page Content (markdown sections) -->
+ <div class="prose dark:prose-invert max-w-none mb-12">
+ {{ .Content }}
+ </div>
+
+ <!-- Repository Cards Section -->
+ <section class="mt-16">
+ <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+ {{ range $.Site.Data.repos.repos }}
+ <div class="border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+ <!-- Card Image -->
+ <img
+ src="{{ .image }}"
+ alt="{{ .name }}"
+ class="w-full h-48 object-cover"
+ loading="lazy"
+ />
+
+ <!-- Card Content -->
+ <div class="p-6">
+ <h3 class="text-xl font-bold mb-2">{{ .name }}</h3>
+
+ <p class="text-gray-600 dark:text-gray-400 mb-4">
+ {{ i18n .description_key }}
+ </p>
+
+ <!-- Tags -->
+ {{ if .tags }}
+ <div class="flex flex-wrap gap-2 mb-4">
+ {{ range .tags }}
+ <span class="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-800 rounded">
+ {{ . }}
+ </span>
+ {{ end }}
+ </div>
+ {{ end }}
+
+ <!-- GitHub Link -->
+ <a
+ href="{{ .github_url }}"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="btn btn-primary w-full text-center"
+ >
+ {{ i18n "visitGithub" }} →
+ </a>
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ </section>
+ </article>
+</main>
+{{ end }}