#414 - page that explains what's verified and how to get verified.

resources/views/components/footer.blade.php

@@ -32,6 +32,13 @@ class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slat
                     >Support</a
                 >
             </div>
+            <div class="pb-6">
+                <a
+                    href="{{ route('verified') }}"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
+                >Verified</a
+                >
+            </div>
             <div class="pb-6">
                 <a
                     href="{{ route('brand.resources') }}"

resources/views/profile/partials/verified-form.blade.php

@@ -1,15 +1,15 @@
 <section>
     <header>
         <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
-            <div class="items flex items-center space-x-3">
+            <a href="{{ route('verified') }}" class="items flex items-center space-x-3">
                 <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
                     {{ $user->is_verified ? __('Manage Verified Badge') : __('Get Verified') }}
                 </h2>
                 <x-icons.verified
                     :color="$user->is_verified ? $user->right_color : 'gray'"
                     class="size-6"
                 />
-            </div>
+            </a>
         </h2>
 
         <div class="mt-2 text-sm text-slate-500">

resources/views/verified.blade.php

@@ -0,0 +1,228 @@
+<x-about-layout>
+    <div class="relative flex justify-center">
+        <div
+            class="absolute -top-48 -z-10 size-[400px] -rotate-45 rounded-full bg-gradient-to-br from-indigo-300 via-rose-200 to-green-600 opacity-70 blur-3xl lg:size-[500px]"></div>
+    </div>
+
+    <nav
+        class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b dark:border-slate-200/10 border-slate-900/10 dark:bg-slate-950/20 bg-slate-100/20 p-4 shadow-2xl backdrop-blur-md">
+        <a
+            href="{{ route('home.feed') }}"
+            wire:navigate
+        >
+            <x-primary-colorless-button
+                class="flex items-center justify-center gap-2 dark:border-white border-slate-900">
+                <x-heroicon-o-home class="h-4 w-4"/>
+                <span class="sr-only sm:not-sr-only">Feed</span>
+            </x-primary-colorless-button>
+        </a>
+        @auth
+            <a
+                href="{{ route('profile.show', ['username' => auth()->user()->username]) }}"
+                wire:navigate
+            >
+                <x-primary-button>Your Profile</x-primary-button>
+            </a>
+        @else
+            <a
+                href="{{ route('login') }}"
+                wire:navigate
+            >
+                <x-primary-button>Log In</x-primary-button>
+            </a>
+            <a
+                href="{{ route('register') }}"
+                wire:navigate
+            >
+                <x-primary-button>Register</x-primary-button>
+            </a>
+        @endauth
+    </nav>
+
+    <main class="my-8 flex w-full flex-1 flex-col items-center justify-center gap-8 overflow-x-hidden p-4 pb-12">
+        <section class="mt-24 flex flex-col items-center w-full">
+            <div class="relative">
+                <a
+                    href="{{ route('about') }}"
+                    wire:navigate
+                >
+                    <x-pinkary-logo class="z-10 w-72"/>
+                    <x-icons.verified
+                        :color="'blue-500'"
+                        class="ml-1 mt-0.5 h-10 w-10 absolute -top-4 -right-4"
+                    />
+                </a>
+            </div>
+
+
+            <div
+                class="mt-5 rounded-full bg-pink-500 bg-opacity-90 px-3 py-1.5 font-mona text-sm font-medium uppercase text-slate-900"
+                style="font-stretch: 120%"
+            >
+                Become a trusted user
+            </div>
+        </section>
+
+        @if(auth()->user())
+            <section class="mt-28 w-full max-w-2xl">
+                <div class="max-w-xl">
+                    @include('profile.partials.verified-form', ['user' => auth()->user()])
+                </div>
+            </section>
+        @endif
+
+        <section class="mt-10 w-full max-w-2xl">
+            <div class="grid w-full gap-4 md:grid-cols-2">
+                <div
+                    class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 transition-colors md:aspect-video">
+                    <div
+                        class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
+                        <x-heroicon-o-wrench-screwdriver class="h-5 w-5"/>
+                    </div>
+
+                    <h3>Support the Project</h3>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">By becoming verified, you directly support the
+                        creator and help maintain and improve Pinkary.</p>
+                </div>
+
+                <div
+                    class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div
+                        class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
+                        <x-heroicon-o-user-group class="h-5 w-5"/>
+                    </div>
+
+                    <h3>Community Recognition</h3>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">A verification badge highlights your
+                        commitment and support within the Pinkary community.</p>
+                </div>
+
+                <div
+                    class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div
+                        class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
+                        <x-heroicon-o-heart class="h-5 w-5"/>
+                    </div>
+
+                    <h3>Help Pinkary Grow</h3>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Your verification contributes to Pinkary’s
+                        development and future improvements.</p>
+                </div>
+
+                <div
+                    class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div
+                        class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
+                        <x-heroicon-o-fire class="h-5 w-5"/>
+                    </div>
+
+                    <h3>Encourage Open-Source Contributions</h3>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm"> Supporting the creator promotes open-source
+                        values and collaboration in projects like Pinkary.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="mt-10 w-full max-w-2xl">
+            <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">Frequently Asked Questions</h2>
+
+            <!-- 1 -->
+            <div x-data="accordion(1)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
+                <div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
+                    <div class="flex items-center justify-between">
+                        <span class="tracking-wide">What does verification mean on Pinkary?</span>
+                        <span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
+                <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                </svg>
+                </span>
+                    </div>
+                </div>
+
+                <div x-ref="tab" :style="handleToggle()"
+                     class="relative overflow-hidden transition-all duration-700 max-h-0">
+                    <div class="px-6 pb-4 text-gray-600">
+                        Verification on Pinkary gives you a badge next to your name, symbolizing your support for the platform’s development. It helps recognize your contribution as an engaged and supportive member of the community.
+                    </div>
+                </div>
+            </div>
+            <!-- End 1 -->
+
+            <!-- 2 -->
+            <div x-data="accordion(2)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
+                <div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
+                    <div class="flex items-center justify-between">
+                        <span class="tracking-wide">How do I become verified on Pinkary?</span>
+                        <span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
+                <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                </svg>
+                </span>
+                    </div>
+                </div>
+
+                <div x-ref="tab" :style="handleToggle()"
+                     class="relative overflow-hidden transition-all duration-700 max-h-0">
+                    <div class="px-6 pb-4 text-gray-600">
+                        To get verified, connect your GitHub account to Pinkary, and sponsor the creator with at least $9/month via GitHub Sponsors. Once sponsored, the verification badge will appear automatically on your profile.
+                    </div>
+                </div>
+            </div>
+            <!-- End 2 -->
+
+            <!-- 3 -->
+            <div x-data="accordion(3)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
+                <div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
+                    <div class="flex items-center justify-between">
+                        <span class="tracking-wide">Why should I get verified?</span>
+                        <span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
+                <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                </svg>
+                </span>
+                    </div>
+                </div>
+
+                <div x-ref="tab" :style="handleToggle()"
+                     class="relative overflow-hidden transition-all duration-700 max-h-0">
+                    <div class="px-6 pb-4 text-gray-600">
+                        By getting verified, you support the ongoing development of Pinkary, help improve the platform, and promote open-source contributions. The verification badge also highlights your commitment to the community.
+                    </div>
+                </div>
+            </div>
+            <!-- End 3 -->
+        </section>
+
+
+    </main>
+
+    <script>
+        // Faq
+        document.addEventListener("alpine:init", () => {
+            Alpine.store("accordion", {
+                tab: 0
+            });
+
+            Alpine.data("accordion", (idx) => ({
+                init() {
+                    this.idx = idx;
+                },
+                idx: -1,
+                handleClick() {
+                    this.$store.accordion.tab =
+                        this.$store.accordion.tab === this.idx ? 0 : this.idx;
+                },
+                handleRotate() {
+                    return this.$store.accordion.tab === this.idx ? "-rotate-180" : "";
+                },
+                handleToggle() {
+                    return this.$store.accordion.tab === this.idx
+                        ? `max-height: ${this.$refs.tab.scrollHeight}px`
+                        : "";
+                }
+            }));
+        });
+        //  end faq
+
+    </script>
+</x-about-layout>

