Feat/add developers homepage

src/components/DevelopersHomepage/FeatureData.js

@@ -0,0 +1,96 @@
+import gettingStartedUrl from '@site/static/img/developers/Document.png';
+import documentationUrl from '@site/static/img/developers/Library.png';
+import downloadsUrl from '@site/static/img/developers/Download.png';
+import communityUrl from '@site/static/img/developers/People.png';
+import bulletUrl from '@site/static/img/developers/Bullet.png';
+import externalUrl from '@site/static/img/developers/External.png';
+//import DataScientist from '@site/static/img/developers/DataScientist.png';
+//import DataLeader from '@site/static/img/developers/DataLeader.png';
+//import Developer from '@site/static/img/developers/Developer.png';
+//import businessLeader from '@site/static/img/developers/businessLeader.png';
+//import dataEngineer from '@site/static/img/developers/dataEngineer.png';
+
+export const FeatureList = [
+  {
+    imgBullet: bulletUrl,
+    img: gettingStartedUrl,
+    title: 'Getting started',
+    description: 'Get quickly up to speed with Teradata Vantage. Learn about features. Find how-tos for common tasks. Explore sample source code.',
+    descriptionLink:'View Getting started',
+    href: 'https://quickstarts.teradata.com',
+  },
+  {
+    imgBullet: bulletUrl,
+    img: documentationUrl,
+    title: `Documentation`,
+    description: 'Access Vantage Documentation for VantageCloud Enterprise, VantageCore VMware and VantageCore IntelliFlex.',
+    descriptionLink:'View Lake docs',
+    href: 'https://docs.teradata.com/p/VantageCloud/Lake',
+    imgBullet2:bulletUrl,
+    descriptionLink2: 'View all Teradata docs',
+    href2: 'https://docs.teradata.com/',
+  },
+  {
+    imgBullet: bulletUrl,
+    img: downloadsUrl,
+    title: `Downloads`,
+    description: 'Find publicly available downloads from Teradata. Browse by category or select one of the popular downloads below.',
+    descriptionLink:'View Downloads',
+    href: 'https://downloads.teradata.com/',
+    descriptionLink2:''
+  },
+  {
+    imgBullet: bulletUrl,
+    img: communityUrl,
+    title: 'Community',
+    description: 'Recent Community Blogs. The best minds from Teradata, our partners, and customers blog about relevant topics and features.',
+    descriptionLink:'View Community',
+    href: 'https://support.teradata.com/community',
+    descriptionLink2:''
+  }
+];
+
+export const FeatureList2 = [
+  {
+    img: gettingStartedUrl,
+    img2: externalUrl,
+    title: 'Run Scripts on Vantage',
+    description: 'Sometimes, you need to apply complex logic to your data that can’t be easily expressed in SQL. One option is to wrap your logic in a User Defined Function (UDF). What if you ...',
+    href: '/docs/install-ai-unlimited/',
+  },
+  {
+    img: gettingStartedUrl,
+    img2: externalUrl,
+    title: `Using Vantage from a Jupyter notebook`,
+    description: 'In this how-to we will go through the steps for connecting to Teradata Vantage from a Jupyter notebook.',
+    href: '/docs/explore-and-analyze-data/use-cases/',
+  },
+  {
+    img: downloadsUrl,
+    img2: externalUrl,
+    title: `Teradata Tools and Utilities`,
+    description: 'In this how-to we will go through the steps for connecting to Teradata Vantage from a Jupyter notebook.',
+    href: '/docs/whats-new/',
+  },
+  {
+    img: gettingStartedUrl,
+    img2: externalUrl,
+    title: `Connect to Vantage using Python`,
+    description: 'This how-to demonstrates how to connect to Vantage using teradatasql Python database driver for Teradata Vantage.',
+    href: '/docs/explore-and-analyze-data/use-cases/',
+  },
+  {
+    img: downloadsUrl,
+    img2: externalUrl,
+    title: `Vantage Analytics Library`,
+    description: 'The Vantage Analytics Library (VAL) consists of a Java XSP (a SQL generator), 2 table operators (to support the KMeans and Decision Tree algorithms) and statistical te...',
+    href: '/docs/whats-new/',
+  },
+  {
+    img: downloadsUrl,
+    img2: externalUrl,
+    title: `Teradata JDBC Driver`,
+    description: 'The Teradata JDBC Driver enables Java applications to connect to the Teradata Database.',
+    href: '/docs/whats-new/',
+  }
+];

