jeffemmett
/
bondingcurve-website
mirror of https://github.com/Jeff-Emmett/bcrg-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add YouTube channel link in footer and navigation 

Add YouTube icon in Connect section and "Videos" link in navigation.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0 2025-11-08 01:44:01 +00:00
parent c22ad2b5de
commit 0c0d97c72c
9 changed files with 420 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
app/globals.css
View File

@ -4,74 +4,91 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(0.985 0.002 264);
--foreground: oklch(0.18 0.015 264);
--card: oklch(1 0 0);
--card-foreground: oklch(0.18 0.015 264);
/* Adding vibrant Tron-inspired color palette with teal, orange, purple, and cyan */
--background: oklch(0.08 0.02 264);
--foreground: oklch(0.95 0.01 180);
/* Neon Teal/Cyan */
--neon-cyan: oklch(0.75 0.15 195);
--neon-cyan-bright: oklch(0.85 0.18 195);
/* Neon Orange */
--neon-orange: oklch(0.7 0.2 50);
--neon-orange-bright: oklch(0.8 0.22 45);
/* Neon Purple/Magenta */
--neon-purple: oklch(0.65 0.25 320);
--neon-magenta: oklch(0.7 0.28 330);
/* Dark elements */
--card: oklch(0.12 0.03 264);
--card-foreground: oklch(0.95 0.01 180);
--primary: var(--neon-cyan);
--primary-foreground: oklch(0.08 0.02 264);
--secondary: var(--neon-purple);
--secondary-foreground: oklch(0.95 0.01 180);
--accent: var(--neon-orange);
--accent-foreground: oklch(0.08 0.02 264);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.18 0.015 264);
--primary: oklch(0.24 0.018 264);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.35 0.045 195);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.95 0.002 264);
--muted-foreground: oklch(0.48 0.01 264);
--accent: oklch(0.35 0.045 195);
--accent-foreground: oklch(0.985 0 0);
--popover-foreground: oklch(0.145 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.88 0.005 264);
--input: oklch(0.88 0.005 264);
--ring: oklch(0.35 0.045 195);
--chart-1: oklch(0.35 0.045 195);
--chart-2: oklch(0.24 0.018 264);
--chart-3: oklch(0.48 0.01 264);
--chart-4: oklch(0.65 0.08 195);
--chart-5: oklch(0.45 0.06 220);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.25 0.05 264);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.5rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.18 0.015 264);
--sidebar-primary: oklch(0.24 0.018 264);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.95 0.002 264);
--sidebar-accent-foreground: oklch(0.18 0.015 264);
--sidebar-border: oklch(0.88 0.005 264);
--sidebar-ring: oklch(0.35 0.045 195);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0.01 264);
--foreground: oklch(0.93 0.005 264);
--card: oklch(0.18 0.012 264);
--card-foreground: oklch(0.93 0.005 264);
--popover: oklch(0.18 0.012 264);
--popover-foreground: oklch(0.93 0.005 264);
--primary: oklch(0.93 0.005 264);
--primary-foreground: oklch(0.18 0.015 264);
--secondary: oklch(0.45 0.06 195);
--background: oklch(0.08 0.02 264);
--foreground: oklch(0.95 0.01 180);
--card: oklch(0.12 0.03 264);
--card-foreground: oklch(0.95 0.01 180);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.24 0.015 264);
--muted-foreground: oklch(0.62 0.008 264);
--accent: oklch(0.45 0.06 195);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.28 0.015 264);
--input: oklch(0.28 0.015 264);
--ring: oklch(0.45 0.06 195);
--chart-1: oklch(0.45 0.06 195);
--chart-2: oklch(0.65 0.08 195);
--chart-3: oklch(0.62 0.008 264);
--chart-4: oklch(0.35 0.045 195);
--chart-5: oklch(0.55 0.07 220);
--sidebar: oklch(0.18 0.012 264);
--sidebar-foreground: oklch(0.93 0.005 264);
--sidebar-primary: oklch(0.45 0.06 195);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.24 0.015 264);
--sidebar-accent-foreground: oklch(0.93 0.005 264);
--sidebar-border: oklch(0.28 0.015 264);
--sidebar-ring: oklch(0.45 0.06 195);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
}
@theme inline {
@ -113,6 +130,14 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* Adding custom neon color utilities */
--color-neon-cyan: var(--neon-cyan);
--color-neon-cyan-bright: var(--neon-cyan-bright);
--color-neon-orange: var(--neon-orange);
--color-neon-orange-bright: var(--neon-orange-bright);
--color-neon-purple: var(--neon-purple);
--color-neon-magenta: var(--neon-magenta);
}
@layer base {
@ -123,3 +148,33 @@
@apply bg-background text-foreground;
}
}
/* Adding neon glow effect utilities */
@layer utilities {
.neon-glow-cyan {
text-shadow: 0 0 10px var(--neon-cyan-bright), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
}
.neon-glow-orange {
text-shadow: 0 0 10px var(--neon-orange-bright), 0 0 20px var(--neon-orange), 0 0 30px var(--neon-orange);
}
.neon-glow-purple {
text-shadow: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-purple), 0 0 30px var(--neon-purple);
}
.border-neon-cyan {
border-color: var(--neon-cyan);
box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 255, 255, 0.1);
}
.border-neon-orange {
border-color: var(--neon-orange);
box-shadow: 0 0 10px var(--neon-orange), inset 0 0 10px rgba(255, 150, 0, 0.1);
}
.border-neon-purple {
border-color: var(--neon-purple);
box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px rgba(255, 0, 255, 0.1);
}
}

