Fix page loading issue and layout display

lovable-dev[bot] · lovable-dev[bot] · commit 2016df69372f · 2025-05-01T17:23:54.000Z
This update addresses the problem where pages no longer load content and only show a large, poorly positioned logo and menu. The fix involves correcting the layout and ensuring the content loads properly.
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -25,7 +26,7 @@
     <link rel="icon" href="/public/lovable-uploads/ALogo.png" type="image/x-icon" />
   </head>
  
-  <body style="background-image: url('/public/lovable-uploads/ALogo.png'); background-size: cover; background-position: center;">
+  <body>
     <!-- Root Element -->
     <div id="root"></div>
  
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,29 +1,34 @@
-import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout';
 import Index from './pages/Index';
 import About from './pages/About';
-import Contact from './pages/Contact';
 import Academy from './pages/Academy';
+import AlienTrip from './pages/AlienTrip';
 import Clubs from './pages/Clubs';
 import CoNetWorKing from './pages/CoNetWorKing';
-import AlienTrip from './pages/AlienTrip';
+import Contact from './pages/Contact';
 import NotFound from './pages/NotFound';
+import './index.css';
+import './global.css';
 
-const App: React.FC = () => {
+function App() {
   return (
-    <BrowserRouter>
+    <Router>
       <Routes>
-        <Route path="/" element={<Index />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/alien-trip" element={<AlienTrip />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="/academy" element={<Academy />} />
-        <Route path="/clubs" element={<Clubs />} />
-        <Route path="/conetworking" element={<CoNetWorKing />} />
-        <Route path="*" element={<NotFound />} />
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Index />} />
+          <Route path="about" element={<About />} />
+          <Route path="academy" element={<Academy />} />
+          <Route path="alien-trip" element={<AlienTrip />} />
+          <Route path="clubs" element={<Clubs />} />
+          <Route path="conetworking" element={<CoNetWorKing />} />
+          <Route path="contact" element={<Contact />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
       </Routes>
-    </BrowserRouter>
+    </Router>
   );
-};
+}
 
 export default App;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import '../global.css';
+
+const Layout: React.FC = () => {
+  return (
+    <>
+      <Header />
+      <div className="content-container">
+        <img 
+          src="/public/lovable-uploads/ALogo.png" 
+          alt="AlienFlowSpace Logo" 
+          className="background-logo" 
+        />
+        <div className="container">
+          <Outlet />
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/global.css b/src/global.css
@@ -0,0 +1,47 @@
+
+/* Global styles */
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #000;
+  color: #fff;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.background-logo {
+  position: fixed;
+  bottom: 10%;
+  right: 5%;
+  width: 250px;
+  height: 250px;
+  opacity: 0.2;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Layout fixes */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Make sure content is visible */
+.content-container {
+  flex: 1;
+  z-index: 1;
+  position: relative;
+}
