primera iteracion del front

front/src/App.svelte

@@ -0,0 +1,82 @@
+<script>
+    import AcortadorForm from "./assets/lib/AcortadorForm.svelte";
+    import svelteLogo from "./assets/svelte.svg";
+    import viteLogo from "./assets/vite.svg";
+</script>
+
+<section id="center">
+    <div>
+        <h1 class="underline">Acortador de Urls</h1>
+    </div>
+    <AcortadorForm />
+</section>
+
+<div class="ticks"></div>
+
+<section id="next-steps">
+    <div id="docs">
+        <!-- <svg class="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#documentation-icon"></use>
+        </svg> -->
+        <h2>Documentation</h2>
+        <p>Your questions, answered</p>
+        <ul>
+            <li>
+                <a href="https://vite.dev/" target="_blank" rel="noreferrer">
+                    <img class="logo" src={viteLogo} alt="" />
+                    Explore Vite
+                </a>
+            </li>
+            <li>
+                <a href="https://svelte.dev/" target="_blank" rel="noreferrer">
+                    <img class="button-icon" src={svelteLogo} alt="" />
+                    Learn more
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div id="social">
+        <h2>FOSS</h2>
+        <p>El código se puede encontrar en mi Gitea</p>
+        <a
+            href="https://fedesrv.ddns.net/git/fede/url-short"
+            target="_blank"
+            rel="noreferrer"
+            class="button"
+        >
+            Ver URL del Gitea
+        </a>
+        <!-- <ul> -->
+        <!-- <li>
+                <a
+                    href="https://chat.vite.dev/"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <svg
+                        class="button-icon"
+                        role="presentation"
+                        aria-hidden="true"
+                    >
+                        <use href="/icons.svg#discord-icon"></use>
+                    </svg>
+                    Discord
+                </a>
+            </li> -->
+        <!-- </ul> -->
+    </div>
+</section>
+
+<div class="ticks"></div>
+<section id="spacer"></section>
+
+<style>
+    h2,
+    h1,
+    p,
+    a {
+        font-family: "Instrument Serif", serif;
+        font-weight: 400;
+        font-style: normal;
+    }
+</style>