Add Info about VS Code Extension

src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx

@@ -126,6 +126,12 @@ const footerListsData: Array<IFooterListData> = [
         text: 'MLEM',
         icon: <MlemSVG className={styles.productIcon} />,
         target: '_blank'
+      },
+      {
+        href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc',
+        text: 'VS Code Extension',
+        icon: <LogoSVG className={styles.productIcon} />,
+        target: '_blank'
       }
     ]
   }

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx

@@ -73,7 +73,7 @@ export const OtherToolsPopup: React.FC<IPopupProps> = ({
 }) => (
   <BasePopup className={styles.otherToolsPopup} isVisible={isVisible}>
     {menuData.products.map(
-      ({ title, iconClass, description, href, target }, i) => (
+      ({ title, iconClass, description, href, target, titleImgClass }, i) => (
         <Link
           className={styles.link}
           href={href}
@@ -84,8 +84,11 @@ export const OtherToolsPopup: React.FC<IPopupProps> = ({
           <div className={cn(styles.linkIcon, iconClass)} />
           <p className={styles.title}>
             {title}
+            {titleImgClass && (
+              <span className={cn(styles.titleIcon, titleImgClass)}></span>
+            )}
             {/^https?:\/\//.test(href) && (
-              <ExternalLinkIcon className={styles.titleIcon} />
+              <ExternalLinkIcon className={styles.titleExternalIcon} />
             )}
           </p>
           <p className={styles.description}>{description}</p>

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/styles.module.css

@@ -49,6 +49,10 @@
   background-image: url("../../../../../../../static/img/mlem-icon.svg");
 }
 
+.vscodeIcon {
+  background-image: url("../../../../../../../static/img/vscode-icon.svg");
+}
+
 .communityPopup {
   row-gap: 4px;
   width: 260px;
@@ -69,7 +73,7 @@
     grid-template-columns: 32px 216px;
     column-gap: 16px;
 
-    &:hover .titleIcon {
+    &:hover .titleExternalIcon {
       opacity: 1;
     }
 
@@ -90,9 +94,18 @@
       line-height: 24px;
       display: flex;
       align-items: center;
+
+      &Icon {
+        margin-left: 4px;
+        margin-bottom: 2px;
+        width: 14px;
+        height: 14px;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
     }
 
-    .titleIcon {
+    .titleExternalIcon {
       opacity: 0;
       width: 16px;
       height: 16px;

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/alert.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import React from 'react'
 
+import { ReactComponent as VscodeIcon } from '../../../../../static/img/vscode-icon.svg'
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
 import * as styles from './styles.module.css'
@@ -9,14 +10,18 @@ const LayoutAlert: React.FC<{ collapsed: boolean }> | false = ({
   collapsed
 }) => (
   <div className={cn(styles.alert, collapsed && styles.collapsed)}>
-    <span role="img" aria-label="rocket">
-      🚀
-    </span>{' '}
-    Our new tool for deployment,{' '}
-    <Link href="https://mlem.ai" tabIndex={collapsed ? -1 : undefined}>
-      MLEM
-    </Link>
-    , has been released!
+    <div className={styles.text}>
+      <span role="img" aria-label="VS Code Logo">
+        <VscodeIcon width="22px" height="22px" />
+      </span>
+      <p>
+        Check out our{' '}
+        <Link href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc">
+          new VS Code extension
+        </Link>{' '}
+        for experiment tracking and model development
+      </p>
+    </div>
   </div>
 )
 

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css

@@ -115,6 +115,25 @@
     height: 0;
     transform: translateY(-100%);
   }
+
+  .text {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    padding: 0 16px;
+  }
+
+  p {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  span {
+    height: 22px;
+    margin-right: 8px;
+  }
 }
 
 .gitHubAlertLink {

src/@dvcorg/gatsby-theme-iterative/components/data/menu.ts

@@ -19,8 +19,9 @@ interface ICommunityData {
 
 interface IProductsData {
   title: string
+  titleImgClass?: string
   description: string
-  iconClass: string
+  iconClass: string | null
   href: string
   img: string
   imgAlt: string
@@ -136,6 +137,15 @@ const menuData: IMenuData = {
       img: '/img/dvc_icon-color--square_vector.svg',
       imgAlt: 'DVC logo'
     },
+    {
+      title: 'VS Code Extension',
+      titleImgClass: styles.vscodeIcon,
+      description: 'Local ML model development and experiment tracking',
+      iconClass: null,
+      href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc',
+      img: '/img/dvc_icon-color--square_vector.svg',
+      imgAlt: 'DVC logo'
+    },
     {
       title: 'CML',
       description: 'Open-source CI/CD for ML projects',

src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css

@@ -14,6 +14,10 @@
   background-image: url("../../../../../static/img/mlem-icon.svg");
 }
 
+.vscodeIcon {
+  background-image: url("../../../../../static/img/vscode-icon.svg");
+}
+
 .other {
   font-weight: 600;
   letter-spacing: 2px;

src/components/Features/index.tsx

@@ -19,6 +19,22 @@ const FeaturesPage: React.FC = () => (
       </HeroSection>
       <LayoutWidthContainer>
         <div className={styles.features}>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/cluster.svg"
+              alt="cluster"
+            />
+            <h3 className={styles.featureName}>VS Code Extension</h3>
+            <div className={styles.featureDescription}>
+              Manage your data, run experiments, compare metrics, and visualize
+              plots, all in VS Code. Extend DVC capabilities and your ML
+              experimentation workflows directly into your IDE.{' '}
+              <Link href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc">
+                Start using it now
+              </Link>
+            </div>
+          </div>
           <div className={styles.feature}>
             <img
               className={styles.featureIcon}

src/components/Features/styles.module.css

@@ -34,6 +34,21 @@
   flex-basis: 311px;
   padding: 0 10px;
   margin-bottom: 63px;
+
+  &:first-child {
+    flex-basis: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 110px;
+
+    @media (--xs-scr) {
+      align-items: flex-start;
+      padding: 0 10px;
+      text-align: left;
+    }
+  }
 }
 
 .featureIcon {