Revamp invite page banner styling and layout.

Updated the invite page banner to use a more dynamic and visually appealing design with a background image or fallback styling. Added a text overlay for improved readability and enhanced the fallback display when an image is unavailable.
This commit is contained in:
2025-03-14 17:00:10 +01:00
parent f65500902c
commit cb092cd643

View File

@@ -107,7 +107,7 @@ const InvitationPage = () => {
return ( return (
<div className="min-h-screen relative overflow-hidden" style={pageStyle}> <div className="min-h-screen relative overflow-hidden" style={pageStyle}>
<div <div
className="absolute inset-0 bg-no-repeat bg-[top_right] bg-cover bg-fixed opacity-15" className="absolute inset-0 bg-no-repeat bg-[top_right] bg-cover bg-fixed opacity-10"
style={{ style={{
backgroundImage: `url(${getAssetUrl("background-h")})`, backgroundImage: `url(${getAssetUrl("background-h")})`,
}} }}
@@ -122,7 +122,7 @@ const InvitationPage = () => {
</div> </div>
<div className="mx-auto max-w-4xl px-4 py-6"> <div className="mx-auto max-w-4xl px-4 py-6">
{/* Wooden Sign Title */} {/* Banner */}
<div className="mx-auto max-w-6xl px-0 py-10"> <div className="mx-auto max-w-6xl px-0 py-10">
<div <div
className="relative overflow-hidden rounded-xl bg-cover bg-center" className="relative overflow-hidden rounded-xl bg-cover bg-center"