Template Open Agents.

1'use client';
2
3import { useState } from 'react';
4import { motion } from 'framer-motion';
5import { ChevronRight, CodeXml, Sun, Moon } from 'lucide-react';
6import Link from "next/link";
7
8const fadeInUp = {
9    initial: { opacity: 0, y: 20 },
10    whileInView: { opacity: 1, y: 0 },
11    viewport: { once: true },
12    transition: { duration: 0.6 }
13};
14
15const staggerContainer = {
16    initial: { opacity: 0 },
17    whileInView: { opacity: 1 },
18    viewport: { once: true },
19    transition: { staggerChildren: 0.1, delayChildren: 0.2 }
20};
21
22const staggerItem = {
23    initial: { opacity: 0, y: 10 },
24    whileInView: { opacity: 1, y: 0 },
25    transition: { duration: 0.5 }
26};
27
28export default function OpenAgents() {
29    const [dark, setDark] = useState(false);
30
31    const toggle = () => {
32        setDark(!dark);
33        document.documentElement.classList.toggle('dark', !dark);
34    };
35
36    const bg = dark ? 'bg-black' : 'bg-white';
37    const text = dark ? 'text-white' : 'text-black';
38    const border = dark ? 'border-white/10' : 'border-black/10';
39    const muted = dark ? 'text-white/50' : 'text-black/50';
40    const subtle = dark ? 'text-white/70' : 'text-black/70';
41    const btnPrimary = dark ? 'bg-white text-black hover:bg-white/90' : 'bg-black text-white hover:bg-black/80';
42    const btnOutline = dark ? 'border-white/20 hover:border-white/60' : 'border-black/20 hover:border-black/60';
43    const cardBg = dark ? 'bg-white/5' : 'bg-black/5';
44    const logoSrc = dark
45        ? "https://bagui.vercel.app/faviconblack.png"
46        : "https://bagui.vercel.app/faviconwhite.png";
47
48    return (
49        <div className={`min-h-screen ${bg} ${text} transition-colors duration-300`}>
50            {/* Navigation */}
51            <nav className={`sticky top-0 z-50 border-b ${border} ${bg}/80 backdrop-blur-md`}>
52                <div className={`max-w-7xl mx-auto px-6 h-16 flex items-center justify-between border-x ${border}`}>
53                    <div className="flex items-center gap-3 shrink-0">
54                        <Link href="/" className="flex items-center gap-2">
55                            <img src={logoSrc} alt="BagUI Logo" width={30} height={30} />
56                            <span className={`text-sm font-semibold tracking-tight ${text}`}>Bag\Ui</span>
57                        </Link>
58                        <Link
59                            href="https://x.com/anelkabag"
60                            target="_blank"
61// … truncated