siria
This commit is contained in:
Flatlogic Bot
parent
43ee34a642
commit
f2f4c0d9ea
@ -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>
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -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<string | undefined>(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) => (
|
||||
<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 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 (
|
||||
<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="bg-white text-slate-900 font-sans">
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
<title>{getPageTitle('Home')}</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="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 className="flex items-center space-x-2">
|
||||
<div className="bg-indigo-600 p-2 rounded-lg">
|
||||
<BaseIcon path={icon.mdiViewDashboardOutline} size={24} className="text-white" />
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight text-slate-900">{title}</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-4">
|
||||
<Link href="/login" className="text-slate-600 hover:text-indigo-600 font-medium transition-colors">
|
||||
Log in
|
||||
</Link>
|
||||
<BaseButton
|
||||
href="/register"
|
||||
label="Sign up"
|
||||
color="info"
|
||||
className="rounded-full px-6"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden bg-slate-50 pt-16 pb-24 lg:pt-32 lg:pb-40">
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center">
|
||||
<div className="lg:w-1/2 text-center lg:text-left mb-12 lg:mb-0">
|
||||
<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
|
||||
</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"
|
||||
label="Start for Free"
|
||||
color="info"
|
||||
className="rounded-full px-8 py-3 text-lg font-bold shadow-lg shadow-indigo-200"
|
||||
/>
|
||||
<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 */}
|
||||
<section className="py-24 bg-white">
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user