---
name: evergreen-finance
description: "Use this plugin when the user wants a premium 'Kova' fintech / banking landing page: a full-screen hero with a boomerang (forward/reverse) video background, animated FadeUp reveals, floating dashboard cards (savings line chart, spend bar charts), a split testimonial section with a square autoplay video, and a 4-up features grid with image cards and a donut spend chart. Invoke for 'fintech landing', 'banking app landing', 'Kova', 'finance hero with video', or when the user references the Evergreen Finance template."
version: 0.1.0
od:
  mode: prototype
  surface: web
  scenario: design
  preview:
    type: html
    entry: example.html
  design_system:
    requires: false
---

# Evergreen Finance — Kova Fintech Landing

Produce a premium **"Kova" fintech landing page**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, colors, three sections, dashboard cards, donut chart, and animations described below.

This is the authoritative build brief. Follow it exactly — the named colors, fonts, video URLs, and animation curves are locked. **Do NOT use purple/indigo colors anywhere.**

## Stack

- Default output: the single self-contained `example.html` seed (vanilla HTML/CSS/JS). It already includes everything inline.
- If the user explicitly asks for a **React + TypeScript + Vite + Tailwind + Framer Motion** project, port the seed faithfully: same tokens, same markup structure, same section order. Use `lucide-react` for icons and `framer-motion` for the FadeUp reveals. Do not change the design while porting.
- **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.)
- Dependencies for the React port: `framer-motion ^12.38.0`, `lucide-react ^0.344.0`, `react ^18.3.1`, `react-dom ^18.3.1`; dev: Vite, Tailwind CSS 3, TypeScript, PostCSS, Autoprefixer.

## Fonts (locked)

Load both Cooper BT W01 faces via `<link>` in the head:

- `https://db.onlinewebfonts.com/c/53077f9a3eee9c479d37d6af20394ded?family=Cooper+BT+W01+Light`
- `https://db.onlinewebfonts.com/c/5ade3423145f3b9f7031574333ca0b73?family=Cooper+BT+W01+Medium`

Utility classes:

```
.font-cooper { font-family: 'Cooper BT W01 Light', 'Georgia', serif; }
.font-cooper-medium { font-family: 'Cooper BT W01 Medium', 'Cooper BT W01 Light', 'Georgia', serif; font-weight: 500; }
```

Body text uses a neutral sans (Inter / system-ui).

## Color Palette (locked)

```
--dark-green:  #08150C   (primary dark green, buttons, brand)
--hover-green: #1a2e1f   (button hover)
--cream:       #FDF5EB   (warm cream — sections 2 & 3 background)
--beige-card:  #EBE4DC   (Spend Insights card)
--beige-inner: #F4F1EC   (inner container of Spend Insights)
```

Donut chart colors: `#C46B2D`, `#7A8C3E`, `#A8B87A`, `#B8AFA4`.
Body/text: stone-600/700/800. Accent greens: emerald-400/500 for the savings chart. Hero is white (video fills it); the lower two sections are `#FDF5EB`. **No purple/indigo.**

## Animations — FadeUp (locked)

A reusable reveal with two modes:

- `hidden`: `opacity: 0; translateY(24px); filter: blur(8px)`.
- `visible`: `opacity: 1; translateY(0); filter: blur(0)`.
- Transition: `duration 0.7s, ease cubic-bezier(0.25,0.1,0.25,1)`, per-element `delay`.
- **immediate** mode (Hero elements): fire on mount.
- **scroll-triggered** mode (Testimonial + Features): fire when entering the viewport, once, with a `-60px` margin.

Vanilla seed mapping: `immediate` → `setTimeout` on load; scroll-triggered → `IntersectionObserver` toggling a `.visible` class. In the React port use Framer Motion `animate="visible"` (immediate) and `whileInView="visible"` with `viewport={{ once: true, margin: '-60px' }}`.

## Section 1 — Hero (full viewport, `min-h-screen overflow-hidden`)

White background. `hero-inner` is `flex-1 flex flex-col justify-between` so the dashboard cards sit at the bottom.

