feat(design): ativa registro customizado no painel de membro

site_novo/app/Filament/Auth/Register.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Filament\Auth;
+
+use App\Enums\UserRole;
+use Filament\Auth\Pages\Register as BaseRegister;
+use Filament\Forms\Components\TextInput;
+use Filament\Schemas\Components\Component;
+use Filament\Schemas\Schema;
+use Illuminate\Support\Str;
+
+class Register extends BaseRegister
+{
+    protected static string $layout = 'filament.auth.split-layout';
+
+    public function form(Schema $schema): Schema
+    {
+        return $schema
+            ->components([
+                $this->getNameFormComponent(),
+                $this->getEmailFormComponent(),
+                $this->getCargoFormComponent(),
+                $this->getPasswordFormComponent(),
+                $this->getPasswordConfirmationFormComponent(),
+            ]);
+    }
+
+    protected function getCargoFormComponent(): Component
+    {
+        return TextInput::make('cargo')
+            ->label('Cargo')
+            ->placeholder('Ex: Desenvolvedor Back-End')
+            ->maxLength(255);
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     * @return array<string, mixed>
+     */
+    protected function mutateFormDataBeforeRegister(array $data): array
+    {
+        $data['slug'] = Str::slug($data['name']).'-'.Str::lower(Str::random(6));
+        $data['role'] = UserRole::Member;
+
+        return $data;
+    }
+}

site_novo/app/Providers/Filament/MemberPanelProvider.php

@@ -3,6 +3,7 @@
 namespace App\Providers\Filament;
 
 use App\Filament\Auth\Login;
+use App\Filament\Auth\Register;
 use App\Filament\Member\Pages\Dashboard;
 use App\Filament\Member\Pages\EditProfile;
 use Filament\Enums\UserMenuPosition;
@@ -31,6 +32,7 @@ public function panel(Panel $panel): Panel
             ->path('membro')
             ->viteTheme('resources/css/filament/membro/theme.css')
             ->login(Login::class)
+            ->registration(Register::class)
             ->colors([
                 'primary' => Color::generatePalette('#1e8edb'),
             ])

site_novo/resources/views/components/landing/⚡about.blade.php

@@ -12,7 +12,7 @@
     <div class="relative max-w-[1200px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] items-center gap-10 lg:gap-[60px]">
         <div class="relative">
             <div class="relative aspect-[1.35/1] overflow-hidden shadow-[0_10px_30px_rgba(8,45,82,.1)] rounded-[58%_42%_46%_54%/64%_52%_48%_36%]">
-                <img src="{{ asset('images/hero/praia.jpg') }}" alt="Orla de João Pessoa, Paraíba" class="w-full h-full object-cover">
+                <img src="{{ asset('images/hero/joao-pessoa.jpg') }}" alt="Orla de João Pessoa, Paraíba" class="w-full h-full object-cover">
             </div>
             <img src="{{ asset('images/hero/ondas.png') }}" alt="" class="absolute w-[120px] -right-8 -bottom-1" aria-hidden="true">
         </div>

site_novo/resources/views/components/landing/⚡community.blade.php

@@ -8,11 +8,12 @@
 };
 ?>
 
-<section id="comunidade" class="relative text-white py-[70px] lg:py-[110px] overflow-hidden">
-    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ asset('images/hero/evento.jpg') }}')"></div>
-    <div class="absolute inset-0" style="background: linear-gradient(90deg, rgba(6,31,58,.92) 0%, rgba(6,31,58,.72) 55%, rgba(6,31,58,.45) 100%);"></div>
+<section id="comunidade" class="relative text-white py-[70px] lg:py-[110px] min-h-[420px] lg:min-h-[520px] flex items-center overflow-hidden">
+    <div class="absolute inset-0 bg-cover" style="background-image: url('{{ asset('images/hero/org.jpg') }}'); background-position: center 35%;"></div>
+    <div class="absolute inset-0" style="background: linear-gradient(90deg, rgba(6,31,58,.96) 0%, rgba(6,31,58,.82) 45%, rgba(6,31,58,.55) 75%, rgba(6,31,58,.4) 100%);"></div>
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(6,31,58,.5) 0%, transparent 25%, transparent 75%, rgba(6,31,58,.6) 100%);"></div>
 
