Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a portfolio website for Jayakumar Rajaretnam ("JK"), a seasoned Data & AI Strategy leader with over 20 years of experience across 9 countries. The website will showcase his expertise, projects, and publications, serving as a personal brand presence that highlights his professional journey and accomplishments.

## CORE FEATURES
1. **Hero Section**: A full-screen introductory area featuring "JK" prominently, along with a subtitle that highlights his expertise and a call-to-action button to view his work.
2. **Service Quick Nav**: Four interactive service cards that provide quick access to his primary areas of expertise: Data Strategy, Analytics & AI, CDP Implementation, and Agentic AI.
3. **About Teaser**: A two-column layout that includes a brief bio snippet alongside three engaging fact cards that encapsulate JK's persona.
4. **Featured Project Showcase**: A visually distinct card highlighting his key project, "AI Readiness Assessment," with an amber gradient for emphasis.
5. **Testimonials Section**: A collection of 2-3 placeholder quote cards to provide social proof and insights from colleagues or clients.
6. **Blog Teaser**: A preview area for three recent blog posts to keep visitors engaged with JK's thoughts and insights.

## 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.
- **Layout**: 
  - Full-width hero section at the top.
  - Followed by a grid layout for service cards.
  - A two-column section for the about teaser.
  - Featured project and testimonials sections stacked vertically.
  - Blog teaser and world map CTA at the bottom.
- **Typography**: 
  - Headings: Playfair Display (serif, elegant)
  - Body: Inter (sans-serif)
  - Mono: JetBrains Mono

## TECHNICAL REQUIREMENTS
- **Framework**: Next.js with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **Animations**: Framer Motion for smooth transitions and interactions
- **Icons**: lucide-react for user interface elements
- **Theme Management**: next-themes for dark mode implementation

## IMPLEMENTATION STEPS
1. **Set up Next.js Project**: Initialize a new Next.js project using TypeScript.
2. **Install Dependencies**: Include Tailwind CSS, shadcn/ui components, Framer Motion, lucide-react, and next-themes.
3. **Create Global Layout**: Implement a fixed navigation bar with a blurred background on scroll, including mobile-responsive hamburger menu and theme toggle.
4. **Build Home Page**: 
   - Develop the hero section with a large title and subtitle.
   - Implement quick nav cards for services.
   - Add an about teaser with a bio and fact cards.
   - Create the featured project showcase.
   - Integrate testimonial cards.
   - Add a blog teaser section at the bottom.
5. **Design Responsive Components**: Ensure all components are mobile-friendly and maintain a clean layout across devices.
6. **Implement Interactive Elements**: Use Framer Motion for animations and react-simple-maps for the interactive world map.
7. **Set Up Contact Form**: Utilize react-hook-form and zod for form validation and submission handling.
8. **Deploy**: Host the website on a platform like Vercel for easy access and demonstration.

## USER EXPERIENCE
The website will allow users to easily navigate through JK's professional journey, services, and insights. The hero section will capture attention immediately, while the quick nav cards will facilitate quick access to his main services. The interactive world map will provide a dynamic way for visitors to explore his global experience, and the contact form will enable potential clients or collaborators to reach out seamlessly. The overall experience will focus on clarity, professionalism, and user engagement through thoughtfully designed interactions and animations.