Polish classic matcha landing art

src/app/c/[slug]/LandingClient.tsx

@@ -31,7 +31,7 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
 
   return (
     <MobileShell>
-      <main className="relative flex min-h-dvh flex-col overflow-hidden bg-[#EDE5D2] text-[#1B1A14]">
+      <main className="relative flex h-dvh max-h-dvh flex-col overflow-hidden bg-[#EDE5D2] text-[#1B1A14]">
       <div
         className="pointer-events-none absolute inset-0"
         style={{
@@ -40,8 +40,8 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
         }}
       />
 
-      <section className="relative flex flex-1 flex-col items-center px-7 pt-20 text-center">
-        <div className="mb-8 flex items-center justify-center gap-3 font-serif text-[15px] italic text-[#5A523F]">
+      <section className="relative flex min-h-0 flex-1 flex-col items-center px-7 pt-10 text-center [@media(max-height:720px)]:pt-6">
+        <div className="mb-5 flex items-center justify-center gap-3 font-serif text-[15px] italic text-[#5A523F] [@media(max-height:720px)]:mb-3">
           <span className="h-px w-6 bg-[#5A523F]/55" aria-hidden />
           {campaign.restaurantName}
           <span className="h-px w-6 bg-[#5A523F]/55" aria-hidden />
@@ -49,17 +49,17 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
 
         <MatchaCircle />
 
-        <h1 className="text-display mt-9 text-[38px] text-[#1B1A14]">
+        <h1 className="text-display mt-5 text-[36px] text-[#1B1A14] [@media(max-height:720px)]:mt-3 [@media(max-height:720px)]:text-[32px]">
           Free matcha,
           <br />
           <em className="text-[#4A5C32]">on the house</em>
         </h1>
 
-        <p className="mx-auto mt-5 max-w-[294px] font-serif text-[14.5px] leading-[1.55] text-[#5A6E3F]">
+        <p className="mx-auto mt-3 max-w-[294px] font-serif text-[14.5px] leading-[1.55] text-[#5A6E3F] [@media(max-height:720px)]:mt-2">
           Give us a quick guided video food review, get a free matcha.
         </p>
 
-        <label className="mx-auto mt-6 flex w-full max-w-[324px] cursor-pointer items-start gap-3 rounded-[14px] border border-[#78694B]/20 bg-[#F5EDD9] px-4 py-3.5 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]">
+        <label className="mx-auto mt-4 flex w-full max-w-[324px] cursor-pointer items-start gap-3 rounded-[14px] border border-[#78694B]/20 bg-[#F5EDD9] px-4 py-3.5 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.6)] [@media(max-height:720px)]:mt-3 [@media(max-height:720px)]:py-3">
           <input
             type="checkbox"
             checked={consentAccepted}
@@ -72,7 +72,7 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
         </label>
       </section>
 
-      <footer className="relative px-7 pb-[30px] pt-3">
+      <footer className="relative px-7 pb-5 pt-2 [@media(max-height:720px)]:pb-4">
         <Button
           onClick={handleStart}
           disabled={!consentAccepted}

src/components/MatchaCircle.tsx

@@ -24,115 +24,213 @@ export function MatchaCircle() {
   return (
     <div
       aria-hidden
-      className="mx-auto my-4"
+      className="mx-auto my-2"
       style={{
         width: 210,
-        height: 199.5,
-        filter: 'drop-shadow(0 8px 14px rgba(50,60,25,0.18))',
+        height: 283.5,
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
       }}
     >
-      <svg width="210" height="199.5" viewBox="0 0 200 190" className="block">
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '40%',
+          width: 231,
+          height: 189,
+          transform: 'translate(-50%, -50%)',
+          background:
+            'radial-gradient(ellipse at center, rgba(232,180,110,0.32) 0%, rgba(232,180,110,0.12) 35%, rgba(232,180,110,0) 70%)',
+          filter: 'blur(2px)',
+          pointerEvents: 'none',
+          animation: 'warmthPulse 6s ease-in-out infinite',
+        }}
+      />
+
+      <svg
+        width="147"
+        height="136.5"
+        viewBox="0 0 120 110"
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: -10,
+          transform: 'translateX(-50%)',
+          pointerEvents: 'none',
+          opacity: 1,
+        }}
+      >
         <defs>
-          <linearGradient id="matchaSurface" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#7A9242" />
-            <stop offset="40%" stopColor="#9BB75A" />
-            <stop offset="100%" stopColor="#82A047" />
-          </linearGradient>
-          <radialGradient id="surfaceGlow" cx="42%" cy="35%" r="65%">
-            <stop offset="0%" stopColor="rgba(190,215,130,0.55)" />
-            <stop offset="100%" stopColor="rgba(190,215,130,0)" />
-          </radialGradient>
-          <linearGradient id="ceramicBody" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="#F0E5C8" />
-            <stop offset="20%" stopColor="#EADDB8" />
-            <stop offset="55%" stopColor="#D9C89C" />
-            <stop offset="85%" stopColor="#B89F75" />
-            <stop offset="100%" stopColor="#9C8559" />
+          <linearGradient id="steamFade" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="rgba(120,100,70,0)" />
+            <stop offset="35%" stopColor="rgba(120,100,70,0.85)" />
+            <stop offset="100%" stopColor="rgba(120,100,70,0.0)" />
           </linearGradient>
