@@ -135,14 +144,6 @@ export function BountyDetail({ bounty }: BountyDetailProps) {
Tier
{bounty.tier ?? 'T1'}
- {bounty.deadline && (
-
- Deadline
-
- {timeLeft(bounty.deadline)}
-
-
- )}
Submissions
diff --git a/frontend/src/hooks/useCountdown.ts b/frontend/src/hooks/useCountdown.ts
new file mode 100644
index 000000000..cc9883e29
--- /dev/null
+++ b/frontend/src/hooks/useCountdown.ts
@@ -0,0 +1,47 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export interface CountdownParts {
+ days: number;
+ hours: number;
+ minutes: number;
+ seconds: number;
+ totalMs: number;
+ isExpired: boolean;
+ isUrgent: boolean; // < 1 hour
+ isWarning: boolean; // < 24 hours
+}
+
+/**
+ * React hook that returns a live countdown toward `deadline` (ISO string).
+ * Updates every second while the deadline is still in the future.
+ */
+export function useCountdown(deadline: string | null | undefined): CountdownParts {
+ const compute = useCallback((): CountdownParts => {
+ const totalMs = deadline ? new Date(deadline).getTime() - Date.now() : 0;
+ const isExpired = totalMs <= 0;
+ const safeMs = Math.max(totalMs, 0);
+
+ return {
+ days: Math.floor(safeMs / (1000 * 60 * 60 * 24)),
+ hours: Math.floor((safeMs / (1000 * 60 * 60)) % 24),
+ minutes: Math.floor((safeMs / (1000 * 60)) % 60),
+ seconds: Math.floor((safeMs / 1000) % 60),
+ totalMs: safeMs,
+ isExpired,
+ isUrgent: !isExpired && safeMs < 1000 * 60 * 60,
+ isWarning: !isExpired && safeMs < 1000 * 60 * 60 * 24,
+ };
+ }, [deadline]);
+
+ const [parts, setParts] = useState(compute);
+
+ useEffect(() => {
+ // No deadline → return expired state and don't start interval
+ if (!deadline) return;
+
+ const id = setInterval(() => setParts(compute()), 1000);
+ return () => clearInterval(id);
+ }, [deadline, compute]);
+
+ return parts;
+}
diff --git a/frontend/src/lib/animations.ts b/frontend/src/lib/animations.ts
new file mode 100644
index 000000000..ae5f7d2f7
--- /dev/null
+++ b/frontend/src/lib/animations.ts
@@ -0,0 +1,44 @@
+import type { Variants } from 'framer-motion';
+
+export const cardHover: Variants = {
+ rest: { scale: 1, boxShadow: '0 0 0 rgba(0,0,0,0)' },
+ hover: {
+ scale: 1.02,
+ boxShadow: '0 8px 30px rgba(0,230,118,0.08)',
+ transition: { duration: 0.2 },
+ },
+};
+
+export const fadeIn: Variants = {
+ initial: { opacity: 0, y: 12 },
+ animate: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
+export const pageTransition: Variants = {
+ initial: { opacity: 0, y: 20 },
+ animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' } },
+ exit: { opacity: 0, y: -10, transition: { duration: 0.2 } },
+};
+
+export const staggerContainer: Variants = {
+ animate: {
+ transition: {
+ staggerChildren: 0.1,
+ },
+ },
+};
+
+export const staggerItem: Variants = {
+ initial: { opacity: 0, y: 20 },
+ animate: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
+
+export const slideInRight: Variants = {
+ initial: { opacity: 0, x: 40 },
+ animate: { opacity: 1, x: 0, transition: { duration: 0.4 } },
+};
+
+export const buttonHover = {
+ whileHover: { scale: 1.05 },
+ whileTap: { scale: 0.95 },
+};
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 000000000..c1c224e6b
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,58 @@
+/**
+ * Utility functions for the SolFoundry frontend.
+ */
+
+/** Language / skill colour map used in bounty cards. */
+export const LANG_COLORS: Record = {
+ Rust: '#DEA584',
+ TypeScript: '#3178C6',
+ JavaScript: '#F7DF1E',
+ Python: '#3572A5',
+ Go: '#00ADD8',
+ Solidity: '#AA6746',
+ Move: '#5C4B9E',
+ 'C++': '#F34B7D',
+ Java: '#B07219',
+ Ruby: '#701516',
+ Solana: '#9945FF',
+ Anchor: '#818CF8',
+};
+
+/**
+ * Returns a human-readable string describing how far in the future (or past)
+ * the given ISO date string is.
+ */
+export function timeLeft(deadline: string): string {
+ const diff = new Date(deadline).getTime() - Date.now();
+ if (diff <= 0) return 'Expired';
+
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+ const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+ const minutes = Math.floor((diff / (1000 * 60)) % 60);
+
+ if (days > 0) return `${days}d ${hours}h left`;
+ if (hours > 0) return `${hours}h ${minutes}m left`;
+ return `${minutes}m left`;
+}
+
+/**
+ * Returns a human-readable "X ago" string.
+ */
+export function timeAgo(date: string): string {
+ const diff = Date.now() - new Date(date).getTime();
+ const seconds = Math.floor(diff / 1000);
+ if (seconds < 60) return 'just now';
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.floor(hours / 24);
+ return `${days}d ago`;
+}
+
+/**
+ * Format a numeric amount with a token symbol.
+ */
+export function formatCurrency(amount: number, token: string): string {
+ return `${amount.toLocaleString()} ${token}`;
+}