From 5c30c6df12747d38dcc5bc901135acd74ac1fa90 Mon Sep 17 00:00:00 2001
From: tylerslaton <mtslaton1@gmail.com>
Date: Mon, 18 Mar 2024 13:05:14 -0400
Subject: [PATCH] feat: update styling for index page on mobile

Signed-off-by: tylerslaton <mtslaton1@gmail.com>
---
 src/pages/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 11077c6..54e2892 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col justify-center items-center min-h-screen">
-        <div class="w-full justify-center items-center">
+        <div class="w-full justify-center items-center mt-24">
             <div class="text-center mb-10 mx-10">
                 <h2 class="text-4xl md:text-5xl mb-4 ">Welcome to tools.gptscript.ai</h2>
                 <h3 class="text-lg">Looking for something? There's probably a tool for it...</h3>
@@ -9,7 +9,8 @@
                 <Search :placeholder="placeHolder" />
             </div>
         </div>
-        <div class="w-1/2 flex flex-wrap justify-center flex-col md:flex-row">
+        <hr class="mt-4 mb-14 w-3/4 md:hidden">
+        <div class="w-1/2 w-full md:w-inherit flex flex-wrap justify-center flex-col md:flex-row">
             <router-link to="/github.com/gptscript-ai/search/brave" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Search</router-link>
             <router-link to="/github.com/gptscript-ai/vision" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Vision</router-link>
             <router-link to="/github.com/gptscript-ai/image-generation" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Image Generation</router-link>