update

frontend/src/components/landing/LandingPageTemplate.jsx

@@ -44,6 +44,11 @@ export default function LandingPageTemplate({
 
     const iframeSrc = ctaFormPublicId ? `/embed/cta/${ctaFormPublicId}` : null;
 
+    const contentMax = preview ? 'max-w-none px-3 sm:px-4' : 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8';
+    const twoCol = preview
+        ? 'md:grid-cols-[1fr_minmax(260px,320px)]'
+        : 'lg:grid-cols-[1fr_minmax(300px,380px)]';
+
     return (
         <div
             className={cn(
@@ -52,42 +57,37 @@ export default function LandingPageTemplate({
                 className
             )}
         >
-            {/* Banner */}
-            <div className="relative w-full bg-gradient-to-r from-violet-700 to-indigo-800">
+            {/* Hero banner ~40% viewport height */}
+            <div className="relative w-full min-h-[40vh] min-h-[40dvh] bg-gradient-to-br from-violet-700 via-violet-800 to-indigo-900">
                 {bannerUrl ? (
                     <img
                         src={bannerUrl}
                         alt=""
-                        className="w-full h-36 sm:h-44 md:h-52 object-cover"
+                        className="absolute inset-0 h-full w-full object-cover"
                     />
-                ) : (
-                    <div className="w-full h-36 sm:h-44 md:h-52 bg-gradient-to-r from-violet-700 to-indigo-800" />
-                )}
+                ) : null}
+                <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/20 pointer-events-none" />
+
                 {logoUrl ? (
-                    <div className="absolute left-4 sm:left-8 bottom-0 translate-y-1/2">
+                    <div className="absolute top-5 left-4 sm:top-6 sm:left-6 lg:top-8 lg:left-8 z-10">
                         <img
                             src={logoUrl}
                             alt="Logo"
-                            className="h-14 sm:h-16 w-auto max-w-[10rem] object-contain bg-white rounded-lg p-2 shadow-md border border-slate-100"
+                            className="h-[4.5rem] sm:h-24 lg:h-28 w-auto max-w-[11rem] sm:max-w-[13rem] object-contain bg-white/95 rounded-xl p-2.5 sm:p-3 shadow-lg border border-white/80"
                         />
                     </div>
                 ) : null}
             </div>
 
-            <div className={cn(
-                logoUrl ? 'pt-12 sm:pt-14' : 'pt-8',
-                preview ? 'max-w-none px-3 sm:px-4' : 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8'
-            )}>
+            <div className={cn('relative', contentMax)}>
                 <div
                     className={cn(
-                        'grid gap-8 py-6 sm:py-8 items-start',
-                        preview
-                            ? 'md:grid-cols-[1fr_minmax(240px,300px)] md:gap-8'
-                            : 'lg:grid-cols-[1fr_minmax(280px,360px)] lg:gap-12 py-8 lg:py-12'
+                        'grid gap-8 lg:gap-10 items-start pb-8 sm:pb-10 pt-6 sm:pt-8',
+                        twoCol
                     )}
                 >
                     {/* Left: hero + benefits */}
-                    <div className="space-y-8">
+                    <div className="space-y-8 min-w-0">
                         <div>
                             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-900 leading-tight tracking-tight">
                                 {c.headline}
@@ -116,26 +116,30 @@ export default function LandingPageTemplate({
                         </div>
                     </div>
 
-                    {/* Right: form card */}
-                    <div className="rounded-2xl border border-slate-200 bg-slate-50/80 p-5 sm:p-6 shadow-sm">
-                        <h2 className="text-xl font-bold text-slate-900">{c.form_heading}</h2>
-                        {c.form_subtext ? (
-                            <p className="mt-2 text-sm text-slate-600 leading-relaxed">{c.form_subtext}</p>
-                        ) : null}
-                        <div className="mt-5 min-h-[280px] rounded-xl overflow-hidden bg-white border border-slate-100">
-                            {iframeSrc ? (
-                                <iframe
-                                    src={iframeSrc}
-                                    title={c.form_heading}
-                                    className="w-full border-0"
-                                    style={{ minHeight: '320px', height: '360px' }}
-                                    loading="lazy"
-                                />
-                            ) : (
-                                <div className="flex items-center justify-center h-72 text-sm text-slate-400 px-4 text-center">
-                                    Select a CTA form to show the booking area
-                                </div>
-                            )}
+                    {/* Right: form card — overlaps banner */}
+                    <div className="relative z-20 -mt-24 sm:-mt-28 md:-mt-32 lg:-mt-36">
+                        <div className="rounded-2xl border border-slate-200/90 bg-white p-5 sm:p-6 shadow-xl shadow-slate-300/40">
+                            <h2 className="text-xl font-bold text-slate-900">{c.form_heading}</h2>
+                            {c.form_subtext ? (
+                                <p className="mt-2 text-sm text-slate-600 leading-relaxed">
+                                    {c.form_subtext}
+                                </p>
+                            ) : null}
+                            <div className="mt-5 min-h-[280px] rounded-xl overflow-hidden bg-white border border-slate-100">
+                                {iframeSrc ? (
+                                    <iframe
+                                        src={iframeSrc}
+                                        title={c.form_heading}
+                                        className="w-full border-0"
+                                        style={{ minHeight: '320px', height: '360px' }}
+                                        loading="lazy"
+                                    />
+                                ) : (
+                                    <div className="flex items-center justify-center h-72 text-sm text-slate-400 px-4 text-center">
+                                        Select a CTA form to show the booking area
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>