Skip to content

Commit 9be1202

Browse files
emir-karabegemir-karabeg
committed
improvement: footer, enterprise, templates,etc.
1 parent 6b5e055 commit 9be1202

File tree

14 files changed

+410
-205
lines changed

14 files changed

+410
-205
lines changed

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

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useCallback, useEffect, useRef, useState } from 'react'
44
import Image from 'next/image'
55
import Link from 'next/link'
6-
import { Badge, ChevronDown } from '@/components/emcn'
6+
import { Badge } from '@/components/emcn'
77

88
interface DotGridProps {
99
className?: string
@@ -249,6 +249,13 @@ export default function Collaboration() {
249249
collaboration
250250
</h2>
251251

252+
<p className='sr-only'>
253+
Sim supports real-time multiplayer collaboration. Teams can build AI agents together
254+
in a shared workspace with live cursors, presence indicators, and concurrent editing.
255+
Features include role-based access control, shared workflows, and team workspace
256+
management.
257+
</p>
258+
252259
<p className='font-[430] font-season text-[#F6F6F0]/50 text-base leading-[150%] tracking-[0.02em] md:text-lg'>
253260
Grab your team. Build agents together <br className='hidden md:block' />
254261
in real-time inside your workspace.
@@ -259,24 +266,32 @@ export default function Collaboration() {
259266
className='group/cta mt-3 inline-flex h-[32px] cursor-none items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
260267
>
261268
Build together
262-
<span className='relative h-[10px] w-[10px] shrink-0'>
263-
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
264-
<svg
265-
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
266-
viewBox='0 0 10 10'
269+
<svg
270+
className='h-[10px] w-[10px] shrink-0'
271+
viewBox='0 0 10 10'
272+
fill='none'
273+
xmlns='http://www.w3.org/2000/svg'
274+
>
275+
<line
276+
x1='0'
277+
y1='5'
278+
x2='9'
279+
y2='5'
280+
stroke='currentColor'
281+
strokeWidth='1.33'
282+
strokeLinecap='square'
283+
className='origin-left scale-x-0 transition-transform duration-200 ease-out [transform-box:fill-box] group-hover/cta:scale-x-100'
284+
/>
285+
<path
286+
d='M3.5 2L6.5 5L3.5 8'
287+
stroke='currentColor'
288+
strokeWidth='1.33'
289+
strokeLinecap='square'
290+
strokeLinejoin='miter'
267291
fill='none'
268-
xmlns='http://www.w3.org/2000/svg'
269-
>
270-
<path
271-
d='M1 5H8M5.5 2L8.5 5L5.5 8'
272-
stroke='currentColor'
273-
strokeWidth='1.33'
274-
strokeLinecap='square'
275-
strokeLinejoin='miter'
276-
fill='none'
277-
/>
278-
</svg>
279-
</span>
292+
className='transition-transform duration-200 ease-out group-hover/cta:translate-x-[30%]'
293+
/>
294+
</svg>
280295
</Link>
281296
</div>
282297

‎apps/sim/app/(landing)/components/demo-request/demo-request-modal.tsx‎

Lines changed: 77 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
import { useCallback, useState } from 'react'
44
import {
5-
Button,
65
Combobox,
7-
FormField,
86
Input,
97
Modal,
108
ModalBody,
@@ -17,7 +15,6 @@ import {
1715
import { Check } from '@/components/emcn/icons'
1816
import {
1917
DEMO_REQUEST_COMPANY_SIZE_OPTIONS,
20-
DEMO_REQUEST_REGION_OPTIONS,
2118
type DemoRequestPayload,
2219
demoRequestSchema,
2320
} from '@/app/(landing)/components/demo-request/consts'
@@ -35,25 +32,49 @@ interface DemoRequestFormState {
3532
lastName: string
3633
companyEmail: string
3734
phoneNumber: string
38-
region: DemoRequestPayload['region'] | ''
3935
companySize: DemoRequestPayload['companySize'] | ''
4036
details: string
4137
}
4238

4339
const SUBMIT_SUCCESS_MESSAGE = "We'll be in touch soon!"
44-
const COMBOBOX_REGIONS = [...DEMO_REQUEST_REGION_OPTIONS]
4540
const COMBOBOX_COMPANY_SIZES = [...DEMO_REQUEST_COMPANY_SIZE_OPTIONS]
4641

4742
const INITIAL_FORM_STATE: DemoRequestFormState = {
4843
firstName: '',
4944
lastName: '',
5045
companyEmail: '',
5146
phoneNumber: '',
52-
region: '',
5347
companySize: '',
5448
details: '',
5549
}
5650

51+
interface LandingFieldProps {
52+
label: string
53+
htmlFor: string
54+
optional?: boolean
55+
error?: string
56+
children: React.ReactNode
57+
}
58+
59+
function LandingField({ label, htmlFor, optional, error, children }: LandingFieldProps) {
60+
return (
61+
<div className='flex flex-col gap-1.5'>
62+
<label
63+
htmlFor={htmlFor}
64+
className='font-[430] font-season text-[13px] text-[var(--text-secondary)] tracking-[0.02em]'
65+
>
66+
{label}
67+
{optional ? <span className='ml-1 text-[var(--text-muted)]'>(optional)</span> : null}
68+
</label>
69+
{children}
70+
{error ? <p className='text-[12px] text-[var(--text-error)]'>{error}</p> : null}
71+
</div>
72+
)
73+
}
74+
75+
const LANDING_INPUT =
76+
'h-[32px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 font-[430] font-season text-[13.5px] text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none'
77+
5778
export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalProps) {
5879
const [open, setOpen] = useState(false)
5980
const [form, setForm] = useState<DemoRequestFormState>(INITIAL_FORM_STATE)
@@ -117,7 +138,6 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
117138
lastName: fieldErrors.lastName?.[0],
118139
companyEmail: fieldErrors.companyEmail?.[0],
119140
phoneNumber: fieldErrors.phoneNumber?.[0],
120-
region: fieldErrors.region?.[0],
121141
companySize: fieldErrors.companySize?.[0],
122142
details: fieldErrors.details?.[0],
123143
})
@@ -162,7 +182,9 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
162182
<ModalContent size='lg' className={theme === 'dark' ? 'dark' : undefined}>
163183
<ModalHeader>
164184
<span className={submitSuccess ? 'sr-only' : undefined}>
165-
{submitSuccess ? 'Demo request submitted' : 'Talk to sales'}
185+
<span className='font-[430] font-season text-[15px] tracking-[-0.02em]'>
186+
{submitSuccess ? 'Demo request submitted' : 'Talk to sales'}
187+
</span>
166188
</span>
167189
</ModalHeader>
168190
<div className='relative flex-1'>
@@ -176,37 +198,44 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
176198
}
177199
>
178200
<ModalBody>
179-
<div className='space-y-4'>
180-
<div className='grid gap-4 sm:grid-cols-2'>
181-
<FormField htmlFor='firstName' label='First name' error={errors.firstName}>
201+
<div className='space-y-3'>
202+
<div className='grid gap-3 sm:grid-cols-2'>
203+
<LandingField htmlFor='firstName' label='First name' error={errors.firstName}>
182204
<Input
183205
id='firstName'
184206
value={form.firstName}
185207
onChange={(event) => updateField('firstName', event.target.value)}
186208
placeholder='First'
209+
className={LANDING_INPUT}
187210
/>
188-
</FormField>
189-
<FormField htmlFor='lastName' label='Last name' error={errors.lastName}>
211+
</LandingField>
212+
<LandingField htmlFor='lastName' label='Last name' error={errors.lastName}>
190213
<Input
191214
id='lastName'
192215
value={form.lastName}
193216
onChange={(event) => updateField('lastName', event.target.value)}
194217
placeholder='Last'
218+
className={LANDING_INPUT}
195219
/>
196-
</FormField>
220+
</LandingField>
197221
</div>
198222

199-
<FormField htmlFor='companyEmail' label='Company email' error={errors.companyEmail}>
223+
<LandingField
224+
htmlFor='companyEmail'
225+
label='Company email'
226+
error={errors.companyEmail}
227+
>
200228
<Input
201229
id='companyEmail'
202230
type='email'
203231
value={form.companyEmail}
204232
onChange={(event) => updateField('companyEmail', event.target.value)}
205233
placeholder='Your work email'
234+
className={LANDING_INPUT}
206235
/>
207-
</FormField>
236+
</LandingField>
208237

209-
<FormField
238+
<LandingField
210239
htmlFor='phoneNumber'
211240
label='Phone number'
212241
optional
@@ -218,54 +247,48 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
218247
value={form.phoneNumber}
219248
onChange={(event) => updateField('phoneNumber', event.target.value)}
220249
placeholder='Your phone number'
250+
className={LANDING_INPUT}
221251
/>
222-
</FormField>
252+
</LandingField>
223253

224-
<div className='grid gap-4 sm:grid-cols-2'>
225-
<FormField htmlFor='region' label='Region' error={errors.region}>
226-
<Combobox
227-
options={COMBOBOX_REGIONS}
228-
value={form.region}
229-
selectedValue={form.region}
230-
onChange={(value) =>
231-
updateField('region', value as DemoRequestPayload['region'])
232-
}
233-
placeholder='Select'
234-
editable={false}
235-
filterOptions={false}
236-
/>
237-
</FormField>
238-
<FormField htmlFor='companySize' label='Company size' error={errors.companySize}>
239-
<Combobox
240-
options={COMBOBOX_COMPANY_SIZES}
241-
value={form.companySize}
242-
selectedValue={form.companySize}
243-
onChange={(value) =>
244-
updateField('companySize', value as DemoRequestPayload['companySize'])
245-
}
246-
placeholder='Select'
247-
editable={false}
248-
filterOptions={false}
249-
/>
250-
</FormField>
251-
</div>
254+
<LandingField htmlFor='companySize' label='Company size' error={errors.companySize}>
255+
<Combobox
256+
options={COMBOBOX_COMPANY_SIZES}
257+
value={form.companySize}
258+
selectedValue={form.companySize}
259+
onChange={(value) =>
260+
updateField('companySize', value as DemoRequestPayload['companySize'])
261+
}
262+
placeholder='Select'
263+
editable={false}
264+
filterOptions={false}
265+
className='h-[32px] rounded-[5px] px-2.5 font-[430] font-season text-[13.5px]'
266+
/>
267+
</LandingField>
252268

253-
<FormField htmlFor='details' label='Details' error={errors.details}>
269+
<LandingField htmlFor='details' label='Details' error={errors.details}>
254270
<Textarea
255271
id='details'
256272
value={form.details}
257273
onChange={(event) => updateField('details', event.target.value)}
258274
placeholder='Tell us about your needs and questions'
275+
className='min-h-[80px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-2 font-[430] font-season text-[13.5px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)]'
259276
/>
260-
</FormField>
277+
</LandingField>
261278
</div>
262279
</ModalBody>
263280

264-
<ModalFooter className='flex-col items-stretch gap-3'>
265-
{submitError && <p className='text-[13px] text-[var(--text-error)]'>{submitError}</p>}
266-
<Button type='submit' variant='primary' disabled={isSubmitting}>
281+
<ModalFooter className='flex-col items-stretch gap-3 border-t-0 bg-transparent pt-0'>
282+
{submitError && (
283+
<p className='font-season text-[13px] text-[var(--text-error)]'>{submitError}</p>
284+
)}
285+
<button
286+
type='submit'
287+
disabled={isSubmitting}
288+
className='flex h-[32px] w-full items-center justify-center rounded-[5px] bg-[var(--text-primary)] font-[430] font-season text-[13.5px] text-[var(--bg)] transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50'
289+
>
267290
{isSubmitting ? 'Submitting...' : 'Submit'}
268-
</Button>
291+
</button>
269292
</ModalFooter>
270293
</form>
271294

@@ -275,10 +298,10 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
275298
<div className='flex h-20 w-20 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--bg-subtle)] text-[var(--text-primary)]'>
276299
<Check className='h-10 w-10' />
277300
</div>
278-
<h2 className='mt-8 font-medium text-[34px] text-[var(--text-primary)] leading-[1.1] tracking-[-0.03em]'>
301+
<h2 className='mt-8 font-[430] font-season text-[34px] text-[var(--text-primary)] leading-[1.1] tracking-[-0.03em]'>
279302
{SUBMIT_SUCCESS_MESSAGE}
280303
</h2>
281-
<p className='mt-4 text-[17px] text-[var(--text-secondary)] leading-7'>
304+
<p className='mt-4 font-season text-[15px] text-[var(--text-secondary)] leading-7'>
282305
Our team will be in touch soon. If you have any questions, please email us at{' '}
283306
<a
284307
href='mailto:enterprise@sim.ai'

‎apps/sim/app/(landing)/components/enterprise/enterprise.tsx‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
import Image from 'next/image'
1717
import Link from 'next/link'
18-
import { Badge, ChevronDown } from '@/components/emcn'
18+
import { Badge } from '@/components/emcn'
1919
import { Lock } from '@/components/emcn/icons'
2020
import { GithubIcon } from '@/components/icons'
2121
import { DemoRequestModal } from '@/app/(landing)/components/demo-request/demo-request-modal'
@@ -230,23 +230,32 @@ export default function Enterprise() {
230230
className='group/cta inline-flex h-[32px] cursor-pointer items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
231231
>
232232
Book a demo
233-
<span className='relative h-[10px] w-[10px] shrink-0'>
234-
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
235-
<svg
236-
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
237-
viewBox='0 0 10 10'
233+
<svg
234+
className='h-[10px] w-[10px] shrink-0'
235+
viewBox='0 0 10 10'
236+
fill='none'
237+
xmlns='http://www.w3.org/2000/svg'
238+
>
239+
<line
240+
x1='0'
241+
y1='5'
242+
x2='9'
243+
y2='5'
244+
stroke='currentColor'
245+
strokeWidth='1.33'
246+
strokeLinecap='square'
247+
className='origin-left scale-x-0 transition-transform duration-200 ease-out [transform-box:fill-box] group-hover/cta:scale-x-100'
248+
/>
249+
<path
250+
d='M3.5 2L6.5 5L3.5 8'
251+
stroke='currentColor'
252+
strokeWidth='1.33'
253+
strokeLinecap='square'
254+
strokeLinejoin='miter'
238255
fill='none'
239-
>
240-
<path
241-
d='M1 5H8M5.5 2L8.5 5L5.5 8'
242-
stroke='currentColor'
243-
strokeWidth='1.33'
244-
strokeLinecap='square'
245-
strokeLinejoin='miter'
246-
fill='none'
247-
/>
248-
</svg>
249-
</span>
256+
className='transition-transform duration-200 ease-out group-hover/cta:translate-x-[30%]'
257+
/>
258+
</svg>
250259
</button>
251260
</DemoRequestModal>
252261
</div>

0 commit comments

Comments
 (0)