From bc9ee8c022b7889b6e5304b37691e1f5c5056b8a Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 18 Apr 2025 16:51:04 +0200
Subject: [PATCH] Styling changes

---
 web/src/app/icons/components/icon-search.tsx | 12 ++--
 web/src/app/icons/page.tsx                   |  2 +-
 web/src/components/header.tsx                |  6 +-
 web/src/components/hero.tsx                  | 73 +++++++++++---------
 web/src/components/icon-submission-form.tsx  |  4 +-
 web/src/components/theme-switcher.tsx        |  2 +-
 6 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/web/src/app/icons/components/icon-search.tsx b/web/src/app/icons/components/icon-search.tsx
index 76abd97e..7502878b 100644
--- a/web/src/app/icons/components/icon-search.tsx
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -247,7 +247,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 					{/* Filter dropdown */}
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer   border-border shadow-sm0/10 ">
+							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
 								<Filter className="h-4 w-4 mr-2" />
 								<span>Filter</span>
 								{selectedCategories.length > 0 && (
@@ -294,11 +294,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 					{/* Sort dropdown */}
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<Button
-								variant="outline"
-								size="sm"
-								className="flex-1 sm:flex-none cursor-pointer   border-border shadow-sm0/10  hover:border-rose-500"
-							>
+							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm">
 								{getSortIcon(sortOption)}
 								<span className="ml-2">{getSortLabel(sortOption)}</span>
 							</Button>
@@ -327,7 +323,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 
 					{/* Clear all button */}
 					{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
-						<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer    border-rose-500/20">
+						<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer bg-background">
 							<X className="h-4 w-4 mr-2" />
 							<span>Clear all</span>
 						</Button>
@@ -361,7 +357,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 								setSelectedCategories([])
 								updateResults(searchQuery, [], sortOption)
 							}}
-							className="text-xs h-7 px-2  0/10 cursor-pointer"
+							className="text-xs h-7 px-2 cursor-pointer"
 						>
 							Clear all
 						</Button>
diff --git a/web/src/app/icons/page.tsx b/web/src/app/icons/page.tsx
index 2d166f28..ea8788d8 100644
--- a/web/src/app/icons/page.tsx
+++ b/web/src/app/icons/page.tsx
@@ -54,7 +54,7 @@ export default async function IconsPage() {
 	return (
 		<div className="isolate overflow-hidden">
 			<div className="py-8">
-				<div className="space-y-4 mb-8 mx-auto min-w-[80vw]">
+				<div className="space-y-4 mb-8 mx-auto w-7xl">
 					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
 						<div>
 							<h1 className="text-3xl font-bold">Browse icons</h1>
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 400dd7cf..f3641d23 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -60,7 +60,7 @@ export function Header() {
 					<div className="hidden md:block">
 						<Button
 							variant="outline"
-							className="gap-2 cursor-pointer0/10 dark:hover:bg-rose-900/30   transition-all duration-300"
+							className="gap-2 cursor-pointer   transition-all duration-300"
 							onClick={openCommandMenu}
 						>
 							<Search className="h-4 w-4 transition-all duration-300" />
@@ -76,7 +76,7 @@ export function Header() {
 						<Button
 							variant="ghost"
 							size="icon"
-							className="rounded-lg cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
+							className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 "
 							onClick={openCommandMenu}
 						>
 							<Search className="h-5 w-5 transition-all duration-300" />
@@ -92,7 +92,7 @@ export function Header() {
 									<Button
 										variant="ghost"
 										size="icon"
-										className="rounded-lg cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
+										className="rounded-lg cursor-pointer  transition-all duration-300 hover:ring-2"
 										asChild
 									>
 										<Link href={REPO_PATH} target="_blank" className="group">
diff --git a/web/src/components/hero.tsx b/web/src/components/hero.tsx
index 391e8ec7..22dbc793 100644
--- a/web/src/components/hero.tsx
+++ b/web/src/components/hero.tsx
@@ -6,7 +6,23 @@ 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 { Car, Code, Coffee, DollarSign, ExternalLink, Eye, GitFork, Heart, Search, Server, Share2, Star, TrendingUp } from "lucide-react"
+import {
+	Car,
+	Code,
+	Coffee,
+	DollarSign,
+	ExternalLink,
+	Eye,
+	GitFork,
+	Heart,
+	Plus,
+	Search,
+	Server,
+	Share2,
+	Sparkles,
+	Star,
+	TrendingUp,
+} from "lucide-react"
 import Link from "next/link"
 import { useEffect, useRef, useState } from "react"
 import { AuroraText } from "./magicui/aurora-text"
@@ -128,7 +144,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
 	const [searchQuery, setSearchQuery] = useState("")
 
 	return (
-		<div className="relative my-20 w-full flex items-center justify-center overflow-hidden">
+		<div className="relative w-full flex items-center justify-center overflow-hidden">
 			<div className="absolute inset-0 bg-gradient-to-br from-rose-500/[0.1] via-transparent to-rose-500/[0.1] blur-3xl" />
 
 			<div className="absolute inset-0 overflow-hidden pointer-events-none">
@@ -188,44 +204,35 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
 				/>
 			</div>
 
-			<div className="relative z-10 container mx-auto px-4 md:px-6">
+			<div className="relative z-10 container mx-auto px-4 md:px-6 mt-4 py-20">
 				<div className="max-w-4xl mx-auto text-center flex flex-col gap-4 ">
-					<Link
-						prefetch
-						href="https://github.com/homarr-labs"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="mx-auto  motion-safe:motion-preset-slide-up motion-duration-1500"
-					>
-						<Card className="group p-2 px-4 flex flex-row items-center gap-2 border-2  z-10 relative glass-effect hover:scale-105 transition-all duration-300">
-							<Heart className="h-4 w-4 text-primary group-hover:fill-primary transition-all duration-300" />
-							<span className="text-sm text-foreground/70 tracking-wide">Made with love by Homarr Labs</span>
-						</Card>
-					</Link>
 
-					<h1 className="text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight ">
+					<h1 className="relative text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight motion-preset-slide-up motion-duration-2000 ">
 						Your definitive source for
+						<Sparkles className="absolute -right-1 -bottom-3 text-rose-500 h-8 w-8 sm:h-12 sm:w-12 md:h-16 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[-120%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-[1s] motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
 						<br />
+						<Sparkles className="absolute -left-1 -top-3 text-rose-500 h-5 w-5 sm:h-8 sm:w-8 md:h-12 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[159%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-[1s] motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
 						<AuroraText colors={["#FA5352", "#FA5352", "orange"]}>dashboard icons</AuroraText>
 					</h1>
 
-					<p className="text-sm sm:text-base md:text-xl text-muted-foreground mb-6 md:mb-8 leading-relaxed font-light tracking-wide max-w-2xl mx-auto px-4">
+					<p className="text-sm sm:text-base md:text-xl text-muted-foreground leading-relaxed mb-8 font-light tracking-wide max-w-2xl mx-auto px-4 motion-preset-slide-down motion-duration-2000">
 						A collection of <span className="font-medium ">{totalIcons}</span> curated icons for services, applications and tools, designed
 						specifically for dashboards and app directories.
 					</p>
-
-					<SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} totalIcons={totalIcons} />
-					<div className="flex gap-3 md:gap-4 flex-wrap justify-center">
-						<Link href="/icons">
-							<InteractiveHoverButton className="rounded-md bg-input/30">Explore icons</InteractiveHoverButton>
-						</Link>
-						<GiveUsAStarButton stars={stars} />
-						<GiveUsMoneyButton />
-						<GiveUsLoveButton />
+					<div className="flex flex-col gap-4 max-w-3xl mx-auto">
+						<SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} totalIcons={totalIcons} />
+						<div className="w-full flex gap-3 md:gap-4 flex-wrap justify-center motion-preset-slide-down motion-duration-2000">
+							<Link href="/icons">
+								<InteractiveHoverButton className="rounded-md bg-input/30">Explore icons</InteractiveHoverButton>
+							</Link>
+							<GiveUsAStarButton stars={stars} />
+							<GiveUsMoneyButton />
+							<GiveUsLoveButton />
+						</div>
 					</div>
 				</div>
 			</div>
-
+		
 			<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/80 pointer-events-none" />
 		</div>
 	)
@@ -258,8 +265,8 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
 							What is Starring?
 						</h4>
 						<p className="text-sm text-muted-foreground">
-							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
+							Starring a repository on GitHub is like bookmarking it.<br/> It helps you keep track of projects you find interesting and shows
+							appreciation to the project maintainers.<br/> You can star a repository by clicking the 'Star' button, usually found in the
 							top-right corner of the repository's page on GitHub.
 						</p>
 					</div>
@@ -279,6 +286,10 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
 								<GitFork className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
 								<span>Encourages more forks and community involvement</span>
 							</li>
+							<li className="flex items-start gap-2">
+								<Plus className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
+								<span>Grow the library with more icons</span>
+							</li>
 						</ul>
 					</div>
 
@@ -313,7 +324,7 @@ export function GiveUsLoveButton() {
 	return (
 		<HoverCard openDelay={200} closeDelay={200}>
 			<HoverCardTrigger asChild>
-				<Button variant="outline" className="h-9 md:h-10 px-4">
+				<Button variant="outline" className="h-9 md:h-10 px-4 cursor-pointer">
 					<div className="flex items-center gap-2">
 						<p>Give us love</p>
 						<Heart className="h-4 w-4 ml-1 fill-red-500 text-red-500" />
@@ -460,7 +471,7 @@ interface SearchInputProps {
 
 function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputProps) {
 	return (
-		<form action="/icons" method="GET" className="relative w-full group">
+		<form action="/icons" method="GET" className="relative group">
 			<Input
 				name="q"
 				autoFocus
diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx
index 5cecdf38..d47782f8 100644
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -74,12 +74,12 @@ export function IconSubmissionForm() {
 			<DialogTrigger asChild>
 				<Button
 					variant="outline"
-					className="hidden md:inline-flex cursor-pointer0/10 dark:hover:bg-rose-900/30   transition-all duration-300"
+					className="hidden md:inline-flex cursor-pointer transition-all duration-300"
 				>
 					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="md:max-w-4xl backdrop-blur-2xl">
+			<DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
 				<DialogHeader>
 					<DialogTitle>Contribute a new icon</DialogTitle>
 					<DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription>
diff --git a/web/src/components/theme-switcher.tsx b/web/src/components/theme-switcher.tsx
index fae37809..12d6d537 100644
--- a/web/src/components/theme-switcher.tsx
+++ b/web/src/components/theme-switcher.tsx
@@ -19,7 +19,7 @@ export function ThemeSwitcher() {
 					<TooltipTrigger asChild>
 						<DropdownMenuTrigger asChild>
 							<Button
-								className="rounded-md cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-colors duration-200 group"
+								className=" transition-colors duration-200 group hover:ring-2 rounded-lg cursor-pointer"
 								variant="ghost"
 								size="icon"
 							>