Comfort in Light Foundation - Website

A modern, responsive frontend website for Comfort in Light Foundation, a non-profit organization dedicated to empowering women, youths, and vulnerable individuals.

Features

• 🎨 Modern Design: Clean white backgrounds with brand color accents
• 📱 Fully Responsive: Mobile-first design that works on all devices
• ⚡ Fast Performance: Optimized with Vite and React
• 🎭 Smooth Animations: Scroll-triggered animations using Framer Motion
• ♿ Accessible: WCAG 2.1 AA compliant
• 🔍 SEO Friendly: Proper meta tags and semantic HTML

Tech Stack

• React 18 - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• React Router - Routing
• Framer Motion - Animations
• React Hook Form - Form handling
• Lucide React - Icons

Brand Colors

• Primary Green: #13362e
• Gold/Tan: #b79458
• Teal/Cyan: #47a5af
• White: #ffffff
• Light Gray: #f8f9fa

Getting Started

Prerequisites

• Node.js 16+ and npm/yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

The built files will be in the dist directory.

Project Structure

src/
├── components/
│   └── common/
│       ├── Navbar.jsx
│       ├── Footer.jsx
│       ├── Button.jsx
│       ├── Card.jsx
│       └── AnimatedSection.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Blog.jsx
│   ├── BlogDetail.jsx
│   └── Contact.jsx
├── App.jsx
├── main.jsx
└── index.css

Pages

• Home: Landing page with hero section, impact stories, and call-to-action sections
• About Us: Organization story, vision, mission, values, and team
• Blog: Blog listing with search and category filters
• Blog Detail: Individual blog post pages
• Contact: Contact form and information

Contact Information

• Phone: 08028461579
• Email: comfortinlight1@gmail.com

License

This project is proprietary and confidential.