diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: glitter border on team/class cards, mobile-friendly class selector

Browse Source 
- Animated gold border glitter effect on active team card and class image
- Classes selector: 2-column grid on mobile (no scroll), list on desktop
- Selector appears above detail on mobile (flex-col-reverse)
- Compact selector items on mobile (icon + name only)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-10 19:55:09 +03:00
parent 303c52653c
commit f2b840416d
4 changed files with 58 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/sections/Classes.tsx
View File

@@ -44,7 +44,7 @@ export function Classes() {
<div>
{/* Hero image */}
{item.images && item.images[0] && (
<div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
<div className="team-card-glitter relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
<Image
src={item.images[0]}
alt={item.name}
@@ -75,10 +75,10 @@ export function Classes() {
</div>
)}
renderSelectorItem={(item, _i, isActive) => (
<div className="flex items-center gap-3 p-3">
<div className="flex items-center gap-2 px-3 py-2 lg:gap-3 lg:p-3">
{/* Icon */}
<div
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
className={`flex h-7 w-7 lg:h-9 lg:w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
isActive
? "bg-[#c9a96e]/20 text-[#d4b87a]"
: "bg-neutral-200/50 text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400"
@@ -88,7 +88,7 @@ export function Classes() {
</div>
<div className="min-w-0">
<p
className={`text-sm font-semibold truncate transition-colors ${
className={`text-xs lg:text-sm font-semibold truncate transition-colors ${
isActive
? "text-[#c9a96e]"
: "text-neutral-700 dark:text-neutral-300"
@@ -96,7 +96,7 @@ export function Classes() {
>
{item.name}
</p>
<p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
<p className="hidden lg:block text-xs text-neutral-500 dark:text-neutral-500 truncate">
{item.description}
</p>
</div>