feat: added about us and contact page transitions. #prod

Author: syntaxlexx

resources/ts/Layouts/AppLayout.svelte

@@ -41,16 +41,19 @@
                             </a>
                         {/if}
 
+                        <a class="btn btn-sm variant-ghost-surface" href={route('about')} use:inertia> About </a>
+                        <a class="btn btn-sm variant-ghost-surface" href={route('contact')} use:inertia> Contact </a>
+
                         <a
-                            class="btn btn-sm variant-ghost-surface"
+                            class="btn btn-sm variant-ringed-surface"
                             href="https://twitter.com/acelords"
                             target="_blank"
                             rel="noreferrer"
                         >
                             Twitter
                         </a>
                         <a
-                            class="btn btn-sm variant-ghost-surface"
+                            class="btn btn-sm variant-ringed-surface"
                             href="https://github.com/lexxyungcarter/laravelte"
                             target="_blank"
                             rel="noreferrer"

resources/ts/Pages/About.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-    import {inertia} from '@inertiajs/svelte'
-</script>
+    import Title from '@/Components/Title.svelte'
+    import { inertia } from '@inertiajs/svelte'
+    import { fly } from 'svelte/transition'
+    import { quintOut } from 'svelte/easing'
+    import { onMount } from 'svelte'
 
-<h2>About us</h2>
+    let ready = false
+    onMount(() => (ready = true))
+</script>
 
-<a href="/" use:inertia>GoHome</a>
-<a href={route('contact')} use:inertia>Contact</a>
+<div class="container mt-5" in:fly={{ y: -70, duration: 300, easing: quintOut }}>
+    <Title>About Us Page</Title>
+    <a href="/" use:inertia>Go Home</a>
+    <br />
+    <a href={route('contact')} use:inertia>Contact</a>
+</div>

resources/ts/Pages/Contact.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-    import {inertia} from '@inertiajs/svelte'
-</script>
+    import Title from '@/Components/Title.svelte'
+    import { inertia } from '@inertiajs/svelte'
+    import { fly } from 'svelte/transition'
+    import { quintOut } from 'svelte/easing'
+    import { onMount } from 'svelte'
 
-<h2>Contact us</h2>
+    let ready = false
+    onMount(() => (ready = true))
+</script>
 
-<a href="/" use:inertia>Go Home</a>
-<a href={route('about')} use:inertia>About</a>
+<div class="container mt-5" in:fly={{ y: -70, duration: 300, easing: quintOut }}>
+    <Title>Contact Us Page</Title>
+    <a href="/" use:inertia>Go Home</a>
+    <br />
+    <a href={route('about')} use:inertia>About</a>
+</div>

tests/Feature/FrontendPagesTest.php

@@ -16,3 +16,19 @@
         ->component('Home')
     );
 })->group('browser');
+
+test('about screen can be rendered', function () {
+    $response = $this->get(route('about'));
+
+    $response->assertInertia(fn (Assert $page) => $page
+        ->component('About')
+    );
+})->group('browser');
+
+test('contact screen can be rendered', function () {
+    $response = $this->get(route('contact'));
+
+    $response->assertInertia(fn (Assert $page) => $page
+        ->component('Contact')
+    );
+})->group('browser');