mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 04:51: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 { Search, Moon, Sun, Menu } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { theme as themeStyles } from "@/lib/theme";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -15,23 +16,23 @@ export function NavHeader() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( 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 justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
<div className="flex items-center space-x-4"> <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 Tercul
</Link> </Link>
<nav className="hidden md:flex items-center space-x-6"> <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 Explore
</Link> </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 Authors
</Link> </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 Collections
</Link> </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 Blog
</Link> </Link>
</nav> </nav>
@ -101,16 +102,16 @@ export function NavHeader() {
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20"> <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"> <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 Explore
</Link> </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 Authors
</Link> </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 Collections
</Link> </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 Blog
</Link> </Link>
</nav> </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 ( return (
<PageLayout> <PageLayout>
{/* Hero Section */} {/* 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-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
<div className="max-w-3xl mx-auto mb-8"> <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"> <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 Discover the world's literary heritage
</h1> </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}" "{randomQuote.text}"
</p> </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> </div>
<SearchBar className="max-w-xl mx-auto" fullWidth /> <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"> <Card key={author.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
<CardContent className="p-6"> <CardContent className="p-6">
<AuthorChip author={author} size="lg" withLifeDates className="mb-4" /> <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)}... {author.biography?.slice(0, 150)}...
</p> </p>
<Link href={`/authors/${author.slug}`}> <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 Explore works
</Button> </Button>
</Link> </Link>