sridhar
/
vvet_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated components and fixed file structure

This commit is contained in:
viswasri 2025-03-26 12:38:19 +05:30
parent 84128cd1e4
commit a361ab2c25
11 changed files with 278 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

4
src/App.jsx
View File

@ -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>
);

6
src/Components/Carousel.css
View File

@ -11,8 +11,8 @@
.carousel .carousel-slider{
width: 50px;
height: 100%;
width: 100px;
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;
}

17
src/Components/Contact.jsx
View File

@ -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>Phone: +91 7604883357</p>
<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;

50
src/Components/Donar.css Normal file
View File

@ -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;
}

158
src/Components/Donar.jsx
View File

@ -1,133 +1,51 @@
import React from "react";
import {
Container,
Typography,
Box,
Grid,
Paper,
Button,
Icon,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import React from 'react';
import './Donar.css';
const Donar = () => {
const navigate = useNavigate();
return (
<div style={{ padding: "40px 0", backgroundColor: "#f9f9f9" }}>
<Container maxWidth="lg">
<h1 className='heading-border-bottom'>Donar</h1>
<div className="donar-form">
<h2>Donar Details</h2>
<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 */}
<Grid item xs={12} md={12}>
<Box
>
<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>
<div className="form-group">
<label htmlFor="aadharFront">Upload Aadhaar Front:</label>
<input type="file" id="aadharFront" name="aadharFront" accept="image/*" required />
</div>
{/* Goals Section */}
<Box mt={4}>
<Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
Our Future Goals
</Typography>
<Typography
variant="body1"
sx={{ fontSize: "1.1rem", lineHeight: 1.6, color: "#555" }}
>
- 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>
<div className="form-group">
<label htmlFor="aadharBack">Upload Aadhaar Back:</label>
<input type="file" id="aadharBack" name="aadharBack" accept="image/*" required />
</div>
<div className="form-group">
<label htmlFor="medicalDoc1">Upload Medical Document 1:</label>
<input type="file" id="medicalDoc1" name="medicalDoc1" accept="image/*" required />
</div>
{/* Address Section */}
<Box mt={4}>
<Typography variant="h5" sx={{ marginBottom: 3, fontWeight: "bold" }}>
Our Address
</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>
<div className="form-group">
<label htmlFor="medicalDoc2">Upload Medical Document 2:</label>
<input type="file" id="medicalDoc2" name="medicalDoc2" accept="image/*" />
</div>
<Box
mt={4}
display="flex"
justifyContent="center"
flexDirection="column"
alignItems="center"
>
<Button
sx={{
padding: "12px 30px",
backgroundColor: "#FF5722",
color: "#fff",
"&:hover": { backgroundColor: "#e64a19" },
}}
href="/contact"
>
Contact Us
</Button>
<div className="form-group">
<label htmlFor="medicalDoc3">Upload Medical Document 3:</label>
<input type="file" id="medicalDoc3" name="medicalDoc3" accept="image/*" />
</div>
<Box
mt={3}
display="flex"
justifyContent="center"
alignItems="center"
>
{/* <Icon sx={{ fontSize: "50px", color: "#FF5722" }}>school</Icon>
<Typography variant="h6" sx={{ marginLeft: 2 }}>
Join Us in Shaping the Future of Education!
</Typography> */}
</Box>
</Box>
</Container>
<div className="form-group">
<label htmlFor="medicalDoc4">Upload Medical Document 4:</label>
<input type="file" id="medicalDoc4" name="medicalDoc4" accept="image/*" />
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default Donar
export default Donar;

111
src/Components/Donor.jsx Normal file
View File

@ -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;

0
src/Components/Fund Raised.jsx
View File

37
src/Components/FundRaised.jsx Normal file
View File

@ -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;

4
src/Components/Navbar.jsx
View File

@ -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>