-          <filter id="grain">
-            <feTurbulence type="fractalNoise" baseFrequency="2.4" numOctaves="2" seed="7" />
-            <feColorMatrix
-              values="0 0 0 0 0.45
-                      0 0 0 0 0.55
-                      0 0 0 0 0.25
-                      0 0 0 0.18 0"
-            />
-            <feComposite in2="SourceGraphic" operator="in" />
+          <filter id="steamBlur">
+            <feGaussianBlur stdDeviation="0.8" />
           </filter>
-          <clipPath id="liquidClip">
-            <ellipse cx="100" cy="62" rx="64" ry="14" />
-          </clipPath>
         </defs>
+        <g filter="url(#steamBlur)">
+          <path
+            className="steam-wisp s1"
+            d="M 50 105 C 44 88, 56 76, 50 60 C 44 44, 56 30, 52 14"
+            fill="none"
+            stroke="url(#steamFade)"
+            strokeLinecap="round"
+            strokeWidth="4"
+          />
+          <path
+            className="steam-wisp s2"
+            d="M 64 105 C 70 86, 58 72, 66 56 C 74 40, 62 24, 70 8"
+            fill="none"
+            stroke="url(#steamFade)"
+            strokeLinecap="round"
+            strokeWidth="3.4"
+          />
+          <path
+            className="steam-wisp s3"
+            d="M 76 105 C 80 90, 70 78, 78 62 C 84 50, 76 36, 82 22"
+            fill="none"
+            stroke="url(#steamFade)"
+            strokeLinecap="round"
+            strokeWidth="3"
+          />
+        </g>
+      </svg>
 
-        <ellipse cx="100" cy="178" rx="62" ry="4" fill="rgba(50,55,25,0.18)" />
+      <style>{`
+        @keyframes warmthPulse {
+          0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
+          50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
+        }
+        @keyframes steamRise {
+          0%   { transform: translateY(8px) translateX(0px); opacity: 0; }
+          15%  { opacity: 0.9; }
+          70%  { opacity: 0.6; }
+          100% { transform: translateY(-14px) translateX(2px); opacity: 0; }
+        }
+        .steam-wisp {
+          transform-origin: 50% 100%;
+          animation: steamRise 4.2s ease-in-out infinite;
+        }
+        .steam-wisp.s1 { animation-delay: 0s; }
+        .steam-wisp.s2 { animation-delay: 1.2s; animation-duration: 4.6s; }
+        .steam-wisp.s3 { animation-delay: 2.3s; animation-duration: 3.8s; }
+      `}</style>
 
-        <path
-          d="M 158 72 C 196 76, 198 132, 148 132 L 148 124 C 184 124, 184 84, 158 80 Z"
-          fill="url(#ceramicBody)"
-          stroke="rgba(80,55,30,0.45)"
-          strokeLinejoin="round"
-          strokeWidth="0.8"
-        />
+      <div
+        style={{
+          width: 210,
+          height: 199.5,
+          filter: 'drop-shadow(0 8px 14px rgba(50,60,25,0.18))',
+        }}
+      >
+        <svg width="210" height="199.5" viewBox="0 0 200 190" className="block">
+          <defs>
+            <linearGradient id="matchaSurface" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="#7A9242" />
+              <stop offset="40%" stopColor="#9BB75A" />
+              <stop offset="100%" stopColor="#82A047" />
+            </linearGradient>
+            <radialGradient id="surfaceGlow" cx="42%" cy="35%" r="65%">
+              <stop offset="0%" stopColor="rgba(190,215,130,0.55)" />
+              <stop offset="100%" stopColor="rgba(190,215,130,0)" />
+            </radialGradient>
+            <linearGradient id="ceramicBody" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#F0E5C8" />
+              <stop offset="20%" stopColor="#EADDB8" />
+              <stop offset="55%" stopColor="#D9C89C" />
+              <stop offset="85%" stopColor="#B89F75" />
+              <stop offset="100%" stopColor="#9C8559" />
+            </linearGradient>
+            <filter id="grain">
+              <feTurbulence type="fractalNoise" baseFrequency="2.4" numOctaves="2" seed="7" />
+              <feColorMatrix
+                values="0 0 0 0 0.45
+                        0 0 0 0 0.55
+                        0 0 0 0 0.25
+                        0 0 0 0.18 0"
+              />
+              <feComposite in2="SourceGraphic" operator="in" />
+            </filter>
+            <clipPath id="liquidClip">
+              <ellipse cx="100" cy="62" rx="64" ry="14" />
+            </clipPath>
+          </defs>
 
-        <path
-          d="M 36 60 C 30 90, 38 130, 70 158 L 130 158 C 162 130, 170 90, 164 60 A 64 14 0 0 1 36 60 Z"
-          fill="url(#ceramicBody)"
-        />
+          <ellipse cx="100" cy="178" rx="62" ry="4" fill="rgba(50,55,25,0.18)" />
 