-    <div class="relative z-[2] max-w-[1200px] mx-auto px-6">
+    <div class="relative z-[2] w-full max-w-[1200px] mx-auto px-6">
         <h2 class="font-display font-bold text-[clamp(32px,4.2vw,52px)] tracking-[-0.02em] text-white">
             Uma comunidade<br>feita por pessoas,<br><span class="text-azul-claro">para pessoas.</span>
         </h2>

site_novo/resources/views/components/landing/⚡cta-final.blade.php

@@ -7,26 +7,27 @@
 };
 ?>
 
-<section class="relative -mt-px pt-[90px] pb-[60px] overflow-hidden text-white"
+<section class="relative -mt-px pt-10 pb-16 lg:pt-12 lg:pb-20 overflow-hidden text-white"
          style="background: linear-gradient(180deg, #3aa7ec 0%, #1e8edb 100%);">
-    <svg class="absolute left-0 -top-px w-full h-[60px]" viewBox="0 0 1440 80" preserveAspectRatio="none" aria-hidden="true">
-        <path d="M0 80 L0 30 C200 -10 380 60 620 30 C860 0 1060 60 1260 30 C1340 18 1400 24 1440 34 L1440 80Z" fill="#EBF4FC"/>
+    <svg class="absolute left-0 -top-px w-full h-10 lg:h-14" viewBox="0 0 1440 80" preserveAspectRatio="none" aria-hidden="true">
+        <path d="M0 70 C180 10 300 110 520 70 C740 30 880 110 1100 70 C1260 40 1360 60 1440 80 L1440 0 L0 0Z" fill="#F9F6EE"/>
+        <path d="M0 80 C200 40 340 120 560 90 C780 60 920 120 1140 90 C1280 70 1380 85 1440 100 L1440 0 L0 0Z" fill="#EBF4FC"/>
     </svg>
 
-    <div class="relative max-w-[1200px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] items-end gap-7.5">
+    <div class="relative max-w-[1200px] mx-auto px-6 pt-10 lg:pt-14 grid grid-cols-1 lg:grid-cols-2 items-center gap-10">
         <div>
-            <h2 class="font-display font-bold text-[clamp(24px,2.8vw,34px)] text-white mb-6">
-                Vamos construir o futuro do PHP<br>na Paraíba juntos?
+            <h2 class="font-display font-bold text-[clamp(26px,3vw,36px)] leading-tight text-white mb-7">
+                Vamos construir o futuro do PHP na Paraíba juntos?
             </h2>
             <a href="https://chat.whatsapp.com/JaWCta8t2DF9Af0zgIb8LB?mode=gi_t" target="_blank" rel="noopener"
-               class="inline-flex items-center gap-2.5 px-[18px] py-[11px] rounded-full bg-azul-principal border-[1.5px] border-white/50 hover:bg-[#1779bb] text-white font-semibold text-[13px] transition-all hover:-translate-y-0.5">
+               class="inline-flex items-center gap-2.5 px-[18px] py-[11px] rounded-full border-[1.5px] border-white/60 hover:bg-white/10 text-white font-semibold text-[13px] transition-all hover:-translate-y-0.5">
                 Seja da comunidade
                 <x-phosphor-arrow-right class="w-4 h-4" />
             </a>
         </div>
 
-        <div class="hidden lg:flex justify-end" aria-hidden="true">
-            <img src="{{ asset('images/hero/farol-cena.png') }}" alt="" class="w-full max-w-[420px]">
+        <div class="hidden lg:flex justify-center" aria-hidden="true">
+            <img src="{{ asset('images/hero/farol-cena.png') }}" alt="" class="w-full max-w-[340px]">
         </div>
     </div>
 </section>

site_novo/resources/views/components/landing/⚡footer.blade.php

@@ -13,9 +13,9 @@
         <div>
             <a href="/" class="inline-flex items-center gap-2 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-azul-principal">
                 <img src="{{ asset('images/hero/mascote.png') }}" alt="" class="h-[46px] w-auto">
