アバウトセクション

1import Image from "next/image";
2import Link from "next/link";
3
4export function AboutSection001() {
5  const stats = [
6    { value: "2018", label: "Founded" },
7    { value: "50+", label: "Team Members" },
8    { value: "12", label: "Countries" },
9    { value: "500+", label: "Projects" },
10  ];
11
12  return (
13    <section className="bg-background py-24 border-t border-border">
14      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
15        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-24">
16          {/* Content */}
17          <div>
18            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
19              About Us
20            </span>
21            <h2 className="mt-4 text-2xl font-semibold tracking-wide text-foreground sm:text-3xl lg:text-4xl">
22              We build digital experiences that matter
23            </h2>
24            <p className="mt-6 text-base leading-relaxed tracking-wide text-muted-foreground">
25              Founded in 2018, we are a team of designers, developers, and strategists
26              passionate about creating exceptional digital products. We believe in the
27              power of thoughtful design and clean code to transform businesses.
28            </p>
29            <p className="mt-4 text-base leading-relaxed tracking-wide text-muted-foreground">
30              Our approach combines deep technical expertise with a keen eye for design,
31              ensuring every project we deliver not only looks beautiful but performs
32              flawlessly.
33            </p>
34
35            {/* Stats */}
36            <div className="mt-12 grid grid-cols-2 gap-8 sm:grid-cols-4">
37              {stats.map((stat) => (
38                <div key={stat.label}>
39                  <p className="text-2xl font-semibold tracking-wide text-foreground">
40                    {stat.value}
41                  </p>
42                  <p className="mt-1 text-xs tracking-widest text-muted-foreground uppercase">
43                    {stat.label}
44                  </p>
45                </div>
46              ))}
47            </div>
48
49            {/* CTA */}
50            <div className="mt-12">
51              <Link
52                href="#"
53                className="inline-flex items-center gap-2 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:text-muted-foreground"
54              >
55                Learn more about our story
56                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
58                </svg>
59              </Link>
60            </div>
61          </div>
62
63          {/* Image */}
64          <div className="relative">
65            <div className="relative aspect-[4/5] overflow-hidden rounded-xl border border-border">
66              <Image
67                src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=1000&fit=crop"
68                alt="Team collaboration"
69                fill
70                className="object-cover"
71              />
72            </div>
73            {/* Decorative Element */}
74            <div className="absolute -bottom-6 -left-6 -z-10 h-full w-full rounded-xl border border-border/30" />
75          </div>
76        </div>
77      </div>
78    </section>
79  );
80}