feat: Add Privacy Page

frontend/apps/service-site/contentlayer.config.ts

@@ -56,9 +56,25 @@ export const Post = defineDocumentType(() => ({
   },
 }))
 
+export const Privacy = defineDocumentType(() => ({
+  name: 'Privacy',
+  filePathPattern: 'privacy/*.mdx',
+  contentType: 'mdx',
+  computedFields: {
+    lang: {
+      type: 'string',
+      resolve: (post) => {
+        // ex. segments = [ 'posts', 'en' ]
+        const segments = post._raw.flattenedPath.split('/')
+        return segments[1]
+      },
+    },
+  },
+}))
+
 export default makeSource({
   contentDirPath: 'src/contents',
-  documentTypes: [Post],
+  documentTypes: [Post, Privacy],
   mdx: {
     remarkPlugins: [remarkGfm, remarkBreaks, remarkLinkCard],
     rehypePlugins: [rehypeSlug, rehypePrettyCode],

frontend/apps/service-site/src/app/[lang]/privacy/page.tsx

@@ -0,0 +1,14 @@
+import type { PageProps } from '@/app/types'
+import { langSchema } from '@/features/i18n'
+import { PrivacyPage } from '@/features/privacy'
+import { object, parse } from 'valibot'
+
+const paramsSchema = object({
+  lang: langSchema,
+})
+
+export default function Page({ params }: PageProps) {
+  const { lang } = parse(paramsSchema, params)
+
+  return <PrivacyPage lang={lang} />
+}

frontend/apps/service-site/src/app/privacy/page.tsx

@@ -0,0 +1,5 @@
+import { PrivacyPage } from '@/features/privacy'
+
+export default function Page() {
+  return <PrivacyPage />
+}

frontend/apps/service-site/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './TopCards'
 export * from './ShareIcon'
 export * from './Icons'
 export * from './Badge'
+export * from './TableOfContents'

frontend/apps/service-site/src/contents/privacy/en.mdx

@@ -0,0 +1,66 @@
+Welcome to Liam, a no-code application platform. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our platform.
+
+## Information We Collect
+
+a. Personal Information
+
+- Name
+- Email address
+- Billing information
+- User-generated content
+
+b. Usage Data
+
+- IP address
+- Browser type
+- Pages visited
+- Time spent on platform
+- How We Use Your Information
+
+## How We Use Your Information
+
+We use your information to
+
+- Provide and maintain our services
+- Improve and personalize user experience
+- Process transactions
+- Send administrative information
+- Respond to inquiries and offer support
+- Data Storage and Security
+
+We implement industry-standard security measures to protect your data. Your information is stored on secure servers and is only accessible to authorized personnel.
+
+## Data Storage and Security
+
+We implement industry-standard security measures to protect your data. Your information is stored on secure servers and is only accessible to authorized personnel.
+
+## Third-Party Services
+
+We may use third-party services for analytics, payment processing, and hosting. These services have their own privacy policies.
+
+## Data Retention
+
+We retain your data for as long as your account is active or as needed to provide you services. You may request deletion of your data at any time.
+
+## User Rights
+
+You have the right to
+
+- Access your personal data
+- Correct inaccuracies in your data
+- Request deletion of your data
+- Object to processing of your data
+
+## Children's Privacy
+
+Our platform is not intended for children under 13. We do not knowingly collect data from children under 13.
+
+## Changes to This Policy
+
+We may update this policy from time to time. We will notify you of any changes by posting the new policy on this page.
+
+## Contact Us
+
+If you have any questions about this Privacy Policy, please contact us at [contact email].
+
+Last updated: [Date]

frontend/apps/service-site/src/contents/privacy/ja.mdx

@@ -0,0 +1,66 @@
+Liamへようこそ。Liamはノーコードアプリケーションプラットフォームです。このプライバシーポリシーでは、当社のプラットフォームをご利用いただく際に、お客様の情報をどのように収集、使用、開示、保護するかについて説明します。
+
+## 収集する情報
+
+a. 個人情報
+
+- 名前
+- メールアドレス
+- 請求情報
+- ユーザーが生成したコンテンツ
+
+b. Usage Data
+
+- IP address
+- Browser type
+- Pages visited
+- Time spent on platform
+- How We Use Your Information
+
+## How We Use Your Information
+
+We use your information to
+
+- Provide and maintain our services
+- Improve and personalize user experience
+- Process transactions
+- Send administrative information
+- Respond to inquiries and offer support
+- Data Storage and Security
+
+We implement industry-standard security measures to protect your data. Your information is stored on secure servers and is only accessible to authorized personnel.
+
+## Data Storage and Security
+
+We implement industry-standard security measures to protect your data. Your information is stored on secure servers and is only accessible to authorized personnel.
+
+## Third-Party Services
+
+We may use third-party services for analytics, payment processing, and hosting. These services have their own privacy policies.
+
+## Data Retention
+
+We retain your data for as long as your account is active or as needed to provide you services. You may request deletion of your data at any time.
+
+## User Rights
+
+You have the right to
+
+- Access your personal data
+- Correct inaccuracies in your data
+- Request deletion of your data
+- Object to processing of your data
+
+## Children's Privacy
+
+Our platform is not intended for children under 13. We do not knowingly collect data from children under 13.
+
+## Changes to This Policy
+
+We may update this policy from time to time. We will notify you of any changes by posting the new policy on this page.
+
+## Contact Us
+
+If you have any questions about this Privacy Policy, please contact us at [contact email].
+
+Last updated: [Date]

frontend/apps/service-site/src/features/posts/components/Heading/Heading.module.css

@@ -7,6 +7,7 @@
 }
 
 .h2 {
+  margin-top: var(--spacing-10);
   font-size: var(--font-size-10, 1.5rem);
 }
 
@@ -24,6 +25,7 @@
 
 @media screen and (max-width: 768px) {
   .h2 {
+    margin-top: var(--spacing-20);
     font-size: var(--font-size-8, 1.25rem);
   }
 

frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx

@@ -1,3 +1,4 @@
+import { TableOfContents } from '@/components'
 import { type Lang, fallbackLang } from '@/features/i18n'
 import { PostCategories } from '@/features/posts/components/PostCategories'
 import { PostHero } from '@/features/posts/components/PostHero'
@@ -9,7 +10,6 @@ import type { FC } from 'react'
 import { findPostByLangAndSlug, getNextPost, getPrevPost } from '../../utils'
 import { NavNextPost } from '../NavNextPost'
 import { NavPreviousPost } from '../NavPreviousPost'
-import { TableOfContents } from '../TableOfContents'
 import styles from './PostDetailPage.module.css'
 
 const TOC_TARGET_CLASS_NAME = 'target-toc'

frontend/apps/service-site/src/features/posts/components/index.ts

@@ -5,7 +5,6 @@ export * from './LinkCard'
 export * from './NavNextPost'
 export * from './NavPreviousPost'
 export * from './Blockquote'
-export * from './TableOfContents'
 export * from './PostHero'
 export * from './BodyText'
 export * from './PostCategories'

frontend/apps/service-site/src/features/privacy/components/PrivacyPage/PrivacyPage.module.css

@@ -0,0 +1,55 @@
+.wrapper {
+  display: grid;
+  grid-auto-flow: row;
+  gap: var(--spacing-4);
+}
+
+.h1 {
+  margin-top: var(--spacing-10);
+  padding: var(--spacing-5);
+  color: var(--global-foreground, #fff);
+  font-family: var(--message-font, Montserrat);
+  font-size: var(--font-size-14, 2rem);
+}
+
+.container {
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: var(--spacing-10);
+  padding: 0 var(--spacing-4);
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    padding: 0 var(--spacing-20, 80px);
+  }
+
+  .h1 {
+    padding: var(--spacing-20, 80px);
+    font-size: var(--font-size-18);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .wrapper {
+    gap: var(--spacing-20);
+  }
+
+  .h1 {
+    padding: var(--spacing-20);
+    font-size: var(--font-size-18);
+    text-align: center;
+  }
+
+  .container {
+    grid-template-columns: 274px auto;
+    gap: var(--spacing-10, 40px);
+    padding: 0 var(--spacing-20, 80px);
+  }
+
+  .left {
+    position: sticky;
+    top: calc(var(--default-header-height) + var(--spacing-8));
+    align-self: flex-start;
+  }
+}

frontend/apps/service-site/src/features/privacy/components/PrivacyPage/PrivacyPage.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { PrivacyPage } from './'
+
+const meta = {
+  component: PrivacyPage,
+} satisfies Meta<typeof PrivacyPage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/apps/service-site/src/features/privacy/components/PrivacyPage/PrivacyPage.tsx

@@ -0,0 +1,33 @@
+import { TableOfContents } from '@/components'
+import { type Lang, fallbackLang } from '@/features/i18n'
+import { MDXContent } from '@/libs/contentlayer'
+import clsx from 'clsx'
+import { notFound } from 'next/navigation'
+import type { FC } from 'react'
+import { findPrivacyByLang } from '../../utils'
+import styles from './PrivacyPage.module.css'
+
+const TOC_TARGET_CLASS_NAME = 'target-toc'
+
+type Props = {
+  lang?: Lang
+}
+
+export const PrivacyPage: FC<Props> = ({ lang }) => {
+  const privacy = findPrivacyByLang({ lang: lang ?? fallbackLang })
+  if (!privacy) notFound()
+
+  return (
+    <article className={clsx(TOC_TARGET_CLASS_NAME, styles.wrapper)}>
+      <h1 className={styles.h1}>Privacy Policy</h1>
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <TableOfContents contentSelector={TOC_TARGET_CLASS_NAME} />
+        </div>
+        <div>
+          <MDXContent code={privacy.body.code} />
+        </div>
+      </div>
+    </article>
+  )
+}

frontend/apps/service-site/src/features/privacy/components/PrivacyPage/index.ts

@@ -0,0 +1 @@
+export * from './PrivacyPage'

frontend/apps/service-site/src/features/privacy/components/index.ts

@@ -0,0 +1 @@
+export * from './PrivacyPage'

frontend/apps/service-site/src/features/privacy/index.ts

@@ -0,0 +1 @@
+export * from './components'

frontend/apps/service-site/src/features/privacy/utils/findPrivacyByLang.ts

@@ -0,0 +1,10 @@
+import type { Lang } from '@/features/i18n'
+import { type Privacy, allPrivacies } from 'contentlayer/generated'
+
+type Params = {
+  lang: Lang
+}
+
+export function findPrivacyByLang({ lang }: Params): Privacy | undefined {
+  return allPrivacies.find((p) => p.lang === lang)
+}

frontend/apps/service-site/src/features/privacy/utils/index.ts

@@ -0,0 +1 @@
+export * from './findPrivacyByLang'