62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { Card } from "@/components/ui/card"
|
|
import { Users, Lightbulb, Code, BookOpen } from "lucide-react"
|
|
|
|
export function AboutSection() {
|
|
const values = [
|
|
{
|
|
icon: Users,
|
|
title: "Collaborative",
|
|
description:
|
|
"A diverse mix of expertise spanning systems engineering, mathematical modeling, economics, and data science.",
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Innovative",
|
|
description: "Driving innovation that broadens the potential applications of programmable financial primitives.",
|
|
},
|
|
{
|
|
icon: Code,
|
|
title: "Open Source",
|
|
description:
|
|
"Committed to building reliable tooling that empowers projects and developers in the Web3 ecosystem.",
|
|
},
|
|
{
|
|
icon: BookOpen,
|
|
title: "Educational",
|
|
description:
|
|
"Simplifying the understanding and implementation of bonding curves to democratize these complex concepts.",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="max-w-2xl mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">About the BCRG</h2>
|
|
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
|
|
The Bonding Curve Research Group is an independent, decentralized collective united in our dedication to
|
|
advancing the understanding and application of bonding curves in crypto-economics. We bring together
|
|
expertise from multiple disciplines to create tools and knowledge that benefit the entire Web3 community.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{values.map((value, index) => (
|
|
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 rounded-lg bg-accent/10">
|
|
<value.icon className="h-6 w-6 text-accent" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">{value.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">{value.description}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|