Amie AI Note Taker Landing Page

Overview

This is a high-conversion landing page for Amie, an AI-powered note-taking and calendar application. It is an exceptional reference for builders because of its sophisticated "glassmorphism" dashboard UI, high-contrast typography, and a unique scrolling feature deck that effectively bridges the gap between marketing copy and product reality.

Design System

• Color Palette & Visual Hierarchy: The base is a clean #FFFFFF with secondary sections using soft off-whites (#F9FAFB) and subtle gradients. High-contrast accent colors define specific feature blocks: Azure Blue (#3B82F6) for primary actions and AI Chat, Emerald Green for Meeting Notes, and Soft Orange for Scheduling. Visual hierarchy is achieved through oversized, bold headers contrasted against muted text-secondary descriptions.
• Typography: The system relies on a bold, sans-serif font family (Inter or similar) with tight letter-spacing (tracking-tight). Display text uses a 2.5xl to 6xl scale. Highlighting is a core brand element, specifically the "without a bot" secondary-colored background span (rgba(255,215,0,0.3)).
• Page Structure:
  1. Hero: Left-aligned copy with dual CTA buttons and a centered glass-effect product screenshot.
  2. Social Proof: A grayscale, infinitely scrolling logo marquee.
  3. Themed Feature Blocks: Vertical sections defined by a specific accent color and icon type (e.g., Meeting Notes, AI Chat).
  4. Dynamic Steps: A "7-day achievement" grid that visualizes user success over time.
  5. FAQ: A clean, border-separated accordion list.
• Reusable Components:
  • Buttons: Rounded-xl corners with subtle shadows; the primary blue button features a slight gradient and sharp white text.
  • Notch UI: A unique floating container designed to mimic the macOS notch, adding a "native app" feel to the web experience.
  • Contextual Cards: Integration blocks (Slack, HubSpot) that use small-scale logos and clear labels.
• Interaction & Motion: The HTML indicates the use of framer-motion or similar for animate-scroll-x marquees. Most images are lazy-loaded with blur-up placeholders to maintain a premium feel during scroll.
• Implementation Clues: Built with Next.js and Tailwind CSS. It utilizes a sticky header with backdrop-blur-lg and bg-background/80 to maintain navigation visibility without cluttering the UI.

Use Cases

• Who should clone this: B2B SaaS founders, productivity tool developers, and AI startups who want to look established and "pro-level" with minimal custom illustration.
• What products can remix it: Calendar apps, CRM dashboard extensions, and automated transcription services. The "Replaces: [Logo List]" component is a particularly strong pattern for any disruptive tool.
• Practical remix directions:
  • Style Swap: Change the heavy rounded corners (rounded-xl) to sharp 2px corners for a more technical/developer-focused aesthetic.
  • Information Architecture: Adapt the 7-day "Today / Day 3 / Day 7" roadmap for onboarding documentation or pricing tier comparisons.
• Suggested clone scope: The Hero Section and Sticky Backdrop-blur Header are the highest value for quick clones. The Feature Grid with integrated Slack-style testimonials is excellent for building trust on secondary pages.