-                <span class="flex flex-col leading-[0.9] font-display">
-                    <b class="text-2xl font-extrabold text-azul-marinho tracking-[-0.5px]">PHP</b>
-                    <b class="text-2xl font-extrabold text-azul-marinho tracking-[-0.5px]">PB</b>
+                <span class="flex flex-col gap-0 font-display">
+                    <b class="text-2xl leading-none font-extrabold text-azul-marinho tracking-[-0.5px]">PHP</b>
+                    <b class="text-2xl leading-none font-extrabold text-azul-marinho tracking-[-0.5px]">PB</b>
                 </span>
             </a>
             <p class="mt-3 font-display font-semibold text-[13px] leading-[1.3] text-azul-marinho">

site_novo/resources/views/components/landing/⚡header.blade.php

@@ -21,9 +21,9 @@ class="sticky top-0 z-50 bg-areia/92 backdrop-blur-md border-b border-azul-marin
         <div class="flex items-center justify-between h-[72px]">
             <a href="/" class="inline-flex items-center gap-2 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-azul-principal">
                 <img src="{{ asset('images/hero/mascote.png') }}" alt="" class="h-[46px] w-auto">
-                <span class="flex flex-col leading-[0.9] font-display">
-                    <b class="text-2xl font-extrabold text-azul-marinho tracking-[-0.5px]">PHP</b>
-                    <b class="text-2xl font-extrabold text-azul-marinho tracking-[-0.5px]">PB</b>
+                <span class="flex flex-col gap-0 font-display">
+                    <b class="text-2xl leading-none font-extrabold text-azul-marinho tracking-[-0.5px]">PHP</b>
+                    <b class="text-2xl leading-none font-extrabold text-azul-marinho tracking-[-0.5px]">PB</b>
                 </span>
             </a>
 

site_novo/resources/views/components/landing/⚡partners.blade.php

@@ -15,34 +15,40 @@
             Fazemos parte de uma rede de comunidades PHP do <span class="text-azul-principal">Nordeste.</span>
         </h3>
 
-        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
             <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">PI</div>
+                <div class="grid place-items-center w-20 h-20 mx-auto mb-3 p-2 rounded-full bg-white shadow-[0_4px_14px_rgba(8,45,82,.08)]">
+                    <img src="{{ asset('images/communities/php-pi.png') }}" alt="PHP-PI" class="w-full h-full object-contain">
+                </div>
                 <h4 class="text-[13px] font-semibold text-preto">PHP-PI</h4>
                 <p class="text-[11.5px] text-cinza">Piauí</p>
             </div>
             <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">MA</div>
+                <div class="grid place-items-center w-20 h-20 mx-auto mb-3 p-2 rounded-full bg-white shadow-[0_4px_14px_rgba(8,45,82,.08)]">
+                    <img src="{{ asset('images/communities/php-ma.png') }}" alt="PHP Maranhão" class="w-full h-full object-contain">
+                </div>
                 <h4 class="text-[13px] font-semibold text-preto">PHP-MA</h4>
                 <p class="text-[11.5px] text-cinza">Maranhão</p>
             </div>
             <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">CE</div>
+                <div class="grid place-items-center w-20 h-20 mx-auto mb-3 p-2 rounded-full bg-white shadow-[0_4px_14px_rgba(8,45,82,.08)]">
+                    <img src="{{ asset('images/communities/php-com-rapadura.png') }}" alt="PHP com Rapadura" class="w-full h-full object-contain">
+                </div>
                 <h4 class="text-[13px] font-semibold text-preto">PHP com Rapadura</h4>
                 <p class="text-[11.5px] text-cinza">Ceará</p>
             </div>
+            {{-- ParaíbaJS oculta temporariamente: comunidade não tem logo disponível ainda --}}
             <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">JS</div>
-                <h4 class="text-[13px] font-semibold text-preto">ParaíbaJS</h4>
-                <p class="text-[11.5px] text-cinza">Paraíba</p>
-            </div>
-            <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">PE</div>
+                <div class="grid place-items-center w-20 h-20 mx-auto mb-3 p-2 rounded-full bg-white shadow-[0_4px_14px_rgba(8,45,82,.08)]">
+                    <img src="{{ asset('images/communities/php-pe.png') }}" alt="PHP-PE" class="w-full h-full object-contain">
+                </div>
                 <h4 class="text-[13px] font-semibold text-preto">PHP-PE</h4>
                 <p class="text-[11.5px] text-cinza">Pernambuco</p>
             </div>
             <div class="text-center">
