feat: add SwitchOffer component to promote switching from competitors for enhanced user engagement

This commit is contained in:
Dries Augustyns
2026-05-12 21:48:35 +02:00
parent 715961c007
commit 6195b39f3d
20 changed files with 186 additions and 17 deletions
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -170,6 +170,8 @@ export default function ActiveCampaignComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" />
<SwitchOffer competitorName="ActiveCampaign" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -186,6 +186,8 @@ export default function AmazonSesComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-amazon-ses" />
<SwitchOffer competitorName="Amazon SES" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -169,6 +169,8 @@ export default function BentoComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-bento" />
<SwitchOffer competitorName="Bento" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -193,6 +193,8 @@ export default function BrevoComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-brevo" />
<SwitchOffer competitorName="Brevo" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -186,6 +186,8 @@ export default function ButtondownComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-buttondown" />
<SwitchOffer competitorName="Buttondown" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -193,6 +193,8 @@ export default function ConvertkitComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-convertkit" />
<SwitchOffer competitorName="ConvertKit" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -189,6 +189,8 @@ export default function CustomerioComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-customerio" />
<SwitchOffer competitorName="Customer.io" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -170,6 +170,8 @@ export default function KlaviyoComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-klaviyo" />
<SwitchOffer competitorName="Klaviyo" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -193,6 +193,8 @@ export default function LoopsComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-loops" />
<SwitchOffer competitorName="Loops" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -195,6 +195,8 @@ export default function MailchimpComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" />
<SwitchOffer competitorName="Mailchimp" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -170,6 +170,8 @@ export default function MailerliteComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-mailerlite" />
<SwitchOffer competitorName="MailerLite" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -189,6 +189,8 @@ export default function MailgunComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-mailgun" />
<SwitchOffer competitorName="Mailgun" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -186,6 +186,8 @@ export default function MailjetComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-mailjet" />
<SwitchOffer competitorName="Mailjet" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -190,6 +190,8 @@ export default function PostmarkComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-postmark" />
<SwitchOffer competitorName="Postmark" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -189,6 +189,8 @@ export default function ResendComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-resend" />
<SwitchOffer competitorName="Resend" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
+3 -1
View File
@@ -1,4 +1,4 @@
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
import {ComparisonTable, FAQSection, Footer, Navbar, SwitchOffer} from '../../components';
import {motion} from 'framer-motion';
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
import React from 'react';
@@ -193,6 +193,8 @@ export default function SendGridComparison() {
{/* FAQ */}
<FAQSection faqs={faqs} schemaId="faq-schema-sendgrid" />
<SwitchOffer competitorName="SendGrid" />
{/* CTA */}
<section className={'relative overflow-hidden border-t border-neutral-900 bg-neutral-900 text-white'}>
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>