feat: updates page and lint fixes
This commit is contained in:
+41
-24
@@ -33,16 +33,18 @@ export default function Landing() {
|
||||
|
||||
return (
|
||||
<section
|
||||
id="hero"
|
||||
className="w-full h-[calc(100vh-3.6rem)] flex flex-col items-center justify-center relative p-4"
|
||||
id='hero'
|
||||
className='w-full h-[calc(100vh-3.6rem)] 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"
|
||||
className='font-bold text-3xl md:text-5xl text-center flex flex-row gap-2 items-center justify-center'
|
||||
>
|
||||
DeckyVault
|
||||
<span className="border border-border text-xs md:text-base px-2 py-1 rounded-md bg-primary/10 font-medium">beta</span>
|
||||
<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
|
||||
@@ -50,18 +52,18 @@ export default function Landing() {
|
||||
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"
|
||||
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"
|
||||
className='text-center'
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
<AnimatePresence
|
||||
mode="wait"
|
||||
mode='wait'
|
||||
initial={false}
|
||||
>
|
||||
<motion.span
|
||||
@@ -69,7 +71,7 @@ export default function Landing() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="text-primary font-bold"
|
||||
className='text-primary font-bold'
|
||||
>
|
||||
{words[currentWord]}
|
||||
</motion.span>
|
||||
@@ -77,27 +79,27 @@ export default function Landing() {
|
||||
</motion.h2>
|
||||
<AnimatePresence>
|
||||
<motion.label
|
||||
key="search-bar"
|
||||
layoutId="search-bar"
|
||||
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"
|
||||
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" />
|
||||
<Gamepad2Icon className='h-6 w-6 group-focus-within:stroke-accent transition-colors shrink-0' />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="search by game or appid..."
|
||||
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"
|
||||
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"
|
||||
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" />
|
||||
<SearchIcon className='h-3 w-3' />
|
||||
search
|
||||
</motion.button>
|
||||
</motion.label>
|
||||
@@ -105,26 +107,41 @@ export default function Landing() {
|
||||
<motion.small
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 1.5 } }}
|
||||
className="mt-8 text-center text-xs flex flex-row gap-1"
|
||||
className='mt-8 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"
|
||||
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'
|
||||
>
|
||||
<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>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
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",
|
||||
description:
|
||||
"Steam Deck benchmarks, settings, and performance guides",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://deckyvault.xyz/search?q={search_term_string}",
|
||||
|
||||
Reference in New Issue
Block a user