First Commit

assets/css/theme-default.css

@@ -0,0 +1,249 @@
+/* Tema Default - SysCMS */
+
+/* Variáveis CSS */
+:root {
+    --primary-color: #667eea;
+    --secondary-color: #764ba2;
+    --font-family: 'Roboto', sans-serif;
+    --card-border-radius: 15px;
+    --button-border-radius: 50px;
+    --transition-duration: 0.3s;
+    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Estilos Globais */
+body {
+    font-family: var(--font-family);
+    line-height: 1.6;
+    color: #333;
+}
+
+/* Seção Hero */
+.hero-section {
+    background: var(--hero-gradient);
+    color: white;
+    padding: 100px 0;
+    margin-bottom: 50px;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    margin-bottom: 30px;
+    opacity: 0.9;
+}
+
+.btn-hero {
+    padding: 15px 30px;
+    font-size: 1.2rem;
+    border-radius: var(--button-border-radius);
+    font-weight: 600;
+    transition: all var(--transition-duration) ease;
+}
+
+.btn-hero:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+.btn-outline-hero {
+    background: transparent;
+    border: 2px solid white;
+    color: white;
+    margin-left: 15px;
+}
+
+.btn-outline-hero:hover {
+    background: white;
+    color: var(--primary-color);
+}
+
+/* Cards de Recursos */
+.feature-card {
+    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
+    border: none;
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
+    height: 100%;
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+}
+
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: var(--primary-color);
+}
+
+/* Seção de Estatísticas */
+.stats-section {
+    background-color: #f8f9fa;
+    padding: 80px 0;
+}
+
+.stat-item {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 10px;
+}
+
+/* Cabeçalho de Página */
+.page-header {
+    background: var(--hero-gradient);
+    color: white;
+    padding: 80px 0;
+    margin-bottom: 50px;
+}
+
+/* Seção Sobre */
+.about-section {
+    padding: 50px 0;
+}
+
+.team-member {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.team-member img {
+    width: 150px;
+    height: 150px;
+    border: 5px solid #fff;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+/* Cards de Serviços */
+.service-card {
+    transition: all var(--transition-duration) ease;
+    border: none;
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
+}
+
+.service-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+}
+
+.service-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: var(--primary-color);
+}
+
+/* Cards de Preços */
+.price-card {
+    border: none;
+    border-radius: var(--card-border-radius);
+    transition: all var(--transition-duration);
+}
+
+.price-card:hover {
+    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+    transform: scale(1.02);
+}
+
+.price-header {
+    background-color: #f8f9fa;
+    padding: 30px;
+    border-bottom: 1px solid #eee;
+}
+
+.price-body {
+    padding: 40px;
+}
+
+.price-amount {
+    font-size: 3rem;
+    font-weight: bold;
+    color: #333;
+}
+
+/* Seção de Títulos */
+.section-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-align: center;
+    position: relative;
+    padding-bottom: 15px;
+}
+
+.section-title:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 4px;
+    background: var(--primary-color);
+    border-radius: 2px;
+}
+
+.section-subtitle {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto 60px;
+    font-size: 1.1rem;
+    color: #6c757d;
+}
+
+/* Seção CTA */
+.cta-section {
+    background: var(--hero-gradient);
+    color: white;
+    padding: 80px 0;
+    text-align: center;
+}
+
+/* Classes Específicas do Tema */
+.theme-default {
+    /* Estilos específicos do tema podem ser adicionados aqui */
+}
+
+.page-home {
+    /* Estilos específicos para a página home */
+}
+
+.page-about {
+    /* Estilos específicos para a página sobre */
+}
+
+.page-services {
+    /* Estilos específicos para a página de serviços */
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.2rem;
+    }
+    
+    .section-title {
+        font-size: 2rem;
+    }
+    
+    .stat-number {
+        font-size: 2.5rem;
+    }
+}

assets/js/theme-default.js

