From e6861b4f8002a4d4bfa02b75c8fafd02ca2d9a58 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 14 Sep 2026 21:41:44 +0000 Subject: [PATCH] Fix the paper plane's clipped nose and its trail junction Re-extract the plane from the design with a wider region, keeping only the plane's connected pixels so the nose is intact and no trail dashes come along. The trail now ends where it meets the tail's edge, on the same straight run as the last dashes, instead of hooking down to the tip. Co-authored-by: Kent C. Dodds --- app/routes/_app+/_marketing+/index.tsx | 10 ++++++---- public/images/paper-plane.png | Bin 1397 -> 2224 bytes 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx index 9bc7122..17e514a 100644 --- a/app/routes/_app+/_marketing+/index.tsx +++ b/app/routes/_app+/_marketing+/index.tsx @@ -65,11 +65,12 @@ const plans = [ * Paper plane and its dashed flight path, traced from the design at 1440px. * Coordinates are relative to the "How it works" container: x from the * container's left padding edge, y from the top of the heading. The path - * starts at the plane's tail so the two always meet. + * ends where it meets the tail's edge in the design, on the same straight + * run as the last few dashes, so the two always meet without a kink. */ -const PLANE = { x: 1009, y: 136, width: 117, height: 93 } +const PLANE = { x: 1009, y: 135, width: 158, height: 102 } const TRAIL_PATH = - 'M1049 204C1045 203 1040 198 1025 200C1011 202 982 209 962 216C942 223 921 230 904 242C887 254 870 271 862 289C855 308 854 333 859 353C864 373 878 401 893 408C908 415 941 410 950 397C959 385 956 352 948 333C940 315 921 298 904 286C887 274 865 266 844 260C824 254 803 250 781 249C760 248 736 250 715 254C694 258 673 264 653 273C633 282 614 293 597 306C580 319 564 334 549 350C534 366 520 383 508 402C496 421 486 441 477 462C468 483 461 505 455 527C449 549 446 571 442 593C438 615 437 639 432 661C428 683 423 706 415 727C407 748 399 768 386 786C374 804 358 822 340 835C323 848 303 859 281 865C260 871 229 871 211 870C193 870 189 868 172 862C155 856 131 846 111 836C92 826 74 812 55 800C37 788 19 776 0 765C-19 754 -41 741 -57 733C-73 725 -91 720 -98 717' + 'M1046 196C1039 197 1032 199 1025 200C1011 202 982 209 962 216C942 223 921 230 904 242C887 254 870 271 862 289C855 308 854 333 859 353C864 373 878 401 893 408C908 415 941 410 950 397C959 385 956 352 948 333C940 315 921 298 904 286C887 274 865 266 844 260C824 254 803 250 781 249C760 248 736 250 715 254C694 258 673 264 653 273C633 282 614 293 597 306C580 319 564 334 549 350C534 366 520 383 508 402C496 421 486 441 477 462C468 483 461 505 455 527C449 549 446 571 442 593C438 615 437 639 432 661C428 683 423 706 415 727C407 748 399 768 386 786C374 804 358 822 340 835C323 848 303 859 281 865C260 871 229 871 211 870C193 870 189 868 172 862C155 856 131 846 111 836C92 826 74 812 55 800C37 788 19 776 0 765C-19 754 -41 741 -57 733C-73 725 -91 720 -98 717' // The drawing spans from 120px left of the container to its right edge. const TRAIL_VIEWBOX = { x: -120, y: 100, width: 1336, height: 800 } @@ -248,7 +249,8 @@ export default function Index() { key={step.title} className={cn( 'mx-auto flex max-w-[21rem] flex-col items-center text-center md:max-w-[20.5rem]', - index % 3 === 1 && 'md:-mt-[7.75rem]', + // Only stagger where the plane's loop leaves room for it. + index % 3 === 1 && 'lg:-mt-[7.75rem]', )} > diff --git a/public/images/paper-plane.png b/public/images/paper-plane.png index 55f48c667129805bf8ad11111f5c9ed7fa02527a..cc56d1942fec203a12ab781afd54ab07ed04cefa 100644 GIT binary patch literal 2224 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