diff --git a/components/account-header.tsx b/components/account-header.tsx
index 2c37f76b..0149f54a 100644
--- a/components/account-header.tsx
+++ b/components/account-header.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { FunctionComponent } from 'react';
 import { useAuth } from '../utils/auth';
 
@@ -8,7 +7,6 @@ const AccountHeader: FunctionComponent<{
   showLogout?: boolean;
 }> = function ({ title, subtitle, showLogout }) {
   const auth = useAuth();
-  const router = useRouter();
   showLogout = showLogout ?? true;
 
   const logout = async () => {
diff --git a/components/alternated-features.tsx b/components/alternated-features.tsx
new file mode 100644
index 00000000..d5b58b9c
--- /dev/null
+++ b/components/alternated-features.tsx
@@ -0,0 +1,70 @@
+import { FunctionComponent } from 'react';
+
+const AlternatedFeatures: FunctionComponent<{
+  features: {
+    title: string;
+    description: string;
+    imgSrc: string;
+    imgAlt: string;
+    cta?: string;
+    ctaLink?: string;
+  }[];
+  // provide the images size in pixels when known
+  imgSize?: [number, number];
+  // provide a custom class name for the images (like 'w-lg-50')
+  imgClassName?: string;
+}> = function ({ features, imgSize, imgClassName }) {
+  return (
+    <>
+      {features.map((feature, featureIndex) => {
+        return (
+          <div
+            className='row py-5 py-lg-8 align-items-center justify-content-between'
+            key={`feature${featureIndex}`}
+          >
+            <div
+              className={`col-12 col-lg-6 pb-sm-10 pb-lg-0 ${
+                featureIndex % 2 === 0 ? 'order-lg-2' : 'order-lg-1'
+              }`}
+            >
+              <h3
+                className='h2 fw-bold'
+                dangerouslySetInnerHTML={{ __html: feature.title }}
+              ></h3>
+
+              <p className='fs-lg text-gray-700'>{feature.description}</p>
+              <div>
+                {feature.cta && (
+                  <a
+                    className='btn btn-secondary-subtle btn-xs mt-5'
+                    href={feature.ctaLink}
+                  >
+                    {feature.cta}
+                    <i className='icon-arrow_forward ms-2'></i>
+                  </a>
+                )}
+              </div>
+            </div>
+            <div
+              className={`col-12 col-lg-6 ${
+                featureIndex % 2 === 0 ? 'order-lg-1' : 'order-lg-2'
+              }`}
+            >
+              <div className='mb-6 mb-lg-0 text-center'>
+                <img
+                  src={feature.imgSrc}
+                  alt={feature.imgAlt}
+                  className={`img-fluid p-2 ${imgClassName}`}
+                  width={imgSize?.[0]}
+                  height={imgSize?.[1]}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default AlternatedFeatures;
diff --git a/components/card.tsx b/components/card.tsx
index c40b52cb..7e15a13b 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -67,7 +67,10 @@ const Card: FunctionComponent<{
             </span>
           )}
 
-          <h3 className='pb-3 h4 col-10 fw-medium'>{props.data.title}</h3>
+          <h3
+            className='pb-3 h4 col-10 fw-medium'
+            dangerouslySetInnerHTML={{ __html: props.data.title }}
+          ></h3>
 
           {props.data.description && (
             <p
diff --git a/components/footer.tsx b/components/footer.tsx
index b472c5a4..6c8d04f9 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -118,7 +118,8 @@ const Footer: FunctionComponent<{
               </li>
               <li className='mb-2'>
                 <Link href='/tutorials/' className='text-reset'>
-                  View all tutorials →
+                  View all tutorials
+                  <i className='icon-arrow_forward ms-2'></i>
                 </Link>
               </li>
             </ul>
diff --git a/components/mock-samples/cards.tsx b/components/mock-samples/cards.tsx
index 87aaea75..0d44f275 100644
--- a/components/mock-samples/cards.tsx
+++ b/components/mock-samples/cards.tsx
@@ -68,7 +68,8 @@ const MockSampleCards: FunctionComponent<{
                     href={`/mock-samples/${mockAPI.slug}/`}
                     className='btn-xs btn btn-primary-subtle '
                   >
-                    Use API →
+                    Use API
+                    <i className='icon-arrow_forward ms-2'></i>
                   </Link>
                 </div>
               </div>
diff --git a/pages/cli.tsx b/pages/cli.tsx
index f07da045..c3f17c37 100644
--- a/pages/cli.tsx
+++ b/pages/cli.tsx
@@ -9,15 +9,16 @@ import { CardData } from '../models/common.model';
 
 const features: CardData[] = [
   {
-    title: "Supports all Mockoon's features",
+    title: 'Supports all Mockoon\'s <span class="text-primary">features</span>',
     description:
       "The CLI supports all of Mockoon's features: dynamic templating, response rules, proxy mode, OpenAPI compatibility, etc.",
     links: [{ src: '/features/', text: 'View all features' }]
   },
   {
-    title: 'Lightweight and fast',
+    title:
+      '<span class="text-primary">Lightweight</span> and <span class="text-primary">fast</span>',
     description:
-      'Deploy lighting fast mock servers in your CI environment with a simple and easy to use NPM package.',
+      'Deploy lighting fast mock servers in your CI environment with a simple and easy to use NPM package or Docker image.',
     links: [
       {
         src: 'https://github.com/mockoon/mockoon/tree/main/packages/cli#installation',
@@ -27,7 +28,7 @@ const features: CardData[] = [
     ]
   },
   {
-    title: 'Run your mocks everywhere',
+    title: 'Run your mocks <span class="text-primary">anywhere</span>',
     description:
       'Also available as a Docker image and a GitHub Action, run your mock APIs in your favorite CI platform!',
     links: [
@@ -43,13 +44,13 @@ const CLI: FunctionComponent = function () {
   return (
     <Layout footerBanner='download'>
       <Meta
-        title='Take Mockoon to the command line'
-        description='Mockoon CLI takes Mockoon where it has never been before: servers, CI environments, etc. Lightweight and fast.'
+        title='Self-host your mocks with Mockoon CLI'
+        description='Run your mock APIs in your CI/CD pipeline, on your servers or in your cloud environments with Mockoon CLI'
         image='cli-hero.png'
       />
       <Hero
-        title="Take Mockoon to the <span class='text-primary'>command line</span>"
-        subtitle='Mockoon CLI takes Mockoon where it has never been before. Lightweight and fast.'
+        title='<span class="text-primary">Self-host</span> your mocks with Mockoon CLI'
+        subtitle='Run your mock APIs in your CI/CD pipeline, on your servers or in your cloud environments with Mockoon CLI'
         cta={[
           {
             text: 'Installation instructions →',
diff --git a/pages/cloud.tsx b/pages/cloud.tsx
index 1bee9a7e..73967a16 100644
--- a/pages/cloud.tsx
+++ b/pages/cloud.tsx
@@ -1,3 +1,4 @@
+import AlternatedFeatures from '../components/alternated-features';
 import CompanyLogos from '../components/company-logos';
 import Hero from '../components/hero';
 import Meta from '../components/meta';
@@ -6,8 +7,8 @@ import { useAuth } from '../utils/auth';
 
 const cloudFeatures = [
   {
-    label: 'Collaborate',
-    title: 'Collaborate with your team in real time',
+    title:
+      '<span class="text-primary">Collaborate</span> with your team in real time',
     description:
       'Invite your team members to collaborate on your mock APIs in real time. Avoid conflicts and keep your team in sync. ',
     imgSrc: '/images/mockoon-cloud/mockoon-cloud-real-time-collaboration.png',
@@ -17,8 +18,8 @@ const cloudFeatures = [
       '/docs/latest/mockoon-cloud/data-synchronization-team-collaboration/'
   },
   {
-    label: 'Publish',
-    title: 'Instantly share your mock APIs with your team',
+    title:
+      'Instantly <span class="text-primary">share</span> your mock APIs with your team',
     description:
       'Deploy your mock APIs to the cloud with a single click and share them with your team, clients, or class. Say goodbye to complex deployment configurations.',
     imgSrc: '/images/mockoon-cloud/mockoon-cloud-api-mock-deployment.png',
@@ -27,8 +28,7 @@ const cloudFeatures = [
     ctaLink: '/docs/latest/mockoon-cloud/api-mock-cloud-deployments/'
   },
   {
-    label: 'Synchronize',
-    title: 'Keep your setup in sync',
+    title: 'Keep your setup in <span class="text-primary">sync</span>',
     description:
       'Always have the latest version of your mock APIs available on all your devices. Enjoy a frictionless experience with automatic data synchronization.',
     imgSrc:
@@ -39,8 +39,8 @@ const cloudFeatures = [
       '/docs/latest/mockoon-cloud/data-synchronization-team-collaboration/'
   },
   {
-    label: 'Prototype',
-    title: 'Prototype your APIs faster with our assistants',
+    title:
+      '<span class="text-primary">Prototype</span> your APIs faster with our assistants',
     description:
       'Accelerate your API design and prototyping with our assistants. Generate realistic data, endpoints, and responses in seconds.',
     imgSrc: '/images/mockoon-cloud/mockoon-cloud-ai-assisted-mock-design.png',
@@ -49,8 +49,7 @@ const cloudFeatures = [
     ctaLink: '/ai-powered-api-mocking/'
   },
   {
-    label: 'Support',
-    title: 'Get help when you need it',
+    title: 'Get <span class="text-primary">help</span> when you need it',
     description:
       'Enjoy priority support from our team of experts. Get help with your setup, your integrations, or any other questions you may have.',
     imgSrc:
@@ -187,58 +186,7 @@ export default function () {
 
       <section className='py-5 py-lg-10'>
         <div className='container text-lg-start text-center'>
-          {cloudFeatures.map((feature, featureIndex) => {
-            return (
-              <div
-                className='row py-5 py-lg-8 align-items-center justify-content-between'
-                key={`feature${featureIndex}`}
-              >
-                <div
-                  className={`col-12 col-lg-6 pb-sm-10 pb-lg-0 ${
-                    featureIndex % 2 === 0 ? 'order-lg-2' : 'order-lg-1'
-                  }`}
-                >
-                  <span className='badge rounded-pill text-bg-primary-subtle mb-3'>
-                    <span className='h6 text-uppercase'>{feature.label}</span>
-                  </span>
-
-                  <h3 className='h2 fw-bold'>{feature.title}</h3>
-
-                  <p className='fs-lg text-gray-700'>{feature.description}</p>
-                  <div>
-                    {feature.cta && (
-                      <a
-                        className='btn btn-secondary-subtle btn-xs mt-5'
-                        href={feature.ctaLink}
-                      >
-                        {feature.cta}
-                        <i className='icon-arrow_forward ms-2'></i>
-                      </a>
-                    )}
-                  </div>
-                </div>
-                <div
-                  className={`col-12 col-lg-6 ${
-                    featureIndex % 2 === 0 ? 'order-lg-1' : 'order-lg-2'
-                  }`}
-                >
-                  <div
-                    className={`mb-6 mb-lg-0 ${
-                      featureIndex % 2 === 0 ? 'text-start' : 'text-end'
-                    }`}
-                  >
-                    <img
-                      src={feature.imgSrc}
-                      alt={feature.imgAlt}
-                      className='img-fluid p-2'
-                      width={800}
-                      height={454}
-                    />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
+          <AlternatedFeatures features={cloudFeatures} imgSize={[800, 454]} />
         </div>
       </section>
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 4b3bac53..ff168657 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent, useEffect, useState } from 'react';
+import AlternatedFeatures from '../components/alternated-features';
 import Card from '../components/card';
 import CompanyLogos from '../components/company-logos';
 import Hero from '../components/hero';
@@ -13,50 +14,49 @@ import Layout from '../layout/layout';
 
 const hpFeatures = [
   {
-    label: 'Customizable',
-    title: 'Complete control',
+    title:
+      'Highly <span class="text-primary">customizable and powerful</span> mock APIs',
     description:
-      'Mockoon offers you complete flexibility when creating your mocks: custom statuses, route and global headers, file serving or body editor, HTTPS, etc.',
+      'Mockoon offers a wide range of features to create the most realistic mock APIs: dynamic templating, rules matching, JSON databases, proxy mode, webhooks, TLS support, and more.',
     imgSrc: '/images/home/customize-mock-apis.png',
     imgAlt:
       'Mockoon customizable interface screenshot with multiple features displayed',
-    cta: 'Full list of features',
+    cta: 'View the full list of features',
     ctaLink: '/features/'
   },
   {
-    label: 'Powerful',
-    title: 'Create realistic scenarios',
+    title:
+      'Create <span class="text-primary">realistic scenarios</span> and test edge cases',
     description:
-      'Simulate real-life scenarios with dynamic templating and the response rules system. Test your app resilience with sequential and random responses.',
+      'Simulate real-life scenarios and improve integration testing with dynamic templating and rules-matching systems. Test your app resilience with chaos engineering features.',
     imgSrc: '/images/home/api-mocks-with-realistic-scenarios.png',
     imgAlt:
       'Mockoon main interface screenshot with response rules and templating system',
-    cta: 'Learn more',
-    ctaLink: '/docs/latest/route-responses/multiple-responses/'
+    cta: 'Discover the rules system',
+    ctaLink: '/tutorials/responses-and-rules/'
   },
   {
-    label: 'Integrable',
-    title: 'Powerful forwarding and debugging',
+    title:
+      '<span class="text-primary">Integrate</span> with your existing APIs and workflows',
     description:
-      'Easily integrate Mockoon with existing backends and APIs by intercepting selected endpoints and forwarding the rest. Debug intricated situation with the built-in session recording.',
+      'Forward requests to your real APIs, record and replay them. Ensure your app performs flawlessly with real-world data and responses.',
     imgSrc: '/images/home/forward-debug-requests.png',
     imgAlt: 'Mockoon requests recording screenshot',
-    cta: 'Learn more',
-    ctaLink: '/tutorials/partial-mocking-proxy/'
+    cta: 'Discover the requests recording',
+    ctaLink: '/tutorials/requests-recording-auto-mocking/'
   },
   {
-    label: 'Cloud',
-    title: 'Collaborate with your team in real-time',
+    title:
+      '<span class="text-primary">Collaborate</span> with your team in real-time',
     description:
-      'Supercharge your team productivity with Mockoon Cloud. Collaborate on your mock APIs in real-time, deploy them to the cloud, and share them with the world.',
+      'Supercharge your team productivity with Mockoon Cloud. Collaborate on your mock APIs in real-time, deploy them to the cloud, and share them with your team.',
     imgSrc: '/images/home/mockoon-cloud.png',
     imgAlt: 'mockoon cloud feature linked together',
     cta: 'Discover our Cloud',
     ctaLink: '/cloud/'
   },
   {
-    label: 'Containers',
-    title: 'Run your mock servers anywhere',
+    title: '<span class="text-primary">Self-host</span> your mock APIs',
     description:
       'Use the CLI and the Docker image to run your mock REST APIs on servers and headless environments: GitHub Actions, CircleCI, TravisCI, etc.',
     imgSrc: '/images/home/api-mock-self-host-cli.png',
@@ -65,18 +65,18 @@ const hpFeatures = [
     ctaLink: '/cli/'
   },
   {
-    label: 'Cloud',
-    title: 'Serverless compatible',
+    title:
+      '<span class="text-primary">Deploy</span> your mock APIs in cloud functions',
     description:
-      'Deploy your mock REST APIs in cloud functions compatible with any provider: AWS Lambda, GCP Functions, Firebase Functions, etc.',
+      'Deploy your mock REST APIs in cloud functions, compatible with most providers: AWS Lambda, GCP Functions, Firebase Functions, etc.',
     imgSrc: '/images/home/api-mock-serverless-hosting.png',
     imgAlt: 'Mockoon CLI start and list commands screenshot',
     cta: 'Discover the serverless package',
     ctaLink: '/serverless/'
   },
   {
-    label: 'Privacy',
-    title: 'Privacy friendly and offline first',
+    title:
+      '<span class="text-primary">Privacy</span> friendly and <span class="text-primary">offline</span> first',
     description:
       'Our tools are offline first and require no account creation. They are privacy-friendly, making them the best choice for highly regulated or high-security environments.',
     imgSrc: '/images/home/api-mocking-privacy-friendly-offline.png',
@@ -291,57 +291,20 @@ const HomePage: FunctionComponent = function () {
 
       <section id='features' className='py-5 py-lg-10'>
         <div className='container text-lg-start text-center'>
-          {hpFeatures.map((feature, featureIndex) => {
-            return (
-              <div
-                className='row py-5 py-lg-8 align-items-center justify-content-between'
-                key={`feature${featureIndex}`}
-              >
-                <div
-                  className={`col-12 col-lg-6 pb-sm-10 pb-lg-0 ${
-                    featureIndex % 2 === 0 ? 'order-lg-2' : 'order-lg-1'
-                  }`}
-                >
-                  <span className='badge rounded-pill text-bg-primary-subtle mb-3'>
-                    <span className='h6 text-uppercase'>{feature.label}</span>
-                  </span>
-
-                  <h3 className='h2 fw-bold'>{feature.title}</h3>
+          <AlternatedFeatures features={hpFeatures} imgSize={[1200, 783]} />
+        </div>
+      </section>
 
-                  <p className='fs-lg text-gray-700'>{feature.description}</p>
-                  <div>
-                    {feature.cta && (
-                      <a
-                        className='btn btn-secondary-subtle btn-xs mt-5'
-                        href={feature.ctaLink}
-                      >
-                        {feature.cta}&nbsp;→
-                      </a>
-                    )}
-                  </div>
-                </div>
-                <div
-                  className={`col-12 col-lg-6 ${
-                    featureIndex % 2 === 0 ? 'order-lg-1' : 'order-lg-2'
-                  }`}
-                >
-                  <div
-                    className={`mb-6 mb-lg-0 ${
-                      featureIndex % 2 === 0 ? 'text-start' : 'text-end'
-                    }`}
-                  >
-                    <img
-                      src={feature.imgSrc}
-                      alt={feature.imgAlt}
-                      className='img-fluid p-2'
-                      width={1200}
-                      height={783}
-                    />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
+      <section className='pb-6 pb-md-8'>
+        <div className='container'>
+          <div className='row justify-content-center'>
+            <div className='col-md-6 text-center'>
+              <a href='/download/' className='btn btn-primary mb-6 lift'>
+                Download Mockoon for free{' '}
+                <i className='icon-arrow_forward ms-2'></i>
+              </a>
+            </div>
+          </div>
         </div>
       </section>
 
diff --git a/pages/serverless.tsx b/pages/serverless.tsx
index 0daac54e..0497d9fa 100644
--- a/pages/serverless.tsx
+++ b/pages/serverless.tsx
@@ -9,13 +9,14 @@ import { CardData } from '../models/common.model';
 
 const features: CardData[] = [
   {
-    title: "Supports all Mockoon's features",
+    title: 'Supports all Mockoon\'s <span class="text-primary">features</span>',
     description:
       "Our Serverless library supports all of Mockoon's features: dynamic templating, response rules, proxy mode, etc.",
     links: [{ src: '/features/', text: 'View all features' }]
   },
   {
-    title: 'Lightweight and fast',
+    title:
+      '<span class="text-primary">Lightweight</span> and <span class="text-primary">fast</span>',
     description:
       'Deploy lighting fast mock servers in your serverless environment with a simple and easy-to-use NPM package.',
     links: [
@@ -27,7 +28,7 @@ const features: CardData[] = [
     ]
   },
   {
-    title: 'Compatible with all providers',
+    title: '<span class="text-primary">Compatible</span> with most providers',
     description:
       'Deploy a cloud function compatible with any provider: AWS Lambda, GCP Functions, Firebase Functions, etc.',
     links: [
diff --git a/pages/use-cases/index.tsx b/pages/use-cases/index.tsx
index c7b899bf..37b21a05 100644
--- a/pages/use-cases/index.tsx
+++ b/pages/use-cases/index.tsx
@@ -1,11 +1,12 @@
+import AlternatedFeatures from '../../components/alternated-features';
 import Hero from '../../components/hero';
 import Meta from '../../components/meta';
 import Layout from '../../layout/layout';
 
 export const useCases = [
   {
-    label: 'Onboarding',
-    title: 'Faster onboarding for new developers',
+    title:
+      'Faster <span class="text-primary">onboarding</span> for new developers',
     description:
       'Mocking APIs significantly enhances the developer onboarding process by providing a stable and consistent environment for new team members. It helps new developers understand the system architecture and functionality more quickly, reducing the learning curve. Furthermore, it eliminates the need for managing security credentials and dealing with potential downtimes, making the onboarding process smoother and more efficient.',
     imgSrc: '/images/use-cases/api-mocking-speeds-up-developer-onboarding.svg',
@@ -14,8 +15,7 @@ export const useCases = [
     ctaLink: '/use-cases/faster-developer-onboarding/'
   },
   {
-    label: 'Development',
-    title: 'Speed up development lifecycle',
+    title: 'Speed up <span class="text-primary">development lifecycle</span>',
     description:
       'Mocking APIs accelerates your development lifecycle and reduces dependencies between your development teams, particularly the frontend and backend. It serves as a silver bullet when an API is still under development, allowing teams to work in parallel without waiting for the actual API to be ready. Additionally, it helps avoid reliance on external APIs that may experience downtimes or require security credentials, which can be impractical during development.',
     imgSrc: '/images/use-cases/api-mocking-speeds-up-development-lifecycle.svg',
@@ -24,8 +24,8 @@ export const useCases = [
     ctaLink: '/use-cases/speed-up-development-lifecycle/'
   },
   {
-    label: 'Integration',
-    title: 'Accelerate third-party API integration',
+    title:
+      'Accelerate third-party API <span class="text-primary">integration</span>',
     description:
       'With API mocking, you can begin working with third-party APIs almost immediately. Instead of registering for an account, configuring access, and provisioning tokens, you can mock the necessary API endpoints and start integrating them into your front-end or back-end application right away.',
     imgSrc: '/images/use-cases/accelerate-third-party-api-integration.svg',
@@ -34,8 +34,7 @@ export const useCases = [
     ctaLink: '/use-cases/accelerate-third-party-api-integration/'
   },
   {
-    label: 'Testing',
-    title: 'Enhance your integration testing',
+    title: 'Enhance your <span class="text-primary">integration testing</span>',
     description:
       'API mocking provides the flexibility needed to run complex integration tests for interconnected systems, microservices, or third-party API integrations. It enables you to perform faster and more comprehensive tests without relying on third-party services, covering more edge cases such as slower response times and random failures.',
     imgSrc:
@@ -45,8 +44,8 @@ export const useCases = [
     ctaLink: '/use-cases/enhanced-integration-testing/'
   },
   {
-    label: 'Design',
-    title: 'Better API design and user experience research',
+    title:
+      'Better <span class="text-primary">API design</span> and user experience research',
     description:
       "The design phase of an API can greatly benefit from API mocking, particularly when conducting user experience research or focus groups with potential users. It allows you to seamlessly and quickly change and refine the API contract without waiting for server deployment or the development team's availability.",
     imgSrc: '/images/use-cases/api-mocking-better-api-design-ux-research.svg',
@@ -55,8 +54,7 @@ export const useCases = [
     ctaLink: '/use-cases/better-api-design-ux-research/'
   },
   {
-    label: 'Demonstration',
-    title: 'More engaging client demos',
+    title: 'More engaging client <span class="text-primary">demos</span>',
     description:
       'Sometimes you need to make your APIs available to clients or users before they commit to using them. With API mocking, you can provide a simulation of the actual API for testing purposes without giving access to your product or provisioning credentials. Internal or pre-sales demos can also benefit from API mocking in the same way.',
     imgSrc:
@@ -82,53 +80,7 @@ export default function () {
 
       <section className='py-5 py-lg-10'>
         <div className='container text-lg-start text-center'>
-          {useCases.map((useCase, useCaseIndex) => {
-            return (
-              <div
-                className='row py-5 py-lg-8 align-items-center justify-content-between'
-                key={`feature${useCaseIndex}`}
-              >
-                <div
-                  className={`col-12 col-lg-5 pb-sm-10 pb-lg-0 ${
-                    useCaseIndex % 2 === 0 ? 'order-lg-2' : 'order-lg-1'
-                  }`}
-                >
-                  <span className='badge rounded-pill text-bg-primary-subtle mb-3'>
-                    <span className='h6 text-uppercase'>{useCase.label}</span>
-                  </span>
-
-                  <h3 className='h2 fw-bold'>{useCase.title}</h3>
-
-                  <div className='fs-lg text-gray-700'>
-                    {useCase.description}
-                  </div>
-                  <div>
-                    {useCase.cta && (
-                      <a
-                        className='btn btn-secondary-subtle btn-xs mt-5'
-                        href={useCase.ctaLink}
-                      >
-                        {useCase.cta}&nbsp;→
-                      </a>
-                    )}
-                  </div>
-                </div>
-                <div
-                  className={`col-12 col-lg-7 ${
-                    useCaseIndex % 2 === 0 ? 'order-lg-1' : 'order-lg-2'
-                  }`}
-                >
-                  <div className={`mb-6 mb-lg-0 text-center`}>
-                    <img
-                      src={useCase.imgSrc}
-                      alt={useCase.imgAlt}
-                      className='img-fluid w-lg-50'
-                    />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
+          <AlternatedFeatures features={useCases} imgClassName='w-lg-50' />
         </div>
       </section>