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

chore(website): Add hero texture, adjust copy (#5909)

Browse Source
This commit is contained in:
Jamil
2024-07-18 13:22:48 -07:00
committed by GitHub
parent f0b4ce45a2
commit bf693ad83f
2 changed files with 91 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,6 +33,7 @@ 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 "@/styles/hero.css";
export const metadata: Metadata = {
title: "Firezone: Zero trust access that scales",
@@ -43,95 +44,99 @@ export const metadata: Metadata = {
export default function Page() {
return (
<>
<section className="bg-neutral-900 pt-32 md:pt-48 pb-14 md:pb-22">
<div className="md:flex md:flex-wrap mx-auto max-w-screen-xl px-8 mb-8 md:mb-16">
<div className="md:w-2/3 px-4">
<h1 className="mb-8 md:text-7xl text-4xl inline-block font-semibold tracking-tight leading-none text-neutral-200">
<SlideIn
direction="right"
delay={0.0}
className="md:inline-block"
>
Secure, remote access.
</SlideIn>
<SlideIn
direction="left"
delay={0.25}
className="text-primary-450 underline md:inline-block"
>
That scales.
</SlideIn>
</h1>
<div className="flex items-center">
<SlideIn delay={0.5} direction="top" className="mr-4">
<Image
src="/images/ross-oss.svg"
width={250}
height={100}
alt="Ross OSS"
className="bg-neutral-50 rounded shadow shadow-neutral-300"
/>
</SlideIn>
<SlideIn delay={0.75} direction="top">
<Link href="https://www.ycombinator.com/companies/firezone">
<section className="hero-background">
<div className="pt-24 md:pt-32 xl:pt-48 pb-14 md:pb-24 xl:pb-36 bg-gradient-to-br from-neutral-900/10 to-neutral-900/10 via-primary-700/10">
<div className="md:flex md:flex-wrap mx-auto max-w-screen-xl px-8 mb-8 md:mb-16 lg:mb-22 xl:mb-28">
<div className="md:w-2/3 px-4">
<h1 className="mb-8 inline-block font-medium tracking-tight leading-none text-neutral-200">
<SlideIn
direction="right"
delay={0.0}
className="md:text-7xl text-4xl md:block"
>
Zero-trust access
</SlideIn>
<SlideIn
direction="left"
delay={0.25}
className="md:text-4xl text-2xl text-primary-450 underline underline-offset-4 md:block"
>
For humans.
</SlideIn>
</h1>
<div className="flex items-center">
<SlideIn delay={0.5} direction="top" className="mr-4">
<Image
width={125}
height={125}
src="/images/yc-logo.svg"
alt="YC Logo"
src="/images/ross-oss.svg"
width={250}
height={100}
alt="Ross OSS"
className="bg-neutral-50 rounded shadow shadow-neutral-300"
/>
</Link>
</SlideIn>
</div>
</div>
<div className="md:w-1/3 px-4 my-auto">
<h3 className="md:mt-0 my-4 text-xl tracking-tight font-medium text-neutral-200 inline-block">
Firezone is a fast, flexible VPN replacement built on WireGuard®
that{" "}
<span className="text-primary-450 font-semibold inline-block">
simplifies
</span>{" "}
access management for a{" "}
<span className="text-primary-450 font-semibold">fraction</span>{" "}
of the cost.
</h3>
<div className="flex flex-wrap justify-between mt-4">
<div className="my-4 mr-4 flex items-center">
<Link
href="https://app.firezone.dev/sign_up"
className="group inline-flex items-center py-0.5 text-neutral-200 text-lg font-semibold border-b-2 border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
>
Sign up now
<HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
</Link>
</SlideIn>
<SlideIn delay={0.75} direction="top">
<Link href="https://www.ycombinator.com/companies/firezone">
<Image
width={125}
height={125}
src="/images/yc-logo.svg"
alt="YC Logo"
className="bg-neutral-50 rounded shadow shadow-neutral-300"
/>
</Link>
</SlideIn>
</div>
<div className="my-4 flex items-center">
<button
type="button"
className="group shadow-lg shadow-primary-700 text-lg w-48 inline-flex shadow-lg justify-center items-center py-3 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 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
</button>
</div>
<div className="md:w-1/3 px-4 my-auto">
<h3 className="md:mt-0 my-4 text-xl tracking-tight font-medium text-neutral-200 inline-block">
Firezone is a fast, flexible VPN replacement built on
WireGuard® that{" "}
<span className="text-primary-450 font-semibold inline-block">
conceals
</span>{" "}
your apps and networks{" "}
<span className="text-primary-450 font-semibold inline-block">
without
</span>{" "}
tedious configuration.
</h3>
<div className="flex flex-wrap justify-between mt-4">
<div className="my-4 mr-4 flex items-center">
<Link
href="https://app.firezone.dev/sign_up"
className="group inline-flex items-center py-0.5 text-neutral-200 text-lg font-semibold border-b-2 border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
>
Sign up now
<HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
</Link>
</div>
<div className="my-4 flex items-center">
<button
type="button"
className="group shadow-lg shadow-primary-700 text-lg w-48 inline-flex shadow-lg justify-center items-center py-3 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 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
</button>
</div>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center px-4 md:px-0">
<video
className="shadow-lg rounded"
width="960"
height="540"
loop
autoPlay
playsInline
muted
>
<source src="/images/overview-screencap.webm" type="video/webm" />
Your browser does not support the video tag with WebM-formatted
videos.
</video>
<div className="flex items-center justify-center px-4 md:px-0">
<video
className="shadow-lg rounded"
width="960"
height="540"
loop
autoPlay
playsInline
muted
>
<source src="/images/overview-screencap.webm" type="video/webm" />
Your browser does not support the video tag with WebM-formatted
videos.
</video>
</div>
</div>
</section>

4
website/src/styles/hero.css Normal file
View File

@@ -0,0 +1,4 @@
.hero-background {
background-color: #1b140e;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23ff7300' fill-opacity='0.125'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}