# 1Takaful public landing-page audit — Phase 8B0

Audit date: 2026-08-18. Reference inspected read-only at `/Users/nuzulmuslim/Documents/New project/1Takaful`. No reference files, routes, assets, or TakafulHub public implementation were changed.

## A. Reference file map and architecture

1Takaful is **not** implemented as nine operator-specific page sets. It is an Inertia/Laravel, agent-owned landing-page system: one set of Vue templates is rendered for every supported operator and agent, with the operator and agent resolved from the URL/database.

| Responsibility | Exact reference path |
|---|---|
| Operator/agent route definitions | `/Users/nuzulmuslim/Documents/New project/1Takaful/routes/web.php` (the `$registerOfficialPublicRoutes` closure, especially lines 133–202) |
| Route controller | `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Http/Controllers/PublicSite/PublicLandingPageController.php` |
| View payload and theme palette | `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Services/LandingPage/LandingPageViewDataService.php` |
| Default copy, field definitions, merging overrides | `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Services/LandingPage/AgentPageContentService.php` |
| Landing-page / per-page-content persistence models | `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Models/LandingPage.php`, `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Models/LandingPagePageContent.php`, `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Models/LandingPageSection.php` |
| Shared public shell | `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Layouts/PublicAgentWebsiteLayout.vue` |
| Shared header/footer | `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Components/public/PublicHeader.vue`, `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Components/public/PublicFooter.vue` |
| Shared CSS and font | `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/css/public-theme.css` |
| Shared public-page templates | `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Pages/Public/Agent/Home.vue`, `Hibah.vue`, `MedicalCard.vue`, `Quotation.vue`, `Contact.vue` |
| Supporting editable UI used by templates | `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Components/landing-page/EditableText.vue`, `EditableButtonLink.vue`, `EditableImageCropUpload.vue` (and their imports in the five page files) |

The live route shape is `/{operator_code}/{username}` plus the four suffixes. It is therefore **not** the target TakafulHub shape `/{operator}`. The reference route regexp accepts `aia|ge|pru|hlmt|etiqa|ikhlas|zurich|fwd|far|sl`; the page controller resolves a visible `LandingPage`, emits the common template and calls `mergedPageContent()` for its preset plus saved overrides. `LandingPagePageContent.content` is an array keyed by page/field; it is not a dedicated page-template or per-operator Vue implementation.

## B. Operator/page coverage matrix

“Template coverage” means the code supports the route and uses the shared component. It does **not** prove that a published agent/landing-page record exists for every operator: that is runtime database data, not present in the checked source tree.

| Target operator | TakafulHub slug | 1Takaful code | Home | Hibah | Medical Card | Quotation | Contact | Theme | logo/icon asset | Content completeness |
|---|---:|---:|---:|---:|---:|---:|---:|---|---|---|
| AIA Public Takaful | `aia` | `aia` | shared | shared | shared | shared | shared | yes | `public/icons/operators/aia-512.png` | shared presets + runtime agent overrides |
| Prudential BSN Takaful | `pru` | `pru` | shared | shared | shared | shared | shared | yes | `.../pru-512.png` | same |
| Great Eastern Takaful | `get` | `ge` | shared | shared | shared | shared | shared | yes | `.../ge-512.png`; `public/assets/brand/ge-logo.png` | same |
| Etiqa Takaful | `et` | `etiqa` | shared | shared | shared | shared | shared | yes | `.../etiqa-512.png` | same |
| Takaful Ikhlas | `ti` | `ikhlas` | shared | shared | shared | shared | shared | yes | `.../ikhlas-512.png` | same |
| HongLeong MSIG Takaful | `hlmt` | `hlmt` | shared | shared | shared | shared | shared | yes | `.../hlmt-512.png` | same |
| Zurich Takaful | `zt` | `zurich` | shared | shared | shared | shared | shared | yes | `.../zurich-512.png` | same |
| FWD Takaful | `fwd` | `fwd` | shared | shared | shared | shared | shared | yes | `.../fwd-512.png` | same |
| SunLife Takaful | `slt` | `sl` | shared | shared | shared | shared | shared | yes | `.../sl-512.png` | same |