### Boomerang video background (locked)
`<BoomerangVideoBg>` wrapped in `absolute inset-0 w-full h-full scale-[1.08] origin-center`:
- Loads (muted, playsInline, crossOrigin="anonymous"): `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_070729_32a7eb4e-d6e2-4571-badc-91b4dab1ecbe-2db9b1.mp4`
- Captures every frame into offscreen canvases (max width 960px) while the video plays once, via `requestVideoFrameCallback` (with `requestAnimationFrame` fallback).
- After `ended`, swaps the `<video>` for a visible `<canvas>` and plays the captured frames forward/reverse (boomerang) at 30fps. The `scale-[1.08]` hides edge gaps.
- If frame capture fails (cross-origin taint), it gracefully keeps showing the looping `<video>` — keep this fallback.

### Navbar (FadeUp immediate, delay 0)
- Flex row, `justify-between`, padding `px-5 sm:px-10 lg:px-16 py-5`.
- Left: brand "Kova" in `font-cooper text-xl sm:text-2xl text-[#08150C] tracking-tight`.
- Center (`hidden md:flex`): links "Explore", "Pricing" (active, with a `h-0.5 bg-[#08150C] rounded-full` underline bar `-bottom-1`), "Perks", "Reach" — `text-sm text-stone-700`, hover `text-[#08150C]`; active is `font-medium text-[#08150C]`.
- Right desktop: "Get Started" — `bg-[#08150C] text-white text-sm font-medium px-5 py-2.5 rounded-xl hover:bg-[#1a2e1f]`.
- Right mobile: hamburger (Lucide `Menu`/`X`, size 22) toggling a `bg-white/95 backdrop-blur-md shadow-lg` dropdown with the same links + button.

### Hero content (centered, `flex-col items-center text-center`, `px-5 sm:px-10 pt-8 sm:pt-14 pb-8 sm:pb-14`)
- Heading (FadeUp immediate, delay 0.1): `font-cooper text-[2.2rem] sm:text-5xl md:text-6xl lg:text-7xl text-[#08150C] leading-tight max-w-5xl tracking-tight` — "Own your money and build the wealth you deserve".
- Subtext (delay 0.25): `mt-4 sm:mt-5 text-sm sm:text-base text-stone-600 max-w-sm sm:max-w-md leading-relaxed` — "Step into a smarter way to bank, right from your pocket. Kova gives you instant control over your money, wherever you are."
- CTAs (delay 0.4), `flex-col sm:flex-row gap-3`:
  - "Watch 30s Demo" — `white/80 backdrop-blur`, border stone-200, Lucide `Play` (size 14, fill stone-800), `rounded-xl`.
  - "Get the App" — `bg-[#08150C] text-white`, Lucide `Download` (size 14), `rounded-xl`.

### Dashboard cards (bottom of hero, FadeUp immediate)
Flex row `items-end justify-center gap-2 sm:gap-4`; the two outer cards are `hidden sm:block`. All cards `bg-white/95 backdrop-blur rounded-2xl` with a soft shadow.
- **SavingsCard** (delay 0.55, `w-44 sm:w-64`): "Savings" label + "+25%" and "+12%" green badges; an SVG line chart (green polyline `#10b981` + gradient fill); month labels Jan–Apr.
- **OthersCard** (delay 0.65, `w-44 sm:w-72`): "Others" header + "Monthly" dropdown pill; three stats (78% Groceries, 43% Entertain., 23% Transport); bar chart of **12 bars**, the **5th bar orange `#f97316`**, rest gray `#d1d5db`.
- **BillPayCard** (delay 0.75, `w-44 sm:w-64`): "Bill Pay" header + "Monthly" dropdown pill; "-8%" red badge; bar chart of **12 bars**, the **7th bar dark `#08150C`**, rest light gray `#e5e7eb`; month labels.

## Section 2 — Testimonial

`bg-[#FDF5EB] py-14 sm:py-20 px-5 sm:px-10 lg:px-20`. Inner: `max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-[3fr_2fr] gap-10 md:gap-16 items-center`.

Left column (scroll FadeUp, staggered delays 0 → 0.4):
- Heading (0): `font-cooper-medium text-2xl sm:text-3xl text-[#08150C] leading-snug mb-6 sm:mb-8` — "Trusted by ambitious, fast-moving teams".
- Company badge (0.1): `w-7 h-7 rounded-md bg-[#08150C]` square with "A" + "Arcvex".
- Quote (0.2): `font-cooper text-stone-700 text-lg sm:text-xl md:text-2xl leading-relaxed mb-5 sm:mb-6` — "With Kova, I have full visibility into our team's spending in real time. It feels like having a sharp financial advisor available at every hour, helping us stay on budget and make wiser calls."
- Attribution (0.3): "Maya Reeves" (`text-sm font-semibold`) + "Director, Arcvex" (`text-xs text-stone-500`).
- Button (0.4): "All Stories" + arrow icon, dark button style.

