Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a landing page for "Salient Educación", an innovative educational brand combining artificial intelligence, STEAM-focused methodologies, and practical strategies for teachers, parents, and students. The goal is to create a visually engaging and informative site that communicates the brand's mission and offerings while encouraging user interaction and conversion through clear calls to action.

# CORE FEATURES
1. **Hero Section**: Engaging introductory area with a headline, subtitle, and prominent call-to-action buttons to attract users' attention.
2. **Problem Statement**: A section outlining the limitations of traditional educational methods, establishing a connection with the audience by addressing their pain points.
3. **Modelo Salamandra**: A detailed overview of the innovative educational model, including key features and benefits, presented in an engaging format.
4. **Support Materials**: Resources designed for immediate application in classrooms and homes, targeting different audience segments (parents, teachers, students).
5. **Featured Product**: Highlighting a key ebook offering practical strategies for parents, with a call to action for immediate access.
6. **Final CTA**: Encouragement for users to begin transforming their learning experience with additional resources and information.

# 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**: A single-page layout with smooth scrolling between sections, featuring distinct areas for each core feature, ensuring easy navigation and visual appeal.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not necessary

# IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Structure**: Design the main layout to include a header, hero section, problem statement, Modelo Salamandra, support materials, featured product, final CTA, and footer.
4. **Develop Components**: Build reusable components for buttons, cards, and sections based on the design specifications.
5. **Implement Responsive Design**: Ensure the layout adapts seamlessly for mobile and desktop views with a hamburger menu for navigation on smaller screens.
6. **Add Animations**: Incorporate smooth scroll effects and micro-interactions for buttons and links to enhance user experience.
7. **Content Integration**: Populate each section with the specified text and visuals, ensuring alignment with the brand's tone and mission.
8. **Testing**: Conduct thorough testing across different devices and browsers to ensure functionality and responsiveness.

# USER EXPERIENCE
The user experience will focus on intuitive navigation and engaging content presentation. Users will be able to easily scroll through sections, with clear calls to action prompting further exploration of resources and solutions. Each interaction, from hovering over buttons to clicking on links, will provide responsive feedback, enhancing the overall engagement with the page.

Ask any questions you have before implementing. Start in plan mode