Skip to content

Release #40

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
marcin-piechaczek merged 6 commits into from
Aug 4, 2025
Merged

Release #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
588589a
refactor: simplify plan handling logic and improve layout for respons…
marcin-piechaczek Aug 1, 2025
edf438e
Merge pull request #37 from n8n-io/refactor/startup
marcin-piechaczek Aug 1, 2025
6231966
feat: enhance the startup plan tooltip and update plan descriptions
marcin-piechaczek Aug 4, 2025
074fb51
Merge pull request #38 from n8n-io/refactor/startup
marcin-piechaczek Aug 4, 2025
377a14c
feat: add a green badge variant and update startup plan details
marcin-piechaczek Aug 4, 2025
5acc405
Merge pull request #39 from n8n-io/refactor/startup
marcin-piechaczek Aug 4, 2025
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
24 changes: 22 additions & 2 deletions src/components/BadgePill.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ interface BadgeStylesProps {
text?: string;
}

type BadgeVariant = 'dark' | 'orange' | 'black' | 'pink';
type BadgeVariant = 'dark' | 'orange' | 'black' | 'pink' | 'green';

interface BadgeProps {
styles?: BadgeStylesProps;
Expand Down Expand Up @@ -73,7 +73,8 @@ withDefaults(defineProps<BadgeProps>(), {

&--pink,
&--orange,
&--dark {
&--dark,
&--green {
background-image: radial-gradient(
circle closest-corner at 50% 160%,
#8b5261,
Expand Down Expand Up @@ -140,6 +141,25 @@ withDefaults(defineProps<BadgeProps>(), {
box-shadow: none;
background-image: none;
}

&--green {
background: radial-gradient(
44.05% 98.48% at 21.99% 10.19%,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0) 100%
),
linear-gradient(
0deg,
rgba(46, 182, 125, 0.75) 0%,
rgba(46, 182, 125, 0.75) 100%
),
radial-gradient(
270.11% 383.68% at -68.45% -100.86%,
rgba(19, 138, 242, 0.9) 0%,
rgba(46, 182, 125, 0.9) 100%
);
background-blend-mode: normal, overlay, normal;
}
}

&__text {
Expand Down
88 changes: 80 additions & 8 deletions src/components/StaticPlanCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,17 @@
</div>
<div :class="$style.description">
{{ plan.description }}
<span
v-if="plan.id === 'startup'"
:class="$style.tooltipContainer"
>
<IconInfo :class="$style.tooltipIcon" />
<span :class="$style.tooltip">
You can keep the startup offer for one year, or longer,
as long as you continue to meet the eligibility
criteria.
</span>
</span>
</div>
</div>

Expand Down Expand Up @@ -111,7 +122,6 @@
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
Expand All @@ -134,7 +144,6 @@
>
<svg
viewBox="0 0 330 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:class="$style.dropdown__svg"
>
Expand Down Expand Up @@ -191,7 +200,7 @@
>
<div :class="$style.option__price">Custom plan</div>
<div :class="$style.option__description">
Custom executions, custom active workflows
Custom executions
</div>
</div>
</div>
Expand Down Expand Up @@ -314,9 +323,7 @@
</div>

<!-- Business plan specific CTA buttons -->
<template
v-if="plan.id === 'business' || plan.id === 'startup'"
>
<template v-if="plan.id === 'business'">
<span
v-if="!showCustomProduct"
:class="$style.cta__seperator"
Expand Down Expand Up @@ -363,8 +370,9 @@ import IconThunder from './icons/IconThunder.vue';
import IconInfinity from './icons/IconInfinity.vue';
import VButton from './VButton.vue';
import IconSettings from './icons/IconSettings.vue';
import IconInfo from './icons/IconInfo.vue';

type BadgeVariant = 'dark' | 'orange' | 'black' | 'pink';
type BadgeVariant = 'dark' | 'orange' | 'black' | 'pink' | 'green';
type Theme = 'light' | 'dark';

interface StaticPlan {
Expand Down Expand Up @@ -565,7 +573,7 @@ function getStartsAtMessage(): string {
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.1);
padding: var(--spacing-s);
padding-bottom: calc(var(--spacing-s) + 40px);
padding-bottom: calc(var(--spacing-s) + 60px);
flex: 1;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -918,4 +926,68 @@ function getStartsAtMessage(): string {
}
}
}

.tooltipContainer {
position: relative;
display: inline-block;
vertical-align: middle;
}

.tooltipIcon {
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;

&:hover {
opacity: 1;
}
}

.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: var(--color-white);
padding: var(--spacing-xs);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-sm);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
margin-bottom: var(--spacing-2xs);
width: 350px;
white-space: normal;
line-height: 1.4;

&::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
left: 50%;
right: auto;
transform: translateX(-50%);
width: 280px;

&::after {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
}

.tooltipContainer:hover .tooltip {
opacity: 1;
pointer-events: auto;
}
</style>
24 changes: 24 additions & 0 deletions src/components/icons/IconInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<circle
cx="8"
cy="8"
r="7"
stroke="currentColor"
stroke-width="1"
fill="none"
/>
<path
d="M8 12V8"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
<circle cx="8" cy="5.5" r="1" fill="currentColor" />
</svg>
</template>
6 changes: 3 additions & 3 deletions src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ export const STATIC_PLANS = {
id: 'startup',
name: 'Startup',
description:
'For teams that need to collaborate and scale workflows executions.',
'For startups with up to 20 employees and less than $5M in funding.',
basePrice: 4000,
features: [
'6 shared projects',
Expand Down Expand Up @@ -339,9 +339,9 @@ export const INFO_CARDS = {
},
{
id: 1,
title: 'Startup Plan',
title: 'Learn more about the Start-up Plan',
description:
'For startups with up to 20 employees that raised up to $5M.',
"Are you a start-up with fewer than 20 employees? See if you're eligible for our Start-up Plan and get 50% off the Business plan.",
button: {
text: "Let's start",
url: 'https://n8n.notion.site/Supercharge-Your-Startup-with-n8n-e64d5892eb6a43b19a18124595d77625',
Expand Down
2 changes: 1 addition & 1 deletion src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
'For larger companies with compliance requirements',
'plan.startup': 'Startup',
'plan.startup.description':
'For startups with up to 20 employees that raised up to $5M',
'For startups with up to 20 employees and less than $5M in funding.',
'feature.ldap': 'LDAP',
'feature.saml': 'SSO SAML and LDAP',
'feature.variables': 'Global variables',
Expand Down
42 changes: 23 additions & 19 deletions src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import VButton from '@/components/VButton.vue';
import ToggleSwitch from '@/components/ToggleSwitch.vue';
import TypeformModal from '@/components/TypeformModal.vue';
import CustomerInfoModal from '@/components/CustomerInfoModal.vue';
import InfoCardSection from '@/components/InfoCardSection.vue';
import type { CustomerData } from '@/components/CustomerInfoModal.vue';
import { STATIC_PLANS, PLANS_FAQ, INFO_CARDS } from '@/constants';
import { onMounted, ref, watch } from 'vue';
Expand All @@ -27,12 +28,7 @@ const error = ref<string | null>(null);

const params = new URLSearchParams(window.location.search);
const callbackParam = params.get('callback');
const startupParam = params.get('plan');
const isStartup = startupParam === 'startup';
const callbackUrl = callbackParam ? decodeURIComponent(callbackParam) : '';
const planDetails = isStartup
? { ...STATIC_PLANS.startup, price: STATIC_PLANS.startup.basePrice }
: { ...STATIC_PLANS.business, price: STATIC_PLANS.business.basePrice };

const infoCardTitle = INFO_CARDS.title;
const infoCards = INFO_CARDS.cards;
Expand Down Expand Up @@ -230,14 +226,7 @@ function redirectToActivate() {
: $t('subscription.plans.title')
"
>
<DefaultLayout
:title="
isStartup
? $t('plan.startup.title')
: $t('subscription.plans.title')
"
:subtitle="isStartup ? $t('plan.startup.subtitle') : ''"
>
<DefaultLayout :title="$t('subscription.plans.title')">
<InfoBanner v-if="error" theme="danger" :class="[$style.errorBanner]">
{{ $t('error.somethingWentWrong') }}
</InfoBanner>
Expand Down Expand Up @@ -287,16 +276,29 @@ function redirectToActivate() {
</template>
</ToggleSwitch>
</div>
<div :class="[$style.plans, $style.inner_container]">
<div :class="[$style.plans]">
<div :class="[$style.layer]" />
<StaticPlanCard
:plan="planDetails"
:plan="{
...STATIC_PLANS.startup,
price: STATIC_PLANS.startup.basePrice,
}"
:isAnnual="isAnnual"
:recommended="true"
@start-trial="onSubscribe"
@contact-us="onBusinessContactUs"
badgeVariant="pink"
/>
<StaticPlanCard
:plan="{
...STATIC_PLANS.business,
price: STATIC_PLANS.business.basePrice,
}"
:isAnnual="isAnnual"
@start-trial="onSubscribe"
@contact-us="onBusinessContactUs"
badgeVariant="green"
/>
<StaticPlanCard
:plan="STATIC_PLANS.enterprise"
@contact-us="onEnterpriseContactUs"
Expand Down Expand Up @@ -395,18 +397,20 @@ function redirectToActivate() {
}

.plans {
padding: var(--spacing-7xl);
display: flex;
justify-content: space-between;
justify-content: center;
position: relative;
gap: var(--spacing-s);
max-width: 1200px;
max-width: 1440px;
margin-left: auto;
margin-right: auto;

@media (max-width: 992px) {
@media (max-width: 1154px) {
flex-direction: column;
max-width: 555px;
margin: 0 auto;
padding: var(--spacing-5xl) var(--spacing-s);
}
}

Expand All @@ -424,7 +428,7 @@ function redirectToActivate() {
overflow: hidden;
opacity: 0.5;

@media (max-width: 992px) {
@media (max-width: 1154px) {
right: 4px;
top: 34px;
bottom: 0;
Expand Down