(gatsby-minimal-starter): Update docs links and style to match relaunch (#28660)

* match docs relaunch

* fix vertical alignment

* Update starters/gatsby-starter-minimal/src/pages/index.js

Co-authored-by: Florian Kissling <[email protected]>

* Update starters/gatsby-starter-minimal/src/pages/index.js

Co-authored-by: Florian Kissling <[email protected]>

* Update starters/gatsby-starter-minimal/src/pages/index.js

Co-authored-by: Florian Kissling <[email protected]>

* Update starters/gatsby-starter-minimal/src/pages/index.js

Co-authored-by: Florian Kissling <[email protected]>

* adjust alignment

* maxWidth

Co-authored-by: Florian Kissling <[email protected]>

Author: LB

starters/gatsby-starter-minimal/src/pages/index.js

@@ -27,42 +27,72 @@ const codeStyles = {
 const listStyles = {
   marginBottom: 96,
   paddingLeft: 0,
-  listStyleType: "none",
 }
 const listItemStyles = {
-  marginBottom: 12,
   fontWeight: "300",
-  letterSpacing: 1,
+  fontSize: "24px",
+  maxWidth: "560px",
 }
-const linkStyles = {
+
+const linkStyle = {
   color: "#8954A8",
+  fontWeight: "bold",
+  fontSize: "16px",
+  verticalAlign: "5%",
+}
+
+const docLinkStyle = {
+  ...linkStyle,
+  listStyleType: "none",
+  marginBottom: 24,
+}
+
+const descriptionStyle = {
+  color: "#232129",
+  fontSize: "14px",
 }
 
+const docLink = {
+  text: "Documentation",
+  url: "https://www.gatsbyjs.com/docs/",
+  color: "#8954A8",
+}
 // data
 const links = [
   {
-    text: "Documentation",
-    url: "https://www.gatsbyjs.com/docs/",
+    text: "Tutorial",
+    url: "https://www.gatsbyjs.com/docs/tutorial/",
+    description:
+      "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
+    color: "#E95800",
   },
   {
-    text: "Tutorials",
-    url: "https://www.gatsbyjs.com/tutorial/",
+    text: "How to Guides",
+    url: "https://www.gatsbyjs.com/docs/how-to/",
+    description:
+      "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
+    color: "#1099A8",
   },
   {
-    text: "Guides",
-    url: "https://www.gatsbyjs.com/tutorial/",
+    text: "Reference Guides",
+    url: "https://www.gatsbyjs.com/docs/reference/",
+    description:
+      "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
+    color: "#BC027F",
   },
   {
-    text: "API Reference",
-    url: "https://www.gatsbyjs.com/docs/api-reference/",
+    text: "Conceptual Guides",
+    url: "https://www.gatsbyjs.com/docs/conceptual/",
+    description:
+      "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
+    color: "#0D96F2",
   },
   {
     text: "Plugin Library",
     url: "https://www.gatsbyjs.com/plugins",
-  },
-  {
-    text: "Cheat Sheet",
-    url: "https://www.gatsbyjs.com/docs/cheat-sheet/",
+    description:
+      "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
+    color: "#000000",
   },
 ]
 
@@ -74,7 +104,7 @@ const IndexPage = () => {
       <h1 style={headingStyles}>
         Congratulations
         <br />
-        <span style={headingAccentStyles}>— you just made a Gatsby site!</span>
+        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
         <span role="img" aria-label="Party popper emojis">
           🎉🎉🎉
         </span>
@@ -87,14 +117,25 @@ const IndexPage = () => {
         </span>
       </p>
       <ul style={listStyles}>
+        <li style={docLinkStyle}>
+          <a
+            style={linkStyle}
+            href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
+          >
+            {docLink.text}
+          </a>
+        </li>
         {links.map(link => (
-          <li style={listItemStyles}>
-            <a
-              style={linkStyles}
-              href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
-            >
-              {link.text}
-            </a>
+          <li style={{ ...listItemStyles, color: link.color }}>
+            <span>
+              <a
+                style={linkStyle}
+                href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
+              >
+                {link.text}
+              </a>
+              <p style={descriptionStyle}>{link.description}</p>
+            </span>
           </li>
         ))}
       </ul>