採用LP作成

改善案の例 (TSX)
Home.tsx のセクションをコンポーネント化

// Home.tsx
import React from 'react';
import styles from './page.module.css';
import TopSection from './_components/TopSection';
import DescriptionSection from './_components/DescriptionSection';

export default function Home(): JSX.Element {
  return (
    <>
      <TopSection />
      <DescriptionSection />
    </>
  );
}

新しいコンポーネント TopSection.tsx

// _components/TopSection.tsx
import React from 'react';
import styles from '../page.module.css';

export default function TopSection(): JSX.Element {
  return (
    <section className={styles.top}>
      <div>
        <h1 className={styles.titleSub}>足立いつき薬局の採用情報</h1>
        <p className={styles.titleMain}>
          求ム！
          <br />
          未来を明るくする者たち。
        </p>
      </div>
    </section>
  );
}

新しいコンポーネント DescriptionSection.tsx

// _components/DescriptionSection.tsx
import React from 'react';
import styles from '../page.module.css';

export default function DescriptionSection(): JSX.Element {
  return (
    <section className={styles.descriptionText}>
      人々の健康を支え、笑顔と安心を届けたい。
      <br />
      将来、薬剤師として新たな道を切り拓きたい
      <br />
      IT、在宅医療やアレルギー分野での専門性を深めたい。
      <br />
      その情熱が、医療の未来を支えるあなたの力強い翼になると信じています。
    </section>
  );
}

これで、各コンポーネントに型が追加され、TSXとして適切に実装されています。