feat: add Nunito font for headings and navbar wordmark

This commit is contained in:
ashim-hq
2026-04-24 14:46:44 +08:00
parent 6af315ac44
commit af54a0e4da
3 changed files with 13 additions and 7 deletions
+3 -2
View File
@@ -1,8 +1,9 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Inter, Nunito } from "next/font/google";
import "@/styles/globals.css";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito" });
export const metadata: Metadata = {
title: "SnapOtter | Self-Hosted Image Processing",
@@ -36,7 +37,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={inter.variable} suppressHydrationWarning>
<html lang="en" className={`${inter.variable} ${nunito.variable}`} suppressHydrationWarning>
<body
className="bg-background text-foreground font-[family-name:var(--font-inter)] antialiased"
suppressHydrationWarning
+1 -1
View File
@@ -114,7 +114,7 @@ export function Hero() {
</div>
<div className="relative mx-auto max-w-4xl text-center">
<h1 className="animate-[fadeUp_0.6s_ease-out_both] text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
<h1 className="animate-[fadeUp_0.6s_ease-out_both] font-[family-name:var(--font-nunito)] text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
Your images. Stay yours.
</h1>
+9 -4
View File
@@ -37,10 +37,15 @@ export function Navbar() {
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/60 backdrop-blur-xl after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-gradient-to-r after:from-transparent after:via-accent/30 after:to-transparent">
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
<a href="/" className="flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-accent-foreground text-sm font-bold">
S
</div>
<span className="text-lg font-bold tracking-tight">SnapOtter</span>
<img
src="/logo.png"
alt="SnapOtter"
className="h-8 w-8"
style={{ imageRendering: "auto" }}
/>
<span className="font-[family-name:var(--font-nunito)] text-lg font-bold tracking-tight">
SnapOtter
</span>
</a>
<div className="hidden items-center gap-6 lg:flex">