Skip to content

Commit 8df13e1

Browse files
emir-karabegemir-karabeg
committed
improvement(landing): features
1 parent c01e533 commit 8df13e1

File tree

4 files changed

+121
-52
lines changed

4 files changed

+121
-52
lines changed

‎apps/sim/app/(home)/components/collaboration/collaboration.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ export default function Collaboration() {
268268
collaboration
269269
</h2>
270270

271-
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[14px] leading-[125%] tracking-[0.02em] sm:text-[16px]'>
271+
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
272272
Grab your team. Build agents together <br /> in real-time inside your workspace.
273273
</p>
274274

‎apps/sim/app/(home)/components/features/features.tsx‎

Lines changed: 112 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import { useState } from 'react'
44
import Image from 'next/image'
5-
import { Badge } from '@/components/emcn'
5+
import Link from 'next/link'
6+
import { Badge, ChevronDown } from '@/components/emcn'
67

78
function hexToRgba(hex: string, alpha: number): string {
89
const r = Number.parseInt(hex.slice(1, 3), 16)
@@ -13,8 +14,12 @@ function hexToRgba(hex: string, alpha: number): string {
1314

1415
const FEATURE_TABS = [
1516
{
16-
label: 'Integrations',
17+
label: 'Mothership',
1718
color: '#FA4EDF',
19+
title: 'Your AI command center',
20+
description:
21+
'Direct your entire AI workforce from one place. Build agents, spin up workflows, query tables, and manage every resource across your workspace — in natural language.',
22+
cta: 'Explore mothership',
1823
segments: [
1924
[0.3, 8],
2025
[0.25, 10],
@@ -29,8 +34,12 @@ const FEATURE_TABS = [
2934
],
3035
},
3136
{
32-
label: 'Copilot',
37+
label: 'Tables',
3338
color: '#2ABBF8',
39+
title: 'A database, built in',
40+
description:
41+
'Filter, sort, and edit data inline, then wire it directly into your workflows. Agents query, insert, and update rows on every run — no external database needed.',
42+
cta: 'Explore tables',
3443
segments: [
3544
[0.25, 12],
3645
[0.4, 10],
@@ -44,43 +53,53 @@ const FEATURE_TABS = [
4453
],
4554
},
4655
{
47-
label: 'Models',
48-
color: '#00F701',
49-
badgeColor: '#22C55E',
56+
label: 'Files',
57+
color: '#FFCC02',
58+
badgeColor: '#EAB308',
59+
title: 'Upload, create, and share',
60+
description:
61+
'Create or upload documents, spreadsheets, and media that agents can read, write, and reference across workflows. One shared store your entire team and every agent can pull from.',
62+
cta: 'Explore files',
5063
segments: [
51-
[0.2, 6],
52-
[0.35, 10],
53-
[0.3, 8],
64+
[0.25, 10],
65+
[0.4, 8],
66+
[0.35, 12],
5467
[0.5, 10],
55-
[0.6, 8],
56-
[0.75, 12],
57-
[0.85, 10],
58-
[1, 8],
68+
[0.65, 8],
69+
[0.75, 10],
5970
[0.9, 12],
6071
[1, 10],
61-
[0.95, 6],
72+
[0.85, 10],
73+
[1, 10],
6274
],
6375
},
6476
{
65-
label: 'Deploy',
66-
color: '#FFCC02',
67-
badgeColor: '#EAB308',
77+
label: 'Knowledge Base',
78+
color: '#8B5CF6',
79+
title: 'Your context engine',
80+
description:
81+
'Sync institutional knowledge from 30+ live connectors — Notion, Drive, Slack, Confluence, and more — so every agent draws from the same truth across your entire organization.',
82+
cta: 'Explore knowledge base',
6883
segments: [
69-
[0.3, 12],
84+
[0.3, 10],
7085
[0.25, 8],
7186
[0.4, 10],
72-
[0.55, 10],
73-
[0.7, 8],
74-
[0.6, 10],
75-
[0.85, 12],
87+
[0.5, 10],
88+
[0.65, 10],
89+
[0.8, 10],
90+
[0.9, 12],
7691
[1, 10],
77-
[0.9, 10],
92+
[0.95, 10],
7893
[1, 10],
7994
],
8095
},
8196
{
8297
label: 'Logs',
8398
color: '#FF6B35',
99+
title: 'Full visibility, every run',
100+
description:
101+
'Trace every execution block by block — inputs, outputs, cost, and duration. Filter by status or workflow, replay snapshots, and export reports to keep your team accountable.',
102+
cta: 'Explore logs',
84103
segments: [
85104
[0.25, 10],
86105
[0.35, 8],
@@ -94,22 +113,6 @@ const FEATURE_TABS = [
94113
[1, 10],
95114
],
96115
},
97-
{
98-
label: 'Knowledge Base',
99-
color: '#8B5CF6',
100-
segments: [
101-
[0.3, 10],
102-
[0.25, 8],
103-
[0.4, 10],
104-
[0.5, 10],
105-
[0.65, 10],
106-
[0.8, 10],
107-
[0.9, 12],
108-
[1, 10],
109-
[0.95, 10],
110-
[1, 10],
111-
],
112-
},
113116
]
114117

115118
function DotGrid({
@@ -126,7 +129,7 @@ function DotGrid({
126129
return (
127130
<div
128131
aria-hidden='true'
129-
className={`shrink-0 bg-[#FDFDFD] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
132+
className={`shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
130133
style={{
131134
width: width ? `${width}px` : undefined,
132135
display: 'grid',
@@ -177,13 +180,17 @@ export default function Features() {
177180
),
178181
}}
179182
>
180-
Features
183+
Workspace
181184
</Badge>
182185
<h2
183186
id='features-heading'
184-
className='font-[430] font-season text-[#1C1C1C] text-[40px] leading-[100%] tracking-[-0.02em]'
187+
className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[40px] leading-[110%] tracking-[-0.02em]'
185188
>
186-
Power your AI workforce
189+
Everything you need to build, deploy, and manage AI agents.{' '}
190+
<span className='text-[#1C1C1C]/40'>
191+
Design powerful workflows, connect your data, and monitor every run — all in one
192+
platform.
193+
</span>
187194
</h2>
188195
</div>
189196

@@ -223,6 +230,68 @@ export default function Features() {
223230

224231
<DotGrid cols={10} rows={8} width={80} borderLeft />
225232
</div>
233+
234+
<div className='mt-[60px] grid grid-cols-[1fr_2.8fr] gap-[60px] px-[80px]'>
235+
<div className='flex h-[560px] flex-col items-start justify-between pt-[20px]'>
236+
<div className='flex flex-col items-start gap-[16px]'>
237+
<h3 className='font-[430] font-season text-[#1C1C1C] text-[28px] leading-[120%] tracking-[-0.02em]'>
238+
{FEATURE_TABS[activeTab].title}
239+
</h3>
240+
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
241+
{FEATURE_TABS[activeTab].description}
242+
</p>
243+
</div>
244+
<Link
245+
href='/signup'
246+
className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
247+
>
248+
{FEATURE_TABS[activeTab].cta}
249+
<span className='relative h-[10px] w-[10px] shrink-0'>
250+
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
251+
<svg
252+
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
253+
viewBox='0 0 10 10'
254+
fill='none'
255+
>
256+
<path
257+
d='M1 5H8M5.5 2L8.5 5L5.5 8'
258+
stroke='currentColor'
259+
strokeWidth='1.33'
260+
strokeLinecap='square'
261+
strokeLinejoin='miter'
262+
fill='none'
263+
/>
264+
</svg>
265+
</span>
266+
</Link>
267+
</div>
268+
269+
<div
270+
className='flex h-[560px] items-center justify-center rounded-[8px] border-2 border-dashed'
271+
style={{
272+
borderColor: hexToRgba(
273+
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
274+
0.3
275+
),
276+
backgroundColor: hexToRgba(
277+
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
278+
0.04
279+
),
280+
}}
281+
>
282+
<span
283+
className='font-[430] font-season text-[14px] uppercase tracking-[0.08em]'
284+
style={{
285+
color: hexToRgba(
286+
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
287+
0.4
288+
),
289+
}}
290+
>
291+
{FEATURE_TABS[activeTab].label} preview
292+
</span>
293+
</div>
294+
</div>
226295
</div>
227296
</section>
228297
)

‎apps/sim/app/(home)/components/hero/hero.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Hero() {
3434
<section
3535
id='hero'
3636
aria-labelledby='hero-heading'
37-
className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[71px]'
37+
className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[100px] pb-[12px]'
3838
>
3939
<p className='sr-only'>
4040
Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -53,20 +53,20 @@ export default function Hero() {
5353

5454
<div
5555
aria-hidden='true'
56-
className='pointer-events-none absolute top-[-2.8vw] right-[0vw] z-0 aspect-[471/470] w-[32.7vw]'
56+
className='pointer-events-none absolute top-[-2.8vw] right-[-4vw] z-0 aspect-[471/470] w-[32.7vw]'
5757
>
5858
<Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
5959
</div>
6060

6161
<div className='relative z-10 flex flex-col items-center gap-[12px]'>
6262
<h1
6363
id='hero-heading'
64-
className='font-[430] font-season text-[64px] text-white leading-[100%] tracking-[-0.02em]'
64+
className='font-[430] font-season text-[72px] text-white leading-[100%] tracking-[-0.02em]'
6565
>
66-
Build Agents
66+
Build AI Agents
6767
</h1>
68-
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[16px] leading-[125%] tracking-[0.02em]'>
69-
Build and deploy agentic workflows
68+
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
69+
Sim is the AI Workspace for Agent Builders.
7070
</p>
7171

7272
<div className='mt-[12px] flex items-center gap-[8px]'>
@@ -101,7 +101,7 @@ export default function Hero() {
101101
<BlocksTopLeftAnimated animState={blockStates.topLeft} />
102102
</div>
103103

104-
<div className='relative z-10 mx-auto mt-[2.4vw] w-[78.9vw] px-[1.4vw]'>
104+
<div className='relative z-10 mx-auto mt-[3.2vw] w-[78.9vw] px-[1.4vw]'>
105105
<div
106106
aria-hidden='true'
107107
className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'

‎apps/sim/app/(home)/components/templates/templates.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -462,7 +462,7 @@ export default function Templates() {
462462
Ship your agent in minutes
463463
</h2>
464464

465-
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[16px] leading-[125%] tracking-[0.02em]'>
465+
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
466466
Pre-built templates for every use case—pick one, swap <br />
467467
models and tools to fit your stack, and deploy.
468468
</p>

0 commit comments

Comments
 (0)