Skip to content

feat: Redesign the live event display card with animations, improved … #560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PaulicStudios merged 1 commit into from
Mar 12, 2026
Merged

feat: Redesign the live event display card with animations, improved … #560

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 49 additions & 25 deletions frontend/components/HomePageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@ import { useEffect, useMemo, useState } from "react";
import GlobalStats from "@/components/GlobalStats";
import { GithubIcon, WikiIcon } from "@/components/icons";
import { CoreLogoWhite } from "@/components/social";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
Expand Down Expand Up @@ -99,28 +96,55 @@ export default function HomePageClient(props: {
</Button>
</div>
{props.currentLiveEvent && timeLeftMs > 0 && (
<Card className="mx-auto mt-6 max-w-sm">
<CardHeader className="flex flex-row items-center justify-between gap-3">
<CardTitle className="text-lg font-semibold">
{props.currentLiveEvent.name}
</CardTitle>
<CardDescription className="space-x-2">
<Badge>Live</Badge>
<Badge>
Ends in
{" "}
{formatTimeLeft(timeLeftMs)}
</Badge>
</CardDescription>
</CardHeader>
<CardContent>
<Button asChild>
<Link href={`/events/${props.currentLiveEvent.id}`}>
View event
</Link>
</Button>
</CardContent>
</Card>
<motion.div
initial={{ scale: 0.95, opacity: 0, y: 10 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<Link href={`/events/${props.currentLiveEvent.id}`} className="group mx-auto mt-6 block w-full max-w-lg rounded-xl focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none md:mt-8">
<Card className="relative h-full w-full overflow-hidden border-white/10 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)] group-active:translate-y-0 group-active:scale-[0.98]">
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Find globals.css and check --primary definition
fd -e css globals.css -x cat {}

Repository: 42core-team/website

Length of output: 6617

🏁 Script executed:

# Check Tailwind version and config
fd -e json package.json -x head -50 {} && fd -e js tailwind.config.js -x cat {} && fd -e ts tailwind.config.ts -x cat {}

Repository: 42core-team/website

Length of output: 5719

🏁 Script executed:

# Check if the project supports light mode
fd -e tsx -e ts frontend/components/HomePageClient.tsx -x cat {}

Repository: 42core-team/website

Length of output: 45

rgba(var(--primary),0.3) is invalid CSS — the hover shadow is silently broken.

The --primary variable is defined in OKLch color space (oklch(0.205 0 0) in light mode, oklch(0.922 0 0) in dark mode), not as RGB channels or HSL values. This means rgba(var(--primary), 0.3) produces invalid CSS and the shadow renders as none.

Replace with the OKLch form to work with the project's color system:

🐛 Proposed fix 
- group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)]
+ group-hover:shadow-[0_20px_40px_-15px_oklch(var(--primary)/0.3)]

Also, border-white/10 is hardcoded and invisible in light mode, which uses a dark foreground color. Use a semantic token instead:

🐛 Proposed fix 
- border-white/10
+ border-border/30
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Card className="relative h-full w-full overflow-hidden border-white/10 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)] group-active:translate-y-0 group-active:scale-[0.98]">
<Card className="relative h-full w-full overflow-hidden border-border/30 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_oklch(var(--primary)/0.3)] group-active:translate-y-0 group-active:scale-[0.98]">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/components/HomePageClient.tsx` at line 105, In HomePageClient's Card
element (the Card with the long className string), replace the invalid
rgba(var(--primary),0.3) used in the hover shadow with an OKLch-aware color
expression such as color-mix(in oklch, var(--primary) 30%, transparent) so the
shadow is rendered using the project's OKLch token, and replace the hardcoded
border-white/10 token with a semantic border token (e.g., border-border/10 or
border-muted/10) so the border respects light/dark foreground semantics; update
the className on the Card element accordingly.

<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-50 transition-opacity group-hover:opacity-100" />
<CardHeader className="flex flex-row items-center justify-between pb-6">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="absolute top-0 left-0 inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-destructive"></span>
</span>
<span className="text-xs font-semibold tracking-widest text-destructive uppercase">
Live
</span>
</div>
<CardTitle className="text-xl font-bold tracking-tight text-foreground transition-colors group-hover:text-primary md:text-2xl">
{props.currentLiveEvent.name}
</CardTitle>
</div>
<div className="flex items-center gap-4 border-l border-border/50 pl-4 transition-colors group-hover:border-primary/30">
<div className="flex flex-col items-end gap-1 text-right">
<span className="text-[10px] font-medium tracking-wider text-muted-foreground uppercase transition-colors group-hover:text-primary/70">Closing in</span>
<span className="font-mono text-base font-bold text-foreground tabular-nums transition-colors group-hover:text-primary">
{formatTimeLeft(timeLeftMs)}
</span>
</div>
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary">
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</div>
Comment on lines +129 to +142
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Replace the inline SVG with lucide-react's ArrowRight icon.

The project's components.json sets "iconLibrary": "lucide", meaning lucide-react is the designated icon library for this shadcn/ui setup. As per coding guidelines, custom components should not be created when a shadcn equivalent exists. ArrowRight from lucide-react is a direct equivalent.

Additionally, the decorative icon is missing aria-hidden="true", meaning screen readers will attempt to announce an empty label for the SVG.

♻️ Proposed fix

Add to imports at the top:

+ import { ArrowRight } from "lucide-react";

Replace the icon container content:

  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary">
-   <svg
-     className="h-5 w-5"
-     xmlns="http://www.w3.org/2000/svg"
-     viewBox="0 0 24 24"
-     fill="none"
-     stroke="currentColor"
-     strokeWidth="2.5"
-     strokeLinecap="round"
-     strokeLinejoin="round"
-   >
-     <path d="M5 12h14M12 5l7 7-7 7" />
-   </svg>
+   <ArrowRight className="h-5 w-5" aria-hidden="true" />
  </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary">
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</div>
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary">
<ArrowRight className="h-5 w-5" aria-hidden="true" />
</div>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/components/HomePageClient.tsx` around lines 129 - 142, The inline
SVG used as the arrow icon in HomePageClient.tsx should be replaced with the
lucide-react ArrowRight component and marked decorative for accessibility; add
an import for ArrowRight from 'lucide-react' at the top of the file, then
replace the <svg>...</svg> block inside the rounded icon container with a usage
of ArrowRight preserving the existing className ("h-5 w-5") and adding
aria-hidden="true" so screen readers ignore it.

</div>
</CardHeader>
</Card>
</Link>
</motion.div>
)}
</div>

Expand Down
Loading