RED DE MUJERES MX - Website

A beautiful, responsive website for RED DE MUJERES MX, a Mexican women's empowerment organization.

Features

✨ Responsive Design - Works perfectly on mobile, tablet, and desktop 🎨 Pastel Theme - Feminine, modern aesthetic with beautiful color palette 📱 Mobile-First - Optimized for all device sizes 🚀 Fast & Lightweight - Deployed via Nginx in Docker ♿ Accessible - Semantic HTML and accessibility best practices

Website Sections

1. Hero Banner - Stunning introduction with call-to-action
2. About Us - Mission and community focus
3. Services - Products and offerings
4. Courses & Workshops - Educational programs
5. Community - Connection and support network
6. Testimonials - Success stories
7. Contact - Get in touch

File Structure

red-mujeres-mx/
├── index.html          # Main website
├── styles.css          # Styling (pastel theme)
├── script.js           # Interactive features
├── images/             # Generated AI images
│   ├── 1-hero-banner.png
│   ├── 2-about-community-circle.png
│   ├── 3-services-products.png
│   ├── 4-courses-workshop.png
│   ├── 5-network-connection.png
│   ├── 6-success-testimonial.png
│   └── 7-footer-inspirational-field.png
├── Dockerfile          # Docker container config
├── docker-compose.yml  # Docker Compose setup
├── nginx.conf          # Web server config
└── README.md           # This file

Deployment

Local Development

1. Open index.html in your browser to preview

Docker Deployment

1. Build and run the container:

docker-compose up -d

2. Access the website:

• Local: http://localhost:8090
• Network: http://<your-server-ip>:8090

3. Stop the container:

docker-compose down

Deploy to Production

1. If using Nginx Proxy Manager:

# Connect container to the production network
docker network connect production red-mujeres-mx

2. Create a proxy host in Nginx Proxy Manager pointing to:
   • Host: red-mujeres-mx
   • Port: 80
   • Domain: yourdomain.com

Features

Responsive Navigation

• Hamburger menu on mobile devices
• Smooth scrolling navigation
• Auto-closing menu on link click

Contact Form

• WhatsApp integration (update phone number in script.js)
• Easy form submission
• Validation support

Images

All images are AI-generated using Replicate's Flux 2 Pro model with:

• Accurate aspect ratios (16:9 for banners, 1:1 for squares)
• Pastel color palette matching the theme
• Mexican cultural elements
• Professional quality

Customization

Update WhatsApp Number

Edit script.js line 39:

const phoneNumber = 'YOUR_PHONE_NUMBER_HERE';

Change Colors

Edit styles.css CSS variables (lines 2-8):

--pink: #FFB6D9;
--purple: #D4B5E8;
--blue: #B4D4FF;
--green: #B5E7A0;
--peach: #FFCBA4;

Update Contact Info

Edit index.html Contact Section with your actual details

Performance

• Gzip Compression: HTML, CSS, JS files compressed
• Static Asset Caching: Images cached for 30 days
• Security Headers: XSS, CSRF, and frame protection
• Health Checks: Automatic container health monitoring

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: 600px - 767px
• Small Mobile: 380px - 599px
• Extra Small: < 380px

License

© 2026 RED DE MUJERES MX. All rights reserved.

Support

For questions or issues, contact: contacto@redemujeresmx.com