-        <g opacity="0.18" stroke="rgba(80,55,30,1)" strokeWidth="0.6" fill="none">
-          <path d="M 50 70 Q 46 110, 64 152" />
-          <path d="M 70 64 Q 66 110, 78 156" />
-          <path d="M 130 64 Q 134 110, 122 156" />
-          <path d="M 150 70 Q 154 110, 136 152" />
-        </g>
+          <path
+            d="M 158 72 C 196 76, 198 132, 148 132 L 148 124 C 184 124, 184 84, 158 80 Z"
+            fill="url(#ceramicBody)"
+            stroke="rgba(80,55,30,0.45)"
+            strokeLinejoin="round"
+            strokeWidth="0.8"
+          />
 
-        <path
-          d="M 38 64 C 32 92, 39 130, 66 156 L 76 156 C 54 130, 47 95, 50 66 Z"
-          fill="rgba(255,250,225,0.35)"
-        />
+          <path
+            d="M 36 60 C 30 90, 38 130, 70 158 L 130 158 C 162 130, 170 90, 164 60 A 64 14 0 0 1 36 60 Z"
+            fill="url(#ceramicBody)"
+          />
 
-        <ellipse
-          cx="100"
-          cy="60"
-          rx="64"
-          ry="14"
-          fill="#E8DBB6"
-          stroke="rgba(80,55,30,0.5)"
-          strokeWidth="0.9"
-        />
-        <ellipse cx="100" cy="61" rx="60" ry="12" fill="#3F5226" />
-        <ellipse cx="100" cy="62" rx="60" ry="12" fill="url(#matchaSurface)" />
-        <ellipse
-          cx="100"
-          cy="62"
-          rx="60"
-          ry="12"
-          fill="url(#matchaSurface)"
-          filter="url(#grain)"
-          opacity="0.55"
-          clipPath="url(#liquidClip)"
-        />
-        <ellipse cx="100" cy="62" rx="60" ry="12" fill="url(#surfaceGlow)" />
+          <g opacity="0.18" stroke="rgba(80,55,30,1)" strokeWidth="0.6" fill="none">
+            <path d="M 50 70 Q 46 110, 64 152" />
+            <path d="M 70 64 Q 66 110, 78 156" />
+            <path d="M 130 64 Q 134 110, 122 156" />
+            <path d="M 150 70 Q 154 110, 136 152" />
+          </g>
 
-        <path
-          d="M 40 60 A 60 12 0 0 1 160 60 L 160 64 A 60 9 0 0 0 40 64 Z"
-          fill="rgba(40,55,20,0.35)"
-        />
+          <path
+            d="M 38 64 C 32 92, 39 130, 66 156 L 76 156 C 54 130, 47 95, 50 66 Z"
+            fill="rgba(255,250,225,0.35)"
+          />
 
-        <g clipPath="url(#liquidClip)">
-          {foamBubbles.map(([x, y, r], index) => (
-            <circle key={index} cx={x} cy={y} r={r} fill="rgba(240,245,210,0.9)" />
-          ))}
-        </g>
+          <ellipse
+            cx="100"
+            cy="60"
+            rx="64"
+            ry="14"
+            fill="#E8DBB6"
+            stroke="rgba(80,55,30,0.5)"
+            strokeWidth="0.9"
+          />
+          <ellipse cx="100" cy="61" rx="60" ry="12" fill="#3F5226" />
+          <ellipse cx="100" cy="62" rx="60" ry="12" fill="url(#matchaSurface)" />
+          <ellipse
+            cx="100"
+            cy="62"
+            rx="60"
+            ry="12"
+            fill="url(#matchaSurface)"
+            filter="url(#grain)"
+            opacity="0.55"
+            clipPath="url(#liquidClip)"
+          />
+          <ellipse cx="100" cy="62" rx="60" ry="12" fill="url(#surfaceGlow)" />
 
-        <path
-          d="M 78 62 Q 88 56 100 62 T 122 62"
-          fill="none"
-          stroke="rgba(245,250,215,0.95)"
-          strokeLinecap="round"
-          strokeWidth="2.4"
-        />
-      </svg>
+          <path
+            d="M 40 60 A 60 12 0 0 1 160 60 L 160 64 A 60 9 0 0 0 40 64 Z"
+            fill="rgba(40,55,20,0.35)"
+          />
+
+          <g clipPath="url(#liquidClip)">
+            {foamBubbles.map(([x, y, r], index) => (
+              <circle key={index} cx={x} cy={y} r={r} fill="rgba(240,245,210,0.9)" />
+            ))}
+          </g>
+
+          <path
+            d="M 78 62 Q 88 56 100 62 T 122 62"
+            fill="none"
+            stroke="rgba(245,250,215,0.95)"
+            strokeLinecap="round"
+            strokeWidth="2.4"
+          />
+        </svg>
+      </div>
     </div>
   );
 }