src/components/DevelopersHomepage/GetStarted.js

@@ -0,0 +1,113 @@
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import DataScientist from '@site/static/img/developers/DataScientist.png'
+import businessLeader from '@site/static/img/developers/businessLeader.png'
+import DataLeader from '@site/static/img/developers/DataLeader.png'
+import Developer from '@site/static/img/developers/Developer.png'
+import dataEngineer from  '@site/static/img/developers/dataEngineer.png'
+import React from 'react';
+import { Typography, TabBar, Tab, Banner, Button } from '@teradata-web/react-components';
+
+
+export default function GetStarted() {
+  const handleButtonClick1 = () => {
+    window.location.href = 'https://quickstarts.teradata.com/ml.html';
+  };
+  const handleButtonClick2 = () => {
+    window.location.href = 'https://quickstarts.teradata.com/dbt.html';
+  };
+  const handleButtonClick3 = () => {
+    window.location.href = 'https://quickstarts.teradata.com/jdbc.html';
+  };
+  const handleButtonClick4 = () => {
+    window.location.href = 'https://quickstarts.teradata.com/tools-and-utilities/run-bulkloads-efficiently-with-teradata-parallel-transporter.html';
+  };
+  const handleButtonClick5 = () => {
+    window.location.href = 'https://quickstarts.teradata.com/ml.html';
+  };
+
+
+  return (
+    <>
+    <section className={styles.features}>
+      <div className={clsx('container', styles.container)}>
+        <div className={clsx('row', styles.row)}>
+          <div className={clsx('col', styles.col)}>
+            <Typography scale="eyebrow">
+              Solutions for you
+            </Typography>
+
+            <p className={clsx(styles.secondSubheading)}>
+              <Typography scale="headline2">
+                Get started with Teradata
+              </Typography>
+            </p>
+          </div>
+        </div>
+        <div className={clsx('row', styles.row)}>
+          <div className='col'>
+            <TabBar>
+              <Tab label='Data Scientist'>
+                <Banner
+                  content={<>
+                    <p><React.Fragment key=".0">There are situations when you want to quickly validate a machine learning model idea. You have a model type in mind. You don’t want to operationalize with an ML pipeline just yet. You just want to test out if the relationship you had in mind exists. Also, sometimes even your production deployment doesn’t require constant relearning with MLops. In such cases, you can use Vantage Analytics Library (VAL) and multiple ML model types it supports.</React.Fragment></p>
+                    <br/>
+                    <Button label='Get started' primary={true} icon='fa fa-arrow-right' trailingIcon={true} onClick={handleButtonClick1}></Button>
+                  </>}
+                  imageSrc={DataScientist}
+                  title="Train ML models in Vantage"
+                />
+              </Tab>
+              <Tab label='Data Engineer'>
+                <Banner
+                  content={<>
+                    <p><React.Fragment key=".0">This tutorial demonstrates how to use dbt (Data Build Tool) with Teradata Vantage. It’s based on the original dbt Jaffle Shop tutorial. A couple of models have been adjusted to the SQL dialect supported by Vantage.</React.Fragment></p>
+                    <br/>
+                    <Button label='Get started' primary={true} icon='fa fa-arrow-right' trailingIcon={true} onClick={handleButtonClick2}></Button>
+                  </>}
+                  imageSrc={DataLeader}
+                  title="dbt with Teradata Vantage"
+                />
+              </Tab>
+              <Tab label='Developer'>
+              <Banner
+                  content={<>
+                    <p><React.Fragment key=".0">This how-to demonstrates how to connect to Teradata Vantage using JDBC using a sample Java application: https://github.com/Teradata/jdbc-sample-app.</React.Fragment></p>
+                    <br/>
+                    <Button label='Get started' primary={true} icon='fa fa-arrow-right' trailingIcon={true} onClick={handleButtonClick3}></Button>
+                  </>}
+                  imageSrc={Developer}
+                  title="Connect to Vantage using JDBC"
+                />
+              </Tab>
+              <Tab label='Database Administrator'>
+              <Banner
+                  content={<>
+                    <p><React.Fragment key=".0">We often have a need to move large volumes of data into Vantage. Teradata offers Teradata Parallel Transporter (TPT) utility that can efficiently load large amounts of data into Teradata Vantage. This how-to demonstrates how to use TPT. In this scenario,</React.Fragment></p>
+                    <br/>
+                    <Button label='Get started' primary={true} icon='fa fa-arrow-right' trailingIcon={true} onClick={handleButtonClick4}></Button>
+                  </>}
+                  imageSrc={businessLeader}
+                  title="Database Run large bulkloads efficiently with Teradata Parallel Transporter (TPT)"
+                />
+              </Tab>
+              <Tab label='IT Operations'>
+              <Banner
+                  content={<>
+                    <p><React.Fragment key=".0">Native Object Storage (NOS) is a Vantage feature that allows you to query data stored in files in object storage such as AWS S3, Google GCS, Azure Blob or on-prem implementations. It’s useful in scenarios where you want to explore data without building a</React.Fragment></p>
+                    <br/>
+                    <Button label='Get started' primary={true} icon='fa fa-arrow-right' trailingIcon={true} onClick={handleButtonClick5}></Button>
+                  </>}
+                  imageSrc={dataEngineer}
+                  title="Query data stored in object storage"
+                />
+              </Tab>
+            </TabBar>
+          </div>
+        </div>
+      </div>
+    </section>
+    </>
+  );
+}

