Prompt:

Build a sleek, modern, dark-mode React application for a product called Preplot.ai. Preplot is a vertical AI agent for sales, marketing, and finance that uses a "plan-then-execute" paradigm. Instead of immediately generating output, it connects to your tools, asks clarifying questions, proposes a structured plan, and only executes once you approve it.

Use Tailwind CSS for styling, lucide-react for icons, and motion/react (Framer Motion) for smooth animations. The app should have two main views: a Landing Page and an Interactive Demo.

1. Landing Page:

• Vibe: Dark theme (bg-zinc-950), professional, tech-forward, with subtle ambient indigo glows (bg-indigo-500/30 with blur-3xl).
• Hero Section: Headline should be "Stop guessing. Start planning." with a descriptive subheadline about connecting CRMs and docs to build structured plans before execution. Include a "Launch Interactive Demo" button.
• Visual Preview: Next to the hero text, build a static, stylized preview card of the chat interface. Show a mock conversation where the agent flags missing data from Salesforce, the user clarifies, and the agent outputs a "Proposed Plan of Attack" with a checklist.

2. Interactive Demo (The Core App):

• Layout: A full-screen dashboard with a left sidebar and a main chat area.
• Sidebar: Display a "Connected Sources" section listing Salesforce, Notion, and Google Drive (with little green status dots indicating they are connected). Below that, show a "Recent Plans" list.
• Chat Interface: A conversational UI with a message input fixed at the bottom. Use distinct styles for user messages (indigo bubbles, right-aligned) and agent messages (dark zinc bubbles, left-aligned with a brain icon).
• Simulated Interactive Flow (Crucial):
  • Initial State: The agent starts with: "Hi there. I'm connected to your Salesforce CRM, Notion workspace, and Google Drive. What are we trying to accomplish today?"
  • Turn 1 (User types anything): Show a typing indicator (bouncing dots), then the agent replies: "I see you want to launch a new outbound campaign for the Enterprise segment. Before I draft anything, I noticed the 'Enterprise Target List Q3' in Salesforce hasn't been updated in 2 weeks. Should we use the current list, or wait for the sales ops team to refresh it?"
  • Turn 2 (User types anything): Show typing indicator, then the agent replies: "Got it. We'll proceed with the current list but filter out any accounts marked 'Closed-Won'. Here is my proposed plan of attack. Review it, and if we're aligned, I'll execute."
  • The Plan UI: Along with the Turn 2 message, render a custom "Execution Plan" card. It should list 4 steps: 1. Filter Target List, 2. Draft Email Sequence, 3. Review Brand Voice, 4. Stage in Outreach. Include an "Approve & Execute" button on this card.
  • Execution Animation: When the user clicks "Approve & Execute", disable the chat input and simulate the agent working. Iterate through the 4 steps one by one, changing their status icons from a pending circle, to a spinning loader (lucide-react Loader2), to a green checkmark.
  • Completion: Once all steps are checked, the agent sends a final message: "Execution complete. The sequence is staged in Outreach and ready for your final review. I've logged all decisions and drafts in the project Notion page."

3. Polish & Details:

• Use motion.div to animate messages sliding up and fading in.
• Auto-scroll the chat to the bottom when new messages appear.
• Disable the input field while the agent is typing or executing the plan.
• Ensure the typography uses the 'Inter' font and feels premium (use tracking-tight for headings, leading-relaxed for body).