docs: added a deploy guide for next.js storefront (#3558)

* docs: added a deploy next.js guide

* docs: fix image zoom

www/docs/sidebars.js

@@ -222,7 +222,7 @@ module.exports = {
               id: 'deployments/admin/deploying-on-netlify',
               label: 'Deploy on Netlify',
               customProps: {
-                image: 'https://i.imgur.com/gCbsCvX.png'
+                image: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574027/Medusa%20Docs/Other/gCbsCvX_h7nijn.png'
               }
             },
           ]
@@ -235,12 +235,27 @@ module.exports = {
             id: 'deployments/storefront/index'
           },
           items: [
+            {
+              type: 'doc',
+              id: 'deployments/storefront/deploying-next-on-vercel',
+              label: 'Deploy Next.js on Vercel',
+              customProps: {
+                themedImage: {
+                  light: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574115/Medusa%20Docs/Other/vercel-icon-dark_llkb7l.png',
+                  dark: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574132/Medusa%20Docs/Other/vercel-icon-light_obvtno.png'
+                }
+              }
+            },
             {
               type: 'doc',
               id: 'deployments/storefront/deploying-gatsby-on-netlify',
               label: 'Deploy Gatsby on Netlify',
               customProps: {
-                image: 'https://i.imgur.com/gCbsCvX.png'
+                image: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574027/Medusa%20Docs/Other/gCbsCvX_h7nijn.png',
+                badge: {
+                  variant: 'orange',
+                  children: 'Deprecated'
+                }
               }
             },
           ]

www/docs/src/components/Badge/index.js

@@ -7,7 +7,8 @@ export default function Badge ({ className, variant, children }) {
     <span className={clsx(
       styles.badge,
       className,
-      variant === 'purple' && styles.purpleBadge
+      variant === 'purple' && styles.purpleBadge,
+      variant === 'orange' && styles.orangeBadge
     )}>
       {children}
     </span>

www/docs/src/components/Badge/styles.module.css

@@ -12,4 +12,10 @@
   background-color: var(--medusa-tag-purple-bg);
   border-color: var(--medusa-tag-purple-border);
   color: var(--medusa-tag-purple-text);
+}
+
+.orangeBadge {
+  background-color: var(--medusa-tag-orange-bg);
+  border-color: var(--medusa-tag-orange-border);
+  color: var(--medusa-tag-orange-text);
 }

www/docs/src/css/_medusa.css

@@ -127,8 +127,13 @@
   --medusa-tag-purple-bg: #EDE9FE;
   --medusa-tag-purple-bg-hover: #E4DEFC;
   --medusa-tag-purple-text: #5746AF;
-  --medusa-tag-purple-dot: #6E56CF;
+  --medusa-tag-purple-icon: #6E56CF;
   --medusa-tag-purple-border: #D7CFF9;
+  --medusa-tag-orange-bg: #FFECBC;
+  --medusa-tag-orange-bg-hover: #FFE3A2;
+  --medusa-tag-orange-text: #AD5700;
+  --medusa-tag-orange-icon: #FFB224;
+  --medusa-tag-orange-border: #FFD386;
 }
 
 /** Dark theme **/
@@ -192,6 +197,11 @@ html[data-theme="dark"] {
   --medusa-tag-purple-bg: #2C2250;
   --medusa-tag-purple-bg-hover: #32275F;
   --medusa-tag-purple-text: #9E8CFC;
-  --medusa-tag-purple-dot: #6E56CF;
+  --medusa-tag-purple-icon: #6E56CF;
   --medusa-tag-purple-border: #392C72;
+  --medusa-tag-orange-bg: #3F2200;
+  --medusa-tag-orange-bg-hover: #4A2900;
+  --medusa-tag-orange-text: #F1A10D;
+  --medusa-tag-orange-icon: #FFB224;
+  --medusa-tag-orange-border: #573300;
 }

www/docs/src/theme/DocCard/index.js

@@ -25,12 +25,13 @@ function CardContainer({href, children, className}) {
   );
 }
 
-function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false}) {
+function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false, badge}) {
   return (
     <CardContainer href={href} className={clsx(containerClassName, isSoon && styles.cardSoon)}>
       <div className={clsx(styles.cardIconContainer)}>
         {icon}
         {isSoon && <Badge variant={'purple'}>Guide coming soon</Badge>}
+        {badge && <Badge {...badge} />}
       </div>
       <div className={clsx(styles.contentContainer)}>
         <span className={clsx(styles.cardTitle)} title={title}>
@@ -110,6 +111,7 @@ function CardCategory({item}) {
       )}
       containerClassName={item.customProps?.className}
       isSoon={item.customProps?.isSoon}
+      badge={item.customProps?.badge}
     />
   );
 }
@@ -127,6 +129,7 @@ function CardLink({item}) {
       html={item.customProps?.html}
       containerClassName={item.customProps?.className}
       isSoon={item.customProps?.isSoon}
+      badge={item.customProps?.badge}
     />
   );
 }