Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve About #89

Merged
merged 5 commits into from
Oct 28, 2024
Merged

Resolve About #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9bb77a9
omkar changes
omkarkhopade31 Aug 11, 2024
7638e13
Changes in About.jsx and Contact.jsx
omkarkhopade31 Oct 6, 2024
7015ede
Update Contact.jsx
omkarkhopade31 Oct 6, 2024
d297581
By Omkar
omkarkhopade31 Oct 27, 2024
73fab41
Merge branch 'main' of https://github.com/omkarkhopade31/MealMatters
omkarkhopade31 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 19 additions & 5 deletions client/src/components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,13 @@ import { motion } from "framer-motion";
export default function About() {
return (
<>
{/* Including Navbar */}
<Navbar />

{/* Main content wrapper with gradient background */}
<div className="bg-gradient-to-b from-blue-50 via-white to-blue-50 py-10 w-full">
<div className="container mx-auto px-4">
{/* Animated title section */}
<motion.div
initial={{ opacity: 0, y: -100 }}
whileInView={{ opacity: 1, y: 0 }}
Expand All @@ -20,13 +24,15 @@ export default function About() {
duration: 0.6,
type: "spring",
stiffness: 80,
delay: 0,
}}
className="text-5xl font-extrabold text-center text-blue-700 mb-8"
>
About Us
</motion.div>

{/* Content sections */}
<div className="flex flex-col gap-10 mt-12">
{/* Mission Section */}
<motion.div
initial={{ opacity: 0, x: -100 }}
whileInView={{ opacity: 1, x: 0 }}
Expand All @@ -43,7 +49,7 @@ export default function About() {
<h1 className="text-3xl font-bold mb-4 text-blue-800">
Our Mission
</h1>
<p className="text-lg text-gray-700 leading-relaxed">
<p className="text-2xl text-gray-700 leading-relaxed">
At our student food insecurity project, we are dedicated to
addressing the issue of hunger among students. Our mission is
to provide a platform that connects students, colleges, and
Expand All @@ -60,6 +66,8 @@ export default function About() {
/>
</div>
</motion.div>

{/* How It Works Section */}
<motion.div
initial={{ opacity: 0, x: 100 }}
whileInView={{ opacity: 1, x: 0 }}
Expand All @@ -83,7 +91,7 @@ export default function About() {
<h2 className="text-3xl font-bold mb-4 text-green-700">
How It Works
</h2>
<p className="text-lg text-gray-700 leading-relaxed">
<p className="text-2xl text-gray-700 leading-relaxed">
Our platform enables students to easily find nearby
restaurants that offer free food. Participating colleges
provide students with free coupons that can be redeemed at
Expand All @@ -95,6 +103,8 @@ export default function About() {
</p>
</div>
</motion.div>

{/* Join Us Section */}
<motion.div
initial={{ opacity: 0, x: -100 }}
whileInView={{ opacity: 1, x: 0 }}
Expand All @@ -111,7 +121,7 @@ export default function About() {
<h2 className="text-3xl font-bold mb-4 text-blue-800">
Join Us
</h2>
<p className="text-lg text-gray-700 leading-relaxed">
<p className="text-2xl text-gray-700 leading-relaxed">
We are always looking for passionate individuals and
organizations to join our cause. Whether you are a student,
college representative, or restaurant owner, you can make a
Expand All @@ -131,6 +141,8 @@ export default function About() {
</div>
</motion.div>
</div>

{/* Call to Action */}
<motion.div
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
Expand All @@ -143,7 +155,7 @@ export default function About() {
}}
className="mt-12"
>
<p className="text-xl font-semibold bg-white border-b-4 border-blue-400 shadow-lg rounded-lg px-6 py-8 text-center text-gray-800 transform hover:scale-105 transition-transform duration-300">
<p className="text-xl font-bold bg-white border-b-4 border-blue-400 shadow-lg rounded-lg px-6 py-8 text-center text-gray-800 transform hover:scale-105 transition-transform duration-300">
Join us in our mission to eliminate student food insecurity and
make a positive impact on the lives of students across the
country. Together, we can create a future where every student has
Expand All @@ -153,6 +165,8 @@ export default function About() {
</motion.div>
</div>
</div>

{/* Including Footer */}
<Footer />
</>
);
Expand Down
28 changes: 17 additions & 11 deletions client/src/components/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

export default function Contact() {
// State to manage form submission status
const [isSubmitted, setSubmitted] = useState(false);

// Hook to manage form and validation
const {
register,
handleSubmit,
Expand All @@ -18,17 +20,21 @@ export default function Contact() {
mode: "onChange",
});

// Function to handle form submission
const onSubmit = async (data, e) => {
setSubmitted(true);
e.preventDefault();
try {
const res = await fetch(`${import.meta.env.VITE_API_BASE_URL || `https://mealmatters-backend.onrender.com`}/contact-us`, {
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify(data),
});
const res = await fetch(
`${import.meta.env.VITE_API_BASE_URL || `https://mealmatters-backend.onrender.com`}/contact-us`,
{
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify(data),
}
);
const formSubmitted = await res.json();
if (formSubmitted.statusCode === 200) {
reset();
Expand All @@ -37,7 +43,7 @@ export default function Contact() {
console.log(formSubmitted.message);
}
} catch (error) {
console.log(error);
console.error("Error submitting the form:", error);
}
setSubmitted(false);
};
Expand All @@ -46,15 +52,15 @@ export default function Contact() {
<>
<Navbar />

<div className="bg-transparent">
<div className="bg-transparent py-10">
<div className="container mx-auto px-4">
<h1 className="text-5xl font-extrabold text-white text-center mb-12">
<h1 className="text-5xl font-extrabold text-blue-800 text-center mb-12">
Contact Us
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
{/* Form Section */}
<div className="bg-white rounded-lg shadow-xl p-8">
<h2 className="text-3xl font-semibold text-gray-800 mb-6">
<h2 className="text-3xl font-bold text-gray-800 mb-8">
Get in Touch
</h2>
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
Expand Down
14 changes: 7 additions & 7 deletions client/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,36 @@ export default function Footer() {
<div className="flex justify-around flex-col sm:flex-row">
{/* Links Section */}
<div className="mb-6 sm:mb-0">
<h5 className="text-lg font-bold uppercase mb-4">Explore</h5>
<h5 className="text-lg font-extrabold uppercase mb-5">Explore</h5>
<ul className="space-y-3">
<li>
<Link
to="/"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
Mission
</Link>
</li>
<li>
<Link
to="/"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
Partners
</Link>
</li>
<li>
<Link
to="/about"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
About Us
</Link>
</li>
<li>
<Link
to="/contact"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
Contact Us
</Link>
Expand All @@ -52,15 +52,15 @@ export default function Footer() {
<li>
<a
href="mailto:contact@mealmatters.com"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
contact@mealmatters.com
</a>
</li>
<li>
<a
href="tel:+91123456789"
className="hover:text-yellow-300 transition duration-300"
className="hover:text-yellow-300 font-bold transition duration-300"
>
+91 123456789
</a>
Expand Down
12 changes: 6 additions & 6 deletions client/src/components/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function Login() {
<Navbar />
<div className="flex justify-center items-center h-screen bg-gradient-to-r font-sans">
<div className="relative w-full max-w-md bg-white p-10 rounded-lg border border-black hover:border-2 shadow-lg">
<h2 className="text-4xl font-semibold text-center mb-8 text-black">
<h2 className="text-4xl font-bold text-center mb-8 text-black">
Welcome to MealMatters
</h2>
<form onSubmit={handleLogin}>
Expand All @@ -61,14 +61,14 @@ export default function Login() {
<input
type="email"
placeholder="Email"
className="w-full h-12 bg-transparent outline-none text-black placeholder-gray-500"
className="w-full h-12 bg-transparent font-bold outline-none text-black placeholder-gray-500"
style={{ fontSize: '16px' }}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
</div>
<div className="mb-6">
<div className="flex items-center border-b border-gray-300">
<div className="flex items-center font-bold border-b border-gray-300">
<i className="fa fa-unlock-alt text-lg mr-3 text-gray-500"></i>
<input
type="password"
Expand All @@ -81,7 +81,7 @@ export default function Login() {
</div>
<div className="mb-6">
<button
className="w-full h-12 cursor-pointer font-semibold text-lg text-center border-2 border-purple-600 rounded-[25px] bg-pink-300 hover:text-white hover:bg-purple-600"
className="w-full h-12 cursor-pointer font-bold text-lg text-center border-2 border-purple-600 rounded-[25px] bg-pink-300 hover:text-white hover:bg-purple-600"
>
Login
</button>
Expand All @@ -106,8 +106,8 @@ export default function Login() {
</button>
</div>
<div className="flex justify-between">
<Link to="/forgot-password" className="text-sm text-gray-600 cursor-pointer">Forgot Password?</Link>
<Link to="/signup" className="text-sm text-gray-600">
<Link to="/forgot-password" className="text-sm text-gray-600 font-bold cursor-pointer">Forgot Password?</Link>
<Link to="/signup" className="text-sm font-bold text-gray-600">
Sign Up
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default function Navbar() {
<li className="my-5 lg:my-0">
<a
href="https://rzp.io/l/aK0bXinyA"
className="text-[#fff] lg:text-[#000000] block hover:scale-110 transition text-[1.25rem] font-[600]"
className="text-[#fff] lg:text-[#000000] block hover:scale-110 transition text-[1.25rem] font-[600]"
>
Donate
</a>
Expand Down
Loading