diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 17f559b..4a8b0e6 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,166 +1,305 @@ - import React, { useEffect, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; +import { useRouter } from 'next/router'; +import * as icon from '@mdi/js'; +import BaseIcon from '../components/BaseIcon'; 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'; +import { useAppDispatch, useAppSelector } from '../stores/hooks'; +import { fetch as fetchDevices } from '../stores/devices/devicesSlice'; +export default function LandingPage() { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { currentUser } = useAppSelector((state) => state.auth); + const { devices, loading: devicesLoading } = useAppSelector((state) => state.devices); + const darkMode = useAppSelector((state) => state.style.darkMode); -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('right'); - const textColor = useAppSelector((state) => state.style.linkColor); + const [activeTab, setActiveTab] = useState('pc'); - const title = 'App Draft' + useEffect(() => { + if (currentUser) { + dispatch(fetchDevices({ query: '?limit=5' })); + } + }, [currentUser, dispatch]); - // 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: 'Real-time Protection', + description: 'Continuous monitoring for malware, viruses, and suspicious activities across all your platforms.', + icon: icon.mdiShieldCheck, + color: 'text-emerald-500', + }, + { + title: 'Cross-Device Sync', + description: 'Connect your PC and Android devices seamlessly. Share security status and alerts instantly.', + icon: icon.mdiSync, + color: 'text-indigo-500', + }, + { + title: 'Remote Scan', + description: 'Trigger a full system scan on your PC directly from your Android phone, or vice-versa.', + icon: icon.mdiShieldSearch, + color: 'text-blue-500', + }, + { + title: 'Privacy Guard', + description: 'Protect your sensitive data with advanced encryption and privacy-focused browsing tools.', + icon: icon.mdiLock, + color: 'text-amber-500', + }, + ]; return ( -
+
- {getPageTitle('Starter Page')} + {getPageTitle('SecureGuard - Ultimate Multi-Device Security')} - -
- {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 - -
+ + {/* Hero Section */} +
+
+
+ + Now with advanced Android protection +
+

+ One security suite for all your devices. +

+

+ SecureGuard keeps your PC and phone protected with a unified dashboard. Connect, scan, and secure your digital life with one click. +

+
+ + +
+ + {/* Logged-in Device Quick View */} + {currentUser && ( +
+ +
+
+

Your Connected Devices

+

Managing {devices?.length || 0} active devices

+
+ +
+ + {devicesLoading ? ( +
+
+
+ ) : devices && devices.length > 0 ? ( +
+ {devices.slice(0, 3).map((device: any) => ( +
+
+ + {device.name} +
+
+ + {device.is_connected ? 'Connected' : 'Offline'} + + Ver: {device.installed_version || '1.0.0'} +
+
+ ))} +
+ ) : ( +
+ +

No devices connected yet.

+ +
+ )} + +
+ )} +
+
+ + {/* Feature Grid */} +
+
+
+

Complete protection, everywhere.

+

+ SecureGuard provides advanced security features tailored for both desktop and mobile environments. +

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

{feature.title}

+

+ {feature.description} +

+
+ ))} +
+
+
+ + {/* Cross-Platform Tabs */} +
+
+
+
+

Protect both PC and Android devices.

+

+ Install SecureGuard on your computer and mobile phone to enable cross-device security monitoring and remote management. +

+
+
+ + Real-time malware scanning +
+
+ + Remote device lock and wipe +
+
+ + Cross-platform threat alerts +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ SecureGuard - Desktop v2.4 +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + {/* Footer */} +
+
+
+
+ + SecureGuard +
+

+ Providing enterprise-grade security for individuals and families across all digital touchpoints. +

+
+
+

Product

+ +
+
+

Company

+ +
+
+

Subscribe

+

Get the latest security tips and news.

+
+ + +
+
+
+
+ © 2026 SecureGuard. All rights reserved. Built for PC and Android. +
+
); } -Starter.getLayout = function getLayout(page: ReactElement) { +LandingPage.getLayout = function getLayout(page: ReactElement) { return {page}; -}; - +}; \ No newline at end of file