Merge branch 'main' into get_started_top_funnel

content/docs/dvclive/live/log_image.md

@@ -12,22 +12,32 @@ def log_image(name: str, val):
 from dvclive import Live
 
 with Live() as live:
+    # 1. Log an image from a numpy array:
     import numpy as np
     img_numpy = np.ones((500, 500), np.uint8) * 255
     live.log_image("numpy.png", img_numpy)
 
+    # 2. Or log a `PIL.image`:
     from PIL import Image
     img_pil = Image.new("RGB", (500, 500), (250, 250, 250))
     live.log_image("pil.png", img_pil)
+
+    # 3. Or log an existing image:
+    from PIL import Image
+    live.log_image("sample.png", "run/batch_0_sample.png")
 ```
 
 ## Description
 
 Supported values for `val` are:
 
-- A valid NumPy array (convertible to image via
+- A valid NumPy array (convertible to an image via
   [PIL.Image.fromarray](https://pillow.readthedocs.io/en/stable/reference/Image.html#PIL.Image.fromarray))
-- A `PIL.Image` instance.
+- A `PIL.Image` instance
+- A path to an image file (`str` or
+  [`Path`](https://docs.python.org/3/library/pathlib.html#pathlib.Path)). It
+  should be in a format that is readable by
+  [`PIL.Image.open()`](https://pillow.readthedocs.io/en/stable/reference/Image.html#PIL.Image.open)
 
 The images will be saved in `{Live.plots_dir}/images/{name}`:
 
@@ -53,7 +63,8 @@ $ dvc plots diff dvclive/plots
 
 - `name` - name of the image file that this command will output
 
-- `val` - image to be saved
+- `val` - image to be saved. See the list of supported values in the
+  [Description](#description).
 
 ## Exceptions
 

redirects-list.json

@@ -99,7 +99,7 @@
   "^/doc/command-reference/exp/init$                                                      /doc/command-reference/stage/add",
 
   "^/doc/dvclive/dvclive-with-dvc$                                                        /doc/start/experiments",
-  "^/doc/dvclive/api-reference/$                                                          /doc/dvclive/",
+  "^/doc/dvclive/api-reference$                                                           /doc/dvclive/",
   "^/doc/dvclive/get-started$                                                             /doc/start/experiments",
 
   "^/doc/cml(/.*)?$                                                                       https://cml.dev/doc$1",

src/components/Home/LogosSlider/CompanyLogos.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import cn from 'classnames'
+
+const logoClass =
+  'flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out'
+const logoImageClass = 'h-20 grayscale hover:grayscale-0'
+const logoImageClassInverted = `${logoImageClass} invert`
+
+const sm = 'w-16'
+const md = 'w-24'
+const lg = 'w-32'
+const xl = 'w-40'
+const xxl = 'w-48'
+
+const logos = [
+  {
+    name: 'Aicon',
+    alt: 'Aicon logo',
+    src: 'logos/aicon.svg',
+    className: cn(logoClass, sm),
+    imageClassName: cn(logoImageClass, 'h-16')
+  },
+  {
+    name: 'Billie',
+    alt: 'Billie logo',
+    src: 'logos/billie.svg',
+    className: cn(logoClass, sm),
+    imageClassName: cn(logoImageClass, 'h-16')
+  },
+  {
+    name: 'Cyclica',
+    alt: 'Cyclica logo',
+    src: 'logos/cyclica.png',
+    className: cn(logoClass, lg)
+  },
+  {
+    name: 'Degould',
+    alt: 'Degould logo',
+    src: 'logos/degould.png',
+    className: cn(logoClass, md),
+    imageClassName: logoImageClassInverted
+  },
+  {
+    name: 'Huggingface',
+    alt: 'Huggingface logo',
+    src: 'logos/huggingface.svg',
+    className: cn(logoClass, xxl)
+  },
+  {
+    name: 'Inlab Digital',
+    alt: 'Inlab Digital logo',
+    src: 'logos/inlab-digital.svg',
+    className: cn(logoClass, lg)
+  },
+  {
+    name: 'UBS',
+    alt: 'UBS logo',
+    src: 'logos/ubs.png',
+    className: cn(logoClass, xl),
+    imageClassName: logoImageClassInverted
+  },
+  {
+    name: 'Mantis',
+    alt: 'Mantis logo',
+    src: 'logos/mantis.svg',
+    className: cn(logoClass, lg)
+  },
+  {
+    name: 'Papercup',
+    alt: 'Papercup logo',
+    src: 'logos/papercup.png',
+    className: cn(logoClass, xl)
+  },
+  {
+    name: 'Pieces',
+    alt: 'Pieces logo',
+    src: 'logos/pieces.png',
+    className: cn(logoClass, md),
+    imageClassName: logoImageClassInverted
+  },
+  {
+    name: 'Plasmasolve',
+    alt: 'Plasmasolve logo',
+    src: 'logos/plasmasolve.png',
+    className: cn(logoClass, lg),
+    imageClassName: logoImageClassInverted
+  },
+  {
+    name: 'Sicara',
+    alt: 'Sicara logo',
+    src: 'logos/sicara.png',
+    className: cn(logoClass, sm)
+  },
+  {
+    name: 'UKHO',
+    alt: 'UKHO logo',
+    src: 'logos/ukho.png',
+    className: cn(logoClass, lg),
+    imageClassName: logoImageClassInverted
+  },
+  {
+    name: 'XP Inc',
+    alt: 'XP Inc logo',
+    src: 'logos/xp-inc-new.webp',
+    className: cn(logoClass, md)
+  }
+]
+
+const CompanyLogos = () => {
+  return (
+    <>
+      {logos.map((logo, index) => (
+        <div key={index} className={logo.className}>
+          <img
+            src={logo.src}
+            alt={logo.alt}
+            width={200}
+            height={35}
+            loading="eager"
+            className={logo.imageClassName ?? logoImageClass}
+            style={{ color: 'transparent', objectFit: 'contain' }}
+          />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default CompanyLogos

src/components/Home/LogosSlider/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import cn from 'classnames'
+
+import * as styles from './styles.module.css'
+import CompanyLogos from './CompanyLogos'
+
+const CompanySlider = () => {
+  return (
+    <div className="mt-10">
+      <div className="mb-2">
+        <h2 className={cn('text-2xl font-medium text-center', styles.title)}>
+          Empowering thousands of users and customers from startups to Fortune
+          500 companies
+        </h2>
+      </div>
+      <div
+        className={cn(
+          'mb-2 w-full grid place-items-center overflow-hidden relative',
+          styles.fade
+        )}
+      >
+        <div className="flex justify-between gap-8 animate-slide">
+          <CompanyLogos />
+          <CompanyLogos />
+          <CompanyLogos />
+          <CompanyLogos />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CompanySlider

src/components/Home/LogosSlider/styles.module.css

@@ -0,0 +1,38 @@
+.title {
+  font-family: var(--font-base);
+  line-height: 45px;
+  color: var(--color-gray-dark);
+  margin: 0 auto;
+}
+
+.fade {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(to left, var(--color-light-blue), transparent);
+
+    @media screen(sm) {
+      width: 100px;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(to right, var(--color-light-blue), transparent);
+
+    @media screen(sm) {
+      width: 100px;
+    }
+  }
+}

src/components/Home/WhatsNewModal/styles.module.css

@@ -30,9 +30,9 @@
   padding: 16px 24px;
   background: linear-gradient(
     102.58deg,
-    #13adc7 22.89%,
+    #945dd6 22.89%,
     #17d5f5 24.16%,
-    #13adc7 25.62%
+    #945dd6 25.62%
   );
   background-size: 600% auto;
   color: #fff;
@@ -65,7 +65,7 @@
     opacity: 0;
     border-radius: 99px;
     transition: opacity 0.2s ease-out;
-    background: var(--color-azure-hover);
+    background: var(--color-purple-hover);
   }
 
   &:hover {

src/components/Home/index.tsx

@@ -12,6 +12,7 @@ import UseCases from './UseCases'
 import { logEvent } from '@dvcorg/gatsby-theme-iterative/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
+import CompanySlider from './LogosSlider'
 
 const logGetStartedEvent = () => logEvent('Promo', { Item: 'get-started' })
 const logUseCasesEvent = () => logEvent('Promo', { Item: 'use-cases' })
@@ -22,8 +23,10 @@ const Home: React.FC = () => {
       <WhatsNewModal />
       <HeroSection className={styles.heroSection}>
         <LandingHero />
+        <CompanySlider />
         <LearnMore />
       </HeroSection>
+      <SubscribeSection />
       <Diagram />
       <PromoSection
         title="For data scientists, by data scientists"