Refine the look and feel of the homepage call to action section

Updates the background and text colors, and button styles in Home.tsx using Tailwind CSS.

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/be264e36-0f0b-466e-85b6-5d251af4aa37.jpg
This commit is contained in:
mukimovd 2025-05-07 23:49:18 +00:00
parent 218c8ff1c1
commit fe7ce0bca1
2 changed files with 4 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

View File

@ -154,22 +154,22 @@ export default function Home() {
</section> </section>
{/* Call to Action */} {/* Call to Action */}
<section className="py-16 md:py-24 bg-primary text-primary-foreground"> <section className="py-16 md:py-24 bg-russet text-white">
<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-primary-foreground/90"> <p className="text-lg max-w-2xl mx-auto mb-8 text-white/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-accent hover:bg-accent/90 text-accent-foreground"> <Button size="lg" className="bg-white hover:bg-white/90 text-russet">
Submit a Translation Submit a Translation
</Button> </Button>
</Link> </Link>
<Link href="/explore"> <Link href="/explore">
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10"> <Button size="lg" variant="outline" className="text-white border-white/30 hover:bg-white/10">
Explore the Archive Explore the Archive
</Button> </Button>
</Link> </Link>