update support page banner

Author: jeremykenedy

README.md

@@ -204,10 +204,25 @@ LaravelSpa
 │   ├── dependabot.yml
 │   ├── labeler.yml
 │   └── workflows
+│       ├── build-changelog.yml
+│       ├── codacy.yml
+│       ├── codeql.yml
+│       ├── dependency-review.yml
+│       ├── deploy.yml
+│       ├── gitguardian.yml
+│       ├── greetings.yml
+│       ├── labeler.yml
+│       ├── laravel.yml
+│       ├── node.js.yml
+│       ├── php.yml
+│       ├── sentry.yml
+│       └── stale.yml
 ├── .gitignore
 ├── .prettierignore
+├── .prettierrc.json
 ├── .scripts
 │   └── deploy.sh
+├── .styleci.yml
 ├── LICENSE
 ├── README.md
 ├── SECURITY.md
@@ -358,10 +373,11 @@ LaravelSpa
 ├── artisan
 ├── bootstrap
 │   ├── app.php
-│   └── cache
-│       ├── .gitignore
-│       ├── packages.php
-│       └── services.php
+│   ├── cache
+│   │   ├── .gitignore
+│   │   ├── packages.php
+│   │   └── services.php
+│   └── ssr
 ├── composer.json
 ├── composer.lock
 ├── config
@@ -430,6 +446,7 @@ LaravelSpa
 │       ├── PermissionsTableSeeder.php
 │       ├── RolesTableSeeder.php
 │       └── UsersTableSeeder.php
+├── eslint.config.js
 ├── lang
 │   └── en
 │       ├── auth.php
@@ -442,7 +459,6 @@ LaravelSpa
 ├── phpunit.xml
 ├── postcss.config.js
 ├── prettier.config.js
-├── prettierrc.json
 ├── public
 │   ├── .htaccess
 │   ├── android-chrome-192x192.png
@@ -524,11 +540,10 @@ LaravelSpa
 │   │   ├── components
 │   │   │   ├── LocaleSwitcher.vue
 │   │   │   ├── ToggleDarkMode.vue
-│   │   │   ├── account
 │   │   │   ├── admin
-│   │   │   │   ├── Create.vue
-│   │   │   │   ├── Edit.vue
-│   │   │   │   └── Index.vue
+│   │   │   │   ├── CreateComp.vue
+│   │   │   │   ├── EditComp.vue
+│   │   │   │   └── IndexComp.vue
 │   │   │   ├── auth
 │   │   │   │   └── SocialiteLogins.vue
 │   │   │   ├── common
@@ -541,16 +556,16 @@ LaravelSpa
 │   │   │   │   ├── CKEditorComponent.vue
 │   │   │   │   ├── CircleSvg.vue
 │   │   │   │   ├── DropZone.vue
-│   │   │   │   ├── Errors.vue
+│   │   │   │   ├── ErrorsNotice.vue
 │   │   │   │   ├── ImpersonateUser.vue
 │   │   │   │   ├── LeaveImpersonation.vue
 │   │   │   │   ├── LoadingCircle.vue
 │   │   │   │   ├── NoRecordsCTA.vue
-│   │   │   │   ├── Pagination.vue
+│   │   │   │   ├── PaginationComp.vue
 │   │   │   │   ├── PerPage.vue
 │   │   │   │   ├── SocialMediaLoginStatus.vue
 │   │   │   │   ├── SocialMediaLoginStatusItem.vue
-│   │   │   │   ├── Success.vue
+│   │   │   │   ├── SuccessNotice.vue
 │   │   │   │   ├── TextEditorComponent.vue
 │   │   │   │   ├── TinyMCEditor.vue
 │   │   │   │   └── UmoEditor.vue
@@ -569,8 +584,8 @@ LaravelSpa
 │   │   │   │   ├── AdminSidebar.vue
 │   │   │   │   ├── AdminSidebarLink.vue
 │   │   │   │   ├── AppFooter.vue
-│   │   │   │   ├── Breadcrumb.vue
-│   │   │   │   ├── Nav.vue
+│   │   │   │   ├── AppNav.vue
+│   │   │   │   ├── BreadcrumbOld.vue
 │   │   │   │   └── NavLink.vue
 │   │   │   ├── loaders
 │   │   │   │   └── AnimatedTableLoader.vue
@@ -605,10 +620,10 @@ LaravelSpa
 │   │   │   ├── pt-BR.json
 │   │   │   └── zh-CN.json
 │   │   ├── layouts
-│   │   │   ├── Admin.vue
-│   │   │   ├── Authenticated.vue
-│   │   │   ├── Error.vue
-│   │   │   └── Guest.vue
+│   │   │   ├── AdminLayout.vue
+│   │   │   ├── AuthenticatedLayout.vue
+│   │   │   ├── ErrorLayout.vue
+│   │   │   └── GuestLayout.vue
 │   │   ├── plugins
 │   │   │   └── i18n.js
 │   │   ├── routes
@@ -635,61 +650,62 @@ LaravelSpa
 │   │   └── views
 │   │       ├── admin
 │   │       │   ├── ActivityLog.vue
-│   │       │   ├── Admin.vue
+│   │       │   ├── AdminPage.vue
 │   │       │   ├── AppSettings.vue
 │   │       │   ├── BrowserSessions.vue
