Front page UI done

src/assets/splash.json

@@ -0,0 +1,107 @@
+[
+  {
+    "splash": "Join to our community! https://discord.gg/qsXnhSPtAK"
+  },
+  {
+    "splash": "Browse safely!"
+  },
+  {
+    "splash": "Hello World!"
+  },
+  {
+    "splash": "Access with ease!"
+  },
+  {
+    "splash": "Stay secure online!"
+  },
+  {
+    "splash": "New updates available!"
+  },
+  {
+    "splash": "Surf anonymously!"
+  },
+  {
+    "splash": "Unlock the web!"
+  },
+  {
+    "splash": "Don't miss out!"
+  },
+  {
+    "splash": "Fast and reliable!"
+  },
+  {
+    "splash": "Enjoy your privacy!"
+  },
+  {
+    "splash": "Let's get started!"
+  },
+  {
+    "splash": "Protect your data!"
+  },
+  {
+    "splash": "Freedom online!"
+  },
+  {
+    "splash": "Navigate freely!"
+  },
+  {
+    "splash": "Your web, your rules!"
+  },
+  {
+    "splash": "Stay anonymous!"
+  },
+  {
+    "splash": "Access anything!"
+  },
+  {
+    "splash": "Fast and secure!"
+  },
+  {
+    "splash": "Browse without limits!"
+  },
+  {
+    "splash": "Private and secure!"
+  },
+  {
+    "splash": "Keep your data safe!"
+  },
+  {
+    "splash": "Connect globally!"
+  },
+  {
+    "splash": "No boundaries!"
+  },
+  {
+    "splash": "Web freedom!"
+  },
+  {
+    "splash": "Stay private!"
+  },
+  {
+    "splash": "Anonymous browsing!"
+  },
+  {
+    "splash": "Secure access!"
+  },
+  {
+    "splash": "Fast connections!"
+  },
+  {
+    "splash": "Unrestricted access!"
+  },
+  {
+    "splash": "Surf the web freely!"
+  },
+  {
+    "splash": "Your privacy matters!"
+  },
+  {
+    "splash": "Always connected!"
+  },
+  {
+    "splash": "Web without limits!"
+  },
+  {
+    "splash": "Explore the internet!"
+  }
+]

src/pages/index.astro

@@ -1,17 +1,29 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { Icon } from 'astro-icon/components';
+import { Icon } from 'astro-icon/components'
+
+import splash from "@assets/splash.json";
+
+const genSplash = (): String => {
+    const idx = Math.floor(Math.random() * splash.length);
+    return splash[idx].splash;
+}
+
+const randomSplash = genSplash();
 ---
 
 <Layout>
     <div class="h-full flex items-center justify-center">
+        <div class="flex flex-col items-center gap-6">
             <div class="flex items-center gap-2">
                 <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
                 <h1 class="text-6xl font-semibold">Radius</h1>
             </div>
-        <div>
+            <div class="flex flex-row items-center gap-2 w-[26rem] border border-(--input) rounded-lg h-12 p-2">
-            <!-- text input here from shadcn (soon) -->
+                <Icon name="lucide:search" />
-            <p>more coming soon (trust)</p>
+                <input type="text" name="Search" class="text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
+            </div>
+            <p class="text-base"> { randomSplash } </p>
         </div>
     </div>
 </Layout>