frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -66,7 +66,7 @@ export function WelcomeLetterOverlay({
                             type="button"
                             data-testid="dismiss-welcome-letter-btn"
                             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
                         </button>

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/About.tsx

@@ -25,6 +25,7 @@ import { ReactLenis } from "lenis/react";
 import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import stamp from "../assets/envelope/stamp.png";
+import e2eDiag from "../assets/screenshots/e2e.svg";
 import Logo from "../components/Logo";
 import { Modal } from "../components/ui/Modal";
 
@@ -326,11 +327,7 @@ function SpecsSection() {
 
         <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
           <div className="w-full bg-paper rounded-md p-6">
-                        <img
+            <img src={e2eDiag} width={"100%"} alt="pi ku e2e diagram" />
-                            src="/screenshots/e2e.svg"
-                            width={"100%"}
-                            alt="pi ku e2e diagram"
-                        />
           </div>
         </Modal>
 

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>