Website/about (#2821)

Fixes firezone/gtm#222
This commit is contained in:
Jamil
2023-12-07 16:02:45 -05:00
committed by GitHub
parent acbb8bcf44
commit 97838f89e9
23 changed files with 458 additions and 66 deletions

View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="80px" viewBox="0 0 50 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group Copy</title>
<g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-L1-Copy-6" transform="translate(-40.000000, -40.000000)" fill="#FFFFFF">
<g id="Group-Copy" transform="translate(40.000000, 40.000000)">
<polygon id="Fill-1" points="0.981389474 0.304842105 0.981389474 3.03326316 7.87149474 3.03326316 7.87149474 25.5945263 0.981389474 25.5945263 0.981389474 28.4370526 18.3881263 28.4370526 18.3881263 25.5945263 11.2449684 25.5945263 11.2449684 0.304842105"/>
<path d="M39.3084656,1.24344979e-13 C45.2301498,1.24344979e-13 49.0250972,3.94863158 49.0250972,12.7924211 C49.0250972,26.9951663 41.6980862,28.4449078 35.4708486,28.5381627 L35.0831544,28.5423279 C35.0188028,28.5427621 34.9545895,28.5430749 34.8905242,28.5432791 L30.3223604,28.5435789 L30.3223604,25.6972632 L35.0419393,25.6972632 C39.2541498,25.6972632 45.5699393,25.1111579 45.5699393,14.5751579 L45.4187814,14.5751579 C44.2040446,16.7002105 41.8520446,17.9536842 38.6996235,17.9536842 C34.7901498,17.9536842 30.0832025,15.4858947 30.0832025,9.18568421 C30.0832025,3.90989474 33.8815183,1.24344979e-13 39.3084656,1.24344979e-13 Z M39.231413,2.88547368 C36.4221498,2.88547368 33.575413,4.74442105 33.575413,9.10989474 C33.575413,13.0193684 36.1964656,15.144 39.3084656,15.144 C42.6865709,15.144 45.1897288,13.0193684 45.1897288,9.10989474 C45.1897288,4.97305263 42.2293077,2.88547368 39.231413,2.88547368 Z" id="Path-2"/>
<path d="M9.66526316,50.8388632 C15.3136842,50.8388632 18.5730526,54.1744421 18.5730526,58.3811789 C18.5730526,61.8308632 16.3368421,64.2565474 13.9865263,65.0144421 L13.9865263,65.0906526 C16.4126316,65.6586526 19.3684211,67.7811789 19.3684211,72.0266526 C19.3684211,76.5365474 15.9953684,79.8721263 9.66526316,79.9483368 C3.336,80.0241263 -5.15143483e-14,76.6123368 -5.15143483e-14,72.0266526 C-5.15143483e-14,67.7811789 3.03284211,65.6586526 5.38273684,65.0906526 L5.38273684,65.0144421 C3.03284211,64.2565474 0.796631579,61.7925474 0.796631579,58.3811789 C0.796631579,54.1744421 4.01810526,50.8388632 9.66526316,50.8388632 Z M9.66526316,66.4927579 C6.48210526,66.4927579 3.52547368,68.1605474 3.52547368,71.8746526 C3.52547368,75.5891789 6.44421053,77.2194947 9.66526316,77.2194947 C13.0391579,77.2194947 15.8821053,75.5891789 15.8821053,71.8746526 C15.8821053,68.1605474 13.0012632,66.4927579 9.66526316,66.4927579 Z M9.66526316,53.5677053 C6.82315789,53.5677053 4.32126316,55.1976 4.32126316,58.6847579 C4.32126316,62.0961263 6.86105263,63.8013895 9.66526316,63.8013895 C12.4332632,63.8013895 15.0101053,62.0961263 15.0101053,58.6847579 C15.0101053,55.1976 12.4707368,53.5677053 9.66526316,53.5677053 Z" id="Path-3"/>
<polygon id="Fill-8" points="45.354192 69.5461474 45.354192 57.4695158 42.090613 57.4695158 42.090613 69.5899368 33.3369288 69.5899368 33.3369288 51.2126737 30.0733498 51.2126737 30.0733498 72.4316211 42.090613 72.4316211 42.090613 79.3389895 45.354192 79.3389895 45.354192 72.4316211 49.0350341 72.4316211 49.0350341 69.5461474"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<rect fill="#FB651E" x="0" y="0" width="256" height="256"></rect>
<path d="M119.373653,144.745813 L75.43296,62.4315733 L95.5144533,62.4315733 L121.36192,114.52416 C121.759575,115.452022 122.2235,116.413008 122.753707,117.407147 C123.283914,118.401285 123.747838,119.428546 124.145493,120.48896 C124.410597,120.886615 124.609422,121.251127 124.741973,121.582507 C124.874525,121.913886 125.007075,122.212123 125.139627,122.477227 C125.802386,123.802744 126.39886,125.095105 126.929067,126.354347 C127.459274,127.613589 127.923198,128.773399 128.320853,129.833813 C129.381268,127.580433 130.541078,125.1614 131.80032,122.57664 C133.059562,119.99188 134.351922,117.307747 135.67744,114.52416 L161.92256,62.4315733 L180.612267,62.4315733 L136.27392,145.739947 L136.27392,198.826667 L119.373653,198.826667 L119.373653,144.745813 Z" fill="#FFFFFF"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,54 @@
import Link from "next/link";
import { LinkedInIcon, GitHubIcon, XIcon } from "@/components/Icons";
export default function Contact() {
return (
<section className="border-t border-neutral-200 bg-neutral-100">
<div className="py-8 px-4 mx-auto max-w-screen-lg lg:py-16 lg:px-6">
<h2 className="text-2xl sm:text-3xl font-bold text-neutral-900 tracking-tight">
Contact us
</h2>
<table className="mt-8 text-left rounded">
<tr className="border-b border-neutral-200">
<td className="py-2 px-3">
<strong>Media Inquiries:</strong>
</td>
<td className="py-2 px-3">
<Link
href={new URL("mailto:media@firezone.dev")}
className="text-accent-500 hover:underline"
>
media@firezone.dev
</Link>
</td>
</tr>
<tr className="border-b border-neutral-200">
<td className="py-2 px-3">
<strong>Other Inquiries:</strong>
</td>
<td className="py-2 px-3">
<Link
href={new URL("mailto:support@firezone.dev")}
className="text-accent-500 hover:underline"
>
support@firezone.dev
</Link>
</td>
</tr>
<tr className="border-b border-neutral-200">
<td className="py-2 px-3">
<strong>Social:</strong>
</td>
<td className="py-2 px-3 flex space-x-2">
<XIcon url={new URL("https://x.com/firezonehq")} />
<GitHubIcon url={new URL("https://github.com/firezone")} />
<LinkedInIcon
url={new URL("https://linkedin.com/company/firezonehq")}
/>
</td>
</tr>
</table>
</div>
</section>
);
}

View File

@@ -0,0 +1,12 @@
export default function Hero() {
return (
<section className="bg-neutral-900">
<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-bold text-neutral-50 text-4xl sm:text-5xl md:text-7xl">
Fueling a safer, smarter world,{" "}
<span className="text-primary-450">one connection at a time.</span>
</h1>
</div>
</section>
);
}

View File

@@ -0,0 +1,85 @@
import Link from "next/link";
import Image from "next/image";
export default function Investors() {
return (
<section className="border-t border-neutral-200 bg-neutral-100">
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<h2 className="mb-14 justify-center md:text-5xl text-4xl tracking-tight font-extrabold text-neutral-900 leading-none">
INVESTORS
</h2>
<div className="pt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-12">
<div className="flex p-4">
<Link className="my-auto" href={new URL("https://ycombinator.com")}>
<Image
src="/images/yc-logo-square.svg"
alt="Y Combinator"
width={75}
height={75}
/>
</Link>
</div>
<div className="flex">
<div className="my-auto p-2 bg-neutral-900">
<Link href={new URL("https://1984.vc")}>
<Image
src="/images/1984-logo.svg"
alt="1984 Ventures"
width={50}
height={50}
className="mx-auto"
/>
</Link>
</div>
</div>
<div className="flex">
<Link className="my-auto" href={new URL("https://uncorrelated.vc")}>
<Image
src="/images/uncorrelated-logo.png"
alt="Uncorrelated Ventures"
width={200}
height={100}
/>
</Link>
</div>
<div className="flex">
<Link
className="my-auto"
href={new URL("https://helium-3ventures.com")}
>
<Image
src="/images/helium3-logo.png"
alt="Helium-3 Ventures"
width={200}
height={100}
/>
</Link>
</div>
<div className="flex">
<Link
className="my-auto"
href={new URL("https://aminocapital.com")}
>
<Image
src="/images/amino-logo.png"
alt="Amino Capital"
width={200}
height={100}
/>
</Link>
</div>
<div className="flex">
<Link className="my-auto" href={new URL("https://gaingels.com")}>
<Image
src="/images/gaingels-logo.png"
alt="Gaingels"
width={200}
height={100}
/>
</Link>
</div>
</div>
</div>
</section>
);
}

View File

@@ -0,0 +1,19 @@
import Link from "next/link";
export default function Mission() {
return (
<section className="pt-12 bg-neutral-900">
<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="mb-14 justify-center md:text-5xl text-4xl tracking-tight font-extrabold text-neutral-100 leading-none">
OUR MISSION
</h2>
<p className="mb-8 text-2xl tracking-tight text-neutral-100 sm:px-16 xl:px-32">
To reshape how humanity accesses computer resources, weaving{" "}
<span className="text-primary-500">simplicity</span> and{" "}
<span className="text-primary-500">security</span> into the fabric of
global connectivity.
</p>
</div>
</section>
);
}

View File

@@ -0,0 +1,23 @@
import Link from "next/link";
import Image from "next/image";
import Hero from "./hero";
import Story from "./story";
import Mission from "./mission";
import Principles from "./principles";
import Investors from "./investors";
import Team from "./team";
import Contact from "./contact";
export default function Page() {
return (
<>
<Hero />
<Story />
<Mission />
<Principles />
<Investors />
<Team />
<Contact />
</>
);
}

View File

@@ -0,0 +1,59 @@
export default function Principles() {
return (
<section className="pt-12 bg-neutral-100">
<div className="py-8 px-4 mx-auto max-w-screen-lg lg:py-16 lg:px-6">
<h2 className="mb-14 justify-center md:text-5xl text-4xl tracking-tight font-extrabold text-neutral-900 leading-none">
OUR PRINCIPLES
</h2>
<div className="pt-12 grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 className="text-lg tracking-tight font-semibold text-primary-500 leading-none">
TRANSPARENCY
</h3>
<p className="leading-6 tracking-tight text-lg py-8">
Always be open and honest with our customers, partners, and
employees. Never hide behind a wall of secrecy.
</p>
</div>
<div>
<h3 className="text-xl tracking-tight font-semibold text-primary-500 leading-none">
PRIVACY
</h3>
<p className="leading-6 tracking-tight text-lg py-8">
We maintain only the bare minimum of data required to operate the
Firezone product and never sell or share it with third parties.
</p>
</div>
<div>
<h3 className="text-lg tracking-tight font-semibold text-primary-500 leading-none">
COLLABORATION
</h3>
<p className="leading-6 tracking-tight text-lg py-8">
We work together to achieve our goals, and celebrate our successes
as a team. Everyone's voice is heard and respected.
</p>
</div>
<div>
<h3 className="text-lg tracking-tight font-semibold text-primary-500 leading-none">
SENSIBILITY
</h3>
<p className="leading-6 tracking-tight text-lg py-8">
We don't believe in hype or buzzwords. We believe in building
products that solve real problems for real people.
</p>
</div>
<div>
<h3 className="text-lg tracking-tight font-semibold text-primary-500 leading-none">
PLURALITY
</h3>
<p className="leading-6 tracking-tight text-lg py-8">
The best ideas come from a diverse set of backgrounds and
experiences. We strive to build a team that reflects the world we
live in.
</p>
</div>
</div>
</div>
</section>
);
}

View File

@@ -0,0 +1,108 @@
import Link from "next/link";
import Image from "next/image";
export default function Story() {
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="sm:text-lg">
<h2 className="mb-12 underline justify-center md:text-5xl text-4xl tracking-tight font-extrabold text-neutral-900 leading-none">
How it all started
</h2>
<p className="mb-12 text-2xl tracking-tight text-neutral-800 sm:px-16 xl:px-32">
Founded in 2021 by Jamil Bou Kheir and Jason Gong, Firezone
originally started as a side project to make it easier to use
WireGuard.{" "}
<span className="text-primary-500 font-medium">130 releases</span>{" "}
and <span className="text-primary-500 font-medium">15,000+</span>{" "}
users later, it's grown into something much more.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-12">
<div className="max-w-xl flex">
<Image
src="/images/story.png"
alt="Firezone story"
width={1000}
height={1000}
className="my-auto"
/>
</div>
<div className="max-w-xl">
<ol className="relative border-s border-neutral-400">
<li className="mb-12 ms-4">
<div className="absolute w-3 h-3 bg-neutral-400 rounded-full mt-1.5 -start-1.5 border border-white"></div>
<time className="mb-1 text-sm font-normal leading-none text-neutral-800">
April 2020
</time>
<h3 className="text-lg font-semibold text-neutral-800">
First commit
</h3>
<p className="mb-4 text-base font-normal text-neutral-800">
The{" "}
<Link
href={
new URL(
"https://github.com/firezone/firezone/tree/d049b006f6b530d8aa6f936441ffadd86e02a574"
)
}
className="hover:underline text-accent-500"
>
initial commit
</Link>{" "}
of the Firezone codebase is made.
</p>
</li>
<li className="ms-4">
<div className="absolute w-3 h-3 bg-neutral-400 rounded-full mt-1.5 -start-1.5 border border-white"></div>
<time className="mb-1 text-sm font-normal leading-none text-neutral-800">
September 2021
</time>
<h3 className="text-lg font-semibold text-neutral-800 ">
First public release
</h3>
<p className="mb-4 text-base font-normal text-neutral-800">
The first public release of Firezone is{" "}
<Link
className="hover:underline text-accent-500"
href={
new URL("https://news.ycombinator.com/item?id=28683231")
}
>
announced
</Link>{" "}
on Hacker News.
</p>
</li>
<li className="mb-12 ms-4">
<div className="absolute w-3 h-3 bg-neutral-400 rounded-full mt-1.5 -start-1.5 border border-white"></div>
<time className="mb-1 text-sm font-normal leading-none text-neutral-800">
October 2021
</time>
<h3 className="text-lg font-semibold text-neutral-800 ">
YC acceptance
</h3>
<p className="text-base font-normal text-neutral-800">
Firezone is accepted into YC's Winter 2022 batch.
</p>
</li>
<li className="ms-4">
<div className="absolute w-3 h-3 bg-neutral-400 rounded-full mt-1.5 -start-1.5 border border-white"></div>
<time className="mb-1 text-sm font-normal leading-none text-neutral-800">
April 2022
</time>
<h3 className="text-lg font-semibold text-neutral-800 ">
Funding
</h3>
<p className="text-base font-normal text-neutral-800">
Firezone graduates from the YC Winter 2022 batch and raises a
seed round.
</p>
</li>
</ol>
</div>
</div>
</div>
</section>
);
}

