Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a professional, mobile-first digital business card and personal branding microsite designed to provide quick access to an employee's essential information and ways to connect. The site will serve as a sleek, modern landing page optimized for sharing via QR code, allowing users to download contact information swiftly and engage through various communication channels.

## CORE FEATURES
1. **Sticky Header**: A compact header featuring the company logo on the left and a prominent "Save Contact" button on the right for easy access.
2. **Hero Section**: A professional circular headshot accompanied by the employee's name (H1) and title, along with a succinct value proposition to convey their professional expertise.
3. **Quick Action Bar**: An interactive row with four icon-buttons for immediate actions: [Call], [Email], [Text], and [WhatsApp].
4. **About & Bio**: A brief narrative detailing the employee’s professional journey, with a "Read More" toggle to maintain a clean mobile interface.
5. **Meeting Integration**: An embedded scheduling widget for booking a quick 15-minute meeting, enhancing user engagement.
6. **Portfolio/Links Grid**: A 2x2 grid layout of cards linking to external platforms such as LinkedIn, the company website, recent projects, and a portfolio.
7. **Contact Download**: A full-width button that allows users to download a VCF file to easily add the employee's contact details to their address book.
8. **Share My Card**: A button that generates a high-resolution QR code linking back to the current URL for seamless sharing.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - A clean and simple design with ample whitespace, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a professional appearance.
- **Layout**: The layout will feature a sticky header at the top, followed by a hero section, quick action bar, about section, scheduling widget, links grid, and a contact download button at the bottom. The buttons will be large enough for easy interaction on mobile devices.
- **Typography**: Use of professional fonts such as Inter or Montserrat for clarity and modern appeal, maintaining a clear hierarchy with H1 for the name and H2 for titles.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a responsive and dynamic user interface.
- **Styling**: Tailwind CSS to facilitate rapid design development and maintain a cohesive aesthetic throughout the application.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalistic design approach.
- **State Management**: React's built-in state management for handling interactions such as toggling the "Read More" section and managing the QR code pop-up.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Sticky Header**: Develop the header component with the logo and "Save Contact" button, ensuring responsiveness.
3. **Build the Hero Section**: Create a hero component that displays the headshot, name, title, and value proposition, ensuring proper alignment and spacing.
4. **Implement the Quick Action Bar**: Create interactive buttons for [Call], [Email], [Text], and [WhatsApp], applying hover effects using Tailwind CSS.
5. **Design the About & Bio Section**: Implement a toggle feature to show/hide the extended bio content, focusing on user-friendly interaction.
6. **Integrate the Meeting Scheduler**: Embed a Calendly widget (or a placeholder) for scheduling meetings with clear labeling.
7. **Construct the Portfolio/Links Grid**: Design a grid layout for external links, ensuring responsiveness and easy navigation.
8. **Add Contact Download Functionality**: Implement a full-width button for downloading the VCF file, ensuring it functions correctly on both mobile and desktop.
9. **Create the Share My Card Feature**: Develop a button that generates a QR code linking to the current URL, displayed in a pop-up for easy sharing.

## USER EXPERIENCE
The user experience focuses on quick access and seamless interactions. Users can easily navigate through the sticky header, engage with action buttons, and read the bio with a simple toggle. The scheduling feature encourages direct engagement, while the portfolio grid provides links to the employee's digital presence. The "Share My Card" functionality enhances networking opportunities, making the microsite a powerful tool for personal branding. The overall design ensures a smooth flow, even on mobile devices, prioritizing user convenience and accessibility.