@@ -0,0 +1,224 @@
+/**
+ * Default Theme - JavaScript
+ * SysCMS - Content Management System
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Theme initialization
+    initTheme();
+    
+    // Initialize animated counters
+    initAnimatedCounters();
+    
+    // Initialize scroll animations
+    initScrollAnimations();
+    
+    // Initialize hover effects
+    initHoverEffects();
+});
+
+/**
+ * Initializes the theme
+ */
+function initTheme() {
+    // Add theme class to body
+    document.body.classList.add('theme-default');
+    
+    // Check for custom theme configurations
+    applyThemeConfig();
+}
+
+/**
+ * Applies custom theme configurations
+ */
+function applyThemeConfig() {
+    // Here we could apply dynamic theme configurations
+    // For example, custom colors, fonts, etc.
+    
+    // Example of how to apply custom colors if they exist
+    const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
+    const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color');
+    
+    if (primaryColor && primaryColor.trim() !== '') {
+        document.documentElement.style.setProperty('--primary-color', primaryColor.trim());
+    }
+    
+    if (secondaryColor && secondaryColor.trim() !== '') {
+        document.documentElement.style.setProperty('--secondary-color', secondaryColor.trim());
+    }
+}
+
+/**
+ * Initializes animated counters for statistics
+ */
+function initAnimatedCounters() {
+    const counters = document.querySelectorAll('.stat-number');
+    const speed = 200;
+    
+    const countUp = function() {
+        counters.forEach(counter => {
+            const target = +counter.getAttribute('data-count');
+            const count = +counter.innerText;
+            const increment = target / speed;
+            
+            if (count < target) {
+                counter.innerText = Math.ceil(count + increment);
+                setTimeout(countUp, 10);
+            } else {
+                counter.innerText = target;
+            }
+        });
+    };
+    
+    // Trigger animation when statistics section is visible
+    const statsSection = document.querySelector('.stats-section');
+    if (statsSection) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    countUp();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        
+        observer.observe(statsSection);
+    }
+}
+
+/**
+ * Initializes scroll animations
+ */
+function initScrollAnimations() {
+    // Animation for elements appearing on scroll
+    const animatedElements = document.querySelectorAll('.feature-card, .service-card, .price-card, .team-member');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.1 });
+    
+    animatedElements.forEach(element => {
+        // Configure initial state
+        element.style.opacity = '0';
+        element.style.transform = 'translateY(20px)';
+        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+        
+        // Observe element
+        observer.observe(element);
+    });
+}
+
+/**
+ * Initializes hover effects
+ */
+function initHoverEffects() {
+    // Parallax effect in hero section
+    const heroSection = document.querySelector('.hero-section');
+    if (heroSection) {
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallax = heroSection.querySelector('img');
+            
+            if (parallax) {
+                const speed = 0.5;
+                parallax.style.transform = `translateY(${scrolled * speed}px)`;
+            }
+        });
+    }
+    
+    // Elevation effect on cards
+    const cards = document.querySelectorAll('.feature-card, .service-card, .price-card');
+    cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+        });
+    });
+}
+
+/**
+ * Utility function to animate elements
+ */
+function animateElement(element, animation, duration = 1000) {
+    element.style.animation = `${animation} ${duration}ms ease-in-out`;
+    
+    setTimeout(() => {
+        element.style.animation = '';
+    }, duration);
+}
+
+/**
+ * Utility function to add class with delay
+ */
+function addClassWithDelay(element, className, delay = 100) {
+    setTimeout(() => {
+        element.classList.add(className);
+    }, delay);
+}
+
+/**
+ * Function to create background particles (optional)
+ */
+function createBackgroundParticles() {
+    const particlesContainer = document.createElement('div');
+    particlesContainer.className = 'particles-container';
+    particlesContainer.style.position = 'fixed';
+    particlesContainer.style.top = '0';
+    particlesContainer.style.left = '0';
+    particlesContainer.style.width = '100%';
+    particlesContainer.style.height = '100%';
+    particlesContainer.style.pointerEvents = 'none';
+    particlesContainer.style.zIndex = '-1';
+    particlesContainer.style.overflow = 'hidden';
+    
+    // Create particles
+    for (let i = 0; i < 50; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+        particle.style.position = 'absolute';
+        particle.style.width = Math.random() * 5 + 'px';
+        particle.style.height = particle.style.width;
+        particle.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+        particle.style.borderRadius = '50%';
+        particle.style.left = Math.random() * 100 + '%';
+        particle.style.top = Math.random() * 100 + '%';
+        particle.style.opacity = Math.random() * 0.5 + 0.2;
+        
+        // Float animation
+        const duration = Math.random() * 20 + 10;
+        const delay = Math.random() * 5;
+        particle.style.animation = `float ${duration}s ${delay}s infinite ease-in-out`;
+        
+        particlesContainer.appendChild(particle);
+    }
+    
+    // Add CSS for float animation
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes float {
+            0%, 100% { transform: translateY(0) translateX(0); }
+            25% { transform: translateY(-20px) translateX(10px); }
+            50% { transform: translateY(10px) translateX(-10px); }
+            75% { transform: translateY(-10px) translateX(20px); }
+        }
+    `;
+    document.head.appendChild(style);
+    
+    document.body.appendChild(particlesContainer);
+}
+
+// Export functions for global use
+window.ThemeDefault = {
+    animateElement,
+    addClassWithDelay,
+    createBackgroundParticles
+};