Version 1

backend/src/db/db.config.js

@@ -1,5 +1,3 @@
-
-
 module.exports = {
   production: {
     dialect: 'postgres',
@@ -12,10 +10,10 @@ module.exports = {
     seederStorage: 'sequelize',
   },
   development: {
-    username: 'postgres',
+    username: process.env.DB_USER || 'postgres',
     dialect: 'postgres',
-    password: '',
-    database: 'db_app_draft',
+    password: process.env.DB_PASS || '',
+    database: process.env.DB_NAME || 'db_app_draft',
     host: process.env.DB_HOST || 'localhost',
     logging: console.log,
     seederStorage: 'sequelize',
@@ -30,4 +28,4 @@ module.exports = {
       logging: console.log,
       seederStorage: 'sequelize',
     }
-};
+};

backend/src/db/seeders/20260129000000-chat-demo.js

@@ -0,0 +1,88 @@
+'use strict';
+const { v4: uuidv4 } = require('uuid');
+
+const adminId = '193bf4b5-9f07-4bd5-9a43-e7e41f3e96af';
+const johnId = 'af5a87be-8f9c-4630-902a-37a60b7005ba';
+const clientId = '5bc531ab-611f-41f3-9373-b7cc5d09c93d';
+
+const convId1 = uuidv4();
+const convId2 = uuidv4();
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    try {
+      // Create Conversations
+      await queryInterface.bulkInsert('conversations', [
+        {
+          id: convId1,
+          title: 'Project Nexus Sync',
+          is_group: true,
+          status: 'active',
+          last_message_preview: 'The video call module is ready for testing!',
+          createdAt: new Date(),
+          updatedAt: new Date()
+        },
+        {
+          id: convId2,
+          title: 'John Doe',
+          is_group: false,
+          status: 'active',
+          last_message_preview: 'Hey! Did you check the new landing page?',
+          createdAt: new Date(),
+          updatedAt: new Date()
+        }
+      ]);
+
+      // Create Participants (Many-to-Many through table)
+      await queryInterface.bulkInsert('conversationsParticipantsUsers', [
+        { conversations_participantsId: convId1, users_custom_permissionsId: adminId, createdAt: new Date(), updatedAt: new Date() },
+        { conversations_participantsId: convId1, users_custom_permissionsId: johnId, createdAt: new Date(), updatedAt: new Date() },
+        { conversations_participantsId: convId1, users_custom_permissionsId: clientId, createdAt: new Date(), updatedAt: new Date() },
+        { conversations_participantsId: convId2, users_custom_permissionsId: adminId, createdAt: new Date(), updatedAt: new Date() },
+        { conversations_participantsId: convId2, users_custom_permissionsId: johnId, createdAt: new Date(), updatedAt: new Date() }
+      ]);
+
+      // Create Messages
+      await queryInterface.bulkInsert('messages', [
+        {
+          id: uuidv4(),
+          content: 'Hello everyone! Welcome to Nexus Chat.',
+          conversationId: convId1,
+          senderId: adminId,
+          status: 'read',
+          sent_at: new Date(),
+          createdAt: new Date(Date.now() - 3600000),
+          updatedAt: new Date()
+        },
+        {
+          id: uuidv4(),
+          content: 'The video call module is ready for testing!',
+          conversationId: convId1,
+          senderId: johnId,
+          status: 'sent',
+          sent_at: new Date(),
+          createdAt: new Date(Date.now() - 1800000),
+          updatedAt: new Date()
+        },
+        {
+          id: uuidv4(),
+          content: 'Hey! Did you check the new landing page?',
+          conversationId: convId2,
+          senderId: johnId,
+          status: 'read',
+          sent_at: new Date(),
+          createdAt: new Date(Date.now() - 900000),
+          updatedAt: new Date()
+        }
+      ]);
+    } catch (error) {
+      console.error('Error during chat demo seeding:', error);
+    }
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.bulkDelete('messages', null, {});
+    await queryInterface.bulkDelete('conversationsParticipantsUsers', null, {});
+    await queryInterface.bulkDelete('conversations', null, {});
+  }
+};

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/menuAside.ts

