valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: improve UI consistency and footer layout

Browse Source 
- Update text sizing to text-base throughout for consistency
- Improve arrow icon visibility (gray-400 → gray-200 on hover)
- Reorganize tool badges: Open Source first, specialty second, Free third
- Update badge labels: Vert (Converter), Stirling (PDF), Units/Figlet (Open Source)
- Redesign footer: single-row layout with brand pill, centered copyright, GitHub link
- Update footer border: lighter gray-600, constrained to content width

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-09 16:53:03 +01:00
parent 9dd47173d9
commit 593c76de5c
5 changed files with 37 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/Footer.tsx
View File

@@ -6,81 +6,43 @@ export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="relative py-16 px-4 border-t border-gray-800">
<div className="max-w-6xl mx-auto">
<footer className="relative py-12 px-4">
<div className="max-w-6xl mx-auto border-t border-gray-600 pt-12">
<motion.div
className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"
className="flex flex-col md:flex-row items-center justify-between gap-6"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
{/* Brand Column */}
<div className="text-center md:text-left">
<h3 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400 mb-2">
Kit
</h3>
<p className="text-gray-500 text-sm">
Your Creative Toolkit
</p>
<div className="mt-4 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20">
<span className="text-xs font-medium text-purple-400">6 Tools</span>
<span className="text-gray-600">•</span>
<span className="text-xs text-gray-500">Open Source</span>
</div>
{/* Brand Section */}
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-purple-400">
<span className="text-base font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">Kit</span>
<span className="text-base text-gray-600">•</span>
<span className="text-base text-purple-400">Open Source</span>
</div>
{/* Links Column */}
{/* Copyright - centered */}
<div className="text-center">
<h4 className="text-sm font-semibold text-gray-300 mb-4">Links</h4>
<div className="flex flex-col gap-2">
<a
href="https://github.com/valknarness/kit-ui"
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 hover:text-purple-400 transition-colors text-base inline-flex items-center justify-center gap-2"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
</svg>
GitHub
</a>
<a
href="https://pivoine.art"
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 hover:text-purple-400 transition-colors text-base"
>
pivoine.art
</a>
</div>
<p className="text-base text-gray-500">
© {currentYear} Kit. Built with Next.js 16 & Tailwind CSS 4.
</p>
</div>
{/* Tools Column */}
<div className="text-center md:text-right">
<h4 className="text-sm font-semibold text-gray-300 mb-4">Tools</h4>
<div className="flex flex-col gap-2 items-center md:items-end">
<a href="https://vert.kit.pivoine.art" className="text-gray-400 hover:text-[#10b981] transition-colors text-base">Vert</a>
<a href="https://pastel.kit.pivoine.art" className="text-gray-400 hover:text-[#a855f7] transition-colors text-base">Pastel</a>
<a href="https://stirling.kit.pivoine.art" className="text-gray-400 hover:text-[#667eea] transition-colors text-base">Stirling</a>
<a href="https://units.kit.pivoine.art" className="text-gray-400 hover:text-[#2dd4bf] transition-colors text-base">Units</a>
<a href="https://draw.kit.pivoine.art" className="text-gray-400 hover:text-[#ec4899] transition-colors text-base">Draw</a>
<a href="https://figlet.kit.pivoine.art" className="text-gray-400 hover:text-[#eab308] transition-colors text-base">Figlet</a>
</div>
</div>
</motion.div>
{/* Bottom Bar */}
<motion.div
className="pt-8 border-t border-gray-800 text-center"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<p className="text-gray-500 text-sm">
© {currentYear} Kit. Built with Next.js 16 & Tailwind CSS 4.
</p>
{/* GitHub Link */}
<a
href="https://github.com/valknarness/kit-ui"
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-3 px-4 py-2 rounded-full border border-gray-700 hover:border-purple-400 transition-all duration-300"
>
<svg className="w-5 h-5 text-gray-400 group-hover:text-purple-400 transition-colors" fill="currentColor" viewBox="0 0 24 24">
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
</svg>
<span className="text-base text-gray-300 group-hover:text-purple-400 transition-colors font-medium">
View on GitHub
</span>
</a>
</motion.div>
</div>
</footer>

2
components/Hero.tsx
View File

@@ -93,7 +93,7 @@ export default function Hero() {
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 1 }}
>
<span className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">Scroll to explore</span>
<span className="text-base text-gray-500 group-hover:text-gray-400 transition-colors">Scroll to explore</span>
<motion.div
className="w-6 h-10 border-2 border-gray-600 group-hover:border-purple-400 rounded-full p-1 transition-colors"
animate={{ y: [0, 10, 0] }}

2
components/Stats.tsx
View File

@@ -57,7 +57,7 @@ export default function Stats() {
<div className="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
{stat.number}
</div>
<div className="text-gray-400 text-sm font-medium">
<div className="text-gray-400 text-base font-medium">
{stat.label}
</div>
</motion.div>

17
components/ToolCard.tsx
View File

@@ -27,15 +27,15 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -10 }}
>
<div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 hover:shadow-2xl">
<div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 group-hover:shadow-2xl">
{/* Gradient overlay on hover */}
<div
className={`absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 ${gradient}`}
className={`absolute inset-0 opacity-0 group-hover:opacity-15 transition-opacity duration-300 ${gradient}`}
/>
{/* Glow effect */}
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl -z-10">
<div className={`w-full h-full ${gradient}`} />
<div className={`w-full h-full ${gradient} opacity-30`} />
</div>
{/* Icon */}
@@ -86,16 +86,7 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
{/* Arrow icon */}
<motion.div
className="absolute bottom-8 right-8 text-gray-600 transition-colors duration-300"
style={{
color: '#6b7280',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = accentColor;
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#6b7280';
}}
className="absolute bottom-8 right-8 text-gray-400 group-hover:text-gray-200 transition-colors duration-300"
initial={{ x: 0 }}
whileHover={{ x: 5 }}
>

10
components/ToolsGrid.tsx
View File

@@ -10,7 +10,7 @@ const tools = [
url: 'https://vert.kit.pivoine.art',
gradient: 'gradient-green-teal',
accentColor: '#10b981',
badges: ['Privacy', 'Open Source', 'Free'],
badges: ['Open Source', 'Converter', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -40,7 +40,7 @@ const tools = [
url: 'https://stirling.kit.pivoine.art',
gradient: 'gradient-purple-blue',
accentColor: '#667eea',
badges: ['Privacy', 'Open Source', 'Free'],
badges: ['Open Source', 'PDF', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
@@ -54,7 +54,7 @@ const tools = [
url: 'https://units.kit.pivoine.art',
gradient: 'gradient-cyan-purple',
accentColor: '#2dd4bf',
badges: ['Real-time', 'Free'],
badges: ['Open Source', 'Real-time', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
@@ -67,7 +67,7 @@ const tools = [
url: 'https://draw.kit.pivoine.art',
gradient: 'gradient-pink-rose',
accentColor: '#ec4899',
badges: ['Collaborative', 'Open Source', 'Free'],
badges: ['Open Source', 'Collaborative', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
@@ -80,7 +80,7 @@ const tools = [
url: 'https://figlet.kit.pivoine.art',
gradient: 'gradient-yellow-amber',
accentColor: '#eab308',
badges: ['373 Fonts', 'ASCII Art', 'Free'],
badges: ['Open Source', 'ASCII Art', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />