chore(website): Cache API responses; cleanup font-manrope redundancy (#7136)

- Cache responses for `/api/releases` for minimum 60s, preventing Edge
function from firing up if cache is hit
- Fix font-manrope redundancy - was causing issues on local dev

website/src/app/api/releases/route.ts

@@ -1,9 +1,19 @@
 import { NextRequest, NextResponse } from "next/server";
 import { get } from "@vercel/edge-config";
 
+// Cache responses
+export const dynamic = "force-static";
+
+// Revalidate cache every 60 seconds
+export const revalidate = 60;
+
 export async function GET(_req: NextRequest) {
-  const versions = {
-    portal: await get("deployed_sha"),
+  return NextResponse.json(versions());
+}
+
+function versions() {
+  return {
+    portal: get("deployed_sha"),
     // mark:current-apple-version
     apple: "1.3.6",
     // mark:current-android-version
@@ -15,6 +25,4 @@ export async function GET(_req: NextRequest) {
     // mark:current-gateway-version
     gateway: "1.3.2",
   };
-
-  return NextResponse.json(versions);
 }

website/src/app/blog/page.tsx

@@ -12,9 +12,7 @@ export default function Page() {
     <section>
       <div className="bg-neutral-50 border-b border-neutral-100">
         <div className="py-8 px-4 sm:py-12 sm:px-6 md:py-16 md:px-8 lg:py-20 lg:px-10 mx-auto max-w-screen-lg w-full">
-          <h1
-            className={`justify-center text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight font-manrope`}
-          >
+          <h1 className="justify-center text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight">
             Blog
           </h1>
           <p className="text-center text-md md:text-lg lg:text-xl mt-2 md:mt-4 tracking-tight">
@@ -22,7 +20,7 @@ export default function Page() {
           </p>
         </div>
       </div>
-      <Posts/>
+      <Posts />
     </section>
   );
 }

website/src/app/changelog/layout.tsx

@@ -14,7 +14,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </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 font-manrope">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
             Changelog
           </h1>
           <p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">

website/src/app/globals.css

@@ -2,10 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-family: var(--font-source-sans-3);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-manrope);
+}
+
 @layer components {
   /* Fix inline headings */
   *:is(h1, h2, h3, h4, h5, h6) {
-    @apply flex items-center gap-1 font-manrope;
+    @apply flex items-center gap-1;
   }
 
   /* Fix anchor slug links and scroll position due to fixed navbar */

website/src/app/page.tsx

@@ -55,7 +55,7 @@ export default function Page() {
             </Banner>
             <h1
               className={
-                "font-manrope 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"
+                "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
@@ -177,7 +177,7 @@ export default function Page() {
             Flexible security
           </h6>
           <h3
-            className={`mb-4 tracking-tight font-bold leading-tight inline-block font-manrope`}
+            className={`mb-4 tracking-tight font-bold leading-tight inline-block`}
           >
             Runs <span className="text-primary-450">everywhere </span>
             your business does
@@ -318,9 +318,7 @@ export default function Page() {
           <h6 className="uppercase text-sm font-semibold place-content-center text-primary-450 tracking-wide mb-2">
             Open source
           </h6>
-          <h3
-            className={`mb-4 tracking-tight font-bold inline-block font-manrope`}
-          >
+          <h3 className={`mb-4 tracking-tight font-bold inline-block`}>
             <span className="text-primary-450">Open source</span> for
             transparency and trust
           </h3>

website/src/app/pricing/_page.tsx

@@ -16,7 +16,7 @@ export default function _Page() {
   return (
     <>
       <section className="bg-neutral-100 pb-14">
-        <div className={`text-center font-manrope`}>
+        <div className="text-center">
           <div className="flex gap-4 justify-center ps-6 mb-2.5">
             <span
               className={
@@ -46,9 +46,7 @@ export default function _Page() {
         </div>
 
         <div className="mx-auto bg-neutral-100 max-w-screen-2xl md:grid md:grid-cols-3 pt-10 md:gap-2 lg:gap-4 px-4">
-          <div
-            className={`p-8 md:p-6 lg:p-8 xl:p-10 bg-white rounded-xl shadow-light mb-4 font-manrope`}
-          >
+          <div className="p-8 md:p-6 lg:p-8 xl:p-10 bg-white rounded-xl shadow-light mb-4">
             <h3 className="mb-6 text-xl tracking-tight font-semibold text-neutral-900">
               Starter
             </h3>

website/src/components/BattleCard/index.tsx

@@ -9,9 +9,7 @@ export default function BattleCard2() {
         <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide ">
           Compare
         </h6>
-        <h3
-          className={` text-3xl md:text-4xl lg:text-5xl tracking-tight font-bold inline-block text-center my-2 font-manrope`}
-        >
+        <h3 className="text-3xl md:text-4xl lg:text-5xl tracking-tight font-bold inline-block text-center my-2">
           More features
           <span className="text-primary-450"> for less</span>
         </h3>

website/src/components/CustomerTestimonials/index.tsx

@@ -75,9 +75,7 @@ const TestimonialBox = ({
 }: TestimonialBoxProps) => {
   return (
     <div className="shrink-0 p-6 md:p-8 bg-[#1B1B1D] flex flex-col rounded-2xl justify-between w-fit lg:max-w-[320px] xl:max-w-[340px] lg:min-h-[320px] h-fit">
-      <FaQuoteLeft
-        className="absolute text-white/10 -translate-y-1/3 -z-1 w-10 h-10 sm:h-12 md:h-12 md:w-12"
-      />
+      <FaQuoteLeft className="absolute text-white/10 -translate-y-1/3 -z-1 w-10 h-10 sm:h-12 md:h-12 md:w-12" />
       <p
         className={`text-md  ${fontSize === "md" ? "lg:text-md" : "lg:text-lg"}
          tracking-wide font-light mb-6 break-keep italic text-neutral-50 z-10`}
@@ -111,15 +109,12 @@ const TestimonialBox = ({
 };
 
 export default function CustomerTestimonials() {
-
   return (
     <section className="bg-neutral-950 py-24 flex justify-center">
       <div className="relative flex flex-col lg:flex-row items-start lg:items-center justify-center max-w-screen-2xl">
         <div className="px-4 sm:px-16 lg:px-10 xl:px-0 xl:pr-16 mb-12 md:mb-16">
           <div>
-            <h3
-              className={`text-white text-3xl leading-5 md:text-4xl lg:text-5xl tracking-tight font-medium inline-block text-left mb-2 font-manrope`}
-            >
+            <h3 className="text-white text-3xl leading-5 md:text-4xl lg:text-5xl tracking-tight font-medium inline-block text-left mb-2">
               Customers{" "}
               <FaHeart className="text-primary-450 w-12 h-12 mx-1 inline-block" />{" "}
               us,

website/src/components/ElevatorPitch/index.tsx

@@ -91,9 +91,7 @@ export default function ElevatorPitch() {
               <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">
                 Stay Connected
               </h6>
-              <h3
-                className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight font-bold inline-block font-manrope`}
-              >
+              <h3 className="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight font-bold inline-block">
                 <span className="text-primary-450">Eliminate </span>
                 ACL hell
               </h3>

website/src/components/FeatureCards/index.tsx

@@ -13,9 +13,7 @@ export default function FeatureCards() {
           <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 lg:mb-4">
             Built for you
           </h6>
-          <h3
-            className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block font-manrope`}
-          >
+          <h3 className="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block">
             Simplify access management
             <span className="text-primary-450"> with WireGuard.</span>
           </h3>
@@ -45,9 +43,7 @@ export default function FeatureCards() {
           <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#FFE9EB] justify-center items-center mb-5">
             <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 font-manrope`}
-          >
+          <h4 className="text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1">
             Flexible
           </h4>
           <p className={`text-sm md:text-base semi-bold text-neutral-800`}>
@@ -64,9 +60,7 @@ export default function FeatureCards() {
           <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#E3F5FF] justify-center items-center mb-5">
             <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 font-manrope`}
-          >
+          <h4 className="text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1">
             Secure
           </h4>
           <p className={`text-sm md:text-base semi-bold text-neutral-800`}>
@@ -86,9 +80,7 @@ export default function FeatureCards() {
               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 font-manrope`}
-          >
+          <h4 className="text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1">
             Granular
           </h4>
           <p className="text-sm md:text-base semi-bold text-neutral-800">

website/src/components/FeatureSection/index.tsx

@@ -18,9 +18,7 @@ export default function FeatureSection({
       <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">
         {titleCaption}
       </h6>
-      <h3
-        className={`mb-4 text-center lg:text-left text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block font-manrope`}
-      >
+      <h3 className="mb-4 text-center lg:text-left text-3xl md:text-4xl lg:text-5xl leading-tight text-pretty tracking-tight font-bold inline-block">
         {title}
       </h3>
       {description}

website/src/components/Footer/index.tsx

@@ -19,9 +19,7 @@ export default function Footer() {
   return (
     <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 font-manrope`}
-        >
+        <h3 className="text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold">
           Ready to get started?
         </h3>
         <p className="text-neutral-200 text-md">

website/src/components/RootLayout/index.tsx

@@ -14,15 +14,13 @@ import { Source_Sans_3, Manrope } from "next/font/google";
 
 const source_sans_3 = Source_Sans_3({
   subsets: ["latin"],
-  variable: "--font-source-sans",
+  variable: "--font-source-sans-3",
   display: "swap",
-  weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
 });
 const manrope = Manrope({
   subsets: ["latin"],
   variable: "--font-manrope",
   display: "swap",
-  weight: ["200", "300", "400", "500", "600", "700", "800"],
 });
 
 export const metadata: Metadata = {

website/src/components/SingleFeature/index.tsx

@@ -37,9 +37,7 @@ export default function SingleFeature({
           </h3>
         </div>
         <div className="max-w-screen-md">
-          <p
-            className={`text-md text-left text-pretty mb-12 text-neutral-600 font-medium font-manrope`}
-          >
+          <p className="text-md text-left text-pretty mb-12 text-neutral-600 font-medium">
             {desc}
           </p>
           <ActionLink

website/src/components/UseCaseCards/index.tsx

@@ -5,9 +5,7 @@ import { Route } from "next";
 
 function CardHeading({ children }: { children: React.ReactNode }) {
   return (
-    <h4
-      className={`font-semibold tracking-tight leading-none text-xl mb-3 inline-block font-manrope`}
-    >
+    <h4 className="font-semibold tracking-tight leading-none text-xl mb-3 inline-block">
       {children}
     </h4>
   );
@@ -45,9 +43,7 @@ export default function UseCaseCards() {
         <h6 className="uppercase text-sm font-semibold text-primary-450 place-content-center tracking-wide mb-2">
           Use cases
         </h6>
-        <h3
-          className={`px-4 mb-8 text-3xl md:text-4xl lg:text-5xl text-center leading-tight tracking-tight font-bold inline-block font-manrope`}
-        >
+        <h3 className="px-4 mb-8 text-3xl md:text-4xl lg:text-5xl text-center leading-tight tracking-tight font-bold inline-block">
           One product. Endless possibilities.
           <span className="text-primary-450"> Zero </span>hassle.
         </h3>

website/tailwind.config.js

@@ -75,8 +75,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-source-sans)"],
-        manrope: ["var(--font-manrope)"],
+        sans: ["var(--font-source-sans-3)"],
       },
       boxShadow: {
         drop: "0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05)",