There are no separate `get`, `et`, `ti`, `zt`, or `slt` route aliases in 1Takaful. `far`/`far-512.png` is a tenth reference operator, outside TakafulHub’s requested nine. Logos in the actual public header are **not per operator**: `PublicHeader.vue` defaults to `/assets/1tlogov2.png` and allows a saved global `logo_path` override.

## C. Exact page structures

All five pages are wrapped in `PublicAgentWebsiteLayout`: sticky header → page content → footer, with optional campaign popup and social-proof widget. Exact page section order follows.

### Home

1. Full-bleed image hero (`home-s1.jpg` preset), gradient/overlay, badge, headline, subheadline, CTA.
2. Cream intro panel: badge, headline, body, Hibah and Medical Card CTAs.
3. Agent profile: portrait, badge, headline, narrative, tick list, Contact CTA.

`section_medical_*`, `section_hibah_*`, and `section_contact_title` still appear in the PHP preset/editor definitions but are **not rendered** by the current `Home.vue` template. They are legacy/dead configuration fields, not Home sections.

### Hibah

1. Two-column hero: image, themed copy panel, badge/title/body/Quotation CTA.
2. Dark themed “Kepentingan Hibah Takaful” section with five alternating image/text importance cards.
3. Facts section: background image `/assets/hibah-sec3.jpg`, facts badge/title/long copy.
4. Cream “Peranan Hibah Takaful” icon-card grid (four cards).
5. Themed plan-benefit split section: `/assets/hibah-s5.jpg`, plan copy, benefit list, CTA.
6. Cream, three-step application section.
7. Themed final CTA section.

### Medical Card

1. Two-column hero: image, themed copy panel, badge/title/body/Quotation CTA.
2. Dark themed importance section with five alternating image/text cards.
3. Medical-cost facts: copy plus animated counter cards for Kanser, Jantung, and Buah Pinggang.
4. Cream “Peranan Medical Card Takaful” icon-card grid (four cards).
5. Themed plan-benefit split section: `/assets/medcard-s5.jpg`, plan copy, benefit list, CTA.
6. Cream, three-step application section.
7. Themed final CTA section.

### Quotation

1. Two-column hero: `/assets/quotation-s1.jpg`, title and multiline subtitle.
2. `#quotation-form` cream section: themed “Info Penting” panel, editable `info_title`; then editable form title and the controlled multi-step quotation form.
3. Form steps: “Pilih Pelan Anda” → “Maklumat Peribadi” → “Maklumat Untuk Dihubungi” → submit, validation/error state and success modal.

### Contact

1. Two-column hero: `/assets/contact-s1.jpg`, title and long privacy/contact explanation.
2. Agent contact card: profile image/initials, card title, resolved agent name/company, role, subtitle, WhatsApp, Call, Quotation CTA, and email.

## D. Exact theme, typography, layout and responsive behavior

### Theme palette

These are the exact values in `LandingPageViewDataService::themePaletteFor()`; `fourth_color` is used as the light/dark contrast text color. `accent_color` is the requested accent; the baseline surface/text values below are global CSS, not an operator palette.

| Code | primary | secondary | accent | contrast / text (`fourth_color`) |
|---|---|---|---|---|
| `aia` | `#b8123e` | `#d31145` | `#333333` | `#ffffff` |
| `ge` | `#2b2c5f` | `#ef1414` | `#333333` | `#ffffff` |
| `pru` | `#059bab` | `#ee162a` | `#333333` | `#ffffff` |
| `etiqa` | `#ffc10e` | `#dca718` | `#333333` | `#333333` |
| `hlmt` | `#191850` | `#ea2324` | `#333333` | `#ffffff` |
| `zurich` | `#2167ae` | `#2167ae` | `#333333` | `#ffffff` |
| `ikhlas` | `#1a6a43` | `#8cc63e` | `#333333` | `#ffffff` |
| `fwd` | `#e87722` | `#ec6600` | `#333333` | `#ffffff` |
| `sl` | `#FAA61A` | `#FFCB05` | `#00588B` | `#00588B` |

