Skip to content

Commit bf8d159

Browse files
emir-karabegemir-karabeg
committed
mobile friendliness and home templates
1 parent ee6c8c6 commit bf8d159

File tree

11 files changed

+541
-194
lines changed

11 files changed

+541
-194
lines changed

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

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -222,34 +222,15 @@ export default function Collaboration() {
222222
<style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
223223

224224
<DotGrid
225-
className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
225+
className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
226226
cols={120}
227227
rows={1}
228228
gap={6}
229229
/>
230230

231231
<div className='relative overflow-hidden'>
232-
<Link
233-
href='/studio/multiplayer'
234-
target='_blank'
235-
rel='noopener noreferrer'
236-
className='absolute bottom-10 left-4 z-20 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:left-8 md:left-[80px]'
237-
>
238-
<div className='relative h-7 w-11 shrink-0'>
239-
<Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
240-
</div>
241-
<div className='flex flex-col gap-[2px]'>
242-
<span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
243-
Blog
244-
</span>
245-
<span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
246-
How we built realtime collaboration
247-
</span>
248-
</div>
249-
</Link>
250-
251-
<div className='grid grid-cols-[auto_1fr]'>
252-
<div className='flex flex-col items-start gap-3 px-4 pt-[100px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px]'>
232+
<div className='grid grid-cols-1 md:grid-cols-[auto_1fr]'>
233+
<div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px] md:pt-[100px]'>
253234
<Badge
254235
variant='blue'
255236
size='md'
@@ -268,8 +249,9 @@ export default function Collaboration() {
268249
collaboration
269250
</h2>
270251

271-
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
272-
Grab your team. Build agents together <br /> in real-time inside your workspace.
252+
<p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] md:text-[18px]'>
253+
Grab your team. Build agents together <br className='hidden md:block' />
254+
in real-time inside your workspace.
273255
</p>
274256

