adding gif

index.html

@@ -52,12 +52,8 @@
 		<section class="panel visual">
 			<div class="placeholder">
 				<div class="placeholder-tag">Preview</div>
-				<div class="placeholder-graphic">
-					<div class="dial"></div>
-					<div class="antenna antenna-right"></div>
-					<div class="antenna antenna-left"></div>
-				</div>
-				<p class="placeholder-caption">Placeholder image for the future Reachy Mini clock view.</p>
+				<img src="reachy_mini_clock/assets/clock.gif" alt="Reachy Mini clock animation" class="clock-gif" />
+				<p class="placeholder-caption">Live preview of Reachy Mini showing the time with its antennas.</p>
 			</div>
 		</section>
 	</main>

style.css

@@ -179,52 +179,12 @@ h1 {
 	font-size: 0.85rem;
 }
 
-.placeholder-graphic {
-	position: relative;
-	aspect-ratio: 4 / 3;
-	background: radial-gradient(circle at 50% 40%, rgba(125, 211, 252, 0.1), transparent 60%),
-		radial-gradient(circle at 50% 70%, rgba(168, 85, 247, 0.12), transparent 55%),
-		#0b1021;
+.clock-gif {
+	display: block;
+	width: 100%;
 	border-radius: 14px;
-	display: grid;
-	place-items: center;
-}
-
-.dial {
-	width: 70%;
-	height: 70%;
-	border-radius: 50%;
-	border: 2px dashed rgba(255, 255, 255, 0.15);
-	box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.15);
-	position: relative;
-}
-
-.dial::after {
-	content: '';
-	position: absolute;
-	inset: 32%;
-	border-radius: 50%;
-	background: radial-gradient(circle, rgba(125, 211, 252, 0.25), transparent 70%);
-}
-
-.antenna {
-	position: absolute;
-	height: 34%;
-	width: 4px;
-	background: linear-gradient(180deg, rgba(125, 211, 252, 0.9), rgba(168, 85, 247, 0.9));
-	border-radius: 999px;
-	transform-origin: bottom center;
-	bottom: 15%;
-}
-
-.antenna-right {
-	transform: rotate(30deg);
-	right: 50%;
-}
-
-.antenna-left {
-	transform: rotate(-60deg);
-	left: 50%;
+	border: 1px solid var(--border);
+	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
 }
 
 .placeholder-caption {