Mainframe: Update test product landing page + fixed small bug with card layout

Author: lamATnginx

assets/css/v2/style.css

@@ -1233,7 +1233,7 @@ h6:has(a):hover {
     padding: 1rem;
 
     &.featured-card {
-      /* If there is a featured card, only the featured card should be full length */
+      /* If there is a need for a featured card, only the featured card should be full length */
       grid-column: 1 / -1;
 
       /* If there is a featured card AND two cards, the last one should be full length */
@@ -1244,7 +1244,7 @@ h6:has(a):hover {
   }
 
   /* If there is no featured card, last card that is the 3rd one should be full width */
-  &:not(:has(.featured-card)) .card-container:nth-child(3n):last-child {
+  &:not(:has(.featured-card)) .card-container:nth-child(3n) {
     grid-column: 1 / -1;
   }
 }

exampleSite/content/test-product/_index.md

@@ -1,33 +1,41 @@
 ---
-description: Test pages for nginx-hugo-theme
+# The title is the product name
 title: Test pages
 weight: 100
-hasCustomContent: true
+# The URL is the base of the deployed path, becoming "docs.nginx.com/<url>/<other-pages>"
+url: 
+# The subtitle displays directly underneath the heading of a given page
+nd-subtitle: Test pages for nginx-hugo-theme
+# Indicates that this is a custom landing page
+nd-landing-page: true
+# Types have a 1:1 relationship with Hugo archetypes, so you shouldn't need to change this
+nd-content-type: landing-page
+# Intended for internal catalogue and search, case sensitive:
+# Agent, N4Azure, NIC, NIM, NGF, NAP-DOS, NAP-WAF, NGINX One, NGINX+, Solutions, Unit
+nd-product:
 ---
 
 ## About
+[//]: # "These are Markdown comments to guide you through document structure. Remove them as you go, as well as any unnecessary sections."
+[//]: # "Use underscores for _italics_, and double asterisks for **bold**."
+[//]: # "Backticks are for `monospace`, used sparingly and reserved mostly for executable names - they can cause formatting problems. Avoid them in tables: use italics instead."
+
+[//]: # "This initial section introduces the product to a reader: give a short 1-2 sentence summary of what the product does and its value to the reader."
+[//]: # "Name specific functionality it provides: avoid ambiguous descriptions such as 'enables efficiency', focus on what makes it unique."
 
-[//]: # "Give a short 1-2 sentence summary of what the product does and its value to a customer."
 This is a compilation of all our shortcodes to show how they look, function, respond, and coded.
 
 ## Featured Content
+[//]: # "You can add a maximum of three cards: any extra will not display."
+[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid."
+[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature."
 
-[//]: # "Maximum of three cards available to display."
-[//]: # "Each card should be less than 10 words for a description."
-[//]: # "If more than three cards are placed here, they are not displayed."
-[//]: # "If there is one card, it will take full width and be the only card in the row."
-[//]: # "If there is two cards, one card will take half width and there will be two cards in a row."
-[//]: # "If there is three cards, there will be two rows, where first row has two equal-sized cards, and second row will have a full width card. Can we inversed in order to feature content."
-<!-- <card-layout> - Available params: title (required: string)-->
 {{<card-layout >}}
-  <!-- <card-section> - Available params: title (required: string), showAsCards (optional: boolean, default "false"), isFeaturedSection (optional: boolean, default "false") -->
-  <!-- If there is no "title" for <card-section>, it is implied it is the main content section and not a new content section -->
   {{<card-section showAsCards="true" isFeaturedSection="true">}}
     {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
       All shortcodes in one page.
     {{</card >}}
     {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
-      <!-- <card> - Available params: title (required: string), titleUrl (optional: string, relative path or absolute URL (e.g. https://google.com)), icon (optional: string, pulled from lucide), brandIcon (optional: string, takes priority over icon if provided) -->
       Examples for call-out shortcode
     {{</card >}}
     {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
@@ -37,8 +45,8 @@ This is a compilation of all our shortcodes to show how they look, function, res
 {{</card-layout >}}
 
 ## Other Content 
+[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text."
 
-[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)"
 {{<card-layout >}}
   {{<card-section title="NGINX" showAsCards="true" >}}
     {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}