Merge branch 'main' of https://github.com/Teradata/ai-unlimited-docs

Teradata · May 7, 2024 · 994756c · 994756c
2 parents 55279d7 + edf661a
commit 994756c
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 46 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -13,7 +13,7 @@ const projectName = 'ai-unlimited-docs';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Teradata AI Unlimited',
+  title: 'Teradata AI Unlimited Documentation',
   tagline: 'A scalable, serverless compute engine in any cloud.',
   favicon: 'img/favicon.ico',
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@bsahitya/react-components": "^0.1.0",
+    "@bsahitya/react-components": "^0.1.1",
     "@covalent/tokens": "^8.10.1",
     "@docusaurus/core": "3.2.0",
     "@docusaurus/preset-classic": "3.2.0",

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -2,59 +2,57 @@ import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
-const FeatureTitle = 'Feature Guides';
+const FeatureTitle = 'Categories';
 const FeatureList = [
   {
     title: 'The freedom to innovate is now as limitless as your imagination',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Discover faster, easier, and more cost-effective AI innovation with Teradata AI Unlimited, our serverless AI/ML engine in the cloud, now available in private preview through Azure Marketplace. 
+        Discover faster, easier, and more cost-effective AI innovation with
+        Teradata AI Unlimited, our serverless AI/ML engine in the cloud, now
+        available in private preview through Azure Marketplace.
       </>
     ),
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
-        Bring the power of Teradata’s industry-leading ClearScape Analytics capabilities to a low-cost environment that maximizes exploration and discovery. 
+        Bring the power of Teradata's industry-leading ClearScape Analytics
+        capabilities to a low-cost environment that maximizes exploration and
+        discovery.
       </>
     ),
   },
   {
     title: 'AI Unlimited on Microsoft Azure and Fabric Marketplace',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
-        With high-performance compute and in-engine analytics, Teradata AI Unlimited offers incredible new use cases, all securely and natively integrated into the Microsoft ecosystem.
+        With high-performance compute and in-engine analytics, Teradata AI
+        Unlimited offers incredible new use cases, all securely and natively
+        integrated into the Microsoft ecosystem.
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ title, description }) {
   return (
     <div className={clsx('col col--4', styles.col)}>
       <div className={styles.card}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
       </div>
-      </div>
     </div>
   );
 }
 
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <h2 >{FeatureTitle}</h2>
-        <div className="row">
+      <div className={clsx('container', styles.container)}>
+        <h2>{FeatureTitle}</h2>
+        <div className={clsx('row', styles.row)}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -2,11 +2,8 @@
   display: flex;
   align-items: center;
   padding: 2rem 0;
-  background: #F6F7FB;
-}
-
-.features .container {
-  max-width: 1228px;
+  background: var(--ifm-color-white);
+  gap: 1.5rem;
 }
 
 .features h2 {
@@ -23,18 +20,68 @@
 }
 
 .col {
-  padding-bottom: 1rem;
+  padding: 0 0.75rem 1.5rem;
 }
 
 .card {
+  --ifm-spacing-horizontal: 0.25rem;
+
   border-radius: 12px;
   border: 1px solid #CED3DA;
   background: #FFF;
   height: 100%;
   margin-bottom: 1rem;
+  padding: 1.5rem;
+}
+
+.card h3 {
+  color: var(--Primary-Navy, #00233c);
+  /* Desktop/H3 */
+  font-family: Inter;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 34px; /* 141.667% */
+  letter-spacing: -0.24px;
+  margin-bottom: 0.5rem;
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
 }
+
+.container {
+  padding: 0 1.5rem;
+}
+
+.row {
+  margin: 0 -0.625rem;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  .container {
+    padding: 0 2.5rem 0;
+  }
+
+  .col {
+    --ifm-col-width: 50%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .features h2 {
+    font-size: 26px;
+    line-height: 36px; /* 138.462% */
+    letter-spacing: -0.78px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .container {
+    padding: 0 6.625rem 0;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1440px;
+  }
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -150,7 +150,7 @@ aside.theme-doc-sidebar-container {
 }
 
 html:not(.plugin-pages) .main-wrapper {
-  padding: 6.75rem calc(1.5rem - var(--ifm-spacing-horizontal)) 0;
+  padding: 6.75rem 1.5rem 0;
   max-width: 1440px;
   box-sizing: border-box;
 }
@@ -304,6 +304,12 @@ html.plugin-search-algolia .main-wrapper .container {
   padding: 0 2rem;
 }
 
+@media screen and (max-width: 767px) {
+  html:not(.plugin-pages) .main-wrapper {
+    padding: 6.75rem 0.5rem 0;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   html:not(.plugin-pages) .main-wrapper {
     padding: 0 6.625rem 0;
@@ -325,4 +331,4 @@ html.plugin-search-algolia .main-wrapper .container {
 
 html[data-navbar='false'] .navbar {
   display: none;
-}
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,44 +7,48 @@ import HeroImageUrl from '@site/static/img/hero.png';
 import Translate from '@docusaurus/Translate';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
-
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className={clsx('container', styles.container)}>
         <div className="">
           <Heading as="h1" className="hero__title">
             {siteConfig.title}
-          </Heading> 
+          </Heading>
           <p className="hero__subtitle">
             <Translate id="theme.tagline">{siteConfig.tagline}</Translate>
           </p>
           <div className={styles.buttons}>
             <Link
-              className="button button--secondary button--lg"
-              to="/docs/install-ai-unlimited">
-                <Translate id="theme.button">Get Started - 5min ⏱️</Translate>
+              className={clsx(
+                'button button--secondary button--lg',
+                styles.getStartedButton
+              )}
+              to="/docs/install-ai-unlimited"
+            >
+              <Translate id="theme.button">Get Started</Translate>
             </Link>
           </div>
         </div>
-        <div className={styles.heroImage} >
-            <img src={HeroImageUrl} />
-            <div className={styles.heroBlur} ></div> 
+        <div className={styles.heroImage}>
+          <img src={HeroImageUrl} />
+          <div className={styles.heroBlur}></div>
         </div>
       </div>
     </header>
   );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
-      <main>
+      <main className={styles.features}>
         <HomepageFeatures />
       </main>
     </Layout>