""" Welcome post directive hero — split panel. Left: dog face (warmth). Right: solid #1974CE with 3-step START HERE call (action). 1600x900 + side-thumbnail safe (right panel content stays readable when cropped). Mode-agnostic — full bleed, vignette, baked-in contrast. """ from PIL import Image, ImageDraw, ImageFont import os OUT = os.path.dirname(os.path.abspath(__file__)) SRC = os.path.join(OUT, "welcome to the party.png") BLUE = (25, 116, 206, 255) BLUE_DARK = (13, 79, 138, 255) WHITE = (255, 255, 255, 255) INK = (26, 26, 46, 255) OUTFIT = os.path.join(OUT, "fonts", "Outfit-ExtraBold.ttf") DMSANS = os.path.join(OUT, "fonts", "DMSans-Medium.ttf") def draw_paw(d, cx, cy, scale, color): pad_w = int(scale * 0.95); pad_h = int(scale * 0.78) pad_top = cy + int(scale * 0.10) d.ellipse([cx - pad_w // 2, pad_top, cx + pad_w // 2, pad_top + pad_h], fill=color) toe_w = int(scale * 0.40); toe_h = int(scale * 0.50) inner_dx = int(scale * 0.22); inner_y = cy - int(scale * 0.55) d.ellipse([cx - inner_dx - toe_w // 2, inner_y, cx - inner_dx + toe_w // 2, inner_y + toe_h], fill=color) d.ellipse([cx + inner_dx - toe_w // 2, inner_y, cx + inner_dx + toe_w // 2, inner_y + toe_h], fill=color) outer_w = int(scale * 0.36); outer_h = int(scale * 0.46) outer_dx = int(scale * 0.62); outer_y = cy - int(scale * 0.32) d.ellipse([cx - outer_dx - outer_w // 2, outer_y, cx - outer_dx + outer_w // 2, outer_y + outer_h], fill=color) d.ellipse([cx + outer_dx - outer_w // 2, outer_y, cx + outer_dx + outer_w // 2, outer_y + outer_h], fill=color) def vertical_gradient(size, top_alpha, bottom_alpha, color=(0, 0, 0)): w, h = size grad = Image.new("RGBA", (1, h)) for y in range(h): t = y / max(h - 1, 1) t = t * t * (3 - 2 * t) a = int(top_alpha + (bottom_alpha - top_alpha) * t) grad.putpixel((0, y), color + (a,)) return grad.resize((w, h), Image.BILINEAR) def render(out_w=1600, out_h=900): # Right panel ~ 48% — slightly bigger than the side-thumbnail crop in Kanamé # so the action panel is still legible if the image gets squashed. right_w = int(out_w * 0.48) left_w = out_w - right_w canvas = Image.new("RGBA", (out_w, out_h), WHITE) # ---- LEFT: dog photo, scaled to cover left_w x out_h ---- src = Image.open(SRC).convert("RGBA") sw, sh = src.size scale = max(left_w / sw, out_h / sh) nw, nh = int(sw * scale), int(sh * scale) photo = src.resize((nw, nh), Image.LANCZOS) # Crop centered horizontally; bias slightly right to keep dog face mid-panel crop_x = (nw - left_w) // 2 crop_y = (nh - out_h) // 2 photo = photo.crop((crop_x, crop_y, crop_x + left_w, crop_y + out_h)) canvas.paste(photo, (0, 0)) # Soft right-edge gradient on photo so it blends into the blue panel edge_w = 90 edge = vertical_gradient((edge_w, out_h), 0, 0) # placeholder # build a horizontal gradient: transparent left → black 30% right edge = Image.new("RGBA", (edge_w, out_h)) ed = ImageDraw.Draw(edge) for x in range(edge_w): a = int(60 * (x / max(edge_w - 1, 1))) ed.line([(x, 0), (x, out_h)], fill=(0, 0, 0, a)) canvas.alpha_composite(edge, (left_w - edge_w, 0)) # Subtle 4-edge vignette on left photo only # (skip — keep it clean; the right panel handles edge bleed) # ---- RIGHT: solid blue panel ---- panel = Image.new("RGBA", (right_w, out_h), BLUE) # subtle inner highlight at top for depth pd = ImageDraw.Draw(panel) for y in range(80): a = int(18 * (1 - y / 80)) pd.line([(0, y), (right_w, y)], fill=(255, 255, 255, a)) canvas.paste(panel, (left_w, 0), panel) # ---- RIGHT PANEL CONTENT ---- d = ImageDraw.Draw(canvas) px = left_w + 60 # left padding inside blue panel inner_w = right_w - 120 # Eyebrow: paw + "THE DOG HOUSE" (brand identifier) eyebrow_y = 80 eyebrow_font = ImageFont.truetype(OUTFIT, 28) eyebrow = "THE DOG HOUSE" paw_size = 28 draw_paw(d, px + paw_size // 2, eyebrow_y + paw_size // 2 + 6, paw_size, WHITE) d.text((px + paw_size + 16, eyebrow_y - 2), eyebrow, font=eyebrow_font, fill=(255, 255, 255, 230)) # Big headline: "Start in 3 quick steps" (the action call) head_font = ImageFont.truetype(OUTFIT, 76) headline_lines = ["Start in 3", "quick steps"] head_y0 = eyebrow_y + 60 line_h = 80 for i, line in enumerate(headline_lines): d.text((px, head_y0 + i * line_h), line, font=head_font, fill=WHITE) # 3 numbered step rows steps = [ ("1", "Check your pup's profile"), ("2", "Sign your waivers"), ("3", "Book your first visit"), ] step_num_font = ImageFont.truetype(OUTFIT, 38) step_text_font = ImageFont.truetype(DMSANS, 26) try: step_text_font.set_variation_by_name("Medium") except Exception: pass step_y0 = head_y0 + len(headline_lines) * line_h + 40 step_gap = 70 circle_d = 50 for i, (num, label) in enumerate(steps): cy = step_y0 + i * step_gap # Numbered ring (white outline, transparent fill) d.ellipse( [px, cy, px + circle_d, cy + circle_d], outline=WHITE, width=3, ) # Number centered nb = step_num_font.getbbox(num) nw_t = nb[2] - nb[0] nh_t = nb[3] - nb[1] d.text( (px + circle_d // 2 - nw_t // 2 - nb[0], cy + circle_d // 2 - nh_t // 2 - nb[1]), num, font=step_num_font, fill=WHITE, ) # Label — vertical-center against the circle lb = step_text_font.getbbox(label) lh = lb[3] - lb[1] d.text( (px + circle_d + 20, cy + circle_d // 2 - lh // 2 - lb[1]), label, font=step_text_font, fill=(255, 255, 255, 240), ) # CTA chip at bottom — anchor a safe distance below the last step cta_font = ImageFont.truetype(OUTFIT, 28) cta_text = "Tap → My Dogs to start" cb = cta_font.getbbox(cta_text) cta_w = (cb[2] - cb[0]) + 56 cta_h = 56 cta_x = px cta_y = out_h - 80 - cta_h d.rounded_rectangle( [cta_x, cta_y, cta_x + cta_w, cta_y + cta_h], radius=cta_h // 2, fill=WHITE, ) d.text( (cta_x + 28, cta_y + (cta_h - (cb[3] - cb[1])) // 2 - cb[1]), cta_text, font=cta_font, fill=BLUE, ) return canvas img = render(1600, 900) img.convert("RGB").save( os.path.join(OUT, "welcome-hero-directive-1600x900.jpg"), "JPEG", quality=92, optimize=True, progressive=True, ) # Mode preview: how it looks at full width and at thumbnail size in the feed prev = Image.new("RGB", (1900, 1300), (250, 250, 250)) pd = ImageDraw.Draw(prev) prev.paste(img.convert("RGB").resize((1500, 844)), (200, 60)) # dark band pd.rectangle([0, 940, 1900, 1300], fill=(20, 22, 30)) # "thumbnail crop" simulation — Kanamé crops to ~square thumbnail showing center-right crop_thumb = img.crop((int(1600 * 0.30), 0, 1600, 900)).resize((300, 240)) prev.paste(crop_thumb.convert("RGB"), (1500, 970)) lbl = ImageFont.truetype(DMSANS, 22) pd.text((200, 30), "FULL POST VIEW (after CSS upgrade)", font=lbl, fill=(80, 80, 80)) pd.text((200, 970), "FEED THUMBNAIL CROP — action panel still readable", font=lbl, fill=(220, 220, 220)) prev.save(os.path.join(OUT, "_directive-preview.png"), optimize=True) print("Built:") for f in ["welcome-hero-directive-1600x900.jpg", "_directive-preview.png"]: p = os.path.join(OUT, f) print(f" {f} ({os.path.getsize(p)//1024} KB)")