Skip to content

improvement: landing, sidebar, globals, buttons #3590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 6 commits into from
Mar 15, 2026
Merged

improvement: landing, sidebar, globals, buttons #3590

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c01e533
improvement: landing, sidebar, globals, buttons
emir-karabeg Mar 14, 2026
8df13e1
improvement(landing): features
emir-karabeg Mar 14, 2026
fbdae9e
improvement: features, footer, tab modals
emir-karabeg Mar 15, 2026
f8a77fb
migrations
emir-karabeg Mar 15, 2026
01c3745
temp: enterprise link
emir-karabeg Mar 15, 2026
7a47b91
addressed comments
emir-karabeg Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
improvement(landing): features
  • Loading branch information
@emir-karabeg
emir-karabeg committed Mar 15, 2026
commit 8df13e13a6930000ccbdf4b6c2fe51234f9f5ef9
2 changes: 1 addition & 1 deletion apps/sim/app/(home)/components/collaboration/collaboration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ export default function Collaboration() {
collaboration
</h2>

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

Expand Down
155 changes: 112 additions & 43 deletions apps/sim/app/(home)/components/features/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

import { useState } from 'react'
import Image from 'next/image'
import { Badge } from '@/components/emcn'
import Link from 'next/link'
import { Badge, ChevronDown } from '@/components/emcn'

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

const FEATURE_TABS = [
{
label: 'Integrations',
label: 'Mothership',
color: '#FA4EDF',
title: 'Your AI command center',
description:
'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.',
cta: 'Explore mothership',
segments: [
[0.3, 8],
[0.25, 10],
Expand All @@ -29,8 +34,12 @@ const FEATURE_TABS = [
],
},
{
label: 'Copilot',
label: 'Tables',
color: '#2ABBF8',
title: 'A database, built in',
description:
'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.',
cta: 'Explore tables',
segments: [
[0.25, 12],
[0.4, 10],
Expand All @@ -44,43 +53,53 @@ const FEATURE_TABS = [
],
},
{
label: 'Models',
color: '#00F701',
badgeColor: '#22C55E',
label: 'Files',
color: '#FFCC02',
badgeColor: '#EAB308',
title: 'Upload, create, and share',
description:
'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.',
cta: 'Explore files',
segments: [
[0.2, 6],
[0.35, 10],
[0.3, 8],
[0.25, 10],
[0.4, 8],
[0.35, 12],
[0.5, 10],
[0.6, 8],
[0.75, 12],
[0.85, 10],
[1, 8],
[0.65, 8],
[0.75, 10],
[0.9, 12],
[1, 10],
[0.95, 6],
[0.85, 10],
[1, 10],
],
},
{
label: 'Deploy',
color: '#FFCC02',
badgeColor: '#EAB308',
label: 'Knowledge Base',
color: '#8B5CF6',
title: 'Your context engine',
description:
'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.',
cta: 'Explore knowledge base',
segments: [
[0.3, 12],
[0.3, 10],
[0.25, 8],
[0.4, 10],
[0.55, 10],
[0.7, 8],
[0.6, 10],
[0.85, 12],
[0.5, 10],
[0.65, 10],
[0.8, 10],
[0.9, 12],
[1, 10],
[0.9, 10],
[0.95, 10],
[1, 10],
],
},
{
label: 'Logs',
color: '#FF6B35',
title: 'Full visibility, every run',
description:
'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.',
cta: 'Explore logs',
segments: [
[0.25, 10],
[0.35, 8],
Expand All @@ -94,22 +113,6 @@ const FEATURE_TABS = [
[1, 10],
],
},
{
label: 'Knowledge Base',
color: '#8B5CF6',
segments: [
[0.3, 10],
[0.25, 8],
[0.4, 10],
[0.5, 10],
[0.65, 10],
[0.8, 10],
[0.9, 12],
[1, 10],
[0.95, 10],
[1, 10],
],
},
]

function DotGrid({
Expand All @@ -126,7 +129,7 @@ function DotGrid({
return (
<div
aria-hidden='true'
className={`shrink-0 bg-[#FDFDFD] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
className={`shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
style={{
width: width ? `${width}px` : undefined,
display: 'grid',
Expand Down Expand Up @@ -177,13 +180,17 @@ export default function Features() {
),
}}
>
Features
Workspace
</Badge>
<h2
id='features-heading'
className='font-[430] font-season text-[#1C1C1C] text-[40px] leading-[100%] tracking-[-0.02em]'
className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[40px] leading-[110%] tracking-[-0.02em]'
>
Power your AI workforce
Everything you need to build, deploy, and manage AI agents.{' '}
<span className='text-[#1C1C1C]/40'>
Design powerful workflows, connect your data, and monitor every run — all in one
platform.
</span>
</h2>
</div>

Expand Down Expand Up @@ -223,6 +230,68 @@ export default function Features() {

<DotGrid cols={10} rows={8} width={80} borderLeft />
</div>

<div className='mt-[60px] grid grid-cols-[1fr_2.8fr] gap-[60px] px-[80px]'>
<div className='flex h-[560px] flex-col items-start justify-between pt-[20px]'>
<div className='flex flex-col items-start gap-[16px]'>
<h3 className='font-[430] font-season text-[#1C1C1C] text-[28px] leading-[120%] tracking-[-0.02em]'>
{FEATURE_TABS[activeTab].title}
</h3>
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
{FEATURE_TABS[activeTab].description}
</p>
</div>
<Link
href='/signup'
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]'
>
{FEATURE_TABS[activeTab].cta}
<span className='relative h-[10px] w-[10px] shrink-0'>
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
<svg
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
viewBox='0 0 10 10'
fill='none'
>
<path
d='M1 5H8M5.5 2L8.5 5L5.5 8'
stroke='currentColor'
strokeWidth='1.33'
strokeLinecap='square'
strokeLinejoin='miter'
fill='none'
/>
</svg>
</span>
</Link>
</div>

<div
className='flex h-[560px] items-center justify-center rounded-[8px] border-2 border-dashed'
style={{
borderColor: hexToRgba(
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
0.3
),
backgroundColor: hexToRgba(
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
0.04
),
}}
>
<span
className='font-[430] font-season text-[14px] uppercase tracking-[0.08em]'
style={{
color: hexToRgba(
FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
0.4
),
}}
>
{FEATURE_TABS[activeTab].label} preview
</span>
</div>
</div>
</div>
</section>
)
Expand Down
14 changes: 7 additions & 7 deletions apps/sim/app/(home)/components/hero/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function Hero() {
<section
id='hero'
aria-labelledby='hero-heading'
className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[71px]'
className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[100px] pb-[12px]'
>
<p className='sr-only'>
Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
Expand All @@ -53,20 +53,20 @@ export default function Hero() {

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

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

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

<div className='relative z-10 mx-auto mt-[2.4vw] w-[78.9vw] px-[1.4vw]'>
<div className='relative z-10 mx-auto mt-[3.2vw] w-[78.9vw] px-[1.4vw]'>
<div
aria-hidden='true'
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]'
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(home)/components/templates/templates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export default function Templates() {
Ship your agent in minutes
</h2>

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