View File

@@ -1,20 +1,20 @@
import Link from "next/link";
import Image from "next/image";
import gravatar from "@/lib/gravatar";
import { LinkedInIcon, GitHubIcon, TwitterIcon } from "@/components/Icons";
import { LinkedInIcon, GitHubIcon, XIcon } from "@/components/Icons";
import Image from "next/image";
import Link from "next/link";
function renderTeamMember({
function teamMember({
name,
title,
imgSrc,
twitterUrl,
xUrl,
githubUrl,
linkedinUrl,
}: {
name: string;
title: string;
imgSrc: string;
twitterUrl?: URL;
xUrl?: URL;
githubUrl?: URL;
linkedinUrl?: URL;
}) {
@@ -33,9 +33,9 @@ function renderTeamMember({
</h3>
<span className="text-neutral-800 text-sm">{title}</span>
<ul className="flex justify-center space-x-4 mt-4">
{twitterUrl && (
{xUrl && (
<li>
<TwitterIcon url={twitterUrl} />
<XIcon url={xUrl} />
</li>
)}
{githubUrl && (
@@ -53,14 +53,13 @@ function renderTeamMember({
</div>
);
}
export default function Page() {
export default function Team() {
const team = [
{
name: "Jamil Bou Kheir",
title: "CEO/Founder",
imgSrc: gravatar("jamil@firezone.dev", 200),
twitterUrl: new URL("https://twitter.com/jamilbk"),
xUrl: new URL("https://x.com/jamilbk"),
githubUrl: new URL("https://github.com/jamilbk"),
linkedinUrl: new URL("https://linkedin.com/in/jamilbk"),
},
@@ -68,14 +67,14 @@ export default function Page() {
name: "Gabriel Steinberg",
title: "Senior Backend Engineer",
imgSrc: "/images/avatars/gabriel.png",
twitterUrl: new URL("https://twitter.com/tapingmemory"),
xUrl: new URL("https://x.com/tapingmemory"),
githubUrl: new URL("https://github.com/conectado"),
},
{
name: "Andrew Dryga",
title: "Founding Engineer",
imgSrc: "/images/avatars/andrew.jpg",
twitterUrl: new URL("https://twitter.com/andrew_dryga"),
xUrl: new URL("https://x.com/andrew_dryga"),
githubUrl: new URL("https://github.com/andrewdryga"),
linkedinUrl: new URL("https://linkedin.com/in/andrew-dryga-bb382557"),
},
@@ -90,7 +89,7 @@ export default function Page() {
name: "Thomas Eizinger",
title: "Distributed Systems Engineer",
imgSrc: "/images/avatars/thomas.jpeg",
twitterUrl: new URL("https://twitter.com/oetzn"),
xUrl: new URL("https://x.com/oetzn"),
githubUrl: new URL("https://github.com/thomaseizinger"),
linkedinUrl: new URL("https://www.linkedin.com/in/thomas-eizinger"),
},
@@ -98,7 +97,7 @@ export default function Page() {
name: "Roopesh Chander",
title: "Apple Platform Engineer",
imgSrc: gravatar("roop@roopc.net", 200),
twitterUrl: new URL("https://twitter.com/roopcnet"),
xUrl: new URL("https://x.com/roopcnet"),
githubUrl: new URL("https://github.com/roop"),
},
{
@@ -126,30 +125,29 @@ export default function Page() {
];
return (
<section className="bg-neutral-100 ">
<section className="border-t border-neutral-200 bg-neutral-100">
<div className="py-8 px-4 mx-auto max-w-screen-lg text-center lg:py-16 lg:px-6">
<div className="text-neutral-800 sm:text-lg ">
<h1 className="mb-14 justify-center md:text-6xl text-5xl tracking-tight font-extrabold text-neutral-900 leading-none">
Meet the Firezone team.
</h1>
<h2 className="mb-8 text-xl tracking-tight text-neutral-800 sm:px-16 xl:px-48">
{/* FIXME: Make this less fluffy */}
See the driving force behind Firezone -- a team dedicated to
crafting secure and accessible software for a connected world.
Committed to transparency and innovation, our diverse group of
experts collaborates seamlessly to empower users with reliable and
security-focused technology, redefining the way we connect in the
digital landscape.
<div className="border-b text-neutral-800 sm:text-lg">
<h2 className="mb-14 justify-center md:text-5xl text-4xl tracking-tight font-extrabold text-neutral-900 leading-none">
Meet the team.
</h2>
</div>
<div className="text-neutral-800 sm:text-lg ">
<h3 className="justify-center pb-4 pt-14 text-2xl tracking-tight font-bold text-neutral-900 border-b border-neutral-300">
THE FIREZONE TEAM
</h3>
<p className="mb-8 text-xl tracking-tight text-neutral-800 sm:px-16 xl:px-32">
Firezone is built by a global team of motivated individuals. Our
passion for security, reliability, and code quality permeates
everything we do, and since were open source, you can{" "}
<Link
href={new URL("https://github.com/firezone/firezone")}
className="hover:underline text-accent-500"
>
see for yourself
</Link>
. The team has experience building enterprise networking solutions
at companies like Cisco, Marqeta, Tailscale, and more.
</p>
</div>
<div className="mt-16 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8 lg:gap-16">
{team.map((person) => {
return renderTeamMember(person);
return teamMember(person);
})}
</div>
</div>

View File

@@ -12,7 +12,7 @@ export default function Page() {
return (
<Post
authorName="Jeff Spencer"
authorTitle="Interim Head of Marketing"
authorTitle="Head of Marketing"
authorEmail="jeff@firezone.dev"
title="Enterprises choose open source"
date="December 6, 2023"

View File

@@ -11,7 +11,7 @@ export default function Page() {
return (
<Post
authorName="Jeff Spencer"
authorTitle="Interim Head of Marketing"
authorTitle="Head of Marketing"
authorEmail="jeff@firezone.dev"
title="Secure remote access makes remote work a win-win"
date="November 17, 2023"

View File

@@ -206,6 +206,6 @@ Firezone:
Support us by:
- Starring our repo on [Github](https://github.com/firezone/firezone)
- Following us on Twitter at [@firezonehq](https://twitter.com/firezonehq)
- Following us on X at [@firezonehq](https://x.com/firezonehq)
- Following us on LinkedIn at
[@firezonehq](https://www.linkedin.com/company/firezonehq)

View File

@@ -1,3 +1,18 @@
import Image from "next/image";
export default function Layout({ children }: { children: React.ReactNode }) {
return <div className="pt-14 flex flex-col">{children}</div>;
return (
<div className="pt-14 flex flex-col">
<div className="bg-neutral-900 mx-auto w-screen text-center">
<Image
alt="Firezone logo light"
width={147}
height={92}
src="/images/logo-main-light-primary.svg"
className="py-12 mx-auto"
/>
</div>
{children}
</div>
);
}

View File

@@ -15,7 +15,7 @@ export default function Page() {
<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="justify-center mb-4 text-2xl font-extrabold text-center leading-none tracking-tight text-neutral-900 sm:text-4xl">
<h1 className="justify-center mb-4 text-2xl font-extrabold text-center leading-none tracking-tight text-neutral-900 sm:text-6xl">
Plans & Pricing
</h1>
</div>

View File

@@ -4,7 +4,7 @@ import Link from "next/link";
import Image from "next/image";
import ConsentPreferences from "@/components/ConsentPreferences";
import { LinkedInIcon, GitHubIcon, TwitterIcon } from "@/components/Icons";
import { LinkedInIcon, GitHubIcon, XIcon } from "@/components/Icons";
export default function Footer() {
return (
@@ -37,6 +37,11 @@ export default function Footer() {
Company
</h2>
<ul className="text-neutral-900 font-medium">
<li className="mb-4">
<Link href="/about" className="hover:underline">
About
</Link>
</li>
<li className="mb-4">
<Link href="/" className="hover:underline">
Home
@@ -52,11 +57,6 @@ export default function Footer() {
Blog
</Link>
</li>
<li className="mb-4">
<Link href="/team" className="hover:underline">
Team
</Link>
</li>
<li>
<Link
href="https://www.ycombinator.com/companies/firezone"
@@ -145,10 +145,10 @@ export default function Footer() {
</li>
<li className="mb-4">
<Link
href="https://twitter.com/firezonehq"
href="https://x.com/firezonehq"
className="hover:underline hover:text-neutral-900"
>
Twitter
X
</Link>
</li>
<li>
@@ -198,7 +198,7 @@ export default function Footer() {
</Link>
</span>
<div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
<TwitterIcon url={new URL("https://twitter.com/firezonehq")} />
<XIcon url={new URL("https://x.com/firezonehq")} />
<GitHubIcon url={new URL("https://github.com/firezone")} />
<LinkedInIcon
url={new URL("https://linkedin.com/company/firezonehq")}

View File

@@ -4,14 +4,12 @@ export function LinkedInIcon({ url }: { url: URL }) {
return (
<Link href={url} className="text-neutral-800 hover:text-neutral-900 ">
<svg
aria-hidden="true"
fill="currentColor"
className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
className="w-5 h-5 box-border fill-current"
viewBox="0 0 24 24"
>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="currentColor"
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
/>
</svg>
@@ -22,17 +20,15 @@ export function LinkedInIcon({ url }: { url: URL }) {
export function GitHubIcon({ url }: { url: URL }) {
return (
<Link href={url} className="text-neutral-800 hover:text-neutral-900 ">
<Link href={url} className="text-neutral-800 hover:text-neutral-900">
<svg
className="w-5 h-5"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
className="w-5 h-5 box-border fill-current"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
fill="currentColor"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
<span className="sr-only">GitHub account</span>
@@ -40,18 +36,20 @@ export function GitHubIcon({ url }: { url: URL }) {
);
}
export function TwitterIcon({ url }: { url: URL }) {
export function XIcon({ url }: { url: URL }) {
return (
<Link href={url} className="text-neutral-800 hover:text-neutral-900 ">
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
className="w-5 h-5 box-border fill-current"
viewBox="0 0 1200 1227"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
<path
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
fill="currentColor"
></path>
</svg>
<span className="sr-only">Twitter page</span>
<span className="sr-only">X page</span>
</Link>
);
}