Added icons/logos to group cards

assets/scss/common/_general.scss

@@ -355,4 +355,40 @@
       padding-top: unset;
     }
   }
-}
+}
+
+// feature-icon
+.feature-icon-container {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  line-height: 3rem;
+  text-align: center;
+  height: 3rem;
+  width: 3rem; 
+  margin: -1.5rem 0 1.5rem; 
+  background-color: $gray-200;
+  border-radius: 0.5rem;
+}
+
+[data-dark-mode] body .feature-icon-container {
+  background-color: $gray-700;
+}
+
+// feature-image
+.feature-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 3rem;
+  text-align: center;
+  height: 3rem;
+  width: 3rem; 
+  margin: -1.5rem 0 1.5rem; 
+  background-color: $gray-200;
+  border-radius: 0.5rem;
+}
+
+[data-dark-mode] body .feature-image-container {
+  background-color: $gray-700;
+}

content/docs/_index.md

@@ -17,12 +17,12 @@ weight: 1 # Weight compared to other sections of the site, this shouldn't affect
 #### I want to...
 
 {{% card/group %}}
-{{< card/feature href="/start" title="Get Started" text="Start with Flutter, Java, or IoT development" >}}
-{{< card/feature href="/sdk" title="Learn the SDK" text="See our SDK Documentation here">}}
+{{< card/feature-icon icon="fa-external-link-square" href="/start" title="Get Started" text="Start with Flutter, Java, or IoT development">}}
+{{< card/feature-icon icon="fa-book" href="/sdk" title="Learn the SDK" text="See our SDK Documentation here">}}
 {{% /card/group %}}
 {{% card/group %}}
-{{< card/feature href="/atplatform" title="Learn the Platform" text="See our infrastructure overview here" >}}
-{{< card/feature href="/tutorials" title="Follow a Tutorial" text="Find specific tutorials on our tech here">}}
+{{< card/feature-icon icon="fa-book" href="/atplatform" title="Learn the Platform" text="See our infrastructure overview here" >}}
+{{< card/feature-icon icon="fa-check-square" href="/tutorials" title="Follow a Tutorial" text="Find specific tutorials on our tech here">}}
 {{% /card/group %}}
 
 #### Featured Tutorials

content/docs/start/_index.md

@@ -11,6 +11,17 @@ description:
 
 draft: false # Change this to "true" to hide the page
 toc: true # Change this to "false" to hide the table of contents
-autolinks: true # Change this to "false" to hide the automatic links below your content
+autolinks: false # Change this to "false" to hide the automatic links below your content
 weight: 99 # For list pages, higher is first.
 ---
+
+#### I want to get started with...
+
+{{% card/group %}}
+{{< card/feature-image img="flutter.png" href="/start" title="Flutter" text="Start with Flutter development">}}
+{{< card/feature-image img="java.png" href="/sdk" title="Java" text="Start with Java development">}}
+{{% /card/group %}}
+
+{{% card/group %}}
+{{< card/feature-icon icon="fa-server" href="/start" title="IoT" text="Start with IoT development">}}
+{{% /card/group %}}

hugo_stats.json

@@ -2,7 +2,6 @@
   "htmlElements": {
     "tags": [
       "a",
-      "add",
       "article",
       "atsign",
       "blockquote",
@@ -12,10 +11,7 @@
       "circle",
       "code",
       "created",
-      "dd",
       "div",
-      "dl",
-      "dt",
       "em",
       "email",
       "emoji",
@@ -26,7 +22,6 @@
       "h3",
       "h4",
       "h5",
-      "h6",
       "head",
       "header",
       "hr",
@@ -141,14 +136,19 @@
       "embed-responsive-16by9",
       "embed-responsive-item",
       "error404",
+      "fa-book",
       "fa-caret-right",
+      "fa-check-square",
       "fa-external-link-square",
+      "fa-server",
       "fabs",
       "fas",
       "feather",
       "feather-menu",
       "feather-moon",
       "feather-sun",
+      "feature-icon-container",
+      "feature-image-container",
       "flex-basis-0",
       "flex-column",
       "flex-grow-1",
@@ -195,6 +195,7 @@
       "ms-3",
       "ms-auto",
       "ms-md-n3",
+      "mt-2",
       "mx-xl-auto",
       "my-1",
       "my-3",
@@ -287,7 +288,6 @@
       "a-assignment-of-static-ip",
       "a-register-domain-name-with-aws",
       "a-register-domain-name-with-gcp",
-      "adding-iconbutton",
       "anchor-tag-a",
       "arrow-back",
       "assets",
@@ -319,16 +319,10 @@
       "content",
       "contributing-to-the-developer-site",
       "definition",
-      "delete-dude",
-      "deleting-a-privatehiddenkey-example",
       "deleting-a-publickey-example",
       "deleting-a-selfkey-example",
       "deleting-a-sharedkey-example",
       "done",
-      "dude-controller",
-      "dude-model",
-      "dudeservice",
-      "dudeservice-methods",
       "error-codes",
       "example",
       "example-1",
@@ -338,22 +332,17 @@
       "example-5",
       "featured-tutorials",
       "free-atsigns",
-      "from-json",
       "frontmatter",
-      "get-contacts",
-      "get-profile",
-      "getting-a-privatehiddenkey-example",
       "getting-a-publickey-example",
       "getting-a-selfkey-example",
       "getting-a-sharedkey-other-example",
       "getting-a-sharedkey-self-example",
-      "getting-dudes-from-remote-secondary",
       "how-it-works-at-atsign",
       "i-want-to",
+      "i-want-to-get-started-with",
       "image---asset",
       "image---page",
       "image---remote",
-      "imports",
       "introduction",
       "iot-network-architecture",
       "javascript",
@@ -363,40 +352,28 @@
       "lets-go",
       "line-break-br",
       "list-of-clis",
-      "localnotificationservice",
       "maven-dependency",
       "metadata",
-      "metadata--atkeys",
       "mode",
       "models",
       "monitor",
-      "monitor-notification",
       "monitor-verb",
-      "navigationservice",
       "next-step",
       "notification",
-      "notify",
       "notify-list",
       "notify-remove",
       "notify-verb",
       "notifylist-verb",
       "notifyremove-verb",
       "offcanvasDoks",
-      "onboarding",
       "open-source-contributions",
-      "other-methods",
       "other-services",
       "overview",
       "paid-atsigns",
       "panelfeature",
       "polymorphic-data",
       "prerequisite",
       "previous-step",
-      "profile-model",
-      "properties-of-dudeservice",
-      "properties-of-localnotificationservice",
-      "putdude-method",
-      "putting-a-privatehiddenkey-example",
       "putting-a-publickey-example",
       "putting-a-selfkey-example",
       "putting-sharedkey-example",
@@ -406,12 +383,10 @@
       "requirements",
       "root-secondary",
       "root-server",
-      "saving-profile-model-data",
       "search",
       "secondary-server",
       "secondary-servers",
       "section-130ddfce9c28453883ccfe2da8b6d5ac",
-      "section-5a5c507983026cf2af9f40acb713f707",
       "section-63d5049791d9d79d86e9a108b0a999ca",
       "section-76633bb1ac6de866df853afb3570dcd5",
       "section-9887a4451812854f0f1b6f669a874307",
@@ -439,8 +414,6 @@
       "the-sync-verb",
       "the-update-verb",
       "the-updatemeta-verb",
-      "to-json",
-      "update-appbar",
       "usage",
       "value",
       "verbs",

layouts/shortcodes/card/feature-icon.html

@@ -0,0 +1,11 @@
+<div class="card {{ .Get "class" }}">
+  <a href="{{ .Get "href" }}">
+    <div class="card-body">
+      <div class="feature-icon-container">
+      <i class="fas {{ .Get "icon" }}" style="height:1.5rem; width:1.5rem; font-size: 1.5em;"></i>
+      </div>
+      <h5 class="card-title">{{ .Get "title" }}</h5>
+      <p class="card-text">{{ .Get "text" }}</p>
+    </div>
+  </a>
+</div>

layouts/shortcodes/card/feature-image.html

@@ -0,0 +1,11 @@
+<div class="card {{ .Get "class" }}"  style="margin-top: 32px; margin-bottom: 32px;">
+  <a href="{{ .Get "href" }}">
+    <div class="card-body">
+      <div class="feature-image-container">
+      <img src="{{ .Get "img" }}" style="height:2rem; width:2rem;"></img>
+      </div>
+      <h5 class="card-title">{{ .Get "title" }}</h5>
+      <p class="card-text">{{ .Get "text" }}</p>
+    </div>
+  </a>
+</div>

layouts/shortcodes/card/feature.html

@@ -1,7 +1,7 @@
 <div class="card {{ .Get "class" }}">
   <a href="{{ .Get "href" }}">
     <div class="card-body">
-      <h5 class="card-title" style="margin-top: 0.5em;">{{ .Get "title" }}</h5>
+      <h5 class="card-title mt-2">{{ .Get "title" }}</h5>
       <p class="card-text">{{ .Get "text" }}</p>
     </div>
   </a>