Aasha Foundation — NGO Impact Platform

/
├── Hero
├── About
├── Services
├── Why Choose Us
├── Stats
├── Initiatives
├── Justice & Sustainability
├── Steps to Action
├── Focused Actions
├── Exclusive Course
├── Testimonials
├── Volunteer Impact
├── Blog
└── Final CTA

// components/MagneticButton.tsx
'use client';

import React, { useRef, useState } from 'react';
import { motion } from 'motion/react';

export function MagneticButton({ children, className }: MagneticButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouse = (e: React.MouseEvent<HTMLButtonElement>) => {
    const { clientX, clientY } = e;
    const { left, top, width, height } = ref.current!.getBoundingClientRect();
    const middleX = clientX - (left + width / 2);
    const middleY = clientY - (top + height / 2);
    setPosition({ x: middleX * 0.4, y: middleY * 0.4 });
  };

  const reset = () => setPosition({ x: 0, y: 0 });

  return (
    <motion.button
      ref={ref}
      onMouseMove={handleMouse}
      onMouseLeave={reset}
      animate={{ x: position.x, y: position.y }}
      transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.1 }}
      className={className}
    >
      {children}
    </motion.button>
  );
}

// app/page.tsx
const { scrollYProgress } = useScroll();
const scaleImage = useTransform(scrollYProgress, [0, 0.2], [1, 1.1]);
const y1 = useTransform(scrollYProgress, [0, 1], [0, -150]);
const y2 = useTransform(scrollYProgress, [0, 1], [0, 150]);

// Applied to background elements for depth
<motion.div style={{ y: y1 }} className="floating-element-1" />
<motion.div style={{ y: y2, scale: scaleImage }} className="floating-element-2" />

// components/AIChatBot.tsx
const SYSTEM_INSTRUCTION = `
You are the "Aasha Impact Assistant", a friendly and professional AI representative...

Key Information about Aasha:
- Mission: Empowering communities through education, sustainable development...
- Vision: A self-reliant, sustainable and dignified society.
- Impact: 3,500+ active volunteers, 250+ projects completed, 12,000+ lives impacted.
- Programs: Skilling Bodoland Initiative, Resilient Futures, O1 Weaves...
- Focus: Women empowerment, healthcare, education for all...
`;

async function handleSendMessage() {
  if (!ai || !input.trim()) return;
  
  setMessages(prev => [...prev, { role: 'user', text: input }]);
  setIsLoading(true);
  
  const response = await ai.models.generateContent({
    model: 'gemini-2.0-flash',
    contents: [{ role: 'user', parts: [{ text: input }] }],
    config: {
      systemInstruction: SYSTEM_INSTRUCTION,
    },
  });
  
  setMessages(prev => [...prev, { role: 'bot', text: response.text }]);
  setIsLoading(false);
}

// components/ImpactCharts.tsx
export function ImpactCharts() {
  const pieData = [
    { name: 'Education', value: 35, fill: '#c49a3b' },
    { name: 'Healthcare', value: 25, fill: '#a67c2e' },
    { name: 'Livelihood', value: 20, fill: '#d4a94b' },
    { name: 'Environment', value: 15, fill: '#8b6914' },
    { name: 'Disaster Relief', value: 5, fill: '#6b5210' },
  ];

  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={pieData}
          cx="50%"
          cy="50%"
          innerRadius={60}
          outerRadius={100}
          paddingAngle={5}
          dataKey="value"
        >
          {pieData.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.fill} />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  );
}

// components/ImpactCalculator.tsx
export function ImpactCalculator() {
  const [donationAmount, setDonationAmount] = useState(500);
  
  const impactMetrics = {
    mealsProvided: Math.floor(donationAmount / 30),
    booksProvided: Math.floor(donationAmount / 150),
    medicalKits: Math.floor(donationAmount / 200),
    saplingsPlanted: Math.floor(donationAmount / 25),
  };

  return (
    <div className="calculator-container">
      <input 
        type="range" 
        min="100" 
        max="10000" 
        value={donationAmount}
        onChange={(e) => setDonationAmount(Number(e.target.value))}
      />
      <div className="impact-display">
        <span>{impactMetrics.mealsProvided} meals</span>
        <span>{impactMetrics.booksProvided} books</span>
        <span>{impactMetrics.saplingsPlanted} saplings</span>
      </div>
    </div>
  );
}

// components/AnimatedCounter.tsx
export function AnimatedCounter({ end, suffix = '' }: CounterProps) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const duration = 2000;
    const steps = 60;
    const increment = end / steps;
    const stepDuration = duration / steps;
    
    let current = 0;
    const timer = setInterval(() => {
      current += increment;
      if (current >= end) {
        setCount(end);
        clearInterval(timer);
      } else {
        setCount(Math.floor(current));
      }
    }, stepDuration);
    
    return () => clearInterval(timer);
  }, [end]);

  return <span>{count.toLocaleString()}{suffix}</span>;
}

// components/CustomCursor.tsx
export function CustomCursor() {
  const { scrollYProgress } = useScroll();
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const updateMousePosition = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener('mousemove', updateMousePosition);
    return () => window.removeEventListener('mousemove', updateMousePosition);
  }, []);

  return (
    <motion.div
      className="custom-cursor"
      animate={{ x: mousePosition.x, y: mousePosition.y }}
      transition={{ type: 'spring', stiffness: 500, damping: 28 }}
    />
  );
}

# Install dependencies
npm install

# Set environment variables
# Create .env.local with GEMINI_API_KEY

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start