3つのウェビナー集客バナーを縦長のバナーで作って
以下に3つの縦長のウェビナー集客バナーを作成しました。これらのバナーはレスポンシブデザインで、ウェブサイトやSNSでの宣伝に最適です。
情報の明確な表示:
実際のウェビナー情報に合わせて、app/page.tsx の webinars 配列を編集することで、バナーの内容を簡単に変更できます。
title: ウェビナーのタイトルdate: 開催日time: 開催時間speaker: 講演者名position: 講演者の肩書きbenefits: 参加メリット（箇条書き）color: バナーの色（"emerald", "violet", "amber"から選択）縦に並べて欲しいです。またFisrt Viewで全てが収まるようにして
縦に並べて、First Viewで全てが収まるようにバナーを調整しました。
縦並びレイアウト:
flex flex-col を使用して縦方向に配置していますFirst Viewに収まるデザイン:
min-h-screen と justify-center を使用して画面の中央に配置コンパクト化:
情報の整理:
これにより、3つのバナーが画面の縦方向に並び、スクロールなしで全てのバナーが見えるようになりました。レスポンシブデザインも維持されているので、様々な画面サイズで適切に表示されます。