NayePankh Foundation Website

A modern, responsive website for NayePankh Foundation built with Astro, Vue.js, and Tailwind CSS.

🎯 Project Overview

NayePankh Foundation is a student-led NGO dedicated to uplifting underprivileged communities through education, healthcare, and sustainable development. This website showcases our mission, impact, and ways to get involved.

Live Site: https://nayepankh.com

🚀 Tech Stack

• Framework: Astro - Fast, static site generation with island architecture
• Components: Vue.js 3 - Interactive components for forms, modals, etc.
• Styling: Tailwind CSS - Utility-first CSS framework
• Language: TypeScript - Type-safe development
• Hosting: Hostinger with CDN

📁 Project Structure

nayepankh/
├── src/
│   ├── pages/              # Auto-routed Astro pages
│   │   ├── index.astro     # Home page
│   │   ├── about-us.astro  # About page
│   │   ├── donate.astro    # Donation page
│   │   ├── contact-us.astro # Contact page
│   │   ├── team.astro      # Team page
│   │   └── our-certificates.astro # Certificates page
│   ├── layouts/            # Astro layout templates
│   │   └── BaseLayout.astro # Main layout wrapper
│   ├── components/         # Vue.js components
│   │   ├── Button.vue      # Reusable button component
│   │   ├── Card.vue        # Card component
│   │   ├── CTABlock.vue    # Call-to-action section
│   │   ├── NavBar.vue      # Navigation bar
│   │   ├── Footer.vue      # Footer
│   │   └── ContactForm.vue # Contact form
│   ├── config/             # Configuration files
│   │   ├── design.ts       # Design system tokens
│   │   └── site.ts         # Site configuration
│   ├── data/               # Content data files (JSON/MDX)
│   ├── assets/             # Images and static assets
│   │   └── images/
│   └── styles/             # Global styles
├── public/                 # Static files (favicon, etc.)
├── dist/                   # Build output (generated)
├── package.json
├── astro.config.mjs
├── tsconfig.json
├── tailwind.config.js
├── postcss.config.js
└── README.md

⚙️ Installation & Setup

Prerequisites

• Node.js >= 18.0.0
• npm or yarn package manager

Getting Started

1. Clone or navigate to the project:

   cd nayepankh

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

4. Build for production:

   npm run build

   The static site will be generated in the dist/ folder.

5. Preview production build:

   npm run preview

📝 Scripts

Command	Purpose
npm run dev	Start development server with hot reload
npm run build	Build optimized static site for production
npm run preview	Preview production build locally
npm run astro	Run Astro CLI commands
npm run lint	Lint TypeScript and Vue files
npm run format	Format code with Prettier

🎨 Design System

All design tokens are centralized in src/config/design.ts:

• Colors: Primary (Sky Blue), Secondary (Pink), Accent (Amber), Neutral palette
• Typography: Heading hierarchy (H1-H6), body text, captions
• Spacing: 8px base unit scale
• Shadows: xs to 2xl elevation levels
• Transitions: Fast (150ms), Base (200ms), Slow (300ms)

Tailwind Configuration

Tailwind is configured with:

• Custom color extensions
• Typography plugin for content styling
• Forms plugin for form controls
• Responsive breakpoints: xs, sm, md, lg, xl, 2xl

📄 Pages

Home (/)

• Hero section with CTA buttons
• About section (mission, vision, values)
• Impact metrics display
• Key initiatives cards
• Founder message
• Join/Donate CTA

About Us (/about-us)

• Organization story
• Focus areas (Education, Healthcare, Community, Youth)
• Why support section
• Join/Donate CTA

Donate (/donate)

• Donation amount selector
• Payment method options
• Impact visualization (what your donation does)
• Recurring donation option

Contact Us (/contact-us)

• Contact form with validation
• Contact information (email, phone, address)
• Social media links
• Map integration placeholder

Our Team (/team)

• Leadership team profiles
• Join our team CTA

Our Certificates (/our-certificates)

• Government registration info
• 80G certification details
• 12A certification details
• Verification instructions

🧩 Components

Button.vue

Reusable button component with variants and sizes.

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean

Card.vue

Flexible card component for displaying content with image, icon, and badge.

Props:

• title: string
• description: string
• image: string (optional)
• icon: string (optional)
• badge: string (optional)
• meta: Record<string, string | number> (optional)

CTABlock.vue

Call-to-action section with headline, subheadline, and buttons.

Props:

• headline: string
• subheadline: string (optional)
• buttons: Array of button config

ContactForm.vue

Form with validation for contact inquiries.

Features:

• Email validation
• Success/error messages
• Accessible form fields
• GDPR consent checkbox

🌐 Deployment

Deploy to Hostinger

1. Build the project:

   npm run build

2. Upload dist/ folder to Hostinger:

   • Use File Manager or SFTP
   • Set public root to the dist/ folder

3. Configure DNS:

   • Point domain to Hostinger nameservers
   • Enable HTTP/3 in Hostinger control panel

4. Enable CDN (optional):

   • Activate Hostinger CDN for faster delivery
   • Configure caching headers

Environment Variables

Copy .env.example to .env.local and configure:

PUBLIC_SITE_URL=https://nayepankh.com
PUBLIC_GOOGLE_ANALYTICS_ID=
PUBLIC_HOTJAR_ID=

🔄 Continuous Improvement

Phase 2 Enhancements (Future)

• Blog/Impact Stories section
• Dark mode support
• Email notification backend for contact form
• Payment processor integration (Razorpay/PayPal)
• Newsletter signup
• Analytics dashboard
• Donation impact tracking
• Testimonials carousel
• Multi-language support

📞 Support & Questions

For questions, issues, or suggestions:

• Email: contact@nayepankh.com
• Phone: +91-8318500748
• Address: Kanpur, UP, India

📄 License

This project is created for NayePankh Foundation. All rights reserved.

---

Built with ❤️ for NayePankh Foundation