Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist landing page that showcases a blog and project management site. The application will be built with a focus on clean design and user-friendly navigation, allowing visitors to explore content seamlessly while providing a backend for managing blog entries and project details.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area featuring a captivating headline, subheadline, and a call-to-action button that encourages user engagement.
2. **Blog Management**: A backend system to create, read, update, and delete blog posts, allowing for easy content management.
3. **Project Showcase**: Section dedicated to displaying featured projects with descriptions, images, and links to detailed pages.
4. **Contact Form**: A user-friendly form to facilitate inquiries, ensuring easy communication between users and the site owner.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across devices from desktops to smartphones.

## 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 main layout will consist of a full-width hero section at the top, followed by a grid or card layout for blog posts and projects, and a simple contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand (as needed for state management).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Create Components**: Develop reusable UI components for the hero section, blog cards, project cards, and the contact form.
3. **Implement Routing**: Set up React Router for navigation between the home page and any detailed project or blog sections.
4. **Backend Setup**: Create a backend using a service like Firebase or a simple Node.js/Express server to handle blog post management.
5. **Connect Frontend and Backend**: Use Axios or Fetch API to connect the frontend with the backend for CRUD operations on blog posts.
6. **Styling and Responsiveness**: Apply Tailwind CSS classes to ensure a consistent and responsive design across all components.
7. **Testing**: Conduct thorough testing to ensure all functionalities work as intended and the design is consistent.

## USER EXPERIENCE
Key user interactions will include easy navigation through the site via the hero section, quick access to blog posts and project showcases, and a straightforward contact form for inquiries. The responsive design will ensure that users have a pleasant experience on any device, with smooth transitions and interactions throughout the application.