frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -6,73 +6,73 @@ import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";
 
 export interface WelcomeLetterOverlayProps {
-  onComplete: () => void;
+    onComplete: () => void;
-  userName: string;
+    userName: string;
 }
 
 export function WelcomeLetterOverlay({
-  onComplete,
+    onComplete,
-  userName,
+    userName,
 }: WelcomeLetterOverlayProps) {
-  const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
+    const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
-    "SEALED",
+        "SEALED",
-  );
+    );
-  const canvasRef = useRef<CanvasTools>(null);
+    const canvasRef = useRef<CanvasTools>(null);
 
-  useEffect(() => {
+    useEffect(() => {
-    if (revealState === "REVEALED" && canvasRef.current) {
+        if (revealState === "REVEALED" && canvasRef.current) {
-      const welcomeContent = getWelcomeLetterContent(userName);
+            const welcomeContent = getWelcomeLetterContent(userName);
-      canvasRef.current.loadData(welcomeContent);
+            canvasRef.current.loadData(welcomeContent);
-    }
+        }
-  }, [revealState, userName]);
+    }, [revealState, userName]);
 
-  return (
+    return (
-    <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
+        <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
-      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
+            <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
 
-      <div className="w-full max-w-4xl z-10 flex flex-col items-center">
+            <div className="w-full max-w-4xl z-10 flex flex-col items-center">
-        <AnimatePresence mode="wait">
+                <AnimatePresence mode="wait">
-          {revealState === "SEALED" && (
+                    {revealState === "SEALED" && (
-            <motion.div
+                        <motion.div
-              key="envelope"
+                            key="envelope"
-              initial={{ scale: 0.5, opacity: 0 }}
+                            initial={{ scale: 0.5, opacity: 0 }}
-              animate={{ scale: 0.8, opacity: 1 }}
+                            animate={{ scale: 0.8, opacity: 1 }}
-              exit={{
+                            exit={{
-                scale: 1,
+                                scale: 1,
-                opacity: 0,
+                                opacity: 0,
-                transition: { duration: 0.5, ease: "easeOut" },
+                                transition: { duration: 0.5, ease: "easeOut" },
-              }}
+                            }}
-              transition={{ duration: 4, delay: 1 }}
+                            transition={{ duration: 4, delay: 1 }}
-            >
+                        >
-              <EnvelopeReveal
+                            <EnvelopeReveal
-                recipient={userName}
+                                recipient={userName}
-                date={formatDate(new Date())}
+                                date={formatDate(new Date())}
-                onRevealComplete={() => setRevealState("REVEALED")}
+                                onRevealComplete={() => setRevealState("REVEALED")}
-                ignite={false}
+                                ignite={false}
-              />
+                            />
-            </motion.div>
+                        </motion.div>
-          )}
+                    )}
-        </AnimatePresence>
+                </AnimatePresence>
-        <div
+                <div
-          className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
+                    className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
-        >
+                >
-          <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
+                    <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
-            <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
+                        <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
-            <ComposeCanvas ref={canvasRef} readOnly />
+                        <ComposeCanvas ref={canvasRef} readOnly />
-          </div>
+                    </div>
 
-          <div className="flex justify-center mt-12">
+                    <div className="flex justify-center mt-12">
-            <button
+                        <button
-              type="button"
+                            type="button"
-              data-testid="dismiss-welcome-letter-btn"
+                            data-testid="dismiss-welcome-letter-btn"
-              onClick={onComplete}
+                            onClick={onComplete}
-              className="btn btn-accent opacity-80 px-12 shadow-lg"
+                            className="btn btn-base btn-xs btn-wide opacity-80 shadow-lg font-light tracking-wider"
-            >
+                        >
-              I'll see you
+                            I'll see you
-            </button>
+                        </button>
-          </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
+    );
-    </div>
-  );
 }

frontend/src/config/welcomeLetter.ts

@@ -1,4 +1,5 @@
 import type { CanvasJSON } from "../components/editor/ComposeCanvas";
+import trainImage from "../assets/screenshots/train.png";
 
 export function getWelcomeLetterContent(userName: string): CanvasJSON {
   return {
@@ -30,7 +31,7 @@ export function getWelcomeLetterContent(userName: string): CanvasJSON {
         originY: "top",
         left: 36,
         top: 36,
-        width: 608,
+        width: 720,
         height: 813.6,
         fill: "#111e67",
         stroke: null,
@@ -90,12 +91,12 @@ export function getWelcomeLetterContent(userName: string): CanvasJSON {
         globalCompositeOperation: "source-over",
         skewX: 0,
         skewY: 0,
-        src: "/screenshots/train.png",
+        src: trainImage,
         crossOrigin: null,
         filters: [],
       },
     ],
-    canvasWidth: 680,
+    canvasWidth: 700,
     canvasHeight: 900,
   };
 }

frontend/src/pages/Home.tsx

@@ -8,6 +8,7 @@ import {
 } from "motion/react";
 import { useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import letterSample from "../assets/screenshots/letter.webp";
 import Logo from "../components/Logo";
 import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
 import Saajan from "../components/ui/Saajan";
@@ -325,7 +326,7 @@ export default function Home() {
               <div className="mockup-phone w-[75vw] border-primary">
                 <div className="mockup-phone-camera"></div>
                 <div className="mockup-phone-display">
-                  <img alt="letter" src="/screenshots/letter.webp" />
+                  <img alt="letter" src={letterSample} />
                 </div>
               </div>
             </motion.div>