Skip to content

Commit

Permalink
update deployment options section (#1824)
Browse files Browse the repository at this point in the history
  • Loading branch information
evisdrenova committed Apr 24, 2024
1 parent 36976fe commit 3bbbf1f
Show file tree
Hide file tree
Showing 8 changed files with 285 additions and 84 deletions.
131 changes: 50 additions & 81 deletions marketing/components/landing-page/DeploymentOptions.tsx
Original file line number Diff line number Diff line change
@@ -1,101 +1,70 @@
'use client';
import { GitHubLogoIcon } from '@radix-ui/react-icons';
import { ArrowRightIcon } from 'lucide-react';
import { ArrowTopRightIcon } from '@radix-ui/react-icons';
import Image from 'next/image';
import Link from 'next/link';
import posthog from 'posthog-js';
import { ReactElement } from 'react';
import { Button } from '../ui/button';

export default function DeploymentOptions(): ReactElement {
const deployOptions = [
{
name: 'Open Source',
description:
'Deploy Neosync on your infrastructure using Helm or Docker Compose.',
link: 'github.com/nucleuscloud/neosync',
image: '/images/osdeploy.svg',
},
{
name: 'Neosync Cloud',
description:
"Use Neosync's fully managed cloud to not worry about infrastructure and sign up now.",
link: 'https://app.neosync.dev',
image: '/images/nss.svg',
},
{
name: 'Neosync Managed',
description:
'Deploy the Neosync data plane in your infrastructure and keep your data in your VPC.',
link: 'https://calendly.com/evis1/30min',
image: '/images/manag.svg',
},
];

return (
<div className="px-6">
<div className="px-6 gap-6">
<div className="text-gray-900 font-semibold text-2xl lg:text-4xl font-satoshi text-center">
Flexible Deployment Options
</div>
<div className="text-md text-gray-700 font-satoshi font-semibold pt-10 lg:px-60 text-center">
Whether you decide to host Neosync yourself or use Neoysnc Cloud,
you&apos;ll get access to the same powerful features.
Choose the deployment option that works best for you and your needs.
</div>
<div className="flex flex-col lg:flex-row items-center justify-center pt-20 gap-4 o">
<div className="rounded-xl shadow-xl bg-[#1E1E24] text-white flex-flex-col">
<div className="flex flex-col gap-4 py-10">
<div className="flex flex-row gap-4 pt-20 justify-center">
{deployOptions.map((opt) => (
<Link
href={opt.link}
target="_blank"
key={opt.name}
className="flex flex-col gap-2 border rounded-xl shadow-xl p-6 bg-white w-full max-w-[300px] lg:max-w-[500px]h-[360px] hover:border-gray-400 items-center"
onClick={() =>
posthog.capture('user click', {
page: opt.name,
})
}
>
<Image
src={'/images/logo_dark_mode.svg'}
src={opt.image}
alt="NeosyncLogo"
className="w-5 object-scale-down ml-10"
width="64"
height="20"
width="178"
height="150"
className="w-[178px] h-[150px]"
/>
<div className="flex flex-row items-center gap-2 pl-10">
<div className="text-xl font-semibold">Neosync</div>
<div className="text-sm">Cloud</div>
</div>
<div className="text-sm pl-10">
Don&apos;t worry about infrastructure and sign up now
</div>
<Link href="https://app.neosync.dev" target="_blank">
<Button
className="px-6 w-[188px] ml-10"
variant="secondary"
onClick={() =>
posthog.capture('user click', {
page: 'deployment options app sign up',
})
}
>
Get Started Now <ArrowRightIcon className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
<Image
src={'/images/ss-dark-new.svg'}
alt="NeosyncLogo"
width="624"
height="280"
className="w-full rounded-b-xl"
/>
</div>
<div className="border border-gray-400 rounded-xl shadow-xl bg-white flex-flex-col overflow-hidden">
<div className="flex flex-col gap-4 py-10">
<Image
src={'/images/logo_light_mode.svg'}
alt="NeosyncLogo"
className="w-5 object-scale-down ml-10"
width="64"
height="20"
/>
<div className="flex flex-row items-center gap-2 pl-10">
<div className="text-xl font-semibold">Neosync</div>
<div className="text-sm">Open Source</div>
</div>
<div className="text-sm pl-10">
Deploy using a Helm Chart or Docker Compose file.
<div className="flex flex-row items-center gap-4 pt-6">
<div className="text-xl font-semibold text-al">{opt.name}</div>
<ArrowTopRightIcon />
</div>
<Button
className="px-6 w-[188px] ml-10"
variant="default"
onClick={() =>
posthog.capture('user click', {
page: 'deployment options open source',
})
}
>
<Link href="https://github.com/nucleuscloud/neosync">
<div className="flex flex-row gap-2">
<GitHubLogoIcon className="mr-2 h-5 w-5" /> Open Source
</div>
</Link>
</Button>
</div>
<Image
src={'/images/ss-light-new.svg'}
alt="NeosyncLogo"
width="624"
height="280"
className="w-full"
/>
</div>
<div className="text-sm text-gray-500">{opt.description}</div>
</Link>
))}
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions marketing/components/landing-page/Valueprops.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function ValueProps(): ReactElement {
link: '/solutions/fix-staging-environments',
},
{
title: 'Keep your environments in sync',
title: 'Keep environments in sync',
image: '/images/envsync3.svg',
link: '/solutions/keep-environments-in-sync',
},
Expand All @@ -33,7 +33,7 @@ export default function ValueProps(): ReactElement {
return (
<div>
<div className="text-gray-900 font-semibold text-2xl lg:text-4xl font-satoshi text-center">
Protect Your Sensitive Data, Build Faster with Neosync
Unblock Your Developers, Build Faster with Neosync
</div>
<div className="text-lg text-gray-400 font-satoshi font-light pt-20 flex flex-col md:flex-row lg:flex-row gap-6 justify-center items-center">
{features.map((item) => (
Expand All @@ -47,7 +47,7 @@ export default function ValueProps(): ReactElement {
});
}}
>
<div className="border border-gray-300 bg-white rounded-xl p-2 lg:p-4 xl:p-8 shadow-xl flex flex-col justify-between gap-6 text-center w-full max-w-[300px] lg:max-w-[400px] mx-auto h-[360px] hover:border-gray-400">
<div className="border border-gray-300 bg-white rounded-xl p-2 lg:p-4 xl:p-8 shadow-xl flex flex-col justify-between gap-6 text-center w-full max-w-[300px] lg:w-[270px] lg:max-w-[400px] mx-auto h-[360px] hover:border-gray-400">
<div>
<div className="flex justify-center">
<Image
Expand Down
101 changes: 101 additions & 0 deletions marketing/components/landing-page/old/oldDeploymentOptions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
'use client';
import { Button } from '@/components/ui/button';
import { ArrowRightIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
import Image from 'next/image';
import Link from 'next/link';
import posthog from 'posthog-js';
import { ReactElement } from 'react';

export default function DeploymentOptions(): ReactElement {
return (
<div className="px-6">
<div className="text-gray-900 font-semibold text-2xl lg:text-4xl font-satoshi text-center">
Flexible Deployment Options
</div>
<div className="text-md text-gray-700 font-satoshi font-semibold pt-10 lg:px-60 text-center">
Whether you decide to host Neosync yourself or use Neoysnc Cloud,
you&apos;ll get access to the same powerful features.
</div>
<div className="flex flex-col lg:flex-row items-center justify-center pt-20 gap-4 o">
<div className="rounded-xl shadow-xl bg-[#1E1E24] text-white flex-flex-col">
<div className="flex flex-col gap-4 py-10">
<Image
src={'/images/logo_dark_mode.svg'}
alt="NeosyncLogo"
className="w-5 object-scale-down ml-10"
width="64"
height="20"
/>
<div className="flex flex-row items-center gap-2 pl-10">
<div className="text-xl font-semibold">Neosync</div>
<div className="text-sm">Cloud</div>
</div>
<div className="text-sm pl-10">
Don&apos;t worry about infrastructure and sign up now
</div>
<Link href="https://app.neosync.dev" target="_blank">
<Button
className="px-6 w-[188px] ml-10"
variant="secondary"
onClick={() =>
posthog.capture('user click', {
page: 'deployment options app sign up',
})
}
>
Get Started Now <ArrowRightIcon className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
<Image
src={'/images/ss-dark-new.svg'}
alt="NeosyncLogo"
width="624"
height="280"
className="w-full rounded-b-xl"
/>
</div>
<div className="border border-gray-400 rounded-xl shadow-xl bg-white flex-flex-col overflow-hidden">
<div className="flex flex-col gap-4 py-10">
<Image
src={'/images/logo_light_mode.svg'}
alt="NeosyncLogo"
className="w-5 object-scale-down ml-10"
width="64"
height="20"
/>
<div className="flex flex-row items-center gap-2 pl-10">
<div className="text-xl font-semibold">Neosync</div>
<div className="text-sm">Open Source</div>
</div>
<div className="text-sm pl-10">
Deploy using a Helm Chart or Docker Compose file.
</div>
<Button
className="px-6 w-[188px] ml-10"
variant="default"
onClick={() =>
posthog.capture('user click', {
page: 'deployment options open source',
})
}
>
<Link href="https://github.com/nucleuscloud/neosync">
<div className="flex flex-row gap-2">
<GitHubLogoIcon className="mr-2 h-5 w-5" /> Open Source
</div>
</Link>
</Button>
</div>
<Image
src={'/images/ss-light-new.svg'}
alt="NeosyncLogo"
width="624"
height="280"
className="w-full"
/>
</div>
</div>
</div>
);
}
43 changes: 43 additions & 0 deletions marketing/public/images/mana.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3bbbf1f

Please sign in to comment.