refactor: update default font and enhance localization

- Replaced font imports in the layout and font index files to use Noto and Bricolage fonts for improved typography.
- Updated global CSS variables to reflect the new font settings.
- Enhanced author introduction in English and Chinese localization files with a greeting emoji for better user engagement.
- Adjusted heading styles in the About page for consistency.

messages/en.json

@@ -60,7 +60,7 @@
     "subtitle": "Learn more about our company, mission, and values",
     "authorName": "MkSaaS",
     "authorBio": "Fullstack Developer",
-    "authorIntroduction": "Hi there! This is MkSaaS, an AI SaaS template built with modern technologies, helping you build your SaaS faster and better. If you have any questions, welcome to contact me.",
+    "authorIntroduction": "👋 Hi there! This is MkSaaS, an AI SaaS template built with modern technologies, helping you build your SaaS faster and better. If you have any questions, welcome to contact me.",
     "talkWithMe": "Talk with me"
   },
   "ChangelogPage": {

messages/zh.json

@@ -56,7 +56,7 @@
     "subtitle": "了解更多关于我们的公司、使命和价值观",
     "authorName": "MkSaaS",
     "authorBio": "全栈开发工程师",
-    "authorIntroduction": "你好，这里是 MkSaaS，一个使用最先进的技术栈构建的 AI SaaS 模板，它可以帮助你更快更好地构建你的 SaaS。如果你有任何问题，欢迎联系我。",
+    "authorIntroduction": "👋 你好，这里是 MkSaaS，一个使用最先进的技术栈构建的 AI SaaS 模板，它可以帮助你更快更好地构建你的 SaaS。如果你有任何问题，欢迎联系我。",
     "talkWithMe": "联系我"
   },
   "ChangelogPage": {

src/app/[locale]/(marketing)/(pages)/about/page.tsx

@@ -49,7 +49,7 @@ export default async function AboutPage() {
                 </AvatarFallback>
               </Avatar>
               <div>
-                <h1 className="text-4xl font-heading text-foreground">
+                <h1 className="text-4xl text-foreground">
                   {t('authorName')}
                 </h1>
                 <p className="text-base text-muted-foreground mt-2">

src/app/[locale]/layout.tsx

@@ -1,4 +1,4 @@
-import { fontBricolageGrotesque, fontDMMono, fontDMSans, fontDMSerifText } from '@/assets/fonts';
+import { fontBricolageGrotesque, fontNotoSans, fontNotoSansMono, fontNotoSerif } from '@/assets/fonts';
 import { routing } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
 import { hasLocale, Locale, NextIntlClientProvider } from 'next-intl';
@@ -6,7 +6,6 @@ import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 import { Toaster } from 'sonner';
 import { Providers } from './providers';
-import { TailwindIndicator } from '@/components/tailwind-indicator';
 
 import '@/styles/globals.css';
 
@@ -39,10 +38,9 @@ export default async function LocaleLayout({
         suppressHydrationWarning
         className={cn(
           'size-full antialiased',
-          fontBricolageGrotesque.className,
-          fontDMSans.variable,
-          fontDMMono.variable,
-          fontDMSerifText.variable,
+          fontNotoSans.className,
+          fontNotoSerif.variable,
+          fontNotoSansMono.variable,
           fontBricolageGrotesque.variable
         )}
       >

src/assets/fonts/index.ts

@@ -1,5 +1,4 @@
-import { DM_Mono, DM_Sans, DM_Serif_Text } from 'next/font/google';
-import localFont from 'next/font/local';
+import { Bricolage_Grotesque, Noto_Sans, Noto_Sans_Mono, Noto_Serif } from 'next/font/google';
 
 /**
  * This file shows how to customize the font by using local font or google font
@@ -11,10 +10,10 @@ import localFont from 'next/font/local';
  * 3. Add font variable to the font object
  */
 // https://gwfh.mranftl.com/fonts/bricolage-grotesque?subsets=latin
-export const fontBricolageGrotesque = localFont({
-  src: './bricolage-grotesque-v7-latin-regular.woff2',
-  variable: '--font-bricolage-grotesque',
-});
+// export const fontBricolageGrotesque = localFont({
+//   src: './Bricolage Grotesque-grotesque-v7-latin-regular.woff2',
+//   variable: '--font-bricolage-grotesque',
+// });
 
 /**
  * [2] use google font
@@ -25,23 +24,34 @@ export const fontBricolageGrotesque = localFont({
  * 2. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets.
  * https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts
  */
-export const fontDMSans = DM_Sans({
+// https://fonts.google.com/noto/specimen/Noto+Sans
+export const fontNotoSans = Noto_Sans({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-dm-sans',
+  variable: '--font-noto-sans',
   weight: ['500', '600', '700'],
 });
 
-export const fontDMMono = DM_Mono({
+// https://fonts.google.com/noto/specimen/Noto+Serif
+export const fontNotoSerif = Noto_Serif({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-dm-mono',
-  weight: ['300', '400', '500'],
-});
-
-export const fontDMSerifText = DM_Serif_Text({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-dm-serif-text',
+  variable: '--font-noto-serif',
   weight: ['400'],
 });
+
+// https://fonts.google.com/noto/specimen/Noto+Sans+Mono
+export const fontNotoSansMono = Noto_Sans_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-noto-sans-mono',
+  weight: ['400'],
+});
+
+// https://fonts.google.com/specimen/Bricolage+Grotesque
+export const fontBricolageGrotesque = Bricolage_Grotesque({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-bricolage-grotesque',
+  weight: ['400', '500', '600', '700'],
+});

src/styles/globals.css

@@ -8,12 +8,16 @@
  * https://ouassim.tech/notes/how-to-add-a-theme-selector-to-your-nextjs-app/
  */
 @theme inline {
-  --font-sans: var(--font-dm-sans);
-  --font-mono: var(--font-dm-mono);
-  --font-serif: var(--font-dm-serif-text);
+  /* font */
+  --font-sans: var(--font-noto-sans);
+  --font-mono: var(--font-noto-sans-mono);
+  --font-serif: var(--font-noto-serif);
   --font-bricolage: var(--font-bricolage-grotesque);
-  --font-heading: var(--font-dm-sans);
 
+  /* header height */
+  --header-height: calc(var(--spacing) * 12 + 1px);
+
+  /* colors */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -50,7 +54,7 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
-  /* animate-css for magic ui components */
+  /* animate */
   --animate-shiny-text: shiny-text 8s infinite;
   --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
   --animate-accordion-down: accordion-down 0.2s ease-out;
@@ -196,11 +200,6 @@ body {
   @apply overscroll-none bg-transparent;
 }
 
-:root {
-  /* --font-sans: var(--font-inter); */
-  --header-height: calc(var(--spacing) * 12 + 1px);
-}
-
 /*
  * All the themes are copied from the shadcn-ui dashboard example
  * https://github.com/shadcn-ui/ui/blob/main/apps/v4/app/(examples)/dashboard/theme.css