fix(doc): improve responsive design (#395)

Co-authored-by: jeremydolle <[email protected]>

Author: JeremyDolle

documentation/src/components/Quickstart.tsx

@@ -4,19 +4,19 @@ import CodeBlock from '@theme/CodeBlock';
 
 export default function Quickstart() {
   return (
-    <section className="relative flex justify-end bg-red-400 mb-0 pb-10 sm:-mb-[170px] sm:-mb-[100px] lg:-mb-[270px]">
+    <section className="relative flex justify-end bg-red-400 mb-0 pb-10 sm:-mb-[100px] lg:-mb-[270px]">
       <div className="relative max-w-7xl m-auto">
         <div className="relative flex justify-end">
 
           <div className="absolute bottom-0 sm:top-1/2 right-0">
             <Circles color="red" animate="animate-circle-delay-1" />
           </div>
 
-          <div className="relative sm:absolute sm:left-16 sm:-top-5 w-full sm:w-[60%] p-5 sm:p-2">
+          <div className="relative w-[320px] sm:absolute sm:left-16 sm:-top-5 sm:w-[62%] p-5 sm:p-2">
 
             <h2 className="font-bold text-3xl font-black text-white w-full mb-5 sm:mb-10">
               Quickstart -
-              <span className="w-full sm:w-auto text-sm font-normal text-red-800 ml-3"> Open your terminal and run the following </span>
+              <span className="hidden sm:block w-full sm:w-auto text-sm font-normal text-red-800 ml-3"> Open your terminal and run the following </span>
             </h2>
 
             <CodeBlock
@@ -26,6 +26,7 @@ export default function Quickstart() {
               npx react-native@latest init MyApp --template
               @thecodingmachine/react-native-boilerplate
             </CodeBlock>
+
             <div>
               <button
                 type="button"
@@ -40,13 +41,13 @@ export default function Quickstart() {
           </div>
 
           <img
-            className="pointer-events-none hidden dark:sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            className="pointer-events-none hidden dark:block object-contain absolute -top-6 w-[400px] sm:relative dark:sm:block sm:w-3/4 sm:left-3 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
             src="./img/phone_dark.png"
             alt="phone"
           />
 
           <img
-            className="dark:hidden pointer-events-none hidden sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            className="dark:hidden pointer-events-none object-contain absolute -top-6 w-[400px] sm:relative sm:block sm:w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
             src="./img/phone_light.png"
             alt="phone"
           />

documentation/src/pages/index.tsx

@@ -11,15 +11,16 @@ function HomepageHeader() {
 
   return (
     <header>
-      <div className="mt-10 pt-0 md:pt-28 md:pt-0 -ml-5 md:ml-auto flex justify-end top-10 right-12 md:top-auto md:left-auto md:justify-center absolute w-full md:w-1/3 top-20 m-auto md:right-20">
+      <div className="bottom-0 w-screen left-1/2 top-24 ml-3 mt-10 pt-0 md:pt-0 sm:-ml-5 md:ml-auto flex justify-end right-12 md:top-auto md:left-auto md:-right-12 md:justify-center absolute md:w-2/3 sm:top-20 m-auto lg:w-1/2">
+
         <img
-          className="dark:block pointer-events-none hidden dark:block z-10 w-1/4 md:w-3/4"
+          className="dark:block pointer-events-none hidden object-contain z-10 w-full md:w-3/4"
           src="./img/tom_dark.png"
           alt="tom"
         />
 
         <img
-          className="dark:hidden pointer-events-none sm:block z-10 w-1/4 md:w-3/4"
+          className="dark:hidden pointer-events-none sm:block object-contain z-10 w-full md:w-3/4"
           src="./img/tom_light.png"
           alt="tom"
         />
@@ -30,7 +31,7 @@ function HomepageHeader() {
           The React Native
           <span className="font-extralight mt-4 md:mt-8 lg:mt-0 text-[66px] sm:text-[83px] md:text-[92px] lg:text-9xl block text-red-500 dark:text-red-600">Boilerplate</span>
         </h1>
-        <p className="mt-6 sm:mt-12 lg:mt-5 w-full sm:w-2/3 md:w-1/2 text-sm font-bold ml-1 text-slate-700 dark:text-white">
+        <p className="mt-6 pr-20 sm:pr-0 sm:mt-12 lg:mt-5 w-full sm:w-2/3 md:w-1/2 text-sm font-bold ml-1 text-slate-700 dark:text-white">
           {siteConfig.tagline}
           <span className="ml-1 text-slate-400">
             Explore the optimal React Native boilerplate for your project,
@@ -63,7 +64,7 @@ export default function Home(): JSX.Element {
       description="A React Native template for building solid applications, using JavaScript or Typescript (YOU choose)."
       wrapperClassName="relative overflow-hidden"
     >
-      <div className="relative max-w-7xl m-auto w-full">
+      <div className="relative max-w-7xl m-auto w-full opacity-40">
         <div className="animate-blob opacity-80 absolute top-0 -right-10 md:top-0 md:right-0 bg-gradient-to-r from-indigo-600 via-blue-700 to-blue-400 h-[210px] w-[210px] md:h-[350px] md:w-[350px] lg:h-[382px] lg:w-[382px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
         <div className="animate-blob-delay-1 opacity-80 absolute top-0 right-32 md:top-[250px] md:right-1/4 lg:right-60 bg-gradient-to-r from-red-600 via-pink-700 to-pink-400 h-[180px] w-[180px] md:h-[230px] md:w-[230px] lg:h-[282px] lg:w-[282px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
       </div>
@@ -89,7 +90,7 @@ export default function Home(): JSX.Element {
             <path fill="current" fillOpacity="1" d="M0,320L60,272C120,224,240,128,360,128C480,128,600,224,720,234.7C840,245,960,171,1080,122.7C1200,75,1320,53,1380,42.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" />
           </svg>
           <Quickstart />
-          <svg className="pointer-events-none absolute bottom-0 sm:bottom-[169px] sm:bottom-[99px] lg:bottom-[269px] w-full sm:-mt-20 fill-neutral-100 dark:fill-neutral-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+          <svg className="-mb-[1px] pointer-events-none absolute bottom-0 sm:bottom-[169px] sm:bottom-[99px] lg:bottom-[269px] w-full sm:-mt-20 fill-neutral-100 dark:fill-neutral-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path fill="current" fillOpacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" />
           </svg>
         </main>