Update README and refine UI elements and localization

This commit introduces updates to the README file, specifically focusing on authentication emails. Minor UI adjustments have been made to various layout spacings and image attributes in some pages for better design consistency. Localization has also been improved by introducing translation keys for error and not-found pages in the common JSON file.

README.md

@@ -525,8 +525,9 @@ This could take a couple of hours, so buckle up!
 2. **Migrations**: Push the migrations to the remote Supabase project (`supabase db push`).
 3. **Auth**: Set your APP URL in the Supabase project settings. This is required for the OAuth flow. Make sure to add the path `/auth/callback` to the allowed URLs. If you don't have it yet, wait.
 4. **Auth Providers**: Set the OAuth providers in the Supabase project settings. If you use Google Auth, make sure to set it up. This requires creating a Google Cloud project and setting up the OAuth credentials.
-5. **Deploy Next.js**: Deploy the Next.js app to Vercel or any another hosting provider. Copy the URL and set it in the Supabase project settings.
-6. **Environment Variables**: The initial deploy **will likely fail** because you may not yet have a URL to set in your environment variables. This is normal. Once you have the URL, set the URL in the environment variables and redeploy.
-7. **Webhooks**: Set the DB Webhooks in Supabase pointing against your Next.js app at `/api/db/webhooks`.
-8. **Emails**: Get some SMTP details from an email service provider like SendGrid or Mailgun or Resend and configure the emails in both the Environment Variables and the Supabase project settings.
-9. **Billing**: Create a Stripe/Lemon Squeezy account, make sure to update the environment variables with the correct values. Point webhooks from these to `/api/billing/webhook`.
+5. **Auth Emails**: It is very much recommended to update the auth emails using the [following documentation](https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr#update-email-templates-with-url-for-api-endpoint). The kit already implements the `confirm` route, but you need to update the emails in your Supabase settings.
+6. **Deploy Next.js**: Deploy the Next.js app to Vercel or any another hosting provider. Copy the URL and set it in the Supabase project settings.
+7. **Environment Variables**: The initial deploy **will likely fail** because you may not yet have a URL to set in your environment variables. This is normal. Once you have the URL, set the URL in the environment variables and redeploy.
+8. **Webhooks**: Set the DB Webhooks in Supabase pointing against your Next.js app at `/api/db/webhooks`.
+9. **Emails**: Get some SMTP details from an email service provider like SendGrid or Mailgun or Resend and configure the emails in both the Environment Variables and the Supabase project settings.
+10. **Billing**: Create a Stripe/Lemon Squeezy account, make sure to update the environment variables with the correct values. Point webhooks from these to `/api/billing/webhook`.

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

@@ -92,11 +92,10 @@ function Home() {
             className={
               'delay-250 rounded-lg border duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both'
             }
-            width={3069}
-            height={1916}
+            width={1689}
+            height={1057}
             src={`/images/dashboard-demo.webp`}
             alt={`App Image`}
-            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           />
         </div>
       </div>
@@ -131,7 +130,7 @@ function Home() {
       </div>
 
       <div className={'container mx-auto'}>
-        <div className={'flex flex-col space-y-4'}>
+        <div className={'flex flex-col space-y-24 xl:space-y-36'}>
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
               <div className={'flex flex-col space-y-2.5'}>
@@ -162,10 +161,9 @@ function Home() {
               <Image
                 className="rounded-2xl"
                 src={'/images/sign-in.webp'}
-                width={'1100'}
-                height={'1282'}
+                width={'1760'}
+                height={'1680'}
                 alt={'Sign In'}
-                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
             </RightFeatureContainer>
           </FeatureShowcaseContainer>
@@ -175,10 +173,9 @@ function Home() {
               <Image
                 className="rounded-2xl"
                 src={'/images/dashboard.webp'}
-                width={'2094'}
-                height={'2416'}
+                width={'2004'}
+                height={'1410'}
                 alt={'Dashboard'}
-                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
             </LeftFeatureContainer>
 
@@ -234,10 +231,9 @@ function Home() {
               <Image
                 className="rounded-2xl"
                 src={'/images/billing.webp'}
-                width={'2456'}
-                height={'1454'}
+                width={'1916'}
+                height={'1392'}
                 alt={'Billing'}
-                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
             </RightFeatureContainer>
           </FeatureShowcaseContainer>

apps/web/app/error.tsx

@@ -29,10 +29,12 @@ const ErrorPage = ({
       >
         <div className={'flex flex-col items-center space-y-16'}>
           <div>
-            <h1 className={'font-heading text-9xl font-extrabold'}>500 :(</h1>
+            <h1 className={'font-heading text-9xl font-extrabold'}>
+              <Trans i18nKey={'common:errorPageHeading'} />
+            </h1>
           </div>
 
-          <div className={'flex flex-col items-center space-y-4'}>
+          <div className={'flex flex-col items-center space-y-8'}>
             <div className={'flex flex-col items-center space-y-2.5'}>
               <div>
                 <Heading level={1}>

apps/web/app/not-found.tsx

@@ -38,10 +38,12 @@ const NotFoundPage = async () => {
       >
         <div className={'flex flex-col items-center space-y-12'}>
           <div>
-            <h1 className={'font-heading text-9xl font-extrabold'}>404 :(</h1>
+            <h1 className={'font-heading text-9xl font-extrabold'}>
+              <Trans i18nKey={'common:pageNotFoundHeading'} />
+            </h1>
           </div>
 
-          <div className={'flex flex-col items-center space-y-4'}>
+          <div className={'flex flex-col items-center space-y-8'}>
             <div className={'flex flex-col items-center space-y-2.5'}>
               <div>
                 <Heading level={1}>

apps/web/public/locales/en/common.json

@@ -48,18 +48,14 @@
   "signedInAs": "Signed in as",
   "pageOfPages": "Page {{page}} of {{total}}",
   "noData": "No data available",
+  "pageNotFoundHeading": "Ouch! :|",
+  "errorPageHeading": "Ouch! :|",
   "roles": {
     "owner": {
-      "label": "Owner",
-      "description": "Can change any setting, invite new members and manage billing"
-    },
-    "admin": {
-      "label": "Admin",
-      "description": "Can change some settings, invite members, perform disruptive actions"
+      "label": "Owner"
     },
     "member": {
-      "label": "Member",
-      "description": "Cannot invite members or change settings"
+      "label": "Member"
     }
   }
 }