lfg2025/botfights
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile homepage — side-by-side Fight/Watch buttons, hero bots below title

Browse Source 
- Buttons always side-by-side with shorter labels (FIGHT / WATCH)
- Hero bots displayed horizontally below title on mobile
- Desktop keeps flanking hero layout with larger sprites

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-07 20:10:57 +00:00
co-authored by Claude Opus 4.6
parent 52bba75ee5
commit c5f6c6bbf9
2 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/HomePage.vue
+53 -49
View File
@@ -342,52 +342,56 @@ onUnmounted(() => {
<div class="max-w-4xl w-full text-center slide-up relative z-10">
<!-- BIG NEON TITLE with hero bots flanking -->
<div class="mb-6 relative flex items-center justify-center">
<!-- Hero bot LEFT -->
<div class="hero-fighter hero-fighter-left shrink-0 -mr-2 sm:-mr-4">
<SpritePreview
seed="hero_samurai"
archetype="samurai"
:tier="5"
:size="140"
class="hidden sm:block drop-shadow-[0_0_24px_rgba(255,68,136,0.4)]"
/>
<!-- Title -->
<h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight flex items-center justify-center gap-3 sm:gap-5 md:gap-6 mb-4 sm:mb-6">
<PixelGlove :size="40" class="hidden sm:block md:!w-[56px] shrink-0" />
<PixelGlove :size="28" class="sm:hidden shrink-0" />
BOTFIGHTS
<PixelGlove :size="28" flip class="sm:hidden shrink-0" />
<PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
</h1>
<!-- Hero bots: vertical on mobile, flanking on desktop -->
<!-- Mobile: stacked vertically -->
<div class="sm:hidden flex items-center justify-center gap-6 mb-4">
<div class="hero-fighter hero-fighter-left shrink-0">
<SpritePreview
seed="hero_samurai"
archetype="samurai"
:tier="5"
:size="90"
class="sm:hidden drop-shadow-[0_0_16px_rgba(255,68,136,0.4)]"
class="drop-shadow-[0_0_16px_rgba(255,68,136,0.4)]"
/>
</div>
<h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight flex items-center justify-center gap-3 sm:gap-5 md:gap-6">
<PixelGlove :size="40" class="hidden sm:block md:!w-[56px] shrink-0" />
<PixelGlove :size="28" class="sm:hidden shrink-0" />
BOTFIGHTS
<PixelGlove :size="28" flip class="sm:hidden shrink-0" />
<PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
</h1>
<!-- Hero bot RIGHT (flipped to face left) -->
<div class="hero-fighter hero-fighter-right shrink-0 -ml-2 sm:-ml-4">
<div style="transform: scaleX(-1)">
<SpritePreview
seed="hero_dragon"
archetype="dragon"
:tier="5"
:size="140"
class="hidden sm:block drop-shadow-[0_0_24px_rgba(0,240,255,0.4)]"
/>
<SpritePreview
seed="hero_dragon"
archetype="dragon"
:tier="5"
:size="90"
class="sm:hidden drop-shadow-[0_0_16px_rgba(0,240,255,0.4)]"
/>
</div>
<div class="hero-fighter hero-fighter-right shrink-0" style="transform: scaleX(-1)">
<SpritePreview
seed="hero_dragon"
archetype="dragon"
:tier="5"
:size="90"
class="drop-shadow-[0_0_16px_rgba(0,240,255,0.4)]"
/>
</div>
</div>
<!-- Desktop: flanking (hidden on mobile) -->
<div class="hidden sm:flex items-center justify-center mb-6">
<div class="hero-fighter hero-fighter-left shrink-0">
<SpritePreview
seed="hero_samurai"
archetype="samurai"
:tier="5"
:size="140"
class="drop-shadow-[0_0_24px_rgba(255,68,136,0.4)]"
/>
</div>
<div class="hero-fighter hero-fighter-right shrink-0 ml-8" style="transform: scaleX(-1)">
<SpritePreview
seed="hero_dragon"
archetype="dragon"
:tier="5"
:size="140"
class="drop-shadow-[0_0_24px_rgba(0,240,255,0.4)]"
/>
</div>
</div>
@@ -406,23 +410,23 @@ onUnmounted(() => {
</p>
</div>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-5 mb-10">
<!-- CTAs — always side by side -->
<div class="flex items-center justify-center gap-3 sm:gap-5 mb-8 sm:mb-10">
<RouterLink
to="/join"
class="px-10 py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
font-display font-black text-base tracking-widest
hover:bg-neon-pink/20 transition-all neon-border-pink"
class="flex-1 sm:flex-none sm:px-10 py-3 sm:py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
font-display font-black text-sm sm:text-base tracking-widest text-center
hover:bg-neon-pink/20 transition-all neon-border-pink max-w-[180px] sm:max-w-none"
>
JOIN A BOUT
FIGHT
</RouterLink>
<RouterLink
to="/arena"
class="px-10 py-4 border-2 border-neon-cyan/40 text-neon-cyan
font-display font-black text-base tracking-widest
hover:border-neon-cyan hover:bg-neon-cyan/10 transition-all"
class="flex-1 sm:flex-none sm:px-10 py-3 sm:py-4 border-2 border-neon-cyan/40 text-neon-cyan
font-display font-black text-sm sm:text-base tracking-widest text-center
hover:border-neon-cyan hover:bg-neon-cyan/10 transition-all max-w-[180px] sm:max-w-none"
>
WATCH FIGHTS
WATCH
</RouterLink>
</div>