【NextJS】UI Design using Stitch with Google AI Gemini

【NextJS】Online HTML Editor with Tiptap

1. 概要

前回はオンラインHTMLエディターTiptapのシンプルな内容でした。今回はStitchを使ってUIデザインを作り、NextJSで動かしてみる内容となります。

StitchはGoogle Labsの新しい実験プロジェクトで、シンプルなプロンプトやイメージを入力するだけで、複雑なUIデザインやフロントエンドコードを数分で生成できます。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. nodeのインストール

こちらを参考

3. プロジェクトを作成

3-1-1. こちらを参考

4. 必要なライブラリをインストール

今回はなし

5. Stitchにてプロンプトを投げて、UIデザインを作ってもらう

5-1. Stitchを開く

5-2. プロンプトを投げる

  • プロンプト内容
    • 内容を入力後、Generate designsをクリック（今回はMobileを選択）
美容院のホームページを作成してください。
大まかな機能は下記でお願いします。
・カッコ良いトップページ
・美容院の紹介ページ
・スタイリング紹介ページ
・予約ページ
・スタッフ紹介ページ
・アクセスページ

5-3. 指示を出した6ページ分を作成してくれました

5-4. 各ページのソースコードを取得

  • 各ページをクリック（6ページ分）
    • 右側にあるCodeをクリック（DesignモードからCodeモードに変わる）
      • Copy code

6. ソースコード

6-1. ソースコード

6-1-1. src/app/layout.tsx

import Script from "next/script";
import Head from "next/head";
import Link from "next/link";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <Head>
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com/"
          crossOrigin=""
        />
        <Link
          rel="stylesheet"
          as={"style"}
          onLoad={() => 'this.rel="stylesheet"'}
          href={
            "https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800"
          }
        />

        <title>Stitch Design</title>
        <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
      </Head>
      <body>
        <Script
          src="https://cdn.tailwindcss.com?plugins=forms,container-queries"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  );
}

6-1-2. src/app/page.tsx