-│   │       │   ├── Dashboard.vue
-│   │       │   ├── Permissions.vue
+│   │       │   ├── DashboardPage.vue
+│   │       │   ├── PermissionsPage.vue
 │   │       │   ├── PhpInfo.vue
-│   │       │   ├── Roles.vue
-│   │       │   ├── Users.vue
+│   │       │   ├── RolesPage.vue
+│   │       │   ├── UsersPage.vue
 │   │       │   ├── categories
-│   │       │   │   ├── Create.vue
-│   │       │   │   ├── Edit.vue
-│   │       │   │   └── Index.vue
+│   │       │   │   ├── CategoryIndex.vue
+│   │       │   │   ├── CreateCategory.vue
+│   │       │   │   └── EditCategory.vue
 │   │       │   └── posts
-│   │       │       ├── Create.vue
-│   │       │       ├── Edit.vue
-│   │       │       └── Index.vue
+│   │       │       ├── AdminCreatePost.vue
+│   │       │       ├── AdminEditPost.vue
+│   │       │       └── AdminPostsIndex.vue
 │   │       ├── auth
 │   │       │   ├── Verify.vue
 │   │       │   └── passwords
-│   │       │       ├── Confirm.vue
+│   │       │       ├── ConfirmPage.vue
 │   │       │       ├── RequestReset.vue
-│   │       │       └── Reset.vue
+│   │       │       └── ResetPage.vue
 │   │       ├── category
-│   │       │   └── posts.vue
+│   │       │   └── CatPostsPage.vue
 │   │       ├── errors
-│   │       │   └── 404.vue
+│   │       │   └── NotFound.vue
 │   │       ├── home
-│   │       │   └── index.vue
+│   │       │   └── HomePage.vue
 │   │       ├── kiosk
 │   │       ├── login
-│   │       │   └── Login.vue
+│   │       │   └── LoginPage.vue
 │   │       ├── misc
-│   │       │   ├── about.vue
-│   │       │   ├── pricing.vue
-│   │       │   ├── support.vue
-│   │       │   └── terms.vue
+│   │       │   ├── AboutPage.vue
+│   │       │   ├── PricingPage.vue
+│   │       │   ├── SupportPage.vue
+│   │       │   └── TermsPage.vue
 │   │       ├── pages
 │   │       │   └── user-settings
-│   │       │       ├── Account.vue
 │   │       │       ├── AccountAuthentication.vue
 │   │       │       ├── AccountData.vue
-│   │       │       ├── Password.vue
-│   │       │       ├── Profile.vue
-│   │       │       ├── Settings.vue
+│   │       │       ├── AccountPage.vue
+│   │       │       ├── PasswordPage.vue
+│   │       │       ├── ProfilePage.vue
 │   │       │       ├── SettingsNav.vue
 │   │       │       ├── SettingsNavLink.vue
+│   │       │       ├── SettingsPage.vue
 │   │       │       └── UserDownloadData.vue
 │   │       ├── posts
-│   │       │   ├── details.vue
-│   │       │   └── index.vue
+│   │       │   ├── PublicIndex.vue
+│   │       │   └── PublicPostDetails.vue
 │   │       ├── register
-│   │       │   └── index.vue
+│   │       │   └── RegisterPage.vue
 │   │       └── templates
 │   │           ├── Bare.vue
 │   │           └── Blank.vue
+│   ├── lang
 │   ├── pwa
 │   │   ├── serviceworker.js
 │   │   └── sw.js
@@ -720,7 +736,7 @@ LaravelSpa
 ├── vite.config.js
 └── vue.config.js
 
-104 directories, 422 files
+105 directories, 437 files
 
 ```
 

resources/js/views/misc/SupportPage.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="relative isolate overflow-hidden bg-gray-200 dark:bg-gray-900 py-24 sm:py-32">
     <img
-      :src="img"
+      src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
       alt="support"
-      class="support-image absolute inset-0 -z-10 size-full object-cover object-right md:object-center"
+      class="dark-image support-image absolute inset-0 -z-10 size-full object-cover object-right md:object-center"
     />
+
+    <img
+      src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=lighten&bri=69&gam=12"
+      alt="support"
+      class="light-image support-image absolute inset-0 -z-10 size-full object-cover object-right md:object-center"
+    />
+
     <div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
       <div
         class="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
@@ -101,30 +108,16 @@ import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/vue/20/solid'
 const theme = ref(localStorage.getItem('data-theme'));
 const img = ref();
 
-watch(theme, () => {
-  setImg(theme.value);
-});
-
 onMounted(() => {
   theme.value = localStorage.getItem('data-theme');
-  setImg(theme.value);
   window.addEventListener('theme-localstorage-changed', (event) => {
     theme.value = event.detail.storage;
   });
 });
 
+// IMAGE Manipulation
 // https://docs.imgix.com/en-US/apis/rendering/overview
 
-function setImg(val) {
-  if (val == 'dark') {
-    img.value =
-      'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply';
-  } else {
-    img.value =
-      'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=lighten&bri=69&gam=12';
-  }
-}
-
 const cards = [
   {
     name: 'Sales',
@@ -143,3 +136,16 @@ const cards = [
   },
 ];
 </script>
+
+<style scoped>
+.dark-image,
+.light-image {
+  display: none;
+}
+html.dark .dark-image {
+  display: block;
+}
+html:not(.dark) .light-image {
+  display: block;
+}
+</style>