69 lines
2.8 KiB
TypeScript
69 lines
2.8 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="relative py-20 px-4 sm:px-6 lg:px-8 bg-card/30 overflow-hidden">
|
|
<div className="absolute top-10 left-20 w-80 h-80 bg-[var(--neon-orange)] rounded-full blur-[120px] opacity-15 animate-pulse" />
|
|
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
<div className="max-w-2xl mx-auto mb-16 text-center">
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-orange text-[var(--neon-orange-bright)]">
|
|
About the BCRG
|
|
</h2>
|
|
<p className="text-lg text-foreground/80 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 max-w-5xl mx-auto">
|
|
{values.map((value, index) => (
|
|
<Card
|
|
key={index}
|
|
className="p-6 bg-card/50 border-2 border-neon-orange hover:shadow-[0_0_30px_rgba(255,140,0,0.4)] transition-all"
|
|
>
|
|
<div className="flex flex-col items-center text-center gap-4">
|
|
<div className="p-2 rounded-lg bg-[var(--neon-orange)]/20 border border-[var(--neon-orange)]">
|
|
<value.icon className="h-6 w-6 text-[var(--neon-orange-bright)]" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2 text-[var(--neon-orange)]">{value.title}</h3>
|
|
<p className="text-foreground/70 leading-relaxed">{value.description}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|