Cursor rule

1---
2globs: src/components/*.astro,src/layouts/*.astro,src/pages/*.astro,src/pages/*/*.astro
3---
4 
5# Astro Component Development Guidelines
6 
7## Component Structure
8Follow this structure for all [.astro components](mdc:src/components/):
9 
10```astro
11---
12// TypeScript frontmatter
13import type { Props } from './types';
14import { getTranslation } from '@/i18n';
15 
16interface ComponentProps {
17  // Define props with TypeScript
18}
19 
20const { prop1, prop2 } = Astro.props;
21const t = getTranslation(Astro.currentLocale);
22---
23 
24<!-- HTML template with Tailwind classes -->
25<section class="container mx-auto px-4">
26  <h2>{t.section.title}</h2>
27  <!-- Component content -->
28</section>
29 
30<style>
31  /* Component-scoped CSS if needed */
32</style>
33```
34 
35## Key Patterns in JAMCAM Components
36 
37### Carousel Components
38- Use [Carousel.astro](mdc:src/components/Carousel.astro) for image galleries
39- Support both desktop and mobile layouts
40- Implement smooth scrolling and touch gestures
41 
42### Section Components  
43- Prefix section components with descriptive names (e.g., [AboutSection.astro](mdc:src/components/AboutSection.astro))
44- Use consistent container classes: `container mx-auto px-4`
45- Include proper semantic HTML (section, article, aside)
46 
47### Card Components
48- Follow [InfoCard.astro](mdc:src/components/InfoCard.astro) patterns for consistent styling
49- Use Tailwind for responsive designs
50- Include hover effects and proper accessibility
51 
52### Layout Components
53- [Banner.astro](mdc:src/components/Banner.astro) handles page headers with localized images
54- [Header.astro](mdc:src/components/Header.astro) and [Footer.astro](mdc:src/components/Footer.astro) for site-wide elements
55- [LanguageSwitcher.astro](mdc:src/components/LanguageSwitcher.astro) for i18n navigation
56 
57## Performance Considerations
581. **Optimize images** using Astro's image optimization
592. **Lazy load** content below the fold
603. **Minimize JavaScript** - leverage Astro's static generation
614. **Use WebP format** for images when possible
625. **Implement proper caching** headers for assets
63 
64## Accessibility Requirements
65- Use semantic HTML elements
66- Include proper ARIA labels and descriptions
67- Ensure keyboard navigation works
68- Test with screen readers
69- Maintain color contrast ratios
70- Provide alt text for all images
71 
72## Colombian Scouting Branding
73- Use official colors and typography from [global.css](mdc:src/styles/global.css)
74- Include scout logos: [logo-scouts-colombia.png](mdc:public/images/logo-scouts-colombia.png), [logo-world-scouting.png](mdc:public/images/logo-world-scouting.png)
75- Follow brand guidelines for JAMCAM logo usage
76- Respect Colombian cultural elements in design choices
77description:
78globs:
79alwaysApply: false
80---
81