docs(core): Improve links

docs/src/pages/index.module.css

@@ -133,7 +133,7 @@
     display: flex;
     align-items: flex-start;
     gap: 1rem;
-    padding: 1rem 0;
+    padding: 0rem 1rem;
 }
 
 .conceptIcon {
@@ -174,14 +174,14 @@
 .recipesGrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
+    gap: 1rem;
 }
 
 .recipeItem {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 1rem;
-    padding: 1rem 0;
+    padding: 0rem 1rem;
 }
 
 .recipeIcon {

docs/src/pages/index.tsx

@@ -261,80 +261,80 @@ export default function Home(): JSX.Element {
                         <div className={styles.conceptsGrid}>
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <ProductIcon />
+                                    <SettingsIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/products/" className={styles.conceptTitle}>
-                                        Products
+                                    <Link to="/guides/developer-guide/custom-fields/" className={styles.conceptTitle}>
+                                        Custom Fields
                                     </Link>
-                                    <p className={styles.conceptDescription}>Configure catalog.</p>
+                                    <p className={styles.conceptDescription}>Adding custom data to any Vendure entity.</p>
                                 </div>
                             </div>
 
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <CheckoutIcon />
+                                    <PluginIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/orders/" className={styles.conceptTitle}>
-                                        Orders
+                                    <Link to="/guides/developer-guide/plugins/" className={styles.conceptTitle}>
+                                        Plugins
                                     </Link>
-                                    <p className={styles.conceptDescription}>Business logic of checkout.</p>
+                                    <p className={styles.conceptDescription}>The core of Vendure's extensibility.</p>
                                 </div>
                             </div>
 
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <UsersIcon />
+                                    <ProductIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/customers/" className={styles.conceptTitle}>
-                                        Customers
+                                    <Link to="/guides/core-concepts/products/" className={styles.conceptTitle}>
+                                        Products
                                     </Link>
-                                    <p className={styles.conceptDescription}>Multi customer configuration.</p>
+                                    <p className={styles.conceptDescription}>Configure catalog.</p>
                                 </div>
                             </div>
 
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <PaymentIcon />
+                                    <UsersIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/payment/" className={styles.conceptTitle}>
-                                        Payments
+                                    <Link to="/guides/core-concepts/customers/" className={styles.conceptTitle}>
+                                        Customers
                                     </Link>
-                                    <p className={styles.conceptDescription}>Payment integrations and API.</p>
+                                    <p className={styles.conceptDescription}>Multi customer configuration.</p>
                                 </div>
                             </div>
 
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <SettingsIcon />
+                                    <PaymentIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/core-concepts/custom-fields/" className={styles.conceptTitle}>
-                                        Custom Fields
+                                    <Link to="/guides/core-concepts/payment/" className={styles.conceptTitle}>
+                                        Payments
                                     </Link>
-                                    <p className={styles.conceptDescription}>Extend entities with custom data.</p>
+                                    <p className={styles.conceptDescription}>Payment integrations and API.</p>
                                 </div>
                             </div>
 
                             <div className={styles.conceptItem}>
                                 <div className={styles.conceptIcon}>
-                                    <PluginIcon />
+                                    <CheckoutIcon />
                                 </div>
                                 <div className={styles.conceptContent}>
-                                    <Link to="/guides/developer-guide/plugins/" className={styles.conceptTitle}>
-                                        Plugins
+                                    <Link to="/guides/core-concepts/orders/" className={styles.conceptTitle}>
+                                        Orders
                                     </Link>
-                                    <p className={styles.conceptDescription}>Extend functionality with plugins.</p>
+                                    <p className={styles.conceptDescription}>Business logic of checkout.</p>
                                 </div>
                             </div>
                         </div>
                     </section>
 
                     <section className={styles.recipesSection}>
-                        <h2 className={styles.sectionTitle}>Recipes</h2>
+                        <h2 className={styles.sectionTitle}>How-To Guides</h2>
                         <div className={styles.recipesGrid}>
                             <div className={styles.recipeItem}>
                                 <div className={styles.recipeIcon}>