fix(website): Add "read blog" tag above Hero title, adjust hero margins and font sizes (#6561)

Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com>
Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>

website/public/images/play-icon.svg

@@ -1,31 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_iii_126_235)">
-<circle cx="12.5" cy="12" r="12" fill="white" fill-opacity="0.04"/>
-</g>
-<circle cx="12.5" cy="12" r="11.75" stroke="#FFDDC0" stroke-opacity="0.15" stroke-width="0.5"/>
-<path d="M16 11.134C16.6667 11.5189 16.6667 12.4811 16 12.866L11.5 15.4641C10.8333 15.849 10 15.3679 10 14.5981L10 9.40192C10 8.63212 10.8333 8.151 11.5 8.5359L16 11.134Z" fill="white" fill-opacity="0.7"/>
-<defs>
-<filter id="filter0_iii_126_235" x="-0.5" y="-4" width="25" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_126_235"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.621024 0 0 0 0 0.309722 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_126_235" result="effect2_innerShadow_126_235"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-1" dy="1"/>
-<feGaussianBlur stdDeviation="0.8"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="effect2_innerShadow_126_235" result="effect3_innerShadow_126_235"/>
-</filter>
-</defs>
-</svg>

website/src/app/blog/page.tsx

@@ -46,7 +46,7 @@ export default function Page() {
                   <strong>New feature:</strong> REST API{" "}
                   <Badge
                     text="Beta"
-                    size="xs"
+                    size="sm"
                     textColor="blue-800"
                     bgColor="blue-100"
                   />

website/src/app/blog/sep-2024-update/readme.mdx

@@ -13,7 +13,7 @@ import { Badge } from "@/components/Badges";
 
 - **New feature:** Internet Resources
 - **New feature:** REST API
-  <Badge text="Beta" size="xs" textColor="blue-800" bgColor="blue-100" />
+  <Badge text="Beta" size="sm" textColor="blue-800" bgColor="blue-100" />
 - **New feature:** Improved wildcard matching for DNS Resources
 - **Blog post:** [sans-IO: The secret to effective Rust for network service](/blog/sans-io)
 

website/src/app/page.tsx

@@ -27,6 +27,8 @@ import CustomerTestimonials from "@/components/CustomerTestimonials";
 import FeatureCards from "@/components/FeatureCards";
 import SingleFeature from "@/components/SingleFeature";
 import UseCaseCards from "@/components/UseCaseCards";
+import Banner from "@/components/Banner";
+import { Badge } from "@/components/Badges";
 
 export const metadata: Metadata = {
   title: "Firezone: Zero trust access that scales",
@@ -39,6 +41,18 @@ export default function Page() {
     <>
       <section className="bg-neutral-950 bg-hero pt-28 mb-16">
         <div className="flex flex-col items-center mx-auto md:px-0 px-4 max-w-screen-md">
+          <Banner href="/blog/sep-2024-update" active>
+            <Badge
+              text="New"
+              bgColor="accent-700"
+              textColor="accent-200"
+              size="sm"
+            />
+            <span className="ml-1 ">
+              Internet Resources, REST API, and more
+            </span>
+            <HiArrowLongRight className="inline-block mx-1 w-5 h-5 duration-50 transition transform group-hover:translate-x-1" />
+          </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"
@@ -73,8 +87,8 @@ export default function Page() {
             </div>
           </div>
         </div>
-        <div className="pt-16 pb-4 max-w-screen-xl mx-auto">
-          <div className="text-center text-sm mb-6 font-base text-neutral-600">
+        <div className="pt-24 pb-4 max-w-screen-xl mx-auto">
+          <div className="text-center text-sm mb-6 font-base text-neutral-500">
             Backed by{" "}
             <Image
               src="/images/yc-logo-gray.png"

website/src/components/ActionLink/index.tsx

@@ -43,7 +43,6 @@ export default function ActionLink({
   // being applied below. The CSS checks out but the color defaults to gray.
   const linkClasses = `
     group inline-flex justify-center items-center py-2 font-semibold
-    tracking-tight font-medium
     text-${color}
     ${Size[size].link}
     ${border && `${Size[size].border} border-current`}

website/src/components/Badges/index.tsx

@@ -4,11 +4,11 @@ import Link from "next/link";
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
 
 enum SizeClass {
-  XS = "px-1 py-0.5 text-xs -translate-y-0.5 rounded-md",
-  SM = "px-1.5 py-1 text-sm -translate-y-1 rounded-md",
-  MD = "px-2 py-1 text-base -translate-y-1 rounded-lg",
-  LG = "px-3 py-1.5 text-lg -translate-y-1.5 rounded-lg",
-  XL = "px-4 py-2 text-xl -translate-y-2 rounded-xl",
+  XS = "px-1 py-0.5 text-xs rounded-2xl",
+  SM = "px-2 py-1 text-sm rounded-2xl",
+  MD = "px-2 py-1 text-base rounded-2xl",
+  LG = "px-3 py-1.5 text-lg rounded-2xl",
+  XL = "px-4 py-2 text-xl rounded-2xl",
 }
 
 export function Badge({
@@ -26,7 +26,7 @@ export function Badge({
 
   return (
     <div
-      className={`place-content-center uppercase inline-block ${sizeClass} font-semibold bg-${bgColor} text-${textColor}`}
+      className={`place-content-center inline-block ${sizeClass} font-medium bg-${bgColor} text-${textColor}`}
     >
       {text}
     </div>

website/src/components/Banner/index.tsx

@@ -1,23 +1,29 @@
-import { HiXMark } from "react-icons/hi2";
-import { Banner as FlowbiteBanner, BannerCollapseButton } from "flowbite-react";
+import Link from "next/link";
+import { Route } from "next";
+import Image from "next/image";
+import { UrlObject } from "url";
 
 export default function Banner({
   active,
-  overlay,
+  href = "/",
+  bgColor,
+  textColor,
   children,
 }: {
   active: boolean;
-  overlay?: boolean;
+  href?: Route<string> | UrlObject;
+  bgColor?: string;
+  textColor?: string;
   children: React.ReactNode;
 }) {
   if (!active) return null;
 
   return (
-    <FlowbiteBanner>
+    <Link
+      href={href}
+      className={`group mb-6 bg-accent-900 text-accent-200 hover:text-accent-100 hover:ring-[0.5px] ring-accent-700 text-sm rounded-2xl px-1 py-1`}
+    >
       {children}
-      <BannerCollapseButton className="flex items-center text-neutral-50 hover:bg-neutral-50 hover:text-neutral-900 rounded text-sm p-0.5">
-        <HiXMark className="w-5 h-5" />
-      </BannerCollapseButton>
-    </FlowbiteBanner>
+    </Link>
   );
 }