✨ A página /now

Inclusão da página /now em pt-br e en-us

src/layouts/Layout.astro

@@ -78,4 +78,18 @@ body {
   font-family: inherit;
 }
 
+.link {
+	color: hsl(var(--s));
+	text-decoration: none;
+}
+
+.link:hover {
+	cursor: pointer;
+    background-color: hsl(var(--bc) / 0.1);
+    --tw-text-opacity: 1;
+    color: hsl(var(--bc) / var(--tw-text-opacity));
+    outline: .3rem solid transparent;
+    outline-offset: .3rem;
+}
+
 </style>

src/pages/en/card.astro

@@ -9,7 +9,7 @@ import Tulio from '@assets/img/quem/tulio-profile.png'
 
 ---
 
-<Layout title='Cartão de visitas do Teseu'>
+<Layout title='Teseu Businesscard'>
   <div class="flex flex-col md:flex-row justify-center md:justify-between gap-8 py-4">
     <Theme />
     <div class="flex justify-center gap-8 text-5xl mb-8 w-full md:w-max transition-all duration-300">

src/pages/en/now.astro

@@ -0,0 +1,56 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import Title from '@components/ui/Title.astro'
+import Subtitle from '@components/ui/Subtitle.astro'
+---
+<Layout title='Page of Teseu - Now'>
+  <div class="flex flex-col px-8 py-4 md:px-36 xl:px-[14rem] min-h-[calc(100vh-13rem)]">
+    <div class="flex justify-end w-full">
+      <div class="flex justify-center gap-8 text-5xl mb-8 w-full md:w-max transition-all duration-300">
+        <div class="toggle-language">
+          <a href="/now">  🇧🇷
+            <span id="ptbr"></span>
+          </a>
+        </div>
+        <div class="toggle-language">
+          🇺🇸
+          <span id="en" class="active"></span>
+        </div>
+      </div>
+    </div>
+    <Title title='What I am up to' />
+    <Subtitle title='Keepping up with the /now page movement.' />
+    <div class="flex flex-col flex-wrap gap-4 items-strech">
+    	<h3 class="text-3xl">The movement</h3>
+    	<p class="text-base md:text-xl mb-4">I accidentally found a page on the internet from the person who started the movement (<a class="link" href="https://sive.rs/nowff" target="_blank">Derek Sivers</a>) explaining that he created a page to say what he is doing at the moment, as many people asked that.</p>
+    	<p class="text-base md:text-xl mb-4">A friend also made a similar page and he tweeted about it and within a few hours several people decided to adopt the practice, so he created a website, <a class="link" href="http://nownownow.com/" target="_blank">nownownow</a>, to showcase people's /now pages. This is mine!</p>
+
+    	<hr class="border border-secondary bg-secondary rounded-2xl py-1 my-2">
+
+    	<h3 class="text-3xl mb-3">What I am doing</h3>
+    	<h4 class="text-2xl mb-1">Studying Wordpress themes</h4>
+    	<p class="text-base md:text-xl mb-4">At the moment I'm using it at work to design a new interface to replace the CMS we currently use and this will require a lot of knowledge to implement.</p>
+    	<h4 class="text-2xl mb-1">Studying Astro and VueJS</h4>
+    	<p class="text-base md:text-xl mb-4">I already use VueJS at work and in personal projects, which suits me very well, but I needed an alternative for some cases and after looking around a bit I ended up deciding on Astro, which is the tool I used to build this page.</p>
+    	<h4 class="text-2xl mb-1">Creating a new page to use as a professional profile</h4>
+    	<p class="text-base md:text-xl mb-4">Although this page could serve this purpose, I believe that one where I can put my portfolio would be more appropriate.</p>
+    </div>
+  </div>
+</Layout>
+
+<style>
+.toggle-language {
+  display: flex;
+  flex-direction: column;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.active {
+  height: 0.25rem;
+  width: 100%;
+  border-radius: 0.75rem;
+  --tw-text-opacity: 1;
+  background-color: hsl(var(--p) / var(--tw-text-opacity));;
+}
+</style>

src/pages/now.astro

@@ -0,0 +1,56 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Title from '@components/ui/Title.astro'
+import Subtitle from '@components/ui/Subtitle.astro'
+---
+<Layout title='Página do Teseu - Now'>
+  <div class="flex flex-col px-8 py-4 md:px-36 xl:px-[14rem] min-h-[calc(100vh-13rem)]">
+  	<div class="flex justify-end w-full">
+	  	<div class="flex justify-center gap-8 text-5xl mb-8 w-full md:w-max transition-all duration-300">
+	      <div class="toggle-language">
+	        🇧🇷
+	        <span id="ptbr" class="active"></span>
+	      </div>
+	      <div class="toggle-language">
+	        <a href="/en/now"> 🇺🇸
+	          <span id="en"></span>
+	        </a>
+	      </div>
+	    </div>
+  	</div>
+    <Title title='O que estou aprontando' />
+    <Subtitle title='Acompanhando o movimento /now page (a página agora).' />
+    <div class="flex flex-col flex-wrap gap-4 items-strech">
+    	<h3 class="text-3xl">O movimento</h3>
+    	<p class="text-base md:text-xl mb-4">Encontrei por acaso na net uma página da pessoa que iniciou o movimento (<a class="link" href="https://sive.rs/nowff" target="_blank">Derek Sivers</a>) explicando que fez uma página para dizer o que está fazendoxl momento, já que muitas pessoas perguntavam isso.</p>
+    	<p class="text-base md:text-xl mb-4">Um amigo também fez uma página semelhante e ele tuitou sobre isso e em poucas horas várias pessoas resolveram adotar a prática, assim ele criou um site, o <a class="link" href="http://nownownow.com/" target="_blank">nownownow</a>, para apresentar as páginas /now das pessoas. Essa é a minha!</p>
+
+    	<hr class="border border-secondary bg-secondary rounded-2xl py-1 my-2">
+
+    	<h3 class="text-3xl mb-3">O que estou fazendo</h3>
+    	<h4 class="text-2xl mb-1">Estudando temas do Wordpress</h4>
+    	<p class="text-base md:text-xl mb-4">No momento estou usando no trabalho para desenhar uma nova interface para substituir o CMS que usamos atualmente e isso vai exigir bastante conhecimento para implementar.</p>
+    	<h4 class="text-2xl mb-1">Estudando Astro e VueJS</h4>
+    	<p class="text-base md:text-xl mb-4">Já uso VueJS no trabalho e em projetos pessoais, o que me serve muito bem, mas estava precisando de uma alternativa para alguns casos e depois de procurar um pouco acabei decidindo pelo Astro, que é a ferramenta que usei para construir essa página.</p>
+    	<h4 class="text-2xl mb-1">Criando uma nova página para usar como perfil profissional</h4>
+    	<p class="text-base md:text-xl mb-4">Apesar dessa página poder servir a esse propósito, acredito que uma em que eu coloque meu portfólio seria mais adequada.</p>
+    </div>
+  </div>
+</Layout>
+
+<style>
+.toggle-language {
+  display: flex;
+  flex-direction: column;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.active {
+  height: 0.25rem;
+  width: 100%;
+  border-radius: 0.75rem;
+  --tw-text-opacity: 1;
+  background-color: hsl(var(--p) / var(--tw-text-opacity));;
+}
+</style>