242 lines
11 KiB
TypeScript
242 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import type { Metadata } from 'next';
|
|
import { Phone, Mail, MapPin, Instagram, Facebook, Twitter, Youtube } from 'lucide-react';
|
|
import styles from './contact.module.css';
|
|
|
|
export default function ContactPage() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
subject: '',
|
|
message: '',
|
|
phone: '',
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission
|
|
console.log('Form submitted:', formData);
|
|
alert('Thank you for your message! We\'ll get back to you soon.');
|
|
};
|
|
|
|
const contactInfoCards = [
|
|
{
|
|
icon: <MapPin size={32} />,
|
|
title: 'Address',
|
|
value: 'London Eye, London',
|
|
link: '#',
|
|
},
|
|
{
|
|
icon: <Mail size={32} />,
|
|
title: 'Email',
|
|
value: 'mail@nursee.com',
|
|
link: 'mailto:mail@nursee.com',
|
|
},
|
|
{
|
|
icon: <Phone size={32} />,
|
|
title: 'Phone',
|
|
value: '(+081) 5678 1234',
|
|
link: 'tel:+08156781234',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={styles.contactPage}>
|
|
{/* Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>Contact Us</h1>
|
|
<div className={styles.breadcrumb}>
|
|
<a href="/">Home</a> / <span>Contact</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Info Cards */}
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className={styles.contactGrid}>
|
|
{contactInfoCards.map((info, index) => (
|
|
<a key={index} href={info.link} className={styles.contactCard}>
|
|
<div className={styles.cardIcon}>{info.icon}</div>
|
|
<h3 className={styles.cardTitle}>{info.title}</h3>
|
|
<p className={styles.cardValue}>{info.value}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Form Section */}
|
|
<section className={`section ${styles.formSection}`}>
|
|
<div className="container">
|
|
<div className={styles.formContainer}>
|
|
{/* Left Side: Get In Touch Info */}
|
|
<div className={styles.getInTouchInfo}>
|
|
<h2 className={styles.sectionTitle}>Get In Touch</h2>
|
|
<p className={styles.sectionDesc}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
|
|
</p>
|
|
|
|
<div className={styles.infoGrid}>
|
|
<div className={styles.infoItem}>
|
|
<div className={styles.iconBox}><Phone size={20} /></div>
|
|
<div>
|
|
<h4 className={styles.infoLabel}>Phone</h4>
|
|
<p className={styles.infoValue}>(+081) 5678 1234</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.infoItem}>
|
|
<div className={styles.iconBox}><Mail size={20} /></div>
|
|
<div>
|
|
<h4 className={styles.infoLabel}>Email</h4>
|
|
<p className={styles.infoValue}>mail@nursee.com</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.infoItem}>
|
|
<div className={styles.iconBox}><MapPin size={20} /></div>
|
|
<div>
|
|
<h4 className={styles.infoLabel}>Address</h4>
|
|
<p className={styles.infoValue}>London Eye, London</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.infoItem}>
|
|
<div className={styles.iconBox}><Instagram size={20} /></div>
|
|
<div>
|
|
<h4 className={styles.infoLabel}>Instagram</h4>
|
|
<p className={styles.infoValue}>nursee.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.socialRow}>
|
|
<span className={styles.socialLabel}>Social Media</span>
|
|
<div className={styles.socialIconsRow}>
|
|
<a href="#"><Facebook size={20} /></a>
|
|
<a href="#"><Twitter size={20} /></a>
|
|
<a href="#"><Youtube size={20} /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side: Form */}
|
|
<div className={styles.formWrapper}>
|
|
<form className={styles.contactForm} onSubmit={handleSubmit}>
|
|
<div className={styles.formRow}>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="email" className={styles.label}>Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className={styles.input}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="name" className={styles.label}>Name</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className={styles.input}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="phone" className={styles.label}>Phone</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone" // Note: Added phone to state if not present, need to handle
|
|
placeholder="Phone"
|
|
className={styles.input}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="message" className={styles.label}>Message</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
placeholder="Message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className={styles.textarea}
|
|
rows={5}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className={styles.submitBtn}>
|
|
SUBMIT BUTTON
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Map Section */}
|
|
<section className={styles.mapSection}>
|
|
<div className="container" style={{ maxWidth: '100%', padding: 0 }}>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.546465492652!2d-0.1216834237199462!3d51.503189710986916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2slastminute.com%20London%20Eye!5e0!3m2!1sen!2suk!4v1709999999999!5m2!1sen!2suk"
|
|
width="100%"
|
|
height="400"
|
|
style={{ border: 0 }}
|
|
allowFullScreen
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
></iframe>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Quick Links */}
|
|
{/* <section className={styles.quickLinks}>
|
|
<div className="container">
|
|
<h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
|
|
<div className={styles.linksGrid}>
|
|
<a href="/docs" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>📚</span>
|
|
<span className={styles.linkText}>Documentation</span>
|
|
</a>
|
|
<a href="/pricing" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>💰</span>
|
|
<span className={styles.linkText}>Pricing</span>
|
|
</a>
|
|
<a href="/blog" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>📝</span>
|
|
<span className={styles.linkText}>Blog</span>
|
|
</a>
|
|
<a href="/features" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>✨</span>
|
|
<span className={styles.linkText}>Features</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section> */}
|
|
</div>
|
|
);
|
|
}
|