スプリットヒーロー

1export function HeroSplit001() {
2  return (
3    <section className="min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-6 top-6 h-1 w-1 rounded-full bg-foreground/30" />
6      <div className="absolute right-6 top-6 h-1 w-1 rounded-full bg-foreground/30" />
7
8      <div className="grid min-h-screen lg:grid-cols-2">
9        {/* Left Content */}
10        <div className="relative flex flex-col justify-center border-r border-border px-6 py-20 sm:px-12 lg:px-16 xl:px-24">
11          {/* コーナードット */}
12          <div className="absolute bottom-6 left-6 h-1 w-1 rounded-full bg-foreground/30" />
13
14          <div className="max-w-lg">
15            {/* Badge */}
16            <div className="mb-10">
17              <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
18                New Release v2.0
19              </span>
20            </div>
21
22            {/* Heading */}
23            <h1 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-5xl xl:text-6xl">
24              Build products
25              <br />
26              <span className="text-muted-foreground">people love</span>
27            </h1>
28
29            {/* Description */}
30            <p className="mt-8 max-w-md text-base leading-relaxed text-muted-foreground">
31              Create beautiful, responsive interfaces with our comprehensive
32              design system. Ship faster with pre-built components.
33            </p>
34
35            {/* CTA Buttons */}
36            <div className="mt-12 flex flex-col gap-4 sm:flex-row">
37              <button className="inline-flex items-center justify-center gap-2 border border-border bg-foreground px-8 py-3.5 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-foreground/90">
38                Get Started
39                <svg
40                  className="h-3.5 w-3.5"
41                  fill="none"
42                  stroke="currentColor"
43                  viewBox="0 0 24 24"
44                >
45                  <path
46                    strokeLinecap="round"
47                    strokeLinejoin="round"
48                    strokeWidth={1.5}
49                    d="M14 5l7 7m0 0l-7 7m7-7H3"
50                  />
51                </svg>
52              </button>
53              <button className="inline-flex items-center justify-center gap-2 border border-border px-8 py-3.5 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground">
54                Watch Demo
55              </button>
56            </div>
57
58            {/* Stats */}
59            <div className="mt-16 flex items-center gap-12">
60              <div>
61                <div className="text-2xl font-light text-foreground">2,000+</div>
62                <div className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
63                  Customers
64                </div>
65              </div>
66              <div className="h-8 w-px bg-border" />
67              <div>
68                <div className="text-2xl font-light text-foreground">99.9%</div>
69                <div className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
70                  Uptime
71                </div>
72              </div>
73            </div>
74          </div>
75        </div>
76
77        {/* Right Panel */}
78        <div className="relative hidden bg-muted/50 lg:block">
79          {/* コーナードット */}
80          <div className="absolute bottom-6 right-6 h-1 w-1 rounded-full bg-foreground/30" />
81
82          {/* Grid pattern */}
83          <div
84            className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
85            style={{
86              backgroundImage: `linear-gradient(hsl(var(--foreground)) 1px, transparent 1px),
87                               linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px)`,
88              backgroundSize: "48px 48px",
89            }}
90          />
91
92          {/* Centered content */}
93          <div className="flex h-full items-center justify-center">
94            <div className="text-center">
95              <div className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground/60">
96                Performance
97              </div>
98              <div className="mt-4 text-6xl font-light text-foreground/80">3x</div>
99              <div className="mt-2 text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
100                Faster Development
101              </div>
102            </div>
103          </div>
104
105          {/* Bottom card */}
106          <div className="absolute bottom-12 left-12 right-12 border border-border bg-card/50 p-6 backdrop-blur">
107            <div className="flex items-center gap-4">
108              <div className="flex h-10 w-10 items-center justify-center border border-border">
109                <svg
110                  className="h-5 w-5 text-muted-foreground"
111                  fill="none"
112                  stroke="currentColor"
113                  viewBox="0 0 24 24"
114                >
115                  <path
116                    strokeLinecap="round"
117                    strokeLinejoin="round"
118                    strokeWidth={1.5}
119                    d="M13 10V3L4 14h7v7l9-11h-7z"
120                  />
121                </svg>
122              </div>
123              <div>
124                <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
125                  Development Speed
126                </p>
127                <p className="mt-1 text-lg font-light text-foreground/80">
128                  Ship in days, not weeks
129                </p>
130              </div>
131            </div>
132          </div>
133        </div>
134      </div>
135    </section>
136  );
137}