53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Routes, Route } from 'react-router-dom';
|
|
import Header from './components/Header';
|
|
import Footer from './components/Footer';
|
|
import ScrollToTop from './components/ScrollToTop';
|
|
|
|
// Page components
|
|
import HomePage from './pages/HomePage';
|
|
import FeaturesPage from './pages/FeaturesPage';
|
|
import PricingPage from './pages/PricingPage';
|
|
import AgenciesPage from './pages/AgenciesPage';
|
|
import ComparePage from './pages/ComparePage';
|
|
import BlogPage from './pages/BlogPage';
|
|
import ContactPage from './pages/ContactPage';
|
|
|
|
export default function App() {
|
|
const [theme, setTheme] = useState(() => {
|
|
return localStorage.getItem('crawlerx-theme') ||
|
|
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('crawlerx-theme', theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
|
|
};
|
|
|
|
return (
|
|
<div className="site-wrapper">
|
|
<ScrollToTop />
|
|
<Header theme={theme} toggleTheme={toggleTheme} />
|
|
|
|
<Routes>
|
|
<Route path="/" element={<HomePage />} />
|
|
<Route path="/features" element={<FeaturesPage />} />
|
|
<Route path="/pricing" element={<PricingPage />} />
|
|
<Route path="/agencies" element={<AgenciesPage />} />
|
|
<Route path="/compare" element={<ComparePage />} />
|
|
<Route path="/compare/semrush-alternative" element={<ComparePage />} />
|
|
<Route path="/blog" element={<BlogPage />} />
|
|
<Route path="/contact" element={<ContactPage />} />
|
|
{/* Fallback route */}
|
|
<Route path="*" element={<HomePage />} />
|
|
</Routes>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|