better zoomable img + back with steps

Author: guim4dev

src/components/zoomable-image/zoomable-image.css

@@ -1,15 +1,23 @@
 .Zoom-Image-Container {
   transition: transform .2s; /* Animation */
   padding: 10px;
-  background-color: white;
   z-index: 90000;
   overflow: visible;
   position: relative;
 }
 .Zoom-Image-Container img {
-	width:100%;
-	height:auto;
+  width: 100%;
+  transition: transform 0.25s ease;
+  cursor: zoom-in;
+  background-color: white;
 }
-.Zoom-Image-Container:hover {
+
+.Zoom-Image-Container input[type=checkbox] {
+  display: none
+}
+
+.Zoom-Image-Container input[type=checkbox]:checked~img {
   transform: scale(3);
+  cursor: zoom-out;
+  background-color: white;
 }

src/components/zoomable-image/zoomable-image.tsx

@@ -12,7 +12,10 @@ export class ZoomableImage {
 
     return (
       <div class="Zoom-Image-Container">
-        <img src={this.href} alt={this.alt} />
+        <label>
+          <input type="checkbox" />
+          <img src={this.href} alt={this.alt} />
+        </label>
       </div>
     );
   }

src/pages/forstartups.md

@@ -32,6 +32,17 @@ A Layers oferece aos desenvolvedores uma série de funcionalidades para que crie
   </docs-card>  
 </docs-cards>
 
+## Etapas do Processo de Integração
+
+<docs-zoomable-image href="https://cdn.layers.digital/demo-developers/uploads/a2ce8aea-fed6-4ce8-b525-5da9d2fadfe5/Fluxo-Startups-Bonitinho.png" alt="Fluxo de Integração com Startups"></docs-zoomable-image>
+
+O processo de integração consiste em 5 etapas:
+- Primeiro contato: Layers e Startup se conhecem e interagem com o objetivo de verificar se faz sentido para os dois uma integração.
+- Ganhando acesso: após o contato de negócio, a Startup conhece o Portal de Desenvoldedores e preenche o [formulário de acesso](/docs/register).
+- Desenvolvimento: com o acesso, a Startup começa o processo de desenvolvimento da sua solução, com suporte da Layers.
+- Homologação técnica: nesta etapa, a Layers realiza uma série de validações em cima da integração criada pela Startup. Caso tudo esteja OK, passamos para a última etapa. Se não, voltamos para a etapa de Desenvolvimento para corrigir as falhas identificadas.
+- Liberação: ao fim das etapas anteriores, Layers e Startup realizam a disponibilização da solução para os clientes.
+
 ## Acesso
 
 Para ganhar acesso e integrar sua Aplicação, faça seu pré-cadastro pelo [formulário de acesso](/docs/register) ou entre em contato pelo e-mail <a target="_self" href="mailto:[email protected]">[email protected]</a> para maiores informações. Após o preenchimento e validação do pré-cadastro, entraremos em contato para disponibilizar um ambiente de desenvolvimento em que consiga testar sua aplicação.