-                <div class="grid place-items-center w-16 h-16 mx-auto mb-3 rounded-full bg-white text-azul-principal font-display font-bold text-lg shadow-[0_4px_14px_rgba(8,45,82,.08)]">RN</div>
+                <div class="grid place-items-center w-20 h-20 mx-auto mb-3 p-2 rounded-full bg-white shadow-[0_4px_14px_rgba(8,45,82,.08)]">
+                    <img src="{{ asset('images/communities/php-rn.png') }}" alt="PHP-RN" class="w-full h-full object-contain">
+                </div>
                 <h4 class="text-[13px] font-semibold text-preto">PHP-RN</h4>
                 <p class="text-[11.5px] text-cinza">Rio Grande do Norte</p>
             </div>

site_novo/resources/views/components/landing/⚡stats.blade.php

@@ -15,33 +15,33 @@ public function mount(): void
 
 <section class="bg-areia pt-11 pb-9">
     <div class="max-w-[1200px] mx-auto px-6 grid grid-cols-2 lg:grid-cols-4 gap-y-5 lg:gap-y-0">
-        <div class="flex items-center gap-3.5 px-0 lg:px-6">
-            <x-phosphor-timer class="w-8 h-8 text-azul-principal shrink-0" />
-            <div>
-                <strong class="block font-display text-xl font-bold text-azul-marinho">{{ $yearsActive }}+</strong>
-                <small class="block mt-0.5 text-xs text-cinza leading-tight">anos de história</small>
+        <div class="px-0 lg:px-6">
+            <div class="flex items-center gap-3.5">
+                <x-phosphor-timer class="w-8 h-8 text-azul-principal shrink-0" />
+                <strong class="font-display text-xl font-bold text-azul-marinho">{{ $yearsActive }}+</strong>
             </div>
+            <small class="block mt-0.5 ml-[46px] text-xs text-cinza leading-tight">anos de história</small>
         </div>
-        <div class="flex items-center gap-3.5 px-6 border-l border-cinza-claro">
-            <x-phosphor-users-three class="w-8 h-8 text-azul-principal shrink-0" />
-            <div>
-                <strong class="block font-display text-xl font-bold text-azul-marinho">1.000+</strong>
-                <small class="block mt-0.5 text-xs text-cinza leading-tight">membros</small>
+        <div class="px-6 border-l border-cinza-claro">
+            <div class="flex items-center gap-3.5">
+                <x-phosphor-users-three class="w-8 h-8 text-azul-principal shrink-0" />
+                <strong class="font-display text-xl font-bold text-azul-marinho">1.000+</strong>
             </div>
+            <small class="block mt-0.5 ml-[46px] text-xs text-cinza leading-tight">membros</small>
         </div>
-        <div class="flex items-center gap-3.5 px-0 lg:px-6 lg:border-l border-cinza-claro">
-            <x-phosphor-code class="w-8 h-8 text-azul-principal shrink-0" />
-            <div>
-                <strong class="block font-display text-xl font-bold text-azul-marinho">Eventos</strong>
-                <small class="block mt-0.5 text-xs text-cinza leading-tight">Meetups, workshops e PHPeste</small>
+        <div class="px-0 lg:px-6 lg:border-l border-cinza-claro">
+            <div class="flex items-center gap-3.5">
+                <x-phosphor-code class="w-8 h-8 text-azul-principal shrink-0" />
+                <strong class="font-display text-xl font-bold text-azul-marinho">Eventos</strong>
             </div>
+            <small class="block mt-0.5 ml-[46px] text-xs text-cinza leading-tight">Meetups, workshops e PHPeste</small>
         </div>
-        <div class="flex items-center gap-3.5 px-6 border-l border-cinza-claro">
-            <x-phosphor-book-open-text class="w-8 h-8 text-azul-principal shrink-0" />
-            <div>
-                <strong class="block font-display text-xl font-bold text-azul-marinho">Conteúdo</strong>
-                <small class="block mt-0.5 text-xs text-cinza leading-tight">Artigos, vídeos e materiais gratuitos.</small>
+        <div class="px-6 border-l border-cinza-claro">
+            <div class="flex items-center gap-3.5">
+                <x-phosphor-book-open-text class="w-8 h-8 text-azul-principal shrink-0" />
+                <strong class="font-display text-xl font-bold text-azul-marinho">Conteúdo</strong>
             </div>
