longtail-financial-website/app/research/page.tsx

132 lines
6.3 KiB
TypeScript

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { ExternalLink } from "lucide-react"
import Image from "next/image"
const articles = [
{
title: "On Nature 2.0: A Token Engineering Framework",
description: "A token engineering framework for designing on-chain behaviour of intelligent agents",
url: "https://shawnltf.medium.com/on-nature-2-0-a-token-engineering-framework-for-designing-on-chain-behaviour-of-intelligent-agents-432a266e5af1",
image: "/nature-technology-artificial-intelligence-network.jpg",
},
{
title: "Longtail Token: Block Rewards for Evolution Strategies",
description: "Exploring block rewards for evolution strategies in financial machine learning",
url: "https://shawnltf.medium.com/longtail-token-block-rewards-for-evolution-strategies-in-financial-machine-learning-6491bddad83f",
image: "/blockchain-tokens-machine-learning-evolution.jpg",
},
{
title: "Longtail Financial: Exposure to the Singularity",
description: "Understanding how Longtail Financial positions itself in relation to technological singularity",
url: "https://shawnltf.medium.com/longtail-financial-is-exposure-to-the-singularity-d345b1c46a5c",
image: "/technological-singularity-future-ai-exponential.jpg",
},
{
title: "Solarpunk: A Regenerative Land Management Framework",
description: "A framework for economical carbon neutrality through regenerative land management",
url: "https://shawnltf.medium.com/solarpunk-a-regenerative-land-management-framework-for-economical-carbon-neutrality-499479e6c07e",
image: "/solarpunk-green-sustainable-nature-renewable-energ.jpg",
},
{
title: "Token Engineering in Our Heritage",
description: "What we can learn from ancient and modern indigenous cultures about token engineering",
url: "https://medium.com/token-engineering-commons/token-engineering-in-our-heritage-what-we-can-learn-from-ancient-and-modern-indigenous-cultures-fb4961a8cd24",
image: "/indigenous-culture-heritage-community-collaboratio.jpg",
},
{
title: "DAOs: The Latest Iteration in Human Collaboration",
description: "Exploring decentralized autonomous organizations as the next evolution of human cooperation",
url: "https://medium.com/longtail-financial/daos-the-latest-iteration-in-human-collaboration-5db2dde7a984",
image: "/dao-collaboration-decentralized-network-community.jpg",
},
{
title: "Looking for Flexible Work? Join a DAO",
description: "Discover flexible work-from-home opportunities through decentralized autonomous organizations",
url: "https://medium.com/longtail-financial/looking-for-a-flexible-work-from-home-opportunity-join-a-dao-dd55d81327df",
image: "/remote-work-flexibility-digital-nomad-collaboratio.jpg",
},
{
title: "Introducing Longtail Financial's ReFi Bootcamp",
description: "Let's engineer a brighter future together with regenerative finance education",
url: "https://medium.com/longtail-financial/lets-engineer-a-brighter-future-together-introducing-longtail-financial-s-refi-bootcamp-daf1323a8ed4",
image: "/education-bootcamp-learning-regenerative-finance.jpg",
},
{
title: "Healing the Earth by Healing the Economy",
description: "Could the blockchain help us create a regenerative economic system?",
url: "https://medium.com/longtail-financial/to-heal-the-earth-we-must-heal-the-economy-could-the-blockchain-help-us-get-there-e48072bcb697",
image: "/earth-healing-regenerative-economy-sustainability.jpg",
},
]
export default function ResearchPage() {
return (
<div className="min-h-screen bg-white">
<Header />
{/* Hero Section */}
<section className="px-6 pt-20 pb-16 bg-gradient-to-b from-gray-50 to-white">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 text-balance">
Research & Resources
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
Explore our thought leadership on token engineering, regenerative finance, DAOs, and the future of economic
systems.
</p>
</div>
</section>
{/* Articles Grid */}
<section className="px-6 py-16">
<div className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{articles.map((article, index) => (
<Card
key={index}
className="bg-white border border-gray-200 hover:shadow-lg transition-shadow group cursor-pointer overflow-hidden"
>
<a href={article.url} target="_blank" rel="noopener noreferrer" className="block h-full">
<div className="relative w-full h-48 bg-gray-100 overflow-hidden">
<Image
src={article.image || "/placeholder.svg"}
alt={article.title}
fill
className="object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
<CardContent className="p-6 flex flex-col">
<div className="flex items-start justify-between mb-4">
<div className="bg-orange-100 text-orange-600 px-3 py-1 rounded-full text-xs font-semibold">
Article
</div>
<ExternalLink className="w-4 h-4 text-gray-400 group-hover:text-orange-500 transition-colors" />
</div>
<h3 className="text-xl font-bold text-gray-900 mb-3 text-balance group-hover:text-orange-600 transition-colors">
{article.title}
</h3>
<p className="text-gray-600 leading-relaxed flex-grow">{article.description}</p>
<div className="mt-4 pt-4 border-t border-gray-100">
<span className="text-sm text-orange-600 font-semibold group-hover:underline">
Read on Medium
</span>
</div>
</CardContent>
</a>
</Card>
))}
</div>
</div>
</section>
<Footer />
</div>
)
}