Assist_Design/docs/plans/2026-03-04-carousel-and-contact-form-improvements-design.md

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:

        {/* 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

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:

   <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

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:

<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

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

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:

{
  /* 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

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

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.