diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte index 4eb0b98d..5a6f917d 100644 --- a/src/routes/jobs/+page.svelte +++ b/src/routes/jobs/+page.svelte @@ -10,31 +10,35 @@ const ASSET_PATH = "/images/jobs"; const JOBS_VIDEO_EMBED_URL = "https://www.youtube.com/embed/PFjssb7r_uU"; - const DEFAULT_HOW_TO_APPLY = ` - Do a bounty or challenge, - then email work@comma.ai with what you built. - `; - - let activeQuote = 0; - let expandedJobIndexes = new Set([0]); - - const quotes = [ + const COMMA_CON_PLAYLISTS = [ { - text: "We have the best chance at solving self-driving cars because our approach involves actually shipping a product and proving it out as we go.", - author: "Greg", - team: "Infrastructure", + year: "2021", + title: "COMMA_CON 2021", + description: "comma three launch, controls, and the early end-to-end driving talks.", + url: "https://www.youtube.com/playlist?list=PLawfivpGQ-vq9zC2fqjDp-Q3qRUyKQR4y", + embedUrl: "https://www.youtube.com/embed/hbLiehrC2DQ?list=PLawfivpGQ-vq9zC2fqjDp-Q3qRUyKQR4y", }, { - text: "At comma we are given the opportunity to try stuff. It's very easy, the barrier to do experiments and the time from the experiment to shipping the product is really short. That's what I love about comma.", - author: "Yassine", - team: "Research", + year: "2023", + title: "COMMA_CON 2023", + description: "Talks on models, infrastructure, product, and comma 3X.", + url: "https://www.youtube.com/playlist?list=PLawfivpGQ-vq9zC2fqjDp-Q3qRUyKQR4y", + embedUrl: "https://www.youtube.com/embed/zwFLMfqd7eY?list=PLawfivpGQ-vq9zC2fqjDp-Q3qRUyKQR4y", }, { - text: "I like comma specifically because we're building something that has never been built before. It's the new frontier, space exploration.", - author: "Nick", - team: "Hardware", + year: "2025", + title: "COMMA_CON 2025", + description: "End-to-end driving, hardware, robotics, and the comma four announcement.", + url: "https://www.youtube.com/playlist?list=PLzFUMGbVxlQutNi3HJsEn7lwrdb-kymMV", + embedUrl: "https://www.youtube.com/embed/xyzvijWmfKg?list=PLzFUMGbVxlQutNi3HJsEn7lwrdb-kymMV", }, ]; + const DEFAULT_HOW_TO_APPLY = ` + Do a bounty or challenge, + then email work@comma.ai with what you built. + `; + + let expandedJobIndexes = new Set([0]); const processSteps = [ { @@ -311,14 +315,6 @@ copyResetTimeout = setTimeout(() => (copiedJobIndex = null), 2000); } - function showPreviousQuote() { - activeQuote = (activeQuote - 1 + quotes.length) % quotes.length; - } - - function showNextQuote() { - activeQuote = (activeQuote + 1) % quotes.length; - } - function toggleJob(index) { const nextExpandedJobIndexes = new Set(expandedJobIndexes); @@ -416,31 +412,41 @@ -
-
-
-
"{quotes[activeQuote].text}"
-
- {quotes[activeQuote].author}, {quotes[activeQuote].team}
-
- -
- -
- {#each quotes as quote, index} - - {/each} -
- +
+
+
+

COMMA_CON

+

Hear from the team

+

+ Watch talks from the engineers building our hardware, infrastructure, and openpilot. +

+
+ +
+ {#each COMMA_CON_PLAYLISTS as playlist} + + {/each}
@@ -633,8 +639,7 @@ .jobs-intro, .jobs-section, .benefits-section, - .challenge-section, - .quote-section { + .challenge-section { padding: var(--jobs-section-y) 0; } @@ -741,94 +746,112 @@ object-fit: cover; } - .quote-section { - border-bottom: 1px solid #000; - border-top: 1px solid #000; - } - - .quote-container { - display: grid; - grid-template-rows: auto auto; - align-items: center; - gap: 3rem; + .comma-con-section { + background: #f5f5f5; } - .quote { - margin: 0 auto; - max-width: 70rem; - text-align: center; + .comma-con-header { + max-width: 44rem; } - .quote blockquote { - border: 0; + .comma-con-header p:last-child { color: #000; - font-size: clamp(1.75rem, 3vw, 2.5rem); - font-style: normal; - line-height: 1.25; - margin: 0; - padding: 0; + font-size: clamp(1.0625rem, 1.35vw, 1.25rem); + line-height: 1.45; + margin: 1rem 0 0; } - .quote figcaption { - color: #000; - font-size: 1.25rem; - line-height: 1.2; - margin-top: 2rem; + .comma-con-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1.5rem; + margin-top: clamp(2rem, 4vw, 3rem); } - .quote-controls { - display: grid; - grid-template-columns: 48px 1fr 48px; - align-items: center; - gap: 1rem; + .comma-con-card { + background: #fff; + border: 1px solid #000; + display: flex; + flex-direction: column; + min-width: 0; } - .quote-arrow { - align-items: center; + .comma-con-video { + aspect-ratio: 16 / 9; background: #000; + border-bottom: 1px solid #000; + overflow: hidden; + width: 100%; + } + + .comma-con-video iframe { border: 0; - color: #fff; - cursor: pointer; + display: block; + height: 100%; + width: 100%; + } + + .comma-con-card-body { display: flex; - height: 48px; - justify-content: center; - padding: 0; - transition: opacity 0.2s; - width: 48px; + flex: 1; + flex-direction: column; + min-height: 15rem; + padding: 1.25rem; } - .quote-arrow:hover, - .quote-arrow:focus-visible { - opacity: 0.75; + .comma-con-card-body p { + color: rgba(0, 0, 0, 0.6); + font-family: "JetBrains Mono", monospace; + font-size: 0.875rem; + line-height: 1.2; + margin: 0 0 0.75rem; } - .quote-arrow.previous :global(svg) { - transform: rotate(180deg); + .comma-con-card-body h3 { + color: #000; + font-size: 1.35rem; + font-weight: 700; + line-height: 1.15; + margin: 0 0 0.75rem; + overflow-wrap: anywhere; + text-transform: uppercase; } - .quote-arrow :global(svg) { - height: 24px; - width: 24px; + .comma-con-card-body > span { + color: #000; + display: block; + font-size: 1rem; + line-height: 1.4; + margin-bottom: 1.5rem; } - .quote-dots { - display: flex; - justify-content: center; - gap: 4px; + .comma-con-link { + align-items: center; + color: #000; + display: inline-flex; + font-size: 0.875rem; + font-weight: 700; + gap: 0.5rem; + line-height: 1.2; + margin-top: auto; + text-decoration: none; + text-transform: uppercase; + width: fit-content; } - .quote-dots button { - background: #e4e4e4; - border: 0; - cursor: pointer; - height: 4px; - padding: 0; - transition: background-color 0.2s; - width: 24px; + .comma-con-link:hover, + .comma-con-link:focus-visible { + opacity: 0.65; } - .quote-dots button.active { - background: #000; + .comma-con-link:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 4px; + } + + .comma-con-link :global(svg) { + height: 16px; + width: 16px; } .traits-grid { @@ -1238,6 +1261,7 @@ .split-grid, .photo-grid, .challenge-grid, + .comma-con-grid, .openings-grid { grid-template-columns: 1fr; } @@ -1313,22 +1337,22 @@ height: 3rem; } - .quote blockquote { - font-size: 1.35rem; + .comma-con-grid { + gap: 1rem; } - .quote figcaption { + .comma-con-header p:last-child, + .comma-con-card-body > span { font-size: 1rem; - margin-top: 1.5rem; } - .quote-controls { - grid-template-columns: 44px 1fr 44px; + .comma-con-card-body { + min-height: 0; + padding: 1rem; } - .quote-arrow { - height: 44px; - width: 44px; + .comma-con-card-body h3 { + font-size: 1.2rem; } .traits-grid {