+1 -1

src/components/HackerNews.tsx

Reviewed

··· 20 20 } 21 21 22 22 return ( 23 23 - <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20"> 23 23 + <div className="card p-4"> 24 24 <ul className="space-y-2"> 25 25 {stories.map((story) => ( 26 26 <li key={story.id} className="flex gap-3 text-sm">

+1 -1

src/components/Lobsters.tsx

Reviewed

··· 20 20 } 21 21 22 22 return ( 23 23 - <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20"> 23 23 + <div className="card p-4"> 24 24 <ul className="space-y-2"> 25 25 {stories.map((story) => ( 26 26 <li key={story.short_id} className="flex gap-3 text-sm">

+1 -1

src/components/SearchBar.tsx

Reviewed

··· 19 19 20 20 return ( 21 21 <form 22 22 - className="h-full flex-1 p-4 rounded-xl bg-white/5 border border-rose-400/20 flex flex-col justify-center" 22 22 + className="card h-full flex-1 p-4 flex flex-col justify-center" 23 23 onSubmit={(e) => { 24 24 e.preventDefault(); 25 25 if (query.trim()) {

+1 -1

src/components/ServiceGrid.tsx

Reviewed

··· 49 49 <a 50 50 key={service.name} 51 51 href={service.url} 52 52 - className="block p-4 rounded-xl bg-white/5 border border-rose-400/20 hover:border-rose-400/40 hover:scale-105 transition-all" 52 52 + className="card block p-4 hover:bg-white/[0.07] hover:border-white/20 hover:-translate-y-0.5 transition-all" 53 53 > 54 54 <div className="flex items-center gap-3"> 55 55 {service.icon && (

+2 -2

src/components/Weather.tsx

Reviewed

··· 59 59 60 60 if (error) { 61 61 return ( 62 62 - <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20 text-zinc-400"> 62 62 + <div className="card p-4 text-zinc-400"> 63 63 {error} 64 64 </div> 65 65 ); ··· 70 70 } 71 71 72 72 return ( 73 73 - <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20"> 73 73 + <div className="card p-4"> 74 74 <div className="flex items-center gap-4"> 75 75 {getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")} 76 76 <div>

+6

src/index.css

Reviewed

··· 1 1 @import "tailwindcss"; 2 2 3 3 + @layer components { 4 4 + .card { 5 5 + @apply bg-white/[0.03] border border-white/10 rounded-2xl shadow-lg shadow-black/20 backdrop-blur-sm; 6 6 + } 7 7 + } 8 8 + 3 9 body { 4 10 background: 5 11 radial-gradient(ellipse 120% 80% at 0% 0%, rgba(244, 63, 94, 0.12), transparent 70%),