From 0772f93b5b3ae2d4b256636739f02d386a874272 Mon Sep 17 00:00:00 2001
From: Andre Luis Gomes da Silva <tr.andreluis@gmail.com>
Date: Thu, 25 Sep 2025 03:26:12 -0300
Subject: [PATCH] feat: create landing page and versioning (page are not
 visible, its simple versioning)

---
 teste-site/index.html | 131 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 teste-site/index.html
diff --git a/teste-site/index.html b/teste-site/index.html
new file mode 100644
index 0000000..d629983
--- /dev/null
+++ b/teste-site/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SEMITI 2025 — Minicurso Ngrok</title>
+  <meta name="description" content="Landing animada em HTML+CSS para SEMITI 2025 e minicurso de Ngrok (IFPB)." />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    :root{
+      --bg-0:#090d1a; --bg-1:#0e1330; --bg-2:#0a0f25;
+      --text:#eaf2ff; --muted:#b8c6e3; --glass: rgba(255,255,255,.06);
+      --accent:#7c3aed; --accent2:#22d3ee; --border:rgba(255,255,255,.1);
+    }
+    body{ margin:0; color:var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; background: var(--bg-0); overflow-x:hidden; }
+
+    .bg{ position:fixed; inset:0; z-index:-3; background:
+      radial-gradient(1200px 800px at 20% 10%, rgba(124,58,237,.25), transparent 55%),
+      radial-gradient(1000px 600px at 80% 90%, rgba(34,211,238,.18), transparent 60%),
+      linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-2) 100%);
+    }
+    .bg-anim{ position:fixed; inset:-10%; z-index:-2; opacity:.35; background:conic-gradient(from 0deg, rgba(124,58,237,.25), rgba(34,211,238,.25), rgba(59,130,246,.25), rgba(244,114,182,.25), rgba(124,58,237,.25)); animation:spin 18s linear infinite; mask: radial-gradient(circle at center, black 40%, transparent 70%);}    
+    @keyframes spin { to{ transform: rotate(360deg); } }
+
+    .particles{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
+    .particles span{ position:absolute; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, #fff, #a5b4fc 70%, transparent 72%); opacity:.8; filter: drop-shadow(0 0 6px #a5b4fc); animation:float 14s linear infinite; }
+    @keyframes float{ 0%{ transform:translateY(0); opacity:.25;} 50%{ transform:translateY(-20vh) translateX(2vw); opacity:.8;} 100%{ transform:translateY(-40vh) translateX(-1vw); opacity:.25;} }
+
+    .wrap{ min-height:100%; display:grid; place-items:center; padding: clamp(24px, 6vmin, 52px); }
+    .card{ width:min(1100px, 100%); background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:28px; padding: clamp(20px, 5vmin, 48px); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 40px rgba(124,58,237,.05); backdrop-filter: blur(8px); }
+
+    h1{ margin: 14px 0 6px; font-size: clamp(28px, 6vw, 56px); line-height:1.06; font-weight:900; background: linear-gradient(92deg, #fff 0%, #c7d2fe 30%, #a5b4fc 60%, #f0abfc 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
+    .lead{ color:#cbd5e1; font-size: clamp(16px, 2.4vw, 20px); margin:0 0 18px; }
+
+    .hero{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px,4vw,40px); align-items:center; }
+
+    .art{ position:relative; min-height:320px; display:grid; place-items:center; isolation:isolate; }
+    .glow-orb{ position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle at 50% 40%, rgba(34,211,238,.25), rgba(124,58,237,.12) 40%, transparent 60%); filter: blur(18px); z-index:-1; animation:pulse 6s ease-in-out infinite; }
+    @keyframes pulse { 50% { transform: scale(1.05);} }
+    .rocket{ width: clamp(160px, 24vw, 240px); filter: drop-shadow(0 18px 30px rgba(34,211,238,.35)); animation: liftoff 3.8s ease-in-out infinite; }
+    @keyframes liftoff { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
+    .fire{ transform-origin: 50% 0%; animation: flame .18s ease-in-out infinite; }
+    @keyframes flame { 0%{ transform: scaleY(.9);} 50%{ transform: scaleY(1.1);} 100%{ transform: scaleY(.95);} }
+    .smoke{ position:absolute; bottom:42px; width:220px; height:220px; display:grid; place-items:end center; filter: blur(.2px); }
+    .puff{ width:22px; height:22px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(200,210,255,.2)); animation: drift 2.8s ease-in infinite; opacity:.85; }
+    .puff:nth-child(2){ width:16px; height:16px; animation-delay:.35s; opacity:.7; }
+    .puff:nth-child(3){ width:26px; height:26px; animation-delay:.7s; opacity:.65; }
+    @keyframes drift { 0%{ transform: translateY(0) scale(.9);} 60%{ transform: translateY(-40px) translateX(-6px) scale(1.15);} 100%{ transform: translateY(-80px) translateX(6px) scale(1.05); opacity:0; } }
+
+    .links{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
+    .contact-link{ display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; padding:10px 14px; border-radius:10px; color:#e5e7eb; background:rgba(255,255,255,.05); transition: background .2s ease; }
+    .contact-link:hover{ background:rgba(255,255,255,.12); }
+    .contact-link svg{ width:20px; height:20px; }
+
+    footer{ margin-top:22px; color:#8aa1c4; font-size:.9rem; }
+  </style>
+</head>
+<body>
+  <div class="bg" aria-hidden="true"></div>
+  <div class="bg-anim" aria-hidden="true"></div>
+  <div class="particles" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
+    <span></span><span></span><span></span><span></span><span></span>
+  </div>
+
+  <main class="wrap">
+    <section class="card">
+      <h1>Bem-vindo ao SEMITI 2025<br/>e ao minicurso de Ngrok!</h1>
+      <p class="lead">Levando seu servidor local à internet: a magia do ngrok.</p>
+
+      <div class="hero">
+        <div>
+          <div class="links">
+            <a class="contact-link" href="https://github.com/trandreluis" target="_blank" rel="noopener">
+              <!-- GitHub logo oficial -->
+              <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 .5C5.73.5.5 5.73.5 12c0 5.1 3.29 9.41 7.86 10.95.58.11.79-.25.79-.56v-2.17c-3.2.7-3.87-1.54-3.87-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.73 1.26 3.4.96.1-.76.41-1.26.74-1.55-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.3 1.18-3.11-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.73 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.81 1.18 1.85 1.18 3.11 0 4.43-2.68 5.4-5.24 5.68.42.36.8 1.08.8 2.18v3.24c0 .31.21.68.8.56A10.52 10.52 0 0 0 23.5 12c0-6.27-5.23-11.5-11.5-11.5Z"/></svg>
+              github.com/trandreluis
+            </a>
+            <a class="contact-link" href="mailto:tr.andreluis@gmail.com">
+              <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 12.713l11.985-9.713H0L12 12.713zM12 14.587L0 4.874v14.253h24V4.874L12 14.587z"/></svg>
+              tr.andreluis@gmail.com
+            </a>
+            <a class="contact-link" href="https://linkedin.com/in/trandreluis" target="_blank" rel="noopener">
+              <!-- LinkedIn logo oficial -->
+              <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19 0H5C2.24 0 0 2.24 0 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5V5c0-2.76-2.24-5-5-5zM7.09 20.45H3.54V9h3.55v11.45zM5.32 7.59c-1.14 0-2.06-.93-2.06-2.07 0-1.15.92-2.07 2.06-2.07 1.14 0 2.07.92 2.07 2.07 0 1.14-.93 2.07-2.07 2.07zM20.46 20.45h-3.54v-5.6c0-1.34-.03-3.06-1.87-3.06-1.87 0-2.15 1.46-2.15 2.96v5.7h-3.55V9h3.41v1.56h.05c.47-.89 1.62-1.82 3.34-1.82 3.57 0 4.23 2.35 4.23 5.4v6.31z"/></svg>
+              linkedin.com/in/trandreluis
+            </a>
+          </div>
+        </div>
+
+        <div class="art">
+          <div class="glow-orb" aria-hidden="true"></div>
+          <svg class="rocket" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <defs>
+              <linearGradient id="ship" x1="0" x2="1">
+                <stop offset="0%" stop-color="#22d3ee"/>
+                <stop offset="100%" stop-color="#7c3aed"/>
+              </linearGradient>
+              <linearGradient id="fin" x1="0" x2="1">
+                <stop offset="0%" stop-color="#a78bfa"/>
+                <stop offset="100%" stop-color="#f0abfc"/>
+              </linearGradient>
+              <linearGradient id="flame" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" stop-color="#fff59d"/>
+                <stop offset="100%" stop-color="#ff7043"/>
+              </linearGradient>
+            </defs>
+            <path d="M128 16c22 18 44 64 44 94 0 44-28 82-44 82s-44-38-44-82c0-30 22-76 44-94z" fill="url(#ship)"/>
+            <circle cx="128" cy="88" r="18" fill="#0b1020" stroke="#e0e7ff" stroke-width="6"/>
+            <path d="M84 150c-14 8-34 18-44 22 6-16 16-36 26-48l18-12c0 14 2 28 0 38z" fill="url(#fin)"/>
+            <path d="M172 150c14 8 34 18 44 22-6-16-16-36-26-48l-18-12c0 14-2 28 0 38z" fill="url(#fin)"/>
+            <g class="fire">
+              <path d="M120 196c0 18 8 28 8 44 0-10 8-18 8-44 0-14-8-22-16 0z" fill="url(#flame)"/>
+            </g>
+          </svg>
+          <div class="smoke" aria-hidden="true">
+            <div class="puff"></div>
+            <div class="puff"></div>
+            <div class="puff"></div>
+          </div>
+        </div>
+      </div>
+
+      <footer>
+        Acesse com <kbd>Tab</kbd> • Respeita <em>prefers-reduced-motion</em>
+      </footer>
+    </section>
+  </main>
+</body>
+</html>
\ No newline at end of file
