Show how to create a prototype on the homepage (#215)

src/app/index.css

@@ -13,7 +13,6 @@
 }
 
 /* Indicate non-functional links */
-
 a[href="#"] {
   cursor: not-allowed;
 }
@@ -22,3 +21,22 @@ a[href="#"] {
 strong {
   font-weight: 800;
 }
+
+.ams-details {
+  color: var(--ams-color-primary-black);
+  font-family: var(--ams-text-font-family);
+  font-size: var(--ams-text-level-6-font-size);
+  font-weight: var(--ams-text-font-weight-normal);
+  line-height: var(--ams-text-level-6-line-height);
+
+  summary {
+    cursor: var(--ams-action-activate-cursor);
+    width: max-content;
+  }
+
+  code {
+    font-size: 75%;
+    line-height: 2;
+  }
+}
+

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Grid, Heading, LinkList, PageHeading, Screen } from '@amsterdam/design-system-react'
+import { Grid, Heading, LinkList, PageHeading, Paragraph, Screen } from '@amsterdam/design-system-react'
 import Link from 'next/link'
 
 export default function Page() {
@@ -9,9 +9,11 @@ export default function Page() {
       <Grid paddingVertical="large">
         <Grid.Cell span="all">
           <PageHeading>Prototypes</PageHeading>
-          <Heading level={2} size="level-4" className="ams-mb--md">
+          <Heading level={2} size="level-4">
             Amsterdam Design System
           </Heading>
+        </Grid.Cell>
+        <Grid.Cell span="all">
           <LinkList>
             <Link legacyBehavior href="/amopis" passHref>
               <LinkList.Link>Amopis</LinkList.Link>
@@ -25,6 +27,26 @@ export default function Page() {
             {/* Append route import here */}
           </LinkList>
         </Grid.Cell>
+        <Grid.Cell span="all">
+          <details className="ams-details">
+            <summary className="ams-mb--xs">Kickstart your own</summary>
+            <Paragraph size="small">
+              <code>
+                git clone [email protected]:Amsterdam/design-system-prototypes.git
+                <br />
+                cd design-system-prototypes
+                <br />
+                npm install
+                <br />
+                npm run add site 'Site name'
+                <br />
+                npm run add page 'Site name' 'Page name'
+                <br />
+                npm run dev
+              </code>
+            </Paragraph>
+          </details>
+        </Grid.Cell>
       </Grid>
     </Screen>
   )