feat: updated homepage to modern looks

Author: syntaxlexx

README.md

@@ -1,7 +1,7 @@
 ![Laravelte Logo](public/img/laravelte-logo-full.png "text")
 
 <p align="center">
-<a href="https://github.com/lexxyungcarter/laravelte/actions"><img src="https://github.com/lexxyungcarter/laravelte/workflows/tests/badge.svg" alt="Build Status"></a>
+![workflow](https://github.com/SyntaxLexx/laravelte/actions/workflows/deploy-ci.yml/badge.svg)
 </p>
 
 ![Screenshot 1](public/img/laravelte-screenshot-1.jpg)

app/Http/Middleware/HandleInertiaRequests.php

@@ -49,6 +49,7 @@ public function share(Request $request): array
             },
             'siteLogo' => config('app.logo'),
             'siteName' => config('app.name'),
+            'systemVersion' => config('system.version'),
             'locale' => Session::get('locale') ?? App::getLocale(),
         ]);
 

config/system.php

@@ -2,7 +2,7 @@
 
 use App\Models\User;
 
-$appVersion = '1.0.0';
+$appVersion = '0.0.2';
 
 return [
     // App Version

public/img/gumroad-button.jpg

@@ -167,3 +167,11 @@ table .actions {
 .dark ::-webkit-scrollbar-thumb {
     background: #6e4695;
 }
+
+.seva-fields.formkit-fields .formkit-field {
+    flex:2 !important;
+    margin-right:20px !important;
+}
+.seva-fields.formkit-fields .formkit-submit {
+    flex: 1 !important;
+}

public/img/laravelte-dashboard.jpg

@@ -164,7 +164,7 @@
         <div class="mt-12 border-t border-warm-gray-700 pt-8">
             <p class="text-base text-warm-gray-400 xl:text-center">
                 &copy; {new Date().getFullYear()}
-                {$page.props.siteName}. All rights reserved. Backed up by
+                {$page.props.siteName}. All rights reserved. Backed by
                 <a href="https://acelords.com" target="_blank">AceLords</a>
             </p>
         </div>

public/img/laravelte-screenshot-1.jpg

@@ -1,6 +1,7 @@
 <script>
     import { page } from '@inertiajs/svelte'
     import { FancyButton, Icon } from '.'
+    import SubscribeForm from './SubscribeForm.svelte'
 </script>
 
 <div class="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
@@ -18,7 +19,7 @@
                             What's new
                         </span>
                         <span class="inline-flex items-center text-sm font-medium text-primary-500 space-x-1">
-                            <span>Just shipped version 0.1.0</span>
+                            <span>Just shipped version {$page.props.systemVersion}</span>
                             <!-- Heroicon name: solid/chevron-right -->
                             <svg
                                 class="h-5 w-5"
@@ -38,109 +39,45 @@
                 </div>
                 <div class="mt-6 sm:max-w-xl">
                     <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
-                        Issue management for growing teams
+                        Laravel Webpp for Quality Applications
                     </h1>
                     <p class="mt-6 text-xl text-gray-500">
-                        Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
+                        We decided to open-source parts of our cash-cow projects, to showcase one way of how a sample
+                        small-to-medium sized project is built.
                     </p>
                 </div>
-                <form action="#" class="mt-12 sm:max-w-lg sm:w-full sm:flex">
-                    <div class="min-w-0 flex-1">
-                        <label for="hero-email" class="sr-only">Email address</label>
-                        <input
-                            id="hero-email"
-                            type="email"
-                            class="block w-full border border-primary-300 rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-tertiary-500 focus:ring-tertiary-500"
-                            placeholder="Enter your email"
-                        />
-                    </div>
-                    <div class="mt-4 sm:mt-0 sm:ml-3">
-                        <button
-                            type="submit"
-                            class="block w-full rounded-md border border-transparent px-5 py-3 bg-tertiary-600 text-base font-medium text-white shadow hover:bg-tertiary-600 focus:outline-none focus:ring-2 focus:ring-tertiary-500 focus:ring-offset-2 sm:px-10"
-                            >Notify me</button
-                        >
-                    </div>
-                </form>
+                <div class="mt-5">
+                    <p class="text-xs mb-3">Subsribe to get the latest updates</p>
+                    <SubscribeForm />
+                </div>
                 <div class="mt-6">
                     <div class="inline-flex items-center divide-x divide-primary-300">
                         <div class="flex-shrink-0 flex pr-5">
-                            <!-- Heroicon name: solid/star -->
-                            <svg
-                                class="h-5 w-5 text-yellow-400"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                                />
-                            </svg>
-                            <!-- Heroicon name: solid/star -->
-                            <svg
-                                class="h-5 w-5 text-yellow-400"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                                />
-                            </svg>
-                            <!-- Heroicon name: solid/star -->
-                            <svg
-                                class="h-5 w-5 text-yellow-400"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                                />
-                            </svg>
-                            <!-- Heroicon name: solid/star -->
-                            <svg
-                                class="h-5 w-5 text-yellow-400"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                                />
-                            </svg>
-                            <!-- Heroicon name: solid/star -->
-                            <svg
-                                class="h-5 w-5 text-yellow-400"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                                />
-                            </svg>
+                            {#each Array(5).fill(5) as i}
+                                <Icon name="star" classes="text-yellow-400" />
+                            {/each}
                         </div>
                         <div class="min-w-0 flex-1 pl-5 py-1 text-sm text-gray-500 sm:py-3">
                             <span class="font-medium text-gray-900">Rated 5 stars</span> by over
-                            <span class="font-medium text-tertiary-500">500 beta users</span>
+                            <span class="font-medium text-tertiary-500">20 beta users</span>
                         </div>
                     </div>
                 </div>
                 <br />
-                <div class="lg:float-right lg:pr-10">
+                <div class="w-full flex lg:justify-end lg:pr-10">
                     <a href="https://github.com/SyntaxLexx/laravelte" class="no-underline" target="_blank">
                         <FancyButton size="lg">
                             View on Github
                             <Icon name="link-external" />
                         </FancyButton>
                     </a>
                 </div>
+                <p class="mt-12 text-xl text-gray-500">
+                    This version is currently running on <span class="font-bold"
+                        >Laravel v{$page.props.laravelVersion}</span
+                    >
+                    paired with <span class="font-bold">PHP v{$page.props.phpVersion}</span>
+                </p>
             </div>
         </div>
     </div>
@@ -149,7 +86,7 @@
         <div class="py-12 sm:relative sm:mt-12 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
             <div class="hidden sm:block">
                 <div
-                    class="absolute inset-y-0 left-1/2 w-screen bg-gray-50 rounded-l-3xl lg:left-80 lg:right-0 lg:w-full"
+                    class="absolute inset-y-0 left-1/2 w-screen bg-primary-100 dark:bg-primary-800 rounded-l-3xl lg:left-80 lg:right-0 lg:w-full"
                 />
                 <svg
                     class="absolute top-8 right-1/2 -mr-3 lg:m-0 lg:left-0"
@@ -167,7 +104,14 @@
                             height="20"
                             patternUnits="userSpaceOnUse"
                         >
-                            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
+                            <rect
+                                x="0"
+                                y="0"
+                                width="4"
+                                height="4"
+                                class="text-primary-400 dark:text-primary-500"
+                                fill="currentColor"
+                            />
                         </pattern>
                     </defs>
                     <rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
@@ -176,8 +120,8 @@
             <div class="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full lg:pl-12">
                 <img
                     class="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none"
-                    src="https://tailwindui.com/img/component-images/task-app-rose.jpg"
-                    alt="img"
+                    src="/img/laravelte-dashboard.jpg"
+                    alt="dashboard"
                 />
             </div>
         </div>

public/img/laravelte-screenshot-2.jpg

@@ -16,6 +16,10 @@
                 return 'bx bx-error-circle'
             case 'check':
                 return 'bx bx-check'
+            case 'star':
+                return 'bx bxs-star'
+            case 'star-empty':
+                return 'bx bx-star'
         }
 
         return `bx bx-${name}`

public/img/laravelte-screenshot-3.jpg

@@ -0,0 +1,123 @@
+<script lang="ts">
+    import type { Testimonial } from '@/types'
+    import { inertia, page } from '@inertiajs/svelte'
+
+    const testimonials: Testimonial[] = [
+        {
+            id: 1,
+            names: 'Bee',
+            content:
+                "Our developers were able to go from 0-90% within a week by using their products. Couldn't be happier!",
+            position: 'Entrepreneur',
+            company: 'Good Reads',
+            is_approved: true,
+            created_at: new Date(),
+        },
+        {
+            id: 2,
+            names: 'David',
+            content:
+                'I cannot stess enough how quickly I am able to spin up projects for my clients by using Laravel coupled with a TS-backed svelte! Trully a life-saver!',
+            position: 'Software Developer',
+            company: 'Freelance',
+            is_approved: true,
+            created_at: new Date(),
+        },
+        {
+            id: 3,
+            names: 'Marverik',
+            content: 'I am always looking forward to what next AceLords will release. ',
+            position: 'Product Manager',
+            company: 'Salomon Tech Tips',
+            is_approved: true,
+            created_at: new Date(),
+        },
+    ]
+</script>
+
+<div class="bg-primary-50 dark:bg-primary-900 relative overflow-hidden">
+    <!-- Decorative background image and gradient -->
+    <div aria-hidden="true" class="absolute inset-0">
+        <div class="absolute inset-0 max-w-7xl mx-auto overflow-hidden xl:px-8">
+            <img
+                src="https://tailwindui.com/img/ecommerce-images/home-page-02-sale-full-width.jpg"
+                alt=""
+                class="w-full h-full object-center object-cover"
+            />
+        </div>
+        <div class="absolute inset-0 bg-primary-50 dark:bg-primary-900 bg-opacity-75 dark:bg-opacity-75" />
+        <div
+            class="absolute inset-0 bg-gradient-to-t from-primary-50 via-primary-50 dark:from-primary-800 dark:via-primary-900"
+        />
+    </div>
+
+    <!-- Callout -->
+    <section
+        aria-labelledby="sale-heading"
+        class="relative max-w-7xl mx-auto pt-32 px-4 flex flex-col items-center text-center sm:px-6 lg:px-8"
+    >
+        <div class="max-w-2xl mx-auto lg:max-w-none">
+            <h2 id="sale-heading" class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
+                Get Lifetime Access to our <br />Premium Version
+            </h2>
+            <p class="mt-4 max-w-xl mx-auto text-xl text-gray-600 dark:text-primary-100">
+                Get access to our premium version of {$page.props.siteName}:
+            </p>
+            <ul class="text-gray-600 dark:text-primary-200 mt-2">
+                <li>Improved SEO management</li>
+                <li>Horizon, logs, multi-site domain support</li>
+                <li>Forgot password, reset password, 2-FA auth with Google|Github|Facebook</li>
+                <li>Admin - Manage users</li>
+                <li>Admin - Manage and update .env files straight from the dashboard</li>
+                <li>Admin - Manage messages</li>
+                <li>Admin - Manage notifications</li>
+                <li>Admin - Manage more advances settings</li>
+                <li>Users - Manage messages</li>
+                <li>Users - Manage notifications</li>
+            </ul>
+            <a href="#" use:inertia class="mt-6 inline-block w-full sm:w-auto">
+                <img src="/img/gumroad-button.jpg" alt="purchase on gumroad" />
+            </a>
+        </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section
+        aria-labelledby="testimonial-heading"
+        class="relative max-w-7xl mx-auto pt-24 px-4 sm:px-6 lg:pt-32 lg:px-8 pb-12"
+    >
+        <div class="max-w-2xl mx-auto lg:max-w-none">
+            <h2 id="testimonial-heading" class="text-2xl font-extrabold tracking-tight text-gray-900">
+                What are people saying?
+            </h2>
+
+            <div class="mt-16 space-y-16 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
+                {#each testimonials as item}
+                    <blockquote class="sm:flex lg:block">
+                        <svg
+                            width="24"
+                            height="18"
+                            viewBox="0 0 24 18"
+                            xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true"
+                            class="flex-shrink-0 text-gray-300 dark:text-primary-600"
+                        >
+                            <path
+                                d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                        <div class="mt-8 sm:mt-0 sm:ml-6 lg:mt-10 lg:ml-0">
+                            <p class="text-lg text-gray-600 dark:text-primary-300">
+                                {item.content}
+                            </p>
+                            <cite class="mt-4 block font-semibold not-italic text-gray-900 dark:text-primary-200">
+                                {item.names}, {item.country ?? ''}
+                            </cite>
+                        </div>
+                    </blockquote>
+                {/each}
+            </div>
+        </div>
+    </section>
+</div>

resources/css/app.css

@@ -0,0 +1,13 @@
+<script>
+    import { onMount } from 'svelte'
+
+    let ready = false
+
+    onMount(() => {
+        ready = true
+    })
+</script>
+
+{#if ready}
+    <script async data-uid="a6ac2b78a7" src="https://cheerful-trailblazer-4399.ck.page/a6ac2b78a7/index.js"></script>
+{/if}

resources/ts/Components/Footer.svelte

@@ -152,7 +152,7 @@
                             </li>
                         {:else}
                             <li>
-                                <a href="/login" class="nav-item">Login</a>
+                                <a href="/login" use:inertia class="nav-item">Login</a>
                             </li>
                         {/if}
                     </ul>