github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 18:18:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): landing page iteration 2 (#5753)

Browse Source
This commit is contained in:
Jamil
2024-07-05 01:14:07 -07:00
committed by GitHub
parent 2a2877a4d9
commit 90ea603584
6 changed files with 103 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/src/app/blog/layout.tsx
View File

@@ -13,6 +13,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
className="py-12 mx-auto"
/>
</div>
<div className="bg-neutral-50 border-b border-neutral-100">
<div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
Blog
</h1>
<p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
Announcements, how-tos, and more from the Firezone team.
</p>
</div>
</div>
{children}
<div className="bg-neutral-50 w-screen">
<div className="px-4 py-8 max-w-md md:max-w-screen-lg mx-auto">

8
website/src/app/blog/page.tsx
View File

@@ -14,13 +14,7 @@ export default function Page() {
return (
<section>
<div className="py-6 px-4 sm:py-8 sm:px-6 md:py-10 md:px-8 lg:py-12 lg:px-10 mx-auto max-w-screen-lg w-full">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight mt-8">
Blog
</h1>
<p className="text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
Announcements, insights, and more from the Firezone team.
</p>
<div className="mt-14 grid divide-y">
<div className="grid divide-y">
<SummaryCard
title="sans-IO: The secret to effective Rust for network services"
date="July 2, 2024"

80
website/src/app/page.tsx
View File

@@ -39,9 +39,11 @@ export default function Page() {
return (
<>
<section className="bg-neutral-100 pt-24">
<div className="px-4 py-8 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
<h1 className="mb-8 md:text-6xl text-5xl justify-center inline-block font-extrabold tracking-tight leading-none text-neutral-900">
Secure remote access.
<div className="px-4 py-8 mx-auto max-w-screen-xl lg:py-16 lg:px-12">
<h1 className="text-center mb-8 md:text-8xl text-5xl inline-block font-bold tracking-tight leading-none text-neutral-900">
<SlideIn direction="right" delay={0.0} className="md:inline-block">
Secure remote access.
</SlideIn>
<SlideIn
direction="left"
delay={0.5}
@@ -51,7 +53,7 @@ export default function Page() {
</SlideIn>
</h1>
<div className="max-w-screen-md mx-auto">
<h3 className="mb-8 text-xl tracking-tight justify-center font-medium text-neutral-900 inline-block">
<h3 className="text-center mb-8 text-xl tracking-tight font-medium text-neutral-900 inline-block">
Firezone is a fast, flexible VPN replacement built on WireGuard®
that{" "}
<span className="text-primary-450 font-bold">eliminates</span>{" "}
@@ -62,13 +64,13 @@ export default function Page() {
<div className="w-full max-w-screen-sm flex flex-wrap justify-between mt-8">
<button
type="button"
className="mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-200 duration-50 transform transition"
className="text-xl mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-200 duration-50 transform transition"
>
<Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
</button>
<button
type="button"
className="mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-300 duration-50 transform transition"
className="text-xl mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-300 duration-50 transform transition"
>
<Link href="/contact/sales">Book a demo</Link>
<HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
@@ -100,8 +102,8 @@ export default function Page() {
{/* Feature section 1: Secure access to your most sensitive resources in minutes. */}
<section className="bg-white py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
Upgrade to zero-trust access in{" "}
<span className="text-primary-450">minutes</span>.
</h3>
@@ -177,8 +179,8 @@ export default function Page() {
{/* Feature section 2: Achieve compliance in minutes, not weeks. */}
<section className="bg-white py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
Achieve compliance{" "}
<span className="text-primary-450">without </span>
the headache.
@@ -213,8 +215,8 @@ export default function Page() {
{/* Feature section 3: Add 2FA to WireGuard. */}
<section className="bg-neutral-50 py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
Add <span className="text-primary-450">two-factor </span>
auth to WireGuard.
</h3>
@@ -252,8 +254,8 @@ export default function Page() {
{/* Feature section 4: Say goodbye to bandwidth problems. */}
<section className="bg-neutral-900 text-neutral-50 py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
<Strike>Bandwidth problems.</Strike>
</h3>
</div>
@@ -283,8 +285,8 @@ export default function Page() {
{/* Feature section 5: No more open firewall ports. */}
<section className="bg-white py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
Say <span className="text-primary-450">goodbye</span> to firewall
configuration.
</h3>
@@ -315,8 +317,8 @@ export default function Page() {
{/* Feature section 6: Runs everywhere your business does. */}
<section className="bg-neutral-50 py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
Runs <span className="text-primary-450">everywhere </span>
your business does.
</h3>
@@ -448,8 +450,8 @@ export default function Page() {
{/* Feature section 7: Open source for transparency and trust. */}
<section className="bg-white py-8 md:py-16">
<div className="sm:mx-auto px-4 mb-2 md:mb-4 sm:text-center">
<h3 className="text-xl sm:text-2xl md:text-4xl tracking-tight font-bold inline-block">
<div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
<h3 className="text-xl sm:text-2xl md:text-6xl tracking-tight font-bold inline-block">
<span className="text-primary-450">Open source</span> for
transparency and trust.
</h3>
@@ -701,26 +703,36 @@ export default function Page() {
<section className="border-t border-neutral-200 py-24 bg-neutral-900">
<div className="flex flex-col px-4 justify-center items-center">
<h3 className="mb-4 text-4xl tracking-tight text-center font-bold text-neutral-50">
<h3 className="mb-4 text-2xl md:text-6xl tracking-tight text-center font-bold text-neutral-50">
Ready to get started?
</h3>
<h4 className="my-4 font-medium text-xl max-w-screen-md tracking-tight text-center text-neutral-200 ">
Give your team secure access to company resources in minutes.
</h4>
<div className="w-full max-w-screen-sm flex flex-wrap justify-between mt-8">
<button
type="button"
className="mx-auto mb-8 w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
>
<Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
</button>
<button
type="button"
className="mx-auto mb-8 w-64 inline-flex shadow-lg justify-center items-center 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"
>
<Link href="/contact/sales">Book a demo</Link>
<HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
</button>
<div className="mb-8 mx-auto w-64">
<button
type="button"
className="text-xl w-64 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-white hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
>
<Link href="https://app.firezone.dev/sign_up">Sign up now</Link>
</button>
<p className="mt-3 text-sm text-neutral-400">
No credit card required. Cancel anytime.
</p>
</div>
<div className="mx-auto w-64">
<button
type="button"
className="text-xl w-64 inline-flex shadow-lg justify-center items-center 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"
>
<Link href="/contact/sales">Book a demo</Link>
<HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
</button>
<p className="mt-3 text-sm text-neutral-400">
Get a personalized walkthrough of Firezone.
</p>
</div>
</div>
</div>
</section>

35
website/src/app/pricing/_page.tsx
View File

@@ -13,37 +13,24 @@ export default function _Page() {
return (
<>
<section className="bg-neutral-100">
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div className="mx-auto max-w-screen-md sm:text-center">
<h1 className="text-center justify-center mb-4 text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-none tracking-tight text-neutral-900">
Plans & Pricing
</h1>
<h2 className="text-center justify-center mb-8 tracking-tight text-neutral-900 md:mb-12 sm:text-2xl text-xl">
Pick a plan that best suits your needs. No credit card required to
sign up.
</h2>
</div>
</div>
</section>
<section className="bg-neutral-100 border-t border-neutral-200 pb-14">
<section className="bg-white pb-14">
<div className="flex justify-center mt-12">
<span
className={
(annual ? "text-neutral-600 " : "text-neutral-900 ") +
"font-medium me-3 text-lg"
(annual ? "text-neutral-500 " : "text-neutral-900 ") +
"font-medium me-3 text-lg uppercase"
}
>
MONTHLY
Monthly
</span>
<Toggle checked={annual} onChange={setAnnual} />
<span
className={
(annual ? "text-neutral-900 " : "text-neutral-600 ") +
"font-medium ms-3 text-lg"
(annual ? "text-neutral-900 " : "text-neutral-500 ") +
"font-medium ms-3 text-lg uppercase"
}
>
ANNUAL
Annual
<span className="text-sm text-neutral-700 text-primary-450">
{" "}
(Save 17%)
@@ -65,7 +52,7 @@ export default function _Page() {
<Link href="https://app.firezone.dev/sign_up">
<button
type="button"
className="w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
className="bg-white w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
>
Sign up
</button>
@@ -142,7 +129,7 @@ export default function _Page() {
<Link href="https://app.firezone.dev/sign_up">
<button
type="button"
className="w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
className="bg-white w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
>
Sign up
</button>
@@ -281,10 +268,10 @@ export default function _Page() {
</div>
</div>
</section>
<section className="py-24 bg-gradient-to-b to-white from-neutral-100 via-primary-100">
<section className="py-24 bg-gradient-to-b to-neutral-50 from-white">
<CustomerLogos />
</section>
<section className="bg-white py-14">
<section className="bg-neutral-50 py-14">
<div className="mb-14 mx-auto max-w-screen-lg px-3">
<h2 className="mb-14 justify-center text-4xl font-bold text-neutral-900">
Compare plans

11
website/src/app/pricing/layout.tsx
View File

@@ -12,6 +12,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
className="py-12 mx-auto"
/>
</div>
<div className="bg-neutral-50 border-b border-neutral-100">
<div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
<h1 className="justify-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
Plans & Pricing
</h1>
<p className="text-center text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
Pick a plan that best suits your needs. No credit card required to
sign up.
</p>
</div>
</div>
{children}
</div>
);

26
website/src/components/BattleCard/index.tsx
View File

@@ -1,13 +1,35 @@
import Link from "next/link";
import Image from "next/image";
import { HiCheck, HiXMark } from "react-icons/hi2";
export default function BattleCard() {
return (
<div className="sm:mx-auto px-4">
<h2 className="text-2xl md:text-4xl tracking-tight font-bold sm:justify-center mb-8 md:mb-16">
<h2 className="text-2xl md:text-6xl tracking-tight font-bold sm:justify-center mb-4 md:mb-8">
See how Firezone compares
</h2>
<div className="mx-auto px-4 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>
<div className="max-w-screen-lg mx-auto sm:px-8">
<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">
@@ -236,7 +258,7 @@ export default function BattleCard() {
</div>
<p className="text-neutral-900 text-right text-xs my-4">
<i>Last updated: 4/22/2024</i>
<i>Last updated: 06/28/2024</i>
</p>
</div>
</div>