Merge remote changes into javitasok-plusz

SerpentRace_Backend/src/Api/routers/adminRouter.ts

@@ -141,32 +141,32 @@ router.get('/users/:userId',
 });
 
 // Search users including soft-deleted ones
-// router.get('/users/search/:searchTerm',
+router.get('/users/search/:searchTerm',
-//     adminRequired,
+    adminRequired,
-//     ValidationMiddleware.validateStringLength({ searchTerm: { min: 2, max: 100 } }),
+    ValidationMiddleware.validateStringLength({ searchTerm: { min: 2, max: 100 } }),
-//     async (req: Request, res: Response) => {
+    async (req: Request, res: Response) => {
-//     try {
+    try {
-//         const { searchTerm } = req.params;
+        const { searchTerm } = req.params;
-//         const includeDeleted = req.query.includeDeleted === 'true';
+        const includeDeleted = req.query.includeDeleted === 'true';
         
-//         logRequest('Admin search users endpoint accessed', req, res, { searchTerm, includeDeleted });
+        logRequest('Admin search users endpoint accessed', req, res, { searchTerm, includeDeleted });
         
-//         const users = includeDeleted
+        const users = includeDeleted
-//             ? await container.userRepository.searchIncludingDeleted(searchTerm)
+            ? await container.userRepository.searchIncludingDeleted(searchTerm)
-//             : await container.userRepository.search(searchTerm);
+            : await container.userRepository.search(searchTerm);
 
-//         logRequest('Admin user search completed', req, res, { 
+        logRequest('Admin user search completed', req, res, { 
-//             searchTerm,
+            searchTerm,
-//             resultCount: Array.isArray(users) ? users.length : (users.totalCount || 0),
+            resultCount: Array.isArray(users) ? users.length : (users.totalCount || 0),
-//             includeDeleted
+            includeDeleted
-//         });
+        });
 
-//         res.json(users);
+        res.json(users);
-//     } catch (error) {
+    } catch (error) {
-//         logError('Admin search users endpoint error', error as Error, req, res);
+        logError('Admin search users endpoint error', error as Error, req, res);
-//         res.status(500).json({ error: 'Internal server error' });
+        res.status(500).json({ error: 'Internal server error' });
-//     }
+    }
-// });
+});
 
 // Update any user (admin only)
 router.patch('/users/:userId',
@@ -213,6 +213,32 @@ router.patch('/users/:userId',
     }
 });
 
