diff --git a/src/pages/ambassador.module.css b/src/pages/ambassador.module.css index 19d0524a78d91..806927b814a4e 100644 --- a/src/pages/ambassador.module.css +++ b/src/pages/ambassador.module.css @@ -1,40 +1,336 @@ -.gridContainer { +/* ── Brand tokens (light by default, dark via site theme toggle) ───────────── */ +.page { + --amb-bg: #ffffff; + --amb-text: #060606; + --amb-card-border: rgba(0, 0, 0, 0.8); + --amb-avatar-bg: #ffffff; + --amb-image-blend: multiply; + --amb-muted: #888888; + --amb-navy: #273882; + --amb-green: #93D500; + --amb-pink: #EC008C; + --amb-cyan: #00ADDC; + --amb-grad: linear-gradient(135deg, #EC008C, #00ADDC, #93D500); + background-color: var(--amb-bg); + min-height: 100vh; +} + +:global(html[data-theme='dark']) .page { + --amb-bg: #060606; + --amb-text: #ffffff; + --amb-card-border: rgba(255, 255, 255, 0.8); + --amb-avatar-bg: #060606; + --amb-image-blend: screen; +} + +/* ── Hero ──────────────────────────────────────────────────────────────────── */ +.hero { + display: flex; + align-items: center; + gap: 40px; + padding: 0 60px; + border-bottom: 1px solid var(--amb-cyan); + max-width: 1100px; + margin: 0 auto; +} + +.heroContent { + flex: 1; +} + +.heroPill { + display: inline-block; + padding: 5px 16px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--amb-text); + border-radius: 4px; + background: var(--amb-grad); + padding: 2px; + margin-bottom: 20px; +} + +.heroPill span { + display: block; + background: var(--amb-bg); + border-radius: 3px; + padding: 5px 16px; +} + +.heroHeading { + font-size: 32px; + font-weight: 900; + color: var(--amb-text) !important; + line-height: 1.2; + margin-bottom: 16px; +} + +.heroHeadingAccent { + color: var(--amb-text) !important; +} + +.heroBody { + font-size: 16px; + color: var(--amb-text); + line-height: 1.7; + margin-bottom: 28px; + max-width: 500px; +} + +.heroCta { + display: inline-block; + padding: 12px 28px; + background: var(--amb-pink); + color: #ffffff !important; + border: 2px solid var(--amb-pink); + border-radius: 4px; + font-weight: 700; + font-size: 15px; + text-decoration: none !important; + transition: background 0.2s, color 0.2s; +} + +.heroCta:hover { + background: transparent; + color: var(--amb-pink) !important; + text-decoration: none !important; +} + +.heroImage { + width: 280px; + flex-shrink: 0; + object-fit: contain; + mix-blend-mode: var(--amb-image-blend); + padding: 30px 0; +} + +:global(html[data-theme='dark']) .heroImage { + width: 300px; + padding: 0; +} + +@media only screen and (max-width: 900px) { + .hero { + flex-direction: column; + padding: 40px 24px; + } + .heroImage { + width: 180px; + } +} + +/* ── Sections ──────────────────────────────────────────────────────────────── */ +.section { + padding: 32px 60px; +} + +.sectionInner { + max-width: 1100px; + margin: 0 auto; + border-bottom: 1px solid var(--amb-cyan); + padding-bottom: 32px; +} + +.sectionHeading { + font-size: 22px; + font-weight: 700; + color: var(--amb-green); + margin-bottom: 18px; +} + +.sectionBody { + font-size: 16px; + color: var(--amb-text); + line-height: 1.8; + max-width: 820px; + margin-bottom: 24px; +} + +.subHeading { + font-size: 15px; + font-weight: 700; + color: var(--amb-text); + margin-bottom: 14px; + margin-top: 8px; +} + +/* ── Why Join list ─────────────────────────────────────────────────────────── */ +.whyJoinList { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; +} + +.whyJoinItem { + font-size: 15px; + color: var(--amb-text); + line-height: 1.6; + padding-left: 20px; + position: relative; +} + +.whyJoinItem::before { + content: '▸'; + position: absolute; + left: 0; + color: var(--amb-green); +} + +/* ── Gradient border wrapper ───────────────────────────────────────────────── */ +.gradientBorderWrap { + background: var(--amb-grad); + border-radius: 10px; + padding: 1.5px; +} + +/* ── Benefits grid ─────────────────────────────────────────────────────────── */ +.benefitsGrid { display: grid; - place-content: center; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - grid-gap: 40px; - margin-left: 40px; - margin-right: 40px; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 16px; + margin-top: 8px; +} + +.benefitCard { + background: var(--amb-bg); + border-radius: 9px; + padding: 20px; + height: 100%; +} + +.benefitTitle { + font-size: 14px; + font-weight: 700; + color: var(--amb-cyan); + margin-bottom: 10px; +} + +.benefitDescription { + font-size: 14px; + color: var(--amb-text); + line-height: 1.6; } -.center { - margin: 50px auto; - max-width: 1000px; +/* ── Steps ─────────────────────────────────────────────────────────────────── */ +.stepsContainer { + display: flex; + flex-direction: column; + gap: 28px; + margin-bottom: 36px; +} + +.step { + display: flex; + gap: 20px; + align-items: flex-start; +} + +.stepCircle { + font-size: 36px; + font-weight: 900; + line-height: 1; + min-width: 52px; + flex-shrink: 0; + padding-top: 2px; +} + +.stepContent { + flex: 1; + padding-top: 4px; +} + +.stepTitle { + font-size: 15px; + font-weight: 700; + color: var(--amb-text); + margin-bottom: 6px; +} + +.stepDescription { + font-size: 14px; + color: var(--amb-text); + line-height: 1.6; +} + +.ctaContainer { + display: flex; + flex-direction: column; + gap: 24px; + padding-left: 0; } +.policyLinks { + display: flex; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} + +.policyLabel { + font-size: 13px; + color: var(--amb-muted); +} + +.policyLink { + font-size: 13px; + color: var(--amb-cyan) !important; + text-decoration: underline !important; + text-underline-offset: 3px; +} + +.policyLink:hover { + color: var(--amb-text) !important; +} + +.applyBtn { + display: inline-block; + width: fit-content; + padding: 12px 28px; + background: var(--amb-pink); + color: #ffffff !important; + border: 2px solid var(--amb-pink); + border-radius: 4px; + font-weight: 700; + font-size: 15px; + text-decoration: none !important; + transition: background 0.2s, color 0.2s; +} + +.applyBtn:hover { + background: transparent; + color: var(--amb-pink) !important; + text-decoration: none !important; +} + +/* ── Ambassador card sections (existing) ───────────────────────────────────── */ .headerText { text-align: center; display: flex; - margin: 100px auto 0px auto; + margin: 12px auto 0px auto; width: calc(100% - 100px); justify-content: center; } .headerTextOne { - color: var(--ifm-color-primary); + color: var(--amb-text); font-size: 30px; font-weight: bold; line-height: 100%; } .spanLeft { - width: 35%; + flex: 1; margin: 14px; position: relative; top: -45px; border-bottom-width: 2px; border-bottom-style: solid; - border-bottom-color: var(--ifm-color-primary); + border-bottom-color: var(--amb-cyan); } .imageContainer { @@ -43,90 +339,118 @@ justify-content: center; } -.ambassadorImage { +.expertAmbassadorImage { margin-left: 5px; - padding: 20px; height: 120px; width: 120px; } -.expertAmbassadorImage { +.ambassadorImage { margin-left: 5px; height: 120px; width: 120px; } -.ambassadorPurposeContainer { +.sectionNoBorder .sectionInner { + border-bottom: none; + padding-bottom: 0; +} + +.sectionTight { + padding-top: 4px; +} + +/* ── Placeholder ambassador cards ──────────────────────────────────────────── */ +.placeholderGrid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + margin: 0 auto; + max-width: 1100px; + padding: 48px 0 40px; +} + +.placeholderCard { display: flex; - justify-content: center; - width: calc(75% + 75px); + flex-direction: column; align-items: center; - margin: 0px auto 0px auto; + text-align: center; + padding: 24px 16px; + background: var(--amb-bg); + border-radius: 10px; + border: 1px solid var(--amb-card-border); } -.ambassadorPurposeText { - font-size: 21px; - padding: 50px 0px 50px 50px; - font-weight: 500; - color: var(--dev-text-color-normal); +.placeholderGradBorder { + margin-bottom: 14px; + border-radius: 50%; + border: 2px solid var(--amb-text); + padding: 2px; + background: linear-gradient(135deg, #EC008C 25%, #00ADDC 60%, #93D500); } -.ambassadorPurposeImage { - width: 40%; - box-shadow: var(--dev-card-selected); - border-radius: 0.25em; - margin: 50px 50px 50px 0px; +.placeholderAvatarInner { + border-radius: 50%; + padding: 2px; + background: #060606; } -@media only screen and (max-width: 1460px) { - .ambassadorPurposeContainer { - flex-direction: column; - } - .ambassadorPurposeImage { - width: 80%; - margin: 50px 50px 50px 50px; - } - .ambassadorPurposeText { - padding: 50px 50px 50px 50px; - } +.placeholderAvatar { + width: 76px; + height: 76px; + border-radius: 50%; + object-fit: cover; + display: block; + background: #060606; } -.button:hover { - cursor: pointer; - top: -2px; - box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); - background-color: var(--ifm-color-secondary-dark); - color: #ffffff; - text-decoration: none; +.placeholderName { + font-size: 15px; + font-weight: 700; + color: var(--amb-text); + margin-bottom: 4px; } -.button { - text-decoration: none; - text-align: center; - margin: 30px auto; - font-size: 20px; - font-weight: bold; - line-height: 100%; +.placeholderMeta { + font-size: 12px; + color: var(--amb-green); + margin-bottom: 4px; +} - /* Layout Properties */ - width: 314px; - height: 61px; - line-height: 61px; - /* UI Properties */ - background: transparent 0% 0% no-repeat padding-box; - opacity: 1; +.placeholderSolutions { + font-size: 12px; + color: var(--amb-muted); +} - box-shadow: 0px 20px 60px #00000015; - border: 1px solid transparent; - border-radius: .25rem; - transition: all 0.3s; - background-color: var(--ifm-color-secondary); +@media only screen and (max-width: 900px) { + .placeholderGrid { + grid-template-columns: repeat(2, 1fr); + } } -.link { - color: #ffffff;; +.seeMoreContainer { + display: flex; + justify-content: center; + padding: 24px 0 8px; +} + +.seeMoreBtn { + font-size: 14px; + font-weight: 600; + color: #ffffff !important; + background: var(--amb-cyan); + border: 2px solid var(--amb-cyan); + border-radius: 4px; + padding: 10px 24px; + text-decoration: none !important; + transition: background 0.2s, color 0.2s; } -.link:hover { - color: #ffffff; - text-decoration: none; + +.seeMoreBtn:hover { + background: transparent; + color: var(--amb-cyan) !important; +} + +.ambassadorCardContainer { + margin-bottom: 20px; } diff --git a/src/pages/ambassadors.tsx b/src/pages/ambassadors.tsx index 74fbd756e66f3..a61fe1c9bcb65 100644 --- a/src/pages/ambassadors.tsx +++ b/src/pages/ambassadors.tsx @@ -1,71 +1,284 @@ import React from 'react'; import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import {useColorMode} from '@docusaurus/theme-common'; import styles from './ambassador.module.css'; -import AmbassadorCards from '../components/ambassador/AmbassadorCards'; -const Ambassador: React.FC = () => { - const { siteConfig } = useDocusaurusContext(); +const benefits = [ + { + title: 'Recognition & badge', + description: + 'Receive an exclusive Ambassador badge displayed on your community profile, signaling your expertise to peers across the SailPoint ecosystem.', + }, + { + title: 'Early access', + description: + 'Get early previews of new SailPoint developer features, APIs, and tooling before they reach general availability.', + }, + { + title: 'Direct product access', + description: + 'Gain a direct line to SailPoint product and the Developer Relations teams — your feedback shapes the product roadmap.', + }, + { + title: 'Free sandbox tenant', + description: + 'Get access to your own private Identity Security Cloud test tenant, including access to the latest beta features released by SailPoint.', + }, + { + title: 'Exclusive events', + description: + 'Receive invitations to Ambassador-only roundtables, community calls, and developer events throughout the year.', + }, + { + title: 'And more!', + description: + 'Exclusive swag, office hours with the Developer Relations team, and other perks as the program grows.', + }, +]; + +const howToJoinSteps = [ + { + step: '1', + color: '#00ADDC', + title: 'Be an active member', + description: + 'Consistently contribute to the community — answer questions, share knowledge, and engage with fellow members.', + }, + { + step: '2', + color: '#00ADDC', + title: 'Demonstrate expertise', + description: + 'Show your depth of SailPoint knowledge through accepted solutions, community guides, or technical discussions.', + }, + { + step: '3', + color: '#00ADDC', + title: 'Apply on the forum', + description: + 'Submit your application via the community forum. The SailPoint team reviews applications on a rolling basis.', + }, +]; + +const placeholderExpertAmbassadors = [ + { name: 'Alex Rivera', since: '2021', solutions: 312 }, + { name: 'Jordan Kim', since: '2021', solutions: 278 }, + { name: 'Taylor Brooks', since: '2022', solutions: 241 }, + { name: 'Morgan Chen', since: '2022', solutions: 198 }, +]; + +const placeholderAmbassadors = [ + { name: 'Casey Patel', since: '2023', solutions: 154 }, + { name: 'Riley Nguyen', since: '2023', solutions: 133 }, + { name: 'Jamie Santos', since: '2023', solutions: 119 }, + { name: 'Drew Okafor', since: '2024', solutions: 97 }, +]; + +const AmbassadorContent: React.FC = () => { + const {colorMode} = useColorMode(); + const codeyBust = useBaseUrl( + colorMode === 'dark' + ? '/ambassador/codey-bust-dark.png' + : '/ambassador/codey-bust.png', + ); return ( - -
- {/* */} -
- Ambassador program Banner -
- Our Ambassador program offers not just exclusive benefits but also - an enriching learning experience on SailPoint; it's a journey to - expertise. As an Ambassador, your contributions foster community - growth, enabling knowledge-sharing among experts like you. +
+ + {/* Hero */} +
+
+
SailPoint · Ambassador Program
+

+ Your experience and expertise
+ has the power to empower others. +

+

+ Help us chart the future of identity security. +

-
Become an Ambassador
+ Become an Ambassador
-
-
-
Expert Ambassadors
-
-
-
Expert Ambassador Icon -
-
- + + {/* What Is the Program + Why Join */} +
+
+

What is the Ambassador Program?

+

+ The SailPoint Ambassador Program recognizes exceptional community members who go above + and beyond to share knowledge, answer questions, and help others build on the SailPoint platform. + Ambassadors are trusted voices in the community — developers, architects, and identity professionals + who lead by example. There are two tiers: Ambassadors, who are active contributors + making a consistent positive impact, and Expert Ambassadors, who represent the + highest level of community leadership and SailPoint expertise. +

+

A SailPoint Ambassador is someone who:

+
    + {[ + 'Actively contributes by answering questions and sharing knowledge with the community', + 'Passionate about identity security and the SailPoint platform', + 'Leads by example and helps newcomers find their footing', + 'Consistently shows up — in discussions, in solutions, and in the community', + 'Eager to grow and share their expertise with others', + ].map((reason) => ( +
  • {reason}
    • + ))} +
+
-
-
Ambassadors
+ + {/* Benefits */} +
+
+

Program benefits

+
+ {benefits.map((benefit) => ( +
+
+
{benefit.title}
+
{benefit.description}
+
+
+ ))} +
+
-
-
- Ambassador Icon -
+ + {/* How to Join */} +
+ +
+

Your path to becoming an Ambassador

+
+ {howToJoinSteps.map((s) => ( +
+
{s.step}
+
+
{s.title}
+
{s.description}
+
+
+ ))} +
+
+
+ Before you apply, please review: + Ambassador Code of Conduct + Forum guidelines + Getting started guide +
+ + Apply now + +
+
-
- + {/* Expert Ambassador Cards */} +
+
+
+
Expert Ambassadors
+
+
+
+ Expert Ambassador Icon +
+
+
+
+ {placeholderExpertAmbassadors.map((a) => ( +
+
+
+ {a.name} +
+
+
{a.name}
+
Expert Ambassador since {a.since}
+
{a.solutions} solutions
+
+ ))} +
+
+ +
+
+ + {/* Ambassador Cards */} +
+
+
+
Ambassadors
+
+
+
+ Ambassador Icon +
+
+
+
+ {placeholderAmbassadors.map((a) => ( +
+
+
+ {a.name} +
+
+
{a.name}
+
Ambassador since {a.since}
+
{a.solutions} solutions
+
+ ))} +
+
+ +
+
- ); }; +const Ambassador: React.FC = () => ( + + + +); + export default Ambassador; diff --git a/static/ambassador/codey-bust-dark.png b/static/ambassador/codey-bust-dark.png new file mode 100644 index 0000000000000..76ba15b498eea Binary files /dev/null and b/static/ambassador/codey-bust-dark.png differ diff --git a/static/ambassador/codey-bust.png b/static/ambassador/codey-bust.png new file mode 100644 index 0000000000000..1d4d3a151a9f5 Binary files /dev/null and b/static/ambassador/codey-bust.png differ diff --git a/static/icons/AmbBadge.png b/static/icons/AmbBadge.png new file mode 100644 index 0000000000000..59a84f75ba31f Binary files /dev/null and b/static/icons/AmbBadge.png differ diff --git a/static/icons/ExpBadge.png b/static/icons/ExpBadge.png new file mode 100644 index 0000000000000..976e07c3d3be6 Binary files /dev/null and b/static/icons/ExpBadge.png differ