+            <small class="block mt-0.5 ml-[46px] text-xs text-cinza leading-tight">Artigos, vídeos e materiais gratuitos.</small>
         </div>
     </div>
 </section>

site_novo/resources/views/filament/auth/split-layout.blade.php

@@ -1,5 +1,12 @@
 @php
+    use Filament\Support\Enums\Width;
+
     $renderHookScopes = $livewire?->getRenderHookScopes();
+    $maxContentWidth ??= (filament()->getSimplePageMaxContentWidth() ?? Width::Large);
+
+    if (is_string($maxContentWidth)) {
+        $maxContentWidth = Width::tryFrom($maxContentWidth) ?? $maxContentWidth;
+    }
 @endphp
 
 <x-filament-panels::layout.base :livewire="$livewire">
@@ -16,19 +23,16 @@
         <div class="fi-login-brand-panel relative hidden lg:flex lg:w-[420px] xl:w-[480px] shrink-0 flex-col justify-between overflow-hidden p-12 text-white">
             <div class="relative z-10 flex items-center gap-3">
                 <img src="{{ asset('images/hero/mascote.png') }}" alt="" class="h-10 w-auto">
-                <span class="flex flex-col leading-[0.9]" style="font-family: 'Poppins', sans-serif;">
-                    <b class="text-lg font-extrabold">PHP</b>
-                    <b class="text-lg font-extrabold">PB</b>
+                <span class="flex flex-col gap-0" style="font-family: 'Poppins', sans-serif;">
+                    <b class="text-lg leading-none font-extrabold">PHP</b>
+                    <b class="text-lg leading-none font-extrabold">PB</b>
                 </span>
             </div>
 
-            <!-- Ilustração decorativa (mesmos elementos da hero do site) -->
-            <div class="relative z-10 h-64 w-full" aria-hidden="true">
-                <img src="{{ asset('images/hero/nuvem.png') }}" alt="" class="absolute left-[2%] top-[14%] w-[34%] opacity-40">
-                <div class="absolute left-[26%] top-0 w-[44%] aspect-square rounded-full bg-[#F5B82E]"></div>
-                <img src="{{ asset('images/hero/palmeira.png') }}" alt="" class="absolute right-[6%] top-[10%] w-[26%]">
-                <img src="{{ asset('images/hero/farol.png') }}" alt="" class="absolute left-[30%] top-[4%] w-[40%]">
-                <img src="{{ asset('images/hero/mascote.png') }}" alt="" class="absolute bottom-0 left-0 w-[58%] drop-shadow-[0_12px_14px_rgba(8,45,82,.25)]">
+            <!-- Ilustração decorativa (cena do farol usada no CTA final do site) -->
+            <div class="relative z-10 w-full" aria-hidden="true">
+                <img src="{{ asset('images/hero/farol-cena.png') }}" alt="" class="w-full">
+                <img src="{{ asset('images/hero/mascote.png') }}" alt="" class="absolute left-[-8%] bottom-[-10%] w-[52%] drop-shadow-[0_12px_14px_rgba(8,45,82,.35)]">
             </div>
 
             <div class="relative z-10">
@@ -63,7 +67,7 @@
         </div>
 
         <!-- Formulário -->
-        <div class="fi-simple-main-ctn flex-1 flex flex-col">
+        <div class="fi-simple-main-ctn flex-1">
             @if (($hasTopbar ?? true) && filament()->auth()->check())
                 <div class="fi-simple-layout-header">
                     @if (filament()->hasDatabaseNotifications())
@@ -79,10 +83,13 @@
                 </div>
             @endif
 
-            <main class="flex-1 flex items-center justify-center p-6">
-                <div class="w-full fi-width-{{ ($maxContentWidth ?? \Filament\Support\Enums\Width::Large) instanceof \Filament\Support\Enums\Width ? ($maxContentWidth ?? \Filament\Support\Enums\Width::Large)->value : ($maxContentWidth ?? 'lg') }}">
-                    {{ $slot }}
-                </div>
+            <main
+                @class([
+                    'fi-simple-main',
+                    ($maxContentWidth instanceof Width) ? "fi-width-{$maxContentWidth->value}" : $maxContentWidth,
+                ])
+            >
+                {{ $slot }}
             </main>
         </div>