feat: add product section components and integrate them into the homepage landing page

2026-07-29 15:50:27 +07:00
parent b43df8f35b
commit db57a22a09
10 changed files with 796 additions and 772 deletions
@@ -0,0 +1,80 @@
+'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>
+  );
+}