chore: format
This commit is contained in:
@@ -1,18 +1,19 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Custom animations */
|
||||
--animate-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
|
||||
/* Custom keyframes for pulse */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
/* Custom animations */
|
||||
--animate-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
|
||||
/* Custom keyframes for pulse */
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -30,18 +31,18 @@
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(17 24 39);
|
||||
background: rgb(17 24 39);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(139 92 246);
|
||||
border-radius: 5px;
|
||||
background: rgb(139 92 246);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(167 139 250);
|
||||
background: rgb(167 139 250);
|
||||
}
|
||||
|
||||
@@ -1,57 +1,65 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Pivoine Docs - Documentation Hub',
|
||||
description: 'Comprehensive documentation hub for all Pivoine projects by Valknar. Explore technical guides, API references, and tutorials.',
|
||||
keywords: ['documentation', 'pivoine', 'valknar', 'developer', 'guides', 'api'],
|
||||
authors: [{ name: 'Valknar', url: 'https://pivoine.art' }],
|
||||
creator: 'Valknar',
|
||||
manifest: '/manifest.json',
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: '/favicon.svg', type: 'image/svg+xml' },
|
||||
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
|
||||
],
|
||||
apple: [
|
||||
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
|
||||
],
|
||||
},
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: 'black-translucent',
|
||||
title: 'Pivoine Docs',
|
||||
},
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
locale: 'en_US',
|
||||
url: 'https://docs.pivoine.art',
|
||||
title: 'Pivoine Docs - Documentation Hub',
|
||||
description: 'Comprehensive documentation hub for all Pivoine projects',
|
||||
siteName: 'Pivoine Docs',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Pivoine Docs - Documentation Hub',
|
||||
description: 'Comprehensive documentation hub for all Pivoine projects',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
}
|
||||
title: "Pivoine Docs - Documentation Hub",
|
||||
description:
|
||||
"Comprehensive documentation hub for all Pivoine projects by Valknar. Explore technical guides, API references, and tutorials.",
|
||||
keywords: [
|
||||
"documentation",
|
||||
"pivoine",
|
||||
"valknar",
|
||||
"developer",
|
||||
"guides",
|
||||
"api",
|
||||
],
|
||||
authors: [{ name: "Valknar", url: "https://pivoine.art" }],
|
||||
creator: "Valknar",
|
||||
manifest: "/manifest.json",
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.svg", type: "image/svg+xml" },
|
||||
{ url: "/icon.svg", type: "image/svg+xml", sizes: "any" },
|
||||
],
|
||||
apple: [
|
||||
{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
|
||||
],
|
||||
},
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: "black-translucent",
|
||||
title: "Pivoine Docs",
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
url: "https://docs.pivoine.art",
|
||||
title: "Pivoine Docs - Documentation Hub",
|
||||
description: "Comprehensive documentation hub for all Pivoine projects",
|
||||
siteName: "Pivoine Docs",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Pivoine Docs - Documentation Hub",
|
||||
description: "Comprehensive documentation hub for all Pivoine projects",
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className="scroll-smooth">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
return (
|
||||
<html lang="en" className="scroll-smooth">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,204 +1,241 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { BookOpen, Code2, Globe, ChevronRight, Sparkles, Terminal } from 'lucide-react'
|
||||
import KomposeIcon from '@/components/icons/KomposeIcon'
|
||||
import { PivoineDocsIcon } from '@/components/icons'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
BookOpen,
|
||||
Code2,
|
||||
Globe,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import KomposeIcon from "@/components/icons/KomposeIcon";
|
||||
import { PivoineDocsIcon } from "@/components/icons";
|
||||
|
||||
export default function DocsHub() {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
||||
const [isHovering, setIsHovering] = useState<string | null>(null)
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||
const [isHovering, setIsHovering] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setMousePosition({
|
||||
x: (e.clientX / window.innerWidth) * 20 - 10,
|
||||
y: (e.clientY / window.innerHeight) * 20 - 10,
|
||||
})
|
||||
}
|
||||
window.addEventListener('mousemove', handleMouseMove)
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setMousePosition({
|
||||
x: (e.clientX / window.innerWidth) * 20 - 10,
|
||||
y: (e.clientY / window.innerHeight) * 20 - 10,
|
||||
});
|
||||
};
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
return () => window.removeEventListener("mousemove", handleMouseMove);
|
||||
}, []);
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: 'Kompose',
|
||||
status: 'Active',
|
||||
description: 'Comprehensive documentation for Kompose project',
|
||||
url: '/kompose',
|
||||
gradient: 'from-violet-500 to-purple-600'
|
||||
}
|
||||
]
|
||||
const projects = [
|
||||
{
|
||||
name: "Kompose",
|
||||
status: "Active",
|
||||
description: "Comprehensive documentation for Kompose project",
|
||||
url: "/kompose",
|
||||
gradient: "from-violet-500 to-purple-600",
|
||||
},
|
||||
];
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: "Valknar's Blog",
|
||||
icon: Globe,
|
||||
url: 'http://pivoine.art',
|
||||
gradient: 'from-pink-500 to-rose-600'
|
||||
},
|
||||
{
|
||||
title: 'Source Code',
|
||||
icon: Code2,
|
||||
url: 'https://code.pivoine.art',
|
||||
gradient: 'from-cyan-500 to-blue-600'
|
||||
}
|
||||
]
|
||||
const links = [
|
||||
{
|
||||
title: "Valknar's Blog",
|
||||
icon: Globe,
|
||||
url: "http://pivoine.art",
|
||||
gradient: "from-pink-500 to-rose-600",
|
||||
},
|
||||
{
|
||||
title: "Source Code",
|
||||
icon: Code2,
|
||||
url: "https://code.pivoine.art",
|
||||
gradient: "from-cyan-500 to-blue-600",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900 text-white overflow-hidden">
|
||||
{/* Animated background orbs */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div
|
||||
className="absolute w-96 h-96 bg-purple-500/20 rounded-full blur-3xl top-0 -left-48 animate-pulse"
|
||||
style={{
|
||||
transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
|
||||
transition: 'transform 0.3s ease-out'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-96 h-96 bg-pink-500/20 rounded-full blur-3xl bottom-0 -right-48 animate-pulse"
|
||||
style={{
|
||||
transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
|
||||
transition: 'transform 0.3s ease-out',
|
||||
animationDelay: '1s'
|
||||
}}
|
||||
/>
|
||||
<div className="absolute w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" style={{ animationDelay: '0.5s' }} />
|
||||
</div>
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900 text-white overflow-hidden">
|
||||
{/* Animated background orbs */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div
|
||||
className="absolute w-96 h-96 bg-purple-500/20 rounded-full blur-3xl top-0 -left-48 animate-pulse"
|
||||
style={{
|
||||
transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-96 h-96 bg-pink-500/20 rounded-full blur-3xl bottom-0 -right-48 animate-pulse"
|
||||
style={{
|
||||
transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
animationDelay: "1s",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
|
||||
{/* Header */}
|
||||
<header className="text-center mb-20 pt-12">
|
||||
{/* Hero Icon */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<PivoineDocsIcon size="200px" showLabel={false} interactive={true} />
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10">
|
||||
<Sparkles className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm text-purple-300">Documentation Hub</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent animate-pulse">
|
||||
Pivoine Docs
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
|
||||
Comprehensive documentation for all projects by <span className="text-purple-400 font-semibold">Valknar</span>.
|
||||
Explore technical guides, API references, and tutorials.
|
||||
</p>
|
||||
</header>
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
|
||||
{/* Header */}
|
||||
<header className="text-center mb-20 pt-12">
|
||||
{/* Hero Icon */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<PivoineDocsIcon
|
||||
size="200px"
|
||||
showLabel={false}
|
||||
interactive={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<section className="mb-20">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Terminal className="w-6 h-6 text-purple-400" />
|
||||
<h2 className="text-3xl font-bold">Project Documentation</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{projects.map((project, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={project.url}
|
||||
onMouseEnter={() => setIsHovering(project.name)}
|
||||
onMouseLeave={() => setIsHovering(null)}
|
||||
className="group relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300"
|
||||
style={{ background: `linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234))` }} />
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
{project.name === 'Kompose' ? (
|
||||
<div className={`relative w-14 h-14 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg flex items-center justify-center`}>
|
||||
<KomposeIcon size="36px" interactive={false} className='' />
|
||||
</div>
|
||||
) : (
|
||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}>
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<span className="px-3 py-1 bg-emerald-500/20 text-emerald-300 rounded-full text-sm border border-emerald-500/30">
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-3 group-hover:text-purple-300 transition-colors">
|
||||
{project.name}
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-400 mb-4 leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-purple-400 font-semibold group-hover:gap-3 gap-2 transition-all">
|
||||
Read docs
|
||||
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Coming Soon Card */}
|
||||
<div className="relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-dashed border-white/20">
|
||||
<div className="opacity-60">
|
||||
<div className="p-3 rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 w-fit mb-4">
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-3 text-gray-400">More Projects</h3>
|
||||
<p className="text-gray-500 leading-relaxed">
|
||||
Additional documentation sites coming soon...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10">
|
||||
<Sparkles className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm text-purple-300">Documentation Hub</span>
|
||||
</div>
|
||||
|
||||
{/* External Links */}
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Sparkles className="w-6 h-6 text-pink-400" />
|
||||
<h2 className="text-3xl font-bold">Explore More</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{links.map((link, idx) => {
|
||||
const Icon = link.icon
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group bg-white/5 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20 flex items-center gap-4"
|
||||
>
|
||||
<div className={`p-4 rounded-xl bg-gradient-to-br ${link.gradient} shadow-lg group-hover:scale-110 transition-transform`}>
|
||||
<Icon className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold group-hover:text-pink-300 transition-colors">
|
||||
{link.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">{link.url}</p>
|
||||
</div>
|
||||
<ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
<h1 className="text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent animate-pulse">
|
||||
Pivoine Docs
|
||||
</h1>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-20 pt-8 border-t border-white/10 text-center text-gray-400">
|
||||
<p className="text-sm">
|
||||
Crafted with passion by <span className="text-purple-400 font-semibold">Valknar</span> ·
|
||||
<a href="http://pivoine.art" className="hover:text-purple-300 transition-colors ml-1">pivoine.art</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
|
||||
Comprehensive documentation for all projects by{" "}
|
||||
<span className="text-purple-400 font-semibold">Valknar</span>.
|
||||
Explore technical guides, API references, and tutorials.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<section className="mb-20">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Terminal className="w-6 h-6 text-purple-400" />
|
||||
<h2 className="text-3xl font-bold">Project Documentation</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{projects.map((project, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={project.url}
|
||||
onMouseEnter={() => setIsHovering(project.name)}
|
||||
onMouseLeave={() => setIsHovering(null)}
|
||||
className="group relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234))`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
{project.name === "Kompose" ? (
|
||||
<div
|
||||
className={`relative w-14 h-14 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg flex items-center justify-center`}
|
||||
>
|
||||
<KomposeIcon
|
||||
size="36px"
|
||||
interactive={false}
|
||||
className=""
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}
|
||||
>
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<span className="px-3 py-1 bg-emerald-500/20 text-emerald-300 rounded-full text-sm border border-emerald-500/30">
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-3 group-hover:text-purple-300 transition-colors">
|
||||
{project.name}
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-400 mb-4 leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-purple-400 font-semibold group-hover:gap-3 gap-2 transition-all">
|
||||
Read docs
|
||||
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Coming Soon Card */}
|
||||
<div className="relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-dashed border-white/20">
|
||||
<div className="opacity-60">
|
||||
<div className="p-3 rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 w-fit mb-4">
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-3 text-gray-400">
|
||||
More Projects
|
||||
</h3>
|
||||
<p className="text-gray-500 leading-relaxed">
|
||||
Additional documentation sites coming soon...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* External Links */}
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Sparkles className="w-6 h-6 text-pink-400" />
|
||||
<h2 className="text-3xl font-bold">Explore More</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{links.map((link, idx) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group bg-white/5 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20 flex items-center gap-4"
|
||||
>
|
||||
<div
|
||||
className={`p-4 rounded-xl bg-gradient-to-br ${link.gradient} shadow-lg group-hover:scale-110 transition-transform`}
|
||||
>
|
||||
<Icon className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold group-hover:text-pink-300 transition-colors">
|
||||
{link.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">{link.url}</p>
|
||||
</div>
|
||||
<ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-20 pt-8 border-t border-white/10 text-center text-gray-400">
|
||||
<p className="text-sm">
|
||||
Crafted with passion by{" "}
|
||||
<span className="text-purple-400 font-semibold">Valknar</span> ·
|
||||
<a
|
||||
href="http://pivoine.art"
|
||||
className="hover:text-purple-300 transition-colors ml-1"
|
||||
>
|
||||
pivoine.art
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,302 +1,407 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import PivoineDocsIcon from './PivoineDocsIcon'
|
||||
import PivoineDocsIcon from "./PivoineDocsIcon";
|
||||
|
||||
export default function PivoineIconDemo() {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
|
||||
padding: '4rem 2rem',
|
||||
color: '#fff'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1400px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '4rem' }}>
|
||||
<h1 style={{
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
background: 'linear-gradient(135deg, #ec4899, #a855f7, #c084fc)',
|
||||
backgroundClip: 'text',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
Pivoine Docs Icon
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: '1.25rem',
|
||||
color: '#94a3b8',
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
A beautiful animated peony blossom icon with interactive states
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
background: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
|
||||
padding: "4rem 2rem",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "1400px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: "center", marginBottom: "4rem" }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: "3rem",
|
||||
fontWeight: "bold",
|
||||
background: "linear-gradient(135deg, #ec4899, #a855f7, #c084fc)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
Pivoine Docs Icon
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
color: "#94a3b8",
|
||||
maxWidth: "600px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
A beautiful animated peony blossom icon with interactive states
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Showcase */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||
gap: '3rem',
|
||||
marginBottom: '4rem'
|
||||
}}>
|
||||
{/* Large Interactive */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#f472b6' }}>
|
||||
Interactive (Hover & Click)
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="280px" />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Hover to bloom • Click to close
|
||||
</p>
|
||||
</div>
|
||||
{/* Main Showcase */}
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "3rem",
|
||||
marginBottom: "4rem",
|
||||
}}
|
||||
>
|
||||
{/* Large Interactive */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#f472b6" }}>
|
||||
Interactive (Hover & Click)
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="280px" />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Hover to bloom • Click to close
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* With Label */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#c084fc' }}>
|
||||
With Label
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="240px" showLabel />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Perfect for hero sections
|
||||
</p>
|
||||
</div>
|
||||
{/* With Label */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#c084fc" }}>
|
||||
With Label
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="240px" showLabel />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Perfect for hero sections
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Non-Interactive */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#fb7185' }}>
|
||||
Static (Non-Interactive)
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="240px" interactive={false} />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Ideal for favicons & PWA icons
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Non-Interactive */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#fb7185" }}>
|
||||
Static (Non-Interactive)
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="240px" interactive={false} />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Ideal for favicons & PWA icons
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Variations */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '3rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
marginBottom: '4rem'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Size Variations
|
||||
</h2>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'flex-end',
|
||||
flexWrap: 'wrap',
|
||||
gap: '2rem',
|
||||
padding: '2rem'
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="64px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
64px<br />Favicon
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="96px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
96px<br />Small
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="128px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
128px<br />Medium
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="192px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
192px<br />Large
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="256px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
256px<br />X-Large
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Size Variations */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "3rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
marginBottom: "4rem",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "2rem",
|
||||
textAlign: "center",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Size Variations
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "flex-end",
|
||||
flexWrap: "wrap",
|
||||
gap: "2rem",
|
||||
padding: "2rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="64px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
64px
|
||||
<br />
|
||||
Favicon
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="96px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
96px
|
||||
<br />
|
||||
Small
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="128px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
128px
|
||||
<br />
|
||||
Medium
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="192px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
192px
|
||||
<br />
|
||||
Large
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="256px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
256px
|
||||
<br />
|
||||
X-Large
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature List */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '3rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Features
|
||||
</h2>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
||||
gap: '2rem'
|
||||
}}>
|
||||
{[
|
||||
{
|
||||
icon: '🌸',
|
||||
title: 'Realistic Design',
|
||||
description: 'Multi-layered peony with natural gradients'
|
||||
},
|
||||
{
|
||||
icon: '✨',
|
||||
title: 'Smooth Animations',
|
||||
description: 'Gentle breathing in normal state'
|
||||
},
|
||||
{
|
||||
icon: '🎭',
|
||||
title: 'Interactive States',
|
||||
description: 'Bloom on hover, close on click'
|
||||
},
|
||||
{
|
||||
icon: '💫',
|
||||
title: 'Particle Effects',
|
||||
description: '12 bloom particles flying around'
|
||||
},
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'Beautiful Colors',
|
||||
description: 'Pink to purple gradient palette'
|
||||
},
|
||||
{
|
||||
icon: '♿',
|
||||
title: 'Accessible',
|
||||
description: 'Reduced motion & touch support'
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Responsive',
|
||||
description: 'Works perfectly on all devices'
|
||||
},
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'High Performance',
|
||||
description: 'GPU-accelerated CSS animations'
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} style={{
|
||||
padding: '1.5rem',
|
||||
background: 'rgba(255, 255, 255, 0.03)',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h4 style={{
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '600',
|
||||
marginBottom: '0.5rem',
|
||||
color: '#fda4af'
|
||||
}}>
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: '0.875rem',
|
||||
color: '#94a3b8'
|
||||
}}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature List */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "3rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "2rem",
|
||||
textAlign: "center",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Features
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
|
||||
gap: "2rem",
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{
|
||||
icon: "🌸",
|
||||
title: "Realistic Design",
|
||||
description: "Multi-layered peony with natural gradients",
|
||||
},
|
||||
{
|
||||
icon: "✨",
|
||||
title: "Smooth Animations",
|
||||
description: "Gentle breathing in normal state",
|
||||
},
|
||||
{
|
||||
icon: "🎭",
|
||||
title: "Interactive States",
|
||||
description: "Bloom on hover, close on click",
|
||||
},
|
||||
{
|
||||
icon: "💫",
|
||||
title: "Particle Effects",
|
||||
description: "12 bloom particles flying around",
|
||||
},
|
||||
{
|
||||
icon: "🎨",
|
||||
title: "Beautiful Colors",
|
||||
description: "Pink to purple gradient palette",
|
||||
},
|
||||
{
|
||||
icon: "♿",
|
||||
title: "Accessible",
|
||||
description: "Reduced motion & touch support",
|
||||
},
|
||||
{
|
||||
icon: "📱",
|
||||
title: "Responsive",
|
||||
description: "Works perfectly on all devices",
|
||||
},
|
||||
{
|
||||
icon: "⚡",
|
||||
title: "High Performance",
|
||||
description: "GPU-accelerated CSS animations",
|
||||
},
|
||||
].map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
borderRadius: "0.75rem",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "0.75rem" }}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h4
|
||||
style={{
|
||||
fontSize: "1.125rem",
|
||||
fontWeight: "600",
|
||||
marginBottom: "0.5rem",
|
||||
color: "#fda4af",
|
||||
}}
|
||||
>
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
color: "#94a3b8",
|
||||
}}
|
||||
>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Example */}
|
||||
<div style={{
|
||||
marginTop: '4rem',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Quick Start
|
||||
</h2>
|
||||
<pre style={{
|
||||
background: 'rgba(0, 0, 0, 0.3)',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
overflow: 'auto',
|
||||
fontSize: '0.875rem',
|
||||
color: '#e2e8f0'
|
||||
}}>
|
||||
{`import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'
|
||||
{/* Usage Example */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "4rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Quick Start
|
||||
</h2>
|
||||
<pre
|
||||
style={{
|
||||
background: "rgba(0, 0, 0, 0.3)",
|
||||
padding: "1.5rem",
|
||||
borderRadius: "0.5rem",
|
||||
overflow: "auto",
|
||||
fontSize: "0.875rem",
|
||||
color: "#e2e8f0",
|
||||
}}
|
||||
>
|
||||
{`import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'
|
||||
|
||||
// Basic usage
|
||||
<PivoineDocsIcon size="256px" />
|
||||
@@ -306,19 +411,21 @@ export default function PivoineIconDemo() {
|
||||
|
||||
// Static for favicon
|
||||
<PivoineDocsIcon size="128px" interactive={false} />`}
|
||||
</pre>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
marginTop: '4rem',
|
||||
textAlign: 'center',
|
||||
color: '#64748b',
|
||||
fontSize: '0.875rem'
|
||||
}}>
|
||||
<p>Made with 🌸 for beautiful documentation experiences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "4rem",
|
||||
textAlign: "center",
|
||||
color: "#64748b",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<p>Made with 🌸 for beautiful documentation experiences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,333 +1,334 @@
|
||||
/* Kompose Icon Styles */
|
||||
|
||||
.kompose-icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper:not(.is-interactive) {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kompose-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
|
||||
transition: filter 0.4s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
|
||||
transition: filter 0.4s ease;
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.05) translateY(-2px);
|
||||
transform: scale(1.05) translateY(-2px);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .kompose-icon {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
animation: subtle-pulse 2s ease-in-out infinite;
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
animation: subtle-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .bg-rect {
|
||||
animation: bg-glow 2s ease-in-out infinite;
|
||||
animation: bg-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-letter {
|
||||
animation: letter-glow 1.5s ease-in-out infinite;
|
||||
animation: letter-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-vertical {
|
||||
animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-top {
|
||||
animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
||||
animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-bottom {
|
||||
animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
|
||||
animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
0.2s;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .status-dot {
|
||||
animation: pulse-expand 1s ease-in-out infinite;
|
||||
animation: pulse-expand 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .status-ring {
|
||||
animation: ring-pulse 1.5s ease-in-out infinite;
|
||||
animation: ring-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .corner {
|
||||
opacity: 1 !important;
|
||||
animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
opacity: 1 !important;
|
||||
animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Click/Active Effects */
|
||||
.kompose-icon-wrapper.is-clicked {
|
||||
animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .kompose-icon {
|
||||
animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
|
||||
animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .k-letter {
|
||||
animation: letter-flash 0.6s ease-out;
|
||||
filter: url(#intenseglow192);
|
||||
animation: letter-flash 0.6s ease-out;
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .status-dot {
|
||||
animation: dot-burst 0.6s ease-out;
|
||||
animation: dot-burst 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Ripple Effect */
|
||||
.ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 220, 130, 0.6) 0%,
|
||||
rgba(0, 220, 130, 0) 70%
|
||||
);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 0.8s ease-out;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 220, 130, 0.6) 0%,
|
||||
rgba(0, 220, 130, 0) 70%
|
||||
);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 0.8s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Default animations for status dot */
|
||||
.status-dot {
|
||||
animation: default-pulse 2s ease-in-out infinite;
|
||||
animation: default-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-ring {
|
||||
animation: default-ring-pulse 2s ease-in-out infinite;
|
||||
animation: default-ring-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Keyframe Animations */
|
||||
@keyframes subtle-pulse {
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-glow {
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes letter-glow {
|
||||
0%,
|
||||
100% {
|
||||
filter: url(#glow192);
|
||||
}
|
||||
50% {
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: url(#glow192);
|
||||
}
|
||||
50% {
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-vertical {
|
||||
0% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 96;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 96;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-diagonal-top {
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-diagonal-bottom {
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-expand {
|
||||
0%,
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 14;
|
||||
opacity: 1;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 14;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-pulse {
|
||||
0%,
|
||||
100% {
|
||||
r: 17.28;
|
||||
opacity: 0.3;
|
||||
stroke-width: 3;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 0.6;
|
||||
stroke-width: 2;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
r: 17.28;
|
||||
opacity: 0.3;
|
||||
stroke-width: 3;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 0.6;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes corner-extend {
|
||||
0% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 13.44;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 13.44;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes click-bounce {
|
||||
0% {
|
||||
transform: scale(1) translateY(0) rotateY(0deg);
|
||||
}
|
||||
30% {
|
||||
transform: scale(0.92) translateY(0) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08) translateY(-4px) rotateY(180deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.98) translateY(0) rotateY(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0) rotateY(360deg);
|
||||
}
|
||||
0% {
|
||||
transform: scale(1) translateY(0) rotateY(0deg);
|
||||
}
|
||||
30% {
|
||||
transform: scale(0.92) translateY(0) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08) translateY(-4px) rotateY(180deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.98) translateY(0) rotateY(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-3d {
|
||||
0% {
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(800px) rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(800px) rotateY(360deg);
|
||||
}
|
||||
0% {
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(800px) rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(800px) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes letter-flash {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dot-burst {
|
||||
0% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
0% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-expand {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes default-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
r: 11.52;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
r: 13.44;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
r: 11.52;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
r: 13.44;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes default-ring-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.03) translateY(-1px);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.03) translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kompose-icon-wrapper,
|
||||
.kompose-icon,
|
||||
.kompose-icon *,
|
||||
.ripple {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.kompose-icon-wrapper,
|
||||
.kompose-icon,
|
||||
.kompose-icon *,
|
||||
.ripple {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimizations */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.kompose-icon-wrapper.is-interactive:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,119 +1,254 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './KomposeIcon.css'
|
||||
import React, { useState } from "react";
|
||||
import "./KomposeIcon.css";
|
||||
|
||||
interface KomposeIconProps {
|
||||
size?: string
|
||||
interactive?: boolean
|
||||
className?: string
|
||||
size?: string;
|
||||
interactive?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function KomposeIcon({
|
||||
size = '192px',
|
||||
interactive = true,
|
||||
className = ''
|
||||
export default function KomposeIcon({
|
||||
size = "192px",
|
||||
interactive = true,
|
||||
className = "",
|
||||
}: KomposeIconProps) {
|
||||
const [isClicked, setIsClicked] = useState(false)
|
||||
const [showRipple, setShowRipple] = useState(false)
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
const [showRipple, setShowRipple] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!interactive) return
|
||||
const handleClick = () => {
|
||||
if (!interactive) return;
|
||||
|
||||
setIsClicked(true)
|
||||
setShowRipple(true)
|
||||
setIsClicked(true);
|
||||
setShowRipple(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsClicked(false)
|
||||
}, 600)
|
||||
setTimeout(() => {
|
||||
setIsClicked(false);
|
||||
}, 600);
|
||||
|
||||
setTimeout(() => {
|
||||
setShowRipple(false)
|
||||
}, 800)
|
||||
}
|
||||
setTimeout(() => {
|
||||
setShowRipple(false);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return
|
||||
handleClick()
|
||||
}
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return;
|
||||
handleClick();
|
||||
};
|
||||
|
||||
const wrapperClasses = [
|
||||
'kompose-icon-wrapper',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
const wrapperClasses = [
|
||||
"kompose-icon-wrapper",
|
||||
isClicked && "is-clicked",
|
||||
interactive && "is-interactive",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg
|
||||
className="kompose-icon"
|
||||
viewBox="0 0 192 192"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
|
||||
<rect width="7.68" height="7.68" fill="#0a0e27"></rect>
|
||||
<path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" strokeWidth="1.5" opacity="0.5"></path>
|
||||
</pattern>
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg
|
||||
className="kompose-icon"
|
||||
viewBox="0 0 192 192"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="carbon192"
|
||||
x="0"
|
||||
y="0"
|
||||
width="7.68"
|
||||
height="7.68"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect width="7.68" height="7.68" fill="#0a0e27"></rect>
|
||||
<path
|
||||
d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68"
|
||||
stroke="#060815"
|
||||
strokeWidth="1.5"
|
||||
opacity="0.5"
|
||||
></path>
|
||||
</pattern>
|
||||
|
||||
<linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style={{ stopColor: '#1a1d2e', stopOpacity: 1 }}></stop>
|
||||
<stop offset="100%" style={{ stopColor: '#0a0e27', stopOpacity: 1 }}></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#1a1d2e", stopOpacity: 1 }}
|
||||
></stop>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#0a0e27", stopOpacity: 1 }}
|
||||
></stop>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" className="gradient-start" style={{ stopColor: '#00DC82', stopOpacity: 1 }}></stop>
|
||||
<stop offset="100%" className="gradient-end" style={{ stopColor: '#00a86b', stopOpacity: 1 }}></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="primaryGrad192"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
className="gradient-start"
|
||||
style={{ stopColor: "#00DC82", stopOpacity: 1 }}
|
||||
></stop>
|
||||
<stop
|
||||
offset="100%"
|
||||
className="gradient-end"
|
||||
style={{ stopColor: "#00a86b", stopOpacity: 1 }}
|
||||
></stop>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glow192">
|
||||
<feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="glow192">
|
||||
<feGaussianBlur
|
||||
stdDeviation="6"
|
||||
result="coloredBlur"
|
||||
></feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="intenseglow192">
|
||||
<feGaussianBlur stdDeviation="12" result="coloredBlur"></feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<filter id="intenseglow192">
|
||||
<feGaussianBlur
|
||||
stdDeviation="12"
|
||||
result="coloredBlur"
|
||||
></feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Background */}
|
||||
<rect className="bg-rect" width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
|
||||
<rect className="carbon-pattern" width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
|
||||
{/* Background */}
|
||||
<rect
|
||||
className="bg-rect"
|
||||
width="192"
|
||||
height="192"
|
||||
rx="24"
|
||||
fill="url(#bgGrad192)"
|
||||
></rect>
|
||||
<rect
|
||||
className="carbon-pattern"
|
||||
width="192"
|
||||
height="192"
|
||||
rx="24"
|
||||
fill="url(#carbon192)"
|
||||
opacity="0.4"
|
||||
></rect>
|
||||
|
||||
{/* Stylized K */}
|
||||
<g className="k-letter" transform="translate(48, 48)">
|
||||
<line className="k-line k-vertical" x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
||||
<line className="k-line k-diagonal-top" x1="0" y1="48" x2="57.6" y2="0" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
||||
<line className="k-line k-diagonal-bottom" x1="0" y1="48" x2="57.6" y2="96" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
||||
</g>
|
||||
{/* Stylized K */}
|
||||
<g className="k-letter" transform="translate(48, 48)">
|
||||
<line
|
||||
className="k-line k-vertical"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="96"
|
||||
stroke="url(#primaryGrad192)"
|
||||
strokeWidth="15"
|
||||
strokeLinecap="round"
|
||||
filter="url(#glow192)"
|
||||
></line>
|
||||
<line
|
||||
className="k-line k-diagonal-top"
|
||||
x1="0"
|
||||
y1="48"
|
||||
x2="57.6"
|
||||
y2="0"
|
||||
stroke="url(#primaryGrad192)"
|
||||
strokeWidth="15"
|
||||
strokeLinecap="round"
|
||||
filter="url(#glow192)"
|
||||
></line>
|
||||
<line
|
||||
className="k-line k-diagonal-bottom"
|
||||
x1="0"
|
||||
y1="48"
|
||||
x2="57.6"
|
||||
y2="96"
|
||||
stroke="url(#primaryGrad192)"
|
||||
strokeWidth="15"
|
||||
strokeLinecap="round"
|
||||
filter="url(#glow192)"
|
||||
></line>
|
||||
</g>
|
||||
|
||||
{/* Animated status dot */}
|
||||
<circle className="status-dot" cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9"></circle>
|
||||
<circle className="status-ring" cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" strokeWidth="3" opacity="0.3"></circle>
|
||||
{/* Animated status dot */}
|
||||
<circle
|
||||
className="status-dot"
|
||||
cx="163.2"
|
||||
cy="163.2"
|
||||
r="11.52"
|
||||
fill="#00DC82"
|
||||
opacity="0.9"
|
||||
></circle>
|
||||
<circle
|
||||
className="status-ring"
|
||||
cx="163.2"
|
||||
cy="163.2"
|
||||
r="17.28"
|
||||
fill="none"
|
||||
stroke="#00DC82"
|
||||
strokeWidth="3"
|
||||
opacity="0.3"
|
||||
></circle>
|
||||
|
||||
{/* Tech corners */}
|
||||
<line className="corner corner-tl-h" x1="15.36" y1="15.36" x2="28.8" y2="15.36" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
||||
<line className="corner corner-tl-v" x1="15.36" y1="15.36" x2="15.36" y2="28.8" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
||||
<line className="corner corner-tr-h" x1="176.64" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
||||
<line className="corner corner-tr-v" x1="176.64" y1="15.36" x2="176.64" y2="28.8" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
||||
</svg>
|
||||
{/* Tech corners */}
|
||||
<line
|
||||
className="corner corner-tl-h"
|
||||
x1="15.36"
|
||||
y1="15.36"
|
||||
x2="28.8"
|
||||
y2="15.36"
|
||||
stroke="#00DC82"
|
||||
strokeWidth="3"
|
||||
opacity="0.4"
|
||||
></line>
|
||||
<line
|
||||
className="corner corner-tl-v"
|
||||
x1="15.36"
|
||||
y1="15.36"
|
||||
x2="15.36"
|
||||
y2="28.8"
|
||||
stroke="#00DC82"
|
||||
strokeWidth="3"
|
||||
opacity="0.4"
|
||||
></line>
|
||||
<line
|
||||
className="corner corner-tr-h"
|
||||
x1="176.64"
|
||||
y1="15.36"
|
||||
x2="163.2"
|
||||
y2="15.36"
|
||||
stroke="#00DC82"
|
||||
strokeWidth="3"
|
||||
opacity="0.4"
|
||||
></line>
|
||||
<line
|
||||
className="corner corner-tr-v"
|
||||
x1="176.64"
|
||||
y1="15.36"
|
||||
x2="176.64"
|
||||
y2="28.8"
|
||||
stroke="#00DC82"
|
||||
strokeWidth="3"
|
||||
opacity="0.4"
|
||||
></line>
|
||||
</svg>
|
||||
|
||||
{/* Ripple effect container */}
|
||||
{showRipple && <div className="ripple"></div>}
|
||||
</div>
|
||||
)
|
||||
{/* Ripple effect container */}
|
||||
{showRipple && <div className="ripple"></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,338 +1,494 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './PivoineDocsIcon.css'
|
||||
import React, { useState } from "react";
|
||||
import "./PivoineDocsIcon.css";
|
||||
|
||||
interface PivoineDocsIconProps {
|
||||
size?: string
|
||||
interactive?: boolean
|
||||
className?: string
|
||||
showLabel?: boolean
|
||||
size?: string;
|
||||
interactive?: boolean;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export default function PivoineDocsIcon({
|
||||
size = '256px',
|
||||
interactive = true,
|
||||
className = '',
|
||||
showLabel = false
|
||||
export default function PivoineDocsIcon({
|
||||
size = "256px",
|
||||
interactive = true,
|
||||
className = "",
|
||||
showLabel = false,
|
||||
}: PivoineDocsIconProps) {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
const [isClicked, setIsClicked] = useState(false)
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(true)
|
||||
}
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(false)
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!interactive) return
|
||||
const handleClick = () => {
|
||||
if (!interactive) return;
|
||||
|
||||
setIsClicked(true)
|
||||
setTimeout(() => {
|
||||
setIsClicked(false)
|
||||
}, 1200)
|
||||
}
|
||||
setIsClicked(true);
|
||||
setTimeout(() => {
|
||||
setIsClicked(false);
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return
|
||||
e.preventDefault()
|
||||
setIsHovered(true)
|
||||
|
||||
setTimeout(() => {
|
||||
handleClick()
|
||||
}, 50)
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return;
|
||||
e.preventDefault();
|
||||
setIsHovered(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsHovered(false)
|
||||
}, 1500)
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleClick();
|
||||
}, 50);
|
||||
|
||||
const wrapperClasses = [
|
||||
'pivoine-docs-icon-wrapper',
|
||||
isHovered && 'is-hovered',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
setTimeout(() => {
|
||||
setIsHovered(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
// Generate bloom particles with varied properties
|
||||
const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
|
||||
id: i,
|
||||
angle: (360 / 12) * i,
|
||||
distance: 80 + Math.random() * 20,
|
||||
size: 2 + Math.random() * 2,
|
||||
delay: i * 0.08,
|
||||
}))
|
||||
const wrapperClasses = [
|
||||
"pivoine-docs-icon-wrapper",
|
||||
isHovered && "is-hovered",
|
||||
isClicked && "is-clicked",
|
||||
interactive && "is-interactive",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size, rotate: '5deg' }}
|
||||
>
|
||||
<svg
|
||||
className="pivoine-docs-icon"
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* Enhanced Gradients for natural peony colors */}
|
||||
<radialGradient id="petal-gradient-1" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
// Generate bloom particles with varied properties
|
||||
const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
|
||||
id: i,
|
||||
angle: (360 / 12) * i,
|
||||
distance: 80 + Math.random() * 20,
|
||||
size: 2 + Math.random() * 2,
|
||||
delay: i * 0.08,
|
||||
}));
|
||||
|
||||
<radialGradient id="petal-gradient-2" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size, rotate: "5deg" }}
|
||||
>
|
||||
<svg
|
||||
className="pivoine-docs-icon"
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* Enhanced Gradients for natural peony colors */}
|
||||
<radialGradient id="petal-gradient-1" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="petal-gradient-3" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-2" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="petal-gradient-4" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-3" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="center-gradient" cx="50%" cy="50%">
|
||||
<stop offset="0%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
|
||||
<stop offset="30%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
|
||||
<stop offset="60%" style={{ stopColor: '#fbbf24', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#f59e0b', stopOpacity: 1 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-4" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="center-inner-gradient" cx="50%" cy="50%">
|
||||
<stop offset="0%" style={{ stopColor: '#fffbeb', stopOpacity: 1 }} />
|
||||
<stop offset="50%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="center-gradient" cx="50%" cy="50%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="30%"
|
||||
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="60%"
|
||||
style={{ stopColor: "#fbbf24", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#f59e0b", stopOpacity: 1 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="page-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style={{ stopColor: '#ffffff', stopOpacity: 0.98 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#f3f4f6', stopOpacity: 0.98 }} />
|
||||
</linearGradient>
|
||||
<radialGradient id="center-inner-gradient" cx="50%" cy="50%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fffbeb", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="50%"
|
||||
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="page-gradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#ffffff", stopOpacity: 0.98 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#f3f4f6", stopOpacity: 0.98 }}
|
||||
/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="intense-glow">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
||||
<feComponentTransfer in="coloredBlur" result="brightBlur">
|
||||
<feFuncA type="linear" slope="1.5" />
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode in="brightBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="center-glow">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="intense-glow">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
||||
<feComponentTransfer in="coloredBlur" result="brightBlur">
|
||||
<feFuncA type="linear" slope="1.5" />
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode in="brightBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="center-glow">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
<filter id="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Subtle background glow */}
|
||||
<circle className="bg-glow" cx="128" cy="128" r="120" fill="url(#petal-gradient-3)" opacity="0.08" />
|
||||
<filter id="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Outer layer - Large petals (8 petals) */}
|
||||
<g className="outer-petals">
|
||||
{[
|
||||
{ angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
|
||||
{ angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
|
||||
{ angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
|
||||
{ angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
|
||||
{ angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
|
||||
{ angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`outer-${i}`}
|
||||
className={`petal outer-petal petal-${i}`}
|
||||
cx="128"
|
||||
cy="70"
|
||||
rx="40"
|
||||
ry="68"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Subtle background glow */}
|
||||
<circle
|
||||
className="bg-glow"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="120"
|
||||
fill="url(#petal-gradient-3)"
|
||||
opacity="0.08"
|
||||
/>
|
||||
|
||||
{/* Middle layer - Medium petals (8 petals, offset) */}
|
||||
<g className="middle-petals">
|
||||
{[
|
||||
{ angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
|
||||
{ angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
|
||||
{ angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
{ angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
|
||||
{ angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
|
||||
{ angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`middle-${i}`}
|
||||
className={`petal middle-petal petal-m-${i}`}
|
||||
cx="128"
|
||||
cy="78"
|
||||
rx="34"
|
||||
ry="56"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Outer layer - Large petals (8 petals) */}
|
||||
<g className="outer-petals">
|
||||
{[
|
||||
{ angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
|
||||
{ angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
|
||||
{ angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
|
||||
{ angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
|
||||
{ angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
|
||||
{ angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`outer-${i}`}
|
||||
className={`petal outer-petal petal-${i}`}
|
||||
cx="128"
|
||||
cy="70"
|
||||
rx="40"
|
||||
ry="68"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{
|
||||
rotate: `${petal.angle}deg`,
|
||||
width: `${128 * petal.scaleX}px`,
|
||||
height: `${70 * petal.scaleY}px`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Inner layer - Small petals (10 petals) */}
|
||||
<g className="inner-petals">
|
||||
{[
|
||||
{ angle: 0, gradient: 3 },
|
||||
{ angle: 45, gradient: 4 },
|
||||
{ angle: 90, gradient: 1 },
|
||||
{ angle: 135, gradient: 2 },
|
||||
{ angle: 180, gradient: 3 },
|
||||
{ angle: 225, gradient: 4 },
|
||||
{ angle: 270, gradient: 1 },
|
||||
{ angle: 315, gradient: 2 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`inner-${i}`}
|
||||
className={`petal inner-petal petal-i-${i}`}
|
||||
cx="128"
|
||||
cy="88"
|
||||
rx="28"
|
||||
ry="44"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Middle layer - Medium petals (8 petals, offset) */}
|
||||
<g className="middle-petals">
|
||||
{[
|
||||
{ angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
|
||||
{ angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
|
||||
{ angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
{ angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
|
||||
{ angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
|
||||
{ angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`middle-${i}`}
|
||||
className={`petal middle-petal petal-m-${i}`}
|
||||
cx="128"
|
||||
cy="78"
|
||||
rx="34"
|
||||
ry="56"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{
|
||||
rotate: `${petal.angle}deg`,
|
||||
width: `${128 * petal.scaleX}px`,
|
||||
height: `${70 * petal.scaleY}px`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Center circles - Flower stamen */}
|
||||
<circle
|
||||
className="center-circle-outer"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="12"
|
||||
fill="url(#center-gradient)"
|
||||
filter="url(#center-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="center-circle-inner"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="url(#center-inner-gradient)"
|
||||
opacity="0.9"
|
||||
/>
|
||||
{/* Inner layer - Small petals (10 petals) */}
|
||||
<g className="inner-petals">
|
||||
{[
|
||||
{ angle: 0, gradient: 3 },
|
||||
{ angle: 45, gradient: 4 },
|
||||
{ angle: 90, gradient: 1 },
|
||||
{ angle: 135, gradient: 2 },
|
||||
{ angle: 180, gradient: 3 },
|
||||
{ angle: 225, gradient: 4 },
|
||||
{ angle: 270, gradient: 1 },
|
||||
{ angle: 315, gradient: 2 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`inner-${i}`}
|
||||
className={`petal inner-petal petal-i-${i}`}
|
||||
cx="128"
|
||||
cy="88"
|
||||
rx="28"
|
||||
ry="44"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{ rotate: `${petal.angle}deg` }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Center details - tiny stamens */}
|
||||
<g className="center-stamens">
|
||||
{Array.from({ length: 8 }).map((_, i) => {
|
||||
const angle = (360 / 8) * i
|
||||
const x = 128 + Math.cos((angle * Math.PI) / 180) * 10
|
||||
const y = 128 + Math.sin((angle * Math.PI) / 180) * 10
|
||||
return (
|
||||
<circle
|
||||
key={`stamen-${i}`}
|
||||
className={`stamen stamen-${i}`}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="2"
|
||||
fill="#d97706"
|
||||
opacity="0.8"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
{/* Center circles - Flower stamen */}
|
||||
<circle
|
||||
className="center-circle-outer"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="12"
|
||||
fill="url(#center-gradient)"
|
||||
filter="url(#center-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="center-circle-inner"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="url(#center-inner-gradient)"
|
||||
opacity="0.9"
|
||||
/>
|
||||
|
||||
{/* Sparkles - ambient magical effect */}
|
||||
<g className="sparkles">
|
||||
<circle className="sparkle sparkle-1" cx="180" cy="75" r="3" fill="#fbbf24" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-2" cx="76" cy="76" r="2.5" fill="#a855f7" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-3" cx="180" cy="180" r="2.5" fill="#ec4899" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-4" cx="76" cy="180" r="3" fill="#c026d3" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-5" cx="128" cy="50" r="2" fill="#f0abfc" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-6" cx="206" cy="128" r="2" fill="#fb7185" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-7" cx="128" cy="206" r="2.5" fill="#fbbf24" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-8" cx="50" cy="128" r="2" fill="#c084fc" filter="url(#sparkle-glow)" />
|
||||
</g>
|
||||
{/* Center details - tiny stamens */}
|
||||
<g className="center-stamens">
|
||||
{Array.from({ length: 8 }).map((_, i) => {
|
||||
const angle = (360 / 8) * i;
|
||||
const x = 128 + Math.cos((angle * Math.PI) / 180) * 10;
|
||||
const y = 128 + Math.sin((angle * Math.PI) / 180) * 10;
|
||||
return (
|
||||
<circle
|
||||
key={`stamen-${i}`}
|
||||
className={`stamen stamen-${i}`}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="2"
|
||||
fill="#d97706"
|
||||
opacity="0.8"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
|
||||
{/* Flying bloom particles (visible on hover) */}
|
||||
<g className="bloom-particles">
|
||||
{bloomParticles.map((particle) => (
|
||||
<circle
|
||||
key={`bloom-particle-${particle.id}`}
|
||||
className={`bloom-particle bloom-particle-${particle.id}`}
|
||||
cx="128"
|
||||
cy="128"
|
||||
r={particle.size}
|
||||
fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
|
||||
opacity="0"
|
||||
filter="url(#sparkle-glow)"
|
||||
style={{
|
||||
'--particle-angle': `${particle.angle}deg`,
|
||||
'--particle-distance': `${particle.distance}px`,
|
||||
'--particle-delay': `${particle.delay}s`,
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
{/* Sparkles - ambient magical effect */}
|
||||
<g className="sparkles">
|
||||
<circle
|
||||
className="sparkle sparkle-1"
|
||||
cx="180"
|
||||
cy="75"
|
||||
r="3"
|
||||
fill="#fbbf24"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-2"
|
||||
cx="76"
|
||||
cy="76"
|
||||
r="2.5"
|
||||
fill="#a855f7"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-3"
|
||||
cx="180"
|
||||
cy="180"
|
||||
r="2.5"
|
||||
fill="#ec4899"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-4"
|
||||
cx="76"
|
||||
cy="180"
|
||||
r="3"
|
||||
fill="#c026d3"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-5"
|
||||
cx="128"
|
||||
cy="50"
|
||||
r="2"
|
||||
fill="#f0abfc"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-6"
|
||||
cx="206"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="#fb7185"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-7"
|
||||
cx="128"
|
||||
cy="206"
|
||||
r="2.5"
|
||||
fill="#fbbf24"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-8"
|
||||
cx="50"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="#c084fc"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Optional label */}
|
||||
{showLabel && (
|
||||
<div className="icon-label">
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
{/* Flying bloom particles (visible on hover) */}
|
||||
<g className="bloom-particles">
|
||||
{bloomParticles.map((particle) => (
|
||||
<circle
|
||||
key={`bloom-particle-${particle.id}`}
|
||||
className={`bloom-particle bloom-particle-${particle.id}`}
|
||||
cx="128"
|
||||
cy="128"
|
||||
r={particle.size}
|
||||
fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
|
||||
opacity="0"
|
||||
filter="url(#sparkle-glow)"
|
||||
style={
|
||||
{
|
||||
"--particle-angle": `${particle.angle}deg`,
|
||||
"--particle-distance": `${particle.distance}px`,
|
||||
"--particle-delay": `${particle.delay}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Optional label */}
|
||||
{showLabel && (
|
||||
<div className="icon-label">
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default as KomposeIcon } from './KomposeIcon'
|
||||
export { default as PivoineDocsIcon } from './PivoineDocsIcon'
|
||||
export { default as KomposeIcon } from "./KomposeIcon";
|
||||
export { default as PivoineDocsIcon } from "./PivoineDocsIcon";
|
||||
|
||||
@@ -6,11 +6,11 @@ const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({
|
||||
baseDirectory: __dirname,
|
||||
baseDirectory: __dirname,
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
reactStrictMode: true,
|
||||
|
||||
// Next.js 15 uses turbopack by default for dev
|
||||
// No need to explicitly enable swcMinify anymore
|
||||
|
||||
// Optimize production build
|
||||
compiler: {
|
||||
removeConsole: process.env.NODE_ENV === 'production',
|
||||
},
|
||||
output: "export",
|
||||
reactStrictMode: true,
|
||||
|
||||
// Image optimization
|
||||
images: {
|
||||
formats: ['image/avif', 'image/webp'],
|
||||
},
|
||||
// Next.js 15 uses turbopack by default for dev
|
||||
// No need to explicitly enable swcMinify anymore
|
||||
|
||||
// Headers for security
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: '/:path*',
|
||||
headers: [
|
||||
{
|
||||
key: 'X-DNS-Prefetch-Control',
|
||||
value: 'on'
|
||||
},
|
||||
{
|
||||
key: 'X-Frame-Options',
|
||||
value: 'SAMEORIGIN'
|
||||
},
|
||||
{
|
||||
key: 'X-Content-Type-Options',
|
||||
value: 'nosniff'
|
||||
},
|
||||
{
|
||||
key: 'Referrer-Policy',
|
||||
value: 'origin-when-cross-origin'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Optimize production build
|
||||
compiler: {
|
||||
removeConsole: process.env.NODE_ENV === "production",
|
||||
},
|
||||
|
||||
// Enable experimental features if needed
|
||||
experimental: {
|
||||
// turbo is now stable in Next.js 15
|
||||
// Add other experimental features here if needed
|
||||
},
|
||||
// Image optimization
|
||||
images: {
|
||||
formats: ["image/avif", "image/webp"],
|
||||
},
|
||||
|
||||
turbopack: {
|
||||
root: '.'
|
||||
}
|
||||
}
|
||||
// Headers for security
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: "/:path*",
|
||||
headers: [
|
||||
{
|
||||
key: "X-DNS-Prefetch-Control",
|
||||
value: "on",
|
||||
},
|
||||
{
|
||||
key: "X-Frame-Options",
|
||||
value: "SAMEORIGIN",
|
||||
},
|
||||
{
|
||||
key: "X-Content-Type-Options",
|
||||
value: "nosniff",
|
||||
},
|
||||
{
|
||||
key: "Referrer-Policy",
|
||||
value: "origin-when-cross-origin",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
export default nextConfig
|
||||
// Enable experimental features if needed
|
||||
experimental: {
|
||||
// turbo is now stable in Next.js 15
|
||||
// Add other experimental features here if needed
|
||||
},
|
||||
|
||||
turbopack: {
|
||||
root: ".",
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
{
|
||||
"name": "pivoine-docs-hub",
|
||||
"version": "1.0.0",
|
||||
"description": "Documentation hub for Pivoine projects by Valknar",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.14",
|
||||
"lucide-react": "^0.263.1",
|
||||
"next": "^15.0.3",
|
||||
"postcss": "^8.5.6",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.2.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-next": "^15.0.3",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.18.0",
|
||||
"pnpm": ">=8.0.0"
|
||||
},
|
||||
"packageManager": "pnpm@9.0.0"
|
||||
"name": "pivoine-docs-hub",
|
||||
"version": "1.0.0",
|
||||
"description": "Documentation hub for Pivoine projects by Valknar",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.14",
|
||||
"lucide-react": "^0.263.1",
|
||||
"next": "^15.0.3",
|
||||
"postcss": "^8.5.6",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.2.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-next": "^15.0.3",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.18.0",
|
||||
"pnpm": ">=8.0.0"
|
||||
},
|
||||
"packageManager": "pnpm@9.0.0"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
{
|
||||
"name": "Pivoine Docs Hub",
|
||||
"short_name": "Pivoine Docs",
|
||||
"description": "Documentation hub for all Pivoine projects by Valknar",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f172a",
|
||||
"theme_color": "#a855f7",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"categories": ["documentation", "developer", "tools"],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/screenshot-wide.png",
|
||||
"sizes": "1280x720",
|
||||
"type": "image/png",
|
||||
"form_factor": "wide"
|
||||
},
|
||||
{
|
||||
"src": "/screenshot-narrow.png",
|
||||
"sizes": "750x1334",
|
||||
"type": "image/png",
|
||||
"form_factor": "narrow"
|
||||
}
|
||||
]
|
||||
"name": "Pivoine Docs Hub",
|
||||
"short_name": "Pivoine Docs",
|
||||
"description": "Documentation hub for all Pivoine projects by Valknar",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f172a",
|
||||
"theme_color": "#a855f7",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"categories": ["documentation", "developer", "tools"],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/screenshot-wide.png",
|
||||
"sizes": "1280x720",
|
||||
"type": "image/png",
|
||||
"form_factor": "wide"
|
||||
},
|
||||
{
|
||||
"src": "/screenshot-narrow.png",
|
||||
"sizes": "750x1334",
|
||||
"type": "image/png",
|
||||
"form_factor": "narrow"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
}
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
{
|
||||
"buildCommand": "pnpm build",
|
||||
"devCommand": "pnpm dev",
|
||||
"installCommand": "pnpm install",
|
||||
"framework": "nextjs",
|
||||
"regions": ["iad1"],
|
||||
"headers": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "X-Content-Type-Options",
|
||||
"value": "nosniff"
|
||||
},
|
||||
{
|
||||
"key": "X-Frame-Options",
|
||||
"value": "SAMEORIGIN"
|
||||
},
|
||||
{
|
||||
"key": "X-XSS-Protection",
|
||||
"value": "1; mode=block"
|
||||
},
|
||||
{
|
||||
"key": "Referrer-Policy",
|
||||
"value": "origin-when-cross-origin"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
"buildCommand": "pnpm build",
|
||||
"devCommand": "pnpm dev",
|
||||
"installCommand": "pnpm install",
|
||||
"framework": "nextjs",
|
||||
"regions": ["iad1"],
|
||||
"headers": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "X-Content-Type-Options",
|
||||
"value": "nosniff"
|
||||
},
|
||||
{
|
||||
"key": "X-Frame-Options",
|
||||
"value": "SAMEORIGIN"
|
||||
},
|
||||
{
|
||||
"key": "X-XSS-Protection",
|
||||
"value": "1; mode=block"
|
||||
},
|
||||
{
|
||||
"key": "Referrer-Policy",
|
||||
"value": "origin-when-cross-origin"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user