jeffemmett
/
AlertBayTrumpeter-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: resolve rendering issue with dynamic Tailwind classes 

Use static classes instead of dynamic template literals.

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0 2025-09-03 09:00:52 +00:00
parent 505ca98821
commit fcfde15b0d
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/contact/page.tsx
View File

@ -162,7 +162,8 @@ export default function ContactPage() {
<div> <div>
<h3 className="text-xl font-semibold text-slate-700 mb-4">Visit Alert Bay</h3> <h3 className="text-xl font-semibold text-slate-700 mb-4">Visit Alert Bay</h3>
<p className="text-slate-600 leading-relaxed"> <p className="text-slate-600 leading-relaxed">
Alert Bay is located on Cormorant Island in British Columbia, Canada. The community is rich in Indigenous culture and maritime heritage. Come explore the wilderness of Vancouver Island! Alert Bay is located on Cormorant Island in British Columbia, Canada. The community is rich in
Indigenous culture and maritime heritage. Come explore the wilderness of Vancouver Island!
</p> </p>
</div> </div>
</div> </div>

31
app/page.tsx
View File

@ -170,6 +170,28 @@ export default function HomePage() {
return images[index] || images[0] return images[index] || images[0]
} }
const getSponsorCardClasses = (index: number) => {
const cardClasses = [
{
card: "text-center hover:shadow-xl transition-all duration-300 border-2 hover:border-orange-300 bg-gradient-to-b from-white to-orange-50",
title: "text-xl font-bold text-orange-600 mb-3",
},
{
card: "text-center hover:shadow-xl transition-all duration-300 border-2 hover:border-amber-400 bg-gradient-to-b from-white to-amber-50",
title: "text-xl font-bold text-amber-600 mb-3",
},
{
card: "text-center hover:shadow-xl transition-all duration-300 border-2 hover:border-gray-400 bg-gradient-to-b from-white to-gray-50",
title: "text-xl font-bold text-gray-600 mb-3",
},
{
card: "text-center hover:shadow-xl transition-all duration-300 border-2 hover:border-yellow-400 bg-gradient-to-b from-white to-yellow-50",
title: "text-xl font-bold text-yellow-600 mb-3",
},
]
return cardClasses[index] || cardClasses[0]
}
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{/* Header */} {/* Header */}
@ -275,12 +297,9 @@ export default function HomePage() {
</div> </div>
) : ( ) : (
subscriptionProducts.slice(0, 4).map((product, index) => { subscriptionProducts.slice(0, 4).map((product, index) => {
const tierInfo = getSponsorTierInfo(index) const cardClasses = getSponsorCardClasses(index)
return ( return (
<Card <Card key={product.id} className={cardClasses.card}>
key={product.id}
className={`text-center hover:shadow-xl transition-all duration-300 border-2 hover:border-${tierInfo.borderColor} bg-gradient-to-b ${tierInfo.bgGradient}`}
>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="w-full h-48 relative mb-6 rounded-lg overflow-hidden shadow-md"> <div className="w-full h-48 relative mb-6 rounded-lg overflow-hidden shadow-md">
<Image <Image
@ -290,7 +309,7 @@ export default function HomePage() {
className="object-contain hover:scale-105 transition-transform duration-300" className="object-contain hover:scale-105 transition-transform duration-300"
/> />
</div> </div>
<h3 className={`text-xl font-bold text-${tierInfo.color}-600 mb-3`}>{product.name}</h3> <h3 className={cardClasses.title}>{product.name}</h3>
<p className="text-2xl font-semibold text-gray-800 mb-4"> <p className="text-2xl font-semibold text-gray-800 mb-4">
{formatPrice(product.price, product.currency)}/month {formatPrice(product.price, product.currency)}/month
</p> </p>