ショーケースフィーチャー

1// プロダクトショーケースフィーチャー - ライト/ダーク両対応
2export function FeatureShowcase001() {
3  const features = [
4    {
5      label: "API",
6      title: "Developer-first APIs",
7      description: "RESTful and GraphQL endpoints with comprehensive documentation.",
8    },
9    {
10      label: "SDK",
11      title: "Native SDKs",
12      description: "Official libraries for JavaScript, Python, Go, and more.",
13    },
14    {
15      label: "CLI",
16      title: "Command Line Tools",
17      description: "Powerful CLI for automation and CI/CD integration.",
18    },
19  ];
20
21  return (
22    <section className="relative bg-background py-32">
23      {/* コーナードット装飾 */}
24      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
25      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
26      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
27      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
28
29      <div className="mx-auto max-w-6xl px-6">
30        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-20">
31          {/* Left - Content */}
32          <div>
33            <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
34              For Developers
35            </p>
36            <h2 className="mb-6 text-3xl font-light tracking-tight text-foreground sm:text-4xl">
37              Built for builders
38            </h2>
39            <p className="mb-12 text-base font-light leading-relaxed text-muted-foreground">
40              A complete toolkit designed with developers in mind. From quick
41              prototypes to production-ready applications.
42            </p>
43
44            {/* Feature List */}
45            <div className="space-y-8">
46              {features.map((feature, index) => (
47                <div key={index} className="group">
48                  <div className="mb-3 flex items-center gap-4">
49                    <span className="border border-border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
50                      {feature.label}
51                    </span>
52                    <h3 className="text-base font-light tracking-wide text-foreground">
53                      {feature.title}
54                    </h3>
55                  </div>
56                  <p className="pl-14 text-sm font-light leading-relaxed text-muted-foreground">
57                    {feature.description}
58                  </p>
59                </div>
60              ))}
61            </div>
62
63            {/* CTA */}
64            <div className="mt-12">
65              <a
66                href="#"
67                className="inline-flex items-center gap-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
68              >
69                Read the Docs
70                <svg
71                  className="h-3 w-3"
72                  fill="none"
73                  stroke="currentColor"
74                  viewBox="0 0 24 24"
75                >
76                  <path
77                    strokeLinecap="round"
78                    strokeLinejoin="round"
79                    strokeWidth={1}
80                    d="M14 5l7 7m0 0l-7 7m7-7H3"
81                  />
82                </svg>
83              </a>
84            </div>
85          </div>
86
87          {/* Right - Code Preview */}
88          <div className="relative">
89            <div className="border border-border bg-muted/50 p-6">
90              {/* Window Header */}
91              <div className="mb-6 flex items-center gap-2">
92                <div className="h-2 w-2 rounded-full bg-foreground/10" />
93                <div className="h-2 w-2 rounded-full bg-foreground/10" />
94                <div className="h-2 w-2 rounded-full bg-foreground/10" />
95              </div>
96
97              {/* Code */}
98              <pre className="overflow-x-auto text-sm">
99                <code className="font-mono">
100                  <span className="text-muted-foreground">{"// Install the SDK"}</span>
101                  {"\n"}
102                  <span className="text-foreground/70">npm install</span>{" "}
103                  <span className="text-muted-foreground">@platform/sdk</span>
104                  {"\n\n"}
105                  <span className="text-muted-foreground">{"// Initialize"}</span>
106                  {"\n"}
107                  <span className="text-foreground/70">import</span>{" "}
108                  <span className="text-muted-foreground">{"{ Platform }"}</span>{" "}
109                  <span className="text-foreground/70">from</span>{" "}
110                  <span className="text-muted-foreground">&apos;@platform/sdk&apos;</span>
111                  {"\n\n"}
112                  <span className="text-foreground/70">const</span>{" "}
113                  <span className="text-foreground/60">client</span>{" "}
114                  <span className="text-foreground/70">=</span>{" "}
115                  <span className="text-foreground/70">new</span>{" "}
116                  <span className="text-foreground/60">Platform</span>
117                  <span className="text-muted-foreground">({"{"}</span>
118                  {"\n"}
119                  {"  "}
120                  <span className="text-muted-foreground">apiKey:</span>{" "}
121                  <span className="text-muted-foreground">process.env.API_KEY</span>
122                  {"\n"}
123                  <span className="text-muted-foreground">{"})"}</span>
124                  {"\n\n"}
125                  <span className="text-muted-foreground">{"// Deploy"}</span>
126                  {"\n"}
127                  <span className="text-foreground/70">await</span>{" "}
128                  <span className="text-foreground/60">client</span>
129                  <span className="text-muted-foreground">.deploy()</span>
130                </code>
131              </pre>
132            </div>
133
134            {/* Decorative corner */}
135            <div className="absolute -bottom-2 -right-2 h-4 w-4 border-b border-r border-border" />
136          </div>
137        </div>
138      </div>
139    </section>
140  );
141}