chore: dvcx to datachain (#5261)

content/data/dvcx.yml → content/data/datachain.yml

@@ -3,9 +3,9 @@
     Datasets are getting larger, but the ability to iterate rapidly and
     efficiently is as important as ever.
   terminal: |
-    from dvcx.query import C, DatasetQuery
-    from dvcx.lib.webdataset import WebDataset
-    from dvcx.lib.gpt4_vision import DescribeImage
+    from datachain.query import C, DatasetQuery
+    from datachain.lib.webdataset import WebDataset
+    from datachain.lib.gpt4_vision import DescribeImage
 
     prompt = "How many people in the image?"
 
@@ -21,6 +21,6 @@
     Save the results of a query in a dataset that you can use to train your ML
     models.
   terminal: |
-    $ dvcx query my-query.py my-dataset
+    $ datachain query my-query.py my-dataset
     ..........
     Dataset 'my-dataset' created

plugins/landing-page/gatsby-node.ts

@@ -50,7 +50,7 @@ export const onCreateNode: GatsbyNode['onCreateNode'] = async api => {
   if (
     node.internal.type === 'File' &&
     node.sourceInstanceName === 'data' &&
-    (node.relativePath === 'dvc.yml' || node.relativePath === 'dvcx.yml')
+    (node.relativePath === 'dvc.yml' || node.relativePath === 'datachain.yml')
   ) {
     const fileContent = await loadNodeContent(node)
     const homeSlides = yaml.load(fileContent)
@@ -74,19 +74,19 @@ export const onCreateNode: GatsbyNode['onCreateNode'] = async api => {
       }
       createNode(DvcSlide)
       createParentChildLink({ child: DvcSlide, parent: node })
-    } else if (node.relativePath === 'dvcx.yml') {
-      const DvcxSlide = {
-        id: createNodeId('DvcxSlide'),
+    } else if (node.relativePath === 'datachain.yml') {
+      const DatachainSlide = {
+        id: createNodeId('DatachainSlide'),
         parent: node.id,
         children: [],
         internal: {
-          type: 'DvcxSlide',
+          type: 'DatachainSlide',
           contentDigest: node.internal.contentDigest
         },
         slides: processedSlides
       }
-      createNode(DvcxSlide)
-      createParentChildLink({ child: DvcxSlide, parent: node })
+      createNode(DatachainSlide)
+      createParentChildLink({ child: DatachainSlide, parent: node })
     }
   }
 }

src/components/Home/Hero/BetterTogether/index.tsx

@@ -6,7 +6,7 @@ const BetterTogether = () => {
   return (
     <HeroContainer className="py-14 bg-blue-100">
       <h2 className={cn('text-center text-3xl font-medium')}>
-        DVC<sup>X</sup> and DVC: Better Together
+        Datachain and DVC: Better Together
       </h2>
       <p className={cn('mt-8', 'text-xl font-normal')}>
         Build the datasets you need without modifying your data sources. Create

src/components/Home/Hero/GetStarted/GetStartedWithDvcX.tsx → src/components/Home/Hero/GetStarted/GetStartedWithDatachain.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 import HeroContainer from '../../../HeroContainer'
 import { cn } from '../../../../utils'
-import DvcxSlides from '../../LandingHero/DvcxSlides'
+import DatachainSlides from '../../LandingHero/DatachainSlides'
 import GetOnTheWaitlistForm from '../GetOnTheWaitlist/Form'
 
-const GetStartedWithDvcX = () => {
+const GetStartedWithDatachain = () => {
   return (
-    <HeroContainer className="py-10 px-6" id="get-started-dvcx">
-      <div className="flex items-end md:justify-center">
+    <HeroContainer className="py-10 px-6" id="get-started-datachain">
+      <div className="flex items-center md:justify-center">
         <h1 className={cn('text-2xl font-medium')}>Get Started with</h1>
-        <img src="/img/logos/dvcx.svg" alt="DVCx Logo" className="h-12 -ml-1" />
+        <span className="inline-block text-5xl ml-1">🔗</span>
       </div>
-      <DvcxSlides />
+      <DatachainSlides />
       <div className={cn('flex flex-col items-center justify-center w-full')}>
         <GetOnTheWaitlistForm />
       </div>
     </HeroContainer>
   )
 }
 
-export default GetStartedWithDvcX
+export default GetStartedWithDatachain

src/components/Home/Hero/HeroSection.tsx

@@ -96,7 +96,7 @@ const HeroSection = () => {
       {/* Title Section */}
       <SectionWrapper>
         <Section>
-          <img src="/img/logos/dvcx.svg" alt="DVCx Logo" className="h-28" />
+          <span className="inline-block text-8xl">🔗</span>
           <div
             className={cn(
               'flex flex-col gap-4 flex-1 justify-between',
@@ -149,7 +149,7 @@ const HeroSection = () => {
             className={styles.heroViz}
             alt="Visualization"
           />
-          <div className={cn(styles.heroDesc, styles.dvcxDesc)}>
+          <div className={cn(styles.heroDesc, styles.datachainDesc)}>
             <strong>Explore</strong> and <strong>enrich</strong> annotated
             datasets with custom embeddings, auto-labeling, and bias removal at
             billion-file scale — without modifying your data.
@@ -170,12 +170,12 @@ const HeroSection = () => {
           <CTAButton
             className="bg-dark text-light"
             onClick={() => {
-              navigate('#get-started-dvcx', { state: { focusInput: true } })
+              navigate('#get-started-datachain', {
+                state: { focusInput: true }
+              })
             }}
           >
-            <span>
-              Learn about DVC<sup>X</sup>
-            </span>
+            <span>Learn about Datachain</span>
             <ArrowDown className="w-4 md:w-6 animate-bounce" />
           </CTAButton>
         </Section>

src/components/Home/Hero/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import HeroTitleSection from './HeroTitleSection'
 import HeroSection from './HeroSection'
-import GetStartedWithDvcX from './GetStarted/GetStartedWithDvcX'
+import GetStartedWithDatachain from './GetStarted/GetStartedWithDatachain'
 import GetStartedWithDvc from './GetStarted/GetStartedWithDvc'
 import BetterTogether from './BetterTogether'
 
@@ -10,7 +10,7 @@ const Hero = () => {
     <>
       <HeroTitleSection />
       <HeroSection />
-      <GetStartedWithDvcX />
+      <GetStartedWithDatachain />
       <BetterTogether />
       <GetStartedWithDvc />
     </>

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

@@ -34,7 +34,7 @@
   }
 }
 
-.dvcxDesc {
+.datachainDesc {
   grid-column: 1/2;
   grid-row: 2;
 }
@@ -55,7 +55,7 @@
     grid-row: 1;
   }
 
-  .dvcxDesc {
+  .datachainDesc {
     grid-column: 1/2;
     grid-row: 1;
   }

src/components/Home/LandingHero/DvcxSlides.tsx → src/components/Home/LandingHero/DatachainSlides.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import Slides, { ISlide } from './Slides'
 import { graphql, useStaticQuery } from 'gatsby'
 
-const DvcxSlides = () => {
+const DatachainSlides = () => {
   const {
-    dvcxSlide: { slides }
+    datachainSlide: { slides }
   } = useStaticQuery(graphql`
     query {
-      dvcxSlide {
+      datachainSlide {
         slides {
           title
           description
@@ -16,12 +16,12 @@ const DvcxSlides = () => {
       }
     }
   `) as {
-    dvcxSlide: {
+    datachainSlide: {
       slides: ISlide[]
     }
   }
 
   return <Slides slides={slides} terminalSide="left" />
 }
 
-export default DvcxSlides
+export default DatachainSlides

src/components/Home/styles.module.css

@@ -1,7 +1,3 @@
-html {
-  scroll-behavior: smooth;
-}
-
 .heroContainer {
   @apply pt-14;
 

src/styles/global.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  scroll-behavior: smooth;
+}