nexvo.ai - Cyber Serif Landing Page

# nexvo.ai - Cyber Serif Landing Page

{
  "summary": "A high-end, dark-themed AI platform landing page using a 'Cyber Serif' aesthetic. It balances traditional serif elegance with modern data visualization, glassmorphism, and neon emerald accents to communicate intelligence and scale.",
  "style": {
    "description": "The style is defined by its high-contrast dark mode (#050505) and a sophisticated typographic hierarchy. It pairs 'Newsreader' (serif) for evocative headlines, 'Inter' (sans) for readability, and 'Space Grotesk' (mono) for technical labels. Visual depth is achieved through glassmorphism (blur: 12px, border: 1px white/8), radial spotlights that follow the cursor, and subtle background grid patterns. Key animations use a heavy cubic-bezier(0.16, 1, 0.3, 1) to provide a premium, 'weighted' feel to transitions.",
    "prompt": "Create a design with a deep black (#050505) background and primary text in white (#EBEBEB). Use #10B981 (Emerald) as the primary accent color for icons, highlights, and status indicators. Typography: Headlines in 'Newsreader' (Light/Italic weights, font-size: 64px-96px), body text in 'Inter' (Light/Regular, 16px), and technical labels/badges in 'Space Grotesk' (Medium, 10px-12px, uppercase, letter-spacing: 0.2em). UI components must feature 'glassmorphism': background: rgba(255,255,255,0.02), backdrop-filter: blur(12px), border: 1px solid rgba(255,255,255,0.08). Implement a 'spotlight' hover effect on cards using a radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%). All transitions should use cubic-bezier(0.16, 1, 0.3, 1)."
  },
  "layout_and_structure": {
    "description": "The layout follows a modular section-based structure with a fixed navigation, high-impact hero, bento-style feature grids, and interactive data dashboard mockups.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Fixed header (height: 80px) with bg-bg/80 backdrop-blur-md and a thin 1px bottom border (white/5). Left: Logo with a 40px rounded icon and serif text. Center: Links in uppercase mono (12px, white/60). Right: Pill-shaped 'Request Demo' button with a border-white/10 and an emerald hover fill effect."
      },
      {
        "part": "Hero Section",
        "prompt": "Split-screen layout. Left: Large serif headline with italicized emerald-to-white gradient text. Include a technical badge (pilled, emerald border) above the title. Right: A floating, 2-degree tilted glassmorphism card depicting an AI interaction interface. Card includes active pulse indicators, grayscale candidate avatars, and a technical scoring dashboard at the bottom (3-column layout)."
      },
      {
        "part": "Feature Grid",
        "prompt": "Bento-style grid with 3 columns. Use 'spotlight' glass cards with 32px padding and 24px border-radius. Features include technical icons (Lucide-style) in emerald, serif titles (24px), and sans-serif body text (white/50). One card should span 2 columns and contain a micro-bar chart visualization with emerald and white bars."
      },
      {
        "part": "AI Logic/Chat Interface",
        "prompt": "Two-column section. Left: An interactive glassmorphism chat terminal. Show 'AI' and 'User' chat bubbles with distinct border styles. Include a 3-dot typing animation (emerald) and a 'RECORDING' status pulse. Right: Content section with a serif heading and a vertical list of features, each marked by a 40px circular icon that turns emerald on hover."
      },
      {
        "part": "Analytics Dashboard",
        "prompt": "Full-width section featuring a complex glassmorphism UI. Left sidebar: Technical categories in mono text. Main area: Statistics grid showing 4 key metrics (e.g., 'Avg Score', 'Time Saved') in monospace. Below: A data table with thin 1px borders, subtle hover highlights for rows, and progress bars indicating scores."
      },
      {
        "part": "Call to Action",
        "prompt": "Centered layout with a radial emerald glow background. Headline in Newsreader serif (72px). Primary button: White with black text, pill-shaped, with a strong outer white glow (shadow-[0_0_30px_rgba(255,255,255,0.3)]). Secondary button: Dark glassmorphism with white border."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Spotlight Card",
      "description": "A glass card that illuminates precisely where the user's cursor is located.",
      "prompt": "A container with overflow:hidden and a :before pseudo-element. On mousemove, update CSS variables --mouse-x and --mouse-y. The :before element should be a radial-gradient with a center at those coordinates, using white at 6% opacity fading to transparent at 40%. The border should also transition from rgba(255,255,255,0.08) to rgba(16,185,129,0.3) on hover."
    },
    {
      "component": "Technical Badge",
      "description": "A small, high-detail indicator used for metadata.",
      "prompt": "Height: 24px; Padding: 4px 12px; Border-radius: 9999px; Background: rgba(16, 185, 129, 0.05); Border: 1px solid rgba(16, 185, 129, 0.2); Text: #10B981; Font: Space Grotesk; Size: 10px; Letter-spacing: 0.2em; Case: Uppercase; Include a 6px pulsing emerald dot on the left."
    }
  ],
  "special_notes": "MUST maintain the high-contrast ratio between the #050505 background and #EBEBEB text. DO NOT use vibrant colors other than the Emerald (#10B981) accent. MUST use the specific cubic-bezier(0.16, 1, 0.3, 1) for all motion to avoid a 'cheap' or linear feel. MUST use the 1px white/5 or white/10 borders for containers to define space without heavy shadows."
}