Updated components and fixed file structure

package-lock.json

@@ -17,6 +17,7 @@
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.7",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.5.0",
         "react-router-dom": "^7.0.2",
         "survey-react-ui": "^1.12.13"
       },
@@ -4170,6 +4171,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7791,6 +7800,12 @@
         "scheduler": "^0.23.2"
       }
     },
+    "react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.7",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.0.2",
     "survey-react-ui": "^1.12.13"
   },

src/App.jsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Navbar from './Components/Navbar';
 import Pay from './Components/Register';
 import Contact from './Components/Contact';
+import Donor from './Components/Donor';
 import Footer from './Components/Footer';
 import FormBuilder from './Components/FormBuilder';
 import AboutUs from './Components/AboutUs';
@@ -10,7 +11,6 @@ import './App.css';
 import Home from './Components/Home';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-
 function App() {
   return (
     <Router>
@@ -21,6 +21,8 @@ function App() {
         <Route path="/aboutUs" element={<AboutUs />} />
         <Route path="/form" element={<FormBuilder />} />
         <Route path="/contact" element={<Contact />} />
+        <Route path="/donor" element={<Donor />} />
+        
       </Routes>
     </Router> 
   );

src/Components/Carousel.css

@@ -11,8 +11,8 @@
   
 
   .carousel .carousel-slider{
-    width: 50px;
+    width: 100px;
-    height: 100%;
+    height: auto;
     position: absolute;
     background-color: #343a40;
     right: 0;
@@ -21,7 +21,7 @@
 
 
   .carousel-image {
-    width: 100%;
+    width: 90%;
     height: auto;
     transition: opacity 1s ease-in-out;
   }

src/Components/Contact.jsx

@@ -1,13 +1,26 @@
 import React from 'react';
+import { FaPhone, FaLinkedin } from 'react-icons/fa';
 
 const Contact = () => {
   return (
     <div className="page contact">
       <h2>Contact Us</h2>
-      <p>Email: VETRIVEL.EDUCATION.TRUST@gmail.com</p>
+      <p>
-      <p>Phone: +91 7604883357</p>
+        Email: <a href="mailto:VETRIVEL.EDUCATION.TRUST@gmail.com">VETRIVEL.EDUCATION.TRUST@gmail.com</a>
+      </p>
+      <p>
+        <FaPhone /> <a href="tel:+917604883357">+91 7604883357</a>
+      </p>
+      <p>
+        <FaLinkedin /> <a href="https://www.linkedin.com/in/vallies/" target="_blank" rel="noopener noreferrer">Valli's LinkedIn</a>
+      </p>
+      <p>
+        <FaLinkedin /> <a href="https://www.linkedin.com/in/meena-v-8699579b/" target="_blank" rel="noopener noreferrer">Meena's LinkedIn</a>
+      </p>
     </div>
   );
 };
 
 export default Contact;
+
+

src/Components/Donar.css

@@ -0,0 +1,50 @@
+.donar-form {
+  width: 50%;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(241, 235, 235);
+}
+
+.donar-form h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: block;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+button {
+  padding: 10px;
+  border: none;
+  background-color: #4CAF50;
+  color: white;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}

src/Components/Donar.jsx

@@ -1,133 +1,51 @@
-import React from "react";
+import React from 'react';
-import {
+import './Donar.css';  
-  Container,
-  Typography,
-  Box,
-  Grid,
-  Paper,
-  Button,
-  Icon,
-} from "@mui/material";
-import { useNavigate } from "react-router-dom";
 
 const Donar = () => {
-  const navigate = useNavigate();
   return (
-    <div style={{ padding: "40px 0", backgroundColor: "#f9f9f9" }}>
+    <div className="donar-form">
-      <Container maxWidth="lg">
+      <h2>Donar Details</h2>
-        <h1 className='heading-border-bottom'>Donar</h1>
+      <form>
       
-        <Grid container spacing={4}>
-          {/* History Section */}
-          <Grid item xs={12} md={12}>
-            <Box
-            >
-              <Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
-                Our History
-              </Typography>
-              <Typography variant="body1" paragraph>
-                Vertivel Educational Trust was founded in 2010 with a vision to
-                provide quality education to underprivileged children in rural
-                and underserved areas. Over the years, the trust has grown into
-                a leading educational organization that has impacted the lives
-                of over 1000 children through various initiatives and
-                educational programs.
-              </Typography>
-            </Box>
-          </Grid>
 
-          {/* Achievements Section */}
+<div className="form-group">
-          <Grid item xs={12} md={12}>
+  <label htmlFor="aadharFront">Upload Aadhaar Front:</label>
-            <Box
+  <input type="file" id="aadharFront" name="aadharFront" accept="image/*" required />
-            >
+</div>
-              <Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
-                Our Achievements
-              </Typography>
-              <Typography variant="body1" paragraph>
-                - Provided scholarships to over 100 students.
-                <br />
-                - Established 10 schools across rural regions.
-                <br />
-                - Partnered with top universities to offer vocational training.
-                <br />
-                - Awarded "Best Educational NGO" in 2018.
-                <br />
-              </Typography>
-            </Box>
-          </Grid>
-        </Grid>
 
-        {/* Goals Section */}
+<div className="form-group">
-        <Box mt={4}>
+  <label htmlFor="aadharBack">Upload Aadhaar Back:</label>
-          <Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
+  <input type="file" id="aadharBack" name="aadharBack" accept="image/*" required />
-            Our Future Goals
+</div>
-          </Typography>
+<div className="form-group">
-          <Typography
+  <label htmlFor="medicalDoc1">Upload Medical Document 1:</label>
-            variant="body1"
+  <input type="file" id="medicalDoc1" name="medicalDoc1" accept="image/*" required />
-            sx={{ fontSize: "1.1rem", lineHeight: 1.6, color: "#555" }}
+</div>
-          >
-            - Expand our reach to more than 1000 students by 2025.
-            <br />
-            - Introduce digital classrooms in remote areas.
-            <br />
-            - Collaborate with tech companies to provide online learning
-            platforms.
-            <br />
-            - Establish a fund to support education in low-income families.
-            <br />
-          </Typography>
-        </Box>
 
-      {/* Address Section */}
+<div className="form-group">
-      <Box mt={4}>
+  <label htmlFor="medicalDoc2">Upload Medical Document 2:</label>
-          <Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
+  <input type="file" id="medicalDoc2" name="medicalDoc2" accept="image/*" />
-            Our Address
+</div>
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{ fontSize: "1.1rem", lineHeight: 1.6, color: "#555" }}
-          >
-            No 2, Melavayal kulakkal street opp to meenakshi natasen kalyana mandapam
-            <br />
-            Devakottai-630302
-            <br />
-          </Typography>
-        </Box>
 
-        <Box
+<div className="form-group">
-          mt={4}
+  <label htmlFor="medicalDoc3">Upload Medical Document 3:</label>
-          display="flex"
+  <input type="file" id="medicalDoc3" name="medicalDoc3" accept="image/*" />
-          justifyContent="center"
+</div>
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Button
-            sx={{
-              padding: "12px 30px",
-              backgroundColor: "#FF5722",
-              color: "#fff",
-              "&:hover": { backgroundColor: "#e64a19" },
-            }}
-            href="/contact"
-          >
-            Contact Us
-          </Button>
 
-          <Box
+<div className="form-group">
-            mt={3}
+  <label htmlFor="medicalDoc4">Upload Medical Document 4:</label>
-            display="flex"
+  <input type="file" id="medicalDoc4" name="medicalDoc4" accept="image/*" />
-            justifyContent="center"
+</div>
-            alignItems="center"
+
-          >
+
-            {/* <Icon sx={{ fontSize: "50px", color: "#FF5722" }}>school</Icon>
+
-            <Typography variant="h6" sx={{ marginLeft: 2 }}>
+<button type="submit">Submit</button>
-              Join Us in Shaping the Future of Education!
+
-            </Typography> */}
+
-          </Box>
+        
-        </Box>
+      </form>
-      </Container>
     </div>
   );
 };
 
-export default Donar
+export default Donar;

src/Components/Donor.jsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import './Donar.css';  
+
+const Donor = () => {
+  const [submitted, setSubmitted] = useState(false);
+  const [images, setImages] = useState({
+    aadharFront: null,
+    aadharBack: null,
+    medicalDoc1: null,
+    medicalDoc2: null,
+    medicalDoc3: null,
+    medicalDoc4: null,
+  });
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setSubmitted(true);
+  };
+
+  const handleImageChange = (event) => {
+    const { name } = event.target;
+    const file = event.target.files[0];
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setImages((prevImages) => ({
+          ...prevImages,
+          [name]: e.target.result,
+        }));
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <div className="donar-form" style={{ textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+      
+
+      {!submitted ? (
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="name">Full Name:</label>
+            <input type="text" id="name" name="name" placeholder="Enter your full name" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="phone">Phone Number:</label>
+            <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email">Email:</label>
+            <input type="email" id="email" name="email" placeholder="Enter your email" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="dob">Date of Birth:</label>
+            <input type="date" id="dob" name="dob" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="age">Age:</label>
+            <input type="number" id="age" name="age" placeholder="Enter your age" required />
+          </div>
+
+          <button type="submit" style={{ fontSize: "14px", padding: "8px 15px", marginTop: "10px" }}>
+            Submit Details
+          </button>
+        </form>
+      ) : (
+        <div>
+          <h2>Upload Documents</h2>
+          <form>
+            {["aadharFront", "aadharBack", "medicalDoc1", "medicalDoc2", "medicalDoc3", "medicalDoc4"].map((doc) => (
+              <div key={doc} className="form-group" style={{ textAlign: "center" }}>
+                <label htmlFor={doc}>
+                  {doc.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase())}:
+                </label>
+                <input
+                  type="file"
+                  id={doc}
+                  name={doc}
+                  accept="image/*"
+                  onChange={handleImageChange}
+                  required={doc === "aadharFront" || doc === "aadharBack" || doc === "medicalDoc1"}
+                  style={{ display: "block", margin: "10px auto", width: "250px" }}
+                />
+                {images[doc] && (
+                  <img
+                    src={images[doc]}
+                    alt="Preview"
+                    style={{ marginTop: "10px", width: "100px", height: "100px", objectFit: "cover", borderRadius: "10px" }}
+                  />
+                )}
+              </div>
+            ))}
+
+            <button type="submit" style={{ fontSize: "14px", padding: "8px 15px", marginTop: "10px" }}>
+              Submit Documents
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Donor;
+
+

src/Components/FundRaised.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const FundRaised = () => {
+  return (
+    <form>
+      <div className="form-group">
+        <label htmlFor="fundName">Fundraiser Name:</label>
+        <input type="text" id="fundName" name="fundName" placeholder="Enter fundraiser name" required />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="fundAmount">Required Amount:</label>
+        <input type="number" id="fundAmount" name="fundAmount" placeholder="Enter required amount" required />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="fundPurpose">Purpose of Fundraising:</label>
+        <textarea id="fundPurpose" name="fundPurpose" placeholder="Describe the purpose" required></textarea>
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="supportingDoc1">Upload Supporting Document 1:</label>
+        <input type="file" id="supportingDoc1" name="supportingDoc1" accept="image/*,application/pdf" required />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="supportingDoc2">Upload Supporting Document 2 (Optional):</label>
+        <input type="file" id="supportingDoc2" name="supportingDoc2" accept="image/*,application/pdf" />
+      </div>
+
+      <button type="submit" style={{ fontSize: "12px", padding: "5px 10px" }}>Submit</button>
+    </form>
+  );
+};
+
+export default FundRaised;
+

src/Components/Navbar.jsx

@@ -39,8 +39,10 @@ const Navbar = () => {
           <Link to="/aboutUs">About Us</Link>
           <Link to="/register">Register</Link>
           <Link to="/contact">Contact</Link>
-          <Link to="/donar">Donar</Link>
+          <Link to="/donor">Donor</Link>
           <Link to="/fundraised">FundRaised</Link>
+          
+          
         </div>
       </div>
     </nav>