feat(landing): add recently added benchmarks section, reorder sections, add PlayabilityBadge and performance tags to cards
This commit is contained in:
+361
-339
@@ -4,170 +4,196 @@ import { AnimatePresence, motion } from "motion/react"
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { Gamepad2Icon, SearchIcon, TrendingUpIcon, SparklesIcon, GaugeIcon, FlagIcon } from "lucide-react"
|
||||
import {
|
||||
Gamepad2Icon,
|
||||
SearchIcon,
|
||||
TrendingUpIcon,
|
||||
GaugeIcon,
|
||||
ClockIcon,
|
||||
} from "lucide-react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { PlayabilityBadge } from "@/components/playability-badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface GameCard {
|
||||
id: string
|
||||
title: string
|
||||
capsule_image: string | null
|
||||
header_image: string | null
|
||||
playability_status?: string | null
|
||||
activity_score?: number
|
||||
benchmark_count?: number
|
||||
comment_count?: number
|
||||
upvote_count?: number
|
||||
avg_fps?: number
|
||||
report_count?: number
|
||||
release_date?: string | null
|
||||
created_at?: string | null
|
||||
id: string
|
||||
title: string
|
||||
capsule_image: string | null
|
||||
header_image: string | null
|
||||
playability_status?: string | null
|
||||
activity_score?: number
|
||||
benchmark_count?: number
|
||||
comment_count?: number
|
||||
upvote_count?: number
|
||||
avg_fps?: number
|
||||
report_count?: number
|
||||
release_date?: string | null
|
||||
created_at?: string | null
|
||||
}
|
||||
|
||||
interface SectionData {
|
||||
trending: GameCard[]
|
||||
bestNewReleases: GameCard[]
|
||||
mostTested: GameCard[]
|
||||
mostReported: GameCard[]
|
||||
recentBenchmarks: GameCard[]
|
||||
trending: GameCard[]
|
||||
mostTested: GameCard[]
|
||||
}
|
||||
|
||||
function SkeletonSections() {
|
||||
return (
|
||||
<>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-3">
|
||||
<div className="h-5 w-48 bg-text/5 rounded animate-pulse" />
|
||||
<div className="flex gap-3 overflow-x-auto pb-2">
|
||||
{[1, 2, 3, 4].map((j) => (
|
||||
<div
|
||||
key={j}
|
||||
className="shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border animate-pulse"
|
||||
>
|
||||
<div className="aspect-[2/3] bg-text/5 rounded-t-xl" />
|
||||
<div className="p-3 space-y-2">
|
||||
<div className="h-3 bg-text/5 rounded w-3/4" />
|
||||
<div className="h-2 bg-text/5 rounded w-1/2" />
|
||||
return (
|
||||
<>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className='space-y-3'
|
||||
>
|
||||
<div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
|
||||
<div className='flex gap-3 overflow-x-auto pb-2'>
|
||||
{[1, 2, 3, 4].map((j) => (
|
||||
<div
|
||||
key={j}
|
||||
className='shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border animate-pulse'
|
||||
>
|
||||
<div className='aspect-[2/3] bg-text/5 rounded-t-xl' />
|
||||
<div className='p-3 space-y-2'>
|
||||
<div className='h-3 bg-text/5 rounded w-3/4' />
|
||||
<div className='h-2 bg-text/5 rounded w-1/2' />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function PlayabilityDot({ status }: { status: string }) {
|
||||
const colors: Record<string, string> = {
|
||||
great: "bg-green-500",
|
||||
playable: "bg-blue-500",
|
||||
needs_tweaks: "bg-yellow-500",
|
||||
unplayable: "bg-red-500",
|
||||
}
|
||||
const labels: Record<string, string> = {
|
||||
great: "Plays Great",
|
||||
playable: "Playable",
|
||||
needs_tweaks: "Needs Tweaks",
|
||||
unplayable: "Unplayable",
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={`inline-block w-2.5 h-2.5 rounded-full ${colors[status] || "bg-text/20"}`}
|
||||
title={labels[status] || status}
|
||||
/>
|
||||
)
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function GameSection({
|
||||
title,
|
||||
icon: Icon,
|
||||
games,
|
||||
statKey,
|
||||
statLabel,
|
||||
statFormatter,
|
||||
accentColor = "text-text/50",
|
||||
muted = false,
|
||||
title,
|
||||
icon: Icon,
|
||||
games,
|
||||
statKey,
|
||||
statLabel,
|
||||
statFormatter,
|
||||
accentColor = "text-text/50",
|
||||
muted = false,
|
||||
}: {
|
||||
title: string
|
||||
icon: React.ElementType
|
||||
games: GameCard[]
|
||||
statKey: string
|
||||
statLabel: string
|
||||
statFormatter?: (v: unknown) => string
|
||||
accentColor?: string
|
||||
muted?: boolean
|
||||
title: string
|
||||
icon: React.ElementType
|
||||
games: GameCard[]
|
||||
statKey: string
|
||||
statLabel: string
|
||||
statFormatter?: (v: unknown) => string
|
||||
accentColor?: string
|
||||
muted?: boolean
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
const formatStat = (v: unknown): string => {
|
||||
if (statFormatter) return statFormatter(v)
|
||||
if (typeof v === "number") return `${Math.round(v)} ${statLabel}`
|
||||
return `${v} ${statLabel}`
|
||||
}
|
||||
const formatStat = (v: unknown): string => {
|
||||
if (statFormatter) return statFormatter(v)
|
||||
if (typeof v === "number") return `${Math.round(v)} ${statLabel}`
|
||||
return `${v} ${statLabel}`
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className={muted ? "opacity-70" : ""}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="border-l-2 border-primary pl-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`h-4 w-4 ${accentColor}`} />
|
||||
<h2 className="text-sm font-semibold text-text/80">{title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-thin">
|
||||
{games.map((game, idx) => (
|
||||
<motion.div
|
||||
key={game.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
return (
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: idx * 0.05 }}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="group shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border hover:border-text/30 hover:bg-text/[0.06] transition-colors cursor-pointer overflow-hidden"
|
||||
onClick={() => router.push(`/game/${game.id}?sync=1`)}
|
||||
>
|
||||
<div className="relative aspect-[2/3] bg-text/10 overflow-hidden">
|
||||
{game.capsule_image ? (
|
||||
<Image
|
||||
src={game.capsule_image}
|
||||
alt={game.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
sizes="(max-width: 640px) 144px, 176px"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Gamepad2Icon className="h-8 w-8 text-text/15" />
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className={muted ? "opacity-70" : ""}
|
||||
>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<div className='border-l-2 border-primary pl-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Icon className={`h-4 w-4 ${accentColor}`} />
|
||||
<h2 className='text-sm font-semibold text-text/80'>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{game.playability_status && game.playability_status !== "unknown" && (
|
||||
<div className="absolute top-1.5 right-1.5">
|
||||
<PlayabilityDot status={game.playability_status} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-2.5 space-y-1.5">
|
||||
<h3 className="text-xs font-semibold text-text line-clamp-2 leading-tight group-hover:text-primary transition-colors">
|
||||
{game.title}
|
||||
</h3>
|
||||
<p className={`text-[10px] ${accentColor} font-medium`}>
|
||||
{formatStat((game as unknown as Record<string, unknown>)[statKey])}
|
||||
</p>
|
||||
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-thin'>
|
||||
{games.map((game, idx) => (
|
||||
<motion.div
|
||||
key={game.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: idx * 0.05 }}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className='group shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border hover:border-text/30 hover:bg-text/6 transition-colors cursor-pointer overflow-hidden'
|
||||
onClick={() => router.push(`/game/${game.id}?sync=1`)}
|
||||
>
|
||||
<div className='relative aspect-2/3 bg-text/10 overflow-hidden'>
|
||||
{game.capsule_image ? (
|
||||
<Image
|
||||
src={game.capsule_image}
|
||||
alt={game.title}
|
||||
fill
|
||||
className='object-cover group-hover:scale-105 transition-transform duration-300'
|
||||
sizes='(max-width: 640px) 144px, 176px'
|
||||
/>
|
||||
) : (
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
<Gamepad2Icon className='h-8 w-8 text-text/15' />
|
||||
</div>
|
||||
)}
|
||||
{/* Playability badge pinned at bottom of image */}
|
||||
{game.playability_status &&
|
||||
game.playability_status !== "unknown" && (
|
||||
<div className='absolute bottom-1.5 left-1.5 right-1.5'>
|
||||
<PlayabilityBadge
|
||||
status={game.playability_status as "great" | "playable" | "needs_tweaks" | "unplayable" | "unknown" | null}
|
||||
compact
|
||||
showLabel
|
||||
className='text-[10px] px-1.5 py-0.5 w-full justify-center'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='p-2.5 space-y-1.5'>
|
||||
<h3 className='text-xs font-semibold text-text line-clamp-2 leading-tight group-hover:text-primary transition-colors'>
|
||||
{game.title}
|
||||
</h3>
|
||||
|
||||
{/* Performance badges */}
|
||||
{game.avg_fps !== undefined && game.avg_fps !== null && (
|
||||
<div className='flex flex-wrap gap-1'>
|
||||
{game.avg_fps >= 60 ? (
|
||||
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold leading-tight'>
|
||||
⚡ RAW PERFORMER
|
||||
</span>
|
||||
) : game.avg_fps < 30 ? (
|
||||
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[9px] font-semibold leading-tight'>
|
||||
⚠ POOR PERFORMANCE
|
||||
</span>
|
||||
) : null}
|
||||
<span className='inline-flex items-center gap-0.5 text-[9px] text-text/50 font-medium'>
|
||||
{Math.round(game.avg_fps)}fps
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p
|
||||
className={`text-[10px] ${accentColor} font-medium`}
|
||||
>
|
||||
{formatStat(
|
||||
(
|
||||
game as unknown as Record<
|
||||
string,
|
||||
unknown
|
||||
>
|
||||
)[statKey],
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
)
|
||||
</motion.section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Landing() {
|
||||
@@ -179,48 +205,54 @@ export default function Landing() {
|
||||
|
||||
// Landing section state
|
||||
const [sections, setSections] = useState<SectionData>({
|
||||
trending: [],
|
||||
bestNewReleases: [],
|
||||
mostTested: [],
|
||||
mostReported: [],
|
||||
recentBenchmarks: [],
|
||||
trending: [],
|
||||
mostTested: [],
|
||||
})
|
||||
const [sectionsLoading, setSectionsLoading] = useState(true)
|
||||
|
||||
// Animated words cycle — use useEffect with proper cleanup
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentWord((prev) => (prev + 1) % words.length)
|
||||
}, 2000)
|
||||
return () => clearInterval(interval)
|
||||
const interval = setInterval(() => {
|
||||
setCurrentWord((prev) => (prev + 1) % words.length)
|
||||
}, 2000)
|
||||
return () => clearInterval(interval)
|
||||
}, [words.length])
|
||||
|
||||
// Fetch all 4 sections in parallel on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function fetchSections() {
|
||||
try {
|
||||
const [trending, bestNew, mostTested, mostReported] = await Promise.all([
|
||||
fetch("/api/dashboard/trending").then(r => r.ok ? r.json() : []),
|
||||
fetch("/api/dashboard/best-new-releases").then(r => r.ok ? r.json() : []),
|
||||
fetch("/api/dashboard/most-tested").then(r => r.ok ? r.json() : []),
|
||||
fetch("/api/dashboard/most-reported").then(r => r.ok ? r.json() : []),
|
||||
])
|
||||
if (!cancelled) {
|
||||
setSections({
|
||||
trending: Array.isArray(trending) ? trending : [],
|
||||
bestNewReleases: Array.isArray(bestNew) ? bestNew : [],
|
||||
mostTested: Array.isArray(mostTested) ? mostTested : [],
|
||||
mostReported: Array.isArray(mostReported) ? mostReported : [],
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
// Silently fail — sections are best-effort
|
||||
} finally {
|
||||
if (!cancelled) setSectionsLoading(false)
|
||||
let cancelled = false
|
||||
async function fetchSections() {
|
||||
try {
|
||||
const [recentBenchmarks, trending, mostTested] =
|
||||
await Promise.all([
|
||||
fetch("/api/dashboard/recent-benchmarks").then((r) =>
|
||||
r.ok ? r.json() : [],
|
||||
),
|
||||
fetch("/api/dashboard/trending").then((r) =>
|
||||
r.ok ? r.json() : [],
|
||||
),
|
||||
fetch("/api/dashboard/most-tested").then((r) =>
|
||||
r.ok ? r.json() : [],
|
||||
),
|
||||
])
|
||||
if (!cancelled) {
|
||||
setSections({
|
||||
recentBenchmarks: Array.isArray(recentBenchmarks) ? recentBenchmarks : [],
|
||||
trending: Array.isArray(trending) ? trending : [],
|
||||
mostTested: Array.isArray(mostTested) ? mostTested : [],
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
// Silently fail — sections are best-effort
|
||||
} finally {
|
||||
if (!cancelled) setSectionsLoading(false)
|
||||
}
|
||||
}
|
||||
fetchSections()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}
|
||||
fetchSections()
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
const handleSearchSubmit = () => {
|
||||
@@ -237,180 +269,170 @@ export default function Landing() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Hero Section ── */}
|
||||
<section
|
||||
id='hero'
|
||||
className='w-full min-h-[calc(100svh-10svh)] flex flex-col items-center justify-center relative p-4'
|
||||
>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className='font-bold text-3xl md:text-5xl text-center flex flex-row gap-2 items-center justify-center'
|
||||
<>
|
||||
{/* ── Hero Section ── */}
|
||||
<section
|
||||
id='hero'
|
||||
className='w-full min-h-[70svh] mt-[10svh] flex flex-col items-center justify-center relative p-4'
|
||||
>
|
||||
DeckyVault
|
||||
<span className='border border-border text-xs md:text-base px-2 py-1 rounded-md bg-primary/10 font-medium'>
|
||||
beta
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.h2
|
||||
layout
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{ opacity: 0.8, transition: { delay: 0.5 } }}
|
||||
className='mt-4 flex flex-row flex-wrap items-center justify-center gap-x-1 md:gap-x-2 text-base md:text-xl'
|
||||
>
|
||||
{"Find your game".split(" ").map((word, index) => (
|
||||
<motion.span
|
||||
key={index}
|
||||
className='text-center'
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
<AnimatePresence
|
||||
mode='wait'
|
||||
initial={false}
|
||||
>
|
||||
<motion.span
|
||||
key={currentWord}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='text-primary font-bold'
|
||||
>
|
||||
{words[currentWord]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</motion.h2>
|
||||
<AnimatePresence>
|
||||
<motion.label
|
||||
key='search-bar'
|
||||
layoutId='search-bar'
|
||||
<motion.h1
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className='mt-8 flex flex-row items-center gap-4 bg-text/5 px-2 py-2 rounded-md border border-border placeholder:text-text/60 group hover:border-border-active transition-colors focus-within:border-primary/80! focus-within:ring-2 focus-within:ring-primary/50! focus-within:ring-offset-2 focus-within:ring-offset-background cursor-text w-full max-w-md'
|
||||
className='font-bold text-3xl md:text-5xl text-center flex flex-row gap-2 items-center justify-center'
|
||||
>
|
||||
<Gamepad2Icon className='h-6 w-6 group-focus-within:stroke-accent transition-colors shrink-0' />
|
||||
<input
|
||||
type='text'
|
||||
placeholder='search by game or appid...'
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className='flex-1 outline-none bg-transparent text-xl min-w-0'
|
||||
/>
|
||||
<motion.button
|
||||
onClick={handleSearchSubmit}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className='text-sm flex flex-row gap-1 items-center bg-text text-background px-2 py-1 rounded-sm cursor-pointer hover:opacity-60 transition-opacity shrink-0'
|
||||
DeckyVault
|
||||
<span className='border border-border text-xs md:text-base px-2 py-1 rounded-md bg-primary/10 font-medium'>
|
||||
beta
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.h2
|
||||
layout
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{ opacity: 0.8, transition: { delay: 0.5 } }}
|
||||
className='mt-4 flex flex-row flex-wrap items-center justify-center gap-x-1 md:gap-x-2 text-base md:text-xl'
|
||||
>
|
||||
{"Find your game".split(" ").map((word, index) => (
|
||||
<motion.span
|
||||
key={index}
|
||||
className='text-center'
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
<AnimatePresence
|
||||
mode='wait'
|
||||
initial={false}
|
||||
>
|
||||
<SearchIcon className='h-3 w-3' />
|
||||
search
|
||||
</motion.button>
|
||||
</motion.label>
|
||||
</AnimatePresence>
|
||||
<motion.small
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 1.5 } }}
|
||||
className='mt-8 text-center text-xs flex flex-row gap-1'
|
||||
>
|
||||
<Link
|
||||
title='Visit our Github Repository'
|
||||
href='/updates'
|
||||
className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
|
||||
<motion.span
|
||||
key={currentWord}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='text-primary font-bold'
|
||||
>
|
||||
{words[currentWord]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</motion.h2>
|
||||
<AnimatePresence>
|
||||
<motion.label
|
||||
key='search-bar'
|
||||
layoutId='search-bar'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className='mt-8 flex flex-row items-center gap-4 bg-text/5 px-2 py-2 rounded-md border border-border placeholder:text-text/60 group hover:border-border-active transition-colors focus-within:border-primary/80! focus-within:ring-2 focus-within:ring-primary/50! focus-within:ring-offset-2 focus-within:ring-offset-background cursor-text w-full max-w-md'
|
||||
>
|
||||
<Gamepad2Icon className='h-6 w-6 group-focus-within:stroke-accent transition-colors shrink-0' />
|
||||
<input
|
||||
type='text'
|
||||
placeholder='search by game or appid...'
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className='flex-1 outline-none bg-transparent text-xl min-w-0'
|
||||
/>
|
||||
<motion.button
|
||||
onClick={handleSearchSubmit}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className='text-sm flex flex-row gap-1 items-center bg-text text-background px-2 py-1 rounded-sm cursor-pointer hover:opacity-60 transition-opacity shrink-0'
|
||||
>
|
||||
<SearchIcon className='h-3 w-3' />
|
||||
search
|
||||
</motion.button>
|
||||
</motion.label>
|
||||
</AnimatePresence>
|
||||
<motion.small
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 1.5 } }}
|
||||
className='mt-8 text-center text-xs flex flex-row gap-1'
|
||||
>
|
||||
See what{"'"}s new.
|
||||
</Link>
|
||||
</motion.small>
|
||||
<motion.small
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 1.5 } }}
|
||||
className='mt-2 text-center text-xs flex flex-row gap-1'
|
||||
>
|
||||
<span className='opacity-60'>2026 DeckyVault.</span>
|
||||
<Link
|
||||
title='Visit our Github Repository'
|
||||
href='https://github.com/AdrianBonpin/deckyvault'
|
||||
className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
|
||||
<Link
|
||||
title='Visit our Github Repository'
|
||||
href='/updates'
|
||||
className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
|
||||
>
|
||||
See what{"'"}s new.
|
||||
</Link>
|
||||
</motion.small>
|
||||
<motion.small
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 1.5 } }}
|
||||
className='mt-2 text-center text-xs flex flex-row gap-1'
|
||||
>
|
||||
Github.
|
||||
</Link>
|
||||
<span className="opacity-60">v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
|
||||
</motion.small>
|
||||
</section>
|
||||
<span className='opacity-60'>2026 DeckyVault.</span>
|
||||
<Link
|
||||
title='Visit our Github Repository'
|
||||
href='https://github.com/AdrianBonpin/deckyvault'
|
||||
className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
|
||||
>
|
||||
Github.
|
||||
</Link>
|
||||
<span className='opacity-60'>
|
||||
v{process.env.NEXT_PUBLIC_APP_VERSION}
|
||||
</span>
|
||||
</motion.small>
|
||||
</section>
|
||||
|
||||
{/* ── Landing Sections ── */}
|
||||
<div className="w-full max-w-7xl mx-auto px-4 pb-12 space-y-10">
|
||||
{sectionsLoading ? (
|
||||
<SkeletonSections />
|
||||
) : (
|
||||
<>
|
||||
{sections.trending.length > 0 && (
|
||||
<GameSection
|
||||
title="Trending This Week"
|
||||
icon={TrendingUpIcon}
|
||||
games={sections.trending}
|
||||
statKey="benchmark_count"
|
||||
statLabel="benchmarks this week"
|
||||
accentColor="text-orange-400"
|
||||
/>
|
||||
)}
|
||||
{sections.bestNewReleases.length > 0 && (
|
||||
<GameSection
|
||||
title="Best Performing New Releases"
|
||||
icon={SparklesIcon}
|
||||
games={sections.bestNewReleases}
|
||||
statKey="avg_fps"
|
||||
statLabel="avg FPS"
|
||||
statFormatter={(v) => `${Math.round(Number(v))} FPS`}
|
||||
accentColor="text-green-400"
|
||||
/>
|
||||
)}
|
||||
{sections.mostTested.length > 0 && (
|
||||
<GameSection
|
||||
title="Most Tested Games"
|
||||
icon={GaugeIcon}
|
||||
games={sections.mostTested}
|
||||
statKey="benchmark_count"
|
||||
statLabel="benchmarks"
|
||||
accentColor="text-blue-400"
|
||||
/>
|
||||
)}
|
||||
{sections.mostReported.length > 0 && (
|
||||
<GameSection
|
||||
title="Most Reported Games"
|
||||
icon={FlagIcon}
|
||||
games={sections.mostReported}
|
||||
statKey="report_count"
|
||||
statLabel="open reports"
|
||||
accentColor="text-red-400"
|
||||
muted
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* ── Landing Sections ── */}
|
||||
<div className='w-full max-w-7xl mx-auto px-4 pb-12 space-y-10'>
|
||||
{sectionsLoading ? (
|
||||
<SkeletonSections />
|
||||
) : (
|
||||
<>
|
||||
{sections.recentBenchmarks.length > 0 && (
|
||||
<GameSection
|
||||
title='Recently Added Benchmarks'
|
||||
icon={ClockIcon}
|
||||
games={sections.recentBenchmarks}
|
||||
statKey='benchmark_count'
|
||||
statLabel='benchmarks'
|
||||
accentColor='text-violet-400'
|
||||
/>
|
||||
)}
|
||||
{sections.trending.length > 0 && (
|
||||
<GameSection
|
||||
title='Trending This Week'
|
||||
icon={TrendingUpIcon}
|
||||
games={sections.trending}
|
||||
statKey='benchmark_count'
|
||||
statLabel='benchmarks this week'
|
||||
accentColor='text-orange-400'
|
||||
/>
|
||||
)}
|
||||
{sections.mostTested.length > 0 && (
|
||||
<GameSection
|
||||
title='Most Tested Games'
|
||||
icon={GaugeIcon}
|
||||
games={sections.mostTested}
|
||||
statKey='benchmark_count'
|
||||
statLabel='benchmarks'
|
||||
accentColor='text-blue-400'
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<script
|
||||
type='application/ld+json'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "DeckyVault",
|
||||
url: "https://deckyvault.xyz",
|
||||
description:
|
||||
"Steam Deck benchmarks, settings, and performance guides",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://deckyvault.xyz/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<script
|
||||
type='application/ld+json'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "DeckyVault",
|
||||
url: "https://deckyvault.xyz",
|
||||
description:
|
||||
"Steam Deck benchmarks, settings, and performance guides",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://deckyvault.xyz/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user