mirror of
https://github.com/outbackdingo/firezone.git
synced 2026-01-27 10:18:54 +00:00
feat(website): New landing page (#6178)
Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com> Co-authored-by: Jamil Bou Kheir <jamilbk@users.noreply.github.com>
This commit is contained in:
Patti
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"endOfLine": "lf",
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
|
||||
52
website/public/images/ComplianceBody.svg
Normal file
52
website/public/images/ComplianceBody.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 98 KiB |
46
website/public/images/ComplianceHeader.svg
Normal file
46
website/public/images/ComplianceHeader.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 150 KiB |
BIN
website/public/images/simple-demonstration.png
Normal file
BIN
website/public/images/simple-demonstration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
27
website/public/images/tailscale-logo.svg
Normal file
27
website/public/images/tailscale-logo.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="94" height="17" viewBox="0 0 94 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.87" clip-path="url(#clip0_149_478)">
|
||||
<path d="M2.54674 10.7278C3.67712 10.7278 4.59348 9.79876 4.59348 8.65272C4.59348 7.50669 3.67712 6.57764 2.54674 6.57764C1.41636 6.57764 0.5 7.50669 0.5 8.65272C0.5 9.79876 1.41636 10.7278 2.54674 10.7278Z" fill="#242424"/>
|
||||
<path d="M8.54674 10.7278C9.67712 10.7278 10.5935 9.79876 10.5935 8.65272C10.5935 7.50669 9.67712 6.57764 8.54674 6.57764C7.41636 6.57764 6.5 7.50669 6.5 8.65272C6.5 9.79876 7.41636 10.7278 8.54674 10.7278Z" fill="#242424"/>
|
||||
<path opacity="0.2" d="M2.54674 16.9566C3.67712 16.9566 4.59348 16.0275 4.59348 14.8815C4.59348 13.7354 3.67712 12.8064 2.54674 12.8064C1.41636 12.8064 0.5 13.7354 0.5 14.8815C0.5 16.0275 1.41636 16.9566 2.54674 16.9566Z" fill="#242424"/>
|
||||
<path opacity="0.2" d="M14.5467 16.9566C15.6771 16.9566 16.5935 16.0275 16.5935 14.8815C16.5935 13.7354 15.6771 12.8064 14.5467 12.8064C13.4164 12.8064 12.5 13.7354 12.5 14.8815C12.5 16.0275 13.4164 16.9566 14.5467 16.9566Z" fill="#242424"/>
|
||||
<path d="M8.54674 16.9566C9.67712 16.9566 10.5935 16.0275 10.5935 14.8815C10.5935 13.7354 9.67712 12.8064 8.54674 12.8064C7.41636 12.8064 6.5 13.7354 6.5 14.8815C6.5 16.0275 7.41636 16.9566 8.54674 16.9566Z" fill="#242424"/>
|
||||
<path d="M14.5467 10.7278C15.6771 10.7278 16.5935 9.79876 16.5935 8.65272C16.5935 7.50669 15.6771 6.57764 14.5467 6.57764C13.4164 6.57764 12.5 7.50669 12.5 8.65272C12.5 9.79876 13.4164 10.7278 14.5467 10.7278Z" fill="#242424"/>
|
||||
<path opacity="0.2" d="M2.54674 4.5054C3.67712 4.5054 4.59348 3.57635 4.59348 2.43031C4.59348 1.28427 3.67712 0.355225 2.54674 0.355225C1.41636 0.355225 0.5 1.28427 0.5 2.43031C0.5 3.57635 1.41636 4.5054 2.54674 4.5054Z" fill="#242424"/>
|
||||
<path opacity="0.2" d="M8.54674 4.5054C9.67712 4.5054 10.5935 3.57635 10.5935 2.43031C10.5935 1.28427 9.67712 0.355225 8.54674 0.355225C7.41636 0.355225 6.5 1.28427 6.5 2.43031C6.5 3.57635 7.41636 4.5054 8.54674 4.5054Z" fill="#242424"/>
|
||||
<path opacity="0.2" d="M14.5467 4.5054C15.6771 4.5054 16.5935 3.57635 16.5935 2.43031C16.5935 1.28427 15.6771 0.355225 14.5467 0.355225C13.4164 0.355225 12.5 1.28427 12.5 2.43031C12.5 3.57635 13.4164 4.5054 14.5467 4.5054Z" fill="#242424"/>
|
||||
<path d="M29.3707 15.6893C29.9502 15.6893 30.421 15.6343 30.9823 15.5241V13.3946C30.6382 13.5231 30.258 13.5599 29.8959 13.5599C29.0087 13.5599 28.6827 13.1192 28.6827 12.2748V7.94239H30.9823V5.81291H28.6827V2.6554H26.1477V5.81291H24.5V7.94239H26.1477V12.5134C26.1477 14.5328 27.1979 15.6893 29.3707 15.6893Z" fill="#242424"/>
|
||||
<path d="M34.9222 15.6893C36.2802 15.6893 37.1855 15.2304 37.6382 14.5145C37.6745 14.8266 37.7831 15.2488 37.928 15.5058H40.2094C40.0827 15.0652 39.9921 14.3676 39.9921 13.9087V8.87872C39.9921 6.80429 38.5255 5.62939 36.0448 5.62939C34.1616 5.62939 32.695 6.34535 31.8802 7.39173L33.3288 8.84199C33.9807 8.10768 34.8135 7.72217 35.8275 7.72217C37.0588 7.72217 37.602 8.14439 37.602 8.76855C37.602 9.30091 37.2399 9.66811 35.2843 9.66811C33.4012 9.66811 31.5 10.4574 31.5 12.6604C31.5 14.6981 32.9485 15.6893 34.9222 15.6893ZM35.4292 13.7434C34.4514 13.7434 33.9987 13.3212 33.9987 12.5686C33.9987 11.9077 34.5419 11.4671 35.4473 11.4671C36.8958 11.4671 37.2942 11.3753 37.602 11.0632V11.8526C37.602 12.899 36.7329 13.7434 35.4292 13.7434Z" fill="#242424"/>
|
||||
<path d="M41.5 4.58295H44.1436V2.1781H41.5V4.58295ZM41.5543 15.5058H44.0893V5.81291H41.5543V15.5058Z" fill="#242424"/>
|
||||
<path d="M46.5 15.5059H49.0349V2.47192H46.5V15.5059Z" fill="#242424"/>
|
||||
<path d="M53.8275 15.6893C56.616 15.6893 58.0465 14.2024 58.0465 12.642C58.0465 11.2285 57.3403 10.1821 55.0226 9.75982C53.393 9.46615 52.379 9.09895 52.379 8.52988C52.379 8.03425 52.9585 7.68545 53.9362 7.68545C54.8053 7.68545 55.5296 7.97918 56.0728 8.62167L57.6843 7.24487C56.8695 6.21685 55.5296 5.62939 53.9362 5.62939C51.4918 5.62939 49.9708 6.95115 49.9708 8.5666C49.9708 10.329 51.5641 11.1183 53.2844 11.4304C54.7148 11.6875 55.5115 11.9628 55.5115 12.5869C55.5115 13.1193 54.9502 13.5599 53.8819 13.5599C52.8317 13.5599 52.0169 13.0642 51.6366 12.33L49.5 13.358C50.0251 14.6797 51.8176 15.6893 53.8275 15.6893Z" fill="#242424"/>
|
||||
<path d="M63.5156 15.6893C65.3263 15.6893 66.63 14.9551 67.6078 13.3029L65.5798 12.2565C65.1995 13.0276 64.584 13.5599 63.5156 13.5599C61.9041 13.5599 61.0349 12.2382 61.0349 10.641C61.0349 9.04395 61.9584 7.75888 63.5156 7.75888C64.4934 7.75888 65.1452 8.29125 65.5255 9.09895L67.5715 7.99754C66.8835 6.47385 65.5255 5.62939 63.5156 5.62939C60.2021 5.62939 58.5 8.08932 58.5 10.641C58.5 13.413 60.5642 15.6893 63.5156 15.6893Z" fill="#242424"/>
|
||||
<path d="M71.9222 15.6893C73.2802 15.6893 74.1855 15.2304 74.6382 14.5145C74.6745 14.8266 74.7831 15.2488 74.928 15.5058H77.2094C77.0827 15.0652 76.9921 14.3676 76.9921 13.9087V8.87872C76.9921 6.80429 75.5255 5.62939 73.0448 5.62939C71.1617 5.62939 69.6951 6.34535 68.8802 7.39173L70.3288 8.84199C70.9807 8.10768 71.8135 7.72217 72.8275 7.72217C74.0588 7.72217 74.602 8.14439 74.602 8.76855C74.602 9.30091 74.2399 9.66811 72.2843 9.66811C70.4012 9.66811 68.5 10.4574 68.5 12.6604C68.5 14.6981 69.9485 15.6893 71.9222 15.6893ZM72.4292 13.7434C71.4514 13.7434 70.9987 13.3212 70.9987 12.5686C70.9987 11.9077 71.5419 11.4671 72.4473 11.4671C73.8958 11.4671 74.2942 11.3753 74.602 11.0632V11.8526C74.602 12.899 73.7329 13.7434 72.4292 13.7434Z" fill="#242424"/>
|
||||
<path d="M78.5 15.5059H81.035V2.47192H78.5V15.5059Z" fill="#242424"/>
|
||||
<path d="M87.3523 15.6893C89.2174 15.6893 90.7204 14.9367 91.5534 13.5966L89.6339 12.3483C89.1271 13.156 88.4572 13.5966 87.3523 13.5966C86.1036 13.5966 85.1979 12.899 84.9628 11.5406H92.1689V10.641C92.1689 8.08932 90.63 5.62939 87.3348 5.62939C84.202 5.62939 82.5 8.10768 82.5 10.6594C82.5 14.2942 85.1979 15.6893 87.3523 15.6893ZM85.0532 9.52123C85.4513 8.29125 86.2843 7.72217 87.3891 7.72217C88.6378 7.72217 89.3989 8.47483 89.6523 9.52123H85.0532Z" fill="#242424"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_149_478">
|
||||
<rect width="93" height="17" fill="white" transform="translate(0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
BIN
website/public/images/twingate-logo.png
Normal file
BIN
website/public/images/twingate-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
@@ -1,6 +1,6 @@
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="bg-neutral-900">
|
||||
<section className="bg-neutral-950">
|
||||
<div className="py-16 px-4 mx-auto max-w-screen-lg text-center lg:py-24 lg:px-6">
|
||||
<h1 className="inline tracking-tight font-semibold text-neutral-50 text-4xl sm:text-5xl md:text-7xl">
|
||||
Fueling a safer, smarter world,{" "}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Investors() {
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="my-auto p-2 bg-neutral-900">
|
||||
<div className="my-auto p-2 bg-neutral-950">
|
||||
<Link href={new URL("https://1984.vc")}>
|
||||
<Image
|
||||
src="/images/1984-logo.svg"
|
||||
|
||||
@@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
|
||||
export default function Mission() {
|
||||
return (
|
||||
<section className="pt-12 bg-neutral-900">
|
||||
<section className="pt-12 bg-neutral-950">
|
||||
<div className="py-8 px-4 mx-auto max-w-screen-lg text-center lg:py-16 lg:px-6 sm:text-lg">
|
||||
<h2 className="uppercase mb-14 justify-center md:text-5xl text-4xl tracking-tight font-semibold text-neutral-100 leading-none">
|
||||
Our mission
|
||||
|
||||
@@ -4,7 +4,7 @@ import Image from "next/image";
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="pt-14 flex flex-col">
|
||||
<div className="bg-neutral-900 mx-auto w-screen text-center">
|
||||
<div className="bg-neutral-950 mx-auto w-screen text-center">
|
||||
<Image
|
||||
alt="Firezone logo light"
|
||||
width={147}
|
||||
|
||||
@@ -3,7 +3,7 @@ import Image from "next/image";
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="pt-14 flex flex-col">
|
||||
<div className="bg-neutral-900 mx-auto w-screen text-center">
|
||||
<div className="bg-neutral-950 mx-auto w-screen text-center">
|
||||
<Image
|
||||
alt="Firezone logo light"
|
||||
width={147}
|
||||
|
||||
@@ -28,12 +28,15 @@ import {
|
||||
Strike,
|
||||
FadeIn,
|
||||
} from "@/components/Animations";
|
||||
import ElevatorPitch from "@/components/ElevatorPitch";
|
||||
import SpeedChart from "@/components/Animations/SpeedChart";
|
||||
import UpgradeDiagram from "@/components/Animations/UpgradeDiagram";
|
||||
import ComplianceDiagram from "@/components/Animations/ComplianceDiagram";
|
||||
import SimpleArchitecture from "@/components/Animations/SimpleArchitecture";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
import "@/styles/hero.css";
|
||||
import FeatureCards from "@/components/FeatureCards";
|
||||
import SingleFeature from "@/components/SingleFeature";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Firezone: Zero trust access that scales",
|
||||
@@ -44,19 +47,12 @@ export const metadata: Metadata = {
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-neutral-900 bg-hero pt-28 xl:pt-32">
|
||||
<section className="bg-neutral-950 bg-hero pt-28 xl:pt-32">
|
||||
<div className="flex flex-col items-center mx-auto md:px-0 px-4 max-w-screen-md">
|
||||
{/* <div className="absolute translate-y-16 justify-self-center self-center blur-[120px] bg-[rgba(94,82,239,0.5)] rounded-full w-[220px] h-[220px]" /> */}
|
||||
{/* <button className="flex w-fit mb-2 gap-2 text-xs items-center p-1.5 text-neutral-500 font-manrope font-500 border-[1px] rounded-full border-neutral-900 hover:text-neutral-200 transition-all ">
|
||||
<img src="/images/play-icon.svg" className="h-5 w-5" />
|
||||
<Link href="/blog">
|
||||
<p className="pe-4">Read our latest updates</p>
|
||||
</Link>
|
||||
</button> */}
|
||||
<h1
|
||||
className={
|
||||
manrope.className +
|
||||
" mb-8 text-5xl sm:text-6xl md:text-7xl text-center drop-shadow-[inset_0_2px_0_0_rgba(255,255,255,100)] font-medium tracking-tight leading-none bg-gradient-to-b from-white from-70% to-slate-200 text-transparent bg-clip-text"
|
||||
" mb-8 text-5xl sm:text-6xl md:text-7xl text-center drop-shadow-[inset_0_2px_0_0_rgba(255,255,255,100)] font-medium tracking-tight leading-tight bg-gradient-to-b from-white from-70% to-slate-200 text-transparent bg-clip-text"
|
||||
}
|
||||
>
|
||||
Upgrade your VPN to zero-trust access
|
||||
@@ -67,24 +63,24 @@ export default function Page() {
|
||||
}
|
||||
>
|
||||
Firezone is a fast, flexible VPN replacement built on WireGuard®
|
||||
that protects your workforce without tedious configuration.
|
||||
that protects your most valuable resources without tedious
|
||||
configuration.
|
||||
</h3>
|
||||
<div className="flex sm:flex-row flex-col-reverse items-center justify-center sm:gap-x-6 md:gap-x-12 mt-4 w-full">
|
||||
<div className="flex items-center my-4 mr-4">
|
||||
<button
|
||||
type="button"
|
||||
className="group text-neutral-300 inline-flex justify-center items-center py-2 md:text-lg text-md font-semibold border-b-2 border-neutral-200 hover:border-primary-450 hover:text-primary-450 duration-50 transform transition"
|
||||
<ActionLink
|
||||
size="lg"
|
||||
href="https://app.firezone.dev/sign_up"
|
||||
color="white"
|
||||
transitionColor="primary-450"
|
||||
>
|
||||
<Link href="https://app.firezone.dev/sign_up">
|
||||
Get started for free
|
||||
</Link>
|
||||
<HiArrowLongRight className="group-hover:text-primary-450 group-hover:translate-x-1 transition duration-50 group-hover:scale-110 transform ml-2 -mr-1 w-7 h-7" />
|
||||
</button>
|
||||
Get started for free
|
||||
</ActionLink>
|
||||
</div>
|
||||
<div className=" flex items-center w-full sm:w-fit">
|
||||
<button
|
||||
type="button"
|
||||
className="group shadow-primary-700 md:text-lg text-md sm:w-48 w-full inline-flex shadow-lg justify-center items-center md:py-3 py-2 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-1 hover:ring-primary-450 duration-50 transform transition"
|
||||
className="tracking-tight group shadow-primary-700 md:text-lg text-md sm:w-48 w-full inline-flex shadow-lg justify-center items-center md:py-3 py-2 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-1 hover:ring-primary-450 duration-50 transform transition"
|
||||
>
|
||||
<Link href="/contact/sales">Book a demo</Link>
|
||||
<HiArrowLongRight className="group-hover:translate-x-1 transition duration-50 group-hover:scale-110 transform ml-2 -mr-1 w-7 h-7" />
|
||||
@@ -111,102 +107,39 @@ export default function Page() {
|
||||
{/* TODO: ACLs for the rest of us */}
|
||||
|
||||
{/* Feature section 1: Secure access to your most sensitive resources in minutes. */}
|
||||
<section className="bg-white py-20 md:py-16">
|
||||
<div className="sm:mx-auto md:px-16 px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<h3 className=" tracking-tight font-bold inline-block">
|
||||
Supercharge your workforce in{" "}
|
||||
<span className="text-primary-450">minutes</span>.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
Replace your obsolete VPN with a modern zero trust upgrade. Firezone
|
||||
supports the workflows and access patterns you're already familiar
|
||||
with, so you can get started in minutes and incrementally adopt more
|
||||
zero-trust patterns over time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center px-4 mx-auto mt-8 md:mt-16 max-w-screen-lg">
|
||||
<UpgradeDiagram />
|
||||
</div>
|
||||
|
||||
<div className="items-stretch mx-auto mt-8 md:mt-16 gap-4 sm:gap-8 max-w-sm md:max-w-screen-lg grid md:grid-cols-3">
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={0.5}
|
||||
duration={1}
|
||||
className="flex flex-col p-4"
|
||||
>
|
||||
<h4 className="mb-2 md:mb-4 text-md sm:text-lg md:text-xl font-semibold tracking-tight text-primary-450 uppercase">
|
||||
Flexible
|
||||
</h4>
|
||||
<p className="text-md sm:text-lg md:text-xl tracking-tight md:text-justify">
|
||||
Control access to VPCs, subnets, hosts by IP or DNS, and even
|
||||
public SaaS apps.
|
||||
</p>
|
||||
</SlideIn>
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={0.75}
|
||||
duration={1}
|
||||
className="flex flex-col p-4"
|
||||
>
|
||||
<h4 className="mb-2 md:mb-4 text-md sm:text-lg md:text-xl font-semibold tracking-tight text-primary-450 uppercase">
|
||||
Secure
|
||||
</h4>
|
||||
<p className="text-md sm:text-lg md:text-xl tracking-tight md:text-justify">
|
||||
Users and groups automatically sync with your identity provider,
|
||||
so access is revoked as soon as employees leave.
|
||||
</p>
|
||||
</SlideIn>
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={1}
|
||||
duration={1}
|
||||
className="flex flex-col p-4"
|
||||
>
|
||||
<h4 className="mb-2 md:mb-4 text-md sm:text-lg md:text-xl font-semibold tracking-tight text-primary-450 uppercase">
|
||||
Granular
|
||||
</h4>
|
||||
<p className="text-md sm:text-lg md:text-xl tracking-tight md:text-justify">
|
||||
Restrict access even further with port-level rules that allow
|
||||
access to some services but not others, even on the same host.
|
||||
</p>
|
||||
</SlideIn>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<ActionLink
|
||||
className="text-md md:text-xl tracking-tight font-medium"
|
||||
href="/kb/deploy/resources"
|
||||
color="accent-500"
|
||||
>
|
||||
Protect your resources
|
||||
</ActionLink>
|
||||
</div>
|
||||
<section className="bg-white px-4 sm:px-8 md:px-16 py-20 md:py-16">
|
||||
<ElevatorPitch />
|
||||
<section className=" py-16 bg-white">
|
||||
<BattleCard />
|
||||
</section>
|
||||
<section className="relative py-24 bg-white">
|
||||
<FeatureCards />
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* Feature section 2: Achieve compliance in minutes, not weeks. */}
|
||||
<section className="bg-white py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<h3 className=" tracking-tight font-bold inline-block">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 place-content-center">
|
||||
Security
|
||||
</h6>
|
||||
<h3
|
||||
className={` tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
Achieve compliance{" "}
|
||||
<span className="text-primary-450">without </span>
|
||||
the headache.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
Connections are always end-to-end encrypted with keys that rotate
|
||||
daily, and are directly established between your Users and Gateways,
|
||||
so we can never see your data. Firezone's advanced Policy Engine
|
||||
logs who accessed what and when and can be configured to allow
|
||||
access only from certain countries, IPs, and timeframes, so you can
|
||||
easily demonstrate compliance with internal and external security
|
||||
audits.
|
||||
<div className="mx-auto px-4 max-w-screen-md ">
|
||||
<p className={`text-lg text-center text-pretty text-neutral-800`}>
|
||||
Connections are directly established and end-to-end encrypted with
|
||||
keys that rotate daily, so we can never see your data. Firezone's
|
||||
advanced Policy Engine logs who accessed what and when and can be
|
||||
configured to allow access only from certain countries, IPs, and
|
||||
timeframes, so you can easily demonstrate compliance with internal
|
||||
and external security audits.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -215,11 +148,7 @@ export default function Page() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8 md:mt-16">
|
||||
<ActionLink
|
||||
className=" text-md md:text-xl tracking-tight font-medium text-accent-500"
|
||||
href="/kb/architecture"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="/kb/architecture" border>
|
||||
Read about Firezone's architecture
|
||||
</ActionLink>
|
||||
</div>
|
||||
@@ -227,7 +156,12 @@ export default function Page() {
|
||||
|
||||
{/* Feature section 3: Add 2FA to WireGuard. */}
|
||||
<section className="bg-neutral-50 py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<div
|
||||
className={`sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center ${manrope.className}`}
|
||||
>
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 place-content-center">
|
||||
Authentication
|
||||
</h6>
|
||||
<h3 className=" tracking-tight font-bold inline-block">
|
||||
Add <span className="text-primary-450">two-factor </span>
|
||||
auth to WireGuard.
|
||||
@@ -235,7 +169,7 @@ export default function Page() {
|
||||
</div>
|
||||
|
||||
<div className="mx-auto px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
<p className={`text-lg text-center text-pretty text-neutral-800`}>
|
||||
Looking for 2FA for WireGuard? Look no further. Firezone integrates
|
||||
with any OIDC-compatible identity provider to consistently enforce
|
||||
multi-factor authentication across your workforce.
|
||||
@@ -255,26 +189,29 @@ export default function Page() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8 md:mt-16">
|
||||
<ActionLink
|
||||
className=" text-md md:text-xl tracking-tight font-medium"
|
||||
href="/kb/authenticate"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="/kb/authenticate">
|
||||
Connect your identity provider
|
||||
</ActionLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature section 4: Say goodbye to bandwidth problems. */}
|
||||
<section className="bg-neutral-900 text-neutral-50 py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<h3 className="tracking-tight font-bold inline-block">
|
||||
<section className="bg-neutral-950 text-neutral-50 py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 place-content-center">
|
||||
Lightweight
|
||||
</h6>
|
||||
<h3
|
||||
className={`tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
<Strike>Bandwidth problems.</Strike>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-8 px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
<p
|
||||
className={`text-lg text-neutral-300 text-center text-pretty -mt-3`}
|
||||
>
|
||||
Eliminate throughput bottlenecks that plague other VPNs. Firezone's
|
||||
load-balancing architecture scales horizontally to handle an
|
||||
unlimited number of connections to even the most bandwidth-intensive
|
||||
@@ -288,10 +225,9 @@ export default function Page() {
|
||||
|
||||
<div className="flex justify-center mt-4 md:mt-16">
|
||||
<ActionLink
|
||||
className=" text-md md:text-xl tracking-tight font-semibold "
|
||||
href="/kb/use-cases/scale-vpc-access"
|
||||
color="primary-450"
|
||||
transitionColor="white"
|
||||
transitionColor="primary-450"
|
||||
color="white"
|
||||
>
|
||||
Scale access to your VPCs
|
||||
</ActionLink>
|
||||
@@ -300,15 +236,20 @@ export default function Page() {
|
||||
|
||||
{/* Feature section 5: No more open firewall ports. */}
|
||||
<section className="bg-white py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<div
|
||||
className={`sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center ${manrope.className}`}
|
||||
>
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 place-content-center tracking-wide mb-2">
|
||||
setup
|
||||
</h6>
|
||||
<h3 className="tracking-tight font-bold inline-block">
|
||||
Say <span className="text-primary-450">goodbye</span> to firewall
|
||||
configuration.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
<div className="mx-auto px-4 max-w-screen-md -mt-3">
|
||||
<p className={`text-lg text-center text-pretty text-neutral-800 `}>
|
||||
Firezone securely punches through firewalls with ease, so keep those
|
||||
ports closed. Connections pick the shortest path and your attack
|
||||
surface is minimized, keeping your most sensitive resources
|
||||
@@ -321,11 +262,7 @@ export default function Page() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<ActionLink
|
||||
className="text-md md:text-xl tracking-tight font-medium"
|
||||
href="/kb/deploy"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="/kb/deploy">
|
||||
Make your resources invisible
|
||||
</ActionLink>
|
||||
</div>
|
||||
@@ -333,8 +270,13 @@ export default function Page() {
|
||||
|
||||
{/* Feature section 6: Runs everywhere your business does. */}
|
||||
<section className="bg-neutral-50 py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<h3 className="tracking-tight font-bold inline-block">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 place-content-center tracking-wide mb-2">
|
||||
Firezone everywhere
|
||||
</h6>
|
||||
<h3
|
||||
className={`tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
Runs <span className="text-primary-450">everywhere </span>
|
||||
your business does.
|
||||
</h3>
|
||||
@@ -387,17 +329,13 @@ export default function Page() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-auto">
|
||||
<p className="text-md md:text-xl tracking-tight md:text-justify">
|
||||
<p className="text-lg text-neutral-800">
|
||||
Clients are available for every major platform, require no
|
||||
configuration, and stay connected even when switching WiFi
|
||||
networks.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<ActionLink
|
||||
className="text-md md:text-xl tracking-tight font-medium text-accent-500"
|
||||
href="/kb/client-apps"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="/kb/client-apps">
|
||||
Download Client apps
|
||||
</ActionLink>
|
||||
</p>
|
||||
@@ -439,7 +377,7 @@ export default function Page() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<pre className="mt-4 md:mt-8 text-xs p-2 bg-neutral-900 rounded shadow text-neutral-50 text-wrap">
|
||||
<pre className="mt-4 md:mt-8 text-xs p-2 bg-neutral-950 rounded shadow text-neutral-50 text-wrap">
|
||||
<code>
|
||||
<strong>FIREZONE_TOKEN</strong>=<your-token> \<br /> ./
|
||||
<strong>firezone-gateway</strong>
|
||||
@@ -447,17 +385,13 @@ export default function Page() {
|
||||
</pre>
|
||||
</div>
|
||||
<div className="mt-auto">
|
||||
<p className="text-md md:text-xl tracking-tight md:text-justify">
|
||||
<p className="text-lg text-neutral-800">
|
||||
Gateways are lightweight Linux binaries you deploy anywhere you
|
||||
need access. Just configure a token with your preferred
|
||||
orchestration tool and you're done.
|
||||
need access. Just configure a token with your preferred tool and
|
||||
you're done.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<ActionLink
|
||||
className="text-md md:text-xl tracking-tight font-medium text-accent-500"
|
||||
href="/kb/deploy/gateways"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="/kb/deploy/gateways">
|
||||
Deploy your first Gateway
|
||||
</ActionLink>
|
||||
</p>
|
||||
@@ -468,15 +402,20 @@ export default function Page() {
|
||||
|
||||
{/* Feature section 7: Open source for transparency and trust. */}
|
||||
<section className="bg-white py-20 md:py-16">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty text-center">
|
||||
<h3 className="tracking-tight font-bold inline-block">
|
||||
<div className="sm:mx-auto px-4 mb-4 md:mb-8 text-3xl md:text-4xl lg:text-5xl text-pretty text-center">
|
||||
<h6 className="uppercase text-sm font-semibold place-content-center text-primary-450 tracking-wide mb-2">
|
||||
Open source
|
||||
</h6>
|
||||
<h3
|
||||
className={`tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
<span className="text-primary-450">Open source</span> for
|
||||
transparency and trust.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto px-4 max-w-screen-md">
|
||||
<p className="text-md md:text-xl text-center tracking-tight text-pretty">
|
||||
<p className="text-lg text-center -mt-3 text-neutral-800 text-pretty">
|
||||
How can you trust a zero-trust solution if you can't see its source?
|
||||
We build Firezone in the open so anyone can make sure it does
|
||||
exactly what we claim it does, and nothing more.
|
||||
@@ -498,11 +437,7 @@ export default function Page() {
|
||||
<RunaCap />
|
||||
</div>
|
||||
<div className="mx-auto w-64 mb-8 inline-flex justify-center">
|
||||
<ActionLink
|
||||
className="flex text-md md:text-xl tracking-tight font-medium text-accent-500"
|
||||
href="https://www.github.com/firezone/firezone"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink href="https://www.github.com/firezone/firezone">
|
||||
Leave us a star
|
||||
</ActionLink>
|
||||
</div>
|
||||
@@ -513,7 +448,7 @@ export default function Page() {
|
||||
{/* Use cases */}
|
||||
<section className="border-t border-neutral-200 py-20 md:py-16 bg-neutral-100">
|
||||
<div className="mx-auto max-w-screen-lg">
|
||||
<div className="px-4 flex flex-wrap">
|
||||
<div className={`px-4 flex flex-wrap ${manrope.className}`}>
|
||||
<h3 className="mb-2 text-2xl md:text-4xl tracking-tight font-bold mr-1">
|
||||
Yes, you can use Firezone to{" "}
|
||||
</h3>
|
||||
@@ -706,20 +641,12 @@ export default function Page() {
|
||||
</SlideIn>
|
||||
</div>
|
||||
<div className="flex justify-center mt-8 md:mt-16">
|
||||
<ActionLink
|
||||
className="text-md md:text-xl tracking-tight font-medium text-accent-500"
|
||||
href="/kb/use-cases"
|
||||
color="accent-500"
|
||||
>
|
||||
<ActionLink size="md" href="/kb/use-cases" color="accent-500">
|
||||
See more use cases
|
||||
</ActionLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-t border-neutral-200 py-24 bg-white">
|
||||
<BattleCard />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -184,7 +184,7 @@ export default function _Page() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-8 bg-neutral-900 text-neutral-50 rounded shadow border border-primary-450 mb-4">
|
||||
<div className="p-8 bg-neutral-950 text-neutral-50 rounded shadow border border-primary-450 mb-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="text-2xl tracking-tight font-semibold text-primary-450">
|
||||
Enterprise
|
||||
|
||||
@@ -3,7 +3,7 @@ import Image from "next/image";
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="pt-14 flex flex-col">
|
||||
<div className="bg-neutral-900 mx-auto w-screen text-center">
|
||||
<div className="bg-neutral-950 mx-auto w-screen text-center">
|
||||
<Image
|
||||
alt="Firezone logo light"
|
||||
width={147}
|
||||
|
||||
@@ -22,12 +22,7 @@ export default function EarlyAccess() {
|
||||
</h1>
|
||||
<p className="flex flex-wrap mb-4 text-lg text-neutral-800 sm:text-xl sm:justify-start justify-center">
|
||||
The early access program has ended.
|
||||
<ActionLink
|
||||
href="/blog/firezone-1-0"
|
||||
className="ml-1 font-medium text-accent-500 hover:no-underline underline"
|
||||
>
|
||||
Sign up now
|
||||
</ActionLink>
|
||||
<ActionLink href="/blog/firezone-1-0">Sign up now</ActionLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Image from "next/image";
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="pt-14 flex flex-col">
|
||||
<div className="bg-neutral-900 mx-auto w-screen text-center">
|
||||
<div className="bg-neutral-950 mx-auto w-screen text-center">
|
||||
<Image
|
||||
alt="Firezone logo light"
|
||||
width={147}
|
||||
|
||||
@@ -2,43 +2,64 @@ import Link from "next/link";
|
||||
import { Route } from "next";
|
||||
import { HiArrowLongRight } from "react-icons/hi2";
|
||||
|
||||
const Size = {
|
||||
xs: {
|
||||
link: "text-xs",
|
||||
icon: "ml-2 -mr-1 w-3 h-3",
|
||||
border: "border-b-[0.5px]",
|
||||
},
|
||||
sm: { link: "text-sm", icon: "ml-2 -mr-1 w-4 h-4", border: "border-b" },
|
||||
md: {
|
||||
link: "text-md",
|
||||
icon: "ml-2 -mr-1 w-5 h-5",
|
||||
border: "border-b-[1.5px]",
|
||||
},
|
||||
lg: { link: "text-lg", icon: "ml-2 -mr-1 w-6 h-6", border: "border-b-2" },
|
||||
xl: {
|
||||
link: "text-xl",
|
||||
icon: "ml-2 -mr-1 w-8 h-8",
|
||||
border: "border-b-[2.5px]",
|
||||
},
|
||||
};
|
||||
|
||||
type SizeKey = keyof typeof Size;
|
||||
|
||||
export default function ActionLink({
|
||||
size = "ml-2 -mr-1 w-6 h-6",
|
||||
size = "md",
|
||||
children,
|
||||
href,
|
||||
className,
|
||||
color,
|
||||
color = "accent-500",
|
||||
transitionColor,
|
||||
border = true,
|
||||
}: {
|
||||
size?: string;
|
||||
size?: SizeKey;
|
||||
children: React.ReactNode;
|
||||
href: Route<string>;
|
||||
className?: string;
|
||||
color?: string;
|
||||
transitionColor?: string;
|
||||
border?: boolean;
|
||||
}) {
|
||||
const linkClasses = `
|
||||
group inline-flex justify-center items-center py-2 font-semibold duration-50
|
||||
transform transition tracking-tight font-medium
|
||||
text-${color}
|
||||
${Size[size].link}
|
||||
${border && `${Size[size].border} border-b-${color}`}
|
||||
${(transitionColor && `hover:text-${transitionColor}`) || ""}
|
||||
${(border && transitionColor && `hover:border-${transitionColor}`) || ""}
|
||||
`;
|
||||
|
||||
const iconClasses = `
|
||||
group-hover:translate-x-1 group-hover:scale-110 duration-100 transform
|
||||
transition
|
||||
${Size[size].icon}
|
||||
${(transitionColor && `group-hover:text-${transitionColor}`) || ""}
|
||||
`;
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={`${className} group inline-flex justify-center
|
||||
items-center py-2 font-semibold border-b-[2px] ${
|
||||
"text-" + color
|
||||
} ${"border-" + color}
|
||||
${
|
||||
transitionColor === "white" &&
|
||||
"hover:text-neutral-100 hover:border-neutral-100"
|
||||
} duration-50 transform transition
|
||||
`}
|
||||
>
|
||||
<Link href={href} className={linkClasses}>
|
||||
{children}
|
||||
<HiArrowLongRight
|
||||
className={
|
||||
`${
|
||||
transitionColor === "white" && "group-hover:text-neutral-100"
|
||||
} group-hover:translate-x-1 group-hover:scale-110 duration-100 transform transition ` +
|
||||
size
|
||||
}
|
||||
/>
|
||||
<HiArrowLongRight className={iconClasses} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,262 +1,137 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { HiCheck, HiXMark } from "react-icons/hi2";
|
||||
import { HiArrowLongRight, HiCheck, HiXMark } from "react-icons/hi2";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
|
||||
export default function BattleCard() {
|
||||
export default function BattleCard2() {
|
||||
return (
|
||||
<div className="sm:mx-auto px-4 flex flex-col items-center">
|
||||
<h3 className="text-4xl md:text-6xl tracking-tight font-bold text-center mb-4 md:mb-8">
|
||||
See how Firezone compares
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide ">
|
||||
Features
|
||||
</h6>
|
||||
<h3
|
||||
className={` text-3xl md:text-4xl lg:text-5xl tracking-tight font-bold inline-block text-center my-2 ${manrope.className}`}
|
||||
>
|
||||
Why choose
|
||||
<span className="text-primary-450"> Firezone?</span>
|
||||
</h3>
|
||||
|
||||
<div className="mx-auto max-w-screen-md mb-4 md:mb-8">
|
||||
<p className="text-md md:text-xl sm:text-center tracking-tight">
|
||||
We're{" "}
|
||||
<span className="underline underline-offset-2">laser-focused</span> on
|
||||
building the best Zero Trust Access product available.{" "}
|
||||
<span className="text-primary-450">That's what we do.</span> That
|
||||
means we have <strong>more</strong> of the features your business
|
||||
needs and <i>less</i> of the ones you don't. And because of that,
|
||||
Firezone comes in at a{" "}
|
||||
<span className="text-primary-450">fraction of the cost</span> of our
|
||||
competitors. Don't believe us?{" "}
|
||||
<Link
|
||||
href="/contact/sales"
|
||||
className="underline underline-offset-2 hover:no-underline text-accent-500"
|
||||
>
|
||||
Contact sales
|
||||
</Link>{" "}
|
||||
to find out.
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
className={`text-lg text-center text-pretty text-neutral-800 mt-2 mb-16 `}
|
||||
>
|
||||
We're building the best Zero Trust Access product for a fraction of the
|
||||
cost of our competitors.
|
||||
</p>
|
||||
|
||||
<div className="max-w-screen-lg w-full px-0 sm:px-4">
|
||||
<div className="shadow-lg rounded mx-auto overflow-x-auto">
|
||||
<table className="border w-full text-left text-neutral-900 text-sm md:text-md lg:text-lg">
|
||||
<thead>
|
||||
<tr className="border-b bg-primary-50 border-primary-300">
|
||||
<th className="px-3 sm:px-6 py-3"></th>
|
||||
<th className="text-center px-3 sm:px-6 py-3">Twingate</th>
|
||||
<th className="text-center px-3 sm:px-6 py-3">Tailscale</th>
|
||||
<th className="text-center px-3 sm:px-6 py-3 bg-primary-200">
|
||||
<span className="flex justify-center items-center">
|
||||
<Image
|
||||
src="/images/logo-main-light.svg"
|
||||
width={50}
|
||||
height={50}
|
||||
alt="Firezone logo"
|
||||
className="w-9 mr-2"
|
||||
/>
|
||||
<span className="hidden sm:flex">Firezone</span>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">Open source</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">Partial</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Built on WireGuard®
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Load balancing
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">Partial</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Automatic failover
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
NAT hole-punching
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Resource-level access policies
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Google directory sync
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Entra directory sync
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Okta directory sync
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
JumpCloud directory sync
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">IPv6 support</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Automatic NAT64 and NAT46
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
DNS-based routing
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">Partial</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-neutral-50">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Mesh networking
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiXMark className="mx-auto text-red-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="px-3 sm:px-6 py-5 font-medium">
|
||||
Annual invoicing
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
<td className="text-center px-3 sm:px-6 py-5 bg-primary-100">
|
||||
<HiCheck className="mx-auto text-green-600 flex-shrink-0 w-6 h-6 md:w-8 md:h-8" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex w-full items-end justify-start lg:justify-center overflow-x-auto flex-shrink-0">
|
||||
<ul
|
||||
role="list"
|
||||
className={`text-sm md:text-md min-w-[180px] md:min-w-[300px]`}
|
||||
>
|
||||
<li className="px-6 h-14 place-content-center bg-neutral-100">
|
||||
Automatic NAT64 and NAT46
|
||||
</li>
|
||||
<li className="px-6 h-14 place-content-center w-full">
|
||||
Open source
|
||||
</li>
|
||||
<li className="px-6 h-14 place-content-center w-full bg-neutral-100">
|
||||
Built on WireGuard®
|
||||
</li>
|
||||
<li className="px-6 h-14 place-content-center w-full">
|
||||
IPv6 support
|
||||
</li>
|
||||
<li className="px-6 h-14 place-content-center w-full bg-neutral-100">
|
||||
DNS-based routing
|
||||
</li>
|
||||
<li className="h-20" />
|
||||
</ul>
|
||||
<ul
|
||||
role="list"
|
||||
className={`flex flex-col items-center border-[1px] border-primary-450 bg-primary-100 rounded-xl min-w-[200px]`}
|
||||
>
|
||||
<li className="h-[72px] flex justify-center items-center px-6 ">
|
||||
<Image
|
||||
width={150}
|
||||
height={150}
|
||||
src={"/images/logo-text-light.svg"}
|
||||
alt="Firezone Logo"
|
||||
className="flex w-32 sm:w-40 ml-2 mr-2 sm:mr-5"
|
||||
/>
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="py-3 h-20 ">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-accent-450 text-nowrap rounded-lg group lg:text-lg text-md inline-flex justify-center items-center lg:py-3 py-2 px-5 font-semibold text-center text-white hover:ring-1 hover:ring-accent-500 duration-50 transform transition"
|
||||
>
|
||||
<Link href="/contact/sales">Book a demo</Link>
|
||||
<HiArrowLongRight className="group-hover:translate-x-1 transition duration-50 group-hover:scale-110 transform ml-2 -mr-1 w-7 h-7" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
role="list"
|
||||
className={`flex flex-col items-center mb-[1px] min-w-[160px] md:min-w-[200px]`}
|
||||
>
|
||||
<li className="h-[72px] px-8 flex justify-center items-center font-bold tracking-tight text-slate-600">
|
||||
Tailscale
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
<HiXMark className="text-2xl text-red-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
Partial
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
Partial
|
||||
</li>
|
||||
<li className="h-20" />
|
||||
</ul>
|
||||
<ul
|
||||
role="list"
|
||||
className={`flex flex-col items-center mb-[1px] min-w-[160px] md:min-w-[200px]`}
|
||||
>
|
||||
<li className="h-[72px] px-8 flex justify-center items-center font-bold tracking-tight text-slate-600">
|
||||
Twingate
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
<HiXMark className="text-2xl text-red-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full ">
|
||||
<HiXMark className="text-2xl text-red-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
<HiXMark className="text-2xl text-red-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full">
|
||||
<HiXMark className="text-2xl text-red-600" />
|
||||
</li>
|
||||
<li className="h-14 flex justify-center items-center w-full bg-neutral-100">
|
||||
<HiCheck className="text-2xl text-green-600" />
|
||||
</li>
|
||||
<li className="h-20" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="text-neutral-900 text-center text-xs my-4">
|
||||
<i>Last updated: 07/14/2024</i>
|
||||
</p>
|
||||
|
||||
@@ -44,12 +44,7 @@ export default function SummaryCard({
|
||||
/>
|
||||
<span className="font-medium">{authorName}</span>
|
||||
</div>
|
||||
<ActionLink
|
||||
href={href}
|
||||
className="group inline-flex items-center font-medium text-accent-500 underline hover:no-underline"
|
||||
>
|
||||
Read more
|
||||
</ActionLink>
|
||||
<ActionLink href={href}>Read more</ActionLink>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
@@ -180,7 +180,7 @@ export function CustomerLogosColored() {
|
||||
</Link>
|
||||
<Link
|
||||
href="https://square1.io"
|
||||
className="mx-12 flex items-center bg-neutral-900 p-4 rounded"
|
||||
className="mx-12 flex items-center bg-neutral-950 p-4 rounded"
|
||||
>
|
||||
<Image
|
||||
alt="square1 logo"
|
||||
|
||||
120
website/src/components/ElevatorPitch/index.tsx
Normal file
120
website/src/components/ElevatorPitch/index.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, useState } from "react";
|
||||
import {
|
||||
HiMiniShieldCheck,
|
||||
HiMiniPresentationChartLine,
|
||||
} from "react-icons/hi2";
|
||||
import { HiLightningBolt, HiGlobe } from "react-icons/hi";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ElevatorPitch() {
|
||||
const [selectedOption, setSelectedOption] = useState(5);
|
||||
|
||||
const data = [
|
||||
{
|
||||
title: "Fast and lightweight.",
|
||||
desc: "Built on WireGuard® to be 3-4x faster than OpenVPN.",
|
||||
icon: <HiLightningBolt className="min-w-8 h-8 text-primary-400" />,
|
||||
},
|
||||
{
|
||||
title: "Scales with your business.",
|
||||
desc: "Automatic load balancing and failover with two or more Gateways.",
|
||||
icon: (
|
||||
<HiMiniPresentationChartLine className="min-w-8 h-8 text-primary-400" />
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Minimize your attack surface.",
|
||||
desc: "Firezone's hole-punching tech hides your resources from the internet.",
|
||||
icon: <HiMiniShieldCheck className="min-w-8 h-8 text-primary-400" />,
|
||||
},
|
||||
{
|
||||
title: "Open source for full transparency.",
|
||||
desc: "Our entire product is open-source, allowing anyone to audit the codebase.",
|
||||
icon: <HiGlobe className="min-w-8 h-8 text-primary-400" />,
|
||||
},
|
||||
];
|
||||
|
||||
interface OptionButtonProps {
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: ReactNode;
|
||||
index: number;
|
||||
}
|
||||
|
||||
const OptionButton = ({ title, desc, icon, index }: OptionButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
className={`flex flex-col lg:flex-row lg:w-full pointer-events-none rounded-xl
|
||||
items-start lg:items-center p-0 gap-4 border-[1px] justify-center
|
||||
lg:justify-start transition duration-200 ease-in-out
|
||||
${
|
||||
selectedOption == index
|
||||
? "bg-primary-50 border-primary-450"
|
||||
: "bg-transparent border-transparent hover:bg-primary-50 hover:border-primary-200"
|
||||
}`}
|
||||
onClick={() => setSelectedOption(index)}
|
||||
>
|
||||
{icon}
|
||||
<div>
|
||||
<p className="text-neutral-900 font-semibold text-md text-left mb-1.5">
|
||||
{title}
|
||||
</p>
|
||||
<p className="text-slate-700 text-left text-sm">{desc}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full lg:flex-row flex-col justify-center gap-6 lg:gap-16 xl:gap-36 items-center my-8 md:my-16">
|
||||
<div className="flex flex-col w-full h-full justify-between lg:w-[480px] xl:w-[580px]">
|
||||
<div>
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">
|
||||
Stay Connected
|
||||
</h6>
|
||||
<div className="mb-2 text-3xl md:text-4xl lg:text-5xl ">
|
||||
<h3
|
||||
className={`leading-tight text-pretty text-left tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
Supercharge your workforce
|
||||
<span className="text-primary-450"> in minutes.</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="max-w-screen-md">
|
||||
<p className={`text-lg text-left text-pretty text-neutral-800 `}>
|
||||
Firezone secures apps, services, networks and everything in
|
||||
between.
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-left text-pretty text-neutral-800">
|
||||
No ACL hell required.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:flex grid grid-cols-1 sm:grid-cols-2 lg:flex-col mt-16 space-y-6">
|
||||
{data.map((item, index) => (
|
||||
<OptionButton
|
||||
key={index}
|
||||
title={item.title}
|
||||
desc={item.desc}
|
||||
icon={item.icon}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-auto lg:max-w-[600px] overflow-hidden flex justify-center items-center rounded-xl lg:h-[600px] lg:w-[40%] bg-gradient-to-b from-[#FFF5ED] to-[#F2EEFE]">
|
||||
<Image
|
||||
src="/images/simple-demonstration.png"
|
||||
className="max-w-[600px] w-full lg:max-h-[400px] lg:object-cover rounded-lg"
|
||||
width={600}
|
||||
height={400}
|
||||
alt="Elevator pitch graphic"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
110
website/src/components/FeatureCards/index.tsx
Normal file
110
website/src/components/FeatureCards/index.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, useState } from "react";
|
||||
import { HiCloud, HiMiniPuzzlePiece, HiLockClosed } from "react-icons/hi2";
|
||||
import { SlideIn } from "@/components/Animations";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
import ActionLink from "../ActionLink";
|
||||
import UpgradeDiagram from "../Animations/UpgradeDiagram";
|
||||
|
||||
export default function FeatureCards() {
|
||||
return (
|
||||
<div className="flex w-full justify-center">
|
||||
<div className="flex flex-col items-center mx-auto">
|
||||
<div className="flex mb-8 lg:flex-row flex-col w-full items-start lg:items-end justify-between">
|
||||
<div className="">
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 lg:mb-4">
|
||||
built for you
|
||||
</h6>
|
||||
<div className="mb-4 lg:mb-0 text-3xl md:text-4xl lg:text-5xl w-[460px] lg:w-[600px]">
|
||||
<h3
|
||||
className={` text-pretty text-left leading-tight tracking-tight font-bold inline-block ${manrope.className}`}
|
||||
>
|
||||
Simplify access management
|
||||
<span className="text-primary-450"> with WireGuard.</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<p
|
||||
className={`text-lg mb-6 text-left text-pretty text-neutral-800 w-[400px] `}
|
||||
>
|
||||
Seamlessly manage thousands of lightweight tunnels to whatever
|
||||
resources you need, whenever.
|
||||
</p>
|
||||
<ActionLink href="/kb/deploy/resources">
|
||||
Protect your resources
|
||||
</ActionLink>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="relative w-[80%]">
|
||||
<div className="absolute left-1/2 -translate-x-1/2 translate-y-1/2 blur-[120px] bg-primary-400 rounded-full w-[220px] h-[220px]" />
|
||||
<UpgradeDiagram />
|
||||
</div> */}
|
||||
|
||||
<div className="mt-8 items-stretch mx-auto gap-4 md:max-w-screen-lg grid md:grid-cols-3">
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={0.5}
|
||||
duration={1}
|
||||
className="flex flex-col p-5 md:p-8 border-[1px] rounded-xl border-neutral-300"
|
||||
>
|
||||
<div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#FFE9EB] justify-center items-center mb-7">
|
||||
<HiCloud color="#EF7E88" className="w-6 h-6 lg:w-7 lg:h-7" />
|
||||
</div>
|
||||
<h4
|
||||
className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
|
||||
>
|
||||
Flexible
|
||||
</h4>
|
||||
<p className={`text-sm md:text-md semi-bold text-neutral-800`}>
|
||||
Control access to VPCs, subnets, hosts by IP or DNS, and even
|
||||
public SaaS apps.
|
||||
</p>
|
||||
</SlideIn>
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={0.75}
|
||||
duration={1}
|
||||
className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
|
||||
>
|
||||
<div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#E3F5FF] justify-center items-center mb-7">
|
||||
<HiLockClosed color="#719CF1" className="w-6 h-6 lg:w-7 lg:h-7" />
|
||||
</div>
|
||||
<h4
|
||||
className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
|
||||
>
|
||||
Secure
|
||||
</h4>
|
||||
<p className={`text-sm md:text-md semi-bold text-neutral-800`}>
|
||||
Users and groups automatically sync with your identity provider,
|
||||
so access is revoked immediately.
|
||||
</p>
|
||||
</SlideIn>
|
||||
<SlideIn
|
||||
direction="left"
|
||||
delay={1}
|
||||
duration={1}
|
||||
className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
|
||||
>
|
||||
<div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#EFEAFF] justify-center items-center mb-7">
|
||||
<HiMiniPuzzlePiece
|
||||
color="#B195FE"
|
||||
className="w-6 h-6 lg:w-7 lg:h-7"
|
||||
/>
|
||||
</div>
|
||||
<h4
|
||||
className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
|
||||
>
|
||||
Granular
|
||||
</h4>
|
||||
<p className={`text-sm md:text-md semi-bold text-neutral-800`}>
|
||||
Restrict access even further with port-level rules that control
|
||||
access to services, even on the same host.
|
||||
</p>
|
||||
</SlideIn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,54 +14,50 @@ import {
|
||||
LinuxIcon,
|
||||
AndroidIcon,
|
||||
} from "@/components/Icons";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="relative bg-neutral-900 py-16 md:px-16 px-4 text-neutral-500">
|
||||
<footer className="relative bg-neutral-950 py-16 md:px-16 px-4 text-neutral-500">
|
||||
<div className="flex flex-col justify-center items-center text-center">
|
||||
<h3 className="text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold">
|
||||
<h3
|
||||
className={`text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold ${manrope.className}`}
|
||||
>
|
||||
Ready to get started?
|
||||
</h3>
|
||||
<h4 className="text-neutral-200 text-md tracking-tight">
|
||||
<p className="text-neutral-200 text-md">
|
||||
Give your organization the protection it deserves.
|
||||
</h4>
|
||||
<div className="flex sm:flex-row flex-col justify-center sm:items-end items-center sm:w-fit w-full sm:gap-8 gap-4 my-8">
|
||||
<div className=" mx-auto px-4 md:px-0 ">
|
||||
</p>
|
||||
<div className="flex justify-center sm:gap-x-6 md:gap-x-12 mt-8 w-full">
|
||||
<div className="w-full sm:w-fit flex flex-col justify-between h-20">
|
||||
<button
|
||||
type="button"
|
||||
className="group md:text-lg text-md inline-flex md:w-48 w-full shadow-lg justify-center items-center py-2 md:py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-500 duration-50 transform transition"
|
||||
className="tracking-tight group shadow-primary-700 md:text-lg text-md sm:w-48 w-full inline-flex shadow-lg justify-center items-center md:py-3 py-2 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-1 hover:ring-primary-450 duration-50 transform transition"
|
||||
>
|
||||
<Link href="/contact/sales">Book a demo</Link>
|
||||
<HiArrowLongRight className="group-hover:translate-x-1 transition duration-50 group-hover:scale-110 transform ml-2 -mr-1 w-6 h-6" />
|
||||
<HiArrowLongRight className="group-hover:translate-x-1 transition duration-50 group-hover:scale-110 transform ml-2 -mr-1 w-7 h-7" />
|
||||
</button>
|
||||
<p className="mt-3 text-xs text-neutral-400">
|
||||
Get a personalized walkthrough of Firezone.
|
||||
<p className="text-xs text-neutral-200">
|
||||
Get a personalized walkthrough.
|
||||
</p>
|
||||
</div>
|
||||
<div className=" mx-auto ">
|
||||
<button
|
||||
type="button"
|
||||
className="group md:text-lg text-md md:w-48 w-full inline-flex justify-center items-center py-0 px-0 font-semibold text-center text-white rounded duration-50 transform transition"
|
||||
<div className="flex flex-col justify-between h-20">
|
||||
<ActionLink
|
||||
size="lg"
|
||||
href="https://app.firezone.dev/sign_up"
|
||||
color="white"
|
||||
transitionColor="primary-450"
|
||||
>
|
||||
<Link
|
||||
href="https://app.firezone.dev/sign_up"
|
||||
className="text-neutral-300 w-full group inline-flex justify-center
|
||||
items-center py-2 font-semibold border-b-[1px] border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
|
||||
>
|
||||
<p>Try Firezone for free</p>
|
||||
<HiArrowLongRight className="group-hover:text-primary-450 group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-6 h-6" />
|
||||
</Link>
|
||||
</button>
|
||||
<p className="mt-3 text-xs text-neutral-400">
|
||||
No credit card required. Cancel anytime.
|
||||
</p>
|
||||
Try Firezone for free
|
||||
</ActionLink>
|
||||
<p className="text-xs text-neutral-200">No credit card required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
|
||||
<div className="mx-auto w-full max-w-screen-xl md:p-4 p-2 py-6 lg:py-8">
|
||||
<div className="flex md:flex-row flex-col md:justify-between gap-12">
|
||||
<div className="flex md:flex-col justify-between">
|
||||
<div className="">
|
||||
<div>
|
||||
<Link href="/">
|
||||
<Image
|
||||
width={150}
|
||||
@@ -226,8 +222,9 @@ export default function Footer() {
|
||||
<div className="mt-4 sm:mt-0">
|
||||
<ActionLink
|
||||
href="https://probe.sh"
|
||||
size="ml-1 -mr-1 w-5 h-5"
|
||||
className="text-neutral-200 text-sm hover:underline hover:text-neutral-50"
|
||||
size="sm"
|
||||
color="white"
|
||||
transitionColor="primary-450"
|
||||
>
|
||||
Test your WireGuard connection
|
||||
</ActionLink>
|
||||
|
||||
@@ -69,7 +69,7 @@ const navbarThemeLight: CustomFlowbiteTheme["navbar"] = {
|
||||
|
||||
const navbarThemeDark: CustomFlowbiteTheme["navbar"] = {
|
||||
root: {
|
||||
base: "fixed top-0 left-0 right-0 z-50 text-neutral-200 items-center bg-neutral-900 px-2 py-2.5 sm:px-4 transition-shadow",
|
||||
base: "fixed top-0 left-0 right-0 z-50 text-neutral-200 items-center bg-neutral-950 px-2 py-2.5 sm:px-4 transition-shadow",
|
||||
rounded: {
|
||||
on: "rounded",
|
||||
off: "",
|
||||
@@ -122,7 +122,7 @@ const dropdownThemeLight: CustomFlowbiteTheme["dropdown"] = {
|
||||
arrow: {
|
||||
base: "absolute z-10 h-2 w-2 rotate-45",
|
||||
style: {
|
||||
dark: "bg-neutral-900 dark:bg-neutral-700",
|
||||
dark: "bg-neutral-950 dark:bg-neutral-700",
|
||||
light: "bg-white",
|
||||
auto: "bg-white",
|
||||
},
|
||||
@@ -139,7 +139,7 @@ const dropdownThemeLight: CustomFlowbiteTheme["dropdown"] = {
|
||||
icon: "mr-2 h-4 w-4",
|
||||
},
|
||||
style: {
|
||||
dark: "bg-neutral-900 text-white dark:bg-neutral-700",
|
||||
dark: "bg-neutral-950 text-white dark:bg-neutral-700",
|
||||
light: "border border-neutral-200 bg-white text-neutral-900",
|
||||
auto: "border border-neutral-200 bg-white text-neutral-900",
|
||||
},
|
||||
@@ -157,7 +157,7 @@ const dropdownThemeDark: CustomFlowbiteTheme["dropdown"] = {
|
||||
arrow: {
|
||||
base: "absolute z-10 h-2 w-2 rotate-45",
|
||||
style: {
|
||||
dark: "bg-neutral-900 dark:bg-neutral-700",
|
||||
dark: "bg-neutral-950 dark:bg-neutral-700",
|
||||
light: "bg-white",
|
||||
auto: "bg-white",
|
||||
},
|
||||
@@ -174,9 +174,9 @@ const dropdownThemeDark: CustomFlowbiteTheme["dropdown"] = {
|
||||
icon: "mr-2 h-4 w-4",
|
||||
},
|
||||
style: {
|
||||
dark: "bg-neutral-900 text-white dark:bg-neutral-700",
|
||||
light: "border border-neutral-700 bg-neutral-900 text-neutral-200",
|
||||
auto: "border border-neutral-700 bg-neutral-900 text-neutral-200",
|
||||
dark: "bg-neutral-950 text-white dark:bg-neutral-700",
|
||||
light: "border border-neutral-700 bg-neutral-950 text-neutral-200",
|
||||
auto: "border border-neutral-700 bg-neutral-950 text-neutral-200",
|
||||
},
|
||||
target: "w-fit",
|
||||
},
|
||||
@@ -242,7 +242,9 @@ function applyTheme(
|
||||
...theme,
|
||||
root: {
|
||||
...theme?.root,
|
||||
base: `${theme?.root?.base} ${scrollPosition > 0 ? "shadow" : "shadow-none"}`,
|
||||
base: `${theme?.root?.base} ${
|
||||
scrollPosition > 0 ? "shadow" : "shadow-none"
|
||||
}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
51
website/src/components/SingleFeature/index.tsx
Normal file
51
website/src/components/SingleFeature/index.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, useState } from "react";
|
||||
import { HiCloud, HiMiniPuzzlePiece, HiLockClosed } from "react-icons/hi2";
|
||||
import { SlideIn } from "@/components/Animations";
|
||||
import { manrope } from "@/lib/fonts";
|
||||
import ActionLink from "../ActionLink";
|
||||
import { Route } from "next";
|
||||
|
||||
interface SingleFeatureProps {
|
||||
title: string;
|
||||
boldedTitle?: string;
|
||||
desc: string;
|
||||
link: Route<string>;
|
||||
buttonDesc: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function SingleFeature({
|
||||
title,
|
||||
boldedTitle,
|
||||
desc,
|
||||
link,
|
||||
buttonDesc,
|
||||
children,
|
||||
}: SingleFeatureProps) {
|
||||
return (
|
||||
<div className="flex w-full justify-between items-center">
|
||||
{children}
|
||||
<div className="flex flex-col w-full h-full justify-between lg:w-[480px] xl:w-[580px]">
|
||||
<div className="mb-4 text-3xl md:text-4xl lg:text-5xl ">
|
||||
<h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">
|
||||
Stay Connected
|
||||
</h6>
|
||||
<h3 className=" text-pretty text-left tracking-tight font-bold inline-block">
|
||||
{title}
|
||||
<span className="text-primary-450"> {boldedTitle}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="max-w-screen-md">
|
||||
<p
|
||||
className={`text-md text-left text-pretty mb-12 text-neutral-600 font-medium ${manrope.className}`}
|
||||
>
|
||||
{desc}
|
||||
</p>
|
||||
<ActionLink href={link}>{buttonDesc}</ActionLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -44,6 +44,7 @@ const firezoneColors = {
|
||||
700: "#766a60",
|
||||
800: "#4c3e33",
|
||||
900: "#1b140e",
|
||||
950: "#050505",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user