FEC Landing Page

Astro, TailwindCSS

Main project image

I developed the landing page for Fundación Embajadores Comunitarios (FEC), an NGO empowering young leaders from vulnerable communities. The site presents their mission, programs, and achievements with a modern, responsive design.

Visit the project ↗

Table of Contents

  1. Overview
  2. Role
  3. Challenge
  4. Goal
  5. Solution
  1. Challenges and Learnings
  2. Final Thoughts

Overview

Fundación Embajadores Comunitarios (FEC) is a non-profit organization that empowers youth from vulnerable communities through education and leadership programs.

For their new phase, I built the official landing page, designed to communicate their mission, showcase their programs, and highlight their impact. The site was created using Astro and TailwindCSS, delivering fast performance and excellent mobile compatibility.

👨‍💻 Role

Frontend Developer Responsible for the full development of the landing page and implementation of the design.

❓ Challenge

FEC needed:

  1. A modern website to reach donors and partners.
  2. A fast, mobile-friendly site to connect with their community.
  3. A clear structure to present their mission and achievements.

🎯 Goal

  1. Build a clean and professional landing page.
  2. Help FEC increase its online visibility and credibility.
  3. Use an efficient tech stack to deliver a high-performance site.

Landing FEC

✨ Solution

Tech Stack

Key Features

  1. Modern Design: Clean layout with impactful visuals.
  2. Fully Responsive: Optimized for mobile, tablet, and desktop.
  3. Clear Call to Actions: Helping users connect or support the foundation.
  4. Fast Loading: Thanks to Astro’s static rendering and lightweight code.

User Flow

  1. First Visit: Users learn about FEC’s mission and values.
  2. Explore Programs: Clear sections about their projects and achievements.
  3. Get Involved: Easy navigation to support, donate, or connect.

⚙️ Challenges and Learnings

  1. Content Organization: Structuring information for both donors and the community.
  2. Performance Optimization: Keeping load times fast on all devices.
  3. Brand Consistency: Aligning the design with FEC’s mission and identity.

✨ Final Thoughts

  1. Purpose-Driven Design: A well-structured site helps amplify the impact of social organizations.
  2. Astro + TailwindCSS: A powerful combo for building fast and responsive websites.
  3. Adaptability: Balancing performance with design details was key to success.