docs(hero): react - update when to use and not to use sections

packages/sage-react/lib/Hero/Hero.story.mdx

@@ -8,29 +8,32 @@ import heroFull from '../../public/HeroWorkshopPlaceholder.jpg';
 <Meta title="Sage/Hero" />
 
 # Hero
+A Hero is used to call attention to new features or content. The hero is flexible in size and can contain text, illustrations, full-bleed images, and a full-bleed video thumbnail.
 
 ## Usage Guidelines
 
 ### When to use
 
-- 
+- When you want to deliver a powerful message, statement, or value proposition immediately upon a user a page or view.
+- To provide a visually compelling first impression.
+- For limited-time events or promotions, where the emphasis is timely and needs immediate attention.
 
 ### When not to use
 
-- 
+- If there’s a risk that the Hero might overshadow or distract from other critical content or actions on the page.
 
 ## Accessibility
 
-
+Ensure images that are used in the Hero component have alt text that describes the image and are not used for decorative purposes.
 
 ## Properties
 
-<ArgsTable story="Default" />
+<ArgsTable story="Small" />
 
 ## Full-Bleed Images
 
-### Default - Small
-The default small Hero component takes up a portion of the viewport width.
+### Small
+The small Hero component takes up a portion of the viewport width.
 
 <Canvas>
   <Story name="Small">
@@ -47,7 +50,7 @@ The default small Hero component takes up a portion of the viewport width.
   </Story>
 </Canvas>
 
-### Default - Large
+### Large
 The default large Hero component takes up the entire viewport width.
 
 <Canvas>
@@ -65,7 +68,7 @@ The default large Hero component takes up the entire viewport width.
   </Story>
 </Canvas>
 
-### Image has a trigger
+### Image with trigger
 When the image has a trigger, the image is clickable and will trigger an action.
 
 <Canvas>
@@ -105,10 +108,10 @@ When the Hero is set to borderless and has a custom background color, the Hero w
 
 ## Contained Images
 
-### Default - Small
+### Small and contained image
 
 <Canvas>
-  <Story name="Small - Contained">
+  <Story name="Small and contained image">
     <Hero
       title="Learn with Kajabi in our live workshops"
       description="Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account."
@@ -122,11 +125,11 @@ When the Hero is set to borderless and has a custom background color, the Hero w
   </Story>
 </Canvas>
 
-### Default - Large
+### Large and contained image
 The default large Hero component takes up the entire viewport width.
 
 <Canvas>
-  <Story name="Large - Contained">
+  <Story name="Large and contained image">
     <Hero
       title="Learn with Kajabi in our live workshops"
       description="Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account."
@@ -140,11 +143,11 @@ The default large Hero component takes up the entire viewport width.
   </Story>
 </Canvas>
 
-### Image has a trigger
+### Contained image has a trigger
 When the image has a trigger, the image is clickable and will trigger an action.
 
 <Canvas>
-  <Story name="Image with Trigger - Contained">
+  <Story name="Contained image has a trigger">
     <Hero
       title="Learn with Kajabi in our live workshops"
       description="Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account."
@@ -160,11 +163,11 @@ When the image has a trigger, the image is clickable and will trigger an action.
   </Story>
 </Canvas>
 
-### Borderless and custom background color
+### Contained image with borderless container and custom background color
 When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero.
 
 <Canvas>
-  <Story name="Borderless and custom background color - Contained">
+  <Story name="Contained image with borderless container and custom background color">
     <Hero
       title="Learn with Kajabi in our live workshops"
       description="Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account."