diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx index 72935e6..4ced3eb 100644 --- a/frontend/src/components/NavBarItem.tsx +++ b/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
{NavBarItemComponentContents}
-} +} \ No newline at end of file diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx index 1b9907d..26c3572 100644 --- a/frontend/src/layouts/Authenticated.tsx +++ b/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({ ) -} +} \ No newline at end of file diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 9a58af9..d8fc90a 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,166 +1,187 @@ - 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 CardBox from '../components/CardBox'; -import SectionFullScreen from '../components/SectionFullScreen'; +import BaseIcon from '../components/BaseIcon'; 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'; +import { getPexelsImage } from '../helpers/pexels'; +export default function LandingPage() { + const [heroImage, setHeroImage] = useState(undefined); + const textColor = useAppSelector((state) => state.style.linkColor); + const title = 'CollabAI'; -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('left'); - const textColor = useAppSelector((state) => state.style.linkColor); + useEffect(() => { + async function fetchData() { + const image = await getPexelsImage(); + if (image?.src?.large2x) { + setHeroImage(image.src.large2x); + } + } + fetchData(); + }, []); - 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) => ( -
-
- - Photo by {image?.photographer} on Pexels - -
-
- ); - - const videoBlock = (video) => { - if (video?.video_files?.length > 0) { - return ( -
- -
- - Video by {video.user.name} on Pexels - -
-
) - } - }; + const features = [ + { + title: 'Project Management', + description: 'Organize your work into projects, track progress, and collaborate seamlessly with your team.', + icon: icon.mdiFolder, + color: 'text-blue-500', + }, + { + title: 'Smart Task Tracking', + description: 'Break down projects into actionable tasks. Set deadlines, priorities, and assignees with ease.', + icon: icon.mdiFormatListBulleted, + color: 'text-green-500', + }, + { + title: 'AI-Powered Chat', + description: 'Enhance communication with integrated AI assistance. Get summaries and insights directly in your chat.', + icon: icon.mdiChat, + color: 'text-purple-500', + }, + ]; return ( -
+
- {getPageTitle('Starter Page')} + {getPageTitle('Home')} - -
- {contentType === 'image' && contentPosition !== 'background' - ? imageBlock(illustrationImage) - : null} - {contentType === 'video' && contentPosition !== 'background' - ? videoBlock(illustrationVideo) - : null} -
- - - -
-

This is a React.js/Node.js app generated by the Flatlogic Web App Generator

-

For guides and documentation please check - your local README.md and the Flatlogic documentation

-
- - - - - - + {/* Navigation */} +
- -
-

© 2026 {title}. All rights reserved

- - Privacy Policy - -
+
+ + Log in + + +
+ + {/* Hero Section */} +
+
+
+
+

+ The Future of Productive Collaboration +

+

+ Streamline your workflow with our AI-powered project management platform. + Built for modern teams who want to achieve more, faster. +

+
+ + +
+
+
+
+ Team collaboration +
+ {/* Decorative elements */} +
+
+
+
+
+
+ + {/* Features Section */} +
+
+
+

Powerful Features for Modern Teams

+

+ Everything you need to manage projects, tasks, and communications in one place. +

+
+
+ {features.map((feature, index) => ( +
+
+ +
+

{feature.title}

+

+ {feature.description} +

+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+

Ready to transform your productivity?

+

+ Join thousands of teams who are already using CollabAI to build the future. +

+ +
+
+ + {/* Footer */} +
+
+
+
+
+ +
+ {title} +
+
+ Privacy Policy + Terms of Use + Built with Flatlogic +
+

+ © 2026 {title}. All rights reserved. +

+
+
+
); } -Starter.getLayout = function getLayout(page: ReactElement) { +LandingPage.getLayout = function getLayout(page: ReactElement) { return {page}; -}; - +}; \ No newline at end of file