Cross-Functional Collaboration Demo App

This is the Cross-Functional Collaboration Demo App, a premium React application designed to demonstrate how interactive prototypes can bridge the gap between teams.

🚀 How to Run

1. Open your terminal.
2. Navigate to the project directory:

   cd collaboration-app

3. Start the development server:

   npm run dev

4. Open the link shown in the terminal (usually http://localhost:5173).

✨ Key Features

1. Finance Scenario Planner

Goal: Align Finance and Operations on budget and capacity.

• Interactive Controls: Adjust "Starting Headcount", "Infrastructure Scale", and "Marketing Budget" using sliders.
• Real-Time Projections: Watch the "Budget vs Revenue" area chart update instantly as you change variables.
• Key Metrics: Track Annual Revenue, OpEx, Headcount, and Net Margin with trend indicators.
• AI Insights: Dynamic text explaining the impact of your changes (e.g., "Increasing marketing spend could improve net margin...").

2. Marketing Attribution Model

Goal: Align Marketing and Product on feature priorities.

• Attribution Charts: Visualize user acquisition by channel (Organic, Paid Social, Referral, Direct).
• Interactive Filtering: Click on a channel bar (e.g., "Referral") to filter the "Feature Priority" list.
• Dynamic Prioritization: See how different channels value different features (e.g., Referral users love "Team Collaboration", while Paid Social users want "Mobile App").

🎨 Design & Tech Stack

• React + Vite: Fast, modern frontend framework.
• Tailwind CSS: Premium styling with a custom dark mode theme (bg-dark-bg, text-dark-text).
• Glassmorphism: Used glass-card utility for a sleek, modern look.
• Framer Motion: Smooth entry animations and transitions.
• Recharts: Interactive, responsive charts.
• Lucide React: Clean, consistent iconography.

📂 Project Structure

• src/components/Layout.jsx: Main layout with sidebar navigation.
• src/pages/FinanceScenario.jsx: The Finance tool logic and UI.
• src/pages/MarketingAttribution.jsx: The Marketing tool logic and UI.
• src/index.css: Custom Tailwind configuration and glassmorphism classes.

Generated via Vibe Coding

This application was built using Vibe Coding with the following prompt:

Create an app to show Enhanced cross-functional collaboration becomes possible when team members can create working prototypes to communicate ideas rather than relying on abstract presentations. A finance director builds a scenario planning tool that lets the operations team test different capacity models by adjusting variables in real-time, seeing immediate impact on budget forecasts. When marketing discovers a new customer acquisition channel, they create an interactive attribution model that product teams use to prioritize feature development based on actual user behavior patterns.