81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export function Contact() {
|
|
const t = useTranslations();
|
|
|
|
const contactList = [
|
|
{
|
|
icon: 'uil-envelope-alt',
|
|
titleKey: 'Contact.email',
|
|
value: 'hello@pintumasuk.id',
|
|
},
|
|
{
|
|
icon: 'uil-phone',
|
|
titleKey: 'Contact.phone',
|
|
value: '+62 812-3456-7890',
|
|
},
|
|
{
|
|
icon: 'uil-map-marker',
|
|
titleKey: 'Contact.office',
|
|
valueKey: 'Contact.address',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="contact" id="contact">
|
|
<div className="container">
|
|
<div className="contact-card">
|
|
<div className="contact-info">
|
|
<span className="eyebrow eyebrow-light eyebrow-pill">
|
|
<span className="dot"></span>
|
|
{t('Contact.eyebrow')}
|
|
</span>
|
|
<h2 style={{ marginTop: '14px' }}>{t('Contact.title')}</h2>
|
|
<p>{t('Contact.desc')}</p>
|
|
|
|
<div className="contact-list">
|
|
{contactList.map((item, i) => (
|
|
<div className="contact-item" key={i}>
|
|
<div className="ci-icon">
|
|
<i className={`uil ${item.icon}`}></i>
|
|
</div>
|
|
<div>
|
|
<b>{(t as any)(item.titleKey)}</b>
|
|
<span>{item.valueKey ? (t as any)(item.valueKey) : item.value}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="contact-form">
|
|
<h3>{t('Contact.form.title')}</h3>
|
|
<form onSubmit={(e) => e.preventDefault()}>
|
|
<div className="field-row">
|
|
<div className="field">
|
|
<label htmlFor="cname">{t('Contact.form.name')}</label>
|
|
<input id="cname" type="text" placeholder={t('Contact.form.placeholderName')} />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="cemail">{t('Contact.email')}</label>
|
|
<input id="cemail" type="email" placeholder={t('Contact.form.placeholderEmail')} />
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="cmsg">{t('Contact.form.needs')}</label>
|
|
<textarea id="cmsg" placeholder={t('Contact.form.placeholderNeeds')}></textarea>
|
|
</div>
|
|
<button type="submit" className="btn btn-orange">
|
|
{t('Contact.form.submit')}
|
|
</button>
|
|
<p className="form-note">{t('Contact.form.note')}</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|