Global values from `public-theme.css`: background `#F8F6F1`, surface `#FFFFFF`, normal text `#1F2937`, muted `#6B7280`, border `#E5E7EB`, dark heading `#14213D`; page-specific cream panels use `#f8f7f4` or `#f6f3ee`. There is no separate per-operator background/text palette beyond the four resolved values.

### Typography and cards

* Global font is Google **Plus Jakarta Sans**, weights 400/500/600/700/800, with `Inter, ui-sans-serif, system-ui, sans-serif` fallback.
* Header links are 14px/600; overlines are 12px/700, uppercase with 0.16em tracking.
* Mobile heading baseline is 24px/700; most product h1/h2 reach 30px at `sm` and 37.6–41.6px at `lg`; Home’s h1 reaches 48px at `sm` and 60px at `lg` with weight 900/Tailwind `font-black`.
* Buttons are rounded `xl`, 46–50px minimum height, 14–16px semibold/bold; the visual system uses 16–32px radii, thin slate borders, white/gradient fills, and soft large shadows. These styles are global, not operator-specific; theme CSS variables recolor themed sections/header.

### Responsive behavior

* `.public-container` is `max-width: 1200px`; horizontal padding is 16px (<640), 24px (≥640), 32px (≥1024).
* The desktop header appears at ≥1024px. Below that it becomes a centered-logo, hamburger-driven right drawer (maximum 80vw/360px), locks document scrolling, and supports Escape/overlay close.
* Home hero min-height is 56vh → 60vh at `sm` → 66vh at `lg`; most content spacing is 64px mobile, 80px `sm`, 96px `lg`.
* Product/contact/quotation heroes and two-column content stack below `lg`; at ≥1024px they use two columns. Profile/contact card content centers on small screens and aligns left at `lg`. CTA rows stack by default and become/wrap horizontal at `sm`.
* Grids/cards use the corresponding Tailwind `sm`/`lg` layouts inside the page templates; the product importance cards alternate visual order but remain a single vertical flow on mobile.

## E. Content and asset map

### Copy source of truth

The full actual default copy—including headings, bodies, CTA labels, five importance-card bodies, four solution cards, plan-benefit lists, three steps, quotation wording/success messages, and contact copy—is the literal `presets()` array in `/Users/nuzulmuslim/Documents/New project/1Takaful/app/Services/LandingPage/AgentPageContentService.php` (home starts at line 38; Hibah at 75; Medical Card at 168; Quotation/Contact at 244). It should be copied verbatim as the future TakafulHub seed/content source, including existing capitalization and typographical quirks such as `Quotation HIbah` in the service preset.

Important literal defaults include:

* Home hero: “Semak Harga Pelan Takaful Pilihan Anda Di Sini!” / “Dapatkan Quotation & Konsultasi secara PERCUMA hari ini.” / “Quotation Percuma”.
* Hibah hero: “Hibah Takaful Sebagai Pengganti Pendapatan Keluarga Anda.” / “GET FREE QUOTATION”; facts headline: “RM65 Billion Harta Beku & Tak Dituntut”; final CTA: “Kini Semuanya Online!”.
* Medical hero: “Medical Card Pilihan No.1 Rakyat Malaysia”; medical-cost title: “Kos Rawatan Penyakit Kritikal Semakin Meningkat”; default counters are Kanser RM150,000, Jantung RM100,000, Buah Pinggang RM40,000.
* Quotation: “Quotation {operator}”, “Info Penting”, “Isi Maklumat Berikut Selengkapnya”, “Beri Saya Quotation”, “Terima kasih! Permohonan anda berjaya dihantar.”, “Saya akan hubungi anda dalam tempoh 24 jam.”
* Contact: “Hubungi Saya”, “HUBUNGI PERUNDING ANDA”, “Perunding Takaful Bertauliah”, “Saya sedia membantu anda mendapatkan cadangan pelan yang sesuai.”, “Dapatkan Quotation”.
* Footer disclaimer is literal in `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Components/public/PublicFooter.vue`; it identifies 1Takaful and should be treated as a platform-level legal-content decision for TakafulHub, not blindly operator CMS copy.

