mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 02:31:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement a central theme to ensure a consistent look and feel across site

Browse Source 
Adds theme file and applies it to the navigation header and home page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/3d8b969a-14be-44e3-8741-9c8bb93efcb4.jpg
This commit is contained in:
mukimovd 2025-05-01 22:33:50 +00:00
parent 4fb9ba3751
commit 1ea6cec608
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/layout/NavHeader.tsx
View File

@ -3,6 +3,7 @@ import { useTheme } from "@/hooks/use-theme";
import { Search, Moon, Sun, Menu } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { theme as themeStyles } from "@/lib/theme";
import {
DropdownMenu,
DropdownMenuContent,
@ -15,23 +16,23 @@ export function NavHeader() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-paper sticky top-0 z-10 shadow-sm">
<header className={`navigation-header border-b ${themeStyles.border.muted} bg-background dark:bg-background sticky top-0 z-10 shadow-sm`}>
<div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
<div className="flex items-center space-x-4">
<Link href="/" className="text-navy dark:text-cream font-serif text-2xl font-semibold tracking-tight">
<Link href="/" className={`font-serif text-2xl font-semibold tracking-tight ${themeStyles.text.heading}`}>
Tercul
</Link>
<nav className="hidden md:flex items-center space-x-6">
<Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
<Link href="/explore" className={themeStyles.nav.link}>
Explore
</Link>
<Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
<Link href="/authors" className={themeStyles.nav.link}>
Authors
</Link>
<Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
<Link href="/collections" className={themeStyles.nav.link}>
Collections
</Link>
<Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
<Link href="/blog" className={themeStyles.nav.link}>
Blog
</Link>
</nav>
@ -101,16 +102,16 @@ export function NavHeader() {
{mobileMenuOpen && (
<div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
<nav className="flex flex-col space-y-3">
<Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
<Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
Explore
</Link>
<Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
<Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
Authors
</Link>
<Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
<Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
Collections
</Link>
<Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
<Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
Blog
</Link>
</nav>

1
client/src/lib/theme.ts Normal file
View File

@ -0,0 +1 @@
null

10
client/src/pages/Home.tsx
View File

@ -30,16 +30,16 @@ export default function Home() {
return (
<PageLayout>
{/* Hero Section */}
<section className="bg-paper dark:bg-dark-paper py-16 md:py-24">
<section className="bg-navy/10 dark:bg-navy/20 py-16 md:py-24">
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
<div className="max-w-3xl mx-auto mb-8">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-navy dark:text-cream mb-6">
Discover the world's literary heritage
</h1>
<p className="text-lg md:text-xl text-navy/80 dark:text-cream/80 italic font-serif mb-2">
<p className="text-lg md:text-xl text-ink/80 dark:text-cream/80 italic font-serif mb-2">
"{randomQuote.text}"
</p>
<p className="text-navy/60 dark:text-cream/60">— {randomQuote.author}</p>
<p className="text-ink/60 dark:text-cream/60">— {randomQuote.author}</p>
</div>
<SearchBar className="max-w-xl mx-auto" fullWidth />
@ -81,11 +81,11 @@ export default function Home() {
<Card key={author.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
<CardContent className="p-6">
<AuthorChip author={author} size="lg" withLifeDates className="mb-4" />
<p className="text-navy/80 dark:text-cream/80 text-sm line-clamp-4 mb-4">
<p className="text-ink/80 dark:text-cream/80 text-sm line-clamp-4 mb-4">
{author.biography?.slice(0, 150)}...
</p>
<Link href={`/authors/${author.slug}`}>
<Button size="sm" variant="outline" className="w-full text-russet dark:text-russet/90 border-russet/50">
<Button size="sm" variant="outline" className="w-full text-navy dark:text-navy border-navy/50 hover:bg-navy/10">
Explore works
</Button>
</Link>