feat: update global styles and layout for improved typography and card interaction

- Replaced Geist font with Outfit for both sans-serif and mono styles in globals.css and layout.tsx.
- Enhanced card hover effect in quick-access-cards.tsx to improve user interaction feedback.
- Adjusted card component structure in card.tsx for better styling and layout consistency.
This commit is contained in:
Daniel Luiz Alves
2025-07-03 01:09:12 -03:00
parent d5918c3088
commit 1ea4115578
4 changed files with 25 additions and 20 deletions

View File

@@ -37,7 +37,7 @@ export function QuickAccessCards() {
{QUICK_ACCESS_ITEMS.map((card) => (
<Card
key={card.title}
className="cursor-pointer transform transition-all hover:scale-102"
className="cursor-pointer transform transition-all hover:bg-card/80"
onClick={() => router.push(card.path)}
>
<CardContent>

View File

@@ -6,8 +6,8 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--font-sans: Outfit, sans-serif;
--font-mono: monospace;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -41,6 +41,9 @@
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--font-sans: Outfit, sans-serif;
--font-mono: monospace;
--font-serif: Outfit, sans-serif;
}
:root {
@@ -76,6 +79,9 @@
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.5927 0.1767 142.49);
--font-sans: Outfit, sans-serif;
--font-mono: monospace;
--font-serif: Outfit, sans-serif;
}
.dark {

View File

@@ -1,4 +1,4 @@
import { Geist, Geist_Mono } from "next/font/google";
import { Outfit } from "next/font/google";
import { NextIntlClientProvider } from "next-intl";
import { getLocale } from "next-intl/server";
@@ -12,14 +12,11 @@ import { AuthProvider } from "@/contexts/auth-context";
import { ShareProvider } from "@/contexts/share-context";
import { ThemeProvider } from "../providers/theme-provider";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
const outfit = Outfit({
subsets: ["latin"],
variable: "--font-outfit",
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
display: "swap",
});
export default async function RootLayout({
@@ -39,7 +36,7 @@ export default async function RootLayout({
<head>
<Favicon />
</head>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<body className={`${outfit.variable} antialiased`}>
<NextIntlClientProvider>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<AuthProvider>

View File

@@ -4,14 +4,16 @@ import { cn } from "@/lib/utils";
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div className="border p-1.5 rounded-xl text-card-foreground shadow-lg dark:shadow-sm">
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none shadow-lg py-6 dark:shadow-sm",
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none py-6 ",
className
)}
{...props}
/>
</div>
);
}