src/components/DevelopersHomepage/JumpIn.js

@@ -0,0 +1,45 @@
+
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+import { FeatureList } from './FeatureData';
+
+function Feature({ imgBullet, imgBullet2, img, title, description, href, href2, descriptionLink, descriptionLink2   }) {
+  return (
+    <div className={clsx('col', styles.col)}>
+      <div className={clsx('', styles.card)}>
+        <img src={img} alt={title} title={title}/>
+        <div className={clsx(styles.pad)}>
+          <Heading as="h3">{title}</Heading>
+        </div>
+        {description && <p>{description}</p>}
+        <div className={clsx(styles.dot)}>
+          <img src={imgBullet} className={clsx(styles.dotPad)}/>
+          <a href={href} target='_blank' className={clsx(styles.links)}>{descriptionLink}</a>
+        </div>
+        <br/>
+        <div className={clsx(styles.dot)}>  
+          <img src={imgBullet2} className={clsx(styles.dotPad)}/>
+          <a href={href2} target='_blank' className={clsx(styles.links)}>{descriptionLink2}</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function JumIn() {
+  return (
+    <>
+    <section className={styles.features}>
+      <div className={clsx('container', styles.container)}>
+        <div className={clsx('row', styles.row)}>
+          <Feature {...FeatureList[0]} />
+          <Feature {...FeatureList[1]} />
+          <Feature {...FeatureList[2]} />
+          <Feature {...FeatureList[3]} />
+        </div>
+      </div>
+    </section>
+    </>
+  );
+}

src/components/DevelopersHomepage/LinksImg.js

@@ -0,0 +1,46 @@
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import teradataCommunityUrl from '@site/static/img/developers/Community.png';
+import githubUrl from '@site/static/img/developers/Github.png';
+import stackoverflowUrl from '@site/static/img/developers/Stackoverflow.png';
+import mediumUrl from '@site/static/img/developers/Medium.png';
+import { Typography } from '@teradata-web/react-components';
+
+export default function LinksImages() {
+  return (
+    <>
+    <section className={styles.features}>
+      <div className={clsx('container', styles.container)}>
+        <div className={clsx('row', styles.row)}>
+          <div className={clsx('col', styles.col)}>
+            <p className={clsx(styles.secondSubheading)}>
+              <Typography scale="headline2">
+                Talk to Developers where you are
+              </Typography>
+            </p>
+          </div>
+        </div>
+        <div className={clsx('row', styles.row)}>
+          <div className='col'>
+            <div className={styles.imgFoot}>
+              <a href='https://support.teradata.com/community' target='_blank'>
+                <img src={teradataCommunityUrl} alt="Teradata Community" title="Teradata Community"/>
+              </a>
+              <a href='https://medium.com/teradata' target='_blank'>
+                <img src={mediumUrl} alt="Teradata Technical Blogs" title="Teradata Technical Blogs"/>
+              </a>
+              <a href='https://github.com/Teradata' target='_blank'>
+                <img src={githubUrl} alt="GitHub" title="GitHub"/>
+              </a>
+              <a href='https://stackoverflow.com/questions/tagged/teradata' target='_blank'>
+                <img src={stackoverflowUrl} alt="Stackoverflow" title="Stackoverflow"/>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    </>
+  );
+}