frontend/src/components/NavBarItem.tsx

@@ -1,5 +1,6 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useEffect, useRef} 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'

frontend/src/layouts/Authenticated.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import React, { ReactNode, useEffect } from 'react'
+import { useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'

frontend/src/pages/index.tsx

@@ -1,187 +1,166 @@
+
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import * as icon from '@mdi/js';
 import BaseButton from '../components/BaseButton';
-import BaseIcon from '../components/BaseIcon';
+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 { getPexelsImage } from '../helpers/pexels';
+import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
 
-export default function LandingPage() {
-  const [heroImage, setHeroImage] = useState<string | undefined>(undefined);
-  const textColor = useAppSelector((state) => state.style.linkColor);
-  const title = 'CollabAI';
 
-  useEffect(() => {
+export default function Starter() {
-    async function fetchData() {
+    const [illustrationImage, setIllustrationImage] = useState({
-      const image = await getPexelsImage();
+        src: undefined,
-      if (image?.src?.large2x) {
+        photographer: undefined,
-        setHeroImage(image.src.large2x);
+        photographer_url: undefined,
-      }
+    })
-    }
+    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    fetchData();
+    const [contentType, setContentType] = useState('video');
-  }, []);
+    const [contentPosition, setContentPosition] = useState('left');
+    const textColor = useAppSelector((state) => state.style.linkColor);
 
-  const features = [
+    const title = 'App Draft'
-    {
+
-      title: 'Project Management',
+    // Fetch Pexels image/video
-      description: 'Organize your work into projects, track progress, and collaborate seamlessly with your team.',
+    useEffect(() => {
-      icon: icon.mdiFolder,
+        async function fetchData() {
-      color: 'text-blue-500',
+            const image = await getPexelsImage();
-    },
+            const video = await getPexelsVideo();
-    {
+            setIllustrationImage(image);
-      title: 'Smart Task Tracking',
+            setIllustrationVideo(video);
-      description: 'Break down projects into actionable tasks. Set deadlines, priorities, and assignees with ease.',
+        }
-      icon: icon.mdiFormatListBulleted,
+        fetchData();
-      color: 'text-green-500',
+    }, []);
-    },
+
-    {
+    const imageBlock = (image) => (
-      title: 'AI-Powered Chat',
+        <div
-      description: 'Enhance communication with integrated AI assistance. Get summaries and insights directly in your chat.',
+            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-      icon: icon.mdiChat,
+            style={{
-      color: 'text-purple-500',
+                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>)
+        }
+    };
 
   return (
-    <div className="bg-white text-slate-900 font-sans">
+      <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',
+                  }
+                  : {}
+          }
+      >
       <Head>
-        <title>{getPageTitle('Home')}</title>
+        <title>{getPageTitle('Starter Page')}</title>
       </Head>
 
-      {/* Navigation */}
+      <SectionFullScreen bg='violet'>
-      <nav className="flex items-center justify-between px-6 py-4 md:px-12 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-100">
+      <div
-        <div className="flex items-center space-x-2">
+          className={`flex ${
-          <div className="bg-indigo-600 p-2 rounded-lg">
+              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-            <BaseIcon path={icon.mdiViewDashboardOutline} size={24} className="text-white" />
+          } min-h-screen w-full`}
-          </div>
+      >
-          <span className="text-xl font-bold tracking-tight text-slate-900">{title}</span>
+          {contentType === 'image' && contentPosition !== 'background'
-        </div>
+              ? imageBlock(illustrationImage)
-        <div className="flex items-center space-x-4">
+              : null}
-          <Link href="/login" className="text-slate-600 hover:text-indigo-600 font-medium transition-colors">
+          {contentType === 'video' && contentPosition !== 'background'
-            Log in
+              ? videoBlock(illustrationVideo)
-          </Link>
+              : null}
-          <BaseButton
+          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-            href="/register"
+        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            label="Sign up"
+            <CardBoxComponentTitle title="Welcome to your App Draft app!"/>
-            color="info"
-            className="rounded-full px-6"
-          />
-        </div>
-      </nav>
         
-      {/* Hero Section */}
+            <div className="space-y-3">
-      <section className="relative overflow-hidden bg-slate-50 pt-16 pb-24 lg:pt-32 lg:pb-40">
+                <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>
-        <div className="container mx-auto px-6 relative z-10">
+                <p className='text-center text-gray-500'>For guides and documentation please check
-          <div className="flex flex-col lg:flex-row items-center">
+                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            <div className="lg:w-1/2 text-center lg:text-left mb-12 lg:mb-0">
+            </div>
-              <h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight mb-6">
+        
-                The Future of <span className="text-indigo-600">Productive</span> Collaboration
+            <BaseButtons>
-              </h1>
-              <p className="text-lg md:text-xl text-slate-600 mb-10 max-w-2xl mx-auto lg:mx-0">
-                Streamline your workflow with our AI-powered project management platform. 
-                Built for modern teams who want to achieve more, faster.
-              </p>
-              <div className="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
                 <BaseButton
-                  href="/register"
+                    href='/login'
-                  label="Start for Free"
+                    label='Login'
-                  color="info"
+                    color='info'
-                  className="rounded-full px-8 py-3 text-lg font-bold shadow-lg shadow-indigo-200"
+                    className='w-full'
                 />
-                <BaseButton
-                  href="/login"
-                  label="View Demo"
-                  color="white"
-                  className="rounded-full px-8 py-3 text-lg font-bold border border-slate-200"
-                />
-              </div>
-            </div>
-            <div className="lg:w-1/2 relative">
-              <div className="relative z-10 rounded-2xl overflow-hidden shadow-2xl border-8 border-white">
-                <img 
-                  src={heroImage || "https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} 
-                  alt="Team collaboration" 
-                  className="w-full h-auto object-cover"
-                />
-              </div>
-              {/* Decorative elements */}
-              <div className="absolute -top-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
-              <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-purple-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      {/* Features Section */}
+            </BaseButtons>
-      <section className="py-24 bg-white">
+        </CardBox>
-        <div className="container mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Powerful Features for Modern Teams</h2>
-            <p className="text-slate-600 max-w-2xl mx-auto">
-              Everything you need to manage projects, tasks, and communications in one place.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
-            {features.map((feature, index) => (
-              <div key={index} className="p-8 rounded-2xl bg-slate-50 hover:bg-white hover:shadow-xl transition-all duration-300 border border-transparent hover:border-slate-100 group">
-                <div className={`w-12 h-12 rounded-xl bg-white shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
-                  <BaseIcon path={feature.icon} size={28} className={feature.color} />
-                </div>
-                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
-                <p className="text-slate-600 leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
-            ))}
-          </div>
         </div>
-      </section>
+      </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>
 
-      {/* CTA Section */}
-      <section className="py-20 bg-indigo-600">
-        <div className="container mx-auto px-6 text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">Ready to transform your productivity?</h2>
-          <p className="text-indigo-100 mb-10 max-w-xl mx-auto text-lg">
-            Join thousands of teams who are already using CollabAI to build the future.
-          </p>
-          <BaseButton
-            href="/register"
-            label="Get Started Now"
-            color="white"
-            className="rounded-full px-10 py-4 text-lg font-bold text-indigo-600 hover:bg-slate-50 transition-colors shadow-xl"
-          />
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-slate-900 text-slate-400 py-12">
-        <div className="container mx-auto px-6">
-          <div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
-            <div className="flex items-center space-x-2">
-              <div className="bg-indigo-600 p-1.5 rounded-lg">
-                <BaseIcon path={icon.mdiViewDashboardOutline} size={18} className="text-white" />
-              </div>
-              <span className="text-white font-bold text-lg tracking-tight">{title}</span>
-            </div>
-            <div className="flex space-x-8 text-sm">
-              <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</Link>
-              <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms of Use</Link>
-              <a href="https://flatlogic.com" className="hover:text-white transition-colors" target="_blank" rel="noreferrer">Built with Flatlogic</a>
-            </div>
-            <p className="text-sm">
-              © 2026 {title}. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </footer>
     </div>
   );
 }
 
-LandingPage.getLayout = function getLayout(page: ReactElement) {
+Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
+