Skip to content

Commit 2078821

Browse files
andresdjassoandresdjasso
committed
feat(landing): add interactive Sim stack and refine public pages
1 parent ecf2ae2 commit 2078821

57 files changed

Lines changed: 2726 additions & 219 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/docs/components/icons.tsx‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { SVGProps } from 'react'
22
import { useId } from 'react'
3+
import { CLAUDE_MARK_PATH, GEMINI_MARK_PATH, OPENAI_MARK_PATH, XAI_MARK_POLYGONS } from '@sim/emcn'
34

45
export function EnrichmentIcon(props: SVGProps<SVGSVGElement>) {
56
return (
@@ -1307,22 +1308,10 @@ export function xAIIcon(props: SVGProps<SVGSVGElement>) {
13071308
{...props}
13081309
>
13091310
<g>
1310-
<polygon
1311-
points='557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18'
1312-
fill='currentColor'
1313-
/>
1314-
<polygon
1315-
points='640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05'
1316-
fill='currentColor'
1317-
/>
1318-
<polygon
1319-
points='201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31'
1320-
fill='currentColor'
1321-
/>
1322-
<polygon
1323-
points='201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99'
1324-
fill='currentColor'
1325-
/>
1311+
<polygon points={XAI_MARK_POLYGONS[0]} fill='currentColor' />
1312+
<polygon points={XAI_MARK_POLYGONS[1]} fill='currentColor' />
1313+
<polygon points={XAI_MARK_POLYGONS[2]} fill='currentColor' />
1314+
<polygon points={XAI_MARK_POLYGONS[3]} fill='currentColor' />
13261315
</g>
13271316
</svg>
13281317
)
@@ -1772,10 +1761,7 @@ export function OpenAIIcon(props: SVGProps<SVGSVGElement>) {
17721761
role='img'
17731762
xmlns='http://www.w3.org/2000/svg'
17741763
>
1775-
<path
1776-
d='M22.28 9.82a5.98 5.98 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .743 7.1 5.98 5.98 0 0 0 .511 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.748-7.07zm-9.02 12.61a4.48 4.48 0 0 1-2.88-1.04l.142-.08 4.78-2.76a.795.79 0 0 0 .393-.681v-6.74l2.02 1.17a.71.07 0 0 1 .38.05v5.58a4.5 4.5 0 0 1-4.49 4.49zm-9.66-4.13a4.47 4.47 0 0 1-.535-3.01l.142.09 4.78 2.76a.771.77 0 0 0 .781 0l5.84-3.37v2.33a.804.08 0 0 1-.332.06L9.74 19.95a4.5 4.5 0 0 1-6.14-1.65zM2.34 7.9a4.49 4.49 0 0 1 2.37-1.97V11.6a.766.77 0 0 0 .388.68l5.81 3.35-2.02 1.17a.757.08 0 0 1-.071 0l-4.83-2.79A4.5 4.5 0 0 1 2.34 7.87zm16.6 3.86L13.1 8.36 15.12 7.2a.757.08 0 0 1 .071 0l4.83 2.79a4.49 4.49 0 0 1-.676 8.1v-5.68a.79.79 0 0 0-.407-.667zm2.01-3.02l-.142-.085-4.77-2.78a.776.78 0 0 0-.785 0L9.41 9.23V6.9a.662.07 0 0 1 .028-.061l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16a.804.08 0 0 1-.038-.057V6.07a4.5 4.5 0 0 1 7.38-3.45l-.142.08L8.7 5.46a.795.79 0 0 0-.393.68zm1.1-2.37l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5Z'
1777-
fill='currentColor'
1778-
/>
1764+
<path d={OPENAI_MARK_PATH} fill='currentColor' />
17791765
</svg>
17801766
)
17811767
}
@@ -4032,7 +4018,7 @@ export const ClaudeIcon = (props: SVGProps<SVGSVGElement>) => (
40324018
xmlns='http://www.w3.org/2000/svg'
40334019
>
40344020
<title>Claude</title>
4035-
<path d='m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z' />
4021+
<path d={CLAUDE_MARK_PATH} />
40364022
</svg>
40374023
)
40384024

@@ -4392,11 +4378,7 @@ export function GeminiIcon(props: SVGProps<SVGSVGElement>) {
43924378
<stop offset='100%' stopColor='#F0DCD6' />
43934379
</linearGradient>
43944380
</defs>
4395-
<path
4396-
d='M12 24A14.3 14.3 0 000 12 14.3 14.3 0 0012 0a14.31 14.31 0 0012 12 14.31 14.31 0 00-12 12'
4397-
fill={`url(#${gradientId})`}
4398-
fillRule='nonzero'
4399-
/>
4381+
<path d={GEMINI_MARK_PATH} fill={`url(#${gradientId})`} fillRule='nonzero' />
44004382
</svg>
44014383
)
44024384
}

