src/app/pages/welcome/welcome.component.css

@@ -1,8 +1,111 @@
 .welcome-shell {
   min-height: 100vh;
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: var(--size-xl);
+  position: relative;
+}
+
+.clouds-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 60px;
+  width: 100%;
+  max-width: 900px;
+  margin-bottom: var(--size-xl);
+  position: relative;
+  z-index: 1;
+}
+
+.plane {
+  position: relative;
+  width: 320px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
+}
+
+.plane-body {
+  width: 240%;
+  height: 240%;
+  object-fit: contain;
+  position: absolute;
+}
+
+.plane-gif {
+  width: 70px;
+  height: 70px;
+  object-fit: contain;
+  z-index: 10;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+  position: relative;
+  transform: translateX(-25px) translateY(15px);
+}
+
+.cloud {
+  position: relative;
+  width: 220px;
+  height: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
+}
+
+.cloud::before {
+  content: '';
+  position: absolute;
+  width: 90px;
+  height: 90px;
+  background: #ffffff;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  box-shadow: 55px 0 0 9px #ffffff, 110px 0 0 5px #ffffff, 27px -18px 0 13px #ffffff, 82px -13px 0 11px #ffffff;
+}
+
+.cloud::after {
+  content: '';
+  position: absolute;
+  width: 220px;
+  height: 45px;
+  background: #ffffff;
+  border-radius: 50px;
+  bottom: 0;
+  left: 0;
+}
+
+.cloud-gif {
+  width: 120px;
+  height: 80px;
+  object-fit: contain;
+  z-index: 10;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+  position: relative;
+}
+
+.gif-with-halo {
+  position: relative;
+  display: inline-block;
+}
+
+.gif-with-halo::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 15px;
+  border: 2px solid rgba(255, 215, 0, 0.7);
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+  z-index: 5;
 }
 
 .welcome-card {
@@ -69,11 +172,78 @@ p {
   margin-top: var(--size-xl);
 }
 
+.plane-left {
+  animation: float 3s ease-in-out infinite;
+}
+
+.cloud-left {
+  animation: float 3s ease-in-out infinite;
+  animation-delay: 0.25s;
+}
+
+.cloud-right {
+  animation: float 3s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
 @media (max-width: 768px) {
   .welcome-shell {
     padding: var(--size-lg);
   }
 
+  .clouds-container {
+    gap: 30px;
+    margin-bottom: var(--size-lg);
+  }
+
+  .plane {
+    width: 240px;
+    height: 110px;
+  }
+
+  .plane-gif {
+    width: 55px;
+    height: 55px;
+    transform: translateX(-20px) translateY(12px);
+  }
+
+  .cloud {
+    width: 170px;
+    height: 75px;
+  }
+
+  .cloud::before {
+    width: 65px;
+    height: 65px;
+    box-shadow: 40px 0 0 7px #ffffff, 80px 0 0 3px #ffffff, 20px -13px 0 10px #ffffff, 60px -10px 0 8px #ffffff;
+  }
+
+  .cloud::after {
+    width: 170px;
+    height: 38px;
+  }
+
+  .cloud-gif {
+    width: 90px;
+    height: 80px;
+  }
+
+  .gif-with-halo::before {
+    top: -8px;
+    width: 80px;
+    height: 12px;
+    border: 1.5px solid rgba(255, 215, 0, 0.7);
+  }
+
   .welcome-card {
     padding: var(--size-xl);
   }

src/app/pages/welcome/welcome.component.html

@@ -1,4 +1,18 @@
 <main class="welcome-shell">
+  <div class="clouds-container">
+    <div class="cloud cloud-left">
+      <img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
+    </div>
+    <div class="plane plane-left">
+      <img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
+      <img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
+    </div>
+    <div class="cloud cloud-right">
+      <div class="gif-with-halo">
+        <img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
+      </div>
+    </div>
+  </div>
   <section class="welcome-card">
     <h1>Welcome to NowChess</h1>
     <p>Pick a mode to begin.</p>