laconic.com/src/components/sections/terms/termsofuse/index.tsx

import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import Heading from '~/components/primitives/heading'

import { termsOfUse } from './termsofuse'
import s from './termsofuse.module.scss'

const TermsOfUse = () => {
  return (
    <Section className={s['section']}>
      <div className={s.header}>
        <span>LAST UPDATE</span>
        <span className={s.separator}>—</span>
        <span>{termsOfUse.updatedOn}</span>
      </div>
      <Container className={s.container}>
        <p>{termsOfUse.text.block01.pg01}</p>
        <p>{termsOfUse.text.block01.pg02}</p>
        <p>{termsOfUse.text.block01.pg03}</p>
        <p>{termsOfUse.text.block01.pg04}</p>
        <Heading as="h2" font="tthoves" variant="sm">
          {termsOfUse.text.block02.title}
        </Heading>
        <p>{termsOfUse.text.block02.pg01}</p>
        <Heading as="h2" font="tthoves" variant="sm">
          {termsOfUse.text.block03.title}
        </Heading>
        <p>{termsOfUse.text.block03.pg01}</p>
      </Container>
    </Section>
  )
}

export default TermsOfUse