22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T20a5,PROMPT: Build a project management dashboard called "Nexar" using React, TypeScript, Tailwind CSS, Vite, and Lucide React icons. The design should have a fullscreen looping background video, a white pill-shaped header, a 3-column responsive grid layout, and task cards with staggered fade-up animations. Use Google Fonts "Instrument Serif" for display/serif text. BACKGROUND: A fullscreen looping .mp4 video plays behind all content. The video is fixed position, covers the entire viewport via object-cover, and sits at z-index: -10. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_054410_6b17f7f9-d11e-44f1-90b0-75ee563d1971.mp4 Attributes: autoPlay, loop, muted, playsInline. FONTS: Load "Instrument Serif" (regular + italic) from Google Fonts in index.html: Define a utility class .font-serif-display in index.css with font-family: 'Instrument Serif', serif;. Use this class for the brand name "nexar", the greeting "Hey, Alex!", and the "Speak now to Nexar!" heading. ANIMATIONS: Custom fadeUp keyframe animation defined in index.css: From: opacity: 0; transform: translateY(24px) To: opacity: 1; transform: translateY(0) Timing: 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards Class: .animate-fade-up (starts with opacity: 0) Each element has a staggered animationDelay via inline style prop, starting at 0s for the header and incrementing by ~0.05-0.1s per element (0s, 0.1s, 0.15s, 0.2s, 0.25s, 0.3s, 0.35s, 0.4s, 0.45s, 0.5s, 0.55s, 0.6s). LAYOUT: Root container: min-h-screen relative p-4 sm:p-6 lg:p-8 overflow-x-hidden Max width wrapper: max-w-[1800px] mx-auto Main grid: flex flex-col lg:grid lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-7 Left column: lg:col-span-3 Center column: lg:col-span-6 with inner width constrained to lg:w-[85%] xl:w-[85%] 2xl:w-[60%] centered Right column: lg:col-span-3 HEADER (white pill bar): Full-width white rounded-full bar (bg-white rounded-full px-4 sm:px-6 py-2 sm:py-3 shadow-sm) containing: Left: A 5x5/6x6 black rounded-md square with a 2x2 grid of tiny white rounded dots inside, followed by the word "nexar" in text-2xl sm:text-3xl font-serif-display Center nav (hidden on mobile, hidden lg:flex): Links "Workspace" (active, black, font-medium), "Actions", "Performance", "AI Insights" (gray-500, hover gray-900) Right: A toggle pill (bg-gray-100 rounded-full) with "Solo" (inactive, gray) and "Crew" (active, bg-black text-white rounded-full) buttons, plus a black circle notification bell icon (filled white) SECTION HEADER ROW (below header): A row with border-b border-black/10 pb-4 sm:pb-6 mb-4 sm:mb-6 containing: Left (col-span-3): Orange-red gradient circle avatar (bg-gradient-to-br from-red-400 to-orange-500) with white User icon inside, plus "Hey, Alex!" in text-[28px] sm:text-[36px] lg:text-[42px] font-serif-display Center (col-span-6): "Active Items" text in text-[20px] sm:text-[24px] lg:text-[26px] tracking-[-0.04em] Right (col-span-3): "Crew:" label, 3 overlapping circular team member avatar images (-space-x-2), and "+9" counter Team member avatar image URLs: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260403_075317_744395c6-7168-48c6-a1f6-5b9b7bd58f87.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260403_075333_2caea84e-742e-4846-9284-ed8532c44c99.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260403_075354_70a33cfd-3c9c-45ef-a7bb-d371cb8aa0af.png&w=1280&q=85 LEFT COLUMN: Project Selector Pill: Light blue (bg-[#DBECFC]) rounded-full pill with a white circle containing a yellow X icon (two crossing lines, stroke #EAB308, strokeWidth 3.5), title "Zenith Launch", subtitle "Product & Strategy", and a ChevronDown icon. Productivity Score: Giant number "85%" in text-[80px] sm:text-[100px] lg:text-[120px] xl:text-[140px] tracking-[-0.04em] with "Current efficiency" subtitle below. Sprint Metrics Card: Rounded card (rounded-[20px] sm:rounded-[28px]) with a background image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260403_055416_630ff6c1-4b72-4cb6-a563-0c7e41124fe1.png&w=1280&q=85 (cover, top center). Contains "Sprint Metrics" header with an "Analytics" pill badge, three stat columns: "26h / Sessions", "11h / Standups", "6h / Audits". Has an absolutely positioned white floating circle button at bottom center (-bottom-4 left-1/2 -translate-x-1/2) containing a pencil/edit SVG icon. CENTER COLUMN (3 TaskCards stacked vertically): Create a reusable TaskCard component in src/components/TaskCard.tsx. It accepts props: icon (Lucide icon component), title, tagText, tagColor ('green'|'yellow'|'red'), details (array of {label, value}), bottomLeftContent (ReactNode), buttonText, buttonVariant ('dark'|'light'|'black'), buttonIcon (optional ReactNode). TaskCard layout: White rounded card (bg-white rounded-[20px] sm:rounded-[28px] px-4 sm:px-6 py-4 sm:py-5 shadow-sm) with 3 rows separated by border-b border-black/10: Row 1: Icon + title (left) and colored pill tag (right) Row 2: 3-column detail grid (label in gray-500, value in gray-900 font-medium). Third detail column is narrower (flex-[0.5] max-w-[120px]). Row 3: Custom bottom-left content + action button Tag colors: green = bg-green-500 text-white, yellow = bg-yellow-400 text-gray-900, red = bg-red-500 text-white. Button variants: dark = bg-[#ECECEC] text-gray-900, black = bg-black text-white, light = bg-gray-100 text-gray-900. Card 1 - "Sprint Planning Call": Icon: Phone, Tag: "Session" (green) Details: Time: "Today: 10:00 AM", With: "Product & Growth", Alert: "15 min" Bottom: 3 overlapping avatar images + "+7" + "Set to begin?" text Button: "Enter session" (dark variant) No rotation Card 2 - "Layout Critique": Icon: BarChart2, Tag: "Action" (yellow) Details: Focus: "Zenith Platform", Details: "Verify the layout of landing screen", Due By: "Mar 22" Bottom: "Assignees:" label + 2 overlapping avatar images Button: "Let AI begin" (black variant) with Sparkles icon Rotated 2 degrees clockwise (rotate-[2deg]) Card 3 - "Zenith Crew Check": Icon: Phone, Tag: "Session" (green) Details: Time: "Fri: 5:30 PM", With: "Sales Lead & Team", Alert: "10 min" Bottom: 3 overlapping avatar images + "+5" + "Scheduled" text Button: "Show details" (light variant) No rotation RIGHT COLUMN: Fast Commands List: Title row with star emoji in white circle + "Fast commands" heading (text-[20px] sm:text-[24px] lg:text-[26px] xl:text-[30px] tracking-[-0.04em]) + "+ Add Item" button. Three list items separated by border-t border-black/10, each with description text and a filled Play icon (Lucide Play with fill-gray-700): "Review session notes and extract key discussion insights" "Generate PDF report with finished items from this week" "Update timeline view based on revised action items in sprint" Voice Input Card: Light blue (bg-[#DBECFC]) rounded card with "Audio Input" blue pill badge (bg-blue-500 text-white), "Speak now to Nexar!" heading in font-serif-display, and a waveform visualization made of 35 thin vertical bars (w-0.5 bg-blue-400 rounded-full) with varying heights: [8, 16, 12, 28, 20, 36, 42, 24, 40, 16, 44, 32, 48, 28, 20, 36, 14, 32, 22, 40, 18, 30, 12, 26, 16, 34, 20, 38, 24, 28, 16, 22, 12, 20, 8] each multiplied by 0.8 for pixel height. Has a floating white circle microphone button at bottom center (same positioning as Sprint Metrics card). DEPENDENCIES: react, react-dom (^18.3.1) lucide-react (^0.344.0) -- icons used: ChevronDown, User, ChevronRight, Mic, Phone, Bell, Play, BarChart2, Sparkles @supabase/Bolt Database-js (^2.57.4) tailwindcss (^3.4.1), postcss, autoprefixer Vite (^5.4.2), @vitejs/plugin-react TypeScript Vite config: Exclude lucide-react from optimizeDeps. Tailwind config: Default with content scanning ./index.html and ./src/**/*.{js,ts,jsx,tsx}.24:T363d,Build a Stats section for an aerospace company called "EngineTech." This is a dark-background section with a two-column header, a 4-tab switcher, and an animated horizontal bar chart with range indicators, spark traces, and staggered entrance animations. The tab switching re-renders the chart with new data and replays all animations. --- SECTION CONTAINER (`.stats`) - Position relative, z-index 80, min-height 100vh. - Padding: `clamp(44px, 5vw, 86px) clamp(16px, 3.8vw, 72px) clamp(54px, 5vw, 90px)`. - Color: `#f7f8f8`. - Background (layered): - `radial-gradient(circle at 78% 18%, rgb(113 145 208 / 0.18), transparent 34%)` - `radial-gradient(circle at 18% 88%, rgb(170 184 213 / 0.11), transparent 28%)` - `linear-gradient(180deg, #111414 0%, #171a1a 100%)` --- HEADER (`.stats__header`) - CSS grid: `grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr)`. - Gap: `clamp(32px, 6vw, 120px)`. Max-width 1820px, centered. Margin-bottom: `clamp(34px, 4.5vw, 72px)`. Left column (`.stats__title-wrap`): - H2: "Unmatched propulsion data across every flight-critical layer." - Max-width 920px, margin 0, color `#f7f8f8`, `font-size: clamp(29px, 3.2vw, 54px)`, weight 300, letter-spacing 0, line-height 1.08. Right column (`.stats__summary`): - `align-self: start`, margin 0, color `rgb(247 248 248 / 0.8)`, `font-size: clamp(18px, 1.65vw, 28px)`, weight 360, line-height 1.34. - Entrance animation: Starts at `opacity: 0; transform: translateY(14px)`. When class `.is-visible` is added: `opacity: 1; transform: none`. Transition: 420ms ease on both properties. - Default text (for "Cities" tab): "Distributed aerospace infrastructure needs engines that can test, relight, and recover across dense launch corridors and remote operating bases." --- TAB BAR (`.stats__tabs`) - CSS grid: `repeat(4, minmax(0, 1fr))`. Gap 0. Max-width 1820px, centered. - Bottom border: `1px solid rgb(255 255 255 / 0.14)`. Each tab is a `` (`.statstab`): - Min-height 58px, padding `0 20px 18px 0`, no border, transparent background. - Color: `rgb(247 248 248 / 0.5)`. Font: inherit, `font-size: clamp(14px, 1.22vw, 22px)`, weight 430. Text-align left. Cursor pointer. - Transition: `color 220ms ease`. - Active state (`.is-active`): color `#ffffff`. **Active underline (`::after` pseudo-element):** - Absolute, `right: 16px; bottom: -1px; left: 0`. Height 4px. - Background: `linear-gradient(90deg, #7191d0, #aab8d5)` (the primary blue to soft blue). - Default: `transform: scaleX(0); transform-origin: left`. - Active: `transform: scaleX(1)`. Transition: `360ms cubic-bezier(0.22, 1, 0.36, 1)`. **The 4 tabs (with `data-stats-tab` attribute):** | data-stats-tab | Label | |---|---| | cities | Cities & Infrastructure | | materials | Materials & Manufacturing | | fuels | Fuels & Upstream | | hydrogen | H2 Hydrogen | First tab ("cities") starts with `.is-active` and `aria-selected="true"`. --- ## CHART CONTAINER (`.statschart`) - Position relative, max-width 1820px, `min-height: clamp(520px, 58vh, 680px)`. - Margin: `clamp(28px, 3vw, 48px) auto 0`. Padding: `0 0 22px`. Overflow hidden. - Border: `1px solid rgb(255 255 255 / 0.08)`. Border-radius 20px. - Background-color: `rgb(255 255 255 / 0.025)`. - **Vertical grid lines** via background-image: `repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), rgb(255 255 255 / 0.07) calc(10% - 1px), rgb(255 255 255 / 0.07) 10%)`. - Box-shadow: `inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 70px rgb(0 0 0 / 0.18)`. - Has `aria-live="polite"` and `data-stats-chart` attribute. ### Chart head (`.statschart-head`) - Flex row, `align-items: center`, `justify-content: space-between`, gap 24px. - Padding: `clamp(18px, 2vw, 28px)`. - Border-bottom: `1px solid rgb(255 255 255 / 0.08)`. Background: `rgb(255 255 255 / 0.025)`. - Left ``: dataset title (e.g., "Cities & Infrastructure"), color `#ffffff`, `font-size: clamp(12px, 0.86vw, 14px)`, weight 760, `letter-spacing: 0.16em`, uppercase. - Right ``: "Operating envelope", color `rgb(247 248 248 / 0.48)`, same font-size, weight 620, `letter-spacing: 0.12em`, uppercase. ### Bars area (`.statsbars`) - Grid layout, gap `clamp(16px, 2vh, 26px)`, padding `clamp(26px, 3vw, 48px) clamp(24px, 2.4vw, 42px) 0`. Each bar row (`.stats__bar-row`) is an ` `: - Grid: `grid-template-columns: minmax(180px, 0.27fr) minmax(0, 1fr)`. Align-items center. Gap: `clamp(18px, 2vw, 34px)`. - **Entrance:** Starts `opacity: 0; transform: translateY(18px)`. - When `.statschart.is-ready` is present: plays `stats-row-in` animation -- `520ms cubic-bezier(0.22, 1, 0.36, 1) forwards`, delay `var(--bar-delay)` (set per row: 0ms, 90ms, 180ms, 270ms). - CSS custom properties set per row: `--bar-value`, `--range-start`, `--range-width`, `--bar-delay`. **Bar label (`.statsbar-label`):** - ``: color `#ffffff`, `font-size: clamp(15px, 1.1vw, 19px)`, weight 680, line-height 1.2. - ``: margin-top 5px, color `rgb(247 248 248 / 0.48)`, `font-size: clamp(12px, 0.86vw, 14px)`, line-height 1.35. **Track (`.statstrack`):** - Position relative, `height: clamp(48px, 5.4vh, 64px)`, overflow hidden, border-radius 0. - Background: `rgb(255 255 255 / 0.055)`. - Box-shadow: `inset 0 0 0 1px rgb(255 255 255 / 0.075), 0 12px 32px rgb(0 0 0 / 0.16)`. **Inside the track, 4 layers:** 1. **Range indicator (`.statsrange`):** Absolute, `top: 9px; bottom: 9px; left: var(--range-start); width: var(--range-width)`. Border: `1px solid rgb(170 184 213 / 0.22)`. Background: `linear-gradient(90deg, rgb(113 145 208 / 0.05), rgb(170 184 213 / 0.14), rgb(113 145 208 / 0.05))`. Starts `opacity: 0; transform: scaleX(0.6); transform-origin: left`. Animates with `stats-range-in`: `620ms cubic-bezier(0.22, 1, 0.36, 1) forwards`, delay `var(--bar-delay) + 60ms`. 2. **Fill bar (`.statsbar`):** Position relative, z-index 1, `width: var(--bar-value)`, height 100%. Background: `linear-gradient(90deg, rgb(113 145 208 / 0.62) 0%, #8fb0ef 62%, #d6e3ff 100%)`. Box-shadow: `0 0 34px rgb(113 145 208 / 0.24)`. Starts `transform: scaleX(0); transform-origin: left`. Animates with `stats-fill`: `900ms cubic-bezier(0.22, 1, 0.36, 1) forwards`, delay `var(--bar-delay) + 110ms`. 3. **Value label (`.statsvalue`):** Absolute, z-index 3, `top: 50%; right: 18px; transform: translateY(-50%)`. Color `#ffffff`, `font-size: clamp(14px, 1vw, 18px)`, weight 740. Displays value + unit (e.g., "82%"). 4. **Spark trace (`.statstrace`):** Absolute inset 0, z-index 2, pointer-events none. Contains 6 `` elements per row, each positioned at `--point-x` (percentage along the bar) and `--point-y` (alternating 34% and 62% vertically). Each spark: - 18px square (variants: 14px for `--1`, 11px for `--2`), border-radius 50%. - Background: `radial-gradient(circle, rgb(255 255 255 / 0.95) 0 8%, rgb(214 227 255 / 0.42) 9% 22%, transparent 58%)`. - `filter: blur(0.1px)`. Starts `opacity: 0; transform: translate(-50%, -50%) scale(0.2)`. - `::before`: Horizontal cross-hair line -- 24px x 1px, centered, `background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.72), transparent)`. Rotated by `var(--spark-rotate)`. - `::after`: Vertical cross-hair -- 1px x 18px, centered, `background: linear-gradient(180deg, transparent, rgb(170 184 213 / 0.62), transparent)`. Same rotation. - Spark variant rotations: `--1` = 22deg, `--2` = -18deg, default = 0deg. - Animates with `stats-point-in`: `420ms cubic-bezier(0.22, 1, 0.36, 1) forwards` to `opacity: 0.86; transform: translate(-50%, -50%) scale(1)`. Delay: `var(--bar-delay) + 260ms + var(--point-delay)` (point-delay increments 70ms per point). ### Axis (`.statsaxis`) - Below the bars. Grid: `grid-template-columns: minmax(180px, 0.27fr) minmax(0, 1fr)`. Gap `clamp(18px, 2vw, 34px)`. Padding `14px clamp(24px, 2.4vw, 42px) 0`. Color `rgb(247 248 248 / 0.42)`, `font-size: clamp(11px, 0.84vw, 14px)`. - Left cell: empty ``. - Right cell: a div with `grid-template-columns: repeat(11, minmax(0, 1fr))` containing 11 `` elements: "0", "10", "20"... "100". First aligned left, last aligned right. --- ## KEYFRAME ANIMATIONS ``` @keyframes stats-row-in { to { opacity: 1; transform: none; } } @keyframes stats-fill { to { transform: scaleX(1); } } @keyframes stats-range-in { to { opacity: 1; transform: scaleX(1); } } @keyframes stats-point-in { to { opacity: 0.86; transform: translate(-50%, -50%) scale(1); } } ``` --- ## JS BEHAVIOR (Tab switching + animation replay) **Data structure:** 4 datasets keyed as `cities`, `materials`, `fuels`, `hydrogen`. Each has `title`, `summary`, and `bars` array (4 items). Each bar: `{ label, value, target, rangeStart, rangeEnd, unit, note, trace }` where `trace` is an array of 6 numbers (x-positions for spark points). **Full dataset:** ``` cities: { title: "Cities & Infrastructure", summary: "Distributed aerospace infrastructure needs engines that can test, relight, and recover across dense launch corridors and remote operating bases.", bars: [ { label: "Mobile integration bays", value: 82, target: 88, rangeStart: 58, rangeEnd: 91, unit: "%", note: "deployment coverage", trace: [28, 42, 57, 63, 74, 82] }, { label: "Airport-adjacent service cells", value: 68, target: 74, rangeStart: 44, rangeEnd: 79, unit: "%", note: "qualified workflows", trace: [18, 36, 41, 55, 61, 68] }, { label: "Remote launch support", value: 54, target: 63, rangeStart: 30, rangeEnd: 70, unit: "%", note: "field readiness", trace: [14, 24, 39, 43, 48, 54] }, { label: "Thermal recovery loops", value: 76, target: 81, rangeStart: 50, rangeEnd: 84, unit: "%", note: "heat reuse potential", trace: [26, 38, 49, 66, 72, 76] }, ], } materials: { title: "Materials & Manufacturing", summary: "EngineTech combines high-temperature alloys, additive tooling, and inspection data to compress the path from design lock to certified hardware.", bars: [ { label: "Nickel superalloy margin", value: 91, target: 94, rangeStart: 68, rangeEnd: 96, unit: "%", note: "thermal headroom", trace: [44, 61, 70, 79, 86, 91] }, { label: "Additive chamber tooling", value: 72, target: 80, rangeStart: 48, rangeEnd: 86, unit: "%", note: "lead-time reduction", trace: [19, 34, 48, 53, 67, 72] }, { label: "Sub-micron inspection yield", value: 96, target: 97, rangeStart: 82, rangeEnd: 99, unit: "%", note: "accepted components", trace: [71, 77, 84, 89, 94, 96] }, { label: "Reusable test article cycles", value: 84, target: 88, rangeStart: 62, rangeEnd: 91, unit: "%", note: "qualification depth", trace: [36, 52, 64, 71, 79, 84] }, ], } fuels: { title: "Fuels & Upstream", summary: "Fuel-path analysis links propellant availability, storage constraints, and injector behavior before a program commits to flight architecture.", bars: [ { label: "Methane supply compatibility", value: 78, target: 83, rangeStart: 52, rangeEnd: 88, unit: "%", note: "regional availability", trace: [22, 31, 46, 58, 69, 78] }, { label: "Kerosene retrofit readiness", value: 64, target: 70, rangeStart: 40, rangeEnd: 74, unit: "%", note: "legacy platforms", trace: [28, 35, 39, 52, 57, 64] }, { label: "Cryogenic storage stability", value: 88, target: 92, rangeStart: 66, rangeEnd: 95, unit: "%", note: "validated envelopes", trace: [45, 56, 68, 74, 83, 88] }, { label: "Injector response confidence", value: 92, target: 94, rangeStart: 70, rangeEnd: 97, unit: "%", note: "hot-fire data", trace: [48, 62, 73, 85, 89, 92] }, ], } hydrogen: { title: "H2 Hydrogen", summary: "Hydrogen programs require tight coordination between tankage, feed systems, ignition stability, and ultra-low-temperature operations.", bars: [ { label: "Hydrogen-ready turbopumps", value: 86, target: 90, rangeStart: 62, rangeEnd: 93, unit: "%", note: "design maturity", trace: [30, 46, 60, 71, 79, 86] }, { label: "LH2 feedline conditioning", value: 74, target: 82, rangeStart: 47, rangeEnd: 86, unit: "%", note: "ground systems", trace: [18, 29, 44, 58, 66, 74] }, { label: "Ignition stability range", value: 93, target: 95, rangeStart: 72, rangeEnd: 98, unit: "%", note: "transient control", trace: [54, 68, 75, 84, 90, 93] }, { label: "Zero-carbon flight pathway", value: 81, target: 87, rangeStart: 56, rangeEnd: 90, unit: "%", note: "program fit", trace: [24, 39, 55, 68, 76, 81] }, ], } ``` **Tab click behavior:** 1. On click, update `.is-active` class and `aria-selected` on all tab buttons. 2. Remove `.is-visible` from summary and `.is-ready` from chart. 3. After a 140ms delay: - Update summary text content. - Replace chart innerHTML with new chart-head, bars, and axis markup (using the dataset for the active tab). - On the next `requestAnimationFrame`, add `.is-visible` to summary and `.is-ready` to chart, triggering all staggered CSS animations. --- ## RESPONSIVE BREAKPOINTS **At 980px:** - Header becomes single column (`grid-template-columns: 1fr`). - Tabs become flex row with `overflow-x: auto`. Each tab: `flex: 0 0 min(260px, 76vw)`. - Bar rows become single column (`grid-template-columns: 1fr`, gap 10px). - Axis becomes single column. Left label `` hidden (`display: none`). **At 620px:** - H2 font: `clamp(26px, 8vw, 42px)`. - Chart: min-height auto, padding-bottom 46px. - Axis inner grid: `repeat(6, 1fr)` with every even `` hidden (showing 0, 20, 40, 60, 80, 100). --- ## GLOBAL STYLES **CSS custom property used:** `--hero-max-width: 1820px`, `--hero-blue: #7191d0`, `--hero-blue-soft: #aab8d5`. **Font stack:** `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`. **Color palette:** No purple or violet. Dark backgrounds `#111414` / `#171a1a`. Blue accents `#7191d0`, `#aab8d5`, `#8fb0ef`, `#d6e3ff`. Text `#f7f8f8` at various opacities.25:T2f9e,--- **PROMPT:** --- Build a "Features" section for a fintech landing page called "Kova" using React 18, TypeScript, Tailwind CSS 3, Framer Motion, and Lucide React. No purple/indigo colors. --- ## PREREQUISITE: FONTS Load these two web fonts in `index.html` inside ``: ```html ``` Add these CSS utility classes in `index.css` (outside Tailwind layers, after the `@tailwind` directives): ```css .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; } ``` --- ## PREREQUISITE: FADEUP ANIMATION COMPONENT Create a reusable `FadeUp` component (`src/FadeUp.tsx`) using Framer Motion's `motion.div`. **TypeScript interface:** ```ts interface FadeUpProps { children: ReactNode; delay?: number; // default 0 className?: string; immediate?: boolean; // default false } ``` **Variants object:** ```ts const variants = { hidden: { opacity: 0, y: 24, filter: 'blur(8px)' }, visible: { opacity: 1, y: 0, filter: 'blur(0px)' }, }; ``` **Shared transition:** `{ duration: 0.7, delay, ease: [0.25, 0.1, 0.25, 1] }` **Two modes:** - `immediate={true}`: uses `animate="visible"` (plays on mount) - `immediate={false}` (default, used in THIS section): uses `whileInView="visible"` with `viewport={{ once: true, margin: '-60px' }}` Both modes use `initial="hidden"`. --- ## COLOR PALETTE | Token | Hex | Usage | |---|---|---| | Primary dark green | `#08150C` | Heading text, dark card backgrounds, button bg | | Hover dark green | `#1a2e1f` | Button hover state | | Warm cream | `#FDF5EB` | Section background | | Light beige | `#EBE4DC` | Card 3 outer background | | Inner card bg | `#F4F1EC` | Card 3 inner content area + donut base circle | | Burnt orange | `#C46B2D` | Donut segment 1 | | Olive green | `#7A8C3E` | Donut segment 2 | | Sage green | `#A8B87A` | Donut segment 3 | | Warm gray | `#B8AFA4` | Donut segment 4 | Text colors: `text-white`, `text-white/80`, `text-stone-500`, `text-stone-700`, `text-stone-800` --- ## SECTION WRAPPER ```html

``` --- ## HEADER ROW Container: `flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 sm:mb-10` ### Heading (FadeUp delay=0) ```html

Designed to sharpen every decision

``` Font sizes: `text-2xl` (24px) on mobile, `sm:text-3xl` (30px) at 640px+, `md:text-4xl` (36px) at 768px+. Uses the Cooper BT Medium font via the `.font-cooper-medium` utility class. ### Button (FadeUp delay=0.1) ```html ``` - `text-sm` = 14px - `font-medium` = font-weight 500 - `rounded-xl` = 12px border radius (NOT rounded-full) - `self-start` on mobile (left-aligned), `sm:self-auto` on desktop (right-aligned by the `justify-between` parent) - Lucide `Play` icon at 13px, filled white, placed AFTER the text --- ## CARDS GRID Container: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4` - Mobile: 1 column - sm (640px+): 2 columns - lg (1024px+): 4 columns - Gap: `gap-4` = 16px All four cards share `rounded-2xl overflow-hidden aspect-[3/4]` (16px border radius, 3:4 portrait aspect ratio). --- ### CARD 1 — Smart Budgeting (FadeUp delay=0.05) ```html

Smart Budgeting

Let AI reshape how you plan your spending. Kova adapts to your...

``` - Fallback bg `bg-[#08150C]` shows while image loads - Background image is absolutely positioned, covering the full card - Gradient overlay: 3-stop, bottom-to-top: 80% opacity dark green at bottom, 20% in middle, transparent at top - Top-left label: icon + text in a pill shape, white text at `text-sm` (14px) - Bottom-left description: `text-white/80` (white at 80% opacity), `text-sm` (14px) on mobile, `sm:text-base` (16px) at 640px+ --- ### CARD 2 — Bank-Grade Security (FadeUp delay=0.15) Identical structure to Card 1, with these differences: - Fallback bg: `bg-stone-700` (instead of `bg-[#08150C]`) - Image src: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260517_061305_db631f5f-185f-4fda-a7a8-1dd7359ef2ea.png&w=1280&q=85` - Image alt: `"Bank-Grade Security"` - Icon: `` - Label text: **"Bank-Grade Security"** - Description: **"Keep your money safe with end-to-end encryption, live fraud alerts, and two-factor auth..."** --- ### CARD 3 — Spend Insights (FadeUp delay=0.25) This card is structurally DIFFERENT from the other three. It has NO background image, NO gradient overlay. It is a light-colored card with a donut chart visualization. ```html

``` **Top label:** ```html

Spend Insights

``` - Text and icon are `text-stone-700` (NOT white like the other cards) - `self-start` aligns the pill to the left - `mb-4` = 16px bottom margin **Inner content container:** ```html

``` - Takes up remaining vertical space via `flex-1` - Inner rounded container with lighter background `#F4F1EC` - `gap-3` = 12px between children **Title block** (inside inner container): ```html

Monthly Spend

1 Apr – 30 May 2026

``` - "Monthly Spend": `text-sm` (14px) mobile, `sm:text-base` (16px), `font-semibold` (600), `text-stone-800` - Date range: `text-xs` (12px) mobile, `sm:text-sm` (14px), `text-stone-500` **Donut chart wrapper:** ```html

``` - 112x112px on mobile, 144x144px at sm (640px+) **SVG donut chart:** ```html

50% of budget

``` - "50%": `text-lg` (18px) mobile, `sm:text-xl` (20px), `font-bold` (700), dark green `#08150C` - "of budget": `text-xs` (12px) mobile, `sm:text-sm` (14px), `text-stone-500` --- ### CARD 4 — Wealth Building (FadeUp delay=0.35) Identical structure to Card 2 (and Card 1), with these differences: - Fallback bg: `bg-stone-700` - Image src: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260517_061316_50e651f8-02d0-4add-9ddb-7d81d15ac02e.png&w=1280&q=85` - Image alt: `"Wealth Building"` - Icon: `` - Label text: **"Wealth Building"** - Description: **"Grow your net worth with tools that help you set targets, monitor gains, and act..."** --- ## LUCIDE REACT ICONS USED Import from `lucide-react`: - `Play` (header button, size 13, fill-white) - `Sparkles` (Card 1, size 16) - `ShieldCheck` (Card 2, size 16) - `PieChart` (Card 3, size 16) - `TrendingUp` (Card 4, size 16) --- ## COMPLETE ANIMATION DELAY MAP | Element | FadeUp delay | Mode | |---|---|---| | Section heading | `0` | scroll-triggered | | Watch Demo button | `0.1` | scroll-triggered | | Card 1 (Smart Budgeting) | `0.05` | scroll-triggered | | Card 2 (Bank-Grade Security) | `0.15` | scroll-triggered | | Card 3 (Spend Insights) | `0.25` | scroll-triggered | | Card 4 (Wealth Building) | `0.35` | scroll-triggered | All use `whileInView="visible"` with `viewport={{ once: true, margin: '-60px' }}`. Animation plays once when element scrolls into view (with a -60px inset margin trigger point). --- ## RESPONSIVE BREAKPOINT SUMMARY | Breakpoint | Grid | Heading | Body text | Donut size | Padding | |---|---|---|---|---|---| | Default (mobile) | `grid-cols-1` | `text-2xl` (24px) | `text-sm` (14px) | 112x112px | `py-14 px-5` | | sm (640px+) | `sm:grid-cols-2` | `sm:text-3xl` (30px) | `sm:text-base` (16px) | 144x144px | `sm:py-20 sm:px-10` | | md (768px+) | (still 2-col) | `md:text-4xl` (36px) | (same) | (same) | (same) | | lg (1024px+) | `lg:grid-cols-4` | (same) | (same) | (same) | `lg:px-20` | --- ## CRITICAL IMPLEMENTATION DETAILS 1. The section background `#FDF5EB` must match any adjacent sections for a seamless look -- no visible divider. 2. Cards 1, 2, and 4 share identical markup structure (image + gradient overlay + top label + bottom text). Only the image src, icon, label text, and description differ. 3. Card 3 is the only light-themed card -- it uses inline `style={{ backgroundColor: '#EBE4DC' }}` for the outer div and `style={{ backgroundColor: '#F4F1EC' }}` for the inner container (these are NOT Tailwind classes because they are custom hex values). 4. The `aspect-[3/4]` class on every card enforces a consistent 3-wide-by-4-tall portrait ratio across the grid. 5. All buttons use `rounded-xl` (12px), NOT `rounded-full`. 6. The gradient overlay on image cards is `bg-gradient-to-t from-[#08150C]/80 via-[#08150C]/20 to-transparent` -- this is a Tailwind gradient going from bottom (80% opaque dark green) through middle (20%) to top (fully transparent), ensuring bottom text remains readable over any image. 7. The donut SVG has `-rotate-90` on the `

...

``` ```css .pricing-top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px, 0.38fr) minmax(360px, 0.62fr); gap: clamp(42px, 8vw, 118px); max-width: 1320px; margin-inline: auto; } ``` #### Left: `.pricing-copy` ```html

Pricing

Only pay for cloud storage your teams actually use.

Scale capacity up for active projects and cool it down when workspaces go quiet. Nimbus Grid keeps storage, transfer, and policy costs visible before they become invoices.

``` ```css .pricing-copy h2 { max-width: 560px; margin-bottom: 54px; font-size: clamp(34px, 4vw, 68px); line-height: 1; } .pricing-copy p:not(.eyebrow) { max-width: 470px; color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.55; } ``` #### Right: `.pricing-table` ```html

Storage costs

Per month Per GiB

Encrypted active storage $0.021 / GiB / month

Warm collaboration tier $0.012 / GiB / month

Cold retained archive $0.004 / GiB / month

Regional accelerated transfer $0.018 / GiB moved

Customer-managed key vault included

``` ```css .pricing-table { display: grid; align-content: start; color: var(--muted); } .pricing-table-header, .pricing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; border-bottom: 1px solid rgba(255, 247, 222, 0.2); padding: 18px 0; } .pricing-table-header { padding-top: 0; } .pricing-table h3 { margin-bottom: 0; color: var(--ink); font-size: clamp(20px, 1.7vw, 28px); font-weight: 400; line-height: 1.2; letter-spacing: 0.0125rem; } .billing-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 247, 222, 0.1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02rem; } .billing-toggle span { padding-inline: 10px; color: rgba(255, 247, 222, 0.55); } .billing-toggle strong { padding: 7px 12px; border-radius: 999px; background: var(--accent); color: #241d0f; font-weight: 500; } .pricing-row span, .pricing-row strong { font-size: clamp(14px, 1.2vw, 18px); font-weight: 400; } .pricing-row strong { color: var(--ink); font-family: var(--font-mono); } ``` --- ### Part 2: `.pricing-plan-row` (3 plan cards) ```html

Starter

For small teams consolidating shared project files.

Start small

Team

For departments scaling collaboration and regional transfer.

Build team plan

Enterprise

For organizations prioritizing governance, residency, and support.

Talk to sales

``` ```css .pricing-plan-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(42px, 8vw, 120px); max-width: 1320px; margin: clamp(136px, 16vw, 224px) auto 0; padding-bottom: 6px; } .pricing-plan { width: min(300px, 100%); color: var(--ink); } .pricing-plan h3 { margin-bottom: 22px; font-size: clamp(20px, 1.8vw, 30px); font-weight: 400; line-height: 1.2; letter-spacing: 0.0125rem; } .pricing-plan p { margin-bottom: 24px; color: var(--muted); line-height: 1.55; } .pricing-plan a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(255, 247, 222, 0.24); border-radius: 999px; color: var(--ink); background: rgba(255, 247, 222, 0.08); font-family: var(--font-mono); font-size: 12px; line-height: 1rem; letter-spacing: 0.04rem; text-transform: uppercase; transition: border-color 160ms ease, background 160ms ease; } .pricing-plan a:hover { border-color: rgba(255, 247, 222, 0.48); background: rgba(255, 247, 222, 0.14); } ``` --- ### Part 3: `.pricing-bars` (the golden bars at the bottom) 12 full-bleed vertical bars aligned to the bottom edge, with scroll-driven height animation. ```html ``` Note the alternating pattern: regular, `.muted`, regular, `.muted`, etc. The 12 base heights are: `66%, 58%, 50%, 62%, 45%, 54%, 48%, 64%, 72%, 70%, 78%, 82%`. ```css .pricing-bars { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; width: 100vw; height: 480px; margin-top: 36px; margin-left: calc(50% - 50vw); } ``` **Fade overlay (dark gradient from top, fading bars into section background):** ```css .pricing-bars::before { content: ""; position: absolute; inset: -28% 0 0; z-index: -1; background: linear-gradient( 180deg, rgba(17, 18, 15, 0), rgba(17, 18, 15, 0.78) 36%, #11120f 100% ); pointer-events: none; } ``` This `::before` covers the top ~28% above and the top portion of the bars container, creating the effect where the bars fade from the dark section background into visibility as they descend. **Individual bar:** ```css .pricing-bar { height: calc(var(--bar-height) + var(--bar-morph, 0px)); min-height: 120px; background: radial-gradient(circle at 30% 18%, rgba(255, 247, 222, 0.32), transparent 26%), linear-gradient(180deg, rgba(234, 208, 154, 0.82), rgba(87, 76, 43, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 247, 222, 0.25); transition: height 80ms linear; } .pricing-bar.muted { background: radial-gradient(circle at 26% 20%, rgba(255, 247, 222, 0.24), transparent 28%), linear-gradient(180deg, rgba(201, 180, 124, 0.7), rgba(78, 69, 42, 0.38)); } ``` **Bar visual details:** - Each bar has a gold gradient from top to bottom. - A radial-gradient highlight near the top-left gives a specular/glow spot. - `box-shadow: inset 0 1px 0` creates a subtle bright top edge. - `.muted` bars use a slightly dimmer, cooler gold palette — giving the alternating light/dark bar pattern visible in the screenshot. - Bars have no gap between them (the grid columns are flush). - `min-height: 120px` ensures bars always have substance even at small percentages. --- ## JavaScript: Scroll-driven bar animation ```js const pricingSection = document.querySelector(".pricing-section"); const pricingBars = Array.from(document.querySelectorAll(".pricing-bar")); function updatePricingBars() { if (!pricingSection || !pricingBars.length) return; const rect = pricingSection.getBoundingClientRect(); const viewport = window.innerHeight || 1; const progress = Math.min(1, Math.max(0, (viewport - rect.top) / (viewport + rect.height) )); pricingBars.forEach((bar, index) => { const wave = Math.sin(progress * Math.PI * 2 + index * 0.72); const secondaryWave = Math.cos(progress * Math.PI + index * 0.34); const morph = Math.round(wave * 34 + secondaryWave * 14); bar.style.setProperty("--bar-morph", `${morph}px`); }); } window.addEventListener("scroll", updatePricingBars, { passive: true }); window.addEventListener("resize", updatePricingBars); updatePricingBars(); ``` **How the bar animation works:** - `progress` is 0 when the section enters the bottom of the viewport, and approaches 1 as you scroll past. - For each bar, two sinusoidal waves are computed, offset by the bar index (`index * 0.72` and `index * 0.34`). - `wave * 34 + secondaryWave * 14` produces a morph offset in the range of roughly -48px to +48px. - This value is written to `--bar-morph`, which is added to the base `--bar-height` via `calc()`. - The `transition: height 80ms linear` smooths the per-frame jitter into a fluid wave. - The result: bars gently undulate as you scroll, each offset from its neighbor, creating a rolling-wave effect across the 12 columns. --- ## Responsive Breakpoints ### `@media (max-width: 820px)` ```css .pricing-section { padding-top: 64px; } .pricing-top { grid-template-columns: 1fr; gap: 38px; } .pricing-copy h2 { margin-bottom: 28px; } .pricing-table-header, .pricing-row { grid-template-columns: 1fr; gap: 8px; } .pricing-bars { height: 480px; } .pricing-plan-row { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; } ``` At 820px: Pricing top stacks to single column (copy above table). Table rows become single column (label above value). Plan cards stack vertically. Bars stay at 480px. ### `@media (max-width: 520px)` ```css .pricing-bars { height: 480px; } .pricing-plan { width: min(280px, 100%); } .eyebrow { font-size: 12px; } ``` At 520px: Plan card max-width narrows. Eyebrow shrinks. Bars remain 480px. --- ## Project structure ``` index.html (section markup + font links) styles.css (all styles + media queries) script.js (scroll-driven bar morph) package.json (vite ^5.4.2, "type": "module", scripts: dev/build/preview) vite.config.js (default export) ```27:T23eb,Build a premium **Conference Dashboard** in **React + TypeScript + Vite + Tailwind** with a **liquid glassmorphism** aesthetic. Use **lucide-react** for icons. Use the **Inter** font family (weights 300, 400, 500, 600, 700) loaded from Google Fonts. ## Background Use two looping fullscreen background videos (autoplay, muted, loop, playsInline, object-fit: cover, fixed inset, z-index -1) — swap them based on dark/light theme. **No overlays.** - Light mode video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_103318_2aa26b55-df1a-43a6-903d-941e718c9366.mp4` - Dark mode video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_102933_4e8f73b5-775a-4179-b2fb-472f59063dcd.mp4` ## CSS Variables (`:root`) ``` --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.6); --glass-blur: 8px; --text-main: #1a1a1a; --text-muted: #6b7280; --accent: #000000; --card-radius: 40px; --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); ``` In `.dark-mode`: `--glass-bg: rgba(0,0,0,0.45)`; `--glass-border: rgba(255,255,255,0.08)`; `--text-main:#fff`; `--text-muted:#b0b0b0`; `--accent:#fff`. Body: Inter font, `height:100vh`, `padding:32px 40px`, `display:flex; flex-direction:column; overflow:hidden`, black fallback bg. ## Top Navigation (grid: auto auto 1fr auto auto, gap 16px, mb 40px) 1. **Profile button** — 48×48 circular avatar `https://i.pravatar.cc/100?u=current_user`. 2. **Toggle container** — pill containing: - **Mode switch** (88×48, white pill, inner blue track 76×40 `#3b82f6`, white 32×32 handle on right; in dark mode handle slides left via `transform: translateX(-36px)`; small icon `☾`/`☀` slides via `translateX(42px)`). - **Settings nav-btn** — pill, 10px 24px, `rgba(0,0,0,0.04)` bg with blur, white text. 3. **Meeting alert** (justify-self center) — white pill, `padding 6px 6px 6px 16px`, gap 12, shadow `0 4px 20px rgba(0,0,0,0.08)`. Contains: 32px host avatar `https://i.pravatar.cc/100?u=meeting_host`, label "Meeting is about to start", grey time-tag pill "-5:23" (`#f0f0f0`, 4px 10px), and a 32×32 close button with an SVG progress ring (gray track + black arc, `stroke-dasharray=88 stroke-dashoffset=25 rotate(-90)`) and a centered Lucide `X` (12px). Hidden on mobile. 4. **View switcher** — pill, `rgba(0,0,0,0.04)` bg, 4px padding, two buttons "Dashboard" and "Rooms"; active = white bg, black text, shadow `0 4px 12px rgba(0,0,0,0.1)`. Default active = "Rooms". 5. **Search button** — 48×48 circular, Lucide `Search`. ## Dashboard Grid (4 cols × 2 rows, 24px gap, max-width 1400px, fills available height) Card base: `padding:28px 20px`, flex column, `border-radius:40px`, hover `translateY(-3px) scale(1.01)`. ### Card 1 — Empty / Create Room (glass) - Translucent dark glass `rgba(0,0,0,0.18)` (light), `rgba(255,255,255,0.08)` (dark). - Centered Lucide `Plus` (32px) + label "Create a room", white text. ### Card 2 — Subscription Growth Experiments (solid white) - Title: "Subscription Growth Experiments" (1.35rem, weight 400, letter-spacing -0.03em). - Subtitle: "Sprint Retrospective". - Header icon: Lucide `Zap` (16px, opacity 0.5). - Footer: 3 overlapping 32px avatars (pravatar `u=1,2,3`, `margin-left:-12px`) + count badge "9" (38×38 circle, `rgba(0,0,0,0.08)`). ### Card 3 — Weekly Insights (solid white) - Title only: "Weekly Insights". - **Bar chart** (height 60px, `gap:2px`, `align-items:flex-end`): - First **24** bars are blue `#3b82f6` with heights: `35,45,30,55,40,65,50,75,60,85,70,80,65,55,45,70,60,75,55,65,50,75,60,55`. - Next **36** bars grey `#e5e7eb` with heights: `45,70,60,75,55,65,50,75,60,85,70,55,45,70,60,75,55,65,50,75,60,55,45,70,60,75,55,65,50,75,60,55,45,70,60,75`. - **Chart markers row** (`justify-content:space-between; padding:0 20px; margin-bottom:24px`): single 18px avatar `u=m1`, then group of two `u=m2`(margin-right -8) + `u=m3`, then group `u=m4`(-8) + `u=m5`. All have 1.5px white border. - Footer: two overlapping avatars `u=large1`, `u=large2`, plus 54×54 white play button (`rgba(245,245,245,0.85)`) with Lucide `Play` (20px, fill black). ### Card 4 — Product Strategy 2023 (glass, dark translucent) - Title "Product Strategy 2023" + subtitle "No upcoming meetings". - Header icon: Lucide `MoreHorizontal` (16px, opacity 0.5). - Footer: single 32px avatar `u=6` + count badge "32". ### Card 5 — User Onboarding Team (solid white) - Title "User Onboarding Team" + subtitle "Sprint Planning". - Header icon: Lucide `BarChart2`. - Footer: 3 overlap avatars `u=7,8,9` + badge "3". ### Card 6 — User & Market Research (glass) - Title "User & Market Research" + subtitle "No upcoming meetings". - Icon: `MoreHorizontal`. Footer: avatar `u=10` + badge "6". ### Card 7 — Core Product Team (solid white) - Title and subtitle both "Core Product Team". - Icon: Lucide `Video`. Footer: 2 overlap avatars `u=11,12` + badge "2". ### Card 8 — Screen Share (solid card-alt; gradient `linear-gradient(to bottom,#f4f4f4 0%, #ffffff 50%, #ffffff 100%)`) - Header row of two pill chips (justify start, gap 8): "Screen Share" (blue text `#3b82f6`) and "0:30" (black text). Both white pills, `padding:6px 14px; font-size:0.75rem; box-shadow:0 2px 8px rgba(0,0,0,0.06)`. - Horizontal scroll row (`overflow-x:auto; gap:12px; margin: 20px -20px 0; padding:0 20px 16px; hide scrollbar; cursor:grab; drag-to-scroll`): - 4 thumbnails 160×100, `border-radius:16px`, backgrounds `https://picsum.photos/seed/screen1..4/300/200`. - On thumbnail #2: bottom-right floating tag with 24px avatar `u=alice_av` + orange `#e05e36` pill labeled "Alice" (white text 0.65rem, 2px 8px, radius 100). - Footer: 2 avatars `u=13,14` + badge "8" (background `#F3F3F3`). ## Indicators (under grid) Three 12×12 dots, white, gap 16, `margin: 24px 0 120px`. First dot active (opacity 1); others opacity 0.3. ## Bottom Bar (fixed, centered, glass pill) `bottom:32px; left:50%; translateX(-50%); padding:10px 16px; border-radius:100px`. Contains active-participants row: - **Active speaker** 44×44 circle `u=speaker` with **voice indicator** badge (top-right -2/-2): white 18×18 circle with shadow containing **3 wave bars** (2px wide, grey `#4b5563`, animated via `@keyframes voice-wave` between 4px and 10px height, 1s ease-in-out infinite, delays 0/0.2s/0.4s). - 40×40 participant `u=p1` (opacity 0.7). - 40×40 participant `u=p2` with another voice indicator. - 40×40 participant `u=p3`. - "+17" 40×40 round chip `rgba(255,255,255,0.25)`, white bold. ## Components button (fixed bottom-left, 32px from edges) 44×44 rounded-rect (radius 14, `rgba(0,0,0,0.04)` blur), 2×2 grid of 4 small avatars `u=c1..c4`. ## Floating Controls (fixed bottom-right, 32px) Pill `rgba(0,0,0,0.04)`, padding 10px 14px, gap 12. Two 44×44 round buttons: - Video toggle: Lucide `Video` ↔ `VideoOff`. When off, bg `#ff4545`, white icon. - Mic toggle: Lucide `Mic` ↔ `MicOff`. When muted, bg `#ff4545`. Hover: `scale(1.08)`. ## Glass Utility ``` .glass { background: var(--glass-bg); backdrop-filter: blur(8px) saturate(1.8); border-radius: 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5); } .glass::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; filter:url(#noise-filter); opacity:0.06; mix-blend-mode:overlay; } ``` Inline an SVG `` using `feTurbulence baseFrequency=0.65 numOctaves=3 stitchTiles=stitch` + `feComposite operator=in in2=SourceGraphic` for the grain texture. ## Solid Card `background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.01)`. In dark: `rgba(26,26,26,0.98)` with white text. ## Animations / Transitions - All interactive elements: `transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1)`. - Card hover: `translateY(-3px) scale(1.01)` + larger shadow. - Theme-switch handle: `transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)`. - Voice waves: `voice-wave` keyframes (height 4px → 10px → 4px), 3 staggered bars. - Pulse-red keyframe available for emergencies (red ring expand-fade). ## State / Interactions - `isDark` toggles `body.dark-mode` and swaps the background `

Nexar

Technical Specifications

Kova Features

NimBus Pricing

Dashboard UI