diff --git a/website/public/images/access-onprem-network.png b/website/public/images/access-onprem-network.png new file mode 100644 index 000000000..431d2d4d2 Binary files /dev/null and b/website/public/images/access-onprem-network.png differ diff --git a/website/public/images/access-private-web-app.png b/website/public/images/access-private-web-app.png new file mode 100644 index 000000000..f0f4aa9c0 Binary files /dev/null and b/website/public/images/access-private-web-app.png differ diff --git a/website/public/images/block-malicious-dns.png b/website/public/images/block-malicious-dns.png new file mode 100644 index 000000000..1f9a60add Binary files /dev/null and b/website/public/images/block-malicious-dns.png differ diff --git a/website/public/images/manage-access-saas.png b/website/public/images/manage-access-saas.png new file mode 100644 index 000000000..488a1abb7 Binary files /dev/null and b/website/public/images/manage-access-saas.png differ diff --git a/website/public/images/resource-list.png b/website/public/images/resource-list.png new file mode 100644 index 000000000..9c557333e Binary files /dev/null and b/website/public/images/resource-list.png differ diff --git a/website/public/images/two-factor-graphic.svg b/website/public/images/two-factor-graphic.svg new file mode 100644 index 000000000..391da1c0e --- /dev/null +++ b/website/public/images/two-factor-graphic.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx index 87b1359b4..e18ca8256 100644 --- a/website/src/app/page.tsx +++ b/website/src/app/page.tsx @@ -35,6 +35,7 @@ import "@/styles/hero.css"; import CustomerTestimonials from "@/components/CustomerTestimonials"; import FeatureCards from "@/components/FeatureCards"; import SingleFeature from "@/components/SingleFeature"; +import UseCaseCards from "@/components/UseCaseCards"; export const metadata: Metadata = { title: "Firezone: Zero trust access that scales", @@ -165,13 +166,13 @@ export default function Page() { } /> -
+
Flexible security

Runs everywhere your business does @@ -307,13 +308,13 @@ export default function Page() {

{/* Feature section: Open source for transparency and trust. */} -
+
Open source

Open source for transparency and trust @@ -358,213 +359,7 @@ export default function Page() { - {/* Use cases */} -
-
-
-

- Yes, you can use Firezone to{" "} -

-

- -

-
-
-

- Here are just a few ways customers are using Firezone: -

-
-
- -
-
- -

- VPN Replacement -

-
-

- Remote employees can securely access office networks, cloud - VPCs, and other private subnets and resources from anywhere in - the world, on any device. -

-
    -
  • - - - Easy to use, no training required - -
    • -
  • - - - Authenticate with virtually any IdP - -
    • -
  • - - - Highly available Gateways - -
    • -
  • - - - Modern encryption and authentication - -
    • -
-
- - -
-
- -

- Infrastructure Access -

-
-

- Empower engineers and DevOps to manage their team’s access to - technical resources like test/prod servers both on-prem and in - the cloud. -

-
    -
  • - - - Service accounts and headless clients - -
    • -
  • - - - Multiple admins per account - -
    • -
  • - - - Docker and Terraform integrations - -
    • -
  • - - - Automatically sync users and groups from your IdP - -
    • -
-
- - -
-
- -

- Internet Security -

-
-

- Route sensitive internet traffic through a trusted gateway to - keep remote employees more secure, even when they’re traveling - or using public WiFi. -

-
    -
  • - - - Native clients for all major platforms - -
    • -
  • - - - Enforce MFA / 2FA - -
    • -
  • - - - Filter malicious or unwanted DNS requests - -
    • -
  • - - - Monitor and audit each attempted connection - -
    • -
-
- - -
-
- -

- Homelab Access -

-
-

- Securely access your home network, and services like Plex, - security cameras, a Raspberry Pi, and other self-hosted apps - when you’re away from home. -

-
    -
  • - - - Easy to setup and simple to manage - -
    • -
  • - - - Authenticate with Email OTP or OIDC - -
    • -
  • - - - Reliable NAT traversal - -
    • -
  • - - - Invite friends and family to your private network - -
    • -
-
- -
-
- - See more use cases - -
-
-
+ diff --git a/website/src/components/CustomerTestimonials/index.tsx b/website/src/components/CustomerTestimonials/index.tsx index 6288bab5d..042c88e16 100644 --- a/website/src/components/CustomerTestimonials/index.tsx +++ b/website/src/components/CustomerTestimonials/index.tsx @@ -123,7 +123,7 @@ export default function CustomerTestimonials() { }; return ( -
+
diff --git a/website/src/components/ElevatorPitch/index.tsx b/website/src/components/ElevatorPitch/index.tsx index 2a1aaf447..38ba3200f 100644 --- a/website/src/components/ElevatorPitch/index.tsx +++ b/website/src/components/ElevatorPitch/index.tsx @@ -79,7 +79,7 @@ export default function ElevatorPitch() { Stay Connected

Supercharge your workforce in minutes. diff --git a/website/src/components/UseCaseCards/index.tsx b/website/src/components/UseCaseCards/index.tsx new file mode 100644 index 000000000..a7903bcce --- /dev/null +++ b/website/src/components/UseCaseCards/index.tsx @@ -0,0 +1,184 @@ +import Link from "next/link"; +import Image from "next/image"; +import { HiArrowLongRight, HiCheck, HiXMark } from "react-icons/hi2"; +import { manrope } from "@/lib/fonts"; +import { Route } from "next"; + +function CardHeading({ children }: { children: React.ReactNode }) { + return ( +

+ {children} +

+ ); +} + +function Card({ + narrow, + children, +}: { + narrow?: boolean; + children: React.ReactNode; +}) { + const container = ` + shadow-lg relative flex justify-center rounded-3xl min-h-[440px] p-8 overflow-hidden + ${narrow ? "lg:col-span-7 bg-accent-200" : "lg:col-span-9 bg-primary-200"}`; + + return
{children}
; +} + +function Button({ text, href }: { text: string; href: Route | URL }) { + return ( + + + + ); +} + +export default function UseCaseCards() { + return ( +
+
+

+ One product. Endless possibilities.{" "} + Zero hassle. +

+
+ +
+ Scale access to cloud Resources. +

+ 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 services. +

+
+ Resource List + + +
+ Two-Factor Graphic + Add two-factor auth to WireGuard. +

+ 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. +

+
+ + + Manage access to SaaS graphic +
+
+ Manage access to a SaaS app +

+ Manage access to a third-party SaaS app like HubSpot or + GitHub. +

+
+
+ + + Access on-prem network graphic +
+
+ Access an on-prem network +

+ 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 invisible to attackers. +

+
+
+ + +
+ Block malicious DNS +

+ Use Firezone to improve your team's Internet security by + blocking DNS queries to known malicious domains. +

+
+ Block Malicious DNS + + +
+ Private web app graphic + Access a private web app +

+ Secure access to a privately hosted web application like GitLab + or Metabase. +

+
+ +
+
+
+ ); +} diff --git a/website/tailwind.config.js b/website/tailwind.config.js index 0378088d4..9067686ae 100644 --- a/website/tailwind.config.js +++ b/website/tailwind.config.js @@ -58,6 +58,10 @@ module.exports = { ], theme: { extend: { + gridTemplateColumns: { + // Simple 16 column grid + 16: "repeat(16, minmax(0, 1fr))", + }, typography: ({ theme }) => ({ firezone: { css: {