Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a high-end, mobile-first personal branding landing page designed to function as a digital business card for an employee. It aims to present professional information clearly and concisely, allowing quick interactions when shared via QR code.

## CORE FEATURES
1. **Sticky Header**: A small company logo on the left and a high-contrast "Save Contact" button on the right for easy access.
2. **Hero Section**: Displays a professional circular headshot, the employee's name (H1), and their professional title alongside a succinct one-sentence value proposition.
3. **Quick Action Bar**: A row of four interactive icon-buttons for immediate actions: [Call], [Email], [Text], and [WhatsApp].
4. **About & Bio**: A brief professional story section with two paragraphs and a "Read More" toggle to maintain a clean mobile layout.
5. **Meeting Integration**: An embedded scheduling widget (Calendly placeholder) for booking a 15-minute sync.
6. **Portfolio/Links Grid**: A 2x2 grid of cards featuring external links: [LinkedIn], [Company Website], [Recent Project], and [Portfolio].
7. **Contact Download**: A prominent button at the bottom labeled "Download VCF / Add to Contacts" for easy saving.
8. **Share My Card**: A button that triggers a pop-up with a high-resolution QR Code linking to the current URL.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability.
- **Layout**: 
  - **Header**: Fixed at the top with logo and action button.
  - **Hero Section**: Centered circular headshot with name and title, followed by the value proposition.
  - **Quick Action Bar**: Horizontally placed buttons directly beneath the hero section.
  - **About & Bio**: Below the quick action bar, with a toggle for additional details.
  - **Meeting Integration**: Positioned below the About section seamlessly.
  - **Portfolio/Links Grid**: A clean 2x2 layout of cards for quick navigation.
  - **Contact Download**: Full-width button at the bottom of the page.
- **Typography**: Use Inter or Montserrat for professional appearance, with a clear hierarchy (H1 for name, H2 for titles, body text for descriptions).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and customizable design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management or a context API if global state is necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Header Component**: Implement a sticky header with logo and "Save Contact" button functionality.
3. **Design Hero Section**: Add the circular headshot, name, title, and value proposition using responsive design principles.
4. **Build Quick Action Bar**: Create icon-button components for [Call], [Email], [Text], and [WhatsApp] that trigger respective actions.
5. **Develop About & Bio Section**: Implement the professional story with a toggle feature for expanded view.
6. **Integrate Meeting Scheduler**: Embed the Calendly widget for scheduling meetings.
7. **Design Portfolio/Links Grid**: Create a responsive 2x2 grid layout for external links with clickable cards.
8. **Add Contact Download Button**: Implement a full-width button that facilitates downloading the VCF file.
9. **Create QR Code Functionality**: Develop the "Share My Card" button to generate a pop-up with a high-resolution QR Code linking to the current URL.
10. **Animate Interactions**: Add smooth fade-in animations and subtle button hover effects for improved user experience.

## USER EXPERIENCE
Key interactions include:
- Users can easily navigate the page using the sticky header and quick action buttons for immediate contact options.
- The "Read More" toggle keeps the mobile view clean while providing additional information when desired.
- The meeting scheduling and external links are easily accessible, promoting user engagement.
- The QR Code feature allows users to share their digital business card seamlessly, enhancing networking opportunities. 

This comprehensive prompt will guide the creation of a fully functional minimalist light application that aligns with your vision for a personal branding website.