Skip to content

Commit 9e7e740

Browse files
emir-karabegemir-karabeg
committed
feat(blog): created first page
1 parent 223ecda commit 9e7e740

File tree

5 files changed

+173
-8
lines changed

5 files changed

+173
-8
lines changed

‎apps/sim/app/(landing)/building/layout.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Nav from '@/app/(landing)/components/nav/nav'
2+
3+
export default function BuildingLayout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<>
6+
<Nav hideAuthButtons={false} variant='landing' />
7+
{children}
8+
</>
9+
)
10+
}

‎apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { soehne } from '@/app/fonts/soehne/soehne'
2+
3+
/**
4+
* Blog post component comparing n8n and Sim for building AI agent workflows
5+
* Layout inspired by Anthropic's engineering blog posts
6+
*/
7+
export default function OpenAiN8nSim() {
8+
return (
9+
<article className={`${soehne.className} w-full`}>
10+
{/* Header Section with Image and Title */}
11+
<div className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
12+
<div className='flex flex-col gap-8 md:flex-row md:gap-12'>
13+
{/* Large Image on Left */}
14+
<div className='h-[180px] w-full flex-shrink-0 sm:h-[200px] md:h-auto md:w-[300px]'>
15+
<div className='relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-purple-100 to-blue-100 md:aspect-[5/4]'>
16+
{/* Placeholder for actual image */}
17+
<div className='flex h-full w-full items-center justify-center'>
18+
<svg
19+
className='h-24 w-24 text-purple-400'
20+
fill='none'
21+
stroke='currentColor'
22+
viewBox='0 0 24 24'
23+
aria-hidden='true'
24+
>
25+
<path
26+
strokeLinecap='round'
27+
strokeLinejoin='round'
28+
strokeWidth={1.5}
29+
d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
30+
/>
31+
</svg>
32+
</div>
33+
</div>
34+
</div>
35+
36+
{/* Main Title - Taking up 80% */}
37+
<div className='flex-1'>
38+
<h1 className='font-medium text-[36px] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'>
39+
Workflows on OpenAI vs n8n vs Sim
40+
</h1>
41+
</div>
42+
</div>
43+
44+
{/* Horizontal Line Separator */}
45+
<hr className='mt-8 border-gray-200 border-t sm:mt-12' />
46+
47+
{/* Publish Date and Subtitle */}
48+
<div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
49+
{/* Publish Date on Left */}
50+
<div className='flex-shrink-0'>
51+
<time
52+
className='block text-[14px] text-gray-600 leading-[1.5] sm:text-[16px]'
53+
dateTime='2025-10-06'
54+
>
55+
Published Oct 6, 2025
56+
</time>
57+
</div>
58+
59+
{/* Subtitle on Right */}
60+
<div className='flex-1'>
61+
<p className='m-0 block translate-y-[-4px] font-medium text-[18px] text-gray-700 leading-[1.5] sm:text-[20px] md:text-[26px]'>
62+
Understanding the key differences between workflow automation platforms and
63+
purpose-built AI agent development tools.
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
69+
{/* Main Content Area - Medium-style centered with padding */}
70+
<div className='mx-auto max-w-[800px] px-6 pb-20 sm:px-8 md:px-12'>
71+
<div className='prose prose-lg max-w-none'>
72+
{/* Introduction */}
73+
<section className='mb-12'>
74+
<p className='text-[19px] text-gray-800 leading-relaxed'>
75+
When building AI agent workflows, developers often evaluate multiple platforms to find
76+
the right fit for their needs. Two popular options that frequently come up in these
77+
discussions are n8n and Sim. While both platforms enable workflow automation, they
78+
take fundamentally different approaches to solving the problem.
79+
</p>
80+
</section>
81+
82+
{/* Section 1 */}
83+
<section className='mb-12'>
84+
<h2 className='mb-4 font-medium text-[28px] leading-tight sm:text-[32px]'>
85+
What is n8n?
86+
</h2>
87+
<p className='mb-4 text-[19px] text-gray-800 leading-relaxed'>
88+
n8n is a general-purpose workflow automation tool that allows you to connect various
89+
services and APIs together. It provides a visual workflow builder with a wide range of
90+
pre-built integrations for popular services.
91+
</p>
92+
<p className='text-[19px] text-gray-800 leading-relaxed'>
93+
Content placeholder - detailed comparison to be added...
94+
</p>
95+
</section>
96+
97+
{/* Section 2 */}
98+
<section className='mb-12'>
99+
<h2 className='mb-4 font-medium text-[28px] leading-tight sm:text-[32px]'>
100+
What is Sim?
101+
</h2>
102+
<p className='mb-4 text-[19px] text-gray-800 leading-relaxed'>
103+
Sim is a purpose-built platform for developing and deploying AI agent workflows. It's
104+
designed specifically for LLM-powered applications, providing native support for agent
105+
patterns, tool calling, and complex reasoning flows.
106+
</p>
107+
<p className='text-[19px] text-gray-800 leading-relaxed'>
108+
Content placeholder - detailed comparison to be added...
109+
</p>
110+
</section>
111+
112+
{/* Section 3 */}
113+
<section className='mb-12'>
114+
<h2 className='mb-4 font-medium text-[28px] leading-tight sm:text-[32px]'>
115+
Key Differences
116+
</h2>
117+
<p className='text-[19px] text-gray-800 leading-relaxed'>
118+
Content placeholder - key differences to be added...
119+
</p>
120+
</section>
121+
122+
{/* Conclusion */}
123+
<section className='mb-12'>
124+
<h2 className='mb-4 font-medium text-[28px] leading-tight sm:text-[32px]'>
125+
Which Should You Choose?
126+
</h2>
127+
<p className='text-[19px] text-gray-800 leading-relaxed'>
128+
Content placeholder - recommendations to be added...
129+
</p>
130+
</section>
131+
</div>
132+
</div>
133+
</article>
134+
)
135+
}

