Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Gremio Cofrade is a professional web platform and management system designed to modernize Hermandades and Cofradías. This system offers a comprehensive digital solution that includes a CRM, eCommerce functionalities, and an exclusive member portal, all tailored to preserve and enhance the cultural heritage of these organizations.

## CORE FEATURES
1. **Hero Section**: Captivating header with the title "Tradición Centenaria, Gestión del Siglo XXI" and the CTA "Auditoría Digital Gratuita" to drive user engagement.
2. **Data Section**: Animated counters showcasing achievements such as "75+ Hermandades Digitalizadas" and "20 Años de Experiencia."
3. **Services Grid**: Display three main services: CRM for managing members and fees, AI-powered historical preservation, and an integrated eCommerce platform.
4. **eCommerce Store**: A catalog with a hover effect, allowing users to purchase items like collectible cards and handcrafted ceramics, all with a seamless "Add to Cart" experience.
5. **Blog Section**: Informative posts presented in a parchment-style card layout, focusing on heritage stories and community updates.
6. **Member Portal**: Secure access for members featuring identity cards, fee status, and a payment gateway for annual dues.

## 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 landing page will follow a single-column layout with sections stacked vertically, including a sticky navbar, hero section, service grid, blog section, and a member portal link.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's context API for state management across the application.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui.
2. **Create a sticky navbar** that changes opacity on scroll and includes the "Modo Devocional" and "Modo Institucional" toggle.
3. **Develop the Hero Section** with the title, subtitle, and CTA button, ensuring it draws attention.
4. **Implement the Data Section** with animated counters using a library like React Spring or Framer Motion.
5. **Build the Services Grid** to showcase the three main offerings, ensuring each card is interactive and visually appealing.
6. **Design the eCommerce section**, incorporating product cards with hover effects and a toast notification for successful additions to the cart.
7. **Create the Blog Section** with articles displayed in parchment-style cards, allowing for easy reading and navigation.
8. **Develop the Member Portal**, ensuring secure login functionality and a dashboard that provides personalized user information.

## USER EXPERIENCE
Users will have a seamless experience navigating the Gremio Cofrade platform. The journey begins with a captivating hero section, encouraging them to explore services and engage with the community. The eCommerce area allows for easy browsing and purchasing, while the member portal provides essential tools for managing their involvement. Smooth scrolling and responsive design ensure accessibility across all devices.