From 6bc36cdc445a43f0dd9cd05ddbc4ec5a32ef8ea8 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Wed, 18 Dec 2024 16:15:55 +0100
Subject: [PATCH] docs: adjust layer

---
 website/src/components/color-extractor.tsx | 11 ++------
 website/src/components/layout/index.tsx    | 33 ++++++++++++----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/website/src/components/color-extractor.tsx b/website/src/components/color-extractor.tsx
index 896a505..c30ec0b 100644
--- a/website/src/components/color-extractor.tsx
+++ b/website/src/components/color-extractor.tsx
@@ -90,7 +90,7 @@ export function ColorExtractor () {
   }
 
   return (
-    <div className='lg:w-full w-[90%] mx-auto'>
+    <div>
       {colors.length === 0 ? (
         <div>
           <div
@@ -111,7 +111,6 @@ export function ColorExtractor () {
             >
               <input
                 type='url'
-                value={undefined}
                 onChange={e => setImageUrl(e.target.value)}
                 onClick={handleFormClick}
                 placeholder='or paste an image URL'
@@ -132,13 +131,7 @@ export function ColorExtractor () {
         </div>
       ) : (
         <div className='flex justify-center items-center flex-col space-y-4'>
-          <div className='w-full max-w-[200px] mx-auto'>
-            <img
-              src={imageUrl}
-              alt='Uploaded image'
-              className='w-full h-auto rounded-lg shadow-md'
-            />
-          </div>
+          <img src={imageUrl} alt='Uploaded image' className='w-full h-auto rounded-lg shadow-md' />
           <div>
             <div className='py-6 inline-grid grid-cols-3 gap-2 justify-center'>
               {colors.map((color, index) => (
diff --git a/website/src/components/layout/index.tsx b/website/src/components/layout/index.tsx
index 277286f..d76ce40 100644
--- a/website/src/components/layout/index.tsx
+++ b/website/src/components/layout/index.tsx
@@ -92,24 +92,27 @@ export const ContainerLayout = ({ children }: { children: React.ReactNode }) =>
         <div className='blur-[106px] h-32 bg-gradient-to-br from-primary to-purple-400 dark:from-blue-700' />
         <div className='blur-[106px] h-24 bg-gradient-to-r from-cyan-400 to-sky-300 dark:to-indigo-600' />
       </div>
-      <header className='container pt-8 max-w-xl mx-auto px-4 text-center z-10 relative'>
-        <NextLink href='/' className='flex justify-center'>
-          <SplashyLogo className='mb-3 lg:w-80 w-56' />
-          {/* <img src='/logo.svg' alt='favicon' className='inline mb-3' /> */}
-          {/* <h1 className='text-5xl lg:text-8xl font-extrabold mb-3 tracking-tight bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700'>
+      <div className='lg:max-w-xl max-w-sm mx-auto px-4'>
+        <header className='container pt-8 text-center z-10 relative'>
+          <NextLink href='/' className='flex justify-center'>
+            <SplashyLogo className='mb-3 lg:w-80 w-56' />
+            {/* <img src='/logo.svg' alt='favicon' className='inline mb-3' /> */}
+            {/* <h1 className='text-5xl lg:text-8xl font-extrabold mb-3 tracking-tight bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700'>
             SPLASHY
           </h1> */}
-        </NextLink>
+          </NextLink>
+
+          <p className='lg:text-xl'>Get predominant colors for any image.</p>
+          <p className='text-neutral-600 pt-2 flex items-center justify-center'>
+            Powered by{' '}
+            <Link href='https://microlink.io'>
+              <MicrolinkLogo className='inline h-4 mx-2' /> Microlink.io
+            </Link>
+          </p>
+        </header>
+        <main className='pt-8 pb-24'>{children}</main>
+      </div>
 
-        <p className='lg:text-xl'>Get predominant colors for any image.</p>
-        <p className='text-neutral-600 pt-2 flex items-center justify-center'>
-          Powered by{' '}
-          <Link href='https://microlink.io'>
-            <MicrolinkLogo className='inline h-4 mx-2' /> Microlink.io
-          </Link>
-        </p>
-      </header>
-      <main className='pt-8 max-w-xl mx-auto px-4 pb-24'>{children}</main>
       <Toaster />
       <Footer />
     </div>