Files
npfd-web-app/src/elements/ApparatusCar1.jsx
2025-08-14 00:31:16 -04:00

46 lines
2.0 KiB
JavaScript

const CheckIcon = () => (
<svg className="h-6 w-6 text-green-500 flex-shrink-0 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
);
const ApparatusCar1 = () => {
const prerequisites = [
"16-18 years old; enrolled in high school and be at least a rising junior",
"Must be in good physical condition",
"Must have permission from a parent or guardian",
"Must be in good standing in school, community and have no problems with the law",
];
return (
<section className="bg-gray-100 py-20">
<div id="junior-member" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="text-center flex flex-col items-center justify-center bg-white p-8 rounded-lg shadow-inner">
<span className="text-7xl md:text-9xl font-extrabold text-red-600">16</span>
<span className="text-2xl md:text-3xl font-bold text-gray-800 mt-2">years old to apply</span>
</div>
<div>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Car 1</h2>
<p className="text-gray-600 mb-4">
The mission of our Junior program is to offer our high-school students an opportunity to serve in their community. Not required, but our goal is to have Juniors become Full Members after high school graduation.
</p>
<p className="text-gray-600 mb-6">
The Prerequisites are similar to Full Members, with the following differences:
</p>
<ul className="space-y-4">
{prerequisites.map((item, index) => (
<li key={index} className="flex items-start">
<CheckIcon />
<span className="text-gray-700">{item}</span>
</li>
))}
</ul>
</div>
</div>
</div>
</section>
);
};
export default ApparatusCar1;