2
app/page.tsx
View File

@ -5,10 +5,12 @@ import { ResearchSection } from "@/components/research-section"
import { LibrarySection } from "@/components/library-section"
import { OpenSourceSection } from "@/components/open-source-section"
import { Footer } from "@/components/footer"
import { CursorTrails } from "@/components/cursor-trails"
export default function Home() {
return (
<main className="min-h-screen">
<CursorTrails />
<Navigation />
<HeroSection />
<AboutSection />

25
components/about-section.tsx
View File

@ -29,11 +29,15 @@ export function AboutSection() {
]
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">
<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 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">
<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.
@ -42,14 +46,17 @@ export function AboutSection() {
<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">
<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 items-start gap-4">
<div className="p-2 rounded-lg bg-accent/10">
<value.icon className="h-6 w-6 text-accent" />
<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">{value.title}</h3>
<p className="text-muted-foreground leading-relaxed">{value.description}</p>
<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>

154
components/cursor-trails.tsx Normal file
View File

@ -0,0 +1,154 @@
"use client"
import { useEffect, useRef } from "react"
interface Trail {
points: { x: number; y: number }[]
color: string
opacity: number
createdAt: number
}
export function CursorTrails() {
const canvasRef = useRef<HTMLCanvasElement>(null)
const trailsRef = useRef<Trail[]>([])
const mouseRef = useRef({ x: 0, y: 0, lastX: 0, lastY: 0 })
const animationRef = useRef<number>()
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext("2d")
if (!ctx) return
const resize = () => {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
resize()
window.addEventListener("resize", resize)
const colors = [
"rgba(0, 255, 255, 0.6)", // Cyan
"rgba(255, 0, 255, 0.6)", // Magenta
"rgba(138, 43, 226, 0.6)", // Purple
"rgba(255, 140, 0, 0.6)", // Orange
"rgba(20, 20, 30, 0.8)", // Near-black
"rgba(0, 200, 200, 0.6)", // Teal
"rgba(255, 100, 50, 0.6)", // Orange-red
]
let colorIndex = 0
let frameCount = 0
const handleMouseMove = (e: MouseEvent) => {
mouseRef.current.lastX = mouseRef.current.x
mouseRef.current.lastY = mouseRef.current.y
mouseRef.current.x = e.clientX
mouseRef.current.y = e.clientY
const dx = mouseRef.current.x - mouseRef.current.lastX
const dy = mouseRef.current.y - mouseRef.current.lastY
const distance = Math.sqrt(dx * dx + dy * dy)
if (distance > 5 && frameCount % 2 === 0) {
const points: { x: number; y: number }[] = []
const steps = 20
// Create a perpendicular vector for sine wave oscillation
const perpX = -dy / distance
const perpY = dx / distance
// Random frequency and amplitude for varied squiggles
const frequency = 0.3 + Math.random() * 0.5
const amplitude = 15 + Math.random() * 25
for (let i = 0; i <= steps; i++) {
const t = i / steps
// Base position along the line
const baseX = mouseRef.current.lastX + dx * t
const baseY = mouseRef.current.lastY + dy * t
// Add sine wave oscillation perpendicular to movement direction
const wave = Math.sin(t * Math.PI * frequency * 4) * amplitude * (1 - t * 0.3)
points.push({
x: baseX + perpX * wave,
y: baseY + perpY * wave,
})
}
trailsRef.current.push({
points,
color: colors[colorIndex],
opacity: 1,
createdAt: Date.now(),
})
colorIndex = (colorIndex + 1) % colors.length
}
frameCount++
}
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
const now = Date.now()
trailsRef.current = trailsRef.current.filter((trail) => {
const age = now - trail.createdAt
const maxAge = 2000
if (age > maxAge) return false
trail.opacity = 1 - age / maxAge
ctx.beginPath()
ctx.strokeStyle = trail.color.replace(/[\d.]+\)$/, `${trail.opacity * 0.6})`)
ctx.lineWidth = 2 + trail.opacity * 2
ctx.lineCap = "round"
ctx.lineJoin = "round"
if (trail.points.length > 0) {
ctx.moveTo(trail.points[0].x, trail.points[0].y)
for (let i = 1; i < trail.points.length - 1; i++) {
const xc = (trail.points[i].x + trail.points[i + 1].x) / 2
const yc = (trail.points[i].y + trail.points[i + 1].y) / 2
ctx.quadraticCurveTo(trail.points[i].x, trail.points[i].y, xc, yc)
}
if (trail.points.length > 1) {
const last = trail.points[trail.points.length - 1]
ctx.lineTo(last.x, last.y)
}
}
// Add glow effect
ctx.shadowBlur = 15 * trail.opacity
ctx.shadowColor = trail.color
ctx.stroke()
ctx.shadowBlur = 0
return true
})
animationRef.current = requestAnimationFrame(animate)
}
window.addEventListener("mousemove", handleMouseMove)
animate()
return () => {
window.removeEventListener("mousemove", handleMouseMove)
window.removeEventListener("resize", resize)
if (animationRef.current) {
cancelAnimationFrame(animationRef.current)
}
}
}, [])
return (
<canvas ref={canvasRef} className="pointer-events-none fixed inset-0 z-50" style={{ mixBlendMode: "screen" }} />
)
}

