統計付きヒーロー

1export function HeroStats001() {
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 min-h-screen max-w-6xl px-6 py-24">
11        <div className="flex min-h-screen flex-col justify-center">
12          {/* Top label */}
13          <div className="mb-16">
14            <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
15              By the Numbers
16            </span>
17          </div>
18
19          {/* Main heading */}
20          <h1 className="mb-8 max-w-3xl text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-6xl">
21            Delivering results that
22            <span className="text-muted-foreground"> speak for themselves</span>
23          </h1>
24
25          {/* Description */}
26          <p className="mb-16 max-w-xl text-base leading-relaxed text-muted-foreground">
27            Our track record demonstrates consistent excellence in digital
28            solutions, helping businesses achieve measurable growth.
29          </p>
30
31          {/* Stats grid */}
32          <div className="grid gap-px border border-border bg-border sm:grid-cols-2 lg:grid-cols-4">
33            {[
34              { value: "500+", label: "Projects Delivered", sublabel: "Since 2018" },
35              { value: "98%", label: "Client Retention", sublabel: "Year over year" },
36              { value: "4.9", label: "Average Rating", sublabel: "From 1,200+ reviews" },
37              { value: "$2B+", label: "Revenue Generated", sublabel: "For our clients" },
38            ].map((stat, index) => (
39              <div
40                key={index}
41                className="group bg-background p-8 transition-colors hover:bg-muted/50"
42              >
43                <div className="text-4xl font-light text-foreground sm:text-5xl">
44                  {stat.value}
45                </div>
46                <div className="mt-4 text-sm text-foreground/70">{stat.label}</div>
47                <div className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
48                  {stat.sublabel}
49                </div>
50              </div>
51            ))}
52          </div>
53
54          {/* CTA row */}
55          <div className="mt-16 flex flex-col items-start gap-6 sm:flex-row sm:items-center">
56            <button className="inline-flex items-center gap-3 border border-border bg-foreground px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-foreground/90">
57              View Case Studies
58              <svg
59                className="h-3.5 w-3.5"
60                fill="none"
61                stroke="currentColor"
62                viewBox="0 0 24 24"
63              >
64                <path
65                  strokeLinecap="round"
66                  strokeLinejoin="round"
67                  strokeWidth={1.5}
68                  d="M14 5l7 7m0 0l-7 7m7-7H3"
69                />
70              </svg>
71            </button>
72            <div className="h-px w-12 bg-border sm:rotate-90" />
73            <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
74              Trusted by Fortune 500 companies
75            </span>
76          </div>
77        </div>
78      </div>
79    </section>
80  );
81}