Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a personal website for Rehan Qayoom Mir, an independent journalist from Kashmir. The website will serve as a creative online portfolio, showcasing his biography, social media links, an embedded Muckrack profile, a section for articles published in various international outlets, and a contact page. The primary goal is to create a unique, animated, and responsive site that reflects a clean and minimal editorial aesthetic.

## CORE FEATURES
1. **About Me Section**: A dedicated area detailing Rehan's background, expertise, and journalistic approach.
2. **Social Media Links**: Icons linking to Rehan's profiles on platforms such as Twitter, LinkedIn, and others for easy access.
3. **Muckrack Profile Embed**: An integrated view of Rehan's Muckrack profile to showcase his journalistic portfolio and credibility.
4. **Published Works Section**: A curated list of articles with links to works published on platforms like Yahoo Canada, Al Jazeera English, and more.
5. **Contact Page**: A simple contact form allowing visitors to get in touch with Rehan directly.
6. **Animation and Responsiveness**: Incorporate subtle animations and ensure the site is fully responsive across all devices for a seamless user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will be structured with a top navigation bar, a prominent hero section, followed by the main content areas (About, Social Media, Muckrack, Published Works), and a footer with the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified but can use React Context or Redux if needed for future scalability.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create Layout Components**: Develop the main layout structure, including a navigation bar, footer, and main content area.
4. **Implement Hero Section**: Design and code the hero section with a captivating introduction and call-to-action.
5. **Build About Me Section**: Create the section outlining Rehan's biography and journalistic mission.
6. **Add Social Media Links**: Integrate social media icons with links to external profiles.
7. **Embed Muckrack Profile**: Use an iframe or appropriate method to embed the Muckrack profile.
8. **Publish Works Section**: Create a grid or list layout for displaying articles, ensuring links open in new tabs.
9. **Develop Contact Page**: Implement a simple contact form with fields for name, email, and message.
10. **Incorporate Animations**: Add CSS animations for transitions and hover effects to enhance user interaction.
11. **Ensure Responsiveness**: Test and adjust styles to ensure the site looks great on all device sizes.
12. **Deploy the Website**: Choose a hosting platform (like Vercel or Netlify) for deployment.

## USER EXPERIENCE
Key user interactions will include easy navigation via the top bar, engaging animations that draw attention to important sections, and a straightforward contact form. Users will be able to seamlessly explore Rehan's works, learn more about him, and connect via social media or the contact page, all within a clean and professional interface that highlights his journalistic contributions.