style: replace emoji heart with primary Heart icon and polish Valknar link

- Swap 💜 for a filled Lucide Heart icon in text-primary in both Footer and AppSidebar
- Style Valknar link with animated underline (decoration-primary on hover)
- Add sidebar footer with copyright, Heart, Valknar link, and GitFork source link
- Add author field to package.json

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 12:20:28 +01:00
parent 0d731e56da
commit 6a586b936a
3 changed files with 61 additions and 4 deletions

View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { GitFork } from 'lucide-react'; import { GitFork, Heart } from 'lucide-react';
export default function Footer() { export default function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
@@ -17,8 +17,18 @@ export default function Footer() {
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
{/* Copyright */} {/* Copyright */}
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground flex items-center gap-1">
© {currentYear} Kit. Built with Next.js 16 & Tailwind CSS 4 © {currentYear} Kit.
<Heart className="h-4 w-4 text-primary shrink-0" fill="currentColor" />
<a
href="https://pivoine.art"
target="_blank"
rel="noopener noreferrer"
title="Pivoine.Art"
className="font-medium underline underline-offset-4 decoration-primary/0 hover:decoration-primary transition-all duration-300"
>
Valknar
</a>
</p> </p>
{/* Source link */} {/* Source link */}

View File

@@ -2,7 +2,7 @@
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { X } from 'lucide-react'; import { X, GitFork, Heart } from 'lucide-react';
import { cn } from '@/lib/utils/cn'; import { cn } from '@/lib/utils/cn';
import Logo from '@/components/Logo'; import Logo from '@/components/Logo';
import { useSidebar } from './SidebarProvider'; import { useSidebar } from './SidebarProvider';
@@ -108,6 +108,49 @@ export function AppSidebar() {
</div> </div>
</nav> </nav>
{/* Sidebar Footer */}
<div className={cn(
"shrink-0 border-t border-border py-3",
isCollapsed ? "flex justify-center px-2" : "px-4"
)}>
{isCollapsed ? (
<a
href="https://dev.pivoine.art/valknar/kit-ui"
target="_blank"
rel="noopener noreferrer"
title="View source"
className="text-muted-foreground hover:text-primary transition-colors duration-300"
>
<GitFork className="h-4 w-4" />
</a>
) : (
<div className="flex items-center justify-between">
<p className="flex items-center gap-1 text-[10px] text-muted-foreground">
© {new Date().getFullYear()} Kit.
<Heart className="h-2.5 w-2.5 text-primary shrink-0" fill="currentColor" />
<a
href="https://pivoine.art"
target="_blank"
rel="noopener noreferrer"
title="Pivoine.Art"
className="font-medium underline underline-offset-4 decoration-primary/0 hover:decoration-primary transition-all duration-300"
>
Valknar
</a>
</p>
<a
href="https://dev.pivoine.art/valknar/kit-ui"
target="_blank"
rel="noopener noreferrer"
title="View source"
className="text-muted-foreground hover:text-primary transition-colors duration-300"
>
<GitFork className="h-3.5 w-3.5" />
</a>
</div>
)}
</div>
</aside> </aside>
</> </>
); );

View File

@@ -2,6 +2,10 @@
"name": "kit-ui", "name": "kit-ui",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"author": {
"name": "Valknar",
"email": "valknar@pivoine.art"
},
"scripts": { "scripts": {
"dev": "next dev --turbopack", "dev": "next dev --turbopack",
"build": "next build", "build": "next build",