ブランドヒーロー

1export function HeroBrand001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-8 top-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
6      <div className="absolute right-8 top-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
7      <div className="absolute bottom-8 left-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
8      <div className="absolute bottom-8 right-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
9
10      <div className="mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-8">
11        {/* Top bar */}
12        <div className="flex items-center justify-between border-b border-border pb-6">
13          {/* Logo mark */}
14          <div className="flex items-center gap-4">
15            <div className="flex h-10 w-10 items-center justify-center border border-border">
16              <span className="text-lg font-light text-foreground">N</span>
17            </div>
18            <div className="hidden sm:block">
19              <div className="text-sm font-medium tracking-wide text-foreground">
20                NEUTRAL
21              </div>
22              <div className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
23                Design Studio
24              </div>
25            </div>
26          </div>
27
28          {/* Nav */}
29          <nav className="hidden items-center gap-8 md:flex">
30            {["Work", "About", "Services", "Contact"].map((item) => (
31              <a
32                key={item}
33                href="#"
34                className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
35              >
36                {item}
37              </a>
38            ))}
39          </nav>
40
41          {/* Menu button */}
42          <button className="border border-border p-3 md:hidden">
43            <svg
44              className="h-4 w-4 text-muted-foreground"
45              fill="none"
46              stroke="currentColor"
47              viewBox="0 0 24 24"
48            >
49              <path
50                strokeLinecap="round"
51                strokeLinejoin="round"
52                strokeWidth={1.5}
53                d="M4 6h16M4 12h16M4 18h16"
54              />
55            </svg>
56          </button>
57        </div>
58
59        {/* Main content */}
60        <div className="flex flex-1 flex-col items-center justify-center py-16">
61          {/* Large brand mark */}
62          <div className="mb-12 flex h-32 w-32 items-center justify-center border border-border sm:h-40 sm:w-40">
63            <span className="text-6xl font-extralight tracking-tight text-foreground/80 sm:text-7xl">
64              N
65            </span>
66          </div>
67
68          {/* Brand name */}
69          <h1 className="mb-4 text-center text-3xl font-light tracking-[0.15em] text-foreground sm:text-4xl md:text-5xl">
70            NEUTRAL
71          </h1>
72
73          {/* Tagline */}
74          <div className="mb-8 flex items-center gap-4">
75            <div className="h-px w-8 bg-border" />
76            <span className="text-[11px] uppercase tracking-[0.3em] text-muted-foreground">
77              Design with intention
78            </span>
79            <div className="h-px w-8 bg-border" />
80          </div>
81
82          {/* Description */}
83          <p className="mb-12 max-w-md text-center text-base leading-relaxed text-muted-foreground">
84            We believe in the power of restraint. Every element serves a
85            purpose. Every detail has meaning.
86          </p>
87
88          {/* CTA */}
89          <button className="inline-flex items-center gap-3 border border-border px-10 py-4 text-xs font-medium uppercase tracking-[0.25em] text-foreground/70 transition-all hover:border-foreground/30 hover:bg-muted/50 hover:text-foreground">
90            View Portfolio
91            <svg
92              className="h-3.5 w-3.5"
93              fill="none"
94              stroke="currentColor"
95              viewBox="0 0 24 24"
96            >
97              <path
98                strokeLinecap="round"
99                strokeLinejoin="round"
100                strokeWidth={1.5}
101                d="M14 5l7 7m0 0l-7 7m7-7H3"
102              />
103            </svg>
104          </button>
105        </div>
106
107        {/* Bottom bar */}
108        <div className="flex flex-col items-center justify-between gap-6 border-t border-border pt-6 sm:flex-row">
109          {/* Location */}
110          <div className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
111            Tokyo, Japan
112          </div>
113
114          {/* Social */}
115          <div className="flex items-center gap-6">
116            {["Instagram", "Twitter", "Behance"].map((social) => (
117              <a
118                key={social}
119                href="#"
120                className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
121              >
122                {social}
123              </a>
124            ))}
125          </div>
126
127          {/* Email */}
128          <a
129            href="mailto:hello@neutral.co"
130            className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
131          >
132            hello@neutral.co
133          </a>
134        </div>
135      </div>
136    </section>
137  );
138}