Files
"use client"
import { useEffect, useRef, useState } from "react"
export default function Home() {
const [activeSection, setActiveSection] = useState("")
const [selectedCategory, setSelectedCategory] = useState("all")
const [expandedChanges, setExpandedChanges] = useState<Set<string>>(new Set())
const sectionsRef = useRef<(HTMLElement | null)[]>([])
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add(
"animate-in",
"fade-in-0",
"slide-in-from-top-2"
)
setActiveSection(entry.target.id)
}
})
},
{ threshold: 0.3, rootMargin: "0px 0px -20% 0px" }
)
// Add initial animation classes to sections that are already visible
sectionsRef.current.forEach((section) => {
if (section) {
const rect = section.getBoundingClientRect()
const isVisible = rect.top < window.innerHeight && rect.bottom > 0
if (isVisible) {
section.classList.add(
"animate-in",
"fade-in-0",
"slide-in-from-top-2"
)
}
observer.observe(section)
}
})
return () => observer.disconnect()
}, [])
const toggleChange = (changeId: string) => {
setExpandedChanges((prev) => {
const newSet = new Set(prev)
if (newSet.has(changeId)) {
newSet.delete(changeId)
} else {
newSet.add(changeId)
}
return newSet
})
}
const changelogEntries = [
{
version: "2.1.0",
date: "January 15, 2025",
summary:
"Multi-agent orchestration, custom tool integration, and 40% faster response times.",
changes: [
{
category: "feature",
title: "Multi-Agent Orchestration",
description:
"Agents can now coordinate with each other to solve complex tasks. Define workflows where multiple specialized agents collaborate seamlessly.",
},
{
category: "feature",
title: "Custom Tool Integration",
description:
"Build and integrate your own tools with our new SDK. Extend agent capabilities with domain-specific functions and APIs.",
},
{
category: "improvement",
title: "40% Faster Response Times",
description:
"Optimized inference pipeline reduces latency across all agent interactions. Average response time now under 800ms.",
},
],
},
{
version: "2.0.0",
date: "December 20, 2024",
summary:
"Memory system 2.0, visual understanding, enhanced reasoning, and rate limiting fixes.",
changes: [
{
category: "feature",
title: "Memory System 2.0",
description:
"Agents now maintain long-term context across conversations. Persistent memory enables more coherent multi-session interactions.",
},
{
category: "feature",
title: "Visual Understanding",
description:
"New vision capabilities allow agents to analyze images, screenshots, and diagrams. Multimodal reasoning unlocks new use cases.",
},
{
category: "improvement",
title: "Enhanced Reasoning Engine",
description:
"Upgraded to GPT-4.5 with improved chain-of-thought processing. Better handling of complex logical tasks and edge cases.",
},
{
category: "fix",
title: "Fixed Rate Limiting Issues",
description:
"Resolved intermittent 429 errors during high-traffic periods. Implemented adaptive request throttling.",
},
],
},
{
version: "1.8.0",
date: "November 28, 2024",
summary:
"Real-time streaming, dashboard redesign, and WebSocket stability improvements.",
changes: [
{
category: "feature",
title: "Real-Time Streaming",
description:
"Agent responses now stream in real-time for improved user experience. See thinking process as it happens.",
},
{
category: "improvement",
title: "Dashboard Redesign",
description:
"Completely rebuilt analytics dashboard with better insights into agent performance and usage patterns.",
},
{
category: "fix",
title: "WebSocket Stability",
description:
"Fixed connection drops during long-running agent tasks. Improved reconnection logic and error handling.",
},
],
},
{
version: "1.7.0",
date: "October 10, 2024",
summary:
"Agent templates, improved API documentation, and token counting fixes.",
changes: [
{
category: "feature",
title: "Agent Templates",
description:
"Pre-built agent templates for common use cases. Get started faster with customer support, research, and coding assistants.",
},
{
category: "improvement",
title: "API Documentation",
description:
"Comprehensive API docs with interactive examples. New SDK guides for Python, TypeScript, and Go.",
},
{
category: "fix",
title: "Token Counting Accuracy",
description:
"Fixed discrepancies in token usage reporting. Billing now reflects actual consumption more accurately.",
},
],
},
]
const categories = [
{ id: "all", label: "All Updates" },
{ id: "feature", label: "Features" },
{ id: "improvement", label: "Improvements" },
{ id: "fix", label: "Bug Fixes" },
]
const getCategoryColor = (category: string) => {
switch (category) {
case "feature":
return "text-chart-1"
case "improvement":
return "text-chart-2"
case "fix":
return "text-chart-5"
default:
return "text-muted-foreground"
}
}
const getCategoryLabel = (category: string) => {
switch (category) {
case "feature":
return "New"
case "improvement":
return "Improved"
case "fix":
return "Fixed"
default:
return ""
}
}
const filteredEntries = changelogEntries
.map((entry) => ({
...entry,
changes:
selectedCategory === "all"
? entry.changes
: entry.changes.filter(
(change) => change.category === selectedCategory
),
}))
.filter((entry) => entry.changes.length > 0)
return (
<div className="bg-background text-foreground relative min-h-screen">
<nav className="fixed top-1/2 left-6 z-10 hidden -translate-y-1/2 lg:block">
<div className="flex flex-col gap-2">
{filteredEntries.map((entry, index) => (
<button
key={entry.version}
onClick={() =>
document
.getElementById(`v${entry.version}`)
?.scrollIntoView({ behavior: "smooth" })
}
className={`h-6 w-1.5 rounded-full transition-all duration-500 ${
activeSection === `v${entry.version}`
? "bg-foreground"
: "bg-muted-foreground/30 hover:bg-muted-foreground/60"
}`}
aria-label={`Navigate to version ${entry.version}`}
/>
))}
</div>
</nav>
<main className="mx-auto max-w-3xl px-6 sm:px-8">
<header
id="intro"
ref={(el) => {
sectionsRef.current[0] = el
}}
className="flex min-h-[70vh] items-center"
>
<div className="w-full space-y-8">
<div className="space-y-4">
<div className="space-y-2">
<div className="text-muted-foreground font-mono text-xs tracking-wider">
CHANGELOG / 2025
</div>
<h1 className="text-4xl font-light tracking-tight sm:text-5xl lg:text-6xl">
Agentic
<br />
<span className="text-muted-foreground">AI</span>
</h1>
</div>
<div className="max-w-xl space-y-4">
<p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
Building the future of
<span className="text-foreground"> autonomous agents</span>.
Track our latest
<span className="text-foreground"> features</span>,
<span className="text-foreground"> improvements</span>, and
<span className="text-foreground"> fixes</span>.
</p>
<div className="text-muted-foreground flex flex-col gap-2 text-xs sm:flex-row sm:items-center">
<div className="flex items-center gap-2">
<div className="bg-chart-2 h-1.5 w-1.5 animate-pulse rounded-full"></div>
All systems operational
</div>
<div>Last updated: Jan 15, 2025</div>
</div>
</div>
</div>
<div className="space-y-3">
<div className="text-muted-foreground font-mono text-xs">
FILTER BY
</div>
<div className="flex flex-wrap gap-2">
{categories.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id)}
className={`rounded-lg px-3 py-1.5 text-xs shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-all duration-300 ${
selectedCategory === cat.id
? "bg-foreground text-background"
: "bg-background text-foreground hover:bg-muted"
}`}
>
{cat.label}
</button>
))}
</div>
</div>
</div>
</header>
{filteredEntries.map((entry, entryIndex) => {
return (
<section
key={entry.version}
id={`v${entry.version}`}
ref={(el) => {
sectionsRef.current[entryIndex + 1] = el
}}
className="py-12 sm:py-16"
>
<div className="space-y-6">
<div className="border-border flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-end sm:justify-between">
<div className="space-y-1">
<h2 className="text-2xl font-light sm:text-3xl">
Version {entry.version}
</h2>
<div className="text-muted-foreground font-mono text-xs">
{entry.date}
</div>
</div>
<div className="text-muted-foreground flex items-center gap-2 text-xs">
<span>{entry.changes.length} updates</span>
</div>
</div>
<div className="space-y-3">
{entry.changes.map((change, changeIndex) => {
const changeId = `${entry.version}-${changeIndex}`
const isExpanded = expandedChanges.has(changeId)
return (
<article
key={changeIndex}
className="group border-border hover:border-muted-foreground/50 rounded-lg border shadow-[0px_1px_1px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-all duration-300 hover:shadow-md"
>
<button
onClick={() => toggleChange(changeId)}
className="w-full p-4 text-left sm:p-5"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-1.5">
<div className="flex items-center gap-2">
<span
className={`rounded px-1.5 py-0.5 font-mono text-[10px] ${getCategoryColor(change.category)} bg-muted`}
>
{getCategoryLabel(change.category)}
</span>
</div>
<h3 className="group-hover:text-muted-foreground text-base font-medium transition-colors duration-300 sm:text-lg">
{change.title}
</h3>
</div>
<svg
className={`text-muted-foreground h-5 w-5 flex-shrink-0 transition-transform duration-300 ${
isExpanded ? "rotate-180" : ""
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
</button>
<div
className={`overflow-hidden transition-all duration-500 ${
isExpanded
? "max-h-96 opacity-100"
: "max-h-0 opacity-0"
}`}
>
<div className="px-4 pt-0 pb-4 sm:px-5 sm:pb-5">
<p className="text-muted-foreground text-sm leading-relaxed">
{change.description}
</p>
</div>
</div>
</article>
)
})}
</div>
</div>
</section>
)
})}
<footer className="border-border border-t py-12 sm:py-16">
<div className="space-y-8">
<div className="grid gap-8 lg:grid-cols-2">
<div className="space-y-4">
<h2 className="text-xl font-light sm:text-2xl">Stay Updated</h2>
<div className="space-y-4">
<p className="text-muted-foreground text-sm leading-relaxed">
Subscribe to get notified about new features, improvements,
and important updates.
</p>
<div className="flex gap-2">
<input
type="email"
placeholder="your@email.com"
className="bg-background border-border focus:ring-ring text-foreground placeholder:text-muted-foreground flex-1 rounded-lg border px-3 py-2 text-sm shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] focus:ring-2 focus:outline-none"
/>
<button className="bg-foreground text-background rounded-lg px-4 py-2 text-sm shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-opacity duration-300 hover:opacity-90">
Subscribe
</button>
</div>
</div>
</div>
<div className="space-y-4">
<div className="text-muted-foreground font-mono text-xs">
RESOURCES
</div>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
{[
{ name: "Documentation", url: "#" },
{ name: "API Reference", url: "#" },
{ name: "Status Page", url: "#" },
{ name: "GitHub", url: "#" },
].map((link) => (
<a
key={link.name}
href={link.url}
className="group border-border hover:border-muted-foreground/50 rounded-lg border p-3 shadow-[0px_1px_1px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)] transition-all duration-300 hover:shadow-sm"
>
<div className="flex items-center justify-between">
<div className="text-foreground group-hover:text-muted-foreground text-sm transition-colors duration-300">
{link.name}
</div>
<svg
className="text-muted-foreground h-3.5 w-3.5 transform transition-transform duration-300 group-hover:translate-x-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</div>
</a>
))}
</div>
</div>
</div>
<div className="border-border flex flex-col items-start justify-between gap-4 border-t pt-6 lg:flex-row lg:items-center">
<div className="space-y-1">
<div className="text-muted-foreground text-xs">
© 2025 Agentic AI. All rights reserved.
</div>
<div className="text-muted-foreground text-[10px]">
Built by aisdktools.com
</div>
</div>
</div>
</div>
</footer>
</main>
<div className="from-background via-background/80 pointer-events-none fixed right-0 bottom-0 left-0 h-16 bg-gradient-to-t to-transparent"></div>
</div>
)
}
Professional changelog interface with version history, feature highlights, and release notes. Features chronological organization, categorized updates, and interactive filtering for transparent product evolution tracking and user communication.
marketing-changelog-1
