Spaces:
Sleeping
Sleeping
File size: 3,437 Bytes
f4854a1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { HiHeart, HiUserGroup, HiHand, HiSparkles } from 'react-icons/hi';
const ways = [
{
icon: <HiHeart size={32} />,
title: 'Make a Donation',
desc: 'Donate securely via our donation page or use UPI / Bank Transfer. Every contribution creates real impact.',
link: '/donate',
btnText: 'Donate Now',
color: '#EC4899',
bg: '#fdf2f8',
},
{
icon: <HiUserGroup size={32} />,
title: 'Become a Volunteer',
desc: 'Contact us to contribute your time or expertise. Together, we can make a difference on the ground.',
link: '/volunteer',
btnText: 'Join Us',
color: '#2D6A4F',
bg: '#ecfdf5',
},
{
icon: <HiHand size={32} />,
title: 'Request Help',
desc: 'In need of support? Submit a help request and our team will reach out.',
link: '/help-request',
btnText: 'Get Help',
color: '#3B82F6',
bg: '#eff6ff',
},
{
icon: <HiSparkles size={32} />,
title: 'Corporate Partnership',
desc: 'Corporate CSR partnerships aligned with the Companies Act. Let\'s create large-scale impact together.',
link: '/contact',
btnText: 'Partner With Us',
color: '#F59E0B',
bg: '#fffbeb',
},
];
export default function GetInvolved() {
return (
<>
<Helmet>
<title>Get Involved — Social Share and Care Foundation</title>
</Helmet>
<section className="about-hero">
<div className="about-hero__bg" />
<div className="container">
<motion.div className="about-hero__content" initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }}>
<span className="section-header__tag">🤝 Get Involved</span>
<h1 className="about-hero__title">Join the Movement</h1>
<p className="about-hero__subtitle">
There are many ways to make a difference. Choose what works for you.
</p>
</motion.div>
</div>
</section>
<section className="section">
<div className="container">
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
{ways.map((item, i) => (
<motion.div
key={item.title}
className="card"
style={{ padding: '2.5rem', textAlign: 'center' }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1 }}
>
<div style={{
width: 72, height: 72, borderRadius: '16px', background: item.bg,
color: item.color, display: 'inline-flex', alignItems: 'center',
justifyContent: 'center', marginBottom: '1.25rem'
}}>
{item.icon}
</div>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>{item.title}</h3>
<p style={{ color: '#6B7280', lineHeight: '1.7', marginBottom: '1.5rem' }}>{item.desc}</p>
<Link to={item.link} className="btn btn--primary btn--sm">
{item.btnText}
</Link>
</motion.div>
))}
</div>
</div>
</section>
</>
);
}
|