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

Improve the visual theme of the homepage to align with overall design

Browse Source 
Updates Tailwind CSS classes in Home.tsx to use semantic primary/accent colors.

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/d8e7470c-93eb-4390-9042-6b3562a59bc2.jpg
This commit is contained in:
mukimovd 2025-05-01 22:50:34 +00:00
parent 0f2384b05b
commit ddbaba72db
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1746139607782.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

50
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-navy/10 dark:bg-navy/20 py-16 md:py-24"> <section className="bg-primary/10 dark:bg-primary/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-primary dark:text-primary-foreground mb-6">
Discover the world's literary heritage Discover the world's literary heritage
</h1> </h1>
<p className="text-lg md:text-xl text-ink/80 dark:text-cream/80 italic font-serif mb-2"> <p className="text-lg md:text-xl text-foreground/80 dark:text-foreground/80 italic font-serif mb-2">
"{randomQuote.text}" "{randomQuote.text}"
</p> </p>
<p className="text-ink/60 dark:text-cream/60">— {randomQuote.author}</p> <p className="text-foreground/60 dark:text-foreground/60">— {randomQuote.author}</p>
</div> </div>
<SearchBar className="max-w-xl mx-auto" fullWidth /> <SearchBar className="max-w-xl mx-auto" fullWidth />
@ -50,11 +50,11 @@ export default function Home() {
<section className="py-12 md:py-16"> <section className="py-12 md:py-16">
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6"> <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream"> <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
Featured Authors Featured Authors
</h2> </h2>
<Link href="/authors"> <Link href="/authors">
<Button variant="link" className="text-russet dark:text-russet/90"> <Button variant="link" className="text-accent dark:text-accent">
View all authors View all authors
</Button> </Button>
</Link> </Link>
@ -63,29 +63,29 @@ export default function Home() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{authorsLoading ? ( {authorsLoading ? (
Array.from({ length: 4 }).map((_, i) => ( Array.from({ length: 4 }).map((_, i) => (
<Card key={i} className="bg-cream dark:bg-dark-surface"> <Card key={i} className="bg-card dark:bg-card">
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className="w-16 h-16 rounded-full bg-navy/10 dark:bg-navy/20 animate-pulse"></div> <div className="w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/20 animate-pulse"></div>
<div className="flex-1"> <div className="flex-1">
<div className="h-5 bg-navy/10 dark:bg-navy/20 rounded-md w-3/4 mb-2 animate-pulse"></div> <div className="h-5 bg-primary/10 dark:bg-primary/20 rounded-md w-3/4 mb-2 animate-pulse"></div>
<div className="h-4 bg-navy/10 dark:bg-navy/20 rounded-md w-1/2 animate-pulse"></div> <div className="h-4 bg-primary/10 dark:bg-primary/20 rounded-md w-1/2 animate-pulse"></div>
</div> </div>
</div> </div>
<div className="h-20 bg-navy/10 dark:bg-navy/20 rounded-md animate-pulse"></div> <div className="h-20 bg-primary/10 dark:bg-primary/20 rounded-md animate-pulse"></div>
</CardContent> </CardContent>
</Card> </Card>
)) ))
) : ( ) : (
featuredAuthors?.map((author) => ( featuredAuthors?.map((author) => (
<Card key={author.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow"> <Card key={author.id} className="bg-card dark:bg-card 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-ink/80 dark:text-cream/80 text-sm line-clamp-4 mb-4"> <p className="text-foreground/80 dark:text-foreground/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-navy dark:text-navy border-navy/50 hover:bg-navy/10"> <Button size="sm" variant="outline" className="w-full text-primary dark:text-primary border-primary/50 hover:bg-primary/10">
Explore works Explore works
</Button> </Button>
</Link> </Link>
@ -98,14 +98,14 @@ export default function Home() {
</section> </section>
{/* Trending Works */} {/* Trending Works */}
<section className="py-12 md:py-16 bg-paper dark:bg-dark-paper"> <section className="py-12 md:py-16 bg-muted dark:bg-muted">
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6"> <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream"> <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
Trending Works Trending Works
</h2> </h2>
<Link href="/explore"> <Link href="/explore">
<Button variant="link" className="text-russet dark:text-russet/90"> <Button variant="link" className="text-accent dark:text-accent">
Explore all works Explore all works
</Button> </Button>
</Link> </Link>
@ -114,7 +114,7 @@ export default function Home() {
<div className="space-y-6"> <div className="space-y-6">
{worksLoading ? ( {worksLoading ? (
Array.from({ length: 3 }).map((_, i) => ( Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-40 bg-cream dark:bg-dark-surface rounded-lg animate-pulse"></div> <div key={i} className="h-40 bg-card dark:bg-card rounded-lg animate-pulse"></div>
)) ))
) : ( ) : (
trendingWorks?.map((work) => ( trendingWorks?.map((work) => (
@ -129,11 +129,11 @@ export default function Home() {
<section className="py-12 md:py-16"> <section className="py-12 md:py-16">
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6"> <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream"> <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
Recently Translated Recently Translated
</h2> </h2>
<Link href="/explore?sort=recent"> <Link href="/explore?sort=recent">
<Button variant="link" className="text-russet dark:text-russet/90"> <Button variant="link" className="text-accent dark:text-accent">
See more See more
</Button> </Button>
</Link> </Link>
@ -142,7 +142,7 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{worksLoading ? ( {worksLoading ? (
Array.from({ length: 3 }).map((_, i) => ( Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-64 bg-cream dark:bg-dark-surface rounded-lg animate-pulse"></div> <div key={i} className="h-64 bg-card dark:bg-card rounded-lg animate-pulse"></div>
)) ))
) : ( ) : (
trendingWorks?.map((work) => ( trendingWorks?.map((work) => (
@ -154,22 +154,22 @@ export default function Home() {
</section> </section>
{/* Call to Action */} {/* Call to Action */}
<section className="py-16 md:py-24 bg-navy dark:bg-navy/80 text-cream"> <section className="py-16 md:py-24 bg-primary text-primary-foreground">
<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">
<h2 className="text-2xl md:text-3xl font-serif font-bold mb-4"> <h2 className="text-2xl md:text-3xl font-serif font-bold mb-4">
Contribute to Literary Heritage Contribute to Literary Heritage
</h2> </h2>
<p className="text-lg max-w-2xl mx-auto mb-8 text-cream/90"> <p className="text-lg max-w-2xl mx-auto mb-8 text-primary-foreground/90">
Share your translations, engage with other readers, and help preserve and spread literary works across languages. Share your translations, engage with other readers, and help preserve and spread literary works across languages.
</p> </p>
<div className="flex gap-4 justify-center flex-wrap"> <div className="flex gap-4 justify-center flex-wrap">
<Link href="/submit"> <Link href="/submit">
<Button size="lg" className="bg-russet hover:bg-russet/90 text-white"> <Button size="lg" className="bg-accent hover:bg-accent/90 text-accent-foreground">
Submit a Translation Submit a Translation
</Button> </Button>
</Link> </Link>
<Link href="/explore"> <Link href="/explore">
<Button size="lg" variant="outline" className="text-cream border-cream/30"> <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
Explore the Archive Explore the Archive
</Button> </Button>
</Link> </Link>