add page description as profile content

index.html

@@ -21,6 +21,14 @@
         <img alt="User Avatar" src="https://i.pravatar.cc/300">
       </div>
     </div>
+    <div class="content">
+      <p>
+        This demo showcases the Achievibit profile cover image in action, brought to life using Phaser. Instead of a simple static image, the cover transforms into a fun, interactive platformer where users can explore their personalized "layer." The layer acts as a home base, reflecting the user’s faction and decorated with trophies and characters based on their achievements.
+      </p>
+      <p>
+        Navigate through your custom environment, uncover hidden surprises, and get a taste of how your accomplishments come to life in this dynamic cover experience. This demo offers a glimpse into how profile covers can be more than just visuals—they can be adventures!
+      </p>
+    </div>
     <script type="module" src="src/main.ts"></script>
   </body>
 

scss/style.scss

@@ -1,9 +1,12 @@
 html,
 body {
+  --avatar-size: 150px;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
 
-  // align-items: center;
+  // justify-content: center;
+
+  align-items: center;
 
   width: 100dvw;
   height: 100dvh;
@@ -25,11 +28,17 @@ canvas {
   box-shadow: rgb(0 0 0 / 50%) 0 5px 10px;
 }
 
+.content {
+  margin-block-start: calc(var(--avatar-size) / 2);
+  padding: 0 20px;
+
+  color: rgb(131 130 130);
+}
+
 .user-avatar {
-  --size: 150px;
   position: absolute;
-  inset-block-start: calc(100dvh / 2 - var(--size) / 2);
-  inset-inline-start: calc(50% - var(--size) / 2);
+  inset-block-start: calc(100dvh / 2 - var(--avatar-size) / 2);
+  inset-inline-start: calc(50% - var(--avatar-size) / 2);
 
   width: 150px;
   height: 150px;