v0.10.0 Contact section initial commit

src/components/contact/Contact.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+import styles from "./Contact.module.css";
+
+const Contact = () => {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [message, setMessage] = useState("");
+	const [challengeAnswer, setChallengeAnswer] = useState("");
+	const [isHuman, setIsHuman] = useState(false);
+	const [challenge, setChallenge] = useState({ num1: 0, num2: 0 });
+
+	useEffect(() => {
+		generateChallenge();
+	}, []);
+
+	const generateChallenge = () => {
+		const num1 = Math.floor(Math.random() * 10);
+		const num2 = Math.floor(Math.random() * 10);
+		setChallenge({ num1, num2 });
+	};
+
+	const checkChallenge = (e) => {
+		e.preventDefault();
+		if (parseInt(challengeAnswer) === challenge.num1 + challenge.num2) {
+			setIsHuman(true);
+		} else {
+			alert("Incorrect answer. Please try again.");
+			setChallengeAnswer("");
+			generateChallenge();
+		}
+	};
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		// Here you would typically handle the form submission,
+		// such as sending the data to a server or API
+		console.log("Form submitted:", { name, email, message });
+		// Reset form fields after submission
+		setName("");
+		setEmail("");
+		setMessage("");
+	};
+
+	return (
+		<section className={styles.contact} id="contact">
+			<div className={styles.container}>
+				<h2 className={styles.title}>Contact Me</h2>
+				<div className={styles.content}>
+					<div className={styles.infoColumn}>
+						<h3>Get in Touch</h3>
+						<p>Feel free to reach out for collaborations or just a friendly hello</p>
+						<div className={styles.infoItem}>
+							<strong>Location:</strong> City, Country
+						</div>
+						<div className={styles.infoItem}>
+							<strong>Email:</strong> your.email@example.com
+						</div>
+						<div className={styles.infoItem}>
+							<strong>Phone:</strong> +1 (123) 456-7890
+						</div>
+					</div>
+					<div className={styles.formColumn}>
+						{!isHuman ? (
+							<form onSubmit={checkChallenge} className={styles.challengeForm}>
+								<p>To access the contact form, please solve this simple math problem:</p>
+								<p>{`${challenge.num1} + ${challenge.num2} = ?`}</p>
+								<input type="number" value={challengeAnswer} onChange={(e) => setChallengeAnswer(e.target.value)} required />
+								<button type="submit">Submit Answer</button>
+							</form>
+						) : (
+							<form onSubmit={handleSubmit}>
+								<div className={styles.formGroup}>
+									<label htmlFor="name">Name</label>
+									<input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} required />
+								</div>
+								<div className={styles.formGroup}>
+									<label htmlFor="email">Email</label>
+									<input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+								</div>
+								<div className={styles.formGroup}>
+									<label htmlFor="message">Message</label>
+									<textarea id="message" value={message} onChange={(e) => setMessage(e.target.value)} required></textarea>
+								</div>
+								<button type="submit" className={styles.submitButton}>
+									Send Message
+								</button>
+							</form>
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Contact;

src/components/contact/Contact.module.css

@@ -0,0 +1,127 @@
+.contact {
+	padding: 80px 0;
+	background-color: #f8f9fa;
+}
+
+.container {
+	max-width: var(--content-width);
+	margin: 0 auto;
+	padding: 0 20px;
+}
+
+.title {
+	font-size: 2.5rem;
+	text-align: center;
+	margin-bottom: 40px;
+	color: #333;
+}
+
+.content {
+	display: flex;
+	gap: 40px;
+}
+
+.infoColumn,
+.formColumn {
+	flex: 1;
+}
+
+.infoColumn h3 {
+	font-size: 1.5rem;
+	margin-bottom: 20px;
+	color: #333;
+}
+
+.infoItem {
+	margin-bottom: 15px;
+	font-size: 1rem;
+	color: #666;
+}
+
+.formGroup {
+	margin-bottom: 20px;
+}
+
+.formGroup label {
+	display: block;
+	margin-bottom: 5px;
+	font-weight: bold;
+	color: #333;
+}
+
+.formGroup input,
+.formGroup textarea {
+	width: 100%;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 1rem;
+}
+
+.formGroup textarea {
+	height: 150px;
+	resize: vertical;
+}
+
+.submitButton {
+	background-color: #ff6600;
+	color: #fff;
+	border: none;
+	padding: 12px 24px;
+	font-size: 1rem;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.submitButton:hover {
+	background-color: #e55d00;
+}
+
+.challengeForm {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 15px;
+}
+
+.challengeForm p {
+	text-align: center;
+	font-size: 1rem;
+	color: #333;
+}
+
+.challengeForm input {
+	width: 100%;
+	max-width: 200px;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 1rem;
+}
+
+.challengeForm button {
+	background-color: #ff6600;
+	color: #fff;
+	border: none;
+	padding: 10px 20px;
+	font-size: 1rem;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.challengeForm button:hover {
+	background-color: #e55d00;
+}
+
+@media (max-width: 768px) {
+	.content {
+		flex-direction: column;
+	}
+
+	.infoColumn,
+	.formColumn {
+		width: 100%;
+	}
+}