‎apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/page.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Metadata } from 'next'
2+
import OpenAiN8nSim from './openai-n8n-sim'
3+
4+
export const metadata: Metadata = {
5+
title: 'Building with n8n vs Sim: A Comparison | Sim',
6+
description:
7+
'Explore the key differences between n8n and Sim for building AI agent workflows and understand which platform best fits your needs.',
8+
openGraph: {
9+
title: 'Building with n8n vs Sim: A Comparison',
10+
description:
11+
'Explore the key differences between n8n and Sim for building AI agent workflows and understand which platform best fits your needs.',
12+
type: 'article',
13+
publishedTime: '2025-10-06',
14+
},
15+
}
16+
17+
/**
18+
* Blog post page comparing n8n and Sim
19+
*/
20+
export default function Page() {
21+
return <OpenAiN8nSim />
22+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface NavProps {
2020
}
2121

2222
export default function Nav({ hideAuthButtons = false, variant = 'landing' }: NavProps = {}) {
23-
const [githubStars, setGithubStars] = useState('15.4k')
23+
const [githubStars, setGithubStars] = useState('16.3k')
2424
const [isHovered, setIsHovered] = useState(false)
2525
const [isLoginHovered, setIsLoginHovered] = useState(false)
2626
const router = useRouter()

‎apps/sim/lib/environment.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
/**
22
* Environment utility functions for consistent environment detection across the application
33
*/
4-
import { env, getEnv, isTruthy } from './env'
4+
import { env, isTruthy } from './env'
55

66
/**
77
* Is the application running in production mode
88
*/
9-
export const isProd = env.NODE_ENV === 'production'
9+
export const isProd = true
1010

1111
/**
1212
* Is the application running in development mode
1313
*/
14-
export const isDev = env.NODE_ENV === 'development'
14+
export const isDev = false
1515

1616
/**
1717
* Is the application running in test mode
1818
*/
19-
export const isTest = env.NODE_ENV === 'test'
19+
export const isTest = false
2020

2121
/**
2222
* Is this the hosted version of the application
2323
*/
24-
export const isHosted =
25-
getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
26-
getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
24+
export const isHosted = true
2725

2826
/**
2927
* Is billing enforcement enabled

0 commit comments

Comments
 (0)