diff --git a/web/src/components/hero.tsx b/web/src/components/hero.tsx index bba3cbcd..391e8ec7 100644 --- a/web/src/components/hero.tsx +++ b/web/src/components/hero.tsx @@ -4,12 +4,14 @@ import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" +import { Separator } from "@radix-ui/react-dropdown-menu" import { motion, useAnimation, useInView } from "framer-motion" -import { DollarSign, Heart, Search, Star } from "lucide-react" +import { Car, Code, Coffee, DollarSign, ExternalLink, Eye, GitFork, Heart, Search, Server, Share2, Star, TrendingUp } from "lucide-react" import Link from "next/link" import { useEffect, useRef, useState } from "react" import { AuroraText } from "./magicui/aurora-text" import { InteractiveHoverButton } from "./magicui/interactive-hover-button" +import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card" interface IconCardProps { name: string @@ -187,81 +189,40 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
-
- - - +
+ + + Made with love by Homarr Labs -

+

Your definitive source for
dashboard icons

- -

- A collection of {totalIcons} curated icons for services, applications and tools, - designed specifically for dashboards and app directories. -

- +

+ A collection of {totalIcons} curated icons for services, applications and tools, designed + specifically for dashboards and app directories. +

- -
- setSearchQuery(e.target.value)} - /> - - - -
- - Explore icons - - - - - {/* Give us money */} - - - -
-
+ +
+ + Explore icons + + + + +
@@ -269,3 +230,253 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
) } + +export default function GiveUsAStarButton({ stars }: { stars: string | number }) { + return ( + + + + + + + +
+
+

+ + What is Starring? +

+

+ Starring a repository on GitHub is like bookmarking it. It helps you keep track of projects you find interesting and shows + appreciation to the project maintainers. You can star a repository by clicking the 'Star' button, usually found in the + top-right corner of the repository's page on GitHub. +

+
+ +
+
How your star helps us:
+
    +
  • + + Increases our visibility in GitHub search results +
    • +
  • + + Attracts more contributors to improve the project +
    • +
  • + + Encourages more forks and community involvement +
    • +
+
+ +
+ + +
+
+ + + ) +} + +export function GiveUsLoveButton() { + return ( + + + + + +
+
+

+ + Support us without spending +

+

We keep our service free through minimal, non-intrusive ads.

+
+ +
+
+

Please consider disabling your ad-blocker

+

+ We only show ads on the icon detail pages (/icons/{"{id}"}) and never on the main site. +

+

+ Note: If you use a network-wide ad blocker (like Pi-hole or AdGuard Home), you may need to whitelist "carbonads.net" + specifically. +

+
+
+ +
+
Our Privacy Promise:
+
    +
  • + ✓ + We don't track your browsing habits +
    • +
  • + ✓ + We don't sell your personal data +
    • +
  • + ✓ + We only use essential cookies +
    • +
+
+ + + +
+
+ + Spread the word +
+

+ Don't want to disable your ad blocker? You can still help us by sharing our website with others who might find it useful. +

+
+
+ + + ) +} + +export function GiveUsMoneyButton() { + const openCollectiveUrl = "https://opencollective.com/homarr" + + return ( + + + + + + + +
+
+

+ + Support our open source work +

+

Your donations help us maintain and improve our free, open-source project.

+
+ +
+

What is OpenCollective?

+

+ OpenCollective is a transparent funding platform for open source projects. All donations and expenses are publicly visible, + ensuring complete transparency in how funds are used. +

+
+ +
+
Where your money goes:
+
    +
  • + + Hosting and infrastructure costs +
    • +
  • + + Development time for new features +
    • +
  • + + Coffee to fuel late-night coding sessions +
    • +
  • + + A new Lamborghini (although we'd love to) +
    • +
+
+ +
+ + + + + + +
+
+ + + ) +} + +interface SearchInputProps { + searchQuery: string + setSearchQuery: React.Dispatch> + totalIcons: number +} + +function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputProps) { + return ( +
+ setSearchQuery(e.target.value)} + /> + + + + ) +}