Operator-specific text is chiefly computed by inserting `operatorDisplayName` / uppercase operator display name into shared defaults. Per-agent text/asset changes are stored as content overrides and agent fields (name, company, phone, email, image); no product-copy files are unique to a particular one of the nine operators.

### Assets actually referenced by the shared agent templates

| Asset | Used by / role |
|---|---|
| `/public/assets/1tlogov2.png` | default shared header logo; replaceable by saved `global_brand_logo_path` |
| `/public/assets/home-s1.jpg` | Home hero preset |
| `/public/assets/home-potrait.jpg` | Home profile image preset |
| `/public/assets/hibah-s1.jpg` | Hibah hero preset |
| `/public/assets/hibah-tn001.jpg`–`hibah-tn005.jpg` | Hibah importance-card images |
| `/public/assets/hibah-sec3.jpg` | Hibah facts section background |
| `/public/assets/hibah-s5.jpg` | Hibah plan section image |
| `/public/assets/medcard-s1.jpg` | Medical Card hero preset |
| `/public/assets/medcard-tn001.jpg`–`medcard-tn005.jpg` | Medical importance-card images |
| `/public/assets/medcard-s5.jpg` | Medical plan section image |
| `/public/assets/quotation-s1.jpg` | Quotation hero preset |
| `/public/assets/contact-s1.jpg` | Contact hero preset |
| `/public/icons/operators/{aia,pru,ge,etiqa,ikhlas,hlmt,zurich,fwd,sl}-512.png` | operator icons in the asset set; not rendered by `PublicHeader.vue` |

Other listed `/public/assets` files are historical/general-main-site assets unless a separate reference (outside these five `Public/Agent` templates) uses them. Do not copy them merely because they exist.

## F. Shared vs. specific / duplication audit

Shared globally: shell, header/footer, page title/favicon/canonical behavior, CSS, responsive rules, CTA visual language, tracking bridges, social proof and campaign popup runtime.

Shared by page type: one Vue template for each of Home, Hibah, Medical Card, Quotation and Contact. Hibah and Medical Card are strongly structurally parallel but currently duplicated in two very large `.vue` files.

Specific: theme palette; calculated operator display name; agent identity/contact/photo; page-content override values; optional logo/favicon/nav visibility/privacy-policy settings. Assets are shared default imagery, replaceable per agent via content fields.

Do **not** port the following duplication naively: the repeated hero/importance/solution/plan/steps/final-CTA scaffolding in `Hibah.vue` and `MedicalCard.vue`; the repeated page-field parsing/editor machinery; shared header/footer that is re-instantiated by every page; and the hard-coded 1Takaful legal/platform branding. Visual parity can be retained with typed section components and server-selected section data, using the existing preset text/image paths exactly.

## G. CMS blueprint and draft/publish recommendation

Recommended normalized model for TakafulHub (design only; not implemented):

* `operator_websites`: operator FK/target slug, display/legal names, status, canonical/domain metadata, stable theme FK/snapshot and system navigation toggles.
* `website_page_revisions`: website FK, `page_key` (`home`, `hibah`, `medicalcard`, `quotation`, `contact`), `state` (`draft`/`published`), revision number, `content` JSON, author/published timestamps. One published revision per website/page; a separate current draft revision.
* `website_assets`: uploaded asset metadata, crop/alt text; fields refer to asset IDs rather than arbitrary paths.
* `operator_themes`: stable operator-owned `primary`, `secondary`, `accent`, `contrast`, `logo_asset_id`, favicon asset ID. Theme is deliberately separate from editable editorial copy.

Use fixed templates and a typed/validated schema per section. Do not allow arbitrary section ordering, HTML, CSS, script, route target or form fields from the editor.

