Merge pull request #7 from Teradata/styles/landing-page

styles(landing-page): add effects to cards
Teradata · May 15, 2024 · 5022a0f · 5022a0f
2 parents 3a2f487 + dc10537
commit 5022a0f
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 71 deletions.
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -1,49 +1,52 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
 
 const FeatureTitle = 'Categories';
 const FeatureList = [
   {
-    title: 'The freedom to innovate is now as limitless as your imagination',
-    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.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    description: (
-      <>
-        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',
-    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.
-      </>
-    ),
+    title: `What's new`,
+    href: '/docs/whats-new/',
+  },
+  {
+    title: 'Get started',
+    href: '/docs/install-ai-unlimited/',
+  },
+  {
+    title: 'Explore and analyze data',
+    href: '/docs/explore-and-analyze-data/',
+  },
+  {
+    title: 'Manage projects',
+    href: '/docs/manage-ai-unlimited/',
+  },
+  {
+    title: 'Other resources',
+    href: '/docs/resources/',
+  },
+  {
+    title: 'FAQ',
+    href: '/docs/faq/',
+  },
+  {
+    title: 'Glossary',
+    href: '/docs/glossary/',
+  },
+  {
+    title: 'Release notes',
+    href: '/docs/release-notes/',
   },
 ];
 
-function Feature({ title, description }) {
+function Feature({ title, description, href }) {
   return (
-    <div className={clsx('col col--4', styles.col)}>
-      <div className={styles.card}>
+    <Link to={href} className={clsx('col col--4', styles.col)}>
+      <div className={clsx('doc-card', styles.card)}>
         <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        {description && <p>{description}</p>}
       </div>
-    </div>
+    </Link>
   );
 }
 

diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -19,6 +19,10 @@
   letter-spacing: -1.26px;
 }
 
+a.col {
+  text-decoration: none;
+}
+
 .col {
   padding: 0 0.75rem 1.5rem;
 }
@@ -29,7 +33,6 @@
   border-radius: 12px;
   border: 1px solid #CED3DA;
   background: #FFF;
-  height: 100%;
   margin-bottom: 1rem;
   padding: 1.5rem;
 }
@@ -43,7 +46,7 @@
   font-weight: 600;
   line-height: 34px; /* 141.667% */
   letter-spacing: -0.24px;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
 }
 
 .featureSvg {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -304,6 +304,31 @@ html.plugin-search-algolia .main-wrapper .container {
   padding: 0 2rem;
 }
 
+.doc-card {
+  position: relative;
+}
+
+.doc-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.doc-card:hover::after {
+  transform: scaleX(1);
+}
+
+.doc-card:after {
+  border-bottom: 2px solid var(--cv-theme-text-logo-on-background);
+  bottom: 0;
+  content: '';
+  display: block;
+  left: 0;
+  position: absolute;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  transition: transform 0.25s ease-in-out;
+  width: 100%;
+}
+
 @media screen and (max-width: 767px) {
   html:not(.plugin-pages) .main-wrapper {
     padding: 6.75rem 0.5rem 0;

diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
@@ -116,22 +116,22 @@
   line-height: 1.5rem;
   padding: 0.75rem 1rem;
   transition: all 0.25s ease-in-out 0s;
+}
 
-  &:hover {
-    background: var(--cv-theme-text-logo-on-background);
-    border-color: var(--cv-theme-text-logo-on-background);
-    color: var(--cv-theme-surface-canvas);
-    text-decoration: none;
-  }
+.DocSearch-HitsFooter a:hover {
+  background: var(--cv-theme-text-logo-on-background);
+  border-color: var(--cv-theme-text-logo-on-background);
+  color: var(--cv-theme-surface-canvas);
+  text-decoration: none;
+}
 
-  &::after {
-    content: 'east';
-    font-family: Material Symbols Outlined;
-    margin-left: 0.5rem;
-    pointer-events: none;
-    position: relative;
-    top: 1px;
-  }
+.DocSearch-HitsFooter a::after {
+  content: 'east';
+  font-family: Material Symbols Outlined;
+  margin-left: 0.5rem;
+  pointer-events: none;
+  position: relative;
+  top: 1px;
 }
 
 .DocSearch-Button {

diff --git a/src/theme/SearchPage/index.tsx b/src/theme/SearchPage/index.tsx
@@ -428,7 +428,12 @@ function SearchPageContent(): JSX.Element {
                   <div className="col col--2"></div>
                   <Link className={styles.card} to={url}>
                     <article
-                      className={clsx('col', 'col--8', styles.searchResultItem)}
+                      className={clsx(
+                        'col',
+                        'col--8',
+                        'doc-card',
+                        styles.searchResultItem
+                      )}
                     >
                       <Heading
                         as="h2"

diff --git a/src/theme/SearchPage/styles.module.css b/src/theme/SearchPage/styles.module.css
@@ -73,27 +73,6 @@
   position: relative;
   border: 1px solid #ced3da;
   border-radius: 12px;
-
-  &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  }
-
-  &:hover:after {
-    transform: scaleX(1);
-  }
-
-  &:after {
-    border-bottom: 2px solid var(--cv-theme-text-logo-on-background);
-    bottom: 0;
-    content: '';
-    display: block;
-    left: 0;
-    position: absolute;
-    transform: scaleX(0);
-    transform-origin: 0 50%;
-    transition: transform 0.25s ease-in-out;
-    width: 100%;
-  }
 }
 
 .searchResultItemHeading {