fix(web): landing page style (#112)

* fix(web): landing page style * chore(release): bump versions - [email protected]
lharti · Nov 14, 2024 · ea1d66d · ea1d66d
1 parent 94afba3
commit ea1d66d
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 124 deletions.
diff --git a/apps/jsonthing-web/CHANGELOG.md b/apps/jsonthing-web/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.5](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.5) (2024-11-14)
+
+
+### Bug Fixes
+
+* **web:** landing page style ([eaf8bca](https://github.com/lharti/jsonthing/commit/eaf8bca1705f5451c3647fd728f5890e7013475a))
+
+
+
+
+
 ## [0.5.4](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.4) (2024-11-13)
 
 

diff --git a/apps/jsonthing-web/package.json b/apps/jsonthing-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "jsonthing-web",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "private": true,
     "scripts": {
         "dev": "next dev --turbo",

diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/LandingPage.spec.tsx b/apps/jsonthing-web/src/components/pages/LandingPage/LandingPage.spec.tsx
@@ -1,15 +1,32 @@
+import { LandingPageHero } from '@/components/pages/LandingPage/LandingPageHero'
 import { render } from '@testing-library/react'
 import React from 'react'
-import { LandingPage } from './LandingPage'
+import { LandingPage } from '.'
 
-jest.mock('@/components/CreateNewDocButton')
+jest.mock('./LandingPageHero')
 
 describe('<LandingPage />', () => {
     it('should render', () => {
         expect.assertions(1)
 
+        jest.mocked(LandingPageHero).mockReturnValueOnce('{LANDING_PAGE_HERO}')
+
         const { container } = render(<LandingPage />)
 
-        expect(container).toMatchSnapshot('<LandingPage />')
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <div
+                class="
+                          mx-auto max-w-screen-xl px-6 pt-32
+
+                          2xl:px-0
+                        "
+              >
+                <main>
+                  {LANDING_PAGE_HERO}
+                </main>
+              </div>
+            </div>
+        `)
     })
 })
diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/LandingPage.tsx b/apps/jsonthing-web/src/components/pages/LandingPage/LandingPage.tsx
@@ -1,64 +1,17 @@
-import { CreateNewDocButton } from '@/components/CreateNewDocButton'
-import Image from 'next/image'
+import { LandingPageHero } from '@/components/pages/LandingPage/LandingPageHero'
 import React from 'react'
 
 export const LandingPage: React.FC = ({}) => {
     return (
-        <div className="mx-auto max-w-screen-xl px-8 pt-32">
-            <main
-                className={`
-                  flex flex-col items-center gap-8
-
-                  lg:flex-row lg:items-start lg:justify-between
-                `}
-            >
-                <div
-                    className={`
-                      max-w-96 space-y-6 text-center
-
-                      lg:text-start
-                    `}
-                >
-                    <div
-                        aria-label="logo"
-                        className={`
-                          inline rounded-md bg-gradient-to-r from-green-400
-                          to-blue-500 px-3 text-3xl text-white
-                        `}
-                    >
-                        {'jsonthing'}
-                    </div>
-
-                    <h1
-                        aria-label=""
-                        className={`
-                          text-4xl font-bold
-
-                          md:text-5xl
-                        `}
-                    >
-                        {'JSON storage that speaks API.'}
-                    </h1>
-
-                    <p className="text-xl text-gray-600">
-                        {`Edit,
-                        and access your JSON documents with automatically generated API endpoints.`}
-                    </p>
-
-                    <CreateNewDocButton className="px-8 py-6 text-base">
-                        {'Create new JSON doc'}
-                    </CreateNewDocButton>
-                </div>
-
-                <div>
-                    <Image
-                        unoptimized
-                        src="https://storage.googleapis.com/jsonthing-assets/hero.png"
-                        alt="jsonthing hero"
-                        width={700}
-                        height={600}
-                    />
-                </div>
+        <div
+            className={`
+              mx-auto max-w-screen-xl px-6 pt-32
+
+              2xl:px-0
+            `}
+        >
+            <main>
+                <LandingPageHero />
             </main>
         </div>
     )

diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/LandingPageHero.spec.tsx b/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/LandingPageHero.spec.tsx
@@ -0,0 +1,20 @@
+import { CreateNewDocButton } from '@/components/CreateNewDocButton'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { LandingPageHero } from '.'
+
+jest.mock('@/components/CreateNewDocButton')
+
+describe('<LandingPageHero />', () => {
+    it('should render', () => {
+        expect.assertions(1)
+
+        jest.mocked(CreateNewDocButton).mockReturnValueOnce(
+            <button>{'Create new JSON doc'}</button>,
+        )
+
+        const { container } = render(<LandingPageHero />)
+
+        expect(container).toMatchSnapshot('<LandingPageHero />')
+    })
+})
diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/LandingPageHero.tsx b/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/LandingPageHero.tsx
@@ -0,0 +1,96 @@
+import { CreateNewDocButton } from '@/components/CreateNewDocButton'
+import { cn } from '@/lib/utils'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+interface PropsWithClassName {
+    className?: string
+}
+
+const LandingPageLogo: React.FC<PropsWithClassName> = ({ className }) => (
+    <Link
+        href="/"
+        aria-label="jsonthing logo"
+        className={cn(
+            `
+              inline-block rounded-md bg-gradient-to-r from-green-400
+              to-blue-500 px-3 py-1 text-2xl font-semibold text-white shadow-lg
+            `,
+
+            className,
+        )}
+    >
+        {'jsonthing'}
+    </Link>
+)
+
+export { LandingPageLogo }
+
+const LandingPageHeroDetails: React.FC<PropsWithClassName> = ({
+    className,
+}) => {
+    return (
+        <div className={cn(`space-y-6`, className)}>
+            <LandingPageLogo />
+
+            <h1
+                aria-label=""
+                className={`
+                  text-4xl font-bold
+
+                  md:text-5xl
+                `}
+            >
+                {'JSON storage that speaks API.'}
+            </h1>
+
+            <p className="text-xl text-gray-600">
+                {`Edit, and access your JSON documents with automatically generated API endpoints.`}
+            </p>
+
+            <CreateNewDocButton className="px-8 py-6 text-base">
+                {'Create new JSON doc'}
+            </CreateNewDocButton>
+        </div>
+    )
+}
+
+export const LandingPageHero: React.FC<PropsWithClassName> = ({
+    className,
+}) => {
+    return (
+        <section
+            className={cn(
+                `
+                  flex flex-col items-center gap-8
+
+                  lg:flex-row lg:items-start lg:justify-between
+                `,
+
+                className,
+            )}
+        >
+            <LandingPageHeroDetails
+                className={`
+                  max-w-96 text-center
+
+                  lg:text-start
+                `}
+            />
+
+            <Image
+                unoptimized
+                src="https://storage.googleapis.com/jsonthing-assets/hero.png"
+                alt="jsonthing hero"
+                width={700}
+                height={600}
+                className={`
+                  mt-0
+
+                  lg:mt-12
+                `}
+            />
+        </section>
+    )
+}
diff --git a/.../components/pages/LandingPage/LandingPageHero/__snapshots__/LandingPageHero.spec.tsx.snap b/.../components/pages/LandingPage/LandingPageHero/__snapshots__/LandingPageHero.spec.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LandingPageHero /> should render: <LandingPageHero /> 1`] = `
+<div>
+  <section
+    class="flex flex-col items-center gap-8 lg:flex-row lg:items-start lg:justify-between"
+  >
+    <div
+      class="space-y-6 max-w-96 text-center lg:text-start"
+    >
+      <a
+        aria-label="jsonthing logo"
+        class="inline-block rounded-md bg-gradient-to-r from-green-400 to-blue-500 px-3 py-1 text-2xl font-semibold text-white shadow-lg"
+        href="/"
+      >
+        jsonthing
+      </a>
+      <h1
+        aria-label=""
+        class="
+                  text-4xl font-bold
+
+                  md:text-5xl
+                "
+      >
+        JSON storage that speaks API.
+      </h1>
+      <p
+        class="text-xl text-gray-600"
+      >
+        Edit, and access your JSON documents with automatically generated API endpoints.
+      </p>
+      <button>
+        Create new JSON doc
+      </button>
+    </div>
+    <img
+      alt="jsonthing hero"
+      class="
+                  mt-0
+
+                  lg:mt-12
+                "
+      data-nimg="1"
+      decoding="async"
+      height="600"
+      loading="lazy"
+      src="https://storage.googleapis.com/jsonthing-assets/hero.png"
+      style="color: transparent;"
+      width="700"
+    />
+  </section>
+</div>
+`;
diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/index.ts b/apps/jsonthing-web/src/components/pages/LandingPage/LandingPageHero/index.ts
@@ -0,0 +1 @@
+export { LandingPageHero } from './LandingPageHero'
diff --git a/apps/jsonthing-web/src/components/pages/LandingPage/__snapshots__/LandingPage.spec.tsx.snap b/apps/jsonthing-web/src/components/pages/LandingPage/__snapshots__/LandingPage.spec.tsx.snap