+// Activate user (admin only)
+router.post('/users/:userId/activate',
+    adminRequired,
+    ValidationMiddleware.validateUUIDFormat(['userId']),
+    async (req: Request, res: Response) => {
+    try {
+        const targetUserId = req.params.userId;
+        const adminUserId = (req as any).user.userId;
+
+        logRequest('Admin activate user endpoint accessed', req, res, { adminUserId, targetUserId });
+
+        const result = await container.activateUserCommandHandler.execute({ id: targetUserId });
+
+        if (!result) {
+            return res.status(404).json({ error: 'User not found' });
+        }
+
+        logAuth('User activated by admin', targetUserId, { adminUserId }, req, res);
+        res.json({ message: 'User activated successfully', user: result });
+
+    } catch (error) {
+        logError('Admin activate user endpoint error', error as Error, req, res);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
 // Deactivate user (admin only)
 router.post('/users/:userId/deactivate',
     adminRequired,

SerpentRace_Backend/src/Application/DTOs/Mappers/DeckMapper.ts

@@ -1,7 +1,6 @@
 import { DeckAggregate } from '../../../Domain/Deck/DeckAggregate';
 import { UserAggregate } from '../../../Domain/User/UserAggregate';
 import { CreateDeckDto, UpdateDeckDto, ShortDeckDto, DetailDeckDto } from '../DeckDto';
-import e from 'express';
 
 export class DeckMapper {
   static toShortDto(deck: DeckAggregate, userId?: string): ShortDeckDto {

SerpentRace_Backend/src/Application/DTOs/Mappers/OrganizationMapper.ts

@@ -22,7 +22,7 @@ export class OrganizationMapper {
       contactemail: org.contactemail,
       state: org.state,
       regdate: org.regdate,
-      updatedate: org.updatedate,
+      updateDate: org.updateDate,
       url: org.url,
       userinorg: org.userinorg,
       maxOrganizationalDecks: org.maxOrganizationalDecks,

SerpentRace_Backend/src/Application/DTOs/OrganizationDto.ts

@@ -27,7 +27,7 @@ export interface DetailOrganizationDto {
   contactemail: string;
   state: number;
   regdate: Date;
-  updatedate: Date;
+  updateDate: Date;
   url: string | null;
   userinorg: number;
   maxOrganizationalDecks: number | null;

SerpentRace_Backend/src/Application/Services/DIContainer.ts

@@ -39,6 +39,7 @@ import { ProcessOrgAuthCallbackCommandHandler } from '../Organization/commands/P
 import { CreateContactCommandHandler } from '../Contact/commands/CreateContactCommandHandler';
 import { UpdateContactCommandHandler } from '../Contact/commands/UpdateContactCommandHandler';
 import { DeleteContactCommandHandler } from '../Contact/commands/DeleteContactCommandHandler';
+import { ActivateUserCommandHandler } from '../User/commands/ActivateUserCommandHandler';
 
 // Query Handlers
 import { GetUserByIdQueryHandler } from '../User/queries/GetUserByIdQueryHandler';
@@ -121,6 +122,7 @@ export class DIContainer {
     private _updateContactCommandHandler: UpdateContactCommandHandler | null = null;
     private _deleteContactCommandHandler: DeleteContactCommandHandler | null = null;
     private _generateBoardCommandHandler: GenerateBoardCommandHandler | null = null;
+    private _activateUserCommandHandler: ActivateUserCommandHandler | null = null;
     
     // Query Handlers
     private _getUserByIdQueryHandler: GetUserByIdQueryHandler | null = null;
@@ -306,6 +308,13 @@ export class DIContainer {
         return this._deactivateUserCommandHandler;
     }
 
+    public get activateUserCommandHandler(): ActivateUserCommandHandler {
+        if (!this._activateUserCommandHandler) {
+            this._activateUserCommandHandler = new ActivateUserCommandHandler(this.userRepository);
+        }
+        return this._activateUserCommandHandler;
+    }
+
     public get deleteUserCommandHandler(): DeleteUserCommandHandler {
         if (!this._deleteUserCommandHandler) {
             this._deleteUserCommandHandler = new DeleteUserCommandHandler(this.userRepository);

SerpentRace_Backend/src/Application/User/commands/ActivateUserCommand.ts

@@ -0,0 +1,3 @@
+export interface ActivateUserCommand {
+  id: string;
+}

SerpentRace_Backend/src/Application/User/commands/ActivateUserCommandHandler.ts

@@ -0,0 +1,12 @@
+import { IUserRepository } from '../../../Domain/IRepository/IUserRepository';
+import { ActivateUserCommand } from './ActivateUserCommand';
+
+
+export class ActivateUserCommandHandler  {
+  constructor(private readonly userRepo: IUserRepository) {}
+
+  async execute(cmd: ActivateUserCommand): Promise<boolean> {
+    await this.userRepo.activate(cmd.id);
+    return true;
+  }
+}

SerpentRace_Backend/src/Application/User/commands/LogoutCommandHandler.ts

@@ -86,7 +86,7 @@ export class LogoutCommandHandler {
 
       // 5. Update user's last logout timestamp in database
       try {
-        const updateResult = await this.userRepo.update(userId, { updatedate: new Date() });
+        const updateResult = await this.userRepo.update(userId, { updateDate: new Date() });
         if (updateResult) {
           logAuth('User last logout timestamp updated', userId);
         }
@@ -151,7 +151,7 @@ export class LogoutCommandHandler {
       }
 
       // Update user logout timestamp
-      await this.userRepo.update(userId, { updatedate: new Date() });
+      await this.userRepo.update(userId, { updateDate: new Date() });
 
       logAuth('User logged out from all devices', userId);
       return true;

SerpentRace_Backend/src/Domain/Deck/DeckAggregate.ts

@@ -74,8 +74,8 @@ export class DeckAggregate {
     @Column({ type: 'int', default: CType.PUBLIC })
     ctype!: CType;
 
-    @UpdateDateColumn({ name: 'update_date' })
+    @UpdateDateColumn()
-    updatedate!: Date;
+    updateDate!: Date;
 
     @Column({ type: 'int', default: State.ACTIVE })
         state!: State;

SerpentRace_Backend/src/Domain/Game/GameAggregate.ts

@@ -86,8 +86,8 @@ export class GameAggregate {
     @Column({ type: 'timestamp', nullable: true, name: 'finishDate' })
     enddate!: Date | null;
 
-    @UpdateDateColumn({ name: 'updateDate' })
+    @UpdateDateColumn()
-    updatedate!: Date;
+    updateDate!: Date;
 }
 
 // Board Generation Types

SerpentRace_Backend/src/Domain/IRepository/IUserRepository.ts

@@ -7,4 +7,5 @@ export interface IUserRepository extends IPaginatedRepository<UserAggregate, { u
     findByEmail(email: string): Promise<UserAggregate | null>;
     findByToken(token: string): Promise<UserAggregate | null>;
     deactivate(id: string): Promise<UserAggregate | null>;
+    activate(id: string): Promise<UserAggregate | null>;
 }

SerpentRace_Backend/src/Domain/Organization/OrganizationAggregate.ts

@@ -35,8 +35,8 @@ export class OrganizationAggregate {
     @CreateDateColumn()
     regdate!: Date;
 
-    @UpdateDateColumn()
+    @UpdateDateColumn({ name: 'updateDate' })
-    updatedate!: Date;
+    updateDate!: Date;
 
     @Column({ type: 'varchar', length: 500, nullable: true })
     url!: string | null;

SerpentRace_Backend/src/Domain/User/UserAggregate.ts

@@ -51,7 +51,7 @@ export class UserAggregate {
     regdate!: Date;
 
     @UpdateDateColumn()
-    updatedate!: Date;
+    updateDate!: Date;
 
     @Column({ type: 'timestamp', nullable: true })
     Orglogindate!: Date | null;

SerpentRace_Backend/src/Infrastructure/Repository/DeckRepository.ts

@@ -29,7 +29,7 @@ export class DeckRepository implements IDeckRepository {
             // Get paginated results
             const decks = await this.repo.find({
                 where: { state: Not(State.SOFT_DELETE) },
-                order: { updatedate: 'DESC' },
+                order: { updateDate: 'DESC' },
                 take: limit,
                 skip: offset
             });
@@ -57,7 +57,7 @@ export class DeckRepository implements IDeckRepository {
             
             // Get paginated results
             const decks = await this.repo.find({
-                order: { updatedate: 'DESC' },
+                order: { updateDate: 'DESC' },
                 take: limit,
                 skip: offset
             });

SerpentRace_Backend/src/Infrastructure/Repository/GameRepository.ts

@@ -39,7 +39,7 @@ export class GameRepository implements IGameRepository {
             // Get paginated results
             const games = await this.repo.find({
                 where: { state: Not(GameState.CANCELLED) },
-                order: { updatedate: 'DESC' },
+                order: { updateDate: 'DESC' },
                 take: limit,
                 skip: offset
             });
@@ -67,7 +67,7 @@ export class GameRepository implements IGameRepository {
             
             // Get paginated results (including deleted)
             const games = await this.repo.find({
-                order: { updatedate: 'DESC' },
+                order: { updateDate: 'DESC' },
                 take: limit,
                 skip: offset
             });
@@ -153,7 +153,7 @@ export class GameRepository implements IGameRepository {
                 queryBuilder.skip(offset);
             }
 
-            const games = await queryBuilder.orderBy('game.updatedate', 'DESC').getMany();
+            const games = await queryBuilder.orderBy('game.updateDate', 'DESC').getMany();
 
             const endTime = performance.now();
             logDatabase('Game search completed', `executionTime: ${Math.round(endTime - startTime)}ms, query: ${query}, found: ${games.length}, total: ${totalCount}`);
@@ -184,7 +184,7 @@ export class GameRepository implements IGameRepository {
                 queryBuilder.skip(offset);
             }
 
-            const games = await queryBuilder.orderBy('game.updatedate', 'DESC').getMany();
+            const games = await queryBuilder.orderBy('game.updateDate', 'DESC').getMany();
 
             const endTime = performance.now();
             logDatabase('Game search (including deleted) completed', `executionTime: ${Math.round(endTime - startTime)}ms, query: ${query}, found: ${games.length}, total: ${totalCount}`);
@@ -251,7 +251,7 @@ export class GameRepository implements IGameRepository {
         try {
             const games = await this.repo.find({
                 where: { state: GameState.ACTIVE },
-                order: { updatedate: 'DESC' }
+                order: { updateDate: 'DESC' }
             });
             const endTime = performance.now();
             logDatabase('Active games query completed', `executionTime: ${Math.round(endTime - startTime)}ms, found: ${games.length}`);
@@ -270,7 +270,7 @@ export class GameRepository implements IGameRepository {
             const queryBuilder = this.repo.createQueryBuilder('game')
                 .where('game.state != :cancelledState', { cancelledState: GameState.CANCELLED })
                 .andWhere('JSON_CONTAINS(game.players, :playerId)', { playerId: `"${playerId}"` })
-                .orderBy('game.updatedate', 'DESC');
+                .orderBy('game.updateDate', 'DESC');
 
             const games = await queryBuilder.getMany();
             const endTime = performance.now();

SerpentRace_Backend/src/Infrastructure/Repository/UserRepository.ts

@@ -345,5 +345,25 @@ export class UserRepository implements IUserRepository {
         }
     }
 
+    async activate(id: string) {
+        const startTime = Date.now();
+        try {
+            await this.repo.update(id, { state: UserState.VERIFIED_REGULAR });
+            const result = await this.findById(id);
+            logDatabase('User activated successfully', `update(${id}, { state: VERIFIED_REGULAR })`, Date.now() - startTime, {
+                userId: id,
+                success: !!result
+            });
+            return result;
+        }
+        catch (error) {
+            logError('UserRepository.activate error', error as Error);
+            // Handle invalid UUID format
+            if (error instanceof Error && error.message.includes('invalid input syntax for type uuid')) {
+                throw new Error('Invalid user ID format');
+            }
+            throw new Error('Failed to activate user in database');
+        }
+    }
 
 }

SerpentRace_Docker/sql_schema_only.sql

@@ -19,7 +19,7 @@ CREATE TABLE "Users" (
     "phone" VARCHAR(20) NULL,
     "state" INTEGER NOT NULL DEFAULT 0,
     "regdate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updateDate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "Orglogindate" TIMESTAMP NULL
 );
 
@@ -33,7 +33,7 @@ CREATE TABLE "Organizations" (
     "contactemail" VARCHAR(255) NOT NULL,
     "state" INTEGER NOT NULL DEFAULT 0,
     "regdate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updateDate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "url" VARCHAR(500) NULL,
     "userinorg" INTEGER NOT NULL DEFAULT 0,
     "maxOrganizationalDecks" INTEGER NULL
@@ -49,7 +49,7 @@ CREATE TABLE "Decks" (
     "cards" JSONB NOT NULL DEFAULT '[]',
     "played_number" INTEGER NOT NULL DEFAULT 0,
     "ctype" INTEGER NOT NULL DEFAULT 0,
-    "update_date" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updateDate" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "state" INTEGER NOT NULL DEFAULT 0,
     "organization_id" UUID NULL
 );
@@ -174,40 +174,6 @@ CREATE INDEX "IDX_Games_State" ON "Games" ("state");
 CREATE INDEX "IDX_Games_CreatedBy" ON "Games" ("createdBy");
 CREATE INDEX "IDX_Games_OrganizationId" ON "Games" ("organizationid");
 
--- Create update trigger for update_date columns
-CREATE OR REPLACE FUNCTION update_updatedate_column()
-RETURNS TRIGGER AS $$
-BEGIN
-    NEW.update_date = CURRENT_TIMESTAMP;
-    RETURN NEW;
-END;
-$$ language 'plpgsql';
-
--- Apply update triggers
-CREATE TRIGGER update_users_updatedate 
-    BEFORE UPDATE ON "Users" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
-CREATE TRIGGER update_organizations_updatedate 
-    BEFORE UPDATE ON "Organizations" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
-CREATE TRIGGER update_decks_updatedate 
-    BEFORE UPDATE ON "Decks" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
-CREATE TRIGGER update_chats_updatedate 
-    BEFORE UPDATE ON "Chats" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
-CREATE TRIGGER update_contacts_updatedate 
-    BEFORE UPDATE ON "Contacts" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
-CREATE TRIGGER update_games_updatedate 
-    BEFORE UPDATE ON "Games" 
-    FOR EACH ROW EXECUTE FUNCTION update_updatedate_column();
-
 -- Comments for documentation
 COMMENT ON TABLE "Users" IS 'User accounts with authentication and profile information';
 COMMENT ON TABLE "Organizations" IS 'Organizations that can have multiple users and premium features';

SerpentRace_Frontend/src/App.jsx

@@ -19,8 +19,6 @@ import ProfileCard from "./components/Userdetails/Userdetails"
 import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
 import VerifyEmailPage from "./pages/Auth/VerifyEmailPage"
 
-
-
 function App() {
   const [isMobile, setIsMobile] = useState(false)
 
@@ -66,7 +64,7 @@ function App() {
           <Route path="/deck-creator" element={<DeckCreator />} />
           <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
           <Route path="/game" element={<GameScreen />} />
-          <Route path="/contacts" element={<CompanyHub />} />
+          {/* <Route path="/contacts" element={<CompanyHub />} /> */}
           <Route path="/report" element={<Reports />} />
         </Routes>
       </Router>

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -70,12 +70,6 @@ const Footer = () => {
           >
             Rólunk
           </button>
-          <button
-            onClick={goContacts}
-            className="text-left hover:underline hover:text-green-500 transition-colors"
-          >
-            Kapcsolat
-          </button>
         </div>
 
         {/* Közösség */}

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -7,10 +7,12 @@ import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
 import { motion } from "framer-motion"
 import { isAuthenticated } from "../../hooks/useRequireAuth" // <-- added import
 import { useNavigate } from "react-router-dom" // <-- NEW
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // <-- NEW
 
-const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onNavigateToContacts }) => {
+// 🔧 HIBA JAVÍTVA: függvénydefiníció hozzáadva
-  const auth = isAuthenticated() // <-- check without redirect
+const LandingPage = () => {
-  const navigate = useNavigate() // <-- NEW
+  const { goLanding, goAbout, goHome, goLogin, goAuth } = HandleNavigate()
+  const auth = isAuthenticated() // a hitelesítési állapot meghatározásához
 
   return (
     <div className="w-full">
@@ -45,6 +47,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN
             A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
             mindezt szórakozva!
           </motion.p>
+
           <motion.div
             className="text-xl md:text-2xl font-bold text-emerald-400 mb-10"
             initial={{ opacity: 0, y: 20 }}
@@ -63,12 +66,12 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN
             {/* If not authenticated show Login/Register; if authenticated show Home button */}
             {!auth ? (
               <>
-                <ButtonGreen text="Bejelentkezés" onClick={onNavigateToPlay} width="w-60" />
+                <ButtonGreen text="Bejelentkezés" onClick={goLogin} width="w-60" />
-                <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
+                <ButtonGreen text="Regisztráció" onClick={goAuth} width="w-60" />
-                <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
+                <ButtonGreen text="Játék" onClick={goHome} width="w-60" />
               </>
             ) : (
-              <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" />
+              <ButtonGreen text="Játék" onClick={goHome} width="w-60" />
             )}
           </motion.div>
         </div>
@@ -178,7 +181,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onN
 
             <ButtonGreen
               text="Kapcsolatfelvétel"
-              onClick={onNavigateToContacts}
+              onClick={goAbout}
               className="px-12 py-4 text-xl font-bold"
             />
           </motion.div>

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -1,18 +1,17 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
 import { Link } from "react-router-dom"
-import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"// ✅ importáld a navigációs hookot
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // ✅ importáld a navigációs hookot
+import { FaSignOutAlt, FaChartBar, FaUser, FaBars } from "react-icons/fa"
 
-const navLinkClass =
+const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
-  "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
 const navLinkClassPlay =
   "px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
-  const isLoggedIn = Boolean(
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
-    localStorage.getItem("authLevel") && localStorage.getItem("username")
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
-  )
 
   // ✅ Használjuk a HandleNavigate hookot
   const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()
@@ -25,16 +24,23 @@ const Navbar = () => {
 
   return (
     <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
+      {/* removed mx-auto and px-* classes; use full width + responsive padding-inline using clamp */}
+      <div
+        className="w-full"
+        style={{
+          /* minimális padding 12px, növel a képernyővel, max 30px */
+          paddingInline: "clamp(12px, calc((100vw - 1024px) / 2), 80px)",
+        }}
+      >
         <div className="flex justify-between h-16 items-center">
           {/* Logo + Brand */}
           <div className="flex-shrink-0 flex items-center gap-2">
-            <button onClick={goLanding} className="flex items-center mt-1 h-9">
+            <button onClick={goLanding} className=" cursor-pointer flex items-center mt-1 h-9">
               <Logo size={36} />
             </button>
             <button
               onClick={goLanding}
-              className="flex items-center h-9 text-white font-bold text-2xl tracking-tight"
+              className="cursor-pointer flex items-center h-9 text-white font-bold text-2xl tracking-tight"
             >
               SerpentRace
             </button>
@@ -43,22 +49,16 @@ const Navbar = () => {
           {/* Desktop Menu */}
           <div className="hidden md:flex items-center space-x-6">
             {/* Bal oldali linkek */}
-            <button onClick={goLanding} className={navLinkClass}>
-              Főoldal
-            </button>
             <button onClick={goAbout} className={navLinkClass}>
               Rólunk
             </button>
-            <button onClick={goContacts} className={navLinkClass}>
-              Kapcsolat
-            </button>
 
             {/* Csak bejelentkezve */}
             {isLoggedIn && (
               <>
-                <Link to="/decks" className={navLinkClass}>Paklik</Link>
+                <Link to="/decks" className={navLinkClass}>
-                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
+                  Paklik
-                <Link to="/profile" className={navLinkClass}>Profil</Link>
+                </Link>
               </>
             )}
 
@@ -88,26 +88,54 @@ const Navbar = () => {
                 </Link>
               </div>
             ) : (
-              <button
+              // Ha be van jelentkezve: mutatunk egy kis lenyíló gombot (ikon), ami tartalmazza a Profil, Statisztikák és Kijelentkezés linkeket
-                onClick={handleLogout}
+              <div className="relative">
-                className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                <button
-                title="Kijelentkezés"
+                  onClick={() => setUserMenuOpen((s) => !s)}
-              >
+                  className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
-                <svg
+                  title="Felhasználói menü"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
                 >
-                  <path
+                  <FaBars className="h-5 w-5" />
-                    strokeLinecap="round"
+                </button>
-                    strokeLinejoin="round"
+
-                    strokeWidth={2}
+                {userMenuOpen && (
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
+                  <div className="absolute right-0 mt-2 w-44 bg-white/5 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden z-40">
-                  />
+                    <button
-                </svg>
+                      onClick={() => {
-              </button>
+                        setUserMenuOpen(false)
+                        // navigálás statisztikák
+                        goLanding // fallback, majd ha kell: goReport
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaChartBar className="w-4 h-4" />
+                      <span className="text-sm">Statisztikák</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        // profil
+                        window.location.href = "/profile"
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaUser className="w-4 h-4" />
+                      <span className="text-sm">Profil</span>
+                    </button>
+                    <div className="h-px bg-white/5" />
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        handleLogout()
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaSignOutAlt className="w-4 h-4" />
+                      <span className="text-sm">Kijelentkezés</span>
+                    </button>
+                  </div>
+                )}
+              </div>
             )}
           </div>
 
@@ -133,12 +161,7 @@ const Navbar = () => {
                     d="M6 18L18 6M6 6l12 12"
                   />
                 ) : (
-                  <path
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 8h16M4 16h16"
-                  />
                 )}
               </svg>
             </button>
@@ -149,24 +172,50 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <button onClick={() => { goLanding(); setMenuOpen(false) }} className={navLinkClass}>Főoldal</button>
+          <button
-          <button onClick={() => { goAbout(); setMenuOpen(false) }} className={navLinkClass}>Rólunk</button>
+            onClick={() => {
-          <button onClick={() => { goContacts(); setMenuOpen(false) }} className={navLinkClass}>Kapcsolat</button>
+              goAbout()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Rólunk
+          </button>
+          <button
+            onClick={() => {
+              goContacts()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Kapcsolat
+          </button>
 
           {isLoggedIn && (
             <>
-              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
+              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
-              <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
+                Paklik
-              <Link to="/profile" onClick={() => setMenuOpen(false)} className={navLinkClass}>Profil</Link>
+              </Link>
             </>
           )}
 
-          <button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
+          <button
+            onClick={() => {
+              goHome()
+              setMenuOpen(false)
+            }}
+            className={navLinkClassPlay}
+          >
+            Játék
+          </button>
 
           {!isLoggedIn ? (
             <div className="flex flex-col space-y-2">
               <button
-                onClick={() => { goLogin(); setMenuOpen(false) }}
+                onClick={() => {
+                  goLogin()
+                  setMenuOpen(false)
+                }}
                 className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
               >
                 Bejelentkezés
@@ -190,23 +239,10 @@ const Navbar = () => {
                   handleLogout()
                   setMenuOpen(false)
                 }}
-                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
                 title="Kijelentkezés"
               >
-                <svg
+                <FaSignOutAlt className="h-6 w-6" />
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
-                  />
-                </svg>
               </button>
             </div>
           )}

SerpentRace_Frontend/src/pages/About/About.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useState } from "react"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -9,10 +9,53 @@ import Zsola from "../../assets/pictures/zsola.JPG"
 import Donat from "../../assets/pictures/donat.JPG"
 import Turo from "../../assets/pictures/turo.JPG"
 import Piskor from "../../assets/pictures/piskor.JPG"
+// ÚJ: kész ikonok használata
+import { FaLightbulb, FaUsers, FaShieldAlt } from "react-icons/fa"
+// ÚJ: framer-motion használata a Landing-hez hasonló megjelenésért
+import { motion } from "framer-motion"
+
+///// ÚJ: központosított motion beállítások /////
+const baseMotion = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.2 },
+  transition: { duration: 0.8 },
+}
+
+const getMotionProps = (overrides = {}) => {
+  const { transition = {}, viewport = {}, ...rest } = overrides
+  return {
+    ...baseMotion,
+    ...rest,
+    transition: { ...baseMotion.transition, ...transition },
+    viewport: { ...baseMotion.viewport, ...viewport },
+  }
+}
+
+///// ÚJ: variánsok a szülő-gyermek animációhoz (stagger) /////
+// container: használható olyan szekciókra, ahol a children együttesen animálódjanak
+const containerVariant = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.06,
+      // delayChildren beállítható egyedi késleltetéshez
+    },
+  },
+}
+// item: alap animáció minden gyermek elemhez
+const itemVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
+}
 
 const About = () => {
-  const [visible, setVisible] = useState(false)
+  // Új: kontakt űrlap state + státusz
-  const sectionRef = useRef(null)
+  const [contactName, setContactName] = useState("")
+  const [contactEmail, setContactEmail] = useState("")
+  const [contactMessage, setContactMessage] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const [success, setSuccess] = useState("")
 
   const teamMembers = [
     {
@@ -52,20 +95,35 @@ const About = () => {
     },
   ]
 
-  useEffect(() => {
+  // Új: egyszerű onSubmit kezelő (nem változott logika)
-    const observer = new IntersectionObserver(
+  const handleContactSubmit = (e) => {
-      ([entry]) => {
+    e.preventDefault()
-        if (entry.isIntersecting) setVisible(true)
+    if (!contactName.trim() || !contactEmail.trim() || !contactMessage.trim()) {
-      },
+      setSuccess("Kérlek tölts ki minden mezőt.")
-      { threshold: 0.3 }
+      return
-    )
+    }
-    if (sectionRef.current) observer.observe(sectionRef.current)
+    // nagyon egyszerű email ellenőrzés
-    return () => observer.disconnect()
+    const emailRe = /\S+@\S+\.\S+/
-  }, [])
+    if (!emailRe.test(contactEmail)) {
+      setSuccess("Kérlek adj meg érvényes email címet.")
+      return
+    }
+
+    setSubmitting(true)
+    setSuccess("")
+    // Itt lehetne API hívás; most csak szimuláljuk
+    setTimeout(() => {
+      setSubmitting(false)
+      setContactName("")
+      setContactEmail("")
+      setContactMessage("")
+      setSuccess("Köszönjük, üzenetedet megkaptuk!")
+      setTimeout(() => setSuccess(""), 5000)
+    }, 900)
+  }
 
   return (
     <div className="flex flex-col min-h-screen overflow-y-auto relative">
-
       {/* Háttér – fix pozíció, a teljes képernyőre */}
       <div className="fixed top-0 left-0 w-full h-full z-[-10]">
         <Background />
@@ -78,7 +136,6 @@ const About = () => {
 
       {/* Tartalom */}
       <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20">
-
         {/* Vissza gomb */}
         <div className="fixed top-4 left-4 z-50 group">
           <div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg">
@@ -86,56 +143,109 @@ const About = () => {
           </div>
         </div>
 
-        <section
+        {/* Általános konténer — framer-motion mint a Landingnél */}
-          ref={sectionRef}
+        <motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}>
-          className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
-            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
-          }`}
-        >
           {/* Rólunk cím */}
-          <h1 className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg">
+          <motion.h1
+            className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg"
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.1 } })}
+          >
             <span className="inline-block animate-pulse mr-2"></span> Rólunk
-          </h1>
+          </motion.h1>
 
           {/* Leírás */}
-          <p className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto">
+          <motion.p
-            Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és technológia találkozik. Elhivatott csapatunk minden nap azon dolgozik, hogy élményt és értéket nyújtson a felhasználóinknak.
+            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
-          </p>
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.2 } })}
+          >
+            Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és
+            technológia találkozik. Elhivatott csapatunk minden nap azon dolgozik, hogy élményt és értéket
+            nyújtson a felhasználóinknak.
+          </motion.p>
 
-          {/* Küldetésünk */}
+          {/* Küldetésünk — most szülő variánssal, hogy a kártyák ne triggereljenek külön és ne ugorjanak */}
-          <div className="mt-12">
+          <motion.div
+            className="mt-12"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.08, delayChildren: 0.12 } },
+            }}
+          >
             <h2 className="text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
-            <div className="grid md:grid-cols-3 gap-6">
-              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
-                <h3 className="text-xl font-semibold mb-2">Innováció</h3>
-                <p className="text-zinc-300">Folyamatosan fejlesztjük rendszereinket a legmodernebb technológiákkal.</p>
-              </div>
-              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
-                <h3 className="text-xl font-semibold mb-2">Közösség</h3>
-                <p className="text-zinc-300">Fontos számunkra, hogy egy összetartó, aktív közösséget építsünk ki.</p>
-              </div>
-              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
-                <h3 className="text-xl font-semibold mb-2">Minőség</h3>
-                <p className="text-zinc-300">Minden részletre figyelünk a felhasználói élmény és biztonság érdekében.</p>
-              </div>
-            </div>
-          </div>
 
-          {/* Csapat */}
+            {/* Új: stilizált kártyák (egyenként animálva a szülőből) */}
-          <div className="mt-16">
+            <div className="grid gap-6 md:grid-cols-3">
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-4">
+                  {/* ICON: Lightbulb */}
+                  <FaLightbulb className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Innováció</h3>
+                <p className="text-zinc-300 text-center">
+                  Modern megoldásokkal gyorsítjuk a fejlődést — moduláris, skálázható rendszereket építünk.
+                </p>
+              </motion.div>
+
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-4">
+                  {/* ICON: Users */}
+                  <FaUsers className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Közösség</h3>
+                <p className="text-zinc-300 text-center">
+                  Közösségépítés és együttműködés—eszközök, amik bevonják és motiválják a felhasználókat.
+                </p>
+              </motion.div>
+
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-4">
+                  {/* ICON: Shield/Quality */}
+                  <FaShieldAlt className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Minőség</h3>
+                <p className="text-zinc-300 text-center">
+                  Biztonság, megbízhatóság és gondosan tervezett UX — minden részlet számít.
+                </p>
+              </motion.div>
+            </div>
+          </motion.div>
+
+          {/* Csapat — a szülő kezeli a gyermekek animációját (stagger), így nincs külön "belülről" trigger */}
+          <motion.div
+            className="mt-16"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
+            }}
+          >
             <h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2>
             <div className="grid md:grid-cols-3 gap-8">
               {teamMembers.map((member, i) => {
                 const isLast = i === teamMembers.length - 1
                 const itemsInLastRow = teamMembers.length % 3
                 const shouldCenter = itemsInLastRow === 1 && isLast
-
                 return (
-                  <div
+                  <motion.div
                     key={i}
                     className={`flex flex-col items-center text-center bg-zinc-800 p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
                       shouldCenter ? "md:col-start-2" : ""
                     }`}
+                    variants={itemVariant}
                   >
                     <img
                       src={member.photo}
@@ -144,12 +254,94 @@ const About = () => {
                     />
                     <h4 className="text-lg font-bold">{member.name}</h4>
                     <p className="text-zinc-400">{member.role}</p>
-                  </div>
+                  </motion.div>
                 )
               })}
             </div>
-          </div>
+          </motion.div>
-        </section>
+
+          {/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */}
+          <motion.section
+            id="contact"
+            className="mt-16 bg-transparent"
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.25 } })}
+          >
+            <div className="max-w-5xl mx-auto bg-white/5 rounded-2xl border border-gray-700 p-8 shadow-lg">
+              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                Kapcsolat
+              </h2>
+
+              <div className="grid md:grid-cols-2 gap-8">
+                {/* Bal: elérhetőségek */}
+                <div className="flex flex-col justify-center gap-6">
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">✉️</div>
+                    <div>
+                      <div className="font-semibold">Email</div>
+                      <div className="text-zinc-300">hello@serpentrace.hu</div>
+                    </div>
+                  </div>
+
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📞</div>
+                    <div>
+                      <div className="font-semibold">Telefon</div>
+                      <div className="text-zinc-300">+36 20 123 4567</div>
+                    </div>
+                  </div>
+
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📍</div>
+                    <div>
+                      <div className="font-semibold">Iroda</div>
+                      <div className="text-zinc-300">Budapest, Magyarország</div>
+                    </div>
+                  </div>
+
+                  <p className="text-zinc-400 mt-2 text-sm">
+                    Általános megkeresésekre 48 órán belül válaszolunk. Ha céges együttműködésről van szó,
+                    kérjük, írj részletesen a projektedről.
+                  </p>
+                </div>
+
+                {/* Jobb: űrlap */}
+                <form onSubmit={handleContactSubmit} className="space-y-4">
+                  <input
+                    value={contactName}
+                    onChange={(e) => setContactName(e.target.value)}
+                    type="text"
+                    placeholder="Név"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <input
+                    value={contactEmail}
+                    onChange={(e) => setContactEmail(e.target.value)}
+                    type="email"
+                    placeholder="Email"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <textarea
+                    value={contactMessage}
+                    onChange={(e) => setContactMessage(e.target.value)}
+                    placeholder="Üzenet"
+                    rows="5"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <div className="flex items-center gap-4">
+                    <button
+                      type="submit"
+                      disabled={submitting}
+                      className="bg-emerald-500 hover:bg-emerald-400 text-black px-6 py-3 rounded-lg font-bold transition disabled:opacity-60"
+                    >
+                      {submitting ? "Küldés..." : "Küldés"}
+                    </button>
+                    {success && <div className="text-sm text-zinc-300">{success}</div>}
+                  </div>
+                </form>
+              </div>
+            </div>
+          </motion.section>
+        </motion.section>
       </main>
 
       {/* Footer (nem scrollozható alá) */}