Right column (FadeUp delay 0.15): a looping muted autoplay video `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_074029_c7a854bd-2d6e-4b62-96b3-ae8c16311e44-59f9be.mp4`, styled `w-full rounded-2xl object-cover aspect-square` inside `max-w-xs sm:max-w-sm`.

## Section 3 — Features

`bg-[#FDF5EB] py-14 sm:py-20 px-5 sm:px-10 lg:px-20`. Inner `max-w-7xl mx-auto`.

Header row (scroll-animated):
- Heading (FadeUp 0): `font-cooper-medium text-2xl sm:text-3xl md:text-4xl text-[#08150C] leading-snug` — "Designed to sharpen every decision".
- Button (0.1): "Watch Demo" + Lucide `Play` (size 13, fill white), dark button style.

Cards grid: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4`. Each card `aspect-[3/4] rounded-2xl overflow-hidden`, scroll FadeUp with staggered delays 0.05 / 0.15 / 0.25 / 0.35.

- **Card 1 — Smart Budgeting** (0.05): absolute object-cover bg image; gradient overlay `bg-gradient-to-t from-[#08150C]/80 via-[#08150C]/20 to-transparent`; top label Lucide `Sparkles` (16, white) + "Smart Budgeting"; bottom text "Let AI reshape how you plan your spending. Kova adapts to your…" (`text-white/80`).
  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061249_f20dfeda-1033-45ce-a3ee-070965599cbf-6c6b7e.webp&w=1280&q=85`
- **Card 2 — Bank-Grade Security** (0.15): same overlay; Lucide `ShieldCheck` (16, white) + "Bank-Grade Security"; bottom text "Keep your money safe with end-to-end encryption, live fraud alerts, and two-factor auth…".
  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061305_db631f5f-185f-4fda-a7a8-1dd7359ef2ea-4b7cdd.webp&w=1280&q=85`
- **Card 3 — Spend Insights** (0.25): **no bg image**. Solid `#EBE4DC`, `p-5`. Top label Lucide `PieChart` (16, `text-stone-700`) + "Spend Insights". Inner `rounded-2xl p-4` `#F4F1EC` centered: "Monthly Spend" + "1 Apr – 30 May 2026", then a donut SVG (`viewBox="0 0 36 36"`, `-rotate-90`, four circles r=14 strokeWidth=5) with arcs: `#C46B2D` (26.4/61.56, offset 0), `#7A8C3E` (22/65.96, offset -26.4), `#A8B87A` (17.6/70.36, offset -48.4), `#B8AFA4` (22/65.96, offset -66); center overlay "50%" bold + "of budget".
- **Card 4 — Wealth Building** (0.35): same overlay; Lucide `TrendingUp` (16, white) + "Wealth Building"; bottom text "Grow your net worth with tools that help you set targets, monitor gains, and act…".
  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061316_50e651f8-02d0-4add-9ddb-7d81d15ac02e-24edde.webp&w=1280&q=85`

## Assets — keep remote (do not inline)

All hero/testimonial videos live on `d8j0ntlcm91z4.cloudfront.net` and the feature stills on `images.higgs.ai` — large, stable CDNs. **Keep these as remote URLs**; do not inline them. There are **no avatar images** in this template (Arcvex is a CSS square badge with the letter "A"), so there is no remote-avatar pitfall to avoid here. If you later add real avatars, prefer inline `data:` URIs over remote avatar hosts.

## Global CSS

```
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
```
Plus the two `.font-cooper*` utilities above.

## Responsive behavior

- Mobile-first. Feature cards: 1 col, 2 at `sm`, 4 at `lg`.
- Hero dashboard cards: the two outer cards `hidden` below `sm`.
- Nav links + CTA `hidden` below `md`, replaced by the hamburger menu.
- Text sizes step up at `sm` and `md`.
- Testimonial grid: single column on mobile, `3fr 2fr` at `md`.

## Hard rules

- Buttons use `rounded-xl` (not full pill).
- Hero is `min-h-screen overflow-hidden` with **no page scroll**; `hero-inner` uses `flex-1 flex flex-col justify-between` to push the cards down.
- Boomerang background must use `scale-[1.08]` to avoid edge gaps.
- **No purple/indigo anywhere.** The dark green `#08150C` and warm cream `#FDF5EB` are locked.