# Home Provider Entry Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add a dedicated service-provider entry section to the MyCode homepage and link it from the footer navigation.

**Architecture:** Keep the homepage as a composition of focused Blade partials. A new translated partial links to the existing named provider login route, while an isolated stylesheet owns its responsive presentation; no API, controller, or JavaScript changes are required.

**Tech Stack:** Laravel 13, Blade, PHP translation arrays, CSS, PHPUnit feature tests.

---

### Task 1: Specify the public homepage contract

**Files:**
- Modify: `tests/Feature/PublicPagesAvailabilityTest.php`

- [ ] **Step 1: Write the failing Spanish homepage test**

Add:

```php
public function test_homepage_invites_service_providers_to_login(): void
{
    $this->withSession(['locale' => 'es'])
        ->get('/')
        ->assertOk()
        ->assertSee('id="providers"', false)
        ->assertSee('href="'.route('provider.login', absolute: false).'"', false)
        ->assertSee('href="#providers"', false)
        ->assertSee('Ingresar como prestador')
        ->assertSee('Prestadores de servicios');
}
```

- [ ] **Step 2: Write the failing English translation test**

Add:

```php
public function test_provider_homepage_entry_is_translated_to_english(): void
{
    $this->withSession(['locale' => 'en'])
        ->get('/')
        ->assertOk()
        ->assertSee('Sign in as a service provider')
        ->assertSee('Service providers');
}
```

- [ ] **Step 3: Run the focused tests and verify RED**

Run:

```bash
php artisan test tests/Feature/PublicPagesAvailabilityTest.php
```

Expected: both new tests fail because the `providers` section and its
translated labels do not exist.

- [ ] **Step 4: Commit the failing public contract**

```bash
git add tests/Feature/PublicPagesAvailabilityTest.php
git commit -m "test: define provider homepage entry"
```

Keep version `1.2.1` for this test-only commit.

### Task 2: Render the provider section and footer link

**Files:**
- Create: `resources/views/partials/redesign/welcome/providers.blade.php`
- Create: `public/css/welcome-sections/04-providers.css`
- Modify: `resources/views/welcome.blade.php`
- Modify: `resources/views/partials/redesign/welcome/section-styles.blade.php`
- Modify: `resources/views/partials/redesign/welcome/footer.blade.php`
- Modify: `resources/lang/es/redesign_welcome.php`
- Modify: `resources/lang/en/redesign_welcome.php`

- [ ] **Step 1: Add the translated provider partial**

Create a `section` with `id="providers"` and this structure:

```blade
<section class="band providers-band" id="providers">
  <div class="wrap">
    <div class="providers-entry">
      <div class="providers-copy reveal">
        <span class="eyebrow">{{ __('redesign_welcome.provider-eyebrow') }}</span>
        <h2>{{ __('redesign_welcome.provider-title') }}</h2>
        <p>{{ __('redesign_welcome.provider-description') }}</p>
        <a href="{{ route('provider.login', absolute: false) }}" class="btn btn-primary btn-lg">
          <span class="material-symbols-rounded">storefront</span>
          {{ __('redesign_welcome.provider-cta') }}
        </a>
      </div>
      <div class="providers-preview reveal d1" aria-hidden="true">
        <div class="providers-preview-head">
          <span class="providers-preview-icon material-symbols-rounded">storefront</span>
          <div>
            <small>MyCode</small>
            <strong>{{ __('redesign_welcome.provider-card-title') }}</strong>
          </div>
          <span class="providers-preview-status material-symbols-rounded">verified_user</span>
        </div>
        <div class="providers-preview-list">
          <span><i class="material-symbols-rounded">badge</i>{{ __('redesign_welcome.provider-card-profile') }}<b class="material-symbols-rounded">check_circle</b></span>
          <span><i class="material-symbols-rounded">location_on</i>{{ __('redesign_welcome.provider-card-locations') }}<b class="material-symbols-rounded">arrow_forward</b></span>
          <span><i class="material-symbols-rounded">medical_services</i>{{ __('redesign_welcome.provider-card-services') }}<b class="material-symbols-rounded">arrow_forward</b></span>
        </div>
      </div>
    </div>
  </div>
</section>
```

- [ ] **Step 2: Place and style the section**

Include the partial immediately after `products` in `welcome.blade.php` and
include `04-providers.css` from `section-styles.blade.php`.

Create this focused stylesheet:

```css
.providers-band{padding:0;scroll-margin-top:88px}

.providers-entry{
  position:relative;display:grid;grid-template-columns:1fr .9fr;gap:64px;align-items:center;
  padding:64px;border:1px solid var(--blue-100);border-radius:var(--r-2xl);
  background:linear-gradient(145deg,var(--surface),var(--blue-50));box-shadow:var(--shadow-md);
  overflow:hidden;isolation:isolate;
}

.providers-entry::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  right:-130px;bottom:-210px;background:var(--blue-100);filter:blur(30px);z-index:-1;
}

.providers-copy h2{font-size:clamp(30px,4vw,46px);margin-top:14px}

.providers-copy p{
  max-width:560px;margin:18px 0 28px;color:var(--ink-700);font-size:17px;line-height:1.7;
}

.providers-preview{
  padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--surface);
  box-shadow:var(--shadow-lg);transform:rotate(1.5deg);
}

.providers-preview-head{display:flex;align-items:center;gap:14px;padding-bottom:20px}

.providers-preview-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  color:#fff;background:var(--brand);font-variation-settings:'FILL' 1;
}

.providers-preview-head div{display:flex;flex:1;flex-direction:column}

.providers-preview-head small{
  color:var(--ink-500);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

.providers-preview-head strong{font-family:"Bricolage Grotesque";font-size:18px}

.providers-preview-status{color:var(--brand);font-variation-settings:'FILL' 1}

.providers-preview-list{display:grid;gap:10px}

.providers-preview-list>span{
  display:grid;grid-template-columns:40px 1fr 24px;align-items:center;gap:12px;
  min-height:64px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;
  color:var(--ink-700);font-size:14px;font-weight:600;
}

.providers-preview-list i{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--brand);font-style:normal;font-size:21px;
}

.providers-preview-list b{
  color:var(--brand);font-size:19px;font-weight:400;font-variation-settings:'FILL' 1;
}

@media(max-width:760px){
  .providers-entry{grid-template-columns:1fr;gap:36px;padding:36px 24px}
  .providers-preview{transform:none}
}
```

- [ ] **Step 3: Add exact translations**

Spanish:

```php
'provider-eyebrow' => 'Para comercios y profesionales',
'provider-title' => 'Administra tu negocio en MyCode',
'provider-description' => 'Registra y mantén actualizada la información de tu negocio, sus sucursales y servicios desde un solo lugar.',
'provider-cta' => 'Ingresar como prestador',
'provider-footer' => 'Prestadores de servicios',
'provider-card-title' => 'Panel de gestión',
'provider-card-profile' => 'Perfil del negocio',
'provider-card-locations' => 'Sucursales',
'provider-card-services' => 'Servicios',
```

English:

```php
'provider-eyebrow' => 'For businesses and professionals',
'provider-title' => 'Manage your business with MyCode',
'provider-description' => 'Register and keep your business, locations, and services up to date from one place.',
'provider-cta' => 'Sign in as a service provider',
'provider-footer' => 'Service providers',
'provider-card-title' => 'Management dashboard',
'provider-card-profile' => 'Business profile',
'provider-card-locations' => 'Locations',
'provider-card-services' => 'Services',
```

- [ ] **Step 4: Add the footer navigation link**

Inside the existing `Navegar` column, add:

```blade
<a href="#providers">{{ __('redesign_welcome.provider-footer') }}</a>
```

- [ ] **Step 5: Run the focused tests and verify GREEN**

Run:

```bash
php artisan test tests/Feature/PublicPagesAvailabilityTest.php
```

Expected: all tests in the file pass.

- [ ] **Step 6: Run formatting and architecture checks**

```bash
git diff --check
php artisan architecture:audit --strict
```

Expected: no whitespace errors and the strict audit passes.

- [ ] **Step 7: Commit the implementation**

```bash
git add \
  resources/views/welcome.blade.php \
  resources/views/partials/redesign/welcome/providers.blade.php \
  resources/views/partials/redesign/welcome/section-styles.blade.php \
  resources/views/partials/redesign/welcome/footer.blade.php \
  public/css/welcome-sections/04-providers.css \
  resources/lang/es/redesign_welcome.php \
  resources/lang/en/redesign_welcome.php
git commit -m "feat: add provider entry to homepage"
```

Update `VERSION` from `1.2.1` to `1.3.0` in the hook because this introduces a
new public homepage feature.

### Task 3: Verify the complete integration

**Files:**
- Verify only; no production files expected.

- [ ] **Step 1: Run the complete test suite**

```bash
php artisan test
```

Expected: the complete suite passes with zero failures.

- [ ] **Step 2: Inspect the final change set**

```bash
git diff HEAD~3 --check
git status --short
git log -3 --oneline
```

Expected: implementation commits are present; only the user's pre-existing
image and `.DS_Store` changes remain outside this feature.