diversi-tech · YaelVays · May 27, 2026
diff --git a/src/students/YWeiss/Card.tsx b/src/students/YWeiss/Card.tsx
@@ -0,0 +1,25 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function YWeissCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+
+      <div className={styles.windowHeader}>
+        <div className={styles.dots}>
+          <span className={styles.dotRed}></span>
+          <span className={styles.dotYellow}></span>
+          <span className={styles.dotGreen}></span>
+        </div>
+        <span className={styles.windowTitle}>system_error.log</span>
+      </div>
+
+      <div className={styles.cardBody}>
+        <div className={styles.codeIcon}>💻</div>
+        <h2 className={styles.title}>{student.jokeTitle}</h2>
+        <p className={styles.name}>{student.name}</p>
+        <div className={styles.actionBadge}>RUN CODE ▶</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/students/YWeiss/JokePage.tsx b/src/students/YWeiss/JokePage.tsx
@@ -0,0 +1,65 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function YWeissJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <div className={styles.mainContainer}>
+
+        <div className={styles.pageHeader}>
+          <div className={styles.glitchWrapper}>
+            <h1 className={styles.pageTitle}>⚡ ארבעת שלבי האבל והקוד ⚡</h1>
+          </div>
+          <p className={styles.intro}>
+            כל מתכנת עובר את מסלול הייסורים הבא בכל פעם שהוא כותב קוד חדש:
+          </p>
+        </div>
+
+        <div className={styles.stepsGrid}>
+
+          <div className={`${styles.stepCard} ${styles.step1}`}>
+            <div className={styles.stepNum}>01</div>
+            <div className={styles.stepIcon}>🚀</div>
+            <div className={styles.stepContent}>
+              <h3>שלב האופטימיות המוגזמת</h3>
+              <p>"הקוד שלי מושלם, הוא רץ חלק, אין סיכוי שיש פה באגים".</p>
+            </div>
+          </div>
+
+          <div className={`${styles.stepCard} ${styles.step2}`}>
+            <div className={styles.stepNum}>02</div>
+            <div className={styles.stepIcon}>🤯</div>
+            <div className={styles.stepContent}>
+              <h3>שלב ההכחשה</h3>
+              <p>"רגע, למה זה קרס? אצלי במחשב המקומי (Localhost) זה עבד מצוין, הבעיה בטוח בשרת".</p>
+            </div>
+          </div>
+
+          <div className={`${styles.stepCard} ${styles.step3}`}>
+            <div className={styles.stepNum}>03</div>
+            <div className={styles.stepIcon}>😭</div>
+            <div className={styles.stepContent}>
+              <h3>שלב הייאוש</h3>
+              <p>"מחקתי הכל, כתבתי מחדש, וזה עדיין לא עובד. אני לא מבין כלום, אני מחליף מקצוע".</p>
+            </div>
+          </div>
+
+          <div className={`${styles.stepCard} ${styles.step4}`}>
+            <div className={styles.stepNum}>04</div>
+            <div className={styles.stepIcon}>🫣</div>
+            <div className={styles.stepContent}>
+              <h3>שלב הפחד הבלתי מוסבר</h3>
+              <p>"הקוד פתאום עובד! הכל רץ חלק... ואני אין לי מושג ירוק למה זה עובד עכשיו. עדיף לא לגעת במקלדת יותר".</p>
+            </div>
+          </div>
+
+        </div>
+
+        <button className={styles.backBtn} onClick={onBack}>
+          <span>חזרה   ↩</span>
+        </button>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/students/YWeiss/styles.module.css b/src/students/YWeiss/styles.module.css
@@ -0,0 +1,220 @@
+/* ── קו עיצובי כללי - ניאון וסייבר ── */
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
+
+.card, .jokePage {
+  font-family: 'Fira Code', 'Segoe UI', monospace;
+  direction: rtl;
+}
+
+.card {
+  background: #1e1e2e;
+  border: 2px solid #bd93f9;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(189, 147, 249, 0.15);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cursor: pointer;
+  padding: 0 !important;
+}
+
+.card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 15px 30px rgba(189, 147, 249, 0.3);
+  border-color: #ff79c6;
+}
+
+.windowHeader {
+  background: #181825;
+  padding: 0.6rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #313244;
+}
+
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dotRed { background: #ff5555; }
+.dotYellow { background: #ffb86c; }
+.dotGreen { background: #50fa7b; }
+
+.windowTitle {
+  color: #6272a4;
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.cardBody {
+  padding: 1.5rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.codeIcon {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  animation: float 3s ease-in-out infinite;
+}
+
+.title {
+  color: #f8f8f2;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.6rem;
+  line-height: 1.4;
+}
+
+.name {
+  color: #8be9fd;
+  font-size: 0.9rem;
+  margin-bottom: 1.2rem;
+}
+
+.actionBadge {
+  background: #50fa7b;
+  color: #282a36;
+  font-weight: bold;
+  font-size: 0.8rem;
+  padding: 0.4rem 1.2rem;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(80, 250, 123, 0.3);
+}
+
+.jokePage {
+  background: #181825;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.mainContainer {
+  max-width: 800px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pageHeader {
+  text-align: center;
+}
+
+.pageTitle {
+  color: #ff79c6;
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin-bottom: 0.2rem;
+  text-shadow: 0 0 15px rgba(255, 121, 198, 0.4);
+}
+
+.intro {
+  color: #f8f8f2;
+  font-size: 0.95rem;
+  opacity: 0.9;
+  margin-bottom: 0.5rem;
+}
+
+.stepsGrid {
+  display: grid;
+  grid-template-columns: 1fr; 
+  gap: 0.8rem; 
+  width: 100%;
+}
+
+.stepCard {
+  background: #1e1e2e;
+  border-radius: 8px;
+  padding: 0.8rem 1.2rem; 
+  display: flex;
+  gap: 1.2rem;
+  align-items: center;
+  position: relative;
+  border: 1px solid #313244;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  transition: transform 0.2s;
+}
+
+.stepCard:hover {
+  transform: scale(1.01);
+}
+
+.stepNum {
+  position: absolute;
+  top: 0.4rem;
+  left: 1rem;
+  font-size: 1.8rem;
+  font-weight: 800;
+  opacity: 0.04;
+  color: #fff;
+}
+
+.stepIcon {
+  font-size: 1.6rem; 
+}
+
+.stepContent h3 {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin-bottom: 0.1rem;
+}
+
+.stepContent p {
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: #a6adc8;
+}
+
+.step1 { border-right: 4px solid #50fa7b; }
+.step1 h3 { color: #50fa7b; }
+
+.step2 { border-right: 4px solid #ffb86c; }
+.step2 h3 { color: #ffb86c; }
+
+.step3 { border-right: 4px solid #ff5555; }
+.step3 h3 { color: #ff5555; }
+
+.step4 { border-right: 4px solid #8be9fd; }
+.step4 h3 { color: #8be9fd; }
+
+.backBtn {
+  background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.6rem 2rem;
+  font-size: 0.85rem;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 5px 15px rgba(189, 147, 249, 0.3);
+  transition: all 0.2s;
+  font-family: inherit;
+  margin-top: 0.5rem;
+}
+
+.backBtn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(255, 121, 198, 0.6);
+  filter: brightness(1.1);
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-6px); }
+  100% { transform: translateY(0px); }
+}
diff --git a/src/students/index.ts b/src/students/index.ts
@@ -10,6 +10,9 @@ import RachelPanetJokePage from "./RachelPanet/JokePage";
 import EsterLewinJokePage from "./ester-lewin/JokerPage";
 import EsterLewinCard from "./ester-lewin/Card";
 
+import YWeissCard from "./YWeiss/Card";
+import YWeissJokePage from "./YWeiss/JokePage";
+
 
 // ⚠️ סדר הרשימה חייב להיות לפי סדר האלף-בית העברי לפי שם המשפחה.
 // כל תלמידה מוסיפה את עצמה במקום הנכון ידנית.
@@ -22,6 +25,13 @@ const students: Student[] = [
     CardComponent: DanaDuviCard,
     JokePageComponent: DanaDuviJokePage,
   },
+  {
+    id: "YWeiss",
+    name: "יעל וייס",
+    jokeTitle: "ארבעת השלבים של פיתוח חדש",
+    CardComponent: YWeissCard,
+    JokePageComponent: YWeissJokePage,
+  },
   {
     id: "chani-chanzin",
     name: "חני חנזין",