Tweak static and dynamic links in getting started

Author: satya164

src/css/custom.css

@@ -1203,6 +1203,141 @@ code {
   border-width: 1px;
 }
 
+.featured-actions > ul {
+  list-style: none;
+  padding-left: 0;
+
+  li + li {
+    margin-top: var(--ifm-spacing-horizontal);
+  }
+
+  li {
+    --featured-actions-chevron-size: 1.125rem;
+    --featured-actions-chevron-offset: 1.25rem;
+
+    position: relative;
+    margin: 0;
+    padding: 1rem
+      calc(
+        var(--featured-actions-chevron-offset) +
+          var(--featured-actions-chevron-size) + 0.5rem
+      )
+      1rem 1.25rem;
+    border-radius: var(--ifm-alert-border-radius);
+    overflow: hidden;
+    background-color: var(--ifm-background-surface-color);
+    box-shadow: var(--ifm-global-shadow-lw);
+    transition: var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+      pointer-events: none;
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: var(--featured-actions-chevron-offset);
+      z-index: 1;
+      width: var(--featured-actions-chevron-size);
+      height: var(--featured-actions-chevron-size);
+      content: '';
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
+        no-repeat center;
+      mask-size: 100% 100%;
+      background-color: var(--ifm-color-emphasis-800);
+      transform: translateY(-50%);
+      transition:
+        transform var(--ifm-transition-fast)
+          var(--ifm-transition-timing-default),
+        background-color var(--ifm-transition-fast)
+          var(--ifm-transition-timing-default);
+      pointer-events: none;
+    }
+
+    &:hover,
+    &:focus-within {
+      box-shadow: var(--ifm-global-shadow-md);
+
+      &::before {
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+      }
+
+      &::after {
+        background-color: var(--ifm-color-primary);
+      }
+    }
+  }
+
+  li > p {
+    margin: 0;
+  }
+
+  li > p + p {
+    margin-top: calc(var(--ifm-spacing-vertical) / 2);
+  }
+
+  li:has(> .recommended-badge) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 0.75rem;
+    row-gap: calc(var(--ifm-spacing-vertical) / 2);
+  }
+
+  li:has(> .recommended-badge) > p:first-child {
+    min-width: 0;
+  }
+
+  li:has(> .recommended-badge) > .recommended-badge + p {
+    flex-basis: 100%;
+    margin-top: 0;
+  }
+
+  li > p:first-child a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  li > p:first-child a::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .recommended-badge {
+    --alert-accent-color: var(--ifm-color-info-dark);
+    --recommended-badge-background: hsl(var(--ifm-color-info-hue), 70%, 96.8%);
+    --recommended-badge-border: hsl(var(--ifm-color-info-hue), 56%, 85.5%);
+
+    [data-theme='dark'] & {
+      --recommended-badge-background: hsl(
+        var(--ifm-color-info-hue),
+        46%,
+        11.5%
+      );
+      --recommended-badge-border: hsl(var(--ifm-color-info-hue), 40%, 36%);
+    }
+
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    padding: 0rem 0.5rem;
+    border: 1px solid var(--recommended-badge-border);
+    border-radius: 999px;
+    background: var(--recommended-badge-background);
+    color: var(--alert-accent-color);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}
+
 .image-grid > p {
   display: grid;
   grid-template-columns: repeat(

versioned_docs/version-7.x/getting-started.md

@@ -166,24 +166,18 @@ In `AndroidManifest.xml`, set `android:enableOnBackInvokedCallback` to `false` i
 
 When using React Navigation, you configure [**navigators**](glossary-of-terms.md#navigator) in your app. Navigators handle transitions between screens and provide UI such as headers, tab bars, etc.
 
-:::info
-
-When you use a navigator (such as stack navigator), you'll need to follow that navigator's installation instructions for any additional dependencies.
-
-:::
-
 There are 2 ways to configure navigators:
 
-### Static configuration
+<div class="featured-actions">
 
-The static configuration API lets you write your navigation configuration in an object. This reduces boilerplate and simplifies TypeScript types and deep linking. Some aspects can still be changed dynamically.
+- **[Static configuration](hello-react-navigation.md?config=static)**
 
-This is the **recommended way** to set up your app. If you need more flexibility later, you can mix and match with the dynamic configuration.
+  <span class="recommended-badge">Recommended</span>
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=static) to start writing some code with the static API.
+  Object-based configuration with automatic TypeScript types and deep linking. Supports static screen lists with dynamic navigator options.
 
-### Dynamic configuration
+- **[Dynamic configuration](hello-react-navigation.md?config=dynamic)**
 
-The dynamic configuration API lets you write your navigation configuration using React components that can change at runtime based on state or props. This offers more flexibility but requires significantly more boilerplate for TypeScript types, deep linking, etc.
+  Component-based configuration with significantly more boilerplate. Supports dynamic screen lists and navigator options.
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=dynamic) to start writing some code with the dynamic API.
+</div>

versioned_docs/version-8.x/getting-started.md

@@ -153,24 +153,18 @@ In `AndroidManifest.xml`, set `android:enableOnBackInvokedCallback` to `false` i
 
 When using React Navigation, you configure [**navigators**](glossary-of-terms.md#navigator) in your app. Navigators handle transitions between screens and provide UI such as headers, tab bars, etc.
 
-:::info
-
-When you use a navigator (such as stack navigator), you'll need to follow that navigator's installation instructions for any additional dependencies.
-
-:::
-
 There are 2 ways to configure navigators:
 
-### Static configuration
+<div class="featured-actions">
 
-The static configuration API lets you write your navigation configuration in an object. This reduces boilerplate and simplifies TypeScript types and deep linking. Some aspects can still be changed dynamically.
+- **[Static configuration](hello-react-navigation.md?config=static)**
 
-This is the **recommended way** to set up your app. If you need more flexibility later, you can mix and match with the dynamic configuration.
+  <span class="recommended-badge">Recommended</span>
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=static) to start writing some code with the static API.
+  Object-based configuration with automatic TypeScript types and deep linking. Supports static screen lists with dynamic navigator options.
 
-### Dynamic configuration
+- **[Dynamic configuration](hello-react-navigation.md?config=dynamic)**
 
-The dynamic configuration API lets you write your navigation configuration using React components that can change at runtime based on state or props. This offers more flexibility but requires significantly more boilerplate for TypeScript types, deep linking, etc.
+  Component-based configuration with significantly more boilerplate. Supports dynamic screen lists and navigator options.
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=dynamic) to start writing some code with the dynamic API.
+</div>