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

Jump to bottom

Added contact us form #131

Closed
wants to merge 2 commits into from
+628 −69
Closed

Added contact us form #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5507fdf
Added contact us form
meghanakn22 Oct 21, 2024
4da1f4e
Modified theme
meghanakn22 Oct 22, 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 apps/web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Navbar } from "../components/Navbar";
import Footer from "../components/Footer";
import ScrollProgressBar from "../components/ScrollProgress"; // Import the progress bar
import BackToTopButton from "../components/BacktoTop";

import '../components/style.css';
export default function Home() {
const init = useCallback(async (engine: Engine) => {
await loadFull(engine);
Expand Down
69 changes: 69 additions & 0 deletions apps/web/components/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React, { useState } from 'react';

interface ContactFormProps {
onClose: () => void;
}

const ContactForm: React.FC<ContactFormProps> = ({ onClose }) => {
const [formData, setFormData] = useState({ name: '', email: '', message: '' });
const [submitted, setSubmitted] = useState(false);

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(formData);
setSubmitted(true);
setFormData({ name: '', email: '', message: '' });
};

return (
<div className="modal">
<div className="modal-content dark-theme">
<span className="close" onClick={onClose}>&times;</span>
{submitted ? (
<div className="success-message">Thank you for contacting us!</div>
) : (
<form onSubmit={handleSubmit}>
<h2 className="form-title neon-title">Contact Us</h2>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
className="form-input neon-input"
/>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
className="form-input neon-input"
/>
<label htmlFor="message">Message:</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
required
className="form-textarea neon-input"
></textarea>
<button type="submit" className="submit-button neon-button">Send Message</button>
</form>
)}
</div>
</div>
);
};

export default ContactForm;
99 changes: 55 additions & 44 deletions apps/web/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import logo from "../public/create-api.png";
import logo from "../public/create-api.png";
import Image from "next/image";
import Link from "next/link";
import { Montserrat } from "next/font/google";
import LinkedInButton from "./ui/TailwindButton";
import React, { useState } from 'react'; // Import useState for modal state
import ContactForm from './ContactForm'; // Import the ContactForm component

const alata = Montserrat({
weight: "800",
Expand All @@ -11,50 +13,59 @@ const alata = Montserrat({
});

function Footer() {
return (
<div className="w-full bg-slate-900 h-[50vh] dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center pb-10">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<footer className="bg-transparent rounded-lg m-4 mx-auto w-[80%] z-10 flex items-center justify-center">
<div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div className="sm:flex sm:items-center sm:justify-between">
<Link href="/" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
<Image src={logo} height={50} width={50} alt="logo" />
<h2 className={`text-2xl font-bold ${alata.className}`}>
<span className="text-orange-300 font-extrabold">Create</span>{" "}
<span className="text-orange-500 font-extrabold">My</span>{" "}
<span className="text-red-500 font-extrabold">API</span>
</h2>
</Link>
<ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0">
{[
{ href: "/docs", label: "Docs" },
{ href: "https://github.com/Puskar-Roy/create-my-api", label: "Github" },
{ href: "https://www.npmjs.com/package/create-my-api", label: "NPM" },
].map((link, index) => (
<li key={index}>
<Link href={link.href} className="hover:underline me-4 md:me-6">
{link.label}
</Link>
</li>
))}
<li>
<Link href="https://www.linkedin.com/in/puskar-roy/">
<LinkedInButton />
</Link>
</li>
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<span className="block text-sm text-white sm:text-center">
© Designed and Developed By{" "}
<Link href="https://puskarroy.site" className="hover:underline">
Puskar Roy
</Link>
</span>
const [isModalOpen, setModalOpen] = useState(false);

const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);

return (
<div className="w-full bg-slate-900 h-[50vh] dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center pb-10">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<footer className="bg-transparent rounded-lg m-4 mx-auto w-[80%] z-10 flex items-center justify-center">
<div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div className="sm:flex sm:items-center sm:justify-between">
<Link href="/" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
<Image src={logo} height={50} width={50} alt="logo" />
<h2 className={`text-2xl font-bold ${alata.className}`}>
<span className="text-orange-300 font-extrabold">Create</span>{" "}
<span className="text-orange-500 font-extrabold">My</span>{" "}
<span className="text-red-500 font-extrabold">API</span>
</h2>
</Link>
<ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0">
{[
{ href: "/docs", label: "Docs" },
{ href: "https://github.com/Puskar-Roy/create-my-api", label: "Github" },
{ href: "https://www.npmjs.com/package/create-my-api", label: "NPM" },
].map((link, index) => (
<li key={index}>
<Link href={link.href} className="hover:underline me-4 md:me-6">
{link.label}
</Link>
</li>
))}
<li>
<a href="#" onClick={openModal} className="hover:underline me-4 md:me-6">Contact</a> {/* Contact link */}
</li>
<li>
<Link href="https://www.linkedin.com/in/puskar-roy/">
<LinkedInButton />
</Link>
</li>
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<span className="block text-sm text-white sm:text-center">
© Designed and Developed By{" "}
<Link href="https://puskarroy.site" className="hover:underline">
Puskar Roy
</Link>
</span>
</div>
</footer>
{isModalOpen && <ContactForm onClose={closeModal} />} {/* Render the ContactForm if modal is open */}
</div>
</footer>
</div>
);
);
}

export default Footer;
108 changes: 108 additions & 0 deletions apps/web/components/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/* Modal styling */
.modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 1000;
}

.modal-content {
background-color: #1f1f1f; /* Dark background */
border-radius: 10px;
padding: 20px;
width: 400px;
max-width: 90%;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
}

.close {
color: #fff;
font-size: 24px;
cursor: pointer;
float: right;
}

.close:hover {
color: #f05454;
}

.form-title {
color: #fff;
margin-bottom: 15px;
font-size: 24px;
text-align: center;
}

.neon-title {
text-shadow: 0 0 10px #f05454, 0 0 20px #f05454; /* Neon effect for title */
}

label {
color: #f7f7f7; /* Brighter label text */
font-size: 16px;
margin-bottom: 8px;
display: block;
}

.form-input, .form-textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-color: #2b2b2b;
border: 1px solid #555;
border-radius: 5px;
color: #e0e0e0; /* Lighter text inside inputs for better contrast */
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}

.neon-input {
border: 1px solid #f05454;
box-shadow: 0 0 5px rgba(240, 84, 84, 0.5); /* Neon border effect */
}

.form-input:focus, .form-textarea:focus {
box-shadow: 0 0 10px #f05454, 0 0 20px #f05454; /* Neon glow on focus */
}

.form-textarea {
min-height: 100px;
resize: vertical;
}

.submit-button {
width: 100%;
padding: 10px;
background-color: #f05454;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.neon-button {
background-color: #f05454;
box-shadow: 0 0 10px #f05454, 0 0 20px rgba(240, 84, 84, 0.5);
}

.submit-button:hover {
background-color: #e03e3e;
}
.success-message {
color: #f05454; /* Bright red for visibility */
font-size: 18px;
text-align: center;
margin-top: 20px;
font-weight: bold;
text-shadow: 0 0 10px rgba(240, 84, 84, 0.7); /* Neon effect for success message */
}

Loading