Skip to content

Commit 5a4980c

Browse files
ViktorSvertokaViktorSvertoka
authored
Merge pull request #281 from DevLoversTeam/feat/ui-improvements
(SP 1) [Frontend] UI improvements for About page - icons, mobile UX, and performance
2 parents 0b33394 + 6e18267 commit 5a4980c

11 files changed

Lines changed: 40 additions & 27 deletions

File tree

‎frontend/components/about/InteractiveGame.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -475,26 +475,26 @@ export function InteractiveGame() {
475475
<div
476476
className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500' : 'bg-red-500'}`}
477477
/>
478-
<span className="font-mono text-[8px] font-bold text-neutral-400 uppercase">
478+
<span className="font-mono text-[9px] font-bold text-neutral-400 uppercase">
479479
{t(getCurrentLevelKey(score))}
480480
</span>
481481
</div>
482482

483-
<div className="flex items-center gap-3 md:absolute md:left-1/2 md:-translate-x-1/2 md:gap-6">
483+
<div className="flex items-center gap-2 md:absolute md:left-1/2 md:-translate-x-1/2 md:gap-6">
484484
<div className="flex flex-col items-center">
485-
<span className="text-[7px] font-bold tracking-widest text-neutral-400 uppercase md:text-[8px]">
485+
<span className="text-[9px] font-bold tracking-widest text-neutral-400 uppercase md:text-[8px]">
486486
{t('high')}
487487
</span>
488488
<span
489489
suppressHydrationWarning
490-
className="font-mono text-[10px] font-bold text-neutral-500 md:text-xs"
490+
className="font-mono text-[11px] font-bold text-neutral-500 md:text-xs"
491491
>
492492
{highScore.toString().padStart(3, '0')}
493493
</span>
494494
</div>
495495
<div className="h-3 w-[1px] bg-neutral-300 md:h-4 dark:bg-white/20" />
496496
<div className="flex flex-col items-center">
497-
<span className="text-[7px] font-bold tracking-widest text-[#ff005b] uppercase md:text-[8px]">
497+
<span className="text-[9px] font-bold tracking-widest text-[#ff005b] uppercase md:text-[8px]">
498498
{t('score')}
499499
</span>
500500
<span className="font-mono text-sm leading-none font-black text-neutral-800 md:text-lg dark:text-white">
@@ -508,9 +508,9 @@ export function InteractiveGame() {
508508
e.stopPropagation();
509509
exitGame();
510510
}}
511-
className="-mr-1 p-1.5 transition-colors hover:text-[#ff005b] md:-mr-2 md:p-2"
511+
className="-mr-1 p-2 transition-colors hover:text-[#ff005b] md:-mr-2"
512512
>
513-
<X size={14} className="text-neutral-400 md:h-4 md:w-4" />
513+
<X size={16} className="text-neutral-400 md:h-4 md:w-4" />
514514
</button>
515515
</div>
516516

‎frontend/components/about/PricingSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22
import { motion } from 'framer-motion';
3-
import { ArrowRight, Check, Heart, Server, Sparkles, X } from 'lucide-react';
3+
import { ArrowRight, BadgeDollarSign, Check, Heart, Server, Sparkles, X } from 'lucide-react';
44
import Link from 'next/link';
55
import { useTranslations } from 'next-intl';
66
import { useState } from 'react';
@@ -46,7 +46,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
4646
aria-hidden="true"
4747
/>
4848

49-
<div className="pointer-events-none absolute inset-0 z-0">
49+
<div className="pointer-events-none absolute inset-0 z-0 hidden md:block">
5050
<ParticleCanvas activeShape={activeShape} className="h-full w-full" />
5151
</div>
5252

@@ -59,7 +59,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
5959
<h2 id="pricing-heading" className="sr-only">
6060
{t('heading')}
6161
</h2>
62-
<GradientBadge icon={Sparkles} text={t('badge')} className="mb-4" />
62+
<GradientBadge icon={BadgeDollarSign} text={t('badge')} className="mb-4" />
6363
</motion.div>
6464

6565
<SectionHeading
@@ -205,7 +205,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
205205
</motion.div>
206206
</div>
207207

208-
<p className="mx-auto mb-16 max-w-lg text-center font-mono text-[10px] leading-relaxed text-gray-400 dark:text-neutral-600">
208+
<p className="mx-auto mb-16 max-w-lg text-center font-mono text-xs leading-relaxed text-gray-400 dark:text-neutral-600">
209209
{t('disclaimer')}
210210
</p>
211211

