diff --git a/i18n/en/code.json b/i18n/en/code.json index d949ec747d0..903e319c9eb 100644 --- a/i18n/en/code.json +++ b/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" diff --git a/src/components/DevelopersHomepage/index.js b/src/components/DevelopersHomepage/index.js index c95591bec2e..9629be01006 100644 --- a/src/components/DevelopersHomepage/index.js +++ b/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 ( <> + diff --git a/src/components/PossibleBanner/index.js b/src/components/PossibleBanner/index.js new file mode 100644 index 00000000000..7185bae5470 --- /dev/null +++ b/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 ( +
+
+ + + {translate({ message: 'home_page.featured_event' })} + + + + + {translate({ message: 'home_page.possible_banner_title' })} + + +
+ +
+ {translate({ message: 'home_page.register_now' })} +
+
+
+ ); +} + +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 ( +
+ + } + /> + +
+ ); +} \ No newline at end of file diff --git a/src/components/PossibleBanner/secondaryBanner.js b/src/components/PossibleBanner/secondaryBanner.js new file mode 100644 index 00000000000..0e7621937d3 --- /dev/null +++ b/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 ( +
+ + Learn how to build the future of AI at Possible 2025. + + + Register now + +
+ ); +}; + +export default SecondaryBanner; diff --git a/src/components/PossibleBanner/styles.module.css b/src/components/PossibleBanner/styles.module.css new file mode 100644 index 00000000000..b6091ba0903 --- /dev/null +++ b/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; + } +} diff --git a/src/components/QuickstartsPages/index.js b/src/components/QuickstartsPages/index.js index 821135613b6..d3f5266744d 100644 --- a/src/components/QuickstartsPages/index.js +++ b/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 ( <> +

@@ -116,7 +118,7 @@ export default function Categories() {
- +

diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx index efc73b417e4..46bda60a31a 100644 --- a/src/theme/Navbar/index.tsx +++ b/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} > + ); diff --git a/static/img/Possible-2025-OG.webp b/static/img/Possible-2025-OG.webp new file mode 100644 index 00000000000..36faf5cb380 Binary files /dev/null and b/static/img/Possible-2025-OG.webp differ