275257
<Link
@@ -298,14 +280,14 @@ export default function Collaboration() {
298280
</Link>
299281
</div>
300282

301-
<figure className='pointer-events-none relative h-[600px] w-full'>
302-
<div className='-left-[18%] absolute inset-y-0 min-w-full'>
283+
<figure className='pointer-events-none relative h-[220px] w-full md:h-[600px]'>
284+
<div className='md:-left-[18%] -top-[10%] absolute inset-y-0 left-[7%] min-w-full md:top-0'>
303285
<Image
304286
src='/landing/collaboration-visual.svg'
305287
alt='Collaboration visual showing team workflows with real-time editing, shared cursors, and version control interface'
306288
width={876}
307289
height={480}
308-
className='h-full w-auto min-w-[100vw] object-left'
290+
className='h-full w-auto object-left md:min-w-[100vw]'
309291
priority
310292
/>
311293
</div>
@@ -319,10 +301,29 @@ export default function Collaboration() {
319301
</figcaption>
320302
</figure>
321303
</div>
304+
305+
<Link
306+
href='/studio/multiplayer'
307+
target='_blank'
308+
rel='noopener noreferrer'
309+
className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
310+
>
311+
<div className='relative h-7 w-11 shrink-0'>
312+
<Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
313+
</div>
314+
<div className='flex flex-col gap-[2px]'>
315+
<span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
316+
Blog
317+
</span>
318+
<span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
319+
How we built realtime collaboration
320+
</span>
321+
</div>
322+
</Link>
322323
</div>
323324

324325
<DotGrid
325-
className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
326+
className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
326327
cols={120}
327328
rows={1}
328329
gap={6}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function FeaturesPreview({ activeTab }: FeaturesPreviewProps) {
2525
const isWorkspaceTab = activeTab <= 4
2626

2727
return (
28-
<div className='relative h-[560px] w-full'>
28+
<div className='relative h-[350px] w-full md:h-[560px]'>
2929
<motion.div
3030
className='absolute inset-0'
3131
animate={{ opacity: isWorkspaceTab ? 1 : 0 }}
@@ -210,7 +210,7 @@ function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive
210210
const isExpanded = expandedTab !== null
211211

212212
return (
213-
<div ref={containerRef} className='relative h-[560px] w-full overflow-hidden'>
213+
<div ref={containerRef} className='relative h-[350px] w-full overflow-hidden md:h-[560px]'>
214214
<motion.div
215215
aria-hidden='true'
216216
className='absolute inset-0'
@@ -1141,7 +1141,7 @@ function DefaultPreview() {
11411141
const inView = useInView(containerRef, { once: true, margin: '-80px' })
11421142

11431143
return (
1144-
<div ref={containerRef} className='relative h-[560px] w-full overflow-hidden'>
1144+
<div ref={containerRef} className='relative h-[350px] w-full overflow-hidden md:h-[560px]'>
11451145
<div
11461146
aria-hidden='true'
11471147
className='absolute inset-0'

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

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const FEATURE_TABS = [
7777
},
7878
{
7979
label: 'Knowledge Base',
80+
mobileLabel: 'Knowledge',
8081
color: '#8B5CF6',
8182
title: 'Your context engine',
8283
description:
@@ -97,6 +98,7 @@ const FEATURE_TABS = [
9798
},
9899
{
99100
label: 'Logs',
101+
hideOnMobile: true,
100102
color: '#FF6B35',
101103
title: 'Full visibility, every run',
102104
description:
@@ -150,7 +152,7 @@ function DotGrid({
150152
return (
151153
<div
152154
aria-hidden='true'
153-
className={`shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
155+
className={`h-full shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
154156
style={{
155157
width: width ? `${width}px` : undefined,
156158
display: 'grid',
@@ -192,8 +194,11 @@ export default function Features() {
192194
/>
193195
</div>
194196

195-
<div className='relative z-10 pt-[100px]'>
196-
<div ref={sectionRef} className='flex flex-col items-start gap-[20px] px-[80px]'>
197+
<div className='relative z-10 pt-[60px] lg:pt-[100px]'>
198+
<div
199+
ref={sectionRef}
200+
className='flex flex-col items-start gap-[20px] px-[24px] lg:px-[80px]'
201+
>
197202
<Badge
198203
variant='blue'
199204
size='md'
@@ -211,7 +216,7 @@ export default function Features() {
211216
</Badge>
212217
<h2
213218
id='features-heading'
214-
className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[40px] leading-[110%] tracking-[-0.02em]'
219+
className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[28px] leading-[110%] tracking-[-0.02em] md:text-[40px]'
215220
>
216221
{HEADING_LETTERS.map((char, i) => (
217222
<ScrollLetter key={i} scrollYProgress={scrollYProgress} charIndex={i}>
@@ -225,18 +230,25 @@ export default function Features() {
225230
</h2>
226231
</div>
227232

228-
<div className='relative mt-[73px] pb-[80px]'>
233+
<div className='relative mt-[40px] pb-[40px] lg:mt-[73px] lg:pb-[80px]'>
229234
<div
230235
aria-hidden='true'
231-
className='absolute top-0 bottom-0 left-[80px] z-20 w-px bg-[#E9E9E9]'
236+
className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#E9E9E9] lg:block'
232237
/>
233238
<div
234239
aria-hidden='true'
235-
className='absolute top-0 right-[80px] bottom-0 z-20 w-px bg-[#E9E9E9]'
240+
className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#E9E9E9] lg:block'
236241
/>
237242

238-
<div className='flex h-[68px] overflow-hidden border border-[#E9E9E9]'>
239-
<DotGrid cols={10} rows={8} width={80} />
243+
<div className='flex h-[68px] border border-[#E9E9E9] lg:overflow-hidden'>
244+
<div className='h-full shrink-0'>
245+
<div className='h-full lg:hidden'>
246+
<DotGrid cols={3} rows={8} width={24} />
247+
</div>
248+
<div className='hidden h-full lg:block'>
249+
<DotGrid cols={10} rows={8} width={80} />
250+
</div>
251+
</div>
240252

241253
<div role='tablist' aria-label='Feature categories' className='flex flex-1'>
242254
{FEATURE_TABS.map((tab, index) => (
@@ -246,10 +258,17 @@ export default function Features() {
246258
role='tab'
247259
aria-selected={index === activeTab}
248260
onClick={() => setActiveTab(index)}
249-
className={`relative flex h-full flex-1 items-center justify-center font-medium font-season text-[#212121] text-[14px] uppercase${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
261+
className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
250262
style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
251263
>
252-
{tab.label}
264+
{tab.mobileLabel ? (
265+
<>
266+
<span className='lg:hidden'>{tab.mobileLabel}</span>
267+
<span className='hidden lg:inline'>{tab.label}</span>
268+
</>
269+
) : (
270+
tab.label
271+
)}
253272
{index === activeTab && (
254273
<div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
255274
{tab.segments.map(([opacity, width], i) => (
@@ -269,16 +288,23 @@ export default function Features() {
269288
))}
270289
</div>
271290

272-
<DotGrid cols={10} rows={8} width={80} />
291+
<div className='h-full shrink-0'>
292+
<div className='h-full lg:hidden'>
293+
<DotGrid cols={3} rows={8} width={24} />
294+
</div>
295+
<div className='hidden h-full lg:block'>
296+
<DotGrid cols={10} rows={8} width={80} />
297+
</div>
298+
</div>
273299
</div>
274300

275-
<div className='mt-[60px] grid grid-cols-[1fr_2.8fr] gap-[60px] px-[120px]'>
276-
<div className='flex h-[560px] flex-col items-start justify-between pt-[20px]'>
301+
<div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
302+
<div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
277303
<div className='flex flex-col items-start gap-[16px]'>
278-
<h3 className='font-[430] font-season text-[#1C1C1C] text-[28px] leading-[120%] tracking-[-0.02em]'>
304+
<h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
279305
{FEATURE_TABS[activeTab].title}
280306
</h3>
281-
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
307+
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
282308
{FEATURE_TABS[activeTab].description}
283309
</p>
284310
</div>
@@ -310,7 +336,7 @@ export default function Features() {
310336
<FeaturesPreview activeTab={activeTab} />
311337
</div>
312338

313-
<div aria-hidden='true' className='mt-[60px] h-px bg-[#E9E9E9]' />
339+
<div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#E9E9E9] lg:block' />
314340
</div>
315341
</div>
316342
</section>

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

Lines changed: 3 additions & 3 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-[100px] pb-[12px]'
37+
className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[60px] pb-[12px] lg:pt-[100px]'
3838
>
3939
<p className='sr-only'>
4040
Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -61,11 +61,11 @@ export default function Hero() {
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-[72px] text-white leading-[100%] tracking-[-0.02em]'
64+
className='font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
6565
>
6666
Build AI Agents
6767
</h1>
68-
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
68+
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
6969
Sim is the AI Workspace for Agent Builders.
7070
</p>
7171

‎apps/sim/app/(home)/components/landing-preview/landing-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function LandingPreview() {
9595
onSelectHome={handleSelectHome}
9696
/>
9797
</motion.div>
98-
<div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
98+
<div className='flex min-w-0 flex-1 flex-col py-[8px] pr-[8px] pl-[8px] lg:pl-0'>
9999
<div className='flex flex-1 overflow-hidden rounded-[8px] border border-[#2c2c2c] bg-[#1b1b1b]'>
100100
<div
101101
className={

0 commit comments

Comments
 (0)