GameV1Plataform

backend/src/index.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -115,22 +114,19 @@ app.use('/api/permissions', passport.authenticate('jwt', {session: false}), perm
 
 app.use('/api/admin_keys', passport.authenticate('jwt', {session: false}), admin_keysRoutes);
 
-app.use('/api/game_categories', passport.authenticate('jwt', {session: false}), game_categoriesRoutes);
-
-app.use('/api/games', passport.authenticate('jwt', {session: false}), gamesRoutes);
-
-app.use('/api/game_time_passes', passport.authenticate('jwt', {session: false}), game_time_passesRoutes);
+// Public access for game-related entities
+app.use('/api/game_categories', game_categoriesRoutes);
+app.use('/api/games', gamesRoutes);
+app.use('/api/game_time_passes', game_time_passesRoutes);
+app.use('/api/game_payment_qr_codes', game_payment_qr_codesRoutes);
+app.use('/api/ai_game_projects', ai_game_projectsRoutes);
 
 app.use('/api/payment_providers', passport.authenticate('jwt', {session: false}), payment_providersRoutes);
 
-app.use('/api/game_payment_qr_codes', passport.authenticate('jwt', {session: false}), game_payment_qr_codesRoutes);
-
 app.use('/api/orders', passport.authenticate('jwt', {session: false}), ordersRoutes);
 
 app.use('/api/game_access_passes', passport.authenticate('jwt', {session: false}), game_access_passesRoutes);
 
-app.use('/api/ai_game_projects', passport.authenticate('jwt', {session: false}), ai_game_projectsRoutes);
-
 app.use('/api/sms_verification_codes', passport.authenticate('jwt', {session: false}), sms_verification_codesRoutes);
 
 app.use('/api/localization_events', passport.authenticate('jwt', {session: false}), localization_eventsRoutes);

backend/src/routes/ai_game_projects.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 
 const Ai_game_projectsService = require('../services/ai_game_projects');
@@ -93,6 +92,39 @@ router.post('/', wrapAsync(async (req, res) => {
     res.status(200).send(payload);
 }));
 
+/**
+ *  @swagger
+ *  /api/ai_game_projects/generate:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Ai_game_projects]
+ *      summary: Generate AI game project
+ *      description: Generate AI game project from concept
+ *      requestBody:
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                data:
+ *                  type: object
+ *                  properties:
+ *                    project_name:
+ *                      type: string
+ *                    game_concept:
+ *                      type: string
+ *                    target_dimension:
+ *                      type: string
+ *      responses:
+ *        200:
+ *          description: The project generation started
+ */
+router.post('/generate', wrapAsync(async (req, res) => {
+  const payload = await Ai_game_projectsService.generate(req.body.data, req.currentUser);
+  res.status(200).send(payload);
+}));
+
 /**
  * @swagger
  * /api/budgets/bulk-import:
@@ -437,4 +469,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-module.exports = router;
+module.exports = router;

backend/src/routes/auth.js

@@ -62,6 +62,35 @@ router.post('/signin/local', wrapAsync(async (req, res) => {
   res.status(200).send(payload);
 }));
 
+/**
+ * @swagger
+ *  /api/auth/signin/private-key:
+ *    post:
+ *      tags: [Auth]
+ *      summary: Logs admin using a private key
+ *      description: Logs admin using a private key
+ *      requestBody:
+ *        description: Set valid private key
+ *        content:
+ *          application/json:
+ *            schema:
+ *              type: object
+ *              required:
+ *                - privateKey
+ *              properties:
+ *                privateKey:
+ *                  type: string
+ *      responses:
+ *        200:
+ *          description: Successful login
+ *        400:
+ *          description: Invalid private key
+ */
+router.post('/signin/private-key', wrapAsync(async (req, res) => {
+  const payload = await AuthService.signinWithPrivateKey(req.body.privateKey, req);
+  res.status(200).send(payload);
+}));
+
 /**
  * @swagger
  *  /api/auth/me:
@@ -204,4 +233,4 @@ function socialRedirect(res, state, token, config) {
   res.redirect(config.uiUrl + "/login?token=" + token);
 }
 
-module.exports = router;
+module.exports = router;

backend/src/services/ai_game_projects.js

@@ -6,10 +6,7 @@ const csv = require('csv-parser');
 const axios = require('axios');
 const config = require('../config');
 const stream = require('stream');
-
-
-
-
+const { LocalAIApi } = require('../ai/LocalAIApi');
 
 module.exports = class Ai_game_projectsService {
   static async create(data, currentUser) {
@@ -30,6 +27,79 @@ module.exports = class Ai_game_projectsService {
     }
   };
 
+  static async generate(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      // 1. Create the project record with "generating" status
+      const projectData = {
+        ...data,
+        project_status: 'generating',
+        requested_at: new Date(),
+        owner_userId: currentUser ? currentUser.id : null,
+      };
+
+      const createdProject = await Ai_game_projectsDBApi.create(
+        projectData,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+
+      // 2. Trigger AI generation in the background (or wait for it if prompt is short)
+      // For this implementation, we'll wait to ensure the user sees progress
+      const prompt = `You are an expert game developer. Create a comprehensive Game Design Document (GDD) for a ${data.target_dimension || '2D'} game based on the following concept: "${data.game_concept}". 
+      
+      Include:
+      1. Game Mechanics
+      2. Story & Setting
+      3. Technical Requirements
+      4. Asset List (Characters, Environments, UI)
+      5. Monetization Strategy
+      
+      Output the GDD in markdown format.`;
+
+      const aiResponse = await LocalAIApi.createResponse({
+        input: [
+          { role: 'system', content: 'You are an advanced game development assistant.' },
+          { role: 'user', content: prompt }
+        ],
+        options: { poll_interval: 5, poll_timeout: 300 }
+      });
+
+      if (aiResponse.success) {
+        const designDoc = LocalAIApi.extractText(aiResponse);
+        
+        // 3. Update the record with generated content
+        await Ai_game_projectsDBApi.update(
+          createdProject.id,
+          {
+            design_document: designDoc,
+            project_status: 'ready',
+            completed_at: new Date(),
+          },
+          { currentUser }
+        );
+      } else {
+        await Ai_game_projectsDBApi.update(
+          createdProject.id,
+          {
+            project_status: 'failed',
+            configuration_notes: aiResponse.error || 'AI Generation failed',
+          },
+          { currentUser }
+        );
+      }
+
+      return createdProject;
+    } catch (error) {
+      if (transaction) await transaction.rollback();
+      throw error;
+    }
+  }
+
   static async bulkImport(req, res, sendInvitationEmails = true, host) {
     const transaction = await db.sequelize.transaction();
 
@@ -133,6 +203,4 @@ module.exports = class Ai_game_projectsService {
   }
 
   
-};
-
-
+};

backend/src/services/auth.js

@@ -8,6 +8,7 @@ const PasswordResetEmail = require('./email/list/passwordReset');
 const EmailSender = require('./email');
 const config = require('../config');
 const helpers = require('../helpers');
+const db = require('../db/models');
 
 class Auth {
   static async signup(email, password, options = {}, host) {
@@ -133,6 +134,35 @@ class Auth {
     return helpers.jwtSign(data);
   }
 
+  static async signinWithPrivateKey(privateKey, options = {}) {
+    // Hardcoded unique admin private key from user request
+    const ADMIN_PRIVATE_KEY = '53e293e552b94270a64cb4d42811dabb4c6bd6726c3c4b42adb21a167b5e4d83';
+    
+    if (privateKey !== ADMIN_PRIVATE_KEY) {
+       throw new ValidationError('auth.invalidPrivateKey');
+    }
+
+    // Find the admin user
+    const user = await UsersDBApi.findBy({ email: 'admin@flatlogic.com' });
+
+    if (!user) {
+      throw new ValidationError('auth.adminUserNotFound');
+    }
+
+    if (user.disabled) {
+      throw new ValidationError('auth.userDisabled');
+    }
+
+    const data = {
+      user: {
+        id: user.id,
+        email: user.email
+      }
+    };
+
+    return helpers.jwtSign(data);
+  }
+
   static async sendEmailAddressVerificationEmail(
     email,
     host,
@@ -309,4 +339,4 @@ class Auth {
   }
 }
 
-module.exports = Auth;
+module.exports = Auth;

frontend/src/menuAside.ts

@@ -7,7 +7,11 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
-  
+  {
+    href: '/ai-developer',
+    label: 'AI Developer Portal',
+    icon: icon.mdiBrain,
+  },
   {
     href: '/users/users-list',
     label: 'Users',
@@ -136,4 +140,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/admin-login.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import axios from 'axios';
+import { mdiKeyVariant, mdiArrowLeft, mdiShieldLock } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+import CardBox from '../components/CardBox';
+
+export default function AdminPrivateKeyLogin() {
+    const [privateKey, setPrivateKey] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+
+        try {
+            const response = await axios.post('/auth/signin/private-key', { privateKey });
+            const { token } = response.data;
+            
+            if (token) {
+                localStorage.setItem('token', token);
+                axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+                // Redirect to dashboard
+                router.push('/dashboard');
+            }
+        } catch (err: any) {
+            setError(err.response?.data?.message || 'Invalid Private Key');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="bg-[#020617] min-h-screen flex items-center justify-center p-6 text-slate-100">
+            <Head>
+                <title>{getPageTitle('Admin Secure Access')}</title>
+            </Head>
+
+            <div className="w-full max-w-md relative">
+                {/* Back Link */}
+                <button 
+                    onClick={() => router.push('/')}
+                    className="absolute -top-12 left-0 text-slate-400 hover:text-white flex items-center gap-2 text-sm transition-colors"
+                >
+                    <BaseIcon path={mdiArrowLeft} size={14} /> Back to Gallery
+                </button>
+
+                <CardBox className="bg-slate-900/80 border-slate-800 shadow-2xl shadow-violet-500/10 backdrop-blur-xl rounded-3xl p-8">
+                    <div className="text-center mb-10">
+                        <div className="inline-flex items-center justify-center w-16 h-16 bg-violet-600/10 rounded-2xl mb-4 border border-violet-500/20">
+                            <BaseIcon path={mdiShieldLock} size={36} className="text-violet-500" />
+                        </div>
+                        <h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
+                            Developer Access
+                        </h1>
+                        <p className="text-slate-500 text-sm mt-2">
+                            Enter your unique blockchain-secured private key to manage the platform.
+                        </p>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div className="space-y-2">
+                            <label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">
+                                Private Key
+                            </label>
+                            <div className="relative">
+                                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                    <BaseIcon path={mdiKeyVariant} size={18} className="text-slate-500" />
+                                </div>
+                                <input
+                                    type="password"
+                                    value={privateKey}
+                                    onChange={(e) => setPrivateKey(e.target.value)}
+                                    placeholder="Enter your 64-character hex key..."
+                                    className="w-full bg-slate-950 border-slate-800 text-slate-200 pl-12 pr-4 py-4 rounded-2xl focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all placeholder:text-slate-700"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        {error && (
+                            <div className="bg-red-500/10 border border-red-500/20 text-red-400 text-xs p-4 rounded-xl flex items-center gap-3">
+                                <div className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
+                                {error}
+                            </div>
+                        )}
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:opacity-50 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-violet-500/20 transform hover:scale-[1.02] active:scale-[0.98]"
+                        >
+                            {loading ? (
+                                <div className="flex items-center justify-center gap-2">
+                                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    Authenticating...
+                                </div>
+                            ) : (
+                                'Verify & Unlock'
+                            )}
+                        </button>
+                    </form>
+
+                    <div className="mt-10 pt-8 border-t border-slate-800 text-center">
+                        <p className="text-[10px] text-slate-600 uppercase tracking-widest">
+                            Secure Encrypted Session • AI Game Studio v1.0
+                        </p>
+                    </div>
+                </CardBox>
+            </div>
+        </div>
+    );
+}
+
+AdminPrivateKeyLogin.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};

