グリッドコンタクト

1"use client";
2
3import { useState } from "react";
4
5export function ContactGrid001() {
6  const [formData, setFormData] = useState({
7    name: "",
8    email: "",
9    type: "",
10    message: "",
11  });
12
13  const handleSubmit = (e: React.FormEvent) => {
14    e.preventDefault();
15  };
16
17  const handleChange = (
18    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
19  ) => {
20    setFormData((prev) => ({
21      ...prev,
22      [e.target.name]: e.target.value,
23    }));
24  };
25
26  const contactCards = [
27    {
28      label: "General",
29      title: "一般的なお問い合わせ",
30      description: "製品やサービスに関するご質問はこちら",
31      email: "info@example.com",
32    },
33    {
34      label: "Sales",
35      title: "お見積もり・ご契約",
36      description: "料金プランやご契約に関するご相談",
37      email: "sales@example.com",
38    },
39    {
40      label: "Support",
41      title: "テクニカルサポート",
42      description: "技術的な問題やトラブルの対応",
43      email: "support@example.com",
44    },
45  ];
46
47  return (
48    <section className="bg-background py-28 border-t border-border">
49      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
50        {/* ヘッダー */}
51        <div>
52          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
53            Contact Us
54          </p>
55          <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
56            お問い合わせ
57          </h2>
58          <p className="mt-6 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
59            ご要件に合わせた窓口をお選びください。担当者が迅速にご対応いたします。
60          </p>
61        </div>
62
63        <div className="mt-8 h-px bg-border/40" />
64
65        {/* コンタクトカードグリッド */}
66        <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-3">
67          {contactCards.map((card) => (
68            <div
69              key={card.label}
70              className="group relative rounded-lg border border-border bg-muted/30 p-6 transition-colors duration-300 hover:bg-muted/60"
71            >
72              {/* コーナードット */}
73              <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
74
75              <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/60">
76                {card.label}
77              </p>
78              <h3 className="mt-3 text-sm font-medium tracking-wide text-foreground">
79                {card.title}
80              </h3>
81              <p className="mt-2 text-xs font-light leading-relaxed text-muted-foreground">
82                {card.description}
83              </p>
84              <div className="mt-4 h-px bg-border/40" />
85              <p className="mt-4 text-xs font-light tracking-wide text-foreground/80">
86                {card.email}
87              </p>
88            </div>
89          ))}
90        </div>
91
92        <div className="mt-16 h-px bg-border/40" />
93
94        {/* フォーム */}
95        <div className="mt-16">
96          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
97            <div>
98              <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
99                Send a Message
100              </p>
101              <h3 className="mt-3 text-lg font-medium tracking-wide text-foreground">
102                メッセージを送る
103              </h3>
104            </div>
105            <p className="text-xs font-light tracking-wide text-muted-foreground/60">
106              通常2営業日以内にご返信いたします
107            </p>
108          </div>
109
110          <form
111            onSubmit={handleSubmit}
112            className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2"
113          >
114            <div>
115              <label
116                htmlFor="contact-grid-name"
117                className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
118              >
119                お名前
120              </label>
121              <input
122                type="text"
123                id="contact-grid-name"
124                name="name"
125                value={formData.name}
126                onChange={handleChange}
127                className="mt-3 block w-full border-b border-border bg-transparent py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground focus:outline-none"
128                placeholder="山田太郎"
129              />
130            </div>
131
132            <div>
133              <label
134                htmlFor="contact-grid-email"
135                className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
136              >
137                メールアドレス
138              </label>
139              <input
140                type="email"
141                id="contact-grid-email"
142                name="email"
143                value={formData.email}
144                onChange={handleChange}
145                className="mt-3 block w-full border-b border-border bg-transparent py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground focus:outline-none"
146                placeholder="your@email.com"
147              />
148            </div>
149
150            <div className="sm:col-span-2">
151              <label
152                htmlFor="contact-grid-type"
153                className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
154              >
155                お問い合わせ種別
156              </label>
157              <select
158                id="contact-grid-type"
159                name="type"
160                value={formData.type}
161                onChange={handleChange}
162                className="mt-3 block w-full appearance-none border-b border-border bg-transparent py-3 text-sm font-light tracking-wide text-foreground transition-colors duration-200 focus:border-foreground focus:outline-none"
163              >
164                <option value="" className="bg-background">
165                  選択してください
166                </option>
167                <option value="general" className="bg-background">
168                  一般的なお問い合わせ
169                </option>
170                <option value="sales" className="bg-background">
171                  お見積もり・ご契約
172                </option>
173                <option value="support" className="bg-background">
174                  テクニカルサポート
175                </option>
176              </select>
177            </div>
178
179            <div className="sm:col-span-2">
180              <label
181                htmlFor="contact-grid-message"
182                className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
183              >
184                メッセージ
185              </label>
186              <textarea
187                id="contact-grid-message"
188                name="message"
189                rows={4}
190                value={formData.message}
191                onChange={handleChange}
192                className="mt-3 block w-full resize-none border-b border-border bg-transparent py-3 text-sm font-light tracking-wide text-foreground placeholder-muted-foreground/40 transition-colors duration-200 focus:border-foreground focus:outline-none"
193                placeholder="ご要件をお聞かせください..."
194              />
195            </div>
196
197            <div className="sm:col-span-2 pt-2">
198              <button
199                type="submit"
200                className="group inline-flex items-center gap-3 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:text-muted-foreground"
201              >
202                送信する
203                <svg
204                  className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1"
205                  fill="none"
206                  stroke="currentColor"
207                  viewBox="0 0 24 24"
208                >
209                  <path
210                    strokeLinecap="round"
211                    strokeLinejoin="round"
212                    strokeWidth={1.5}
213                    d="M17 8l4 4m0 0l-4 4m4-4H3"
214                  />
215                </svg>
216              </button>
217            </div>
218          </form>
219        </div>
220      </div>
221    </section>
222  );
223}