163 lines
5.8 KiB
TypeScript
163 lines
5.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import WebSiteHeader from '../components/WebPageComponents/Header';
|
|
import WebSiteFooter from '../components/WebPageComponents/Footer';
|
|
import {
|
|
HeroDesigns,
|
|
ContactFormDesigns,
|
|
FeaturesDesigns,
|
|
PricingDesigns,
|
|
} from '../components/WebPageComponents/designs';
|
|
|
|
import HeroSection from '../components/WebPageComponents/HeroComponent';
|
|
|
|
import ContactFormSection from '../components/WebPageComponents/ContactFormComponent';
|
|
|
|
import FeaturesSection from '../components/WebPageComponents/FeaturesComponent';
|
|
|
|
import PricingSection from '../components/WebPageComponents/PricingComponent';
|
|
|
|
export default function WebSite() {
|
|
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
|
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
|
|
const projectName = 'complinext';
|
|
|
|
useEffect(() => {
|
|
const darkElement = document.querySelector('body .dark');
|
|
if (darkElement) {
|
|
darkElement.classList.remove('dark');
|
|
}
|
|
}, []);
|
|
const pages = [
|
|
{
|
|
href: '/products',
|
|
label: 'products',
|
|
},
|
|
|
|
{
|
|
href: '/home',
|
|
label: 'home',
|
|
},
|
|
|
|
{
|
|
href: '/services',
|
|
label: 'services',
|
|
},
|
|
];
|
|
|
|
const features_points = [
|
|
{
|
|
name: 'Real-Time Compliance Monitoring',
|
|
description:
|
|
'Stay updated with real-time compliance status and alerts, ensuring your business remains compliant and proactive in addressing potential issues.',
|
|
icon: 'mdiClockOutline',
|
|
},
|
|
{
|
|
name: 'Automated Document Processing',
|
|
description:
|
|
'Streamline your document management with automated processing, tagging, and version control, saving time and reducing manual errors.',
|
|
icon: 'mdiFileDocumentMultipleOutline',
|
|
},
|
|
{
|
|
name: 'Customizable Reporting Tools',
|
|
description:
|
|
'Generate detailed compliance reports tailored to your business needs, providing insights and data-driven decisions to enhance operational efficiency.',
|
|
icon: 'mdiChartLineVariant',
|
|
},
|
|
];
|
|
|
|
const pricing_features = {
|
|
standard: {
|
|
features: [
|
|
'Real-Time Compliance Monitoring',
|
|
'Automated Document Processing',
|
|
],
|
|
limited_features: ['Customizable Reporting Tools', 'AI-Powered Insights'],
|
|
},
|
|
premium: {
|
|
features: [
|
|
'Real-Time Compliance Monitoring',
|
|
'Automated Document Processing',
|
|
'Customizable Reporting Tools',
|
|
],
|
|
also_included: ['AI-Powered Insights', 'Priority Support'],
|
|
},
|
|
business: {
|
|
features: [
|
|
'Real-Time Compliance Monitoring',
|
|
'Automated Document Processing',
|
|
'Customizable Reporting Tools',
|
|
'AI-Powered Insights',
|
|
'Priority Support',
|
|
'Dedicated Account Manager',
|
|
],
|
|
},
|
|
};
|
|
|
|
const description = {
|
|
standard:
|
|
'The Standard plan is ideal for individuals or small teams looking to manage compliance efficiently with essential features.',
|
|
premium:
|
|
'The Premium plan is perfect for small startups or agencies seeking advanced compliance tools and additional support to enhance their operations.',
|
|
business:
|
|
'The Business plan is designed for enterprises requiring comprehensive compliance management solutions with dedicated support and advanced features.',
|
|
};
|
|
|
|
return (
|
|
<div className='flex flex-col min-h-screen'>
|
|
<Head>
|
|
<title>{`Complinext Products - Innovative Compliance Tools`}</title>
|
|
<meta
|
|
name='description'
|
|
content={`Discover the innovative products offered by Complinext, designed to enhance compliance management and streamline business operations. Explore our AI-powered tools and find the perfect solution for your organization.`}
|
|
/>
|
|
</Head>
|
|
<WebSiteHeader projectName={'complinext'} pages={pages} />
|
|
<main className={`flex-grow ${bgColor} rounded-none `}>
|
|
<HeroSection
|
|
projectName={'complinext'}
|
|
image={['AI-powered compliance product showcase']}
|
|
mainText={`Explore ${projectName}'s Cutting-Edge Products`}
|
|
subTitle={`Discover the innovative tools offered by ${projectName} to revolutionize your compliance management. Our AI-powered products are designed to streamline operations and enhance efficiency.`}
|
|
design={HeroDesigns.IMAGE_BG || ''}
|
|
buttonText={`View Our Products`}
|
|
/>
|
|
|
|
<FeaturesSection
|
|
projectName={'complinext'}
|
|
image={['Advanced compliance management features']}
|
|
withBg={1}
|
|
features={features_points}
|
|
mainText={`Discover ${projectName}'s Innovative Features`}
|
|
subTitle={`Explore the powerful features of ${projectName} that redefine compliance management, offering unparalleled efficiency and accuracy for your business.`}
|
|
design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
|
|
/>
|
|
|
|
<PricingSection
|
|
projectName={'complinext'}
|
|
withBg={0}
|
|
features={pricing_features}
|
|
description={description}
|
|
/>
|
|
|
|
<ContactFormSection
|
|
projectName={'complinext'}
|
|
design={ContactFormDesigns.HIGHLIGHTED_DIVERSITY || ''}
|
|
image={['Contact form with email icon']}
|
|
mainText={`Reach Out to ${projectName} `}
|
|
subTitle={`Have questions about our products? Contact us anytime, and our team at ${projectName} will respond promptly to assist you.`}
|
|
/>
|
|
</main>
|
|
<WebSiteFooter projectName={'complinext'} pages={pages} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
WebSite.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|