Skip to content

Commit

Permalink
Update website copy
Browse files Browse the repository at this point in the history
  • Loading branch information
255kb committed Aug 14, 2024
1 parent 034052a commit 739b08b
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 211 deletions.
2 changes: 0 additions & 2 deletions components/account-header.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useRouter } from 'next/router';
import { FunctionComponent } from 'react';
import { useAuth } from '../utils/auth';

Expand All @@ -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 () => {
Expand Down
70 changes: 70 additions & 0 deletions components/alternated-features.tsx
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 4 additions & 1 deletion components/card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion components/mock-samples/cards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 9 additions & 8 deletions pages/cli.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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: [
Expand All @@ -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 →',
Expand Down
72 changes: 10 additions & 62 deletions pages/cloud.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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:
Expand All @@ -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',
Expand All @@ -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:
Expand Down Expand Up @@ -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>

Expand Down
Loading

0 comments on commit 739b08b

Please sign in to comment.