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, FeaturesDesigns, GalleryPortfolioDesigns, AboutUsDesigns, ContactFormDesigns, } from '../components/WebPageComponents/designs'; import HeroSection from '../components/WebPageComponents/HeroComponent'; import FeaturesSection from '../components/WebPageComponents/FeaturesComponent'; import GalleryPortfolioSection from '../components/WebPageComponents/GalleryPortfolioComponent'; import { getMultiplePexelsImages } from '../helpers/pexels'; import AboutUsSection from '../components/WebPageComponents/AboutUsComponent'; import ContactFormSection from '../components/WebPageComponents/ContactFormComponent'; export default function WebSite() { const cardsStyle = useAppSelector((state) => state.style.cardsStyle); const bgColor = useAppSelector((state) => state.style.bgLayoutColor); const projectName = 'Tucanus9050'; useEffect(() => { const darkElement = document.querySelector('body .dark'); if (darkElement) { darkElement.classList.remove('dark'); } }, []); const pages = [ { href: '/home', label: 'home', }, { href: '/about', label: 'about', }, { href: '/contact', label: 'contact', }, { href: '/portfolio_gallery', label: 'portfolio_gallery', }, ]; const features_points = [ { name: 'Task Management', description: 'Efficiently manage and track tasks with real-time updates. Keep everyone on the same page and ensure timely completion of projects.', icon: 'mdiClipboardCheck', }, { name: 'AI Chatbot Assistance', description: 'Get instant help and guidance with our AI-powered chatbot. Enhance your learning and problem-solving with smart assistance.', icon: 'mdiRobot', }, { name: 'Scouting System', description: 'Collect and analyze match data with ease. Our interactive scouting system provides valuable insights and rankings for strategic planning.', icon: 'mdiChartLine', }, ]; const [images, setImages] = useState([]); const pexelsQueriesWebSite = [ 'Team building the robot', 'Robotics competition excitement', 'Innovative robot design process', 'Team brainstorming session', 'Celebrating competition success', ]; useEffect(() => { const fetchImages = async () => { try { const images = await getMultiplePexelsImages(pexelsQueriesWebSite); const formattedImages = (images || []).map((image) => ({ src: image?.src || undefined, photographer: image?.photographer || undefined, photographer_url: image?.photographer_url || undefined, })); setImages(formattedImages); } catch (error) { console.error('Error fetching images:', error); } }; fetchImages(); }, []); return (