ROMA0589 · Copilot · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025
diff --git a/Premocidade/next.config.js b/Premocidade/next.config.js
@@ -7,6 +7,10 @@ const nextConfig = {
     path: '',
   },
   trailingSlash: true,
+  // Improve SEO
+  poweredByHeader: false,
+  // Better compression
+  compress: true,
 }
 
 module.exports = nextConfig
diff --git a/Premocidade/package-lock.json b/Premocidade/package-lock.json
diff --git a/Premocidade/package.json b/Premocidade/package.json
@@ -15,9 +15,9 @@
   "dependencies": {
     "compression": "^1.8.0",
     "express": "^4.18.2",
-    "next": "^13.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^13.5.11",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^20.17.19",

diff --git a/Premocidade/src/components/ErrorBoundary.tsx b/Premocidade/src/components/ErrorBoundary.tsx
@@ -0,0 +1,62 @@
+import React, { Component, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+          padding: '2rem',
+          backgroundColor: '#1a1a2e',
+          color: 'white',
+          textAlign: 'center'
+        }}>
+          <h1>Algo deu errado 😔</h1>
+          <p>Desculpe, ocorreu um erro inesperado.</p>
+          <button 
+            onClick={() => this.setState({ hasError: false })}
+            style={{
+              padding: '0.5rem 1rem',
+              backgroundColor: '#4CAF50',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              marginTop: '1rem'
+            }}
+          >
+            Tentar novamente
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/Premocidade/src/components/Layout.tsx b/Premocidade/src/components/Layout.tsx
@@ -21,9 +21,15 @@ export default function Layout({ children, title = 'Premocidade' }: LayoutProps)
     <div className="layout">
       <Head>
         <title key="title">{pageTitle}</title>
-        <meta name="description" content="Programa de Premocidade da Aliança Espírita Evangélica" />
+        <meta name="description" content="Programa de Premocidade da Aliança Espírita Evangélica - Aprenda os ensinamentos de Jesus através de atividades interativas e dinâmicas" />
+        <meta name="keywords" content="premocidade, precamp, espiritismo, Jesus, educação espiritual, atividades educativas" />
+        <meta name="author" content="Aliança Espírita Evangélica" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <meta property="og:title" content={pageTitle} />
+        <meta property="og:description" content="Programa de Premocidade da Aliança Espírita Evangélica" />
+        <meta property="og:type" content="website" />
+        <link rel="icon" href="/favicon.png" type="image/png" sizes="any" />
+        <link rel="canonical" href="https://roma0589.github.io/Precamp/" />
       </Head>
 
       <header className="header">

diff --git a/Premocidade/src/components/Stars.tsx b/Premocidade/src/components/Stars.tsx
@@ -1,16 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const Stars = () => {
+  // Generate fixed positions to avoid server/client mismatch
+  const starPositions = useMemo(() => {
+    const positions = [];
+    // Use deterministic positions instead of Math.random()
+    for (let i = 0; i < 50; i++) {
+      const x = (i * 37) % 100; // Pseudo-random but deterministic
+      const y = (i * 23) % 100;
+      const delay = (i * 0.1) % 3;
+      positions.push({ x, y, delay });
+    }
+    return positions;
+  }, []);
+
   return (
     <div className="stars">
-      {[...Array(50)].map((_, i) => (
+      {starPositions.map((position, i) => (
         <div
           key={i}
           className={`star star--${i % 3 === 0 ? 'small' : i % 3 === 1 ? 'medium' : 'large'}`}
           style={{
-            left: `${Math.random() * 100}%`,
-            top: `${Math.random() * 100}%`,
-            animationDelay: `${Math.random() * 3}s`
+            left: `${position.x}%`,
+            top: `${position.y}%`,
+            animationDelay: `${position.delay}s`
           }}
         />
       ))}

diff --git a/Premocidade/src/pages/_app.tsx b/Premocidade/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import '../styles/globals.css'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import Head from 'next/head'
+import ErrorBoundary from '../components/ErrorBoundary'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter()
@@ -26,12 +27,12 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, [router])
 
   return (
-    <>
+    <ErrorBoundary>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <Component {...pageProps} />
-    </>
+    </ErrorBoundary>
   )
 }
 

diff --git a/Premocidade/src/pages/_document.tsx b/Premocidade/src/pages/_document.tsx
@@ -5,8 +5,9 @@ export default function Document() {
     <Html lang="pt-BR">
       <Head>
         <meta charSet="utf-8" />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favicon.png" type="image/png" />
         <meta name="theme-color" content="#000000" />
+        <meta name="mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
       </Head>