非対称ヒーロー

1export function HeroAsymmetric001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-6 top-6 h-1 w-1 rounded-full bg-foreground/40" />
6      <div className="absolute right-6 top-6 h-1 w-1 rounded-full bg-foreground/40" />
7      <div className="absolute bottom-6 left-6 h-1 w-1 rounded-full bg-foreground/40" />
8      <div className="absolute bottom-6 right-6 h-1 w-1 rounded-full bg-foreground/40" />
9
10      {/* Grid lines */}
11      <div className="absolute inset-0">
12        <div className="absolute left-[20%] top-0 h-full w-px bg-border/30" />
13        <div className="absolute left-[40%] top-0 h-full w-px bg-border/30" />
14        <div className="absolute left-[60%] top-0 h-full w-px bg-border/30" />
15        <div className="absolute left-[80%] top-0 h-full w-px bg-border/30" />
16      </div>
17
18      <div className="relative mx-auto min-h-screen max-w-7xl px-6 py-24">
19        <div className="grid min-h-screen items-center gap-12 lg:grid-cols-12">
20          {/* Left content - takes 7 columns */}
21          <div className="lg:col-span-7">
22            {/* Label */}
23            <div className="mb-8">
24              <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
25                Creative Agency
26              </span>
27            </div>
28
29            {/* Large heading */}
30            <h1 className="text-4xl font-light leading-[1.1] tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
31              We create
32              <br />
33              <span className="text-muted-foreground">digital</span>
34              <br />
35              experiences
36            </h1>
37
38            {/* Horizontal line */}
39            <div className="my-10 h-px w-32 bg-border" />
40
41            {/* Description - offset to the right */}
42            <div className="max-w-sm lg:ml-24">
43              <p className="text-base leading-relaxed text-muted-foreground">
44                Pushing the boundaries of digital design through innovative
45                solutions and meticulous craftsmanship.
46              </p>
47            </div>
48          </div>
49
50          {/* Right content - takes 5 columns */}
51          <div className="flex flex-col justify-between lg:col-span-5 lg:h-[60vh]">
52            {/* Top section */}
53            <div className="border border-border p-8">
54              <div className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
55                Services
56              </div>
57              <ul className="mt-6 space-y-3">
58                {["Brand Identity", "Web Design", "Development", "Strategy"].map(
59                  (service) => (
60                    <li
61                      key={service}
62                      className="flex items-center gap-3 text-sm text-foreground/70"
63                    >
64                      <span className="h-1 w-1 rounded-full bg-foreground/40" />
65                      {service}
66                    </li>
67                  )
68                )}
69              </ul>
70            </div>
71
72            {/* Bottom CTA */}
73            <div className="mt-8 lg:mt-0">
74              <button className="group flex w-full items-center justify-between border border-border bg-muted/30 p-6 transition-all hover:border-foreground/30 hover:bg-muted/50">
75                <span className="text-xs font-medium uppercase tracking-[0.2em] text-foreground/70">
76                  Start a Project
77                </span>
78                <svg
79                  className="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-1"
80                  fill="none"
81                  stroke="currentColor"
82                  viewBox="0 0 24 24"
83                >
84                  <path
85                    strokeLinecap="round"
86                    strokeLinejoin="round"
87                    strokeWidth={1.5}
88                    d="M14 5l7 7m0 0l-7 7m7-7H3"
89                  />
90                </svg>
91              </button>
92            </div>
93          </div>
94        </div>
95
96        {/* Bottom bar */}
97        <div className="absolute bottom-8 left-6 right-6 flex items-center justify-between border-t border-border pt-6">
98          <div className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
99            Tokyo / New York / London
100          </div>
101          <div className="flex items-center gap-6">
102            {["Tw", "In", "Be"].map((social) => (
103              <span
104                key={social}
105                className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
106              >
107                {social}
108              </span>
109            ))}
110          </div>
111        </div>
112      </div>
113    </section>
114  );
115}