jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-27 05:29:03 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(website): enhance website

Browse Source
This commit is contained in:
Bjorn Lammers
2025-04-17 07:21:19 +02:00
committed by Thomas Camlong
parent 6e3a39a4cf
commit 63349f7490
18 changed files with 1264 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
web/src/components/footer.tsx
View File

@@ -4,8 +4,30 @@ import { REPO_PATH } from "@/constants"
import { motion } from "framer-motion"
import { ExternalLink, Github, Heart } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
// Pre-define unique IDs for animations to avoid using array indices as keys
const HOVER_HEART_IDS = [
"hover-heart-1",
"hover-heart-2",
"hover-heart-3",
"hover-heart-4",
"hover-heart-5",
"hover-heart-6",
"hover-heart-7",
"hover-heart-8",
]
const BURST_HEART_IDS = ["burst-heart-1", "burst-heart-2", "burst-heart-3", "burst-heart-4", "burst-heart-5"]
export function Footer() {
const [isHeartHovered, setIsHeartHovered] = useState(false)
const [isHeartFilled, setIsHeartFilled] = useState(false)
// Toggle heart fill state and add extra mini hearts on click
const handleHeartClick = () => {
setIsHeartFilled(!isHeartFilled)
}
return (
<footer className="border-t py-12 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-rose-500/[0.03] via-transparent to-rose-500/[0.03]" />
@@ -66,10 +88,109 @@ export function Footer() {
transition={{ duration: 0.5, delay: 0.2 }}
>
<h3 className="font-bold text-lg text-foreground/90">Community</h3>
<p className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
Made with <Heart className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 animate-pulse" /> by Homarr Labs and the open source
community.
</p>
<div className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
Made with{" "}
<div className="relative inline-block">
<motion.div
className="cursor-pointer"
onMouseEnter={() => setIsHeartHovered(true)}
onMouseLeave={() => setIsHeartHovered(false)}
onClick={handleHeartClick}
whileTap={{ scale: 0.85 }}
>
<motion.div
animate={{
scale: isHeartFilled ? [1, 1.3, 1] : 1,
}}
transition={{
duration: isHeartFilled ? 0.4 : 0,
ease: "easeInOut",
}}
>
<Heart
className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 hover:scale-125 transition-all duration-200"
fill={isHeartFilled ? "#f43f5e" : "none"}
strokeWidth={isHeartFilled ? 1.5 : 2}
/>
</motion.div>
</motion.div>
{/* Easter egg mini hearts */}
{isHeartHovered && (
<>
{HOVER_HEART_IDS.map((id, i) => (
<motion.div
key={id}
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 1, 0.8],
opacity: [0, 1, 0],
x: [0, (i % 2 === 0 ? 1 : -1) * Math.random() * 20],
y: [0, -Math.random() * 30],
}}
transition={{
duration: 0.8 + Math.random() * 0.5,
ease: "easeOut",
delay: Math.random() * 0.2,
}}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
>
<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`} />
</motion.div>
))}
{/* Subtle particle glow */}
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 3],
opacity: [0, 0.3, 0],
}}
transition={{ duration: 0.6, ease: "easeOut" }}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-rose-500/20 pointer-events-none"
/>
</>
)}
{/* Heart fill animation extras */}
{isHeartFilled && (
<>
{/* Radiating circles on heart fill */}
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{
scale: [0.5, 2.5],
opacity: [0.5, 0],
}}
transition={{ duration: 0.6, ease: "easeOut" }}
className="absolute left-1/2 top-1/2 w-3 h-3 rounded-full bg-rose-500/30 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
/>
{/* Extra burst of mini hearts when filled */}
{BURST_HEART_IDS.map((id, i) => (
<motion.div
key={id}
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 1, 0.8],
opacity: [0, 1, 0],
x: [0, Math.cos((i * Math.PI) / 2.5) * 25],
y: [0, Math.sin((i * Math.PI) / 2.5) * 25],
}}
transition={{
duration: 0.6,
ease: "easeOut",
}}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
>
<Heart className="h-2 w-2 text-rose-500" fill="#f43f5e" />
</motion.div>
))}
</>
)}
</div>{" "}
by Homarr Labs and the open source community.
</div>
<Link
href="https://github.com/homarr-labs"
target="_blank"