【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】Gemini CLIを使ってシンプルプロジェクトを開発

投稿者プロフィール

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

関連記事

  1. 【NextJS】Streaming with Suspense

  2. 【NextJS】DynamoDB with customType of…

  3. 【NextJS】Events

  4. 【NextJS】Redux

  5. 【NextJS】OAuth authentication with A…

  6. 【NextJS】Hooks-useEffect

最近の記事

  1. 2026.01.27

    情報処理安全確保支援士（セキスペ）試験対策について ~試…

  2. 2026.01.11

    情報処理安全確保支援士（セキスペ）試験対策について

  3. 2025.12.31

    情報処理安全確保支援士（セキスペ）について

  4. 2025.12.26

    RAG改良手法の学習

  5. 2025.12.25

    StreamlitでRAGを作ってみた

  6. 2025.12.23

    Pythonを学習するにあたってやったこと

  7. 2025.12.07

    複数のGitHubアカウントを使い分ける方法

  8. 2025.11.28

    『Webを支える技術』を読んだ学び

  9. 2025.11.22

    25年 11月 isub 全社会（忘年会）at 渋谷【P…

制作実績一覧

  2. Checkeys