この記事でできること
・トップ画面（ログイン前）と、ログイン・新規登録画面（auth全般）で異なるフッターを出し分ける方法。
・Bladeコンポーネントを用途別に作り分けるシンプルな実装手順。
↓
トップ画面
auth画面
手順(トップ画面の場合)
① コンポーネントファイルを作成
php artisan make:component FooterTop
作成されるファイル：
・app/View/Components/FooterTop.php
・resources/views/components/footer-top.blade.php
② footer-top.blade.php にHTMLを書く
/views/components/footer-top.blade.php
<footer class="shadow bg-gray-200 py-4 text-center text-sm text-gray-500 w-full">
©
<span class="ml-1">{{ date('Y') }}</span>
<span class="ml-1">{{ config('app.name') }}</span>
<span class="ml-1">All rights reserved</span>
</footer>
③ フッターを呼び出すレイアウトに x-footer-top を追加
・ x-footer-top を追記
・ body、main の class も適宜修正
/views/welcome.blade.php
<body class="min-h-screen flex flex-col font-sans antialiased items-center justify-center bg-gray-100">
<main class="flex-grow flex flex-col items-center justify-center text-center">
<!-- コンテンツをここに -->
</main>
<x-footer-top />
</body>
ゴール
手順(auth画面の場合)
① コンポーネントファイルを作成
php artisan make:component FooterAuth
作成されるファイル：
・app/View/Components/FooterAuth.php
・resources/views/components/footer-auth.blade.php
② footer-auth.blade.php にHTMLを書く
/views/components/footer-auth.blade.php
<footer class="shadow bg-gray-200 py-4 text-center text-sm text-gray-500 w-full">
©
<span class="ml-1">{{ date('Y') }}</span>
<span class="ml-1">{{ config('app.name') }}</span>
<span class="ml-1">All rights reserved</span>
</footer>
③ フッターを呼び出すレイアウトに x-footer-auth を追加
以下コードに全体を修正
/views/layouts/guest.blade.php
<body class="font-sans text-gray-900 antialiased min-h-screen flex flex-col bg-gray-100">
<div class="flex-grow flex flex-col justify-center">
<div class="flex justify-center">
<a href="/">
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />
</a>
</div>
<div class="w-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl mx-auto mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{{ $slot }}
</div>
</div>
<x-footer-auth />
</body>
ゴール
関連：footer を共通化して作成・表示する手順【Laravel9】