mzaxdandClaude
4abe6715bb
- 重构首页和项目列表页布局,优化视觉层次 - 新增 ProjectDetail、ProjectSidebar、RelatedProjects 组件 - 改进项目卡片样式,增加悬停效果 - 优化标签云和搜索栏交互体验 - 更新全局样式和 Tailwind 配置 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
335 lines
23 KiB
HTML
335 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Agent Park - AI Project Navigator</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#FFD700", // Gold/Yellow from the screenshots
|
|
"background-light": "#F5F2EB", // Warm off-white/beige from screenshots
|
|
"background-dark": "#121212", // Dark mode background
|
|
"surface-light": "#FFFFFF",
|
|
"surface-dark": "#1E1E1E",
|
|
"border-light": "#000000",
|
|
"border-dark": "#333333",
|
|
"text-light": "#000000",
|
|
"text-dark": "#E0E0E0",
|
|
},
|
|
fontFamily: {
|
|
display: ["'Space Mono'", "monospace"], // Monospace for headings/brand
|
|
sans: ["'Inter'", "sans-serif"], // Clean sans for body
|
|
},
|
|
boxShadow: {
|
|
'neo': '4px 4px 0px 0px rgba(0,0,0,1)', // Brutalist shadow
|
|
'neo-sm': '2px 2px 0px 0px rgba(0,0,0,1)',
|
|
'neo-hover': '6px 6px 0px 0px rgba(0,0,0,1)',
|
|
'neo-dark': '4px 4px 0px 0px rgba(255,215,0,0.5)',
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "0px", // Sharp corners based on the design
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>.border-thick {
|
|
border-width: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300">
|
|
<div class="bg-primary text-black text-xs font-display font-bold py-2 text-center border-b-2 border-black">
|
|
DISCOVER THE FUTURE OF AI AGENTS <span class="material-icons-outlined text-xs align-middle ml-1">arrow_forward</span>
|
|
</div>
|
|
<nav class="border-b-2 border-black dark:border-white/20 px-6 py-4 flex justify-between items-center bg-background-light dark:bg-background-dark sticky top-0 z-50">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-icons-outlined text-3xl dark:text-primary">smart_toy</span>
|
|
<span class="font-display font-bold text-xl tracking-tight">Agent Park</span>
|
|
</div>
|
|
<div class="hidden md:flex gap-8 font-display text-sm font-bold uppercase tracking-wide">
|
|
<a class="hover:underline decoration-2 underline-offset-4" href="#">Home</a>
|
|
<a class="underline decoration-2 underline-offset-4" href="#">Projects</a>
|
|
<a class="hover:underline decoration-2 underline-offset-4" href="#">Blog</a>
|
|
<a class="hover:underline decoration-2 underline-offset-4" href="#">About</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors" onclick="document.documentElement.classList.toggle('dark')">
|
|
<span class="material-icons-outlined block dark:hidden">dark_mode</span>
|
|
<span class="material-icons-outlined hidden dark:block text-primary">light_mode</span>
|
|
</button>
|
|
<span class="font-display text-xs font-bold hidden sm:inline">中文 / EN</span>
|
|
<a class="font-display text-xs font-bold border-2 border-black dark:border-white px-4 py-2 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-all shadow-neo-sm hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]" href="#">
|
|
SUBMIT PROJECT
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<main class="container mx-auto px-4 py-12 md:py-16 max-w-7xl relative">
|
|
<div class="absolute top-10 left-0 w-24 h-24 border-2 border-black dark:border-white/20 rounded-full opacity-20 pointer-events-none hidden lg:block"></div>
|
|
<div class="absolute top-20 right-10 w-32 h-20 border-2 border-black dark:border-white/20 rounded-[2rem] opacity-20 pointer-events-none transform rotate-12 hidden lg:block"></div>
|
|
<div class="text-center mb-16 relative z-10">
|
|
<h1 class="font-display text-5xl md:text-7xl font-bold mb-6 leading-tight tracking-tighter">
|
|
PROJECT <br class="md:hidden"/>NAVIGATOR
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto font-light leading-relaxed">
|
|
Discover and explore high-quality AI projects from across the web. <br class="hidden md:inline"/>Curated for developers and enthusiasts.
|
|
</p>
|
|
</div>
|
|
<div class="bg-surface-light dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 md:p-8 mb-12 shadow-neo dark:shadow-none">
|
|
<div class="flex flex-col md:flex-row gap-4 mb-8">
|
|
<div class="relative flex-grow">
|
|
<span class="material-icons-outlined absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">search</span>
|
|
<input class="w-full pl-12 pr-4 py-3 bg-white dark:bg-black border-2 border-black dark:border-white/30 focus:border-primary focus:ring-0 font-display text-sm placeholder-gray-500" placeholder="Search AI projects..." type="text"/>
|
|
</div>
|
|
<div class="relative md:w-1/4">
|
|
<select class="w-full pl-4 pr-10 py-3 bg-white dark:bg-black border-2 border-black dark:border-white/30 focus:border-primary focus:ring-0 font-display text-sm appearance-none cursor-pointer">
|
|
<option>All Categories</option>
|
|
<option>Coding Assistant</option>
|
|
<option>Image Generation</option>
|
|
<option>Automation</option>
|
|
<option>LLMs</option>
|
|
</select>
|
|
<span class="material-icons-outlined absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-gray-500">expand_more</span>
|
|
</div>
|
|
<button class="bg-primary border-2 border-black px-8 py-3 font-display font-bold text-sm uppercase hover:bg-yellow-400 transition-colors shadow-neo-sm active:shadow-none active:translate-x-[2px] active:translate-y-[2px] text-black">
|
|
Search
|
|
</button>
|
|
</div>
|
|
<div class="border-t-2 border-gray-100 dark:border-gray-800 pt-6">
|
|
<h3 class="font-display font-bold uppercase text-sm mb-4 border-b-2 border-black inline-block dark:border-primary pb-1">Browse by Tags</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-white dark:bg-transparent font-display text-xs hover:bg-black hover:text-white dark:hover:bg-primary dark:hover:text-black transition-colors flex items-center gap-2 group">
|
|
Coding Assistant <span class="bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-black/20 px-1.5 py-0.5 text-[10px] rounded-sm group-hover:bg-white group-hover:text-black">12</span>
|
|
</button>
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-white dark:bg-transparent font-display text-xs hover:bg-black hover:text-white dark:hover:bg-primary dark:hover:text-black transition-colors flex items-center gap-2 group">
|
|
Chat AI <span class="bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-black/20 px-1.5 py-0.5 text-[10px] rounded-sm group-hover:bg-white group-hover:text-black">8</span>
|
|
</button>
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-black text-white dark:bg-primary dark:text-black font-display text-xs transition-colors flex items-center gap-2">
|
|
Data Analysis <span class="bg-gray-700 text-white dark:bg-black/20 dark:text-black px-1.5 py-0.5 text-[10px] rounded-sm">4</span>
|
|
</button>
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-white dark:bg-transparent font-display text-xs hover:bg-black hover:text-white dark:hover:bg-primary dark:hover:text-black transition-colors flex items-center gap-2 group">
|
|
Image Gen <span class="bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-black/20 px-1.5 py-0.5 text-[10px] rounded-sm group-hover:bg-white group-hover:text-black">21</span>
|
|
</button>
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-white dark:bg-transparent font-display text-xs hover:bg-black hover:text-white dark:hover:bg-primary dark:hover:text-black transition-colors flex items-center gap-2 group">
|
|
Automation <span class="bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-black/20 px-1.5 py-0.5 text-[10px] rounded-sm group-hover:bg-white group-hover:text-black">15</span>
|
|
</button>
|
|
<button class="px-3 py-1 border border-black dark:border-white/40 bg-white dark:bg-transparent font-display text-xs hover:bg-black hover:text-white dark:hover:bg-primary dark:hover:text-black transition-colors flex items-center gap-2 group">
|
|
LLMs <span class="bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-black/20 px-1.5 py-0.5 text-[10px] rounded-sm group-hover:bg-white group-hover:text-black">34</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-end mb-8 border-b border-black dark:border-white/20 pb-4">
|
|
<h2 class="font-display font-bold text-3xl uppercase tracking-tight">Featured Projects</h2>
|
|
<a class="font-display text-xs font-bold uppercase flex items-center gap-1 hover:text-gray-600 dark:hover:text-primary transition-colors" href="#">
|
|
View All <span class="material-icons-outlined text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div class="col-span-1 md:col-span-2 bg-purple-200 dark:bg-purple-900/30 border-2 border-black dark:border-white/20 p-0 flex flex-col md:flex-row shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
|
|
<div class="p-8 flex-1 flex flex-col justify-between relative z-10">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="bg-black text-white dark:bg-white dark:text-black font-display text-xs px-2 py-1 font-bold">TOP PICK</span>
|
|
<span class="material-icons-outlined text-2xl group-hover:rotate-12 transition-transform">auto_awesome</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-3xl mb-3">AutoGPT X</h3>
|
|
<p class="text-sm md:text-base mb-6 leading-relaxed opacity-90">
|
|
An experimental open-source application showcasing the capabilities of the GPT-4 language model. This program, driven by GPT-4, chains together LLM "thoughts", to autonomously achieve whatever goal you set.
|
|
</p>
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
<span class="border border-black dark:border-white/50 px-2 py-1 text-[10px] uppercase font-display font-bold bg-white/50 dark:bg-black/50">Automation</span>
|
|
<span class="border border-black dark:border-white/50 px-2 py-1 text-[10px] uppercase font-display font-bold bg-white/50 dark:bg-black/50">Agent</span>
|
|
</div>
|
|
</div>
|
|
<a class="inline-flex items-center font-display font-bold text-sm uppercase group-hover:translate-x-2 transition-transform" href="#">
|
|
View Details <span class="material-icons-outlined ml-1 text-base">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
<div class="w-full md:w-2/5 bg-purple-300 dark:bg-purple-800/50 border-t-2 md:border-t-0 md:border-l-2 border-black dark:border-white/20 relative overflow-hidden flex items-center justify-center min-h-[200px]">
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white/40 to-transparent"></div>
|
|
<span class="material-icons-outlined text-9xl opacity-20 rotate-12">psychology</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4 text-gray-400">
|
|
<span class="material-icons-outlined text-3xl text-black dark:text-white">hub</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-2xl mb-3">n8n</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
|
Open-source workflow automation tool. Connect various services and APIs through a visual interface to build complex automations without code.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Automation</span>
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Workflow</span>
|
|
</div>
|
|
<a class="inline-flex items-center font-display font-bold text-sm uppercase border-b-2 border-transparent hover:border-primary transition-colors pb-0.5" href="#">
|
|
View Details <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4 text-gray-400">
|
|
<span class="material-icons-outlined text-3xl text-black dark:text-white">image</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-2xl mb-3">Stable Diffusion</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
|
Open-source image generation model. Supports local deployment and custom training, enabling powerful creative workflows.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Image Gen</span>
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Open Source</span>
|
|
</div>
|
|
<a class="inline-flex items-center font-display font-bold text-sm uppercase border-b-2 border-transparent hover:border-primary transition-colors pb-0.5" href="#">
|
|
View Details <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4 text-gray-400">
|
|
<span class="material-icons-outlined text-3xl text-black dark:text-white">palette</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-2xl mb-3">Midjourney</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
|
Powerful AI image generation tool. Create exquisite images through text descriptions with industry-leading artistic quality.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Image Gen</span>
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Art</span>
|
|
</div>
|
|
<a class="inline-flex items-center font-display font-bold text-sm uppercase border-b-2 border-transparent hover:border-primary transition-colors pb-0.5" href="#">
|
|
View Details <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-4 text-gray-400">
|
|
<span class="material-icons-outlined text-3xl text-black dark:text-white">chat</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-2xl mb-3">ChatGPT</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
|
Large language model developed by OpenAI. Supports conversation, writing, coding, and a wide variety of tasks.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Chat AI</span>
|
|
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Assistant</span>
|
|
</div>
|
|
<a class="inline-flex items-center font-display font-bold text-sm uppercase border-b-2 border-transparent hover:border-primary transition-colors pb-0.5" href="#">
|
|
View Details <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary dark:bg-primary border-2 border-black dark:border-black p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-center items-center text-center group">
|
|
<div class="bg-white dark:bg-black rounded-full w-12 h-12 flex items-center justify-center border-2 border-black mb-4">
|
|
<span class="material-icons-outlined text-2xl dark:text-primary">add</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-2xl mb-2 text-black">Submit Your Project</h3>
|
|
<p class="text-sm text-black mb-6 leading-relaxed px-4 font-medium">
|
|
Have an AI tool worth sharing? Add it to Agent Park.
|
|
</p>
|
|
<button class="bg-black text-white dark:bg-black dark:text-primary border-2 border-black dark:border-black px-6 py-2 font-display text-sm font-bold uppercase hover:bg-white hover:text-black dark:hover:bg-white dark:hover:text-black transition-colors">
|
|
Submit Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-16 flex justify-center">
|
|
<div class="flex border-2 border-black dark:border-white/20 bg-white dark:bg-surface-dark shadow-neo dark:shadow-none">
|
|
<button class="px-4 py-2 border-r border-black dark:border-white/20 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors disabled:opacity-50">
|
|
<span class="material-icons-outlined text-sm">arrow_back</span>
|
|
</button>
|
|
<button class="px-4 py-2 font-display font-bold text-sm bg-primary border-r border-black dark:border-white/20 text-black">1</button>
|
|
<button class="px-4 py-2 font-display font-bold text-sm border-r border-black dark:border-white/20 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors">2</button>
|
|
<button class="px-4 py-2 font-display font-bold text-sm border-r border-black dark:border-white/20 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors">3</button>
|
|
<button class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors">
|
|
<span class="material-icons-outlined text-sm">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<section class="border-t-2 border-black dark:border-white/20 flex flex-col md:flex-row">
|
|
<div class="w-full md:w-1/2 bg-primary dark:bg-yellow-600 p-12 md:p-20 border-b-2 md:border-b-0 md:border-r-2 border-black dark:border-white/20">
|
|
<h2 class="font-display font-bold text-4xl mb-4 text-black">STAY UPDATED</h2>
|
|
<p class="text-black mb-8 font-medium max-w-md">
|
|
Get the latest AI tools and trends delivered straight to your inbox. No spam, just intelligence.
|
|
</p>
|
|
<form class="flex flex-col gap-4 max-w-md">
|
|
<input class="w-full px-4 py-3 bg-white border-2 border-black font-display text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-black" placeholder="E-mail" type="email"/>
|
|
<div class="flex items-center gap-2">
|
|
<input class="w-4 h-4 border-2 border-black text-black focus:ring-0" id="newsletter-check" type="checkbox"/>
|
|
<label class="text-xs font-bold font-display uppercase text-black" for="newsletter-check">Subscribe to Agent Park updates</label>
|
|
</div>
|
|
<button class="w-32 bg-white text-black border-2 border-black px-6 py-3 font-display font-bold uppercase hover:bg-black hover:text-white transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]" type="submit">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="w-full md:w-1/2 bg-background-light dark:bg-background-dark p-12 md:p-20 flex items-center justify-center relative overflow-hidden">
|
|
<div class="relative w-64 h-64">
|
|
<div class="absolute inset-0 border-2 border-black dark:border-white bg-white dark:bg-surface-dark transform rotate-3 z-10 flex items-center justify-center">
|
|
<span class="material-icons-outlined text-8xl text-black dark:text-white">rocket_launch</span>
|
|
</div>
|
|
<div class="absolute inset-0 border-2 border-black dark:border-white bg-primary dark:bg-primary transform -rotate-3 translate-x-2 translate-y-2 z-0"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="bg-background-light dark:bg-background-dark pt-16 pb-8 border-t-2 border-black dark:border-white/20">
|
|
<div class="container mx-auto px-6 max-w-7xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
|
<div>
|
|
<h3 class="font-display font-bold text-xl mb-6">Agent Park</h3>
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<li><a class="hover:underline" href="#">About Us</a></li>
|
|
<li><a class="hover:underline" href="#">Contact</a></li>
|
|
<li><a class="hover:underline" href="#">Careers</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display font-bold text-xl mb-6">Resources</h3>
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<li><a class="hover:underline" href="#">Blog</a></li>
|
|
<li><a class="hover:underline" href="#">Newsletter</a></li>
|
|
<li><a class="hover:underline" href="#">Documentation</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display font-bold text-xl mb-6">Legal</h3>
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<li><a class="hover:underline" href="#">Privacy Policy</a></li>
|
|
<li><a class="hover:underline" href="#">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display font-bold text-xl mb-6">Follow Us</h3>
|
|
<div class="flex gap-4">
|
|
<a class="w-10 h-10 border border-black dark:border-white flex items-center justify-center hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">X</a>
|
|
<a class="w-10 h-10 border border-black dark:border-white flex items-center justify-center hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">Li</a>
|
|
<a class="w-10 h-10 border border-black dark:border-white flex items-center justify-center hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">Gh</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-black/20 dark:border-white/20 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p class="font-display text-xs text-gray-500">© 2025 Agent Park. All rights reserved.</p>
|
|
<p class="font-display text-xs font-bold uppercase tracking-wider">Designed for AI Builders</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body></html> |