Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "Compare My Price" landing page is designed to provide users with an easy way to compare electricity contracts in Sweden. The site will serve as a straightforward and independent comparison tool that helps consumers find the best electricity deals, all while being free of charge. there should only be 10 bolag, to choose from.

## CORE FEATURES
1. **Hero Section**: A prominent introduction to the service, highlighting the value of comparing electricity prices with a clear call to action (CTA) button to start comparing.
2. **Comparison Tool**: A section that displays current electricity prices from various providers, allowing users to view and select the best options available.
3. **Step-by-Step Guide**: A simple explanation of how to compare and switch electricity contracts, divided into three easy steps.
4. **FAQ Section**: Answers to common questions regarding electricity contracts and the service itself, ensuring users have the information they need.
5. **About Us & Contact Information**: A brief introduction to the company and its mission, along with contact details for user inquiries.
6. **Partner Listings**: A section showcasing partnered electricity providers, reinforcing the credibility and range of options available to users.

## 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 include a hero section at the top, followed by the comparison tool, step-by-step guide, FAQ, about us section, and partner listings, all organized in a vertically scrollable format for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple landing page

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and other necessary dependencies.
2. **Create Main Components**:
   - **Hero Section**: Implement with a background image, title, description, and a prominent CTA button.
   - **Comparison Tool**: Design a table component to display electricity providers, prices, and contract types.
   - **Step-by-Step Guide**: Create a simple list or card layout to outline the three steps for users to follow.
   - **FAQ Section**: Develop an accordion or collapsible component to display frequently asked questions.
   - **About Us & Contact**: Design a clean section with text and contact form elements.
   - **Partner Listings**: Implement a grid or card layout to showcase partnered electricity companies.

3. **Styling**: Apply Tailwind CSS classes to all components to ensure a cohesive minimalist design that adheres to the specified design specifications.
4. **Responsive Design**: Ensure that all components are responsive across different device sizes using Tailwind's responsive utilities.
5. **Testing**: Conduct user testing to gather feedback on the layout, usability, and overall experience of the landing page.
6. **Deployment**: Deploy the landing page using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Users will land on a clean and inviting page that immediately conveys the service's value. They will be able to scroll through the hero section, view and compare prices, follow simple steps to switch contracts, and find answers to their questions easily. The design will ensure intuitive interactions, enhancing user engagement and encouraging them to take action on their electricity contracts.