diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0015e39..3f96168 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import "~/styles/globals.css"; -import { Inter, Outfit } from "next/font/google"; // Changed from Geist +import { Inter, Playfair_Display } from "next/font/google"; import { type Metadata } from "next"; const inter = Inter({ @@ -8,7 +8,7 @@ const inter = Inter({ variable: "--font-sans", }); -const outfit = Outfit({ +const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-heading", }); @@ -23,7 +23,7 @@ export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( - + diff --git a/src/app/page.tsx b/src/app/page.tsx index 2d4fb6a..4951820 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,7 +18,7 @@ export default function HomePage() {
-

+

PDF to Markdown

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index fd07d5b..4a261ea 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -5,10 +5,10 @@ import { Button } from "./ui/button"; export function Navbar() { return (

-
-
@@ -128,7 +128,7 @@ export function UploadForm() { type="submit" variant="outline" disabled={isLoading || !fileName} - className="w-full sm:w-auto rounded-xl border-2 hover:bg-muted/50" + className="w-full sm:w-auto rounded-xl border-2 hover:bg-muted/50 button-hover" > {isLoading ? ( <> @@ -162,7 +162,7 @@ export function UploadForm() { void navigator.clipboard.writeText(markdown); setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); - }} className="min-w-[40px] rounded-xl"> + }} className="min-w-[40px] rounded-xl button-hover"> {isCopied ? : } {!isCopied && Copy} @@ -184,7 +184,7 @@ export function UploadForm() { const input = document.getElementById('file') as HTMLInputElement; if (input) input.value = ''; }} - className="w-full rounded-xl border-2 hover:bg-muted/50" + className="w-full rounded-xl border-2 hover:bg-muted/50 button-hover" > Convert another file diff --git a/src/styles/globals.css b/src/styles/globals.css index 0d242f7..db7a2ca 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -4,29 +4,38 @@ :root { --background: 0 0% 100%; + /* #FFFFFF */ --foreground: 240 10% 3.9%; + /* #09090B */ --card: 0 0% 100%; + /* #FFFFFF */ --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; + /* #18181B */ --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; + /* #FAFAFA */ + --secondary: 240 4.8% 90%; + /* #E4E4E7 (Darkened for contrast) */ --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; + /* #F4F4F5 */ --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; + /* #E4E4E7 */ --input: 240 5.9% 90%; --ring: 240 10% 3.9%; + --radius: 1rem; + /* 16px Global Radius */ --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-5: 27 87% 67%; - --radius: 1rem; --sidebar: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; @@ -40,14 +49,17 @@ @media (prefers-color-scheme: dark) { :root { --background: 240 10% 3.9%; + /* #09090B */ --foreground: 0 0% 98%; + /* #FAFAFA */ --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; + --secondary: 240 3.7% 20%; + /* #27272A */ --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; @@ -56,6 +68,7 @@ --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; + /* #27272A */ --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --chart-1: 220 70% 50%; @@ -137,6 +150,24 @@ .animation-delay-4000 { animation-delay: 4s; } + + .card-hover { + transition: all 0.3s ease-out; + } + + .card-hover:hover { + transform: translateY(-4px); + box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1); + } + + .button-hover { + transition: all 0.2s ease-out; + } + + .button-hover:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1); + } } @keyframes blob {