diff --git a/frontend/components/quiz/tests/quiz-container-flow.test.tsx b/frontend/components/quiz/tests/quiz-container-flow.test.tsx
new file mode 100644
index 00000000..88b87008
--- /dev/null
+++ b/frontend/components/quiz/tests/quiz-container-flow.test.tsx
@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+const { routerReplace, routerBack, toastMock } = vi.hoisted(() => ({
+ routerReplace: vi.fn(),
+ routerBack: vi.fn(),
+ toastMock: Object.assign(vi.fn(), { error: vi.fn() }),
+}));
+
+vi.mock('next-intl', () => ({
+ useTranslations: () => (key: string) => key,
+ useLocale: () => 'en',
+}));
+
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({ replace: routerReplace, back: routerBack }),
+ useSearchParams: () => new URLSearchParams(),
+}));
+
+vi.mock('sonner', () => ({ toast: toastMock }));
+
+
+vi.mock('@/hooks/useAntiCheat', () => ({
+ useAntiCheat: () => ({
+ violations: [],
+ violationsCount: 0,
+ resetViolations: vi.fn(),
+ }),
+}));
+
+vi.mock('@/hooks/useQuizGuards', () => ({
+ useQuizGuards: () => ({ markQuitting: vi.fn() }),
+}));
+
+vi.mock('@/hooks/useQuizSession', () => ({
+ useQuizSession: () => {},
+}));
+
+vi.mock('@/components/quiz/CountdownTimer', () => ({
+ CountdownTimer: () => null,
+}));
+
+vi.mock('@/actions/quiz', () => ({
+ submitQuizAttempt: vi.fn(async () => ({ success: true, pointsAwarded: 10 })),
+}));
+
+import { QuizContainer } from '@/components/quiz/QuizContainer';
+
+describe('QuizContainer flow', () => {
+ let fetchMock: ReturnType;
+
+ beforeEach(() => {
+ fetchMock = vi.fn().mockResolvedValue({
+ ok: true,
+ json: async () => ({ isCorrect: true }),
+ });
+ vi.stubGlobal('fetch', fetchMock);
+ localStorage.clear();
+ sessionStorage.clear();
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it('runs a guest flow from rules to result', async () => {
+ const questions = [
+ {
+ id: 'q1',
+ displayOrder: 1,
+ difficulty: null,
+ questionText: 'Question 1',
+ explanation: null,
+ answers: [
+ { id: 'a1', displayOrder: 1, answerText: 'Answer 1' },
+ { id: 'a2', displayOrder: 2, answerText: 'Answer 2' },
+ ],
+ },
+ ];
+
+ render(
+
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'startButton' }));
+
+ expect(await screen.findByText('Question 1')).toBeTruthy();
+
+ fireEvent.click(screen.getByText('Answer 1'));
+
+ await waitFor(() => {
+ expect(fetchMock).toHaveBeenCalledTimes(1);
+ });
+
+ const [url, options] = fetchMock.mock.calls[0];
+ const payload = JSON.parse(options.body);
+
+ expect(url).toBe('/api/quiz/verify-answer');
+ expect(payload.questionId).toBe('q1');
+ expect(payload.answerId).toBe('a1');
+ expect(payload.encryptedAnswers).toBe('encrypted');
+
+ fireEvent.click(await screen.findByRole('button', { name: 'nextButton' }));
+
+ expect(await screen.findByRole('button', { name: 'loginButton' })).toBeTruthy();
+ });
+});
diff --git a/frontend/components/shared/AnimatedNavLink.tsx b/frontend/components/shared/AnimatedNavLink.tsx
new file mode 100644
index 00000000..582ea25a
--- /dev/null
+++ b/frontend/components/shared/AnimatedNavLink.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+import type { ComponentProps } from 'react';
+
+interface AnimatedNavLinkProps {
+ href: string;
+ isActive: boolean;
+ children: React.ReactNode;
+ onClick?: () => void;
+ className?: string;
+ ariaCurrent?: ComponentProps['aria-current'];
+}
+
+export function AnimatedNavLink({
+ href,
+ isActive,
+ children,
+ onClick,
+ className = '',
+ ariaCurrent,
+}: AnimatedNavLinkProps) {
+ return (
+
+ {children}
+
+
+
+ {isActive && (
+
+ )}
+
+ {isActive ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/frontend/components/q&a/QaTabButton.tsx b/frontend/components/shared/CategoryTabButton.tsx
similarity index 87%
rename from frontend/components/q&a/QaTabButton.tsx
rename to frontend/components/shared/CategoryTabButton.tsx
index 9bfe1c47..817971ca 100644
--- a/frontend/components/q&a/QaTabButton.tsx
+++ b/frontend/components/shared/CategoryTabButton.tsx
@@ -4,22 +4,21 @@ import Image from 'next/image';
import { TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
-import type { CategorySlug } from '@/components/q&a/types';
-import type { QaTabStyle } from '@/data/qaTabs';
+import type { CategoryTabStyle } from '@/data/categoryStyles';
-type QaTabButtonProps = {
- value: CategorySlug;
+type CategoryTabButtonProps = {
+ value: string;
label: string;
- style: QaTabStyle;
+ style: CategoryTabStyle;
isActive: boolean;
};
-export function QaTabButton({
+export function CategoryTabButton({
value,
label,
style,
isActive,
-}: QaTabButtonProps) {
+}: CategoryTabButtonProps) {
return (
-
+ {showStaticGrid && (
+
+ )}
-
+
{t('builtWith')}{' '}
-
+
DevLovers
{' '}
{t('byCommunity')}
@@ -55,14 +58,14 @@ export default function Footer() {
{t('privacyPolicy')}
|
{t('termsOfService')}
@@ -94,11 +97,12 @@ export default function Footer() {
bg-white/40
text-slate-600
transition-all
- hover:-translate-y-0.5 hover:text-blue-600 hover:border-blue-300/60
+ hover:-translate-y-0.5
dark:border-neutral-800/60
dark:bg-neutral-950/30
dark:text-slate-300
- dark:hover:text-blue-400 dark:hover:border-blue-500/40
+ [&:hover]:!text-[var(--accent-hover)]
+ [&:hover]:!border-[var(--accent-hover)]
"
>
diff --git a/frontend/components/shared/GitHubStarButton.tsx b/frontend/components/shared/GitHubStarButton.tsx
new file mode 100644
index 00000000..04bd9393
--- /dev/null
+++ b/frontend/components/shared/GitHubStarButton.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { Star } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+
+interface GitHubStarButtonProps {
+ className?: string;
+}
+
+export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
+ const [displayCount, setDisplayCount] = useState(0);
+ const [finalCount, setFinalCount] = useState(null);
+ const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
+ const hasAnimated = useRef(false);
+
+ useEffect(() => {
+ const fetchStars = async () => {
+ try {
+ const response = await fetch('/api/stats');
+ if (response.ok) {
+ const data = await response.json();
+ const starsStr =
+ typeof data?.githubStars === 'string'
+ ? data.githubStars
+ : String(data?.githubStars ?? '0');
+ let starsNum = 0;
+ const normalized = starsStr.replace(/,/g, '').toLowerCase();
+ if (normalized.includes('k+')) {
+ starsNum = Math.floor(
+ parseFloat(normalized.replace('k+', '')) * 1000
+ );
+ } else {
+ starsNum = parseInt(normalized, 10);
+ }
+ setFinalCount(starsNum);
+ }
+ } catch (error) {
+ console.error('Failed to fetch GitHub stars:', error);
+ setFinalCount(0);
+ }
+ };
+
+ fetchStars();
+ }, []);
+
+ useEffect(() => {
+ if (finalCount === null || hasAnimated.current) return;
+
+ hasAnimated.current = true;
+ const duration = 2000;
+ const steps = 60;
+ const increment = finalCount / steps;
+ let current = 0;
+
+ const timer = setInterval(() => {
+ current += increment;
+ if (current >= finalCount) {
+ setDisplayCount(finalCount);
+ clearInterval(timer);
+ } else {
+ setDisplayCount(Math.floor(current));
+ }
+ }, duration / steps);
+
+ return () => clearInterval(timer);
+ }, [finalCount]);
+
+ const formatStarCount = (count: number): string => {
+ return count.toLocaleString();
+ };
+
+ return (
+
+
+
+
+
+ {formatStarCount(displayCount)}
+
+
+
+
+ );
+}
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
new file mode 100644
index 00000000..8bf54ce5
--- /dev/null
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+import type { LucideIcon } from 'lucide-react';
+
+interface HeaderButtonProps {
+ href?: string;
+ onClick?: () => void;
+
+ icon?: LucideIcon;
+ children?: React.ReactNode;
+
+ variant?: 'icon' | 'default';
+ showArrow?: boolean;
+
+ label?: string;
+
+ className?: string;
+}
+
+export function HeaderButton({
+ href,
+ onClick,
+ icon: Icon,
+ children,
+ variant = 'default',
+ showArrow = false,
+ label,
+ className = '',
+}: HeaderButtonProps) {
+ const isIconOnly = variant === 'icon';
+ const resolvedLabel =
+ label ?? (typeof children === 'string' ? children : undefined);
+
+ if (process.env.NODE_ENV !== 'production' && isIconOnly && !resolvedLabel) {
+ console.warn('HeaderButton: icon-only buttons require a label');
+ }
+
+ const ArrowIcon = showArrow ? (
+
+ ) : null;
+
+ const content = (
+ <>
+
+
+
+
+
+ {Icon && (
+
+ )}
+ {children}
+ {ArrowIcon}
+
+
+ );
+
+ const baseClasses = `
+ group relative
+ inline-flex items-center
+ text-sm font-medium
+ rounded-lg
+ overflow-hidden
+ transition-all duration-500 ease-out
+ ${
+ isIconOnly
+ ? 'h-10 w-10 justify-center text-muted-foreground'
+ : 'gap-2 px-4 py-2 bg-secondary text-secondary-foreground w-fit'
+ }
+ hover:text-white
+ active:text-white
+ ${className}
+ `;
+
+ if (!href) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {content}
+
+ );
+}
diff --git a/frontend/components/shared/HeroSection.tsx b/frontend/components/shared/HeroSection.tsx
index 2b8cb44f..3601f4af 100644
--- a/frontend/components/shared/HeroSection.tsx
+++ b/frontend/components/shared/HeroSection.tsx
@@ -58,8 +58,6 @@ export default function HeroSection() {
- );
- }
+ if (block?._type === 'image' && block?.url) {
+ return (
+