From a361ab2c2553417d73ee4cea93029fdd384cb8e8 Mon Sep 17 00:00:00 2001 From: viswasri Date: Wed, 26 Mar 2025 12:38:19 +0530 Subject: [PATCH] Updated components and fixed file structure --- package-lock.json | 15 ++++ package.json | 1 + src/App.jsx | 6 +- src/Components/Carousel.css | 6 +- src/Components/Contact.jsx | 17 +++- src/Components/Donar.css | 50 +++++++++++ src/Components/Donar.jsx | 158 ++++++++------------------------- src/Components/Donor.jsx | 111 +++++++++++++++++++++++ src/Components/Fund Raised.jsx | 0 src/Components/FundRaised.jsx | 37 ++++++++ src/Components/Navbar.jsx | 6 +- 11 files changed, 278 insertions(+), 129 deletions(-) create mode 100644 src/Components/Donar.css create mode 100644 src/Components/Donor.jsx delete mode 100644 src/Components/Fund Raised.jsx create mode 100644 src/Components/FundRaised.jsx diff --git a/package-lock.json b/package-lock.json index bb8907a..fdbb9f9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 08393b5..8787999 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.jsx b/src/App.jsx index eca3b66..d10b39c 100644 --- a/src/App.jsx +++ b/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 ( @@ -21,8 +21,10 @@ function App() { } /> } /> } /> + } /> + - + ); } diff --git a/src/Components/Carousel.css b/src/Components/Carousel.css index 64cd27f..e34a209 100644 --- a/src/Components/Carousel.css +++ b/src/Components/Carousel.css @@ -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; } diff --git a/src/Components/Contact.jsx b/src/Components/Contact.jsx index 4ce397d..b4dff91 100644 --- a/src/Components/Contact.jsx +++ b/src/Components/Contact.jsx @@ -1,13 +1,26 @@ import React from 'react'; +import { FaPhone, FaLinkedin } from 'react-icons/fa'; const Contact = () => { return (

Contact Us

-

Email: VETRIVEL.EDUCATION.TRUST@gmail.com

-

Phone: +91 7604883357

+

+ Email: VETRIVEL.EDUCATION.TRUST@gmail.com +

+

+ +91 7604883357 +

+

+ Valli's LinkedIn +

+

+ Meena's LinkedIn +

); }; export default Contact; + + diff --git a/src/Components/Donar.css b/src/Components/Donar.css new file mode 100644 index 0000000..981f1a3 --- /dev/null +++ b/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; +} diff --git a/src/Components/Donar.jsx b/src/Components/Donar.jsx index b56fb77..dbcb8bc 100644 --- a/src/Components/Donar.jsx +++ b/src/Components/Donar.jsx @@ -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 ( -
- -

Donar

+
+

Donar Details

+
+ - - {/* History Section */} - - - - Our History - - - 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. - - - +
+ + +
- {/* Achievements Section */} - - - - Our Achievements - - - - Provided scholarships to over 100 students. -
- - Established 10 schools across rural regions. -
- - Partnered with top universities to offer vocational training. -
- - Awarded "Best Educational NGO" in 2018. -
- - - - +
+ + +
+
+ + +
- {/* Goals Section */} - - - Our Future Goals - - - - Expand our reach to more than 1000 students by 2025. -
- - Introduce digital classrooms in remote areas. -
- - Collaborate with tech companies to provide online learning - platforms. -
- - Establish a fund to support education in low-income families. -
- - +
+ + +
- {/* Address Section */} - - - Our Address - - - No 2, Melavayal kulakkal street opp to meenakshi natasen kalyana mandapam -
- Devakottai-630302 -
- - +
+ + +
- - +
+ + +
- - {/* school - - Join Us in Shaping the Future of Education! - */} - - - + + + + + + +
); }; -export default Donar \ No newline at end of file +export default Donar; diff --git a/src/Components/Donor.jsx b/src/Components/Donor.jsx new file mode 100644 index 0000000..5742135 --- /dev/null +++ b/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 ( +
+ + + {!submitted ? ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ ) : ( +
+

Upload Documents

+
+ {["aadharFront", "aadharBack", "medicalDoc1", "medicalDoc2", "medicalDoc3", "medicalDoc4"].map((doc) => ( +
+ + + {images[doc] && ( + Preview + )} +
+ ))} + + +
+
+ )} +
+ ); +}; + +export default Donor; + + diff --git a/src/Components/Fund Raised.jsx b/src/Components/Fund Raised.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/Components/FundRaised.jsx b/src/Components/FundRaised.jsx new file mode 100644 index 0000000..df02b5f --- /dev/null +++ b/src/Components/FundRaised.jsx @@ -0,0 +1,37 @@ +import React from "react"; + +const FundRaised = () => { + return ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ ); +}; + +export default FundRaised; + diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx index 000a8f5..35953b7 100644 --- a/src/Components/Navbar.jsx +++ b/src/Components/Navbar.jsx @@ -39,8 +39,10 @@ const Navbar = () => { About Us Register Contact - Donar - Fund Raised + Donor + FundRaised + +