From 5374ffec31cfd3587b2327df02e8038e89d44524 Mon Sep 17 00:00:00 2001
From: Charlie RABILLER <charlie.rabiller@niji.fr>
Date: Fri, 22 Jan 2021 23:17:49 +0100
Subject: [PATCH] improve mobile design

---
 .gitignore                              |  3 ++-
 components/site/section/SectionDesc.tsx |  2 +-
 pages/started/index.tsx                 | 22 ++++++++++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index ac5462a..de15fb8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 build/
-out/
\ No newline at end of file
+out/
+.DS_STORE
\ No newline at end of file
diff --git a/components/site/section/SectionDesc.tsx b/components/site/section/SectionDesc.tsx
index 80dc707..f0a018c 100644
--- a/components/site/section/SectionDesc.tsx
+++ b/components/site/section/SectionDesc.tsx
@@ -27,7 +27,7 @@ const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
           return (
             <div
               key={section.title}
-              className="hover:opacity-100 border rounded-lg w-1/3 m-2 md:m-0  md:w-1/5"
+              className="hover:opacity-100 border rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5"
             >
               <Link href={section.link}>
                 <a className="">
diff --git a/pages/started/index.tsx b/pages/started/index.tsx
index 338d77d..20741a3 100644
--- a/pages/started/index.tsx
+++ b/pages/started/index.tsx
@@ -96,16 +96,18 @@ const StartedPage: FC = () => {
             </svg>
             Once Tailwind CSS is installed, you can get started!
           </p>
-          <Link href="/components">
-            <a className="w-44 mb-4 px-4 py-3 mt-8 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
-              &#129513; See components!
-            </a>
-          </Link>
-          <Link href="/templates">
-            <a className="w-44 mb-4 px-4 py-3 ml-4 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
-              &#127912; See templates!
-            </a>
-          </Link>
+          <div className="md:flex md:items-center md:space-x-4">
+            <Link href="/components">
+              <a className="w-auto block mb-4 px-4 py-3 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
+                &#129513; See components!
+              </a>
+            </Link>
+            <Link href="/templates">
+              <a className="w-auto block mb-4 px-4 py-3 text-base font-medium rounded-md text-center text-white bg-gray-800 hover:bg-gray-700">
+                &#127912; See templates!
+              </a>
+            </Link>
+          </div>
         </div>
       </div>
       <div