const Home = () => {
  return (
    <>
      <div>
        <div className="@container">
          <div className="@[480px]:px-4 @[480px]:py-3">
            <div
              className="w-full bg-center bg-no-repeat bg-cover flex flex-col justify-end overflow-hidden bg-white @[480px]:rounded-xl min-h-80"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCw4bk0p24yKaRPFYkTbU_7FgyzeTq-6w9pDVEm-Z9PZi_VzS2OcwTOXnYBlDkwToqnVHjrI_hBxa6sb8TF8qCOuXTjtiU9qQWp0AUCKhVcRjqhGBlRrAx7w1LubwFoxgViUasCk8bNKBzuCs-VNlM87ISadQuIsTfIIgqH5PXDHvBArnit2w6E6WpXe8PbPwRvvobdMTeADEWo4uRijWwJmOh2mra0vJ1iIraVM5g9RZYzelUrBZ1tTF3jEir3W4AdzxkgXLmQRLM')",
              }}
            ></div>
          </div>
        </div>
        <h1 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 text-left pb-3 pt-5">
          Salon
        </h1>
        <p className="text-[#181113] text-base font-normal leading-normal pb-3 pt-1 px-4">
          We are a salon that values the individuality of each customer and
          provides services that bring out their charm. We offer a wide range of
          services, from basic cuts and coloring to hair extensions and hair
          sets.
        </p>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Menu
        </h2>
        <div className="flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between">
          <div className="flex flex-col justify-center">
            <p className="text-[#181113] text-base font-medium leading-normal line-clamp-1">
              Cut
            </p>
            <p className="text-[#89616b] text-sm font-normal leading-normal line-clamp-2">
              Cut, shampoo, styling
            </p>
          </div>
          <div className="shrink-0">
            <p className="text-[#181113] text-base font-normal leading-normal">
              $50
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between">
          <div className="flex flex-col justify-center">
            <p className="text-[#181113] text-base font-medium leading-normal line-clamp-1">
              Coloring
            </p>
            <p className="text-[#89616b] text-sm font-normal leading-normal line-clamp-2">
              Coloring, shampoo, styling
            </p>
          </div>
          <div className="shrink-0">
            <p className="text-[#181113] text-base font-normal leading-normal">
              $80
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between">
          <div className="flex flex-col justify-center">
            <p className="text-[#181113] text-base font-medium leading-normal line-clamp-1">
              Perm
            </p>
            <p className="text-[#89616b] text-sm font-normal leading-normal line-clamp-2">
              Perm, shampoo, styling
            </p>
          </div>
          <div className="shrink-0">
            <p className="text-[#181113] text-base font-normal leading-normal">
              $100
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between">
          <div className="flex flex-col justify-center">
            <p className="text-[#181113] text-base font-medium leading-normal line-clamp-1">
              Hair extensions
            </p>
            <p className="text-[#89616b] text-sm font-normal leading-normal line-clamp-2">
              Hair extensions, shampoo, styling
            </p>
          </div>
          <div className="shrink-0">
            <p className="text-[#181113] text-base font-normal leading-normal">
              $120
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between">
          <div className="flex flex-col justify-center">
            <p className="text-[#181113] text-base font-medium leading-normal line-clamp-1">
              Hair set
            </p>
            <p className="text-[#89616b] text-sm font-normal leading-normal line-clamp-2">
              Hair set
            </p>
          </div>
          <div className="shrink-0">
            <p className="text-[#181113] text-base font-normal leading-normal">
              $30
            </p>
          </div>
        </div>
      </div>
      <div>
        <div className="flex px-4 py-3">
          <button className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-12 px-5 flex-1 bg-[#ef426d] text-white text-base font-bold leading-normal tracking-[0.015em]">
            <span className="truncate">Book</span>
          </button>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Home;

6-1-3. src/app/salon/page.tsx

const Salon = () => {
  return (
    <>
      <div>
        <div className="@container">
          <div className="@[480px]:px-4 @[480px]:py-3">
            <div
              className="w-full bg-center bg-no-repeat bg-cover flex flex-col justify-end overflow-hidden bg-white @[480px]:rounded-xl min-h-80"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuD7x4M6fV9SgrDDswAE0OlxBoqOLuUmtb7zQk2SGQpVCanm_em4vs3jfrjaiHxIbCN9AGNqyLJP3892rsEDoaapJxLGzdQYyNn98XsoklCtP_HGHGZzSbfXMyLZ4S82qyyPGjYuFUfIb0Y3LUeW3oYgha-PAmgeTpoz162PLdcYgLMkdaWqAcxULwbPdByhy4tSukAKwNRILapV3dwRdixtrSP3GqhNcMvpNPtKx2DDch53_gofIbHeO4XMomRm8L3vFLLIpSmk25E')",
              }}
            ></div>
          </div>
        </div>
        <h1 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 text-left pb-3 pt-5">
          Salon
        </h1>
        <p className="text-[#181113] text-base font-normal leading-normal pb-3 pt-1 px-4">
          We are a salon that offers a variety of services, including haircuts,
          styling, and coloring. We are committed to providing our clients with
          the best possible experience.
        </p>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Services
        </h2>
        <div className="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuD6PNxuH9GWJkyCGIboE98npcDf48S_HU7RDKqNrMR4TW8EEldsBbyyb5b2ZNw1_Yn64hbztITmTXQ7NiwmneUEOsW1O7ZRezbpKaXTxPuAbW7qmQG5v3EdjY9ChcNYwtouGa5UY0vIY7SkB4IPvrSR7IhnUBvLVthSb2g30eReg122VAKbd0ERNyVviUwNztS-W7izXf1S5jIQ2VuQ20KyEsL_u7JXtiZ41oGSh8L_ovwTIOIpKomRuka9WfhmEb2Qi1_F_LS6aUw')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Haircut
            </h2>
          </div>
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuAcYTTz7FKVwuIM3xmcIBRPDCL7yfsIYkeowqduK2N9DWgQBtQfGtPjzBptjhtsvkKE3kmEGfI8p4MkfhSPOKfNA7eej-5L6XeJuC8tCFM3nC4vjCS-5gqUjl5DFnDy4Q1eJnKmXprJRKOZUcDmedeKI-reU2Deg0_P3EZ_7aG1F-etrayE67dKu3bgC0fPWVbwPqjzncsBjqAJiejJ-09qOcn5dA1eqSt7YcU8gfUJ5oPIPOqR4C4iWyI1UzU4J79rjjvVXmdxS5Q')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Hair Styling
            </h2>
          </div>
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuDTHKWOvhqdbcKbE135hWRKMYnTq-5ssiSfPr0YtIyhUDbgcyn_n-anuk2roXUeypecHxjrpRHdmNBOtYE2hv-JIdRIzERMOzPZ-H3-wXAX0n-0zdiqCnWN586FNw8cEAYrajxM-yINX8DjuGrLqxhFhC7tJ7ggBzty46v9Qt3UBMCO3hMmlrDHqDdyCZ3wia0xqVOWtlujCiyNrrpqoQIaf7e9UJo3QZS639NQ1AjbXE0Al2CINK2D2gcFYaF5CAHk9rJSJnmwyoc')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Hair Coloring
            </h2>
          </div>
        </div>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Gallery
        </h2>
        <div className="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
          <div className="flex flex-col gap-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuClfc04O6p-NoBH5ajdWh_RqhaA9XTYvRZtKx1ohKCk1qjdczr2A58c7FzDlmyUakr7Wujl07eNvzHEzNDKGu14q1ZPkoipdncaHo2Da41LhaG2Abm5tQseTM9ooOzB1uwYbH259z3oI-iRpbrJJOQqT9kRY97Pdsu0YxHVHRNQLfoKHdkfhBIRex38zvky4N6FwlfkZAnAqCPpxzfqE3XBYVrFFkrUnMTZ2tm56m5ehe2Z8o6onPPm_hC9Jj0OzxkxzVJfBOQSPBQ')",
              }}
            ></div>
          </div>
          <div className="flex flex-col gap-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCOrbokBh81FLCwUm08A0qpHYyWFkYY0dauVVJeLwphzbtVhWSwqwEomqNs3YHgP0K-v5iWwDP_927VdRt7nm30eOW05pxfL07H7z0mvJG_FOGl5dcLW_0JOdWVmxGa8wFE7Ud1Kx1nUE3N4OYD3B57gJzNg7VcqXVujhuzMElVbPh-upFmA_FeWLy5UHKIwlvFdQUK1C9wQDZEHMXHIOq3hyZESQXiIMbO-1h03lBCREB90Gn4_nTwfOcvgk-VkdbEUCbbdt_kBbc')",
              }}
            ></div>
          </div>
          <div className="flex flex-col gap-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCw0HbJUHLhe2NTgODaMb4znCi8N28dKwuivJrRlEtjcWn1MxcimG63J21G0ut45DBMptyQPlLeu3IDCcIfAcYGrek7B2wDMDKgUe1k01tWpnEanMROOXn66Qhjv_YMbca697e3XoJfrGO5rkQGwqePwgH2U43gsVd1_rcPDfpcA2rmleak2nRhRdm0ce2VNskB-b3F0l9bxhQKBV_Vqb_9heW0ekeE_W9wYH9clCz7UaZpcnWc3MDF-gfig6qRTm6ntwWz73cVCMA')",
              }}
            ></div>
          </div>
          <div className="flex flex-col gap-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuAU-g5-cF5GQBC4t2UeO2n1CR7W095Xy8LD_wh0CbHrrakuboQaU9gRHD6NVI8KHkgC-O_l1ETdYJjHjCdst_81ueqJ9Le4UH4B29uGx8jumFgK4ZlPoRSP3up5rGWvVkFk5gvctXoW1ifIm-u_o1tF0GcW3uwbQP_9_jMe7D4mZDDW65FSGrPz0UxjBMSn2zOpH17JWnt6pmzpG_IuoEJFtM3XjWjB422U_rj5NOimX_HbirtAoBxucQBHJGtD0aA7bdzEV2geBz0')",
              }}
            ></div>
          </div>
        </div>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Reviews
        </h2>
        <div className="flex flex-col gap-8 overflow-x-hidden bg-white p-4">
          <div className="flex flex-col gap-3 bg-white">
            <div className="flex items-center gap-3">
              <div
                className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCEAwH2-Osfr6HYrNDtDA-gmho-aQvN5YuqoQS9sZ6TTvoL9f4tTqeEJ1PhVKPIs-vlzvHlLYA4q1dzM5jaM9hB5Spcc9xa0Z1KCkHG_XnXe6ROBPPg3JB35QVPjZfDYVkhMPglUA0nfV6vUXD9n6zvR-aFZoz58ULN8bAih40HST2BD4_tvKcoqeqjh_hcFsMLt5DNFB7vlMSoxQdfd-z6XdOIC2qo0c-W4oX1YmOz1U0HBRdjTvI5MHicEWrsjOZ_lX1pNOgAOig')",
                }}
              ></div>
              <div className="flex-1">
                <p className="text-[#181113] text-base font-medium leading-normal">
                  Emily
                </p>
                <p className="text-[#89616b] text-sm font-normal leading-normal">
                  1 month ago
                </p>
              </div>
            </div>
            <div className="flex gap-0.5">
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
            </div>
            <p className="text-[#181113] text-base font-normal leading-normal">
              I had a great experience at this salon. The staff was friendly and
              professional, and I was very happy with my haircut.
            </p>
            <div className="flex gap-9 text-[#89616b]">
              <button className="flex items-center gap-2">
                <div
                  className="text-inherit"
                  data-icon="ThumbsUp"
                  data-size="20px"
                  data-weight="regular"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20px"
                    height="20px"
                    fill="currentColor"
                    viewBox="0 0 256 256"
                  >
                    <path d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"></path>
                  </svg>
                </div>
                <p className="text-inherit">2</p>
              </button>
              <button className="flex items-center gap-2">
                <div
                  className="text-inherit"
                  data-icon="ThumbsDown"
                  data-size="20px"
                  data-weight="regular"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20px"
                    height="20px"
                    fill="currentColor"
                    viewBox="0 0 256 256"
                  >
                    <path d="M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z"></path>
                  </svg>
                </div>
              </button>
            </div>
          </div>
          <div className="flex flex-col gap-3 bg-white">
            <div className="flex items-center gap-3">
              <div
                className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCImRAYP-P3aUyHAAdA2p7hjcMWJ9RzwV-KDvA7xx50vMz5APgOp1cEXH25bfg2ab_G-9tCTNF07E19kJPMQeXBjo5AecXBLnsiBgC3G9ytWm_Rtka5zjcg1HvJsOYOL__on-mfdGpWG8rQ2vrJ2S7O7mBEoUmdDLJgBdJiKYXT4i_o2kWgInLTB63wdqH_qJb6XZOwHe-gOl9EReweRv1dfAam1eyqXnw1EYqQ1KqwiY2AQoWA3j07BfWnUV_Bhxtx2wNuHOwaA8s')",
                }}
              ></div>
              <div className="flex-1">
                <p className="text-[#181113] text-base font-medium leading-normal">
                  Sophia
                </p>
                <p className="text-[#89616b] text-sm font-normal leading-normal">
                  2 months ago
                </p>
              </div>
            </div>
            <div className="flex gap-0.5">
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#181113]"
                data-icon="Star"
                data-size="20px"
                data-weight="fill"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
                </svg>
              </div>
              <div
                className="text-[#cebabf]"
                data-icon="Star"
                data-size="20px"
                data-weight="regular"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20px"
                  height="20px"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path d="M239.2,97.29a16,16,0,0,0-13.81-11L166,81.17,142.72,25.81h0a15.95,15.95,0,0,0-29.44,0L90.07,81.17,30.61,86.32a16,16,0,0,0-9.11,28.06L66.61,153.8,53.09,212.34a16,16,0,0,0,23.84,17.34l51-31,51.11,31a16,16,0,0,0,23.84-17.34l-13.51-58.6,45.1-39.36A16,16,0,0,0,239.2,97.29Zm-15.22,5-45.1,39.36a16,16,0,0,0-5.08,15.71L187.35,216v0l-51.07-31a15.9,15.9,0,0,0-16.54,0l-51,31h0L82.2,157.4a16,16,0,0,0-5.08-15.71L32,102.35a.37.37,0,0,1,0-.09l59.44-5.14a16,16,0,0,0,13.35-9.75L128,32.08l23.2,55.29a16,16,0,0,0,13.35,9.75L224,102.26S224,102.32,224,102.33Z"></path>
                </svg>
              </div>
            </div>
            <p className="text-[#181113] text-base font-normal leading-normal">
              I was happy with my hair styling, but the salon was a bit crowded.
            </p>
            <div className="flex gap-9 text-[#89616b]">
              <button className="flex items-center gap-2">
                <div
                  className="text-inherit"
                  data-icon="ThumbsUp"
                  data-size="20px"
                  data-weight="regular"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20px"
                    height="20px"
                    fill="currentColor"
                    viewBox="0 0 256 256"
                  >
                    <path d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"></path>
                  </svg>
                </div>
                <p className="text-inherit">1</p>
              </button>
              <button className="flex items-center gap-2">
                <div
                  className="text-inherit"
                  data-icon="ThumbsDown"
                  data-size="20px"
                  data-weight="regular"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20px"
                    height="20px"
                    fill="currentColor"
                    viewBox="0 0 256 256"
                  >
                    <path d="M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z"></path>
                  </svg>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div className="flex gap-2 border-t border-[#f4f0f1] bg-white px-4 pb-3 pt-2">
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 rounded-full text-[#181113]"
            href="#"
          >
            <div
              className="text-[#181113] flex h-8 items-center justify-center"
              data-icon="House"
              data-size="24px"
              data-weight="fill"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M224,115.55V208a16,16,0,0,1-16,16H168a16,16,0,0,1-16-16V168a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v40a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V115.55a16,16,0,0,1,5.17-11.78l80-75.48.11-.11a16,16,0,0,1,21.53,0,1.14,1.14,0,0,0,.11.11l80,75.48A16,16,0,0,1,224,115.55Z"></path>
              </svg>
            </div>
            <p className="text-[#181113] text-xs font-medium leading-normal tracking-[0.015em]">
              Home
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="Scissors"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M157.73,113.13A8,8,0,0,1,159.82,102L227.48,55.7a8,8,0,0,1,9,13.21l-67.67,46.3a7.92,7.92,0,0,1-4.51,1.4A8,8,0,0,1,157.73,113.13Zm80.87,85.09a8,8,0,0,1-11.12,2.08L136,137.7,93.49,166.78a36,36,0,1,1-9-13.19L121.83,128,84.44,102.41a35.86,35.86,0,1,1,9-13.19l143,97.87A8,8,0,0,1,238.6,198.22ZM80,180a20,20,0,1,0-5.86,14.14A19.85,19.85,0,0,0,80,180ZM74.14,90.13a20,20,0,1,0-28.28,0A19.85,19.85,0,0,0,74.14,90.13Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Services
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="Image"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Gallery
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="Star"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M239.2,97.29a16,16,0,0,0-13.81-11L166,81.17,142.72,25.81h0a15.95,15.95,0,0,0-29.44,0L90.07,81.17,30.61,86.32a16,16,0,0,0-9.11,28.06L66.61,153.8,53.09,212.34a16,16,0,0,0,23.84,17.34l51-31,51.11,31a16,16,0,0,0,23.84-17.34l-13.51-58.6,45.1-39.36A16,16,0,0,0,239.2,97.29Zm-15.22,5-45.1,39.36a16,16,0,0,0-5.08,15.71L187.35,216v0l-51.07-31a15.9,15.9,0,0,0-16.54,0l-51,31h0L82.2,157.4a16,16,0,0,0-5.08-15.71L32,102.35a.37.37,0,0,1,0-.09l59.44-5.14a16,16,0,0,0,13.35-9.75L128,32.08l23.2,55.29a16,16,0,0,0,13.35,9.75L224,102.26S224,102.32,224,102.33Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Reviews
            </p>
          </a>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Salon;

6-1-4. src/app/styling/page.tsx

const Styling = () => {
  return (
    <>
      <div>
        <div className="flex items-center bg-white p-4 pb-2 justify-between">
          <div
            className="text-[#181113] flex size-12 shrink-0 items-center"
            data-icon="ArrowLeft"
            data-size="24px"
            data-weight="regular"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24px"
              height="24px"
              fill="currentColor"
              viewBox="0 0 256 256"
            >
              <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
            </svg>
          </div>
          <h2 className="text-[#181113] text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">
            Styling
          </h2>
        </div>
        <div className="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
          <div className="flex flex-col gap-3 pb-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCn8Kwp_bgMpD7qyaC-RDjDr5vR_T02V_mQOl1nz9Xwd3aKy1qQO5XCaMYen9qNpyR3x9R-Mg3UrC5pGxKm9LxGb-91iVsVGmV2QnfJBsRe1n-tZebMovpb7p1RS-e2Xp-j-OAaUCrnYRNyY0WixdZpkNQmfIwPZtjOizg7k8DWn8fjXfIWg7q8tRPbkoVrF5Im9hgpCv1VXB2HDhbISIKSJJxigM9XtouK04CWQDyH53bg_1sYltDaoSWjsTZNgFLeYjg8gq0UAco')",
              }}
            ></div>
            <p className="text-[#181113] text-base font-medium leading-normal">
              Casual
            </p>
          </div>
          <div className="flex flex-col gap-3 pb-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuDn6FOy_3d6v0enQ9KtQzPOw3kHh4LQOzAL9MRUlGISn1M3JW2qcdDhtRTNapLZi1Od9SmvjOd1fJBfZVBx0m5kgYyFJNj2khm1lDb9LG4E6NQYk4up9NDjxDsq3thxyf6Scbv6IX_cydAH9Pax6YIZ0C3vMwI3gb3-v0odX5Lj4F4wyeSgIXEpE3BaK5aApYy3ZbSODuGu0NbxcX7nSnZmvhcf4N8rg72_EbiZTgoHiGYnyfMVWIfP9OYMTL3tsUUkGi2CVT-n8Tw')",
              }}
            ></div>
            <p className="text-[#181113] text-base font-medium leading-normal">
              Formal
            </p>
          </div>
          <div className="flex flex-col gap-3 pb-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuDkaO0G4XS5BFMo53maj6hR2xifNujm-DJi0mmYnDpfe3DFgp6yIb5XURTr6jaPQhvAZHawfUJcsZ5l5lfRAsH4avto8Kwyf6RlyeXFJADRcmhFWfCOxAXQzmvOLXS4R45AbptVw3TugZ1rdg2xkKNHnqvQRQAFgdCwTT0A0nM2fEM-qTrvbUW_NhuXjrW2PGrd6RGe1auoWMU7shyRh8vqtlGP4uLWI533Yehh7a8wq0rDk0qogyas78ZvWAucp2WdrSPYXg11EAo')",
              }}
            ></div>
            <p className="text-[#181113] text-base font-medium leading-normal">
              Street
            </p>
          </div>
          <div className="flex flex-col gap-3 pb-3">
            <div
              className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuB95wZKynzLvdczc3tkyBpKzj2FnwDGUV-MY1iK6KpcQEq5SonyDx1daiDwoAUUX_t8DrFhwx4Vz4RHPX1n1kk-eh62N8J7MqBt2dAkfgZKD4CNokVNePezAGYkjy-JaQM93GHaCCIaAq7GNMxZDoa0D9jtYgk0BJVAwnYA0GWrCF71l-6LdnvxznVLrUfp3cTmuZTXbmPT9ysdJZPiFbTmPsLjZiMIQEC5cZzr7mv1g1tAUisoghL05mpesOiTPbp5IfoXctotW1k')",
              }}
            ></div>
            <p className="text-[#181113] text-base font-medium leading-normal">
              Party
            </p>
          </div>
        </div>
      </div>
      <div>
        <div className="flex gap-2 border-t border-[#f4f0f1] bg-white px-4 pb-3 pt-2">
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 rounded-full text-[#181113]"
            href="#"
          >
            <div
              className="text-[#181113] flex h-8 items-center justify-center"
              data-icon="House"
              data-size="24px"
              data-weight="fill"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M224,115.55V208a16,16,0,0,1-16,16H168a16,16,0,0,1-16-16V168a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v40a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V115.55a16,16,0,0,1,5.17-11.78l80-75.48.11-.11a16,16,0,0,1,21.53,0,1.14,1.14,0,0,0,.11.11l80,75.48A16,16,0,0,1,224,115.55Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="MagnifyingGlass"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="ShoppingBag"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM176,88a48,48,0,0,1-96,0,8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="User"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path>
              </svg>
            </div>
          </a>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Styling;

6-1-5. src/app/booking/page.tsx

const Booking = () => {
  return (
    <>
      <div>
        <div className="flex items-center bg-white p-4 pb-2 justify-between">
          <div
            className="text-[#181113] flex size-12 shrink-0 items-center"
            data-icon="X"
            data-size="24px"
            data-weight="regular"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24px"
              height="24px"
              fill="currentColor"
              viewBox="0 0 256 256"
            >
              <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
            </svg>
          </div>
          <h2 className="text-[#181113] text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">
            Book
          </h2>
        </div>
        <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
          <label className="flex flex-col min-w-40 flex-1">
            <input
              placeholder="Search for a service"
              className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#181113] focus:outline-0 focus:ring-0 border-none bg-[#f4f0f1] focus:border-none h-14 placeholder:text-[#89616b] p-4 text-base font-normal leading-normal"
              defaultValue={""}
            />
          </label>
        </div>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Popular
        </h2>
        <div className="flex overflow-y-auto [-ms-scrollbar-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          <div className="flex items-stretch p-4 gap-3">
            <div className="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-40">
              <div
                className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCcp74aSzMB4VpL-DQrnvjPuEL1xrOMgcgECPYRD6nHr5ElfV7X8I6zvfxZQ1ReNMHRSjXcPRgNJZlGkAqAfoj6bDo6wbR1lDJV9PLkwIPMdbyBLHYB2hE3DDeKYSg1LSpgaWD_OY3tJ8V9MQG2lHXFyv1dQ03jMKuwVJcqSIPbFb0CAcea3AaTZF618MQvAW1jbS2qoixKJ0NWKodLs1t3P5sMf7-4ZnWzQALiu4A1DQ0JohHCkbM0EkMIWQkUV3yAPgnx08wt3jE')",
                }}
              ></div>
              <p className="text-[#181113] text-base font-medium leading-normal">
                Haircut
              </p>
            </div>
            <div className="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-40">
              <div
                className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCrHIIDWMsMA3LBdexA5xTWESkbVfazw3jg_0P4BUP_AmnsOj8_Go5pMtfp9CXRyLuYpkrbAuneibGIZf4BN4SIWqyzFAKvy6hn5-o4VUEBpDDH6FcBf0MD-g-B5AopP7N9idQcZQjezBfjmRy-eBFP81zCc-8DSTLbzU1hpR4YgSj92wiRk813yByeLA5CyNrn8AuDEAgLRtVW93OSVIye0NGkO5DwWJPQb3GVUXULben4X1P_xb6X26-FcfNV-W_yrDJe79Q98OI')",
                }}
              ></div>
              <p className="text-[#181113] text-base font-medium leading-normal">
                Manicure
              </p>
            </div>
            <div className="flex h-full flex-1 flex-col gap-4 rounded-lg min-w-40">
              <div
                className="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCQXBPsWtOMTUaeyJKgU8vmAIfgX7Qlo2XOJCFP_GgsIurl3yJuCQz3rdE3i3gVdqvvxXAwKn5zWI4wCb5i5QD4Pp_jzHN06oeuZXSzEHUKp_YGJZGgerugjWfhMdfdFCP7jGtveYmLHk6TS50TGbzmaJimLfpxVsI17P09S1HFkv43FOFx69U61h7-omvt6iTANVlOKCj27lCajSKWjjQoPy2EUt1VgzOw6mPKVOi72lWNXaESj1uMpnhhCsFhKFPS0PyaW7Gq900')",
                }}
              ></div>
              <p className="text-[#181113] text-base font-medium leading-normal">
                Massage
              </p>
            </div>
          </div>
        </div>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          Categories
        </h2>
        <div className="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4">
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuAgm06YkoT1FPXU9YFFsD72p3gZq-04aDPvDt3-QOtYlUe0SzoDro51uoplm2M0ZX4-9VhdtsL2fqaDNhTAsHXXnjnAWnNMm7PB_oikcBE8X4VA9-0lWNC47YpoDb0oqtZmE2frfBBIDp6frWnlASHnVGBehaYtePs_ICQYrBmlFaSLNvMgTxPLoGCAYQfAOOTPDNDsUXDNrop5YWsCG4fNMMXMLVJwvz5Hayl2pzoOz4GnDyFeprf5Q7ng6RUV8DW9HIs9ahvr2Fo')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Haircut
            </h2>
          </div>
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuBL1H2NosL7NTL1nWkZH9rI0ihPldwmKpeK_s1K8i-_W-byUbidVqLhB971zVukTCS_62hxVE4_SRpurAuhtXSvRGvIuURVyMrPBr3bRFNqqKlmJlEr_282sVXzKMdK3HF_xzd2OI_jbFEBmrzockRHVP_l5DL5QQttxUI4omoPIHEYOwQ7_Ced1UnINHMbJaC_HDn14q8O4H9Xj-hwC8MmjnipakHwM2SErvls3g8D1MsrC5AIUf-KfVbkcy_UzOIWtH8RTwBQe98')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Manicure
            </h2>
          </div>
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuAyBBW5ScQpZFgLzejUx4wfRhHZzUf1M8kh1rC00byZHD-ZAlYZiY5Sfx0YbW3GovWQOUaVkQJJ8dSd90u1X12Xzhx-CY-WGTehpq346isTCaFUev6257sdEiNYNErpeZRp69OKyBAVnmzoYR0aIjgRWZIxlaZCkoeBZCwtcv7HfX6Z5tLmvSRvvVtMqYx3LCYDAGpCkW057mLAHeF_WU05OOdQdf3YjrWTAK75fX5YcTUrCCZKFrhDMEWYRaokSD1u_l2Yug9yDX8')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Massage
            </h2>
          </div>
          <div className="flex flex-1 gap-3 rounded-lg border border-[#e6dbde] bg-white p-4 items-center">
            <div
              className="bg-center bg-no-repeat aspect-square bg-cover rounded-lg w-10 shrink-0"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuBq1GMA-SfTe6o0RV5l19Lbd_9yu7WncMGobbKvSEQNh0EbdTNhw4gmjzXgDv2XmNpX8rr4fpuB3gyyD64mxSL0fgVcJNHR8R5QRSr92MZBq2xsvHhg7CiofucsckcV1LNdVhS53oyM7coTJ-weU3yqcEsbh6So3YbQ6Y-AkbwYKj9FUSNpfz6KYdoOvJXvzXgqaxxNeCZqE-uPQqQ2jFB2kDmIN6g1lVlOEgQ1Ngwe8a4McUT-Rqb5fsJEa675aX_Mhqhl5rqlPYI')",
              }}
            ></div>
            <h2 className="text-[#181113] text-base font-bold leading-tight">
              Facial
            </h2>
          </div>
        </div>
      </div>
      <div>
        <div className="flex gap-2 border-t border-[#f4f0f1] bg-white px-4 pb-3 pt-2">
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="House"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Home
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="MagnifyingGlass"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Search
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 rounded-full text-[#181113]"
            href="#"
          >
            <div
              className="text-[#181113] flex h-8 items-center justify-center"
              data-icon="Calendar"
              data-size="24px"
              data-weight="fill"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM112,184a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm56-8a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136a23.76,23.76,0,0,1-4.84,14.45L152,176ZM48,80V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80Z"></path>
              </svg>
            </div>
            <p className="text-[#181113] text-xs font-medium leading-normal tracking-[0.015em]">
              Book
            </p>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="Tray"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,16V152h-28.7A15.86,15.86,0,0,0,168,156.69L148.69,176H107.31L88,156.69A15.86,15.86,0,0,0,76.69,152H48V48Zm0,160H48V168H76.69L96,187.31A15.86,15.86,0,0,0,107.31,192h41.38A15.86,15.86,0,0,0,160,187.31L179.31,168H208v40Z"></path>
              </svg>
            </div>
            <p className="text-[#89616b] text-xs font-medium leading-normal tracking-[0.015em]">
              Inbox
            </p>
          </a>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Booking;

6-1-6. src/app/staff/page.tsx

const Staff = () => {
  return (
    <>
      <div>
        <div className="flex items-center bg-white p-4 pb-2 justify-between">
          <div
            className="text-[#181113] flex size-12 shrink-0 items-center"
            data-icon="ArrowLeft"
            data-size="24px"
            data-weight="regular"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24px"
              height="24px"
              fill="currentColor"
              viewBox="0 0 256 256"
            >
              <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
            </svg>
          </div>
          <h2 className="text-[#181113] text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">
            スタッフ紹介
          </h2>
        </div>
        <div className="flex p-4 @container">
          <div className="flex w-full flex-col gap-4 items-center">
            <div className="flex gap-4 flex-col items-center">
              <div
                className="bg-center bg-no-repeat aspect-square bg-cover rounded-full min-h-32 w-32"
                style={{
                  backgroundImage:
                    "url('https://lh3.googleusercontent.com/aida-public/AB6AXuCkUqZSnC_x4V8tbkxShrKe5TfldI673GZE68tcXElWK-HaTSrhGvr_ljK3YIgnFJNX-y-VLfK9XUqzN0FzAzeZE_QyBHcKYr2SDV26GCKYLg-H2SQnIDRO0AHS2-zvTvf4D9mNhN394Xs-qtoU4AFzL91ADYBMplsh6oumysvw6dRxGSyie2vsavnksagEDQVP0ze7C1omrX-3mzDMAIUFcPfzfEMpyDYzxIVam-lGS0YZU2rJhKxditAklTebFtoPopUzDKQ0qnM')",
                }}
              ></div>
              <div className="flex flex-col items-center justify-center justify-center">
                <p className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] text-center">
                  田中 美咲
                </p>
                <p className="text-[#89616b] text-base font-normal leading-normal text-center">
                  マネージャー
                </p>
                <p className="text-[#89616b] text-base font-normal leading-normal text-center">
                  10年の経験
                </p>
              </div>
            </div>
          </div>
        </div>
        <p className="text-[#181113] text-base font-normal leading-normal pb-3 pt-1 px-4">
          田中
          美咲は、10年以上の経験を持つベテランマネージャーです。彼女は、チームを率いてプロジェクトを成功に導くことに情熱を注いでいます。
        </p>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          スキル
        </h2>
        <div className="flex gap-3 p-3 flex-wrap pr-4">
          <div className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f4f0f1] pl-4 pr-4">
            <p className="text-[#181113] text-sm font-medium leading-normal">
              リーダーシップ
            </p>
          </div>
          <div className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f4f0f1] pl-4 pr-4">
            <p className="text-[#181113] text-sm font-medium leading-normal">
              プロジェクト管理
            </p>
          </div>
          <div className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f4f0f1] pl-4 pr-4">
            <p className="text-[#181113] text-sm font-medium leading-normal">
              コミュニケーション
            </p>
          </div>
          <div className="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-xl bg-[#f4f0f1] pl-4 pr-4">
            <p className="text-[#181113] text-sm font-medium leading-normal">
              問題解決
            </p>
          </div>
        </div>
        <h2 className="text-[#181113] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">
          経歴
        </h2>
        <div className="grid grid-cols-[40px_1fr] gap-x-2 px-4">
          <div className="flex flex-col items-center gap-1 pt-3">
            <div
              className="text-[#181113]"
              data-icon="Briefcase"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z"></path>
              </svg>
            </div>
            <div className="w-[1.5px] bg-[#e6dbde] h-2 grow"></div>
          </div>
          <div className="flex flex-1 flex-col py-3">
            <p className="text-[#181113] text-base font-medium leading-normal">
              株式会社ABC
            </p>
            <p className="text-[#89616b] text-base font-normal leading-normal">
              2018 - 現在
            </p>
          </div>
          <div className="flex flex-col items-center gap-1">
            <div className="w-[1.5px] bg-[#e6dbde] h-2"></div>
            <div
              className="text-[#181113]"
              data-icon="Briefcase"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z"></path>
              </svg>
            </div>
            <div className="w-[1.5px] bg-[#e6dbde] h-2 grow"></div>
          </div>
          <div className="flex flex-1 flex-col py-3">
            <p className="text-[#181113] text-base font-medium leading-normal">
              株式会社XYZ
            </p>
            <p className="text-[#89616b] text-base font-normal leading-normal">
              2015 - 2018
            </p>
          </div>
          <div className="flex flex-col items-center gap-1 pb-3">
            <div className="w-[1.5px] bg-[#e6dbde] h-2"></div>
            <div
              className="text-[#181113]"
              data-icon="Briefcase"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z"></path>
              </svg>
            </div>
          </div>
          <div className="flex flex-1 flex-col py-3">
            <p className="text-[#181113] text-base font-medium leading-normal">
              株式会社PQR
            </p>
            <p className="text-[#89616b] text-base font-normal leading-normal">
              2012 - 2015
            </p>
          </div>
        </div>
      </div>
      <div>
        <div className="flex gap-2 border-t border-[#f4f0f1] bg-white px-4 pb-3 pt-2">
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 rounded-full text-[#181113]"
            href="#"
          >
            <div
              className="text-[#181113] flex h-8 items-center justify-center"
              data-icon="House"
              data-size="24px"
              data-weight="fill"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M224,115.55V208a16,16,0,0,1-16,16H168a16,16,0,0,1-16-16V168a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v40a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V115.55a16,16,0,0,1,5.17-11.78l80-75.48.11-.11a16,16,0,0,1,21.53,0,1.14,1.14,0,0,0,.11.11l80,75.48A16,16,0,0,1,224,115.55Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="MagnifyingGlass"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="PlusSquare"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Zm-32-80a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z"></path>
              </svg>
            </div>
          </a>
          <a
            className="just flex flex-1 flex-col items-center justify-end gap-1 text-[#89616b]"
            href="#"
          >
            <div
              className="text-[#89616b] flex h-8 items-center justify-center"
              data-icon="User"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path>
              </svg>
            </div>
          </a>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Staff;

6-1-7. src/app/access/page.tsx

const Access = () => {
  return (
    <>
      <div>
        <div className="flex items-center bg-white p-4 pb-2 justify-between">
          <div
            className="text-[#181113] flex size-12 shrink-0 items-center"
            data-icon="ArrowLeft"
            data-size="24px"
            data-weight="regular"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24px"
              height="24px"
              fill="currentColor"
              viewBox="0 0 256 256"
            >
              <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
            </svg>
          </div>
          <h2 className="text-[#181113] text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">
            Access
          </h2>
        </div>
        <div className="@container flex flex-col h-full flex-1">
          <div className="flex flex-1 flex-col @[480px]:px-4 @[480px]:py-3">
            <div
              className="bg-cover bg-center flex min-h-[320px] flex-1 flex-col justify-between px-4 pb-4 pt-5 @[480px]:rounded-xl @[480px]:px-8 @[480px]:pb-6 @[480px]:pt-8"
              style={{
                backgroundImage:
                  "url('https://lh3.googleusercontent.com/aida-public/AB6AXuDUJ-Vx8ZKc7icOG7ch4f-m0erbBRtjM4-RnjSJ7nd9IVE07KXmt7Z-P2Ypb_Xvq5FLPAQL-UdJhvPSOQM0Cd0p5IytjJamCi7rFvoloK5DxzY2LT3fzSeWgA8XimezUXn5wOreY8YGWqx5looSfVSR-7UxyVg5mwvrg6Z6j_EotYC236msOaPFMTxhPOMEFUU0vmc3FKhwNpUduGe_r0mvbsFkEBAUfnkF07UwyhMrggnGeDGgO1xYLxnhH23G9GOeQRhQ39sdBUM')",
              }}
            >
              <label className="flex flex-col min-w-40 h-12">
                <div className="flex w-full flex-1 items-stretch rounded-xl h-full">
                  <div
                    className="text-[#89616b] flex border-none bg-white items-center justify-center pl-4 rounded-l-xl border-r-0"
                    data-icon="MagnifyingGlass"
                    data-size="24px"
                    data-weight="regular"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24px"
                      height="24px"
                      fill="currentColor"
                      viewBox="0 0 256 256"
                    >
                      <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
                    </svg>
                  </div>
                  <input
                    placeholder="Search"
                    className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#181113] focus:outline-0 focus:ring-0 border-none bg-white focus:border-none h-full placeholder:text-[#89616b] px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal"
                    defaultValue={""}
                  />
                </div>
              </label>
              <div className="flex flex-col items-end gap-3">
                <div className="flex flex-col gap-0.5">
                  <button className="flex size-10 items-center justify-center rounded-t-xl bg-white shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
                    <div
                      className="text-[#181113]"
                      data-icon="Plus"
                      data-size="24px"
                      data-weight="regular"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24px"
                        height="24px"
                        fill="currentColor"
                        viewBox="0 0 256 256"
                      >
                        <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
                      </svg>
                    </div>
                  </button>
                  <button className="flex size-10 items-center justify-center rounded-b-xl bg-white shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
                    <div
                      className="text-[#181113]"
                      data-icon="Minus"
                      data-size="24px"
                      data-weight="regular"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24px"
                        height="24px"
                        fill="currentColor"
                        viewBox="0 0 256 256"
                      >
                        <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path>
                      </svg>
                    </div>
                  </button>
                </div>
                <button className="flex size-10 items-center justify-center rounded-xl bg-white shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
                  <div
                    className="text-[#181113]"
                    data-icon="NavigationArrow"
                    data-size="24px"
                    data-weight="regular"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24px"
                      height="24px"
                      fill="currentColor"
                      viewBox="0 0 256 256"
                      transform="scale(-1, 1)"
                    >
                      <path d="M229.33,98.21,53.41,33l-.16-.05A16,16,0,0,0,32.9,53.25a1,1,0,0,0,.05.16L98.21,229.33A15.77,15.77,0,0,0,113.28,240h.3a15.77,15.77,0,0,0,15-11.29l23.56-76.56,76.56-23.56a16,16,0,0,0,.62-30.38ZM224,113.3l-76.56,23.56a16,16,0,0,0-10.58,10.58L113.3,224h0l-.06-.17L48,48l175.82,65.22.16.06Z"></path>
                    </svg>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div className="flex justify-end overflow-hidden px-5 pb-5">
          <button className="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-14 px-5 bg-[#ef426d] text-white text-base font-bold leading-normal tracking-[0.015em] min-w-0 gap-4 pl-4 pr-6">
            <div
              className="text-white"
              data-icon="ArrowRight"
              data-size="24px"
              data-weight="regular"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
              </svg>
            </div>
            <span className="truncate">Get directions</span>
          </button>
        </div>
        <div className="h-5 bg-white"></div>
      </div>
    </>
  );
};

export default Access;

7. サーバーを起動

7-1-1. NextJSを立ち上げる

npm run dev

8. ブラウザで確認

  • http://localhost:3000

8-1-1. 6画面

9. ディレクトリの構造

.
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── access
│       │   └── page.tsx
│       ├── booking
│       │   └── page.tsx
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.tsx
│       ├── salon
│       │   └── page.tsx
│       ├── staff
│       │   └── page.tsx
│       └── styling
│           └── page.tsx
└── tsconfig.json

8 directories, 22 files

10. 備考

今回はStitchを使ってUIデザインを作り、NextJSで動かしてみる内容についてでした。

11. 参考

【NextJS】Online HTML Editor with Tiptap

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【NextJS】Firestore

  2. 【Next.js】ローカル環境をSSL化してみる

  3. 【NextJS】Hooks-useReducer

  4. 【新米エンジニア学習記録④】Next.jsのデプロイⅡ

  5. 【NextJS】Streaming with Suspense

  6. 【NextJS】NextJS・TypeScript・Apollo Cl…

最近の記事

  1. 2025.06.07

    【NextJS】UI Design using Stit…
  2. AWS

    2025.05.27

    【AWS】API Gateway + Lambda + …

  3. 2025.05.16

    【NextJS】Online HTML Editor w…
  4. Node.js

    2025.05.06

    【NodeJS】TypeScriptでCSVを読み込んで…

  5. 2025.05.01

    【NextJS】Access AppSync API w…

  6. 2025.04.19

    【NextJS】DynamoDB with custom…

  7. 2025.04.07

    【NextJS】Fullscreen of a port…

  8. 2025.04.04

    【NextJS】Zoom in on an image …

  9. 2025.03.18

    【VB.NET】環境構築

制作実績一覧

  2. Checkeys