| Page | Editable CMS fields (from the actual reference templates) |
|---|---|
| Home | hero image/badge/title/subtitle/CTA; intro badge/title/body/two CTA labels+targets; profile image/badge/title/body/tick-list/contact CTA; optional brand/logo/favicon/nav/privacy settings. Do not expose legacy, currently unused `section_medical_*`, `section_hibah_*`, or `section_contact_title` fields. |
| Hibah | hero image/badge/title/subtitle/CTA; 5 importance `{title, description, image}` items; facts badge/title/body; solution badge/title and 4 `{icon,title,description}` items; plan badge/title/body/image, benefits `{title,description}`, CTA; steps badge/title and 3 `{title,description}` items; final CTA badge/title/body/label/target; contact title |
| Medical Card | same product schema, with 5 importance items; cost badge/title/body and 3 `{subtitle, icon, target, description}` counters; 4 solution items, plan, steps, final CTA and contact title |
| Quotation | hero image/title/subtitle, information-panel title/body if present, surrounding form title, success-modal title/subtitle. Submit wording may be constrained system copy. |
| Contact | hero image/title/subtitle; contact-card title/role/subtitle; quotation CTA label. Agent name/company/email/phone/profile image should bind to system/agent profile, not arbitrary page text. |

Seed every published revision from the corresponding literal 1Takaful preset. “Reset to default” should delete an override/restore the immutable seed—not regenerate or rewrite text. Publishing should atomically promote a validated draft to the single published revision; visitors receive only the published revision, and the editor previews only draft data.

## H. Quotation and contact system boundaries

The precise 1Takaful mount boundary is `<section id="quotation-form">` in `/Users/nuzulmuslim/Documents/New project/1Takaful/resources/js/Pages/Public/Agent/Quotation.vue` (line 662). Its exterior hero and the information/form headings are editorial layout. The actual form starts at the `<form ... @submit.prevent="submitWizard">` inside that section (line 812) and is system behavior: plan options, personal/contact fields, validation, request submission (`POST /{operator_code}/{username}/quotation`), lead creation, tracking and success handling.

For TakafulHub, render the matching Quotation hero + fixed `quotation-form` shell and mount the existing TakafulHub quotation component in place of the controlled form. Its field set, validation, submission endpoint, lead handling, tracking and state must remain non-CMS. Only bounded surrounding labels/copy may be editable.

On Contact, WhatsApp uses normalized `https://wa.me/...` from the system agent phone and opens a new tab; Call uses `tel:`. Both emit tracking events. The card’s resolved agent identity/email/phone/image and the button actions are system data/actions; only the hero/card descriptive copy and Quotation CTA label belong in CMS. No office address is rendered by this reference agent Contact template.

## I. Recommended TakafulHub port strategy and gaps

Build one route-driven `OperatorWebsiteResolver` for the target slugs, one `PublicOperatorLayout`, and fixed typed section components. Map the requested target slugs to the audited codes for seed/import purposes: `get→ge`, `et→etiqa`, `ti→ikhlas`, `zt→zurich`, `slt→sl`; retain `aia`, `pru`, `hlmt`, `fwd`. This produces visual/content parity while avoiding a 45-page copy set.

Gaps to explicitly resolve before implementation:

1. Reference URLs contain `{username}`; target URLs do not. Decide whether a TakafulHub operator page represents a platform operator, a selected agent, or a different agent-resolution mechanism.
2. 1Takaful does not provide target-slug aliases for `get`, `et`, `ti`, `zt`, `slt`.
3. Public header uses generic 1Takaful branding by default; icons exist but are not live header logos. Obtain/approve target-operator logo usage before claiming brand-logo parity.
4. Content is one shared Bahasa Malaysia preset with operator-name interpolation, not nine independently authored operator content sets. “Complete” in source means template/preset support, not verified regulated product accuracy for each operator.
5. The footer disclaimer identifies 1Takaful and must be rewritten/approved as TakafulHub legal copy outside the operator editor.
6. Reference has analytics/popups/social proof, but they are runtime/platform features rather than landing-page copy. Their inclusion in the eventual parity scope needs a separate product decision.

## Phase boundary

This is documentation only. No CMS migration, TakafulHub public route, Vue component, asset copy, quotation behavior, or 1Takaful file was changed.