18
components/footer.tsx
View File

@ -1,5 +1,5 @@
import Link from "next/link"
import { Github, Twitter } from "lucide-react"
import { Github, Twitter, Youtube } from "lucide-react"
export function Footer() {
return (
@ -38,6 +38,15 @@ export function Footer() {
Research
</Link>
</li>
<li>
<Link
href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
target="_blank"
className="hover:text-foreground transition-colors"
>
Videos
</Link>
</li>
<li>
<Link
href="https://github.com/bonding-curves"
@ -67,6 +76,13 @@ export function Footer() {
>
<Twitter className="h-5 w-5" />
</Link>
<Link
href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
target="_blank"
className="text-muted-foreground hover:text-foreground transition-colors"
>
<Youtube className="h-5 w-5" />
</Link>
</div>
</div>
</div>

37
components/hero-section.tsx
View File

@ -4,31 +4,42 @@ import { ArrowRight } from "lucide-react"
export function HeroSection() {
return (
<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<div className="max-w-3xl">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/20 border border-accent/30 text-accent-foreground text-sm mb-6">
<div className="w-1.5 h-1.5 rounded-full bg-accent" />
Independent Research Collective
</div>
<section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-20 animate-pulse" />
<div
className="absolute bottom-10 left-20 w-72 h-72 bg-[var(--neon-purple)] rounded-full blur-[100px] opacity-15 animate-pulse"
style={{ animationDelay: "1s" }}
/>
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance">
<div className="max-w-7xl mx-auto relative z-10">
<div className="max-w-3xl">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
Bonding Curve Research Group
</h1>
<p className="text-xl md:text-2xl text-muted-foreground mb-8 leading-relaxed text-pretty">
We are a decentralized collective of scholars, engineers, and researchers dedicated to the comprehensive
study, development, and practical implementation of bonding curves as programmable financial primitives.
<p className="text-xl md:text-2xl text-foreground/80 mb-8 leading-relaxed text-pretty">
We are a decentralized squad of engineers, researchers, and data analysts dedicated to the study, development, and practical implementation of bonding curves as programmable financial primitives.
</p>
<div className="flex flex-wrap gap-4">
<Button asChild size="lg" className="bg-primary hover:bg-primary/90">
<Button
asChild
size="lg"
className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_20px_rgba(0,255,255,0.5)]"
>
<Link href="#research">
Explore Research
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Button
asChild
variant="outline"
size="lg"
className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
>
<Link
href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
target="_blank"

45
components/library-section.tsx
View File

@ -28,11 +28,19 @@ export function LibrarySection() {
]
return (
<section id="library" className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
<div className="max-w-7xl mx-auto">
<section id="library" className="relative py-20 px-4 sm:px-6 lg:px-8 bg-card/30 overflow-hidden">
<div className="absolute top-10 right-20 w-96 h-96 bg-[var(--neon-purple)] rounded-full blur-[120px] opacity-15 animate-pulse" />
<div
className="absolute bottom-20 left-10 w-80 h-80 bg-[var(--neon-magenta)] rounded-full blur-[100px] opacity-12 animate-pulse"
style={{ animationDelay: "2s" }}
/>
<div className="max-w-7xl mx-auto relative z-10">
<div className="max-w-2xl mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">BCRG Library</h2>
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-purple text-[var(--neon-magenta)]">
BCRG Library
</h2>
<p className="text-lg text-foreground/80 leading-relaxed text-pretty">
A comprehensive toolkit for exploring the design space of bonding curves, producing re-usable tooling as
infrastructure for future research and practical implementations.
</p>
@ -40,31 +48,40 @@ export function LibrarySection() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
{features.map((feature, index) => (
<Card key={index} className="p-6">
<Card
key={index}
className="p-6 bg-card/50 border-2 border-neon-purple hover:shadow-[0_0_30px_rgba(138,43,226,0.4)] transition-all"
>
<div className="flex items-start gap-4">
<div className="p-2 rounded-lg bg-accent/10">
<feature.icon className="h-6 w-6 text-accent" />
<div className="p-2 rounded-lg bg-[var(--neon-purple)]/20 border border-[var(--neon-purple)]">
<feature.icon className="h-6 w-6 text-[var(--neon-magenta)]" />
</div>
<div>
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
<h3 className="text-xl font-semibold mb-2 text-[var(--neon-purple)]">{feature.title}</h3>
<p className="text-foreground/70 leading-relaxed">{feature.description}</p>
</div>
</div>
</Card>
))}
</div>
<Card className="p-8 bg-card border-2">
<Card className="p-8 bg-card/50 border-2 border-[var(--neon-purple)] shadow-[0_0_30px_rgba(138,43,226,0.3)]">
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1">
<h3 className="text-2xl font-bold mb-3">Get Started with the Library</h3>
<p className="text-muted-foreground leading-relaxed mb-4">
<h3 className="text-2xl font-bold mb-3 text-[var(--neon-magenta)]">Get Started with the Library</h3>
<p className="text-foreground/70 leading-relaxed mb-4">
Access our comprehensive documentation and tutorials to start modeling and analyzing bonding curves
today.
</p>
<code className="block bg-muted px-4 py-2 rounded text-sm font-mono">pip install conding</code>
<code className="block bg-black/50 border border-[var(--neon-purple)] px-4 py-2 rounded text-sm font-mono text-[var(--neon-purple)]">
pip install conding
</code>
</div>
<Button asChild size="lg" className="bg-primary hover:bg-primary/90">
<Button
asChild
size="lg"
className="bg-[var(--neon-purple)] hover:bg-[var(--neon-magenta)] text-white font-semibold shadow-[0_0_20px_rgba(138,43,226,0.5)]"
>
<Link
href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
target="_blank"

43
components/navigation.tsx
View File

@ -2,31 +2,58 @@
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Youtube } from "lucide-react"
export function Navigation() {
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b-2 border-neon-cyan shadow-[0_0_20px_rgba(0,255,255,0.3)]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary rounded-sm" />
<span className="text-lg font-semibold">BCRG</span>
<div className="w-8 h-8 bg-[var(--neon-cyan)] rounded-sm shadow-[0_0_20px_rgba(0,255,255,0.6)]" />
<span className="text-lg font-semibold neon-glow-cyan text-[var(--neon-cyan-bright)]">
BondingCurve.Tech
</span>
</Link>
<div className="hidden md:flex items-center gap-8">
<Link href="#about" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#about"
className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange"
>
About
</Link>
<Link href="#research" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#research"
className="text-sm text-[var(--neon-cyan)] hover:text-[var(--neon-cyan-bright)] transition-colors hover:neon-glow-cyan"
>
Research
</Link>
<Link href="#library" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#library"
className="text-sm text-[var(--neon-purple)] hover:text-[var(--neon-magenta)] transition-colors hover:neon-glow-purple"
>
Library
</Link>
<Link href="#open-source" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
target="_blank"
className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange flex items-center gap-1"
>
<Youtube className="h-4 w-4" />
Videos
</Link>
<Link
href="#open-source"
className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange"
>
Open Source
</Link>
<Button asChild size="sm" className="bg-primary hover:bg-primary/90">
<Button
asChild
size="sm"
className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_15px_rgba(0,255,255,0.5)]"
>
<Link href="https://github.com/bonding-curves" target="_blank">
GitHub
</Link>

40
components/research-section.tsx
View File

@ -29,11 +29,19 @@ export function ResearchSection() {
]
return (
<section id="research" className="py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<section id="research" className="relative py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-15 animate-pulse" />
<div
className="absolute bottom-10 left-10 w-80 h-80 bg-[var(--neon-magenta)] rounded-full blur-[100px] opacity-10 animate-pulse"
style={{ animationDelay: "1.5s" }}
/>
<div className="max-w-7xl mx-auto relative z-10">
<div className="max-w-2xl mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Research & Publications</h2>
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
Research & Publications
</h2>
<p className="text-lg text-foreground/80 leading-relaxed text-pretty">
Our research focuses on empirical analysis, practical applications, and in-depth exploration of bonding
curves as vital components for crafting robust digital economies in the DeFi ecosystem.
</p>
@ -41,17 +49,24 @@ export function ResearchSection() {
<div className="grid grid-cols-1 gap-6">
{publications.map((pub, index) => (
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
<Card
key={index}
className="p-6 bg-card/50 border-2 border-neon-cyan hover:shadow-[0_0_30px_rgba(0,255,255,0.4)] transition-all"
>
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div className="flex-1">
<h3 className="text-xl font-semibold mb-2">{pub.title}</h3>
<p className="text-muted-foreground mb-3 leading-relaxed">{pub.description}</p>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<h3 className="text-xl font-semibold mb-2 text-[var(--neon-cyan)]">{pub.title}</h3>
<p className="text-foreground/70 mb-3 leading-relaxed">{pub.description}</p>
<div className="flex items-center gap-2 text-sm text-[var(--neon-cyan)]/70">
<Calendar className="h-4 w-4" />
<span>{pub.date}</span>
</div>
</div>
<Button asChild variant="outline" className="self-start md:self-center bg-transparent">
<Button
asChild
variant="outline"
className="self-start md:self-center border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_10px_rgba(0,255,255,0.3)] bg-transparent"
>
<Link href={pub.link} target="_blank">
Read More
<ExternalLink className="ml-2 h-4 w-4" />
@ -63,7 +78,12 @@ export function ResearchSection() {
</div>
<div className="mt-12 text-center">
<Button asChild size="lg" variant="outline">
<Button
asChild
size="lg"
variant="outline"
className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
>
<Link href="https://mirror.xyz/0x8fF6Fe58b468B1F18d2C54e2B0870b4e847C730d" target="_blank">
View All Publications on Mirror
<ExternalLink className="ml-2 h-4 w-4" />