feat: Implement core UI components, content management infrastructure, and a new landing page.

Author: zerox80

src/App.jsx

@@ -16,6 +16,8 @@ import TutorialDetail from './pages/TutorialDetail' // Individual tutorial view
 import DynamicPage from './pages/DynamicPage' // CMS-driven dynamic pages
 import PostDetail from './pages/PostDetail' // Individual blog post view
 import AdminDashboard from './pages/AdminDashboard' // Admin control panel
+import LandingPage from './pages/LandingPage' // New IT Landing Page
+
 function App() {
   return (
     <ErrorBoundary>
@@ -30,6 +32,14 @@ function App() {
                     <Routes>
                       <Route
                         path="/"
+                        element={
+                          <ErrorBoundary>
+                            <LandingPage />
+                          </ErrorBoundary>
+                        }
+                      />
+                      <Route
+                        path="/blog"
                         element={
                           <ErrorBoundary>
                             <Header />
@@ -93,9 +103,7 @@ function App() {
                         path="*"
                         element={
                           <ErrorBoundary>
-                            <Header />
-                            <Home />
-                            <Footer />
+                            <LandingPage />
                           </ErrorBoundary>
                         }
                       />

src/components/Footer.jsx

@@ -220,22 +220,22 @@ const Footer = () => {
     <footer className="bg-gray-900 text-gray-300 py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-          {}
+          { }
           <div>
             <div className="flex items-center space-x-3 mb-4">
               <div className="bg-gradient-to-r from-primary-600 to-primary-800 p-2 rounded-lg">
                 <BrandIcon className="w-6 h-6 text-white" />
               </div>
               <span className="text-xl font-bold text-white">
-                {footerContent?.brand?.title || footerContent?.brand?.name || 'Linux Tutorial'}
+                {footerContent?.brand?.title || footerContent?.brand?.name || 'IT Portal'}
               </span>
             </div>
             <p className="text-gray-400">
               {footerContent?.brand?.description ||
-                'Dein umfassendes Tutorial für Linux - von den Basics bis zu Advanced Techniken.'}
+                'Dein Portal für IT Security, Programmierung und Administration.'}
             </p>
           </div>
-          {}
+          { }
           <div>
             <h4 className="text-white font-semibold mb-4">Quick Links</h4>
             <ul className="space-y-2">
@@ -263,7 +263,7 @@ const Footer = () => {
               )}
             </ul>
           </div>
-          {}
+          { }
           <div>
             <h4 className="text-white font-semibold mb-4">Kontakt</h4>
             <div className="space-y-3">
@@ -303,10 +303,10 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        {}
+        { }
         <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
           <p className="text-gray-400 text-sm mb-4 md:mb-0">
-            {(footerContent?.bottom?.copyright || '© {year} Linux Tutorial. Alle Rechte vorbehalten.').replace(
+            {(footerContent?.bottom?.copyright || '© {year} IT Portal. Alle Rechte vorbehalten.').replace(
               '{year}',
               currentYear,
             )}
@@ -319,7 +319,7 @@ const Footer = () => {
             <div className="flex items-center space-x-1 text-sm">
               <span className="text-gray-400">Gemacht mit</span>
               <Heart className="w-4 h-4 text-red-500 fill-red-500" />
-              <span className="text-gray-400">für die Linux Community</span>
+              <span className="text-gray-400">für IT Professionals</span>
             </div>
           )}
         </div>

src/components/Header.jsx

@@ -11,7 +11,7 @@ import ThemeToggle from './ThemeToggle'
 import SearchBar from './SearchBar'
 const FALLBACK_NAV_ITEMS = [
   { id: 'home', label: 'Home', type: 'section' },
-  { id: 'grundlagen', label: 'Grundlagen', type: 'route', path: '/grundlagen' },
+  { id: 'blog', label: 'Blog', type: 'route', path: '/blog' },
 ]
 const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -163,7 +163,7 @@ const Header = () => {
     <header className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl shadow-soft sticky top-0 z-50 border-b border-gray-100/50 dark:border-gray-800/50">
       <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-20">
-          {}
+          { }
           <a
             href="/"
             onClick={handleBrandClick}
@@ -174,10 +174,10 @@ const Header = () => {
               <BrandIcon className="w-6 h-6" />
             </div>
             <span className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-              {headerContent?.brand?.name || 'Linux Tutorial'}
+              {headerContent?.brand?.name || 'IT Portal'}
             </span>
           </a>
-          {}
+          { }
           <div className="hidden md:flex items-center space-x-8">
             {computedNavItems.map((item, index) => {
               const href = getNavHref(item)
@@ -215,7 +215,7 @@ const Header = () => {
               <span>{isAuthenticated ? ctaContent.authLabel || 'Admin' : ctaContent.guestLabel || 'Login'}</span>
             </button>
           </div>
-          {}
+          { }
           <div className="md:hidden flex items-center space-x-2">
             <button
               onClick={() => setSearchOpen(true)}