feat:UX and fix drinkkaart payment logic

apps/web/src/components/homepage/Info.tsx

@@ -88,9 +88,15 @@ export default function Info() {
 					</div>
 
 					{/* Main Title */}
-					<h2 className="font-['Intro',sans-serif] font-black text-6xl text-white uppercase tracking-tight md:text-8xl lg:text-9xl">
+					<h2
+						className="font-['Intro',sans-serif] font-black text-white uppercase tracking-tight"
+						style={{ fontSize: "clamp(1rem, 8vw + 1rem, 8rem)" }}
+					>
 						Ongedesemd
-						<span className="block text-5xl md:text-7xl lg:text-8xl">
+						<span
+							className="block"
+							style={{ fontSize: "clamp(1rem, 6vw + 1rem, 6rem)" }}
+						>
 							Brood?!
 						</span>
 					</h2>
@@ -110,8 +116,16 @@ export default function Info() {
 			</div>
 
 			{/* Content Section */}
-			<div className="w-full px-12 py-16">
-				<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
+			<div className="relative w-full px-12 py-16">
+				{/* Background texture */}
+				<div
+					className="pointer-events-none absolute inset-0 opacity-10"
+					style={{
+						backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+					}}
+				/>
+
+				<div className="relative mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
 					{/* Ongedesemd Brood Explanation - Full Width Special Treatment */}
 					<div className="relative flex flex-col gap-6 rounded-2xl border-2 border-white/20 bg-white/5 p-8 md:p-12">
 						<div className="absolute top-0 -left-4 h-full w-1 bg-gradient-to-b from-white/0 via-white/60 to-white/0" />