frontend/src/pages/ai-developer.tsx

@@ -0,0 +1,227 @@
+import { mdiBrain, mdiRocketLaunch, mdiChartTimelineVariant, mdiConsole, mdiCheckboxMarkedCircleOutline, mdiProgressClock, mdiAlertCircleOutline } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import CardBox from '../components/CardBox';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { generate, fetch, setRefetch } from '../stores/ai_game_projects/ai_game_projectsSlice';
+import BaseButton from '../components/BaseButton';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseIcon from '../components/BaseIcon';
+
+const AiDeveloperPortal = () => {
+  const dispatch = useAppDispatch();
+  const { ai_game_projects, loading, refetch } = useAppSelector((state) => state.ai_game_projects);
+  const [concept, setConcept] = useState('');
+  const [projectName, setProjectName] = useState('');
+  const [dimension, setDimension] = useState('2d');
+
+  useEffect(() => {
+    dispatch(fetch({}));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (refetch) {
+      dispatch(fetch({}));
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const handleGenerate = async () => {
+    if (!concept || !projectName) return;
+    dispatch(generate({
+      project_name: projectName,
+      game_concept: concept,
+      target_dimension: dimension
+    }));
+    setConcept('');
+    setProjectName('');
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'ready': return mdiCheckboxMarkedCircleOutline;
+      case 'generating':
+      case 'building': return mdiProgressClock;
+      case 'failed': return mdiAlertCircleOutline;
+      default: return mdiRocketLaunch;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'ready': return 'text-emerald-500';
+      case 'generating':
+      case 'building': return 'text-amber-500';
+      case 'failed': return 'text-red-500';
+      default: return 'text-slate-400';
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('AI Developer Portal')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiBrain} title='Intelligent AI Developer' main>
+          <div className="flex items-center space-x-2 text-sm text-slate-400">
+            <BaseIcon path={mdiConsole} size={18} />
+            <span>v4.0.2-quantum</span>
+          </div>
+        </SectionTitleLineWithButton>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+          <CardBox className="lg:col-span-2 shadow-2xl bg-slate-900 border-slate-800">
+            <div className="mb-6">
+              <h2 className="text-2xl font-bold text-white mb-2">Initialize New Game Project</h2>
+              <p className="text-slate-400">Describe your vision. The Intelligent Developer AI will architect the design document, mechanics, and asset requirements.</p>
+            </div>
+
+            <div className="space-y-4">
+              <FormField label="Project Name" help="The name of your future masterpiece">
+                <input 
+                  value={projectName}
+                  onChange={(e) => setProjectName(e.target.value)}
+                  className="w-full bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none"
+                  placeholder="e.g. Cyberpunk Odyssey"
+                />
+              </FormField>
+
+              <FormField label="Target Dimension">
+                <select 
+                  value={dimension}
+                  onChange={(e) => setDimension(e.target.value)}
+                  className="w-full bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none"
+                >
+                  <option value="2d">2D High-Resolution</option>
+                  <option value="3d">3D Immersive Environment</option>
+                  <option value="mixed">Mixed Reality / 2.5D</option>
+                </select>
+              </FormField>
+
+              <FormField label="Game Concept & Mechanics" help="Be as detailed as possible. The AI thrives on context.">
+                <textarea 
+                  value={concept}
+                  onChange={(e) => setConcept(e.target.value)}
+                  className="w-full h-40 bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none resize-none"
+                  placeholder="e.g. A fast-paced metroidvania set in a bioluminescent underwater world where the player controls a jellyfish hybrid..."
+                />
+              </FormField>
+
+              <div className="flex justify-end">
+                <BaseButton 
+                  label={loading ? "Architecting..." : "Architect Game Project"} 
+                  color="info"
+                  icon={mdiRocketLaunch}
+                  onClick={handleGenerate}
+                  disabled={loading || !concept || !projectName}
+                />
+              </div>
+            </div>
+          </CardBox>
+
+          <CardBox className="bg-slate-900 border-slate-800">
+            <h3 className="text-xl font-bold text-white mb-4">Neural Network Status</h3>
+            <div className="space-y-4">
+              <div className="p-4 bg-slate-800 rounded-lg">
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-300">GPU Utilization</span>
+                  <span className="text-sm text-cyan-400 font-mono">82%</span>
+                </div>
+                <div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
+                  <div className="bg-cyan-400 h-full w-[82%]"></div>
+                </div>
+              </div>
+              <div className="p-4 bg-slate-800 rounded-lg">
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-300">Model Precision</span>
+                  <span className="text-sm text-violet-400 font-mono">FP16</span>
+                </div>
+                <div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
+                  <div className="bg-violet-400 h-full w-full"></div>
+                </div>
+              </div>
+              <div className="p-4 bg-slate-800 rounded-lg">
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-300">Latency</span>
+                  <span className="text-sm text-emerald-400 font-mono">42ms</span>
+                </div>
+                <div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
+                  <div className="bg-emerald-400 h-full w-[20%]"></div>
+                </div>
+              </div>
+            </div>
+
+            <BaseDivider />
+            
+            <div className="flex items-start space-x-3 text-sm text-slate-400 italic">
+              <BaseIcon path={mdiBrain} size={24} className="text-violet-500 flex-shrink-0" />
+              <p>&quot;The future of gaming isn&apos;t just played; it&apos;s procedurally imagined. Every prompt is a seed for a new universe.&quot;</p>
+            </div>
+          </CardBox>
+        </div>
+
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title='AI Project Pipeline' />
+        
+        <div className="grid grid-cols-1 gap-4">
+          {ai_game_projects && ai_game_projects.length > 0 ? (
+            ai_game_projects.map((project: any) => (
+              <CardBox key={project.id} className="bg-slate-900 border-slate-800 hover:border-violet-500 transition-colors">
+                <div className="flex flex-col md:flex-row md:items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    <div className={`p-3 rounded-xl bg-slate-800 ${getStatusColor(project.project_status)}`}>
+                      <BaseIcon path={getStatusIcon(project.project_status)} size={32} />
+                    </div>
+                    <div>
+                      <h4 className="text-lg font-bold text-white">{project.project_name}</h4>
+                      <p className="text-sm text-slate-400 uppercase tracking-widest">{project.target_dimension} • Created {new Date(project.createdAt).toLocaleDateString()}</p>
+                    </div>
+                  </div>
+                  
+                  <div className="mt-4 md:mt-0 flex items-center space-x-4">
+                    <div className="text-right hidden md:block">
+                      <div className={`text-sm font-bold uppercase ${getStatusColor(project.project_status)}`}>
+                        {project.project_status}
+                      </div>
+                      <div className="text-xs text-slate-500">
+                        {project.completed_at ? `Ready in ${Math.round((new Date(project.completed_at).getTime() - new Date(project.requested_at).getTime()) / 1000)}s` : 'Processing...'}
+                      </div>
+                    </div>
+                    <BaseButton 
+                      label="Open Project" 
+                      color="whiteDark" 
+                      small 
+                      disabled={project.project_status !== 'ready'}
+                      onClick={() => window.location.href = `/ai_game_projects/${project.id}`}
+                    />
+                  </div>
+                </div>
+                {project.project_status === 'generating' && (
+                  <div className="mt-4 w-full bg-slate-800 h-1 rounded-full overflow-hidden">
+                    <div className="bg-violet-500 h-full animate-pulse w-full"></div>
+                  </div>
+                )}
+              </CardBox>
+            ))
+          ) : (
+            <div className="text-center py-12 bg-slate-900 border-2 border-dashed border-slate-800 rounded-3xl">
+              <BaseIcon path={mdiRocketLaunch} size={48} className="mx-auto text-slate-700 mb-4" />
+              <p className="text-slate-500">Your AI development pipeline is empty. Launch your first idea above.</p>
+            </div>
+          )}
+        </div>
+      </SectionMain>
+    </>
+  );
+};
+
+AiDeveloperPortal.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default AiDeveloperPortal;

frontend/src/pages/index.tsx

@@ -1,166 +1,276 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import Head from 'next/head'
+import LayoutGuest from '../layouts/Guest'
+import { getPageTitle } from '../config'
+import BaseButton from '../components/BaseButton'
+import { 
+  mdiGamepadVariant, 
+  mdiClockOutline, 
+  mdiQrcode, 
+  mdiRocketLaunch, 
+  mdiShieldCheck, 
+  mdiChevronRight,
+  mdiBrain,
+  mdiDeveloperBoard
+} from '@mdi/js'
+import BaseIcon from '../components/BaseIcon'
+import axios from 'axios'
+import Link from 'next/link'
 
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
-import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+export default function IndexPage() {
+  const [games, setGames] = useState([])
+  const [categories, setCategories] = useState([])
+  const [timePasses, setTimePasses] = useState([])
+  const [qrCodes, setQrCodes] = useState([])
+  const [activeCategory, setActiveCategory] = useState('all')
 
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [gamesRes, catsRes, passesRes, qrRes] = await Promise.all([
+          axios.get('/games'),
+          axios.get('/game_categories'),
+          axios.get('/game_time_passes'),
+          axios.get('/game_payment_qr_codes')
+        ])
+        setGames(gamesRes.data.rows || [])
+        setCategories(catsRes.data.rows || [])
+        setTimePasses(passesRes.data.rows || [])
+        setQrCodes(qrRes.data.rows || [])
+      } catch (err) {
+        console.error("Failed to fetch landing data", err)
+      }
+    }
+    fetchData()
+  }, [])
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'AI Game Studio Marketplace'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
+  const filteredGames = activeCategory === 'all' 
+    ? games 
+    : games.filter((g: any) => g.game_categoryId === activeCategory)
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="min-h-screen bg-[#020617] text-white selection:bg-violet-500/30">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Advanced Gaming & AI Dev Platform')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your AI Game Studio Marketplace app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+      {/* Navbar */}
+      <nav className="flex items-center justify-between px-6 py-4 border-b border-white/5 backdrop-blur-md sticky top-0 z-50">
+        <div className="flex items-center space-x-2">
+          <div className="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg shadow-violet-500/20">
+            <BaseIcon path={mdiGamepadVariant} size={24} color="white" />
+          </div>
+          <span className="text-xl font-black tracking-tighter uppercase italic">Nexus<span className="text-violet-500">Games</span></span>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
+        <div className="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-400">
+          <a href="#games" className="hover:text-white transition-colors">Gallery</a>
+          <a href="#payment" className="hover:text-white transition-colors">Access</a>
+          <Link href="/ai-developer" className="hover:text-white transition-colors flex items-center space-x-1">
+            <BaseIcon path={mdiBrain} size={16} />
+            <span>AI Developer</span>
+          </Link>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Link href="/admin-login" className="text-sm font-bold text-slate-500 hover:text-slate-300 transition-colors">Admin Access</Link>
+          <BaseButton label="Login" color="info" roundedFull href="/login" />
+        </div>
+      </nav>
 
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-32 px-6 overflow-hidden">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-violet-600/10 blur-[120px] rounded-full -z-10"></div>
+        <div className="max-w-6xl mx-auto text-center">
+          <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-400 text-xs font-bold uppercase tracking-widest mb-6">
+            <BaseIcon path={mdiShieldCheck} size={14} />
+            <span>Next-Gen Game Distribution Platform</span>
+          </div>
+          <h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-none mb-8">
+            PLAY THE <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-cyan-400">FUTURE</span><br/>
+            OF GAMING.
+          </h1>
+          <p className="max-w-2xl mx-auto text-lg text-slate-400 mb-10 leading-relaxed">
+            Instant access to premium high-fidelity games. Powered by AI development tools and decentralized payment systems.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+            <BaseButton label="Explore Gallery" color="info" icon={mdiGamepadVariant} className="px-8 py-4 text-lg" href="#games" />
+            <BaseButton label="AI Developer Portal" color="whiteDark" icon={mdiBrain} className="px-8 py-4 text-lg" href="/ai-developer" />
+          </div>
+        </div>
+      </section>
+
+      {/* AI Developer Teaser */}
+      <section className="px-6 py-20 bg-gradient-to-b from-transparent to-violet-900/10">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div className="order-2 lg:order-1">
+              <div className="w-16 h-16 bg-violet-600/20 rounded-2xl flex items-center justify-center mb-6">
+                <BaseIcon path={mdiBrain} size={32} className="text-violet-500" />
+              </div>
+              <h2 className="text-4xl font-bold mb-6 italic">World&apos;s Most Advanced AI Game Creator</h2>
+              <p className="text-slate-400 text-lg mb-8 leading-relaxed">
+                Transform your ideas into high-quality game projects instantly. Our Intelligent Developer AI architects mechanics, design docs, and technical structures for 2D and 3D experiences.
+              </p>
+              <div className="grid grid-cols-2 gap-6 mb-8">
+                <div className="flex items-start space-x-3">
+                  <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mt-1" />
+                  <div>
+                    <h4 className="font-bold">Rapid Prototyping</h4>
+                    <p className="text-xs text-slate-500">From concept to GDD in seconds.</p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <BaseIcon path={mdiDeveloperBoard} size={20} className="text-cyan-500 mt-1" />
+                  <div>
+                    <h4 className="font-bold">Multi-Platform</h4>
+                    <p className="text-xs text-slate-500">Optimized for all modern engines.</p>
+                  </div>
+                </div>
+              </div>
+              <BaseButton label="Start Developing" color="info" icon={mdiRocketLaunch} href="/ai-developer" />
+            </div>
+            <div className="order-1 lg:order-2 relative">
+               <div className="aspect-square bg-gradient-to-br from-violet-600/20 to-cyan-500/20 rounded-3xl border border-white/10 flex items-center justify-center overflow-hidden">
+                  <div className="relative w-full h-full flex items-center justify-center">
+                    <div className="absolute inset-0 bg-[url('https://images.pexels.com/photos/3165335/pexels-photo-3165335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')] bg-cover opacity-30 animate-pulse"></div>
+                    <div className="z-10 text-center p-8 bg-black/60 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl">
+                       <BaseIcon path={mdiBrain} size={64} className="text-violet-500 mx-auto mb-4" />
+                       <div className="font-mono text-sm text-emerald-400 mb-2">NEURAL_NET: ACTIVE</div>
+                       <div className="w-48 h-1 bg-slate-800 rounded-full overflow-hidden">
+                          <div className="bg-violet-500 h-full w-[75%] animate-pulse"></div>
+                       </div>
+                    </div>
+                  </div>
+               </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Game Gallery */}
+      <section id="games" className="px-6 py-24 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 space-y-6 md:space-y-0">
+          <div>
+            <h2 className="text-4xl font-bold mb-4 tracking-tight uppercase italic">Game <span className="text-violet-500">Gallery</span></h2>
+            <p className="text-slate-400">The most curated selection of high-end experiences.</p>
+          </div>
+          <div className="flex items-center bg-white/5 p-1 rounded-2xl border border-white/5 overflow-x-auto whitespace-nowrap">
+            <button 
+              onClick={() => setActiveCategory('all')}
+              className={`px-5 py-2 rounded-xl text-sm font-bold transition-all ${activeCategory === 'all' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'}`}
+            >
+              All Genres
+            </button>
+            {categories.map((cat: any) => (
+              <button 
+                key={cat.id}
+                onClick={() => setActiveCategory(cat.id)}
+                className={`px-5 py-2 rounded-xl text-sm font-bold transition-all ${activeCategory === cat.id ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'}`}
+              >
+                {cat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {filteredGames.map((game: any) => (
+            <div key={game.id} className="group relative bg-white/5 rounded-3xl overflow-hidden border border-white/5 hover:border-violet-500/50 transition-all hover:-translate-y-2">
+              <div className="aspect-[4/5] overflow-hidden">
+                <img 
+                  src={game.game_image || 'https://images.pexels.com/photos/163036/mario-luigi-yoshi-figures-163036.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'} 
+                  alt={game.title}
+                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent p-6 flex flex-col justify-end">
+                <span className="text-[10px] font-black uppercase tracking-[0.2em] text-violet-400 mb-1">{categories.find((c: any) => c.id === game.game_categoryId)?.name || 'Premium'}</span>
+                <h3 className="text-xl font-bold mb-4 group-hover:text-violet-400 transition-colors">{game.title}</h3>
+                <BaseButton label="View Access" color="white" small className="w-full" icon={mdiChevronRight} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Payment & QR Section */}
+      <section id="payment" className="px-6 py-24 bg-white/[0.02]">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-black mb-4 uppercase italic">Instant <span className="text-cyan-400">Access</span></h2>
+            <p className="text-slate-400">Choose your duration and unlock the experience via secure QR payment.</p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Time Passes */}
+            <div className="lg:col-span-1 space-y-4">
+              {timePasses.map((pass: any) => (
+                <div key={pass.id} className="p-6 bg-white/5 rounded-3xl border border-white/5 hover:bg-violet-600/10 transition-colors">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <div className="text-2xl font-black">{pass.duration_minutes} MIN</div>
+                      <div className="text-sm text-slate-500">Full Access Pass</div>
+                    </div>
+                    <div className="text-2xl font-bold text-emerald-400">${pass.price}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* QR Payment UI */}
+            <div className="lg:col-span-2 bg-gradient-to-br from-violet-600/20 to-cyan-500/20 rounded-[40px] p-8 md:p-12 border border-white/10">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                  <h3 className="text-3xl font-bold mb-6 italic">Scan & Play</h3>
+                  <p className="text-slate-400 mb-8 leading-relaxed">
+                    Select your preferred payment method. Access is granted automatically upon network confirmation.
+                  </p>
+                  <div className="space-y-4">
+                    <div className="flex items-center space-x-3 text-sm">
+                      <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500" />
+                      <span>Encrypted Transaction</span>
+                    </div>
+                    <div className="flex items-center space-x-3 text-sm">
+                      <BaseIcon path={mdiClockOutline} size={20} className="text-cyan-500" />
+                      <span>Instant Activation</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col items-center justify-center p-8 bg-black/40 backdrop-blur-2xl rounded-[32px] border border-white/10 shadow-2xl">
+                  <div className="grid grid-cols-2 gap-4 mb-6 w-full">
+                    {qrCodes.slice(0, 2).map((qr: any) => (
+                      <div key={qr.id} className="text-center">
+                        <div className="aspect-square bg-white p-2 rounded-2xl mb-2">
+                           <img src={qr.qr_code_image} alt={qr.payment_method} className="w-full h-full" />
+                        </div>
+                        <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{qr.payment_method}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="text-center">
+                    <div className="text-xs font-mono text-cyan-400 animate-pulse mb-1">WAITING FOR PAYMENT...</div>
+                    <div className="text-[10px] text-slate-500">Transaction ID: 0x{Math.random().toString(16).slice(2, 10).toUpperCase()}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="px-6 py-12 border-t border-white/5 text-center">
+        <div className="flex items-center justify-center space-x-2 mb-6">
+          <div className="w-8 h-8 bg-violet-600 rounded-lg flex items-center justify-center">
+            <BaseIcon path={mdiGamepadVariant} size={18} color="white" />
+          </div>
+          <span className="text-lg font-black tracking-tighter uppercase italic">Nexus<span className="text-violet-500">Games</span></span>
+        </div>
+        <p className="text-slate-500 text-sm">© 2026 Nexus Gaming Platform. Powered by Intelligent Developer AI.</p>
+      </footer>
     </div>
-  );
+  )
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+IndexPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>
+}

frontend/src/stores/ai_game_projects/ai_game_projectsSlice.ts

@@ -81,6 +81,22 @@ export const create = createAsyncThunk('ai_game_projects/createAi_game_projects'
     }
 })
 
+export const generate = createAsyncThunk('ai_game_projects/generate', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'ai_game_projects/generate',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
 export const uploadCsv = createAsyncThunk(
   'ai_game_projects/uploadCsv',
   async (file: File, { rejectWithValue }) => {
@@ -195,6 +211,20 @@ export const ai_game_projectsSlice = createSlice({
             fulfilledNotify(state, `${'Ai_game_projects'.slice(0, -1)} has been created`);
         })
 
+        builder.addCase(generate.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(generate.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+        builder.addCase(generate.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `AI Game Project generation started`);
+            state.refetch = true;
+        })
+
         builder.addCase(update.pending, (state) => {
             state.loading = true
             resetNotify(state);
@@ -228,4 +258,4 @@ export const ai_game_projectsSlice = createSlice({
 // Action creators are generated for each case reducer function
  export const { setRefetch } = ai_game_projectsSlice.actions
 
-export default ai_game_projectsSlice.reducer
+export default ai_game_projectsSlice.reducer