routes/web.php

@@ -31,6 +31,8 @@
 Route::view('/support', 'support')->name('support');
 Route::view('/brand/resources', 'brand.resources')->name('brand.resources');
 
+Route::view('/verified', 'verified')->name('verified');
+
 Route::redirect('/sponsors', 'https://github.com/sponsors/nunomaduro/')->name('sponsors');
 
 Route::get('/changelog', [ChangelogController::class, 'show'])->name('changelog');

tests/Http/Verified/IndexTest.php

@@ -0,0 +1,98 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Models\User;
+use Illuminate\Support\Facades\Process;
+
+it('guest', function () {
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Pinkary')
+        ->assertSee('Become a trusted user');
+});
+
+it('auth', function () {
+    $user = User::factory()->create();
+
+    $response = $this->actingAs($user)->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Pinkary')
+        ->assertSee('Become a trusted user');
+});
+
+it('displays login button', function () {
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Log In')
+        ->assertDontSee('Your Profile');
+});
+
+it('displays "Your Profile" when logged in', function () {
+    $user = User::factory()->create();
+
+    $this->actingAs($user);
+
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Your Profile')
+        ->assertDontSee('Log In');
+});
+
+it('displays "Get Verified" when logged in and not verified', function () {
+    $user = User::factory()->create();
+
+    $this->actingAs($user);
+
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Get Verified');
+});
+
+it('displays "Manage Verified Badge" when logged in and is verified', function () {
+    $user = User::factory()->create([
+        'is_verified' => true,
+    ]);
+
+    $this->actingAs($user);
+
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Manage Verified Badge');
+});
+
+it('displays terms of service and privacy policy', function () {
+    $response = $this->get('/verified');
+
+    $response
+        ->assertOk()
+        ->assertSee('Terms')
+        ->assertSee('Privacy Policy')
+        ->assertSee('Support')
+        ->assertSee('Verified')
+        ->assertSee('Brand');
+});
+
+it('displays the current version of the app', function () {
+    Process::fake([
+        '*' => Process::result(
+            output: "v1.0.0\n",
+        ),
+    ]);
+
+    $this->get('/verified')
+        ->assertOk()
+        ->assertSee('v1.0.0');
+});