From 3a328501bbf269aeed260d3f6130118f389c0b6e Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 26 Sep 2025 17:38:52 -0700
Subject: [PATCH] Refactor: Redesign homepage layout and content

---
 index.html | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 9855f5c..120e491 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
 .kbd{font:12px/1 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);padding:6px 8px;border-radius:10px;background:var(--soft);color:var(--muted)}
 .note{font-size:12px;color:var(--muted)}
 .grid{display:grid;gap:12px;margin:26px auto;grid-template-columns:1fr;max-width:760px}
-@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
+@media(min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
 .card{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);display:grid;gap:8px}
 .card h3{margin:0;font-size:15px}
 .card p{margin:0;color:var(--muted);font-size:13px}
@@ -68,17 +68,10 @@ a{color:inherit}
   </header>
 
   <section class="hero">
-    <h1 class="h1">Short links, built to last</h1>
-    <p class="sub">Clean, fast, privacy-first URL shortener. Free plan with randomized slugs only (e.g., 4ev.link/xY7z). No custom slugs, no ads.</p>
+    <h1 class="h1">Get your 4ev.link <span style="color:crimson">❤</span></h1>
     <div class="form" @submit.prevent>
-      <div class="row">
-        <input class="input" x-model="url" type="url" inputmode="url" placeholder="Paste a long URL, e.g. https://example.com/very/long/link" aria-label="Long URL" @keydown.enter.prevent="shorten()">
-        <button class="btn" @click="shorten()" :disabled="busy">
-          <template x-if="!busy"><i data-lucide="scissors" style="width:18px;height:18px"></i></template>
-          <template x-if="busy"><i data-lucide="loader-2" style="width:18px;height:18px;animation:spin .9s linear infinite"></i></template>
-          <span x-text="busy?'Working…':'Shorten'"></span>
-        </button>
-      </div>
+      <input class="input" x-model="url" type="url" inputmode="url" placeholder="Paste a long URL, e.g. https://example.com/very/long/link" aria-label="Long URL" @keydown.enter.prevent="shorten()">
+      <button class="btn" @click="shorten()" :disabled="busy" x-text="busy?'Working…':'Link'"></button>
       <div class="row" style="justify-content:space-between">
         <span class="note">Free tier: randomized links, basic usage. No login required.</span>
         <span class="kbd">Enter ↵</span>
@@ -106,10 +99,6 @@ a{color:inherit}
       <div class="row"><i data-lucide="shield" style="width:18px;height:18px"></i><h3>Privacy-first</h3></div>
       <p>No ad pages. No tracking pixels. Just clean redirects.</p>
     </article>
-    <article class="card">
-      <div class="row"><i data-lucide="wand-2" style="width:18px;height:18px"></i><h3>Randomized slugs</h3></div>
-      <p>Free plan generates secure, random slugs. Custom branded links coming soon.</p>
-    </article>
   </section>
 
   <hr class="hr"/>
@@ -149,12 +138,11 @@ a{color:inherit}
     </div>
   </section>
 
-  <footer class="footer">
+  <footer class="footer" style="justify-content:center">
     <div style="display:flex;gap:10px;align-items:center">
       <i data-lucide="globe" style="width:16px;height:16px"></i>
       <span>© <span x-text="new Date().getFullYear()"></span> 4ev.link</span>
     </div>
-    <div class="note">Free plan • Randomized links • Black/White/Gray UI</div>
   </footer>
   <div class="toast" x-cloak x-show="msg" x-text="msg" role="status" aria-live="polite"></div>
 </div>