‎apps/sim/app/(landing)/careers/careers.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Suspense } from 'react'
2+
import { cn } from '@sim/emcn'
23
import type { SearchParams } from 'nuqs/server'
34
import { getAshbyJobs } from '@/lib/ashby/jobs'
45
import {
@@ -9,6 +10,7 @@ import {
910
JobGroups,
1011
} from '@/app/(landing)/careers/components/job-board'
1112
import { careersSearchParamsCache } from '@/app/(landing)/careers/search-params'
13+
import { LANDING_TYPE } from '@/app/(landing)/components/landing-layout'
1214

1315
interface CareersProps {
1416
searchParams: Promise<SearchParams>
@@ -45,7 +47,7 @@ export default async function Careers({ searchParams }: CareersProps) {
4547
<section
4648
id='careers-hero'
4749
aria-labelledby='careers-heading'
48-
className='mx-auto flex w-full max-w-[1728px] flex-col gap-5 px-10 pt-20 pb-10 max-sm:pt-16 max-md:px-7 max-lg:px-8 max-xl:px-9'
50+
className='mx-auto flex w-full max-w-[1728px] flex-col gap-6 px-10 pt-[112px] pb-16 max-sm:pt-12 max-sm:pb-10 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'
4951
>
5052
<p className='sr-only'>
5153
Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
@@ -56,11 +58,11 @@ export default async function Careers({ searchParams }: CareersProps) {
5658

5759
<h1
5860
id='careers-heading'
59-
className='max-w-[24ch] text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-[40px]'
61+
className={cn('max-w-[24ch] text-balance text-[var(--text-primary)]', LANDING_TYPE.h1)}
6062
>
6163
Help build Sim, the AI workspace for teams.
6264
</h1>
63-
<p className='max-w-[60ch] text-pretty text-[var(--text-body)] text-lg leading-[1.5] max-sm:text-base'>
65+
<p className='max-w-[60ch] text-pretty text-[20px] text-[var(--text-body)] leading-[1.5] max-sm:text-[17px]'>
6466
Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. We're
6567
a small, high-agency team shipping fast to thousands of builders. If you want to own real
6668
work and shape the workspace teams live in, we'd love to meet you.

‎apps/sim/app/(landing)/careers/components/job-board/job-groups.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,11 @@ function JobRow({ posting }: JobRowProps) {
8484
rel='noopener noreferrer'
8585
className={cn(
8686
'-mx-3 group flex items-center justify-between gap-6 rounded-lg border-[var(--border)]',
87-
'border-t px-3 py-5 transition-colors hover:bg-[var(--surface-hover)]'
87+
'border-t px-3 py-6 transition-colors hover:bg-[var(--surface-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-2 motion-reduce:transition-none'
8888
)}
8989
>
9090
<div className='flex min-w-0 flex-col gap-1.5'>
91-
<h4 className='truncate font-medium text-[var(--text-primary)] text-base'>
91+
<h4 className='text-pretty font-normal text-[var(--text-primary)] text-lg max-sm:text-base'>
9292
{posting.title}
9393
</h4>
9494
<div className='flex flex-wrap items-center gap-x-2 gap-y-1 text-[var(--text-muted)] text-sm'>
@@ -107,7 +107,7 @@ function JobRow({ posting }: JobRowProps) {
107107

108108
<span className='flex shrink-0 items-center gap-1.5 font-medium text-[var(--text-body)] text-sm'>
109109
Apply
110-
<ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5' />
110+
<ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none' />
111111
</span>
112112
</a>
113113
)

‎apps/sim/app/(landing)/comparisons/[provider]/page.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import {
2121
import { BackLink } from '@/app/(landing)/components'
2222
import { JsonLd } from '@/app/(landing)/components/json-ld'
2323
import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
24-
import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
24+
import {
25+
LANDING_CONTENT_WIDTH,
26+
LANDING_GUTTER,
27+
PUBLIC_PAGE_TYPE,
28+
} from '@/app/(landing)/components/landing-layout'
2529

2630
const baseUrl = SITE_URL
2731

@@ -164,15 +168,21 @@ export default async function ComparisonProviderPage({
164168
<JsonLd data={faqJsonLd} />
165169

166170
<main id='main-content' className='bg-[var(--bg)]'>
167-
<div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
171+
<div
172+
className={cn(
173+
LANDING_CONTENT_WIDTH,
174+
LANDING_GUTTER,
175+
'pt-[112px] max-sm:pt-12 max-xl:pt-20'
176+
)}
177+
>
168178
<div className='mb-6'>
169179
<BackLink href='/comparisons' label='Back to comparisons' />
170180
</div>
171181

172182
<div className='flex flex-col gap-4'>
173183
<h1
174184
id='comparison-heading'
175-
className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
185+
className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
176186
>
177187
Sim vs {competitor.name}
178188
</h1>

‎apps/sim/app/(landing)/comparisons/page.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ import { ALL_COMPETITORS, ensurePeriod, lowercaseFirst } from '@/app/(landing)/c
99
import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
1010
import { JsonLd } from '@/app/(landing)/components/json-ld'
1111
import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
12-
import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
12+
import {
13+
LANDING_CONTENT_WIDTH,
14+
LANDING_GUTTER,
15+
PUBLIC_PAGE_TYPE,
16+
} from '@/app/(landing)/components/landing-layout'
1317

1418
const baseUrl = SITE_URL
1519

@@ -103,14 +107,20 @@ export default function ComparisonHubPage() {
103107
<JsonLd data={faqJsonLd} />
104108

105109
<main id='main-content' className='bg-[var(--bg)]'>
106-
<div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
110+
<div
111+
className={cn(
112+
LANDING_CONTENT_WIDTH,
113+
LANDING_GUTTER,
114+
'pt-[112px] max-sm:pt-12 max-xl:pt-20'
115+
)}
116+
>
107117
{/* Invisible spacer matching the detail page's BackLink block height/margin, so the divider below lands at the same Y on both pages. */}
108118
<div className='mb-6 h-6' aria-hidden='true' />
109119

110120
<div className='flex flex-col gap-4'>
111121
<h1
112122
id='comparison-hub-heading'
113-
className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
123+
className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
114124
>
115125
Sim comparisons
116126
</h1>

‎apps/sim/app/(landing)/components/content-author-page/content-author-loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const AUTHOR_POST_SKELETON_COUNT = 4
66
export function ContentAuthorLoading() {
77
return (
88
<section className='bg-[var(--bg)]'>
9-
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
9+
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
1010
<Skeleton className='mb-6 h-[16px] w-[100px] rounded-md bg-[var(--surface-hover)]' />
1111
<div className='flex items-center gap-4'>
1212
<Skeleton className='size-[64px] rounded-full bg-[var(--surface-hover)]' />

‎apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { cn } from '@sim/emcn'
12
import Image from 'next/image'
23
import Link from 'next/link'
34
import type { ContentMeta } from '@/lib/content/schema'
45
import { BackLink } from '@/app/(landing)/components/back-link'
56
import { JsonLd } from '@/app/(landing)/components/json-ld'
7+
import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
68

79
interface ContentAuthorPageProps {
810
/** Route base path, e.g. `/blog` or `/library`. */
@@ -35,7 +37,7 @@ export function ContentAuthorPage({
3537
<section className='bg-[var(--bg)]'>
3638
{graphJsonLd && <JsonLd data={graphJsonLd} />}
3739

38-
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
40+
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
3941
<div className='mb-6'>
4042
<BackLink href={basePath} label={`Back to ${sectionName}`} />
4143
</div>
@@ -51,7 +53,7 @@ export function ContentAuthorPage({
5153
unoptimized
5254
/>
5355
) : null}
54-
<h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
56+
<h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
5557
{authorName}
5658
</h1>
5759
</div>

‎apps/sim/app/(landing)/components/content-index-page/content-index-loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function ContentIndexLoading() {
99
return (
1010
<section className='bg-[var(--bg)]'>
1111
<div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
12-
<div className='pt-[112px] max-sm:pt-20'>
12+
<div className='pt-[112px] max-sm:pt-12 max-xl:pt-20'>
1313
<Skeleton className='mb-5 h-[20px] w-[60px] rounded-md bg-[var(--surface-hover)]' />
1414
<div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
1515
<Skeleton className='h-[40px] w-[240px] rounded-[4px] bg-[var(--surface-hover)]' />

‎apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { ChipLink } from '@sim/emcn'
1+
import { ChipLink, cn } from '@sim/emcn'
22
import Image from 'next/image'
33
import Link from 'next/link'
44
import { paginateContentPosts } from '@/lib/content/index-list'
55
import type { ContentMeta } from '@/lib/content/schema'
66
import { JsonLd } from '@/app/(landing)/components/json-ld'
7+
import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
78

89
interface ContentIndexPageProps {
910
/** Route base path, e.g. `/blog` or `/library`. */
@@ -43,9 +44,9 @@ export function ContentIndexPage({
4344
<section className='bg-[var(--bg)]'>
4445
<JsonLd data={collectionJsonLd} />
4546

46-
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
47+
<div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
4748
<div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
48-
<h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
49+
<h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
4950
{heading}
5051
</h1>
5152
<p className='max-w-[540px] text-[var(--text-secondary)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>

‎apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/component
55
export function ContentPostLoading() {
66
return (
77
<article className='w-full bg-[var(--bg)]'>
8-
<div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
8+
<div
9+
className={cn(
10+
LANDING_CONTENT_WIDTH,
11+
LANDING_GUTTER,
12+
'pt-[112px] max-sm:pt-12 max-xl:pt-20'
13+
)}
14+
>
915
<div className='mb-6'>
1016
<Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
1117
</div>

0 commit comments

Comments
 (0)