Update UI elements and enhance security measures

Changes are introduced primarily to the site header buttons and styles, as well as some content corrections. Also, the SUPABASE_SERVICE_ROLE_KEY environment variable is now sanitized before use to prevent potential security vulnerabilities. The function 'taintUniqueValue' from React is used to ensure this process. These changes align with good practices for both UI/UX and security.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -68,7 +68,12 @@ function AuthButtons() {
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'ghost'} className={'border border-primary'}>
+        <Button
+          variant={'ghost'}
+          className={
+            'rounded-full border border-primary hover:bg-primary hover:text-primary-foreground'
+          }
+        >
           <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>

apps/web/app/(marketing)/_components/site-header.tsx

@@ -6,7 +6,7 @@ import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'border-b'}>
+    <div>
       <div className={'container mx-auto'}>
         <div className="flex h-16 items-center justify-between">
           <div className={'flex w-6/12 items-center space-x-8'}>

apps/web/app/(marketing)/page.tsx

@@ -282,7 +282,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
 
 function Pill(props: React.PropsWithChildren) {
   return (
-    <h2 className={'rounded-full border px-4 py-2 text-sm'}>
+    <h2 className={'rounded-full border px-4 py-2 text-center text-sm'}>
       <Sparkle className={'inline-block h-4'} />
       {props.children}
     </h2>
@@ -321,20 +321,23 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
-      <Button size={'lg'}>
+      <Link href={'/auth/sign-up'}>
-        <Link href={'/auth/sign-up'}>
+        <Button
+          size={'lg'}
+          className={'rounded-full py-6 text-base font-medium'}
+        >
           <span className={'flex items-center space-x-0.5'}>
             <span>Get Started</span>
 
             <ChevronRight
               className={
                 'h-5 animate-in fade-in slide-in-from-left-8' +
-                ' delay-1000 duration-1000 zoom-in fill-mode-both'
+                ' delay-800 duration-1000 zoom-in fill-mode-both'
               }
             />
           </span>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
     </div>
   );
 }

apps/web/next.config.mjs

@@ -32,6 +32,7 @@ const config = {
   },
   experimental: {
     mdxRs: true,
+    taint: true,
     instrumentationHook: true,
     optimizePackageImports: [
       'recharts',

packages/supabase/src/get-service-role-key.ts

@@ -1,5 +1,7 @@
 import 'server-only';
 
+import { experimental_taintUniqueValue as taintUniqueValue } from 'react';
+
 import { z } from 'zod';
 
 const message =
@@ -11,16 +13,22 @@ const message =
  * ONLY USE IN SERVER-SIDE CODE. DO NOT EXPOSE THIS TO CLIENT-SIDE CODE.
  */
 export function getServiceRoleKey() {
-  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  const serviceRoleKey = z
-
-  return z
     .string({
       required_error: message,
     })
     .min(1, {
       message: message,
     })
-    .parse(serviceRoleKey);
+    .parse(process.env.SUPABASE_SERVICE_ROLE_KEY);
+
+  taintUniqueValue(
+    'Do not pass the service role key to the client',
+    process,
+    serviceRoleKey,
+  );
+
+  return serviceRoleKey;
 }
 
 /**