‎frontend/components/about/SponsorsWall.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { motion } from 'framer-motion';
4-
import { Crown, Plus, Sparkles } from 'lucide-react';
4+
import { Crown, Heart, Plus } from 'lucide-react';
55
import Image from 'next/image';
66
import Link from 'next/link';
77
import { useTranslations } from 'next-intl';
@@ -23,7 +23,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
2323
return (
2424
<div className="mt-16 flex w-full flex-col items-center">
2525
<div className="mb-4 opacity-100">
26-
<GradientBadge icon={Sparkles} text={t('badge')} />
26+
<GradientBadge icon={Heart} text={t('badge')} />
2727
</div>
2828

2929
<motion.div
@@ -75,7 +75,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
7575
</Link>
7676
</motion.div>
7777

78-
<p className="mt-4 font-mono text-[10px] text-gray-500 dark:text-neutral-500">
78+
<p className="mt-4 font-mono text-[10px] text-gray-400 dark:text-neutral-600">
7979
{t('fundsNote')}
8080
</p>
8181
</div>

‎frontend/components/theme/ThemeToggle.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { motion } from 'framer-motion';
3+
import { AnimatePresence, motion } from 'framer-motion';
44
import { Monitor, Moon, Sun } from 'lucide-react';
55
import { useTranslations } from 'next-intl';
66
import { useTheme } from 'next-themes';
@@ -45,13 +45,15 @@ export function ThemeToggle() {
4545
aria-label={t(labelKey)}
4646
className="theme-toggle-btn relative flex h-7 w-7 items-center justify-center rounded-full"
4747
>
48-
{theme === value && (
49-
<motion.div
50-
layoutId="theme-active"
51-
className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-neutral-800"
52-
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
53-
/>
54-
)}
48+
<AnimatePresence mode="wait">
49+
{theme === value && (
50+
<motion.div
51+
layoutId="theme-indicator"
52+
className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-neutral-800"
53+
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
54+
/>
55+
)}
56+
</AnimatePresence>
5557
<Icon className="relative z-10 h-4 w-4 text-neutral-500 transition-colors dark:text-neutral-400" />
5658
</button>
5759
))}

‎frontend/components/ui/github-star-button.tsx‎

Whitespace-only changes.

‎frontend/data/about.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const TOPICS = [
6060
color:
6161
'group-hover:border-[#F05032]/50 dark:group-hover:border-[#F05032]/50 group-hover:bg-[#F05032]/10',
6262
glow: 'bg-[#F05032]',
63-
href: '/q&a',
63+
href: '/q&a/?category=git',
6464
},
6565
{
6666
id: 'html',

‎frontend/lib/about/stats.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const getPlatformStats = unstable_cache(
4343

4444
const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT
4545
? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT)
46-
: 1342;
46+
: 1400;
4747

4848
let totalUsers = 243;
4949
let solvedTests = 1890;

‎frontend/messages/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -775,7 +775,7 @@
775775
"disclaimer": "*No developers were harmed in the making of this pricing table. Only caffeine levels were impacted."
776776
},
777777
"sponsors": {
778-
"badge": "Latest Contributors",
778+
"badge": "Open Source Heroes",
779779
"emptySlot": "You?",
780780
"yourSpot": "Your Spot",
781781
"joinClub": "Join the club",

‎frontend/messages/pl.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -802,7 +802,7 @@
802802
"disclaimer": "*Żaden developer nie ucierpiał podczas tworzenia tej tabeli cenowej. Ucierpiał tylko poziom kofeiny."
803803
},
804804
"sponsors": {
805-
"badge": "Ostatni kontrybutorzy",
805+
"badge": "Bohaterowie Open Source",
806806
"emptySlot": "Ty?",
807807
"yourSpot": "Twoje miejsce",
808808
"joinClub": "Dołącz do klubu",

‎frontend/messages/uk.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -778,7 +778,7 @@
778778
"disclaimer": "*Жоден розробник не постраждав під час створення цієї таблиці. Постраждав лише рівень кофеїну."
779779
},
780780
"sponsors": {
781-
"badge": "Останні контриб'ютори",
781+
"badge": "Герої Open Source",
782782
"emptySlot": "Ти?",
783783
"yourSpot": "Твоє місце",
784784
"joinClub": "Приєднатись до клубу",

0 commit comments

Comments
 (0)