From 588589a769fc62cedb9ee2c7614b89b4779df2aa Mon Sep 17 00:00:00 2001
From: Marcin Piechaczek <marcin.piechaczek@naturaily.com>
Date: Fri, 1 Aug 2025 15:05:04 +0700
Subject: [PATCH 1/3] refactor: simplify plan handling logic and improve layout
 for responsive design

---
 src/components/StaticPlanCard.vue |  2 +-
 src/views/HomeView.vue            | 31 ++++++++++++++++---------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/StaticPlanCard.vue b/src/components/StaticPlanCard.vue
index 5f3c9ef..980164c 100644
--- a/src/components/StaticPlanCard.vue
+++ b/src/components/StaticPlanCard.vue
@@ -565,7 +565,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;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 13fcc6d..0c1afd5 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -27,12 +27,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;
@@ -232,11 +227,8 @@ function redirectToActivate() {
 >
 	<DefaultLayout
 		:title="
-			isStartup
-				? $t('plan.startup.title')
-				: $t('subscription.plans.title')
+			$t('subscription.plans.title')
 		"
-		:subtitle="isStartup ? $t('plan.startup.subtitle') : ''"
 	>
 		<InfoBanner v-if="error" theme="danger" :class="[$style.errorBanner]">
 			{{ $t('error.somethingWentWrong') }}
@@ -287,16 +279,23 @@ 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="orange"
+			/>
 			<StaticPlanCard
 				:plan="STATIC_PLANS.enterprise"
 				@contact-us="onEnterpriseContactUs"
@@ -395,18 +394,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);
 	}
 }
 
@@ -424,7 +425,7 @@ function redirectToActivate() {
 	overflow: hidden;
 	opacity: 0.5;
 
-	@media (max-width: 992px) {
+	@media (max-width: 1154px) {
 		right: 4px;
 		top: 34px;
 		bottom: 0;

From 62319660288724ee7df3baae99b6ee977ca4e135 Mon Sep 17 00:00:00 2001
From: Marcin Piechaczek <marcin.piechaczek@naturaily.com>
Date: Mon, 4 Aug 2025 14:50:00 +0700
Subject: [PATCH 2/3] feat: enhance the startup plan tooltip and update plan
 descriptions

- Added an info tooltip for startup plan eligibility details.
- Refined startup plan description for clarity and consistency.
- Adjusted custom plan CTA text and removed unused business plan button for startup.
- Introduced a new `IconInfo` component for tooltips.
---
 src/components/StaticPlanCard.vue | 84 ++++++++++++++++++++++++++++---
 src/components/icons/IconInfo.vue | 24 +++++++++
 src/constants.ts                  |  2 +-
 src/i18n/en.ts                    |  2 +-
 4 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 src/components/icons/IconInfo.vue

diff --git a/src/components/StaticPlanCard.vue b/src/components/StaticPlanCard.vue
index 980164c..48defb8 100644
--- a/src/components/StaticPlanCard.vue
+++ b/src/components/StaticPlanCard.vue
@@ -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>
 
@@ -111,7 +122,6 @@
 							width="20"
 							height="20"
 							viewBox="0 0 20 20"
-							fill="none"
 							xmlns="http://www.w3.org/2000/svg"
 						>
 							<path
@@ -134,7 +144,6 @@
 				>
 					<svg
 						viewBox="0 0 330 16"
-						fill="none"
 						xmlns="http://www.w3.org/2000/svg"
 						:class="$style.dropdown__svg"
 					>
@@ -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>
@@ -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"
@@ -363,6 +370,7 @@ 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 Theme = 'light' | 'dark';
@@ -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>
diff --git a/src/components/icons/IconInfo.vue b/src/components/icons/IconInfo.vue
new file mode 100644
index 0000000..9b40ad9
--- /dev/null
+++ b/src/components/icons/IconInfo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/constants.ts b/src/constants.ts
index 9e837fe..8814e12 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -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',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 45c1271..9ad3cd4 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -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',

From 377a14cd671878abb23fca0b67bf647ff41b0920 Mon Sep 17 00:00:00 2001
From: Marcin Piechaczek <marcin.piechaczek@naturaily.com>
Date: Mon, 4 Aug 2025 16:38:12 +0700
Subject: [PATCH 3/3] feat: add a green badge variant and update startup plan
 details

- Introduced a new "green" badge variant with custom styles.
- Updated startup plan title and description for clarity.
- Changed plan card badge variant to "green" on the home view.
---
 src/components/BadgePill.vue      | 24 ++++++++++++++++++++++--
 src/components/StaticPlanCard.vue |  2 +-
 src/constants.ts                  |  4 ++--
 src/views/HomeView.vue            | 19 +++++++++++--------
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/BadgePill.vue b/src/components/BadgePill.vue
index 40c7375..02c0a9b 100644
--- a/src/components/BadgePill.vue
+++ b/src/components/BadgePill.vue
@@ -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;
@@ -73,7 +73,8 @@ withDefaults(defineProps<BadgeProps>(), {
 
 	&--pink,
 	&--orange,
-	&--dark {
+	&--dark,
+	&--green {
 		background-image: radial-gradient(
 				circle closest-corner at 50% 160%,
 				#8b5261,
@@ -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 {
diff --git a/src/components/StaticPlanCard.vue b/src/components/StaticPlanCard.vue
index 48defb8..2e6c5a9 100644
--- a/src/components/StaticPlanCard.vue
+++ b/src/components/StaticPlanCard.vue
@@ -372,7 +372,7 @@ 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 {
diff --git a/src/constants.ts b/src/constants.ts
index 8814e12..b503611 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -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',
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0c1afd5..192bf66 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -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';
@@ -225,11 +226,7 @@ function redirectToActivate() {
 			: $t('subscription.plans.title')
 	"
 >
-	<DefaultLayout
-		:title="
-			$t('subscription.plans.title')
-		"
-	>
+	<DefaultLayout :title="$t('subscription.plans.title')">
 		<InfoBanner v-if="error" theme="danger" :class="[$style.errorBanner]">
 			{{ $t('error.somethingWentWrong') }}
 		</InfoBanner>
@@ -282,7 +279,10 @@ function redirectToActivate() {
 		<div :class="[$style.plans]">
 			<div :class="[$style.layer]" />
 			<StaticPlanCard
-				:plan="{ ...STATIC_PLANS.startup, price: STATIC_PLANS.startup.basePrice }"
+				:plan="{
+					...STATIC_PLANS.startup,
+					price: STATIC_PLANS.startup.basePrice,
+				}"
 				:isAnnual="isAnnual"
 				:recommended="true"
 				@start-trial="onSubscribe"
@@ -290,11 +290,14 @@ function redirectToActivate() {
 				badgeVariant="pink"
 			/>
 			<StaticPlanCard
-				:plan="{ ...STATIC_PLANS.business, price: STATIC_PLANS.business.basePrice }"
+				:plan="{
+					...STATIC_PLANS.business,
+					price: STATIC_PLANS.business.basePrice,
+				}"
 				:isAnnual="isAnnual"
 				@start-trial="onSubscribe"
 				@contact-us="onBusinessContactUs"
-				badgeVariant="orange"
+				badgeVariant="green"
 			/>
 			<StaticPlanCard
 				:plan="STATIC_PLANS.enterprise"