@@ -7,7 +7,11 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
-  
+  {
+    href: '/chat',
+    icon: icon.mdiChatProcessingOutline,
+    label: 'Nexus Chat',
+  },
   {
     href: '/users/users-list',
     label: 'Users',
@@ -72,4 +76,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/chat.tsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useState, useRef } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { fetch as fetchConversations } from '../stores/conversations/conversationsSlice';
+import { fetch as fetchMessages, create as createMessage } from '../stores/messages/messagesSlice';
+import { mdiSend, mdiVideo, mdiMagnify, mdiDotsVertical, mdiPaperclip, mdiChatProcessingOutline } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import moment from 'moment';
+
+export default function ChatPage() {
+  const dispatch = useAppDispatch();
+  const { conversations, loading: loadingConversations } = useAppSelector((state) => state.conversations);
+  const { messages, loading: loadingMessages } = useAppSelector((state) => state.messages);
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+  const [selectedConversation, setSelectedConversation] = useState<any>(null);
+  const [messageText, setMessageText] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    dispatch(fetchConversations({ query: '?limit=100' }));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (selectedConversation) {
+      dispatch(fetchMessages({ query: `?conversation=${selectedConversation.id}&limit=100` }));
+    }
+  }, [selectedConversation, dispatch]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!messageText.trim() || !selectedConversation || !currentUser) return;
+
+    const data = {
+      content: messageText,
+      conversation: selectedConversation.id,
+      sender: currentUser.id,
+      sent_at: new Date(),
+      status: 'sent'
+    };
+
+    await dispatch(createMessage(data));
+    setMessageText('');
+    dispatch(fetchMessages({ query: `?conversation=${selectedConversation.id}&limit=100` }));
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-120px)] overflow-hidden bg-white dark:bg-dark-900 rounded-3xl shadow-2xl mx-4 mb-4 border border-gray-100 dark:border-dark-700">
+      <Head>
+        <title>Nexus Chat | Messages</title>
+      </Head>
+
+      {/* Sidebar: Conversations List */}
+      <div className="w-80 border-r border-gray-100 dark:border-dark-700 flex flex-col bg-gray-50/30 dark:bg-dark-800/30">
+        <div className="p-4 border-b border-gray-100 dark:border-dark-700">
+          <h2 className="text-xl font-bold mb-4 px-2">Messages</h2>
+          <div className="relative">
+            <BaseIcon path={mdiMagnify} size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input 
+              type="text" 
+              placeholder="Search conversations..." 
+              className="w-full pl-10 pr-4 py-2 bg-white dark:bg-dark-700 border border-gray-200 dark:border-dark-600 rounded-2xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all"
+            />
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto aside-scrollbars">
+          {conversations?.map((conv: any) => (
+            <div 
+              key={conv.id}
+              onClick={() => setSelectedConversation(conv)}
+              className={`p-4 flex items-center space-x-3 cursor-pointer transition-all border-l-4 ${
+                selectedConversation?.id === conv.id 
+                  ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-600' 
+                  : 'hover:bg-gray-50 dark:hover:bg-dark-700 border-transparent'
+              }`}
+            >
+              <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-2xl flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-sm">
+                {conv.title?.charAt(0) || 'C'}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex justify-between items-baseline">
+                  <h3 className="font-semibold text-sm truncate">{conv.title || 'Direct Message'}</h3>
+                  <span className="text-[10px] text-gray-400">
+                    {conv.updatedAt ? moment(conv.updatedAt).format('HH:mm') : ''}
+                  </span>
+                </div>
+                <p className="text-xs text-gray-500 truncate mt-0.5">
+                  {conv.last_message_preview || 'No messages yet...'}
+                </p>
+              </div>
+            </div>
+          ))}
+          {(!conversations || conversations.length === 0) && !loadingConversations && (
+            <div className="p-8 text-center text-gray-400 text-sm italic">
+              No conversations found.
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col bg-white dark:bg-dark-900">
+        {selectedConversation ? (
+          <>
+            {/* Chat Header */}
+            <div className="p-4 border-b border-gray-100 dark:border-dark-700 flex justify-between items-center bg-white/80 dark:bg-dark-900/80 backdrop-blur-md">
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-bold">
+                  {selectedConversation.title?.charAt(0) || 'C'}
+                </div>
+                <div>
+                  <h3 className="font-bold text-sm">{selectedConversation.title || 'Conversation'}</h3>
+                  <p className="text-[10px] text-emerald-500 font-medium">Online</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <button className="p-2 hover:bg-gray-100 dark:hover:bg-dark-700 rounded-xl transition-colors text-gray-500">
+                  <BaseIcon path={mdiVideo} size={24} />
+                </button>
+                <button className="p-2 hover:bg-gray-100 dark:hover:bg-dark-700 rounded-xl transition-colors text-gray-500">
+                  <BaseIcon path={mdiDotsVertical} size={24} />
+                </button>
+              </div>
+            </div>
+
+            {/* Messages List */}
+            <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50/30 dark:bg-dark-900/30 aside-scrollbars">
+              {messages?.map((msg: any) => {
+                const isMe = msg.senderId === currentUser?.id;
+                return (
+                  <div key={msg.id} className={`flex ${isMe ? 'justify-end' : 'justify-start'}`}>
+                    <div className={`max-w-[70%] group`}>
+                      <div className={`px-4 py-2.5 rounded-2xl shadow-sm ${
+                        isMe 
+                          ? 'bg-indigo-600 text-white rounded-tr-none' 
+                          : 'bg-white dark:bg-dark-800 text-gray-800 dark:text-gray-100 rounded-tl-none border border-gray-100 dark:border-dark-700'
+                      }`}>
+                        <p className="text-sm leading-relaxed">{msg.content}</p>
+                      </div>
+                      <div className={`flex items-center mt-1 space-x-2 ${isMe ? 'justify-end' : 'justify-start'}`}>
+                        <span className="text-[10px] text-gray-400">
+                          {moment(msg.createdAt).format('HH:mm')}
+                        </span>
+                        {isMe && (
+                          <span className="text-[10px] text-indigo-400 font-bold italic">Read</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+              {!loadingMessages && (!messages || messages.length === 0) && (
+                <div className="flex flex-col items-center justify-center h-full text-gray-400 space-y-2">
+                  <BaseIcon path={mdiChatProcessingOutline} size={48} className="opacity-20" />
+                  <p className="text-sm italic">No messages in this conversation yet.</p>
+                </div>
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div className="p-4 bg-white dark:bg-dark-900 border-t border-gray-100 dark:border-dark-700">
+              <form onSubmit={handleSendMessage} className="flex items-center space-x-3">
+                <button type="button" className="p-2 text-gray-400 hover:text-indigo-500 transition-colors">
+                  <BaseIcon path={mdiPaperclip} size={24} />
+                </button>
+                <div className="flex-1 relative">
+                  <input 
+                    type="text" 
+                    value={messageText}
+                    onChange={(e) => setMessageText(e.target.value)}
+                    placeholder="Type a message..." 
+                    className="w-full px-4 py-3 bg-gray-50 dark:bg-dark-800 border border-transparent focus:bg-white dark:focus:bg-dark-700 focus:border-indigo-500 rounded-2xl text-sm outline-none transition-all"
+                  />
+                </div>
+                <button 
+                  type="submit"
+                  disabled={!messageText.trim()}
+                  className="p-3 bg-indigo-600 text-white rounded-2xl hover:bg-indigo-700 disabled:opacity-50 disabled:bg-gray-400 transition-all shadow-lg shadow-indigo-500/20 active:scale-95"
+                >
+                  <BaseIcon path={mdiSend} size={20} />
+                </button>
+              </form>
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-center p-8 bg-gray-50/30 dark:bg-dark-900/30">
+            <div className="w-24 h-24 bg-indigo-100 dark:bg-indigo-900/30 rounded-3xl flex items-center justify-center mb-6">
+              <BaseIcon path={mdiChatProcessingOutline} size={48} className="text-indigo-600 dark:text-indigo-400" />
+            </div>
+            <h2 className="text-2xl font-bold mb-2">Select a conversation</h2>
+            <p className="text-gray-500 max-w-xs">
+              Pick one from the list or start a new conversation to begin chatting.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ChatPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};

frontend/src/pages/index.tsx

@@ -1,166 +1,112 @@
 
-import React, { useEffect, useState } from 'react';
+import React 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 Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'App Draft'
-
-    // 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>)
-        }
-    };
+import { mdiChatProcessingOutline, mdiVideoOutline, mdiShieldLockOutline, mdiArrowRight } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
+export default function LandingPage() {
   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-slate-900 text-white selection:bg-indigo-500/30">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Nexus Chat - Next Gen Messaging')}</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 App Draft app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>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 text-gray-500'>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>
+      {/* Navigation */}
+      <nav className="container mx-auto px-6 py-8 flex justify-between items-center relative z-10">
+        <div className="flex items-center space-x-2">
+          <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
+            <BaseIcon path={mdiChatProcessingOutline} size={24} className="text-white" />
+          </div>
+          <span className="text-2xl font-bold tracking-tight">Nexus<span className="text-indigo-500">Chat</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="flex items-center space-x-6">
+          <Link href="/login" className="text-sm font-medium hover:text-indigo-400 transition-colors">
+            Login
+          </Link>
+          <Link 
+            href="/login" 
+            className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 rounded-full text-sm font-semibold transition-all shadow-lg shadow-indigo-500/25 active:scale-95"
+          >
+            Get Started
+          </Link>
+        </div>
+      </nav>
 
+      {/* Hero Section */}
+      <section className="container mx-auto px-6 pt-20 pb-32 text-center relative">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-indigo-600/20 rounded-full blur-[120px] -z-10"></div>
+        <h1 className="text-6xl md:text-8xl font-black mb-6 leading-tight tracking-tighter">
+          Connect beyond <br />
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-violet-400">
+            boundaries.
+          </span>
+        </h1>
+        <p className="text-gray-400 text-xl md:text-2xl max-w-2xl mx-auto mb-10 leading-relaxed font-light">
+          Experience seamless messaging and HD video calls with military-grade security. 
+          The future of communication is here.
+        </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+          <Link 
+            href="/chat" 
+            className="group px-8 py-4 bg-white text-slate-950 rounded-full font-bold text-lg hover:bg-indigo-50 transition-all flex items-center shadow-2xl"
+          >
+            Launch Chat
+            <BaseIcon path={mdiArrowRight} size={20} className="ml-2 group-hover:translate-x-1 transition-transform" />
+          </Link>
+          <Link 
+            href="/login" 
+            className="px-8 py-4 bg-slate-800/50 backdrop-blur-sm border border-slate-700 text-white rounded-full font-bold text-lg hover:bg-slate-700 transition-all shadow-xl"
+          >
+            Admin UI
+          </Link>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="container mx-auto px-6 py-24 border-t border-slate-800/50">
+        <div className="grid md:grid-cols-3 gap-12">
+          <div className="p-8 rounded-3xl bg-slate-800/30 border border-slate-700/50 hover:border-indigo-500/50 transition-colors group">
+            <div className="w-14 h-14 bg-indigo-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-indigo-500/20 transition-colors">
+              <BaseIcon path={mdiChatProcessingOutline} size={32} className="text-indigo-400" />
+            </div>
+            <h3 className="text-2xl font-bold mb-4">Instant Messaging</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Real-time message delivery with rich media support, read receipts, and typing indicators.
+            </p>
+          </div>
+          <div className="p-8 rounded-3xl bg-slate-800/30 border border-slate-700/50 hover:border-violet-500/50 transition-colors group">
+            <div className="w-14 h-14 bg-violet-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-violet-500/20 transition-colors">
+              <BaseIcon path={mdiVideoOutline} size={32} className="text-violet-400" />
+            </div>
+            <h3 className="text-2xl font-bold mb-4">HD Video Calls</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Crystal clear video and audio quality with low latency, anywhere in the world.
+            </p>
+          </div>
+          <div className="p-8 rounded-3xl bg-slate-800/30 border border-slate-700/50 hover:border-emerald-500/50 transition-colors group">
+            <div className="w-14 h-14 bg-emerald-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 transition-colors">
+              <BaseIcon path={mdiShieldLockOutline} size={32} className="text-emerald-400" />
+            </div>
+            <h3 className="text-2xl font-bold mb-4">Private & Secure</h3>
+            <p className="text-gray-400 leading-relaxed">
+              End-to-end encryption ensures your conversations stay between you and your contacts.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="container mx-auto px-6 py-12 text-center text-gray-500 text-sm border-t border-slate-800/50">
+        <p>© 2026 Nexus Chat Inc. Built with passion for connection.</p>
+      </footer>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-