# Carousel Badge Fix & Contact Form Improvements — Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Fix carousel card badge positioning (inline with icon, not above), remove prices, and improve contact form design/layout across all 3 pages.

**Architecture:** Pure UI changes across 5 existing files. No new components, no new abstractions. The shared `ContactForm` component gets tighter spacing and better styling; each page's surrounding layout is improved independently.

**Tech Stack:** React 19, Tailwind CSS, Next.js 15, lucide-react icons

---

### Task 1: Fix carousel card badge position and remove prices

**Files:**

- Modify: `apps/portal/src/features/landing-page/components/ServicesCarousel.tsx:16-41`

**Step 1: Update `ServiceConversionCard` layout**

Replace lines 22-38 (the card content inside `<article>`) with:

```tsx
        {/* Icon + Badge row */}
        <div className="flex items-center justify-between mb-4">
          <div className="text-primary">{card.icon}</div>
          {card.badge && (
            <span className="inline-flex items-center rounded-full bg-success/10 text-success px-2.5 py-0.5 text-xs font-semibold">
              {card.badge}
            </span>
          )}
        </div>
        <p className="text-sm text-muted-foreground mb-1">{card.problemHook}</p>
        <h3 className="text-lg font-bold text-foreground mb-1">{card.title}</h3>
        <p className="text-sm text-muted-foreground mb-3 flex-grow">
          {card.keyBenefit}
        </p>
        <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:gap-2.5 transition-all mt-auto">
          {card.ctaLabel}
          <ArrowRight className="h-4 w-4" />
        </span>
```

Key changes:

- Badge and icon now share a `flex items-center justify-between` row (icon left, badge right)
- Removed `priceFrom` rendering entirely (the `{card.priceFrom && ...}` block is gone)
- Badge no longer has `self-start` or `mb-3` since it's in the flex row

**Step 2: Verify it builds**

Run: `pnpm type-check`
Expected: No type errors (priceFrom still exists in the type, just not rendered)

**Step 3: Visual check**

Open localhost:3000 and verify:

- Badge "1st month free" appears to the right of the phone icon on the Phone Plans card
- No prices shown on any card
- Cards without badges look normal (just icon, no empty space on the right)

**Step 4: Commit**

```bash
git add apps/portal/src/features/landing-page/components/ServicesCarousel.tsx
git commit -m "fix: move carousel badge inline with icon, remove prices"
```

---

### Task 2: Improve shared ContactForm styling

**Files:**

- Modify: `apps/portal/src/features/support/components/ContactForm.tsx`

**Step 1: Tighten form spacing and polish styling**

1. Line 63 — change outer container padding:
   - From: `"bg-card rounded-2xl border border-border/60 p-6"`
   - To: `"bg-card rounded-2xl border border-border/60 p-5 sm:p-6"`

2. Line 70 — tighten form spacing:
   - From: `className="space-y-5"`
   - To: `className="space-y-4"`

3. Lines 71, 102 — tighten grid gaps:
   - From: `gap-5` (both grids)
   - To: `gap-4` (both grids)

4. Line 134 — improve textarea styling (add ring transition):
   - From: `className="flex min-h-[120px] w-full rounded-lg border border-input bg-muted/20 px-4 py-3 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 transition-colors resize-y text-sm"`
   - To: `className="flex min-h-[100px] w-full rounded-lg border border-input bg-muted/20 px-3.5 py-2.5 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-y text-sm"`

5. Lines 155-157 — add clock icon to response time note:
   - Add `Clock` to the lucide-react import (line 8)
   - Replace the `<p>` with:
   ```tsx
   <div className="flex items-center gap-2 text-xs text-muted-foreground mt-4 pt-3 border-t border-border/40">
     <Clock className="h-3.5 w-3.5 shrink-0" />
     <span>We typically respond within 24 hours.</span>
   </div>
   ```

**Step 2: Verify it builds**

Run: `pnpm type-check`
Expected: No errors

**Step 3: Visual check**

Check form on all 3 pages (localhost:3000, /contact, /support). Verify tighter spacing, consistent styling.

**Step 4: Commit**

```bash
git add apps/portal/src/features/support/components/ContactForm.tsx
git commit -m "style: tighten contact form spacing and polish styling"
```

---

### Task 3: Improve landing page ContactSection layout

**Files:**

- Modify: `apps/portal/src/features/landing-page/components/ContactSection.tsx`

**Step 1: Improve contact method visual hierarchy and tighten layout**

Key changes to the left column (lines 27-52):

- Give each contact method (form, chat, phone) a subtle background card with border
- Tighten `space-y-6` to `space-y-5`
- Reduce outer card padding from `p-6 sm:p-8` to `p-5 sm:p-7`
- Reduce grid gap from `gap-10 lg:gap-12` to `gap-8 lg:gap-10`

Replace the entire left column `<div className="space-y-6">` (lines 27-52) with:

```tsx
<div className="space-y-5">
  <div className="flex items-center gap-2 text-primary font-bold text-lg">
    <Mail className="h-5 w-5" />
    <span>By Online Form (Anytime)</span>
  </div>
  <ContactForm className="border-0 p-0 rounded-none bg-transparent" />

  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
    <div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
      <div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
        <MessageSquare className="h-4 w-4" />
        <span>By Chat (Anytime)</span>
      </div>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Click the &ldquo;Chat Button&rdquo; at the bottom right to reach our team.
      </p>
    </div>
    <div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
      <div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
        <PhoneCall className="h-4 w-4" />
        <span>By Phone (9:30-18:00 JST)</span>
      </div>
      <div className="text-xs text-muted-foreground">
        <p className="font-medium text-foreground">
          Toll Free: <span className="text-sm font-bold text-primary">0120-660-470</span>
        </p>
        <p className="font-medium text-foreground mt-0.5">
          Overseas: <span className="text-sm font-bold text-primary">+81-3-3560-1006</span>
        </p>
      </div>
    </div>
  </div>
</div>
```

Also update the outer card and grid (lines 24-25):

- Line 24: change `p-6 sm:p-8` to `p-5 sm:p-7`
- Line 25: change `gap-10 lg:gap-12` to `gap-8 lg:gap-10`

And the right column (line 56): change `space-y-6` to `space-y-5`

**Step 2: Verify it builds**

Run: `pnpm type-check`

**Step 3: Visual check**

Check localhost:3000, scroll to bottom contact section. Verify:

- Chat and Phone cards are side-by-side in subtle background cards
- Phone numbers are inline with labels (more compact)
- Overall section feels tighter and more organized

**Step 4: Commit**

```bash
git add apps/portal/src/features/landing-page/components/ContactSection.tsx
git commit -m "style: improve landing page contact section hierarchy and compactness"
```

---

### Task 4: Improve PublicContactView layout

**Files:**

- Modify: `apps/portal/src/features/support/views/PublicContactView.tsx`

**Step 1: Tighten header and sidebar**

1. Header section (lines 11-22) — reduce spacing:
   - Change `mb-12 pt-8` to `mb-10 pt-8`
   - Change `mb-4` (on heading) to `mb-3`

2. Grid layout (line 25) — reduce gap:
   - From: `gap-10 mb-16`
   - To: `gap-8 mb-14`

3. Sidebar cards (lines 32-122) — make more compact:
   - Change `space-y-6` to `space-y-4`
   - Change all sidebar card padding from `p-5` to `p-4` (Phone, Chat, Email, Hours, Office cards)
   - Change icon containers from `h-11 w-11` to `h-10 w-10`

**Step 2: Verify it builds**

Run: `pnpm type-check`

**Step 3: Visual check**

Check localhost:3000/contact. Verify:

- Sidebar cards are slightly more compact
- Overall page feels tighter
- Mobile stacking still works cleanly

**Step 4: Commit**

```bash
git add apps/portal/src/features/support/views/PublicContactView.tsx
git commit -m "style: tighten contact us page layout and sidebar spacing"
```

---

### Task 5: Improve PublicSupportView contact section

**Files:**

- Modify: `apps/portal/src/features/support/views/PublicSupportView.tsx:248-264`

**Step 1: Tighten the "Still Need Help?" section**

Replace lines 248-263 with:

```tsx
{
  /* Contact Form Fallback */
}
<section className="mb-12" aria-labelledby="contact-heading">
  <div className="text-center mb-5">
    <div className="inline-flex items-center justify-center w-11 h-11 bg-primary/10 rounded-xl mb-2.5 text-primary">
      <Send className="h-5 w-5" />
    </div>
    <h2 id="contact-heading" className="text-2xl font-bold text-foreground">
      Still Need Help?
    </h2>
    <p className="text-sm text-muted-foreground mt-1">
      Send us a message and we&apos;ll get back to you within 24 hours.
    </p>
  </div>
  <div className="max-w-2xl mx-auto">
    <ContactForm />
  </div>
</section>;
```

Key changes:

- Icon container `w-12 h-12` → `w-11 h-11`, icon `h-6 w-6` → `h-5 w-5`
- Section `mb-6` → `mb-5`
- Icon margin `mb-3` → `mb-2.5`
- Description text size `text-base` → `text-sm`

**Step 2: Verify it builds**

Run: `pnpm type-check`

**Step 3: Visual check**

Check localhost:3000/support, scroll to bottom. Verify:

- "Still Need Help?" section is slightly tighter
- Form uses updated shared styling

**Step 4: Commit**

```bash
git add apps/portal/src/features/support/views/PublicSupportView.tsx
git commit -m "style: tighten support page contact section spacing"
```

---

### Task 6: Final verification

**Step 1: Run full lint and type check**

```bash
pnpm type-check && pnpm lint
```

Expected: No errors

**Step 2: Visual smoke test all 3 pages**

- localhost:3000 — landing page carousel + bottom contact section
- localhost:3000/contact — contact us page
- localhost:3000/support — support page bottom form

Check at mobile (375px) and desktop (1280px) widths.
