エレガントコンタクト

1export function ContactElegant001() {
2  const contactMethods = [
3    {
4      label: "Email",
5      value: "hello@example.com",
6      description: "お気軽にメールでお問い合わせください",
7    },
8    {
9      label: "Phone",
10      value: "+81 3-1234-5678",
11      description: "平日 10:00 - 18:00 対応",
12    },
13    {
14      label: "Address",
15      value: "東京都渋谷区神宮前 1-2-3",
16      description: "最寄り駅: 原宿駅 徒歩5分",
17    },
18  ];
19
20  return (
21    <section className="bg-background py-28">
22      {/* コーナードット */}
23      <div className="absolute left-8 top-8 hidden h-1 w-1 rounded-full bg-foreground/20 sm:block" />
24      <div className="absolute right-8 top-8 hidden h-1 w-1 rounded-full bg-foreground/20 sm:block" />
25
26      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
27        {/* ヘッダー */}
28        <div className="mb-6">
29          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
30            Contact
31          </p>
32          <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
33            お問い合わせ
34          </h2>
35          <p className="mt-4 max-w-md text-sm font-light leading-relaxed text-muted-foreground">
36            プロジェクトのご相談やお見積もりなど、お気軽にご連絡ください。
37            3営業日以内にご返信いたします。
38          </p>
39        </div>
40
41        <div className="h-px bg-border/40" />
42
43        {/* メインコンテンツ: 2カラム */}
44        <div className="mt-14 grid grid-cols-1 gap-16 lg:grid-cols-5">
45          {/* 左: フォーム */}
46          <div className="lg:col-span-3">
47            <form className="space-y-8">
48              {/* 名前（2カラム） */}
49              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
50                <div>
51                  <label className="mb-2 block text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
52                    姓
53                  </label>
54                  <div className="border-b border-border pb-2 transition-colors focus-within:border-foreground/40">
55                    <input
56                      type="text"
57                      placeholder="山田"
58                      className="w-full bg-transparent text-sm font-light tracking-wide text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
59                    />
60                  </div>
61                </div>
62                <div>
63                  <label className="mb-2 block text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
64                    名
65                  </label>
66                  <div className="border-b border-border pb-2 transition-colors focus-within:border-foreground/40">
67                    <input
68                      type="text"
69                      placeholder="太郎"
70                      className="w-full bg-transparent text-sm font-light tracking-wide text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
71                    />
72                  </div>
73                </div>
74              </div>
75
76              {/* メール */}
77              <div>
78                <label className="mb-2 block text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
79                  メールアドレス
80                </label>
81                <div className="border-b border-border pb-2 transition-colors focus-within:border-foreground/40">
82                  <input
83                    type="email"
84                    placeholder="your@email.com"
85                    className="w-full bg-transparent text-sm font-light tracking-wide text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
86                  />
87                </div>
88              </div>
89
90              {/* 件名 */}
91              <div>
92                <label className="mb-2 block text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
93                  件名
94                </label>
95                <div className="border-b border-border pb-2 transition-colors focus-within:border-foreground/40">
96                  <input
97                    type="text"
98                    placeholder="プロジェクトのご相談"
99                    className="w-full bg-transparent text-sm font-light tracking-wide text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
100                  />
101                </div>
102              </div>
103
104              {/* メッセージ */}
105              <div>
106                <label className="mb-2 block text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
107                  メッセージ
108                </label>
109                <div className="border-b border-border pb-2 transition-colors focus-within:border-foreground/40">
110                  <textarea
111                    rows={4}
112                    placeholder="お問い合わせ内容をご記入ください"
113                    className="w-full resize-none bg-transparent text-sm font-light leading-relaxed tracking-wide text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
114                  />
115                </div>
116              </div>
117
118              {/* 送信ボタン */}
119              <div className="pt-4">
120                <button
121                  type="button"
122                  className="inline-flex items-center gap-3 border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
123                >
124                  送信する
125                  <svg
126                    className="h-3 w-3"
127                    fill="none"
128                    stroke="currentColor"
129                    viewBox="0 0 24 24"
130                  >
131                    <path
132                      strokeLinecap="round"
133                      strokeLinejoin="round"
134                      strokeWidth={1.5}
135                      d="M17 8l4 4m0 0l-4 4m4-4H3"
136                    />
137                  </svg>
138                </button>
139              </div>
140            </form>
141          </div>
142
143          {/* 右: 連絡先情報 */}
144          <div className="lg:col-span-2">
145            <div className="space-y-0 divide-y divide-border">
146              {contactMethods.map((method, i) => (
147                <div key={i} className="py-6 first:pt-0">
148                  <p className="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
149                    {method.label}
150                  </p>
151                  <p className="mt-2 text-sm font-medium tracking-wide text-foreground">
152                    {method.value}
153                  </p>
154                  <p className="mt-1 text-xs font-light tracking-wide text-muted-foreground/60">
155                    {method.description}
156                  </p>
157                </div>
158              ))}
159            </div>
160
161            {/* ソーシャルリンク */}
162            <div className="mt-10 border-t border-border pt-6">
163              <p className="mb-4 text-[10px] uppercase tracking-[0.25em] text-muted-foreground">
164                Follow
165              </p>
166              <div className="flex gap-6">
167                {["X", "Instagram", "LinkedIn"].map((social) => (
168                  <a
169                    key={social}
170                    href="#"
171                    className="text-xs font-light tracking-wide text-muted-foreground/60 transition-colors hover:text-foreground"
172                  >
173                    {social}
174                  </a>
175                ))}
176              </div>
177            </div>
178          </div>
179        </div>
180      </div>
181    </section>
182  );
183}