スプリットコンタクト

1"use client";
2
3import { useState } from "react";
4
5export function ContactSplit001() {
6  const [formData, setFormData] = useState({
7    name: "",
8    email: "",
9    subject: "",
10    message: "",
11  });
12
13  const handleSubmit = (e: React.FormEvent) => {
14    e.preventDefault();
15  };
16
17  const handleChange = (
18    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
19  ) => {
20    setFormData((prev) => ({
21      ...prev,
22      [e.target.name]: e.target.value,
23    }));
24  };
25
26  const contactInfo = [
27    {
28      label: "メール",
29      value: "hello@example.com",
30    },
31    {
32      label: "電話",
33      value: "+81 3-0000-0000",
34    },
35    {
36      label: "所在地",
37      value: "東京都渋谷区",
38    },
39  ];
40
41  return (
42    <section className="bg-background py-28 border-t border-border">
43      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
44        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-24">
45          {/* 左カラム: 情報 */}
46          <div>
47            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
48              Contact
49            </p>
50            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
51              お問い合わせ
52            </h2>
53            <p className="mt-6 text-sm font-light leading-relaxed text-muted-foreground">
54              プロジェクトのご相談やお見積もりなど、お気軽にお問い合わせください。通常2営業日以内にご返信いたします。
55            </p>
56
57            <div className="mt-12 h-px bg-border/40" />
58
59            {/* 連絡先情報 */}
60            <div className="mt-12 space-y-8">
61              {contactInfo.map((info) => (
62                <div key={info.label}>
63                  <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
64                    {info.label}
65                  </p>
66                  <p className="mt-2 text-sm font-light tracking-wide text-foreground">
67                    {info.value}
68                  </p>
69                </div>
70              ))}
71            </div>
72
73            {/* 営業時間 */}
74            <div className="mt-12">
75              <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
76                営業時間
77              </p>
78              <p className="mt-2 text-sm font-light tracking-wide text-foreground">
79                月〜金 9:00 - 18:00
80              </p>
81              <p className="mt-1 text-xs tracking-wide text-muted-foreground/60">
82                土日祝日を除く
83              </p>
84            </div>
85          </div>
86
87          {/* 右カラム: フォーム */}
88          <div>
89            <form onSubmit={handleSubmit} className="space-y-8">
90              <div>
91                <label
92                  htmlFor="contact-split-name"
93                  className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
94                >
95                  お名前
96                </label>
97                <input
98                  type="text"
99                  id="contact-split-name"
100                  name="name"
101                  value={formData.name}
102                  onChange={handleChange}
103                  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"
104                  placeholder="山田太郎"
105                />
106              </div>
107
108              <div>
109                <label
110                  htmlFor="contact-split-email"
111                  className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
112                >
113                  メールアドレス
114                </label>
115                <input
116                  type="email"
117                  id="contact-split-email"
118                  name="email"
119                  value={formData.email}
120                  onChange={handleChange}
121                  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"
122                  placeholder="your@email.com"
123                />
124              </div>
125
126              <div>
127                <label
128                  htmlFor="contact-split-subject"
129                  className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
130                >
131                  件名
132                </label>
133                <input
134                  type="text"
135                  id="contact-split-subject"
136                  name="subject"
137                  value={formData.subject}
138                  onChange={handleChange}
139                  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"
140                  placeholder="プロジェクトのご相談"
141                />
142              </div>
143
144              <div>
145                <label
146                  htmlFor="contact-split-message"
147                  className="block text-[10px] uppercase tracking-[0.2em] text-muted-foreground"
148                >
149                  メッセージ
150                </label>
151                <textarea
152                  id="contact-split-message"
153                  name="message"
154                  rows={4}
155                  value={formData.message}
156                  onChange={handleChange}
157                  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"
158                  placeholder="ご要件をお聞かせください..."
159                />
160              </div>
161
162              <div className="pt-4">
163                <button
164                  type="submit"
165                  className="group inline-flex items-center gap-3 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:text-muted-foreground"
166                >
167                  送信する
168                  <svg
169                    className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1"
170                    fill="none"
171                    stroke="currentColor"
172                    viewBox="0 0 24 24"
173                  >
174                    <path
175                      strokeLinecap="round"
176                      strokeLinejoin="round"
177                      strokeWidth={1.5}
178                      d="M17 8l4 4m0 0l-4 4m4-4H3"
179                    />
180                  </svg>
181                </button>
182              </div>
183            </form>
184          </div>
185        </div>
186      </div>
187    </section>
188  );
189}