Community page lists its sub-pages

hugo.yaml

@@ -55,18 +55,34 @@ menu:
     - name: "Learning"
       url: "/learning/"
       weight: 10
+      params:
+        icon: "fas fa-graduation-cap"
+        description: "Guides, tutorials, and resources to grow your PowerShell skills."
     - name: "Calendar"
       url: "/calendar/"
       weight: 20
+      params:
+        icon: "fas fa-calendar-days"
+        description: "Upcoming user group meetings, webinars, and community events."
     - name: "Authors"
       url: "/authors/"
       weight: 30
+      params:
+        icon: "fas fa-pen-nib"
+        description: "Meet the community members writing articles and sharing knowledge."
     - name: "Forums"
       url: "https://forums.powershell.org"
       weight: 40
+      params:
+        icon: "fas fa-comments"
+        description: "Ask questions and discuss PowerShell with the wider community."
+        external: true
     - name: "Discord Archive"
       url: "/discord/"
       weight: 50
+      params:
+        icon: "fab fa-discord"
+        description: "Searchable archive of conversations from our Discord server."
 
 # Site parameters
 params:

themes/powershell-community/layouts/community/list.html

@@ -0,0 +1,44 @@
+{{ define "main" }}
+
+<!-- Page Header -->
+<section class="powershell-blue py-10">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
+        <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Title }}</h1>
+        {{ if .Params.description }}
+        <p class="text-xl opacity-90 max-w-3xl mx-auto">{{ .Params.description }}</p>
+        {{ end }}
+    </div>
+</section>
+
+<!-- Content Section -->
+<section class="py-10 bg-gray-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {{ with .Content }}
+        <div class="prose prose-lg max-w-3xl mx-auto text-center mb-10">{{ . }}</div>
+        {{ end }}
+
+        <!-- Sub-page Grid -->
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {{ range .Site.Menus.community }}
+            <a href="{{ .URL }}"
+               {{ if .Params.external }}target="_blank" rel="noopener"{{ end }}
+               class="group block bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-6">
+                <div class="flex items-center mb-3">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-100 text-blue-600 mr-4">
+                        <i class="{{ with .Params.icon }}{{ . }}{{ else }}fas fa-link{{ end }} text-xl"></i>
+                    </div>
+                    <h2 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-200">
+                        {{ .Name }}
+                        {{ if .Params.external }}<i class="fas fa-arrow-up-right-from-square text-xs text-gray-400 ml-1"></i>{{ end }}
+                    </h2>
+                </div>
+                {{ with .Params.description }}
+                <p class="text-gray-600">{{ . }}</p>
+                {{ end }}
+            </a>
+            {{ end }}
+        </div>
+    </div>
+</section>
+
+{{ end }}