add icon and card for groups app guide

components/icons/index.js

@@ -12,4 +12,5 @@ export { default as MintFiller } from "./mintfiller";
 export { default as Nock } from "./nock";
 export { default as Peer } from "./peer";
 export { default as Ringsig } from "./ringsig";
+export { default as Squad } from "./squad";
 export { default as Vere } from "./vere";

components/icons/ringsig.js

@@ -13,7 +13,7 @@ export default function Ringsig({ className }) {
         cy="40"
         r="24"
         className="stroke-white dark:stroke-black"
-        stroke-width="2"
+        strokeWidth="2"
       />
     </svg>
   );

components/icons/squad.js

@@ -0,0 +1,38 @@
+export default function Squad() {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="80" height="80" rx="10" fill="#49CA9C"/>
+      <rect x="24" y="24" width="14.9154" height="14.9154" rx="3" fill="white"/>
+      <rect
+        x="41.8986"
+        y="24"
+        width="14.9154"
+        height="14.9154"
+        rx="3"
+        fill="white"
+      />
+      <rect
+        x="24"
+        y="41.1528"
+        width="14.9154"
+        height="14.9154"
+        rx="3"
+        fill="white"
+      />
+      <rect
+        x="41.8986"
+        y="41.1528"
+        width="14.9154"
+        height="14.9154"
+        rx="3"
+        fill="white"
+      />
+    </svg>
+  );
+}

pages/guides/[[...slug]].js

@@ -22,6 +22,7 @@ import {
 import {
   Comms,
   Ringsig,
+  Squad,
   MintFiller,
   guideDefault,
 } from "../../components/icons";
@@ -240,6 +241,13 @@ function Landing({ search }) {
             application guides.
           </p>
           <div className="flex flex-col space-y-8 md:space-y-0 md:flex-row md:space-x-8 pt-12">
+            <Card
+              icon={<Squad />}
+              title="Groups Application"
+              text="Build an app to create public or private groups"
+              className="basis-1/2"
+              href="/guides/quickstart/groups-guide"
+            />
             <Card
               icon={<Comms />}
               title="Encrypted Chat Application"
@@ -247,6 +255,8 @@ function Landing({ search }) {
               className="basis-1/2"
               href="/guides/quickstart/chat-guide"
             />
+          </div>
+          <div className="flex flex-col space-y-8 md:space-y-0 md:flex-row md:space-x-8 pt-12">
             <Card
               icon={<Ringsig />}
               title="Ring Signature Voting App"
@@ -254,6 +264,7 @@ function Landing({ search }) {
               className="basis-1/2"
               href="/guides/quickstart/voting-guide"
             />
+            <div className="basis-1/2" />
           </div>
         </Section>
         <Section short className="space-y-6">