add visuals & design page

app/components/atropos-object.vue

@@ -1,9 +0,0 @@
-<template>
-  <h1 class="flex items-center justify-center min-h-screen">
-    <atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
-      <img src="/logo.svg" />
-      <img src="/logo.svg" />
-      <div>Tell us</div>
-    </atropos-component>
-  </h1>
-</template>

app/components/gameBox.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="w-96 m-6">
+    <atropos-component class="atropos game-box atropos-rotate-touch-scroll-y" rotate-touch="scroll-y" rotate-x-max="24"
+      rotate-y-max="24">
+
+      <div class="atropos-inner relative">
+        <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-96 relative" data-atropos-offset="-8" />
+        <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute bottom-0 inset-0 h-96 object-cover">
+        <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 self-end justify-self-end p-4">
+        <img src="/logo.svg" data-atropos-offset="0" width="70%"
+          class="logo absolute inset-0 self-center justify-self-center">
+        <!-- <img src="/play.svg" width="20%" class="absolute play"> -->
+      </div>
+      <span class="game-box-t" />
+      <span class="game-box-r" />
+      <span class="game-box-b" />
+      <span class="game-box-l" />
+    </atropos-component>
+  </div>
+</template>
+
+<script setup>
+const id = 'ES01A'
+</script>
+
+<style>
+.game-box .logo {
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+}
+
+.game-box {
+  --side-color: #004297;
+  --side-size: 32px;
+  aspect-ratio: 526 / 656;
+}
+
+.atropos-rotate {
+  position: relative;
+}
+
+.game-box .atropos-rotate:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: calc(100% + 8px);
+  height: calc(100% + 16px);
+  top: -8px;
+  background: #086ef4;
+  z-index: 1;
+}
+
+.atropos-inner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transform-style: preserve-3d;
+  transform: translateZ(0);
+  display: block;
+  z-index: 1;
+  position: relative;
+}
+
+.game-box-t,
+.game-box-r,
+.game-box-b,
+.game-box-l {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  position: absolute;
+  /* display: none; */
+}
+
+.game-box-t {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(90deg);
+  transform-origin: center top;
+  top: -8px;
+  transform: translateZ(-32px) rotateX(90deg);
+  transform-origin: center top;
+}
+
+.game-box-b {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  bottom: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(-90deg);
+  transform-origin: center bottom;
+}
+
+.game-box-r {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  right: -8px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(90deg);
+  transform-origin: right center;
+}
+
+.game-box-l {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  left: 0px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(-90deg);
+  transform-origin: left center;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 10.4%;
+    background: #a5a5a5;
+    left: 0;
+    top: 9px;
+  }
+}
+</style>

app/components/theObject.vue

@@ -0,0 +1,103 @@
+<template>
+  <h1 class="flex items-center justify-center min-h-screen">
+    <atropos-component class="my-atropos">
+      <span class="game-box-t" />
+      <span class="game-box-r" />
+      <span class="game-box-b" />
+      <span class="game-box-l" />
+      <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-60" data-atropos-offset="-8" />
+      <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover">
+      <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover">
+      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0">
+      <img src="/play.svg" width="20%" class="absolute play">
+    </atropos-component>
+  </h1>
+</template>
+
+<script setup>
+const id = 'ES01A'
+</script>
+
+<style>
+/* .atropos-inner,
+.game-box-bg {
+  width: 300px;
+  height: 300px;
+} */
+
+.game-box-t,
+.game-box-r,
+.game-box-b,
+.game-box-l {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  position: absolute;
+  /* display: none; */
+}
+
+.game-box-t {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(90deg);
+  transform-origin: center top;
+}
+
+.game-box-b {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  bottom: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(-90deg);
+  transform-origin: center bottom;
+}
+
+.game-box-r {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  right: -8px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(90deg);
+  transform-origin: right center;
+}
+
+.game-box-l {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  left: 0px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(-90deg);
+  transform-origin: left center;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 10.4%;
+    background: #a5a5a5;
+    left: 0;
+    top: 9px;
+  }
+}
+
+.atropos-rotate {
+  position: relative;
+}
+
+.atropos-rotate:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: calc(100% + 8px);
+  height: calc(100% + 16px);
+  top: -8px;
+  background: #086ef4;
+  z-index: 1;
+}
+</style>

app/pages/atropos.vue

@@ -1,3 +0,0 @@
-<template>
-  <AtroposObject />
-</template>

app/pages/design.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="mt-8 flex flex-wrap justify-center">
+    <div className="bg-page-dark-bg text-white">
+      <div className="bg-gradient-to-r from-primary to-primary-dark border-t-2 border-b-2 border-primary">
+        <div className="mt-8 flex flex-wrap justify-center">
+          <gameBox />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

public/play.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   height="800px"
+   width="800px"
+   version="1.1"
+   id="Capa_1"
+   viewBox="0 0 60 60"
+   xml:space="preserve"
+   sodipodi:docname="play.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs2">
+	
+	
+</defs><sodipodi:namedview
+   id="namedview2"
+   pagecolor="#505050"
+   bordercolor="#eeeeee"
+   borderopacity="1"
+   inkscape:showpageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#505050"
+   inkscape:zoom="0.26793938"
+   inkscape:cx="-141.82313"
+   inkscape:cy="227.66344"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+
+<g
+   id="g4"
+   transform="translate(9.7969913,-22.06049)"><circle
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.453259;stroke-miterlimit:2.3;stroke-dasharray:0.0906518, 0.498583;stroke-opacity:1"
+     id="path3"
+     cx="20.203009"
+     cy="52.06049"
+     r="30" /><path
+     sodipodi:type="star"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.97313;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+     id="path4"
+     inkscape:flatsided="false"
+     sodipodi:sides="3"
+     sodipodi:cx="-27.198643"
+     sodipodi:cy="-1.6298811"
+     sodipodi:r1="22.807875"
+     sodipodi:r2="11.403937"
+     sodipodi:arg1="1.2575201"
+     sodipodi:arg2="2.3047177"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="M -20.169779,20.067912 -34.836847,6.838154 -49.503915,-6.3916032 l 18.790841,-6.0871748 18.790839,-6.087174 -4.123772,19.31693243 z"
+     inkscape:transform-center-x="-3.9722134"
+     inkscape:transform-center-y="0.040241052"
+     transform="matrix(0.21341126,-0.77168628,0.66871372,0.24627362,26.125303,31.432826)" /></g></svg>