Skip to content

Commit c62d7dc

Browse files
hrithikappshrithikapps
committed
pages: contactus + about
1 parent 04adb6e commit c62d7dc

5 files changed

Lines changed: 124 additions & 27 deletions

File tree

‎src/components/About.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
1-
import {Outlet} from "react-router-dom";
2-
import React from 'react';
1+
import React from "react";
2+
import Logo from "../assets/img/Logo.png";
33

4-
const About = () => {
4+
const About = () => {
55
return (
6-
<>
7-
<div>About</div>
8-
<Outlet />
9-
</>
10-
11-
12-
)
13-
}
6+
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-50 p-6 mt-0">
7+
<div className="bg-white shadow-lg rounded-2xl p-6 max-w-2xl text-center">
8+
<img src={Logo} alt="Logo" className="w-30 h-20 mx-auto mb-4" />
9+
<h1 className="text-3xl font-semibold text-gray-800">About Us</h1>
10+
<p className="text-gray-600 mt-2">
11+
Welcome to our food application! We are dedicated to providing the
12+
best culinary experiences in Bengaluru.
13+
</p>
14+
<div className="mt-6">
15+
<h2 className="text-xl font-medium text-gray-700 mb-2">
16+
Our Location
17+
</h2>
18+
<iframe
19+
title="Google Maps Bengaluru"
20+
className="w-full h-64 rounded-lg shadow-md"
21+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31109.38137974787!2d77.56116305!3d12.9715986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae167f6b238e6f%3A0x1b2f1f4b6c45aeb5!2sBengaluru%2C%20Karnataka%2C%20India!5e0!3m2!1sen!2sin!4v1647119832854!5m2!1sen!2sin"
22+
allowFullScreen=""
23+
loading="lazy"
24+
></iframe>
25+
</div>
26+
</div>
27+
</div>
28+
);
29+
};
1430

15-
export default About
31+
export default About;

‎src/components/Body.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { RestaurantCards } from "../components/RestaurantCards";
2-
// import RestaurantData from "./constants";
2+
// import {RestaurantData} from "./constants";
33
import { useState, useEffect } from "react";
44
import { Shimmer } from "./Shimmer";
55
import { Link } from "react-router-dom";

‎src/components/Constants.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ export const CDN_IMG_ID =
44
export const CLIENT_ID =
55
"918105211798-444ceo6i1h057bae60sgduopeo63t09f.apps.googleusercontent.com";
66

7+
export const EMAIL_TO = "krk2765@gmail.com";
8+
79
export const RestaurantData = [
810
{
911
data: {
@@ -1161,4 +1163,3 @@ export const RestaurantData = [
11611163
},
11621164
},
11631165
];
1164-
export default RestaurantData;

‎src/components/ContactUs.js‎

Lines changed: 93 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,95 @@
1-
import React from "react";
2-
3-
const ContactUs=()=>{
4-
return(
5-
<>
6-
<div className="h">
7-
<h1>This is Contact Us Page</h1>
8-
</div>
9-
</>
10-
)
11-
}
1+
import React, { useState } from "react";
2+
import { EMAIL_TO } from "./Constants";
3+
4+
const ContactUs = () => {
5+
const [formData, setFormData] = useState({
6+
name: "",
7+
email: "",
8+
message: "",
9+
});
10+
const [errors, setErrors] = useState({});
11+
12+
const validate = () => {
13+
let tempErrors = {};
14+
tempErrors.name = formData.name ? "" : "Name is required";
15+
tempErrors.email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)
16+
? ""
17+
: "Valid email is required";
18+
tempErrors.message = formData.message ? "" : "Message is required";
19+
setErrors(tempErrors);
20+
return Object.values(tempErrors).every((x) => x === "");
21+
};
22+
23+
const handleChange = (e) => {
24+
setFormData({ ...formData, [e.target.name]: e.target.value });
25+
};
26+
27+
const handleSubmit = (e) => {
28+
e.preventDefault();
29+
if (validate()) {
30+
window.location.href = `mailto:${EMAIL_TO}?subject=Contact Form Submission&body=Name: ${formData.name}%0AEmail: ${formData.email}%0AMessage: ${formData.message}`;
31+
}
32+
};
33+
34+
return (
35+
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-2">
36+
<div className="bg-white shadow-lg rounded-2xl p-6 max-w-lg w-full">
37+
<h1 className="text-3xl font-semibold text-gray-800 text-center">
38+
Contact Us
39+
</h1>
40+
<form className="mt-4" onSubmit={handleSubmit}>
41+
<div className="mb-4">
42+
<label className="block text-gray-700">Name</label>
43+
<input
44+
type="text"
45+
name="name"
46+
value={formData.name}
47+
onChange={handleChange}
48+
className="w-full p-2 border border-gray-300 rounded-lg mt-1"
49+
/>
50+
{errors.name && (
51+
<p className="text-red-500 text-sm">{errors.name}</p>
52+
)}
53+
</div>
54+
55+
<div className="mb-4">
56+
<label className="block text-gray-700">Email</label>
57+
<input
58+
type="email"
59+
name="email"
60+
value={formData.email}
61+
onChange={handleChange}
62+
className="w-full p-2 border border-gray-300 rounded-lg mt-1"
63+
/>
64+
{errors.email && (
65+
<p className="text-red-500 text-sm">{errors.email}</p>
66+
)}
67+
</div>
68+
69+
<div className="mb-4">
70+
<label className="block text-gray-700">Message</label>
71+
<textarea
72+
name="message"
73+
value={formData.message}
74+
onChange={handleChange}
75+
className="w-full p-2 border border-gray-300 rounded-lg mt-1"
76+
rows="4"
77+
></textarea>
78+
{errors.message && (
79+
<p className="text-red-500 text-sm">{errors.message}</p>
80+
)}
81+
</div>
82+
83+
<button
84+
type="submit"
85+
className="w-full bg-orange-600 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition"
86+
>
87+
Send Message
88+
</button>
89+
</form>
90+
</div>
91+
</div>
92+
);
93+
};
1294

1395
export default ContactUs;

‎src/components/Footer.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@ import { AiFillHeart } from "react-icons/ai";
33
const Footer = () => {
44
return (
55
<div className=" fixed left-0 bottom-0 flex justify-center align-middle w-full bg-slate-200 ">
6-
{/* <div className=" mt-4 flex justify-center content-center"> */}
76
<div className=" flex justify-center content-center p-3 align-middle text-gray-600">
87
Made with
98
<AiFillHeart className="text-red-700 m-1" />
109
by Kumar Hrithik
1110
</div>
12-
{/* </div> */}
1311
</div>
1412
);
1513
};

0 commit comments

Comments
 (0)