feat(possiblebanner) : adding possible banner 2025

i18n/en/code.json

@@ -295,7 +295,7 @@
     "message": "Get started"
   },
   "home_page.possible_banner_title": {
-    "message": "If you imagine it, envision it, create it... Teradata makes it Possible. Join us."
+    "message": "Connect, learn, and build with the Teradata Developer Community at Possible 2025"
   },
   "home_page.register_now": {
     "message": "Register now"

src/components/DevelopersHomepage/index.js

@@ -2,10 +2,12 @@ import JumpIn from './JumpIn';
 import GetStarted from './GetStarted';
 import TopPicks from './TopPicks';
 import LinksImages from './LinksImg';
+import PossibleBanner from '../PossibleBanner';
 
 export default function DevelopersHomepage() {
   return (
     <>
+    <PossibleBanner />
     <JumpIn />
     <GetStarted />
     <TopPicks />

src/components/PossibleBanner/index.js

@@ -0,0 +1,63 @@
+import PossibleImageUrl from '@site/static/img/Possible-2025-OG.webp';
+import { Card, Typography } from '@teradata-web/react-components';
+import { translate } from '@docusaurus/Translate';
+import styles from './styles.module.css';  
+import clsx from 'clsx';
+import { useLocation } from 'react-router-dom';
+
+function BannerContent() {
+    return (
+        <section className={styles.bannerContent}>
+            <div className={styles.bannerCaption}>
+                <Typography scale="caption">
+                    <span className={styles.featuredEvent}>
+                        {translate({ message: 'home_page.featured_event' })}
+                    </span>
+                </Typography>
+                <Typography scale="headline3">
+                    <span className={styles.bannerTitle}>
+                        {translate({ message: 'home_page.possible_banner_title' })}
+                    </span>
+                </Typography>
+            </div>
+            <Typography scale="body1">
+                <div className={styles.registerNow}>
+                    {translate({ message: 'home_page.register_now' })}
+                </div>
+            </Typography>
+        </section>
+    );
+}
+
+export default function PossibleBanner() {
+    const location = useLocation();
+    const normalizePath = (path) => path.replace(/\/$/, ''); 
+    const currentPath = normalizePath(location.pathname);
+    let link = '';
+
+    if (currentPath === normalizePath(`/quickstarts`)) {
+        link = 'https://www.teradata.com/events/possible?utm_source=developer-site&utm_medium=display&utm_campaign=gbl-possible-devrel&utm_content=developer-quickstarts&utm_id=701V500000HTemgIAD';
+    } else{
+        link = 'https://www.teradata.com/events/possible?utm_source=developer-site&utm_medium=display&utm_campaign=gbl-possible-devrel&utm_content=developer-portal&utm_id=701V500000HTemgIAD';
+    }
+
+    return (
+        <section className={clsx('container', styles.container)}>
+            <a
+                className={styles.possibleBannerLink}
+                href={link}
+                target="_blank"
+                aria-label={translate({
+                    message: 'home_page.possible_banner_title',
+                })}
+            >
+                <Card
+                    imageSrc={PossibleImageUrl}
+                    imageAltText={translate({ message: 'home_page.possible_banner_title' })}
+                    imageWidth="350px"
+                    content={<BannerContent />}
+                />
+            </a>
+        </section>
+    );
+}

src/components/PossibleBanner/secondaryBanner.js

@@ -0,0 +1,41 @@
+import styles from './styles.module.css';  
+import { useLocation } from 'react-router-dom';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+
+const SecondaryBanner = () => {
+  const location = useLocation();
+  const { i18n } = useDocusaurusContext();
+  const normalizePath = (path) => path.replace(/\/+$/, '');
+  const currentPath = normalizePath(location.pathname);
+  const quickstartsPath = useBaseUrl('/quickstarts');
+  const aiUnlimitedPath = useBaseUrl('/ai-unlimited');
+  const baseLocale = useBaseUrl(`/${i18n.currentLocale}`);
+  const pathsNoAlert = [
+    normalizePath(baseLocale),
+    normalizePath(`${baseLocale}/ai-unlimited`),
+    normalizePath(`${baseLocale}/quickstarts`),
+    normalizePath(quickstartsPath),
+    normalizePath(aiUnlimitedPath),
+    normalizePath(useBaseUrl('/')), 
+  ];
+
+  const shouldDisplayAlert = !pathsNoAlert.includes(currentPath);
+  if (!shouldDisplayAlert) return null;
+
+  const quickstartsLink = "https://www.teradata.com/events/possible?utm_source=developer-site&utm_medium=display&utm_campaign=gbl-possible-devrel&utm_content=developer-quickstarts&utm_id=701V500000HTemgIAD";
+
+  return (
+    <div className={styles.secondaryBanner}>
+      <span className={styles.bannerText}>
+        Learn how to build the future of AI at Possible 2025.
+      </span>
+      <a className={styles.bannerTextLink} href={quickstartsLink} target="_blank" rel="noopener noreferrer">
+        Register now
+      </a>
+    </div>
+  );
+};
+
+export default SecondaryBanner;

src/components/PossibleBanner/styles.module.css

@@ -0,0 +1,179 @@
+.card {
+  --ifm-spacing-horizontal: 0.25rem;
+
+  border-radius: 12px;
+  border: 1px solid #CED3DA;
+  background: #FFF;
+  height: 100%;
+  padding: 1.5rem;
+  overflow: hidden;
+}
+
+.card h3 {
+  color: var(--Primary-Navy, #00233c);
+  font-family: Inter;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 34px; 
+  letter-spacing: -0.24px;
+  margin-bottom: 0;
+}
+
+.card p {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; 
+}
+
+.container {
+  padding: 0 1.5rem;
+}
+
+.bannerContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.bannerCaption {
+  margin-bottom: 1rem;
+}
+
+.bannerTitle {
+  display: -webkit-box;
+  line-clamp: 2;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.featuredEvent {
+  color: var(--ifm-breadcrumb-color-active);
+}
+
+.possibleBannerLink {
+  display: inline-block;
+  padding: 1rem 0 1.5rem;
+}
+
+.possibleBannerLink:hover {
+  text-decoration: none;
+}
+
+.registerNow {
+  color: var(--ifm-heading-color);
+  display: flex;
+  font-weight: 600;
+  margin-top: 1rem;
+}
+
+.registerNow::after {
+  content: 'east' / '';
+  font-family: Material Symbols Outlined;
+  margin-left: 0.5rem;
+  pointer-events: none;
+  position: relative;
+  transition: transform 0.25s ease-in-out;
+}
+
+
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  .container {
+    padding: 120px 2.5rem 0;
+  }
+
+}
+
+@media screen and (min-width: 1025px) {
+  .container {
+    padding: 120px 6.625rem 0;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1440px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1440px;
+  }
+}
+
+
+/*Secondary Banner*/
+@media (max-width: 996px) {
+  .secondaryBanner {
+    background: #DFE1F9;
+    height: 50px;
+    margin-top: 107px;
+    margin-bottom: -100px;
+    color: #171A2C;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+    .bannerTextLink{
+    text-decoration: underline;
+    color: #171A2C;
+    font-size: 12px;
+    font-weight: 400;
+  }
+   .bannerText {
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-weight: 600;
+    line-height: normal; 
+    color: #171A2C;
+  }
+}
+
+@media (min-width: 997px) {
+  .secondaryBanner {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    height: 50px;
+    background: #DFE1F9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 1rem;
+    box-sizing: border-box;
+  }
+
+  .bannerText {
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-weight: 600;
+    line-height: normal; 
+    color: #171A2C;
+    padding-right: 0.5rem;
+  }
+  .bannerTextLink{
+    color: #171A2C;
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+  }
+}

src/components/QuickstartsPages/index.js

@@ -4,6 +4,7 @@ import styles from './styles.module.css';
 import Link from '@docusaurus/Link';
 import { Typography } from '@teradata-web/react-components';
 import { translate } from '@docusaurus/Translate';
+import PossibleBanner from '../PossibleBanner';
 
 const FeatureTitle = translate({ message: 'home_page.categories' });
 const Guides = [
@@ -102,6 +103,7 @@ function Feature2({ title, description, href }) {
 export default function Categories() {
   return (
     <>
+      <PossibleBanner />
       <section className={clsx(styles.features, styles.fGuides)}>
         <div className={clsx('container', styles.container)}>
             <br/>
@@ -116,7 +118,7 @@ export default function Categories() {
           </div>
         </div>
       </section>
-
+       
       <section className={styles.features}>
         <div className={clsx('container', styles.container)}>
           <br/>

src/theme/Navbar/index.tsx

@@ -18,6 +18,7 @@ import SearchBar from '../SearchBar';
 import MatDisclaimer from '../../components/MatDisclaimer';
 import SelectComponent from '../../components/SelectComponent/SelectComponent';
 import '../DocSidebar/styles.css';
+import SecondaryBanner from '../../components/PossibleBanner/secondaryBanner';
 
 function translateNavItems(navItems: NavListItem[]): NavListItem[] {
   const location = useLocation();
@@ -162,6 +163,7 @@ export default function Navbar() {
         selectedLanguage={defaultLang}
         secondaryMenu={secondaryMenuDetails}
       ></Header>
+      <SecondaryBanner />
       <MatDisclaimer />
     </>
   );