first commit

src/elements/FullMemberDetails.jsx

@@ -0,0 +1,51 @@
+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 FullMemberDetails = () => {
+  const prerequisites = [
+    "Candidate must be between 18 and 50 years of age, prior it his or her 51st birthday",
+    "Have a valid NJ State Driver License",
+    "Commit to Wednesday Night Training from 7pm-9pm",
+    "Interviewed by Chief and or President",
+    "Good moral character",
+    "Apparent adequate physical strength and stamina",
+    "Live or work in New Providence or within the area",
+    "Physical Well Being Certificate Exam by a physician",
+    "Complete background check including a fingerprint process with the New Providence Police Dept.",
+  ];
+
+  return (
+    <section className="bg-white py-20">
+      <div id="full-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="order-2 md:order-1">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Full Member</h2>
+            <p className="text-gray-600 mb-6">The broad prerequisites for full membership are:</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 className="mt-8">
+              <a href="/contact" className="inline-block bg-red-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-red-700 transform hover:scale-105 transition-all duration-300">
+                APPLY NOW
+              </a>
+            </div>
+          </div>
+          <div className="order-1 md:order-2 text-center flex flex-col items-center justify-center bg-gray-100 p-8 rounded-lg shadow-inner">
+             <span className="text-7xl md:text-9xl font-extrabold text-red-600">18</span>
+             <span className="text-2xl md:text-3xl font-bold text-gray-800 mt-2">years old to apply</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FullMemberDetails;