Improve the website's appearance and navigation for a better user experience

Fixes image URL type in ClassCard and adds styling to Link components in Header.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: acaf01d7-65a7-4fc5-901d-853488e196e8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/a204958c-2c80-4d4c-8cf4-2cabe0721c6a.jpg
This commit is contained in:
JeffEmmett 2025-05-07 02:38:17 +00:00
parent 8d2fa13a67
commit 78958cd6af
3 changed files with 9 additions and 7 deletions

View File

@ -69,7 +69,7 @@ export function ClassCard({ classData, onBookClick }: ClassCardProps) {
return (
<div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105">
<img
src={classData.imageUrl || "https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop"}
src={classData.imageUrl as string || "https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop"}
alt={classData.name}
className="w-full h-48 object-cover"
/>

View File

@ -40,10 +40,12 @@ export default function Header() {
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
{navLinks.map((link) => (
<Link key={link.path} href={link.path}>
<a className={`transition-colors duration-200 font-raleway font-medium ${isActive(link.path)}`}>
{link.name}
</a>
<Link
key={link.path}
href={link.path}
className={`transition-colors duration-200 font-raleway font-medium ${isActive(link.path)}`}
>
{link.name}
</Link>
))}
</nav>

View File

@ -1,9 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&family=Aref+Ruqaa:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&family=Aref+Ruqaa:wght@400;700&display=swap');
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;