Adjustments so everything fits nicely (#267)

zuplo · Jul 31, 2024 · 8595d9e · 8595d9e
1 parent 782baf1
commit 8595d9e
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 76 deletions.
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -17,7 +17,7 @@ header {
 }
 
 .icon-button-submit {
-  @apply icon-button bg-pink-600 transition-all hover:bg-pink-500 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:bg-none;
+  @apply icon-button bg-fuchsia-600 transition-all hover:bg-fuchsia-500 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:bg-none;
 }
 
 .button {

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -6,92 +6,87 @@ import { UploadContextProvider } from "@/contexts/UploadContext";
 import { PageBox } from "@/components/PageBox";
 import NavigateButton from "@/components/NavigateButton";
 
-const gitHubActionCodeSample = `steps:
-  - uses: actions/checkout@v4
-  - uses: zuplo/rmoa-action@v1
+const gitHubActionCodeSample = `- uses: zuplo/rmoa-action@v1
     with:
       filepath: './my-api.json'
       apikey: \${{ secrets.API_KEY }}`;
 
 const HomePage = () => (
-  <div className="mx-4 flex flex-col items-center justify-center md:mx-0 md:mt-10">
-    <h2 className="mb-12 mt-4 max-w-3xl text-center text-5xl font-bold md:mb-16 md:mt-0 md:text-7xl">
-      We rate your OpenAPl
+  <div className="mx-4 mt-10 flex flex-col items-center justify-center md:mx-0 md:mt-8">
+    <h2 className="xl:mb-20 xl:text-7xl mb-10 mt-4 max-w-3xl text-center text-4xl font-bold md:mb-14 md:mt-0 md:text-6xl">
+      We rate your OpenAPI
     </h2>
     <UploadContextProvider>
       <div className="grid w-full max-w-4xl grid-cols-1">
         <UploadInterface />
         <EmailInput />
         <AnalyzingText />
       </div>
-      <div className="mb-4 grid gap-10 md:grid-cols-3">
-        <PageBox>
-          <h3 className="text-lg font-medium">Use the CLI</h3>
-          <p>
-            Perfect for developers who prefer working from the command line or
-            need to integrate quality checks into their development workflow.
-          </p>
-          <pre className="mt-auto whitespace-pre-wrap rounded-md bg-gray-100 px-2 py-6 font-mono text-xs">
-            <code>
-              <span>npx rmoa lint </span>
-              <span style={{ color: "rgb(54, 172, 170)" }}>--filename</span>
-              <span> </span>
-              <span style={{ color: "rgb(227, 17, 108)" }}>
-                &quot;api.json&quot;
-              </span>
-              <span style={{ color: "rgb(54, 172, 170)" }}> --api-key </span>
-              <span style={{ color: "rgb(227, 17, 108)" }}>
-                &quot;****&quot;
-              </span>
-            </code>
-          </pre>
+    </UploadContextProvider>
+    <div className="mb-4 grid gap-10 md:grid-cols-3">
+      <PageBox>
+        <h3 className="text-lg font-medium">Use the CLI</h3>
+        <p>
+          Perfect for developers who prefer working from the command line or
+          need to integrate quality checks into their development workflow.
+        </p>
+        <pre className="mt-auto whitespace-pre-wrap rounded-md bg-gray-100 px-2 py-6 font-mono text-xs">
+          <code>
+            <span>npx rmoa lint </span>
+            <span style={{ color: "rgb(54, 172, 170)" }}>--filename</span>
+            <span> </span>
+            <span style={{ color: "rgb(227, 17, 108)" }}>
+              &quot;api.json&quot;
+            </span>
+            <span style={{ color: "rgb(54, 172, 170)" }}> --api-key </span>
+            <span style={{ color: "rgb(227, 17, 108)" }}>&quot;****&quot;</span>
+          </code>
+        </pre>
 
-          <NavigateButton
-            label={"Get started"}
-            url={"https://www.npmjs.com/package/rmoa"}
-          />
-        </PageBox>
+        <NavigateButton
+          label={"Get started"}
+          url={"https://www.npmjs.com/package/rmoa"}
+        />
+      </PageBox>
+
+      <PageBox>
+        <h3 className="text-lg font-medium">Use our GitHub Action</h3>
+        <p>
+          Seamlessly integrates with your repository to run on Pull Requests and
+          Pushes to ensure continuous quality monitoring and feedback.
+        </p>
+        <pre className="mt-auto whitespace-pre-wrap rounded-md bg-gray-100 p-2 font-mono text-xs">
+          <code>{gitHubActionCodeSample}</code>
+        </pre>
 
-        <PageBox>
-          <h3 className="text-lg font-medium">Use our GitHub Action</h3>
-          <p>
-            Seamlessly integrates with your repository to run on Pull Requests
-            and Pushes to ensure continuous quality monitoring and feedback.
-          </p>
-          <pre className="mt-auto whitespace-pre-wrap rounded-md bg-gray-100 p-2 font-mono text-xs">
-            <code>{gitHubActionCodeSample}</code>
-          </pre>
+        <NavigateButton
+          label={"Learn more"}
+          url={"https://github.com/marketplace/actions/rate-my-openapi-action"}
+        />
+      </PageBox>
 
-          <NavigateButton
-            label={"Learn more"}
-            url={
-              "https://github.com/marketplace/actions/rate-my-openapi-action"
-            }
+      <PageBox>
+        <h3 className="text-lg font-medium">Use our API</h3>
+        <p>
+          Great option for those developers that want to build their own tools
+          or their own integration to Rate My OpenAPI.
+        </p>
+        <div className="grid place-items-center">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="/images/build-crane-logo.png"
+            width={130}
+            alt="Build your tools with the API"
           />
-        </PageBox>
+        </div>
 
-        <PageBox>
-          <h3 className="text-lg font-medium">Use our API</h3>
-          <p>
-            Great option for those developers that want to build their own tools
-            or their own integration to Rate My OpenAPI.
-          </p>
-          <div className="grid place-items-center">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src="/images/build-crane-logo.png"
-              width={150}
-              alt="Build your tools with the API"
-            />
-          </div>
+        <NavigateButton
+          label={"View docs"}
+          url={"https://api.ratemyopenapi.com/docs"}
+        />
+      </PageBox>
+    </div>
 
-          <NavigateButton
-            label={"View docs"}
-            url={"https://api.ratemyopenapi.com/docs"}
-          />
-        </PageBox>
-      </div>
-    </UploadContextProvider>
     <DynamicBackground />
   </div>
 );

diff --git a/apps/web/src/components/Header/index.tsx b/apps/web/src/components/Header/index.tsx
@@ -1,17 +1,17 @@
 import LogoIcon from "../LogoIcon";
 
 const Header = () => (
-  <header className="px-4 pt-4 md:pt-8">
-    <div className="flex justify-between rounded-xl bg-white p-5 shadow-md">
+  <header className="xl:pt-8 px-4 pt-4">
+    <div className="xl:p-5 flex justify-between rounded-lg bg-white p-3 shadow-md">
       <div className="relative">
         <a href="/" className="flex justify-center">
-          <h1 className=" text-2xl font-bold">
+          <h1 className="xl:text-2xl text-xl font-bold">
             rate<span className="text-gray-500">my</span>openapi
           </h1>
         </a>
       </div>
       <a href="https://zuplo.com">
-        <LogoIcon height={33} width={33} />
+        <LogoIcon height={30} width={30} />
       </a>
     </div>
   </header>

diff --git a/apps/web/src/components/NavigateButton/index.tsx b/apps/web/src/components/NavigateButton/index.tsx
@@ -4,7 +4,7 @@ const NavigateButton = ({ label, url }: { label: string; url: string }) => {
   return (
     <button
       type="button"
-      className="mt-auto block rounded-md bg-fuchsia-600 p-2 font-medium text-white transition-colors hover:bg-gray-900 hover:text-white"
+      className="mt-auto block rounded-md bg-fuchsia-600 p-2 font-medium text-white transition-colors hover:bg-fuchsia-500 hover:text-white"
       onClick={() => {
         window.location.href = url;
       }}

diff --git a/apps/web/src/components/PageBox/index.tsx b/apps/web/src/components/PageBox/index.tsx
@@ -10,7 +10,7 @@ export const PageBox = ({
 }) => (
   <div
     className={classNames(
-      "relative flex flex-col gap-4 rounded-lg bg-white p-8 shadow-md",
+      "relative flex flex-col gap-4 rounded-lg bg-white p-5 shadow-md",
       "after:absolute after:-right-1.5 after:-top-1.5 after:rounded-md after:bg-indigo-700 after:px-3 after:py-2 after:text-xs after:font-medium after:uppercase after:text-white after:content-['New']",
       className,
     )}

diff --git a/apps/web/src/components/RatingExamples/index.tsx b/apps/web/src/components/RatingExamples/index.tsx
@@ -20,7 +20,7 @@ const EXAMPLES: { title: string; slug: string }[] = [
 ];
 
 export const RatingExamples = ({ children }: RatingExamplesProps) => (
-  <div className="m-10 flex items-center justify-center gap-4">
+  <div className="mx-10 my-5 flex flex-col items-center justify-center gap-4 md:flex-row">
     {children ? (
       <div>{children}</div>
     ) : (