diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..8fb687a --- /dev/null +++ b/.htaccess @@ -0,0 +1,100 @@ +# Yunbaoo CN - Configuration Apache +# Optimisation des performances et sécurité + +# Compression GZIP + + AddOutputFilterByType DEFLATE text/plain + AddOutputFilterByType DEFLATE text/html + AddOutputFilterByType DEFLATE text/xml + AddOutputFilterByType DEFLATE text/css + AddOutputFilterByType DEFLATE application/xml + AddOutputFilterByType DEFLATE application/xhtml+xml + AddOutputFilterByType DEFLATE application/rss+xml + AddOutputFilterByType DEFLATE application/javascript + AddOutputFilterByType DEFLATE application/x-javascript + AddOutputFilterByType DEFLATE application/json + AddOutputFilterByType DEFLATE font/truetype + AddOutputFilterByType DEFLATE font/opentype + AddOutputFilterByType DEFLATE application/vnd.ms-fontobject + AddOutputFilterByType DEFLATE image/svg+xml + + +# Cache des fichiers statiques + + ExpiresActive On + ExpiresByType text/css "access plus 1 year" + ExpiresByType application/javascript "access plus 1 year" + ExpiresByType image/png "access plus 1 year" + ExpiresByType image/jpg "access plus 1 year" + ExpiresByType image/jpeg "access plus 1 year" + ExpiresByType image/gif "access plus 1 year" + ExpiresByType image/svg+xml "access plus 1 year" + ExpiresByType font/woff "access plus 1 year" + ExpiresByType font/woff2 "access plus 1 year" + ExpiresByType font/ttf "access plus 1 year" + ExpiresByType font/eot "access plus 1 year" + ExpiresByType text/html "access plus 1 hour" + + +# Headers de cache + + # Cache CSS et JS + + Header set Cache-Control "max-age=31536000, public, immutable" + + + # Cache images + + Header set Cache-Control "max-age=31536000, public, immutable" + + + # Cache fonts + + Header set Cache-Control "max-age=31536000, public, immutable" + + + # Sécurité + Header always set X-Content-Type-Options nosniff + Header always set X-Frame-Options DENY + Header always set X-XSS-Protection "1; mode=block" + Header always set Referrer-Policy "strict-origin-when-cross-origin" + Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()" + + +# Redirection HTTPS (si SSL disponible) + + RewriteEngine On + + # Forcer HTTPS + # RewriteCond %{HTTPS} !=on + # RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] + + # Redirection vers index.html pour SPA + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule ^(.*)$ index.html [QSA,L] + + +# Types MIME +AddType application/font-woff2 .woff2 +AddType application/font-woff .woff +AddType application/vnd.ms-fontobject .eot +AddType font/ttf .ttf +AddType font/otf .otf + +# Bloquer l'accès aux fichiers sensibles + + Order Allow,Deny + Deny from all + + + + Order Allow,Deny + Deny from all + + +# Désactiver l'affichage des répertoires +Options -Indexes + +# Page d'erreur personnalisée +ErrorDocument 404 /index.html \ No newline at end of file diff --git a/README.md b/README.md index 7289428..d4a11af 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,119 @@ -

HELIOS PROJECT - SPEEDOMETER

+# Yunbaoo CN - Site Web Officiel -### +Une page d'accueil moderne et exceptionnelle pour Yunbaoo CN, votre partenaire digital pour conquérir le marché chinois. -
- stats graph - languages graph -
+## 🌟 Caractéristiques -### +### Design & UX +- **Design moderne et élégant** avec animations fluides +- **Interface responsive** optimisée pour tous les appareils +- **Expérience utilisateur premium** avec micro-interactions +- **Performances optimisées** pour un chargement rapide -
- cplusplus logo - - arduino logo -
+### Fonctionnalités Avancées +- **Navigation intelligente** avec scroll effects +- **Animations CSS et JavaScript** sophistiquées +- **Graphiques interactifs** avec Chart.js +- **Formulaire de contact** avec validation en temps réel +- **Système de notifications** élégant +- **Effets de parallaxe** et particules flottantes -### +### Sections Principales +1. **Hero Section** - Présentation impactante avec statistiques +2. **Services** - Nos expertises digitales +3. **Solutions** - Avantages concurrentiels interactifs +4. **Cas d'Études** - Histoires de réussite clients +5. **Contact** - Formulaire professionnel - +## 🚀 Technologies Utilisées -### +- **HTML5** - Structure sémantique moderne +- **CSS3** - Styles avancés avec variables CSS +- **JavaScript ES6+** - Interactions dynamiques +- **Chart.js** - Graphiques interactifs +- **Font Awesome** - Icônes vectorielles +- **Google Fonts** - Typographie premium (Inter) + +## 📱 Responsive Design + +Le site est entièrement responsive et optimisé pour : +- 💻 Desktop (1200px+) +- 📱 Tablet (768px - 1199px) +- 📱 Mobile (320px - 767px) + +## ⚡ Performances + +- **Lazy Loading** pour les images +- **Optimisation des animations** avec Intersection Observer +- **Gestion des événements** optimisée +- **Code modulaire** et maintenable + +## 🎨 Palette de Couleurs + +```css +Primary: #2563eb (Bleu) +Secondary: #7c3aed (Violet) +Accent: #f59e0b (Orange) +Success: #10b981 (Vert) +``` + +## 📦 Structure des Fichiers + +``` +├── index.html # Page principale +├── styles.css # Styles CSS +├── script.js # JavaScript +└── README.md # Documentation +``` + +## 🛠️ Installation & Utilisation + +1. **Cloner ou télécharger** les fichiers +2. **Ouvrir index.html** dans un navigateur moderne +3. **Personnaliser** le contenu selon vos besoins + +### Développement Local + +Pour un développement optimal, utilisez un serveur local : + +```bash +# Avec Python +python -m http.server 8000 + +# Avec Node.js (http-server) +npx http-server + +# Avec PHP +php -S localhost:8000 +``` + +## 🎯 Optimisations SEO + +- **Meta tags** optimisés +- **Structure HTML** sémantique +- **Performance** optimisée +- **Accessibilité** respectée + +## 📧 Contact & Support + +Pour toute question ou support technique : +- **Email** : info@yunbaoo-cn.com +- **Téléphone** : +86 755 8696 7625 + +## 🔄 Mises à Jour + +Le site est conçu pour être facilement maintenable : +- Code modulaire et commenté +- CSS organisé avec variables +- JavaScript avec fonctions réutilisables + +## 📄 Licence + +© 2024 Yunbaoo CN. Tous droits réservés. + +--- + +**Développé avec ❤️ pour Yunbaoo CN** diff --git a/index.html b/index.html new file mode 100644 index 0000000..6fa837b --- /dev/null +++ b/index.html @@ -0,0 +1,629 @@ + + + + + + Yunbaoo CN - Votre Partenaire Digital en Chine + + + + + + + + + +
+
+
+
+
+
+

+ Conquérez le + Marché Chinois + avec Excellence +

+

+ Votre passerelle vers le succès digital en Chine. Nous transformons votre vision en résultats mesurables grâce à notre expertise Baidu et notre connaissance approfondie du marché chinois. +

+
+ + Démarrer Maintenant + + + + + Découvrir Nos Solutions + +
+
+
+
2B+
+
Impressions Générées
+
+
+
500+
+
Entreprises Accompagnées
+
+
+
95%
+
Taux de Satisfaction
+
+
+
+
+
+
+ + +350% ROI +
+
+ + 1M+ Utilisateurs +
+
+ + Croissance Explosive +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+ Nos Expertises +

Solutions Digitales Complètes

+

+ De la stratégie à l'exécution, nous maîtrisons tous les aspects du marketing digital chinois +

+
+
+
+
+ +
+

Publicité Baidu

+

+ Maximisez votre visibilité sur le moteur de recherche #1 en Chine avec nos campagnes optimisées. +

+
    +
  • Recherche & Mots-clés
    • +
  • Display & Bannières
    • +
  • Optimisation ROI
    • +
+ + En savoir plus + + +
+ +
+
Populaire
+
+ +
+

Marketing Intégré

+

+ Stratégie 360° combinant tous les canaux digitaux chinois pour un impact maximum. +

+
    +
  • WeChat Marketing
    • +
  • Weibo Promotion
    • +
  • E-commerce (Tmall/JD)
    • +
  • Influenceurs KOL
    • +
+ + Découvrir + + +
+ +
+
+ +
+

Analytics & Data

+

+ Prenez des décisions éclairées grâce à nos analyses approfondies et tableaux de bord en temps réel. +

+
    +
  • Tracking Avancé
    • +
  • Rapports Personnalisés
    • +
  • BI & Insights
    • +
+ + Explorer + + +
+
+
+
+ + +
+
+
+ Pourquoi Yunbaoo CN +

Votre Avantage Concurrentiel

+
+
+
+
+
+
+ +
+
+

Expertise Locale

+

Équipe bilingue basée en Chine avec une connaissance approfondie du marché

+
+
+
+
+
+
+ +
+
+

Technologie IA

+

Outils propriétaires d'optimisation automatique des campagnes

+
+
+
+
+
+
+ +
+
+

Résultats Prouvés

+

Track record de +350% d'amélioration ROI en moyenne

+
+
+
+
+
+
+ +
+
+

Support 24/7

+

Assistance continue dans votre fuseau horaire

+
+
+
+
+
+
+
+
+

Notre Équipe Locale

+
+
+
+ 15+ + Experts Locaux +
+
+ 8 + Années d'Expérience +
+
+ 3 + Bureaux en Chine +
+
+
+
+
+
+
+

Intelligence Artificielle

+
+
+
+ + Auto-optimisation +
+
+ + Prédiction Tendances +
+
+ + Ajustement Temps Réel +
+
+
+
+
+
+
+

Résultats Exceptionnels

+
+
+ +
+
+
+
+
+
+

Support Global

+
+
+
+ + Réponse < 2h +
+
+ + Multi-fuseaux +
+
+ + Chat en Direct +
+
+
+
+
+
+
+
+ + +
+
+
+ Succès Clients +

Histoires de Réussite

+

+ Découvrez comment nous avons transformé les ambitions de nos clients en succès mesurables +

+
+
+
+
+
+
E-commerce
+
+
+
+

Brand Fashion International

+

+ Expansion réussie d'une marque de mode européenne sur le marché chinois +

+
+
+ +450% + Ventes +
+
+ 2.3M + Impressions +
+
+ 15% + Conversion +
+
+ + Lire l'étude complète + + +
+
+ +
+
+
+
Technology
+
+
+
+

TechStart Innovation

+

+ Lancement d'application mobile avec acquisition massive d'utilisateurs +

+
+
+ 1.2M + Downloads +
+
+ €2.8 + CPA +
+
+ 28% + Rétention +
+
+ + Voir les détails + + +
+
+ +
+
+
+
Finance
+
+
+
+

FinServ Pro

+

+ Génération de leads qualifiés pour services financiers B2B +

+
+
+ 8,500 + Leads +
+
+ 32% + Qualification +
+
+ €45 + CPL +
+
+ + Découvrir la stratégie + + +
+
+
+
+
+ + +
+
+
+
+

Prêt à Conquérir la Chine ?

+

+ Commencez votre transformation digitale dès aujourd'hui avec une consultation gratuite +

+
+
+ + Consultation Gratuite + + +
+ Réponse en 24h + Sans engagement +
+
+
+
+
+ + +
+
+
+
+
+ Contactez-nous +

Démarrons Ensemble

+

+ Notre équipe d'experts est prête à transformer votre vision en succès mesurable +

+
+
+
+
+ +
+
+

Bureaux Mondiaux

+

Shenzhen • Hong Kong • Londres

+
+
+
+
+ +
+
+

Téléphone

+

+86 755 8696 7625

+
+
+
+
+ +
+
+

Email

+

info@yunbaoo-cn.com

+
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..88dddf4 --- /dev/null +++ b/robots.txt @@ -0,0 +1,20 @@ +User-agent: * +Allow: / + +# Sitemap +Sitemap: https://www.yunbaoo-cn.com/sitemap.xml + +# Disallow sensitive files +Disallow: /*.log$ +Disallow: /.htaccess +Disallow: /admin/ +Disallow: /private/ + +# Allow CSS and JS +Allow: /styles.css +Allow: /script.js +Allow: /*.css$ +Allow: /*.js$ + +# Crawl delay (optional) +Crawl-delay: 1 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d45e830 --- /dev/null +++ b/script.js @@ -0,0 +1,635 @@ +// DOM Elements +const navbar = document.querySelector('.navbar'); +const hamburger = document.querySelector('.hamburger'); +const navMenu = document.querySelector('.nav-menu'); +const solutionItems = document.querySelectorAll('.solution-item'); +const solutionContents = document.querySelectorAll('.solution-content'); +const contactForm = document.getElementById('contactForm'); + +// Navigation functionality +function initNavigation() { + // Navbar scroll effect + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + + // Mobile menu toggle + if (hamburger && navMenu) { + hamburger.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + + // Close mobile menu when clicking on a link + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + }); + }); + } + + // Smooth scrolling for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const offsetTop = target.offsetTop - 70; // Account for fixed navbar + window.scrollTo({ + top: offsetTop, + behavior: 'smooth' + }); + } + }); + }); +} + +// Solutions section interactivity +function initSolutions() { + if (solutionItems.length === 0) return; + + solutionItems.forEach((item, index) => { + item.addEventListener('click', () => { + // Remove active class from all items and contents + solutionItems.forEach(si => si.classList.remove('active')); + solutionContents.forEach(sc => sc.classList.remove('active')); + + // Add active class to clicked item and corresponding content + item.classList.add('active'); + const targetContent = document.querySelector(`[data-solution="${item.dataset.solution}"]`); + if (targetContent) { + targetContent.classList.add('active'); + } + }); + }); + + // Auto-cycle solutions every 5 seconds + let currentSolution = 0; + setInterval(() => { + solutionItems.forEach(si => si.classList.remove('active')); + solutionContents.forEach(sc => sc.classList.remove('active')); + + solutionItems[currentSolution].classList.add('active'); + const targetContent = document.querySelector(`[data-solution="${solutionItems[currentSolution].dataset.solution}"]`); + if (targetContent) { + targetContent.classList.add('active'); + } + + currentSolution = (currentSolution + 1) % solutionItems.length; + }, 5000); +} + +// Initialize Charts +function initCharts() { + // Hero Chart + const heroChart = document.getElementById('heroChart'); + if (heroChart) { + new Chart(heroChart, { + type: 'line', + data: { + labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'], + datasets: [{ + label: 'ROI %', + data: [120, 180, 250, 320, 390, 450], + borderColor: '#2563eb', + backgroundColor: 'rgba(37, 99, 235, 0.1)', + borderWidth: 3, + fill: true, + tension: 0.4 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false + } + }, + scales: { + x: { + display: false + }, + y: { + display: false + } + }, + elements: { + point: { + radius: 0 + } + } + } + }); + } + + // Results Chart + const resultsChart = document.getElementById('resultsChart'); + if (resultsChart) { + new Chart(resultsChart, { + type: 'doughnut', + data: { + labels: ['Conversions', 'Impressions', 'Clics'], + datasets: [{ + data: [350, 250, 150], + backgroundColor: [ + '#f59e0b', + '#10b981', + '#8b5cf6' + ], + borderWidth: 0 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + color: '#ffffff', + usePointStyle: true, + padding: 20 + } + } + } + } + }); + } +} + +// Intersection Observer for animations +function initAnimations() { + const animatedElements = document.querySelectorAll('.service-card, .case-card, .solution-item'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + animatedElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(30px)'; + el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; + observer.observe(el); + }); + + // Counter animation + const counters = document.querySelectorAll('.stat-number, .result-number'); + const counterObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounter(entry.target); + counterObserver.unobserve(entry.target); + } + }); + }); + + counters.forEach(counter => { + counterObserver.observe(counter); + }); +} + +// Counter animation function +function animateCounter(element) { + const target = element.textContent; + const number = parseFloat(target.replace(/[^0-9.]/g, '')); + const suffix = target.replace(/[0-9.]/g, ''); + const duration = 2000; + const step = number / (duration / 16); + let current = 0; + + const timer = setInterval(() => { + current += step; + if (current >= number) { + current = number; + clearInterval(timer); + } + + if (suffix.includes('%')) { + element.textContent = Math.floor(current) + '%'; + } else if (suffix.includes('M')) { + element.textContent = (current / 1000000).toFixed(1) + 'M'; + } else if (suffix.includes('K')) { + element.textContent = (current / 1000).toFixed(0) + 'K'; + } else if (suffix.includes('B')) { + element.textContent = (current / 1000000000).toFixed(1) + 'B'; + } else if (suffix.includes('€')) { + element.textContent = '€' + current.toFixed(1); + } else if (suffix.includes('+')) { + element.textContent = Math.floor(current) + '+'; + } else { + element.textContent = Math.floor(current).toLocaleString(); + } + }, 16); +} + +// Contact form handling +function initContactForm() { + if (!contactForm) return; + + contactForm.addEventListener('submit', async (e) => { + e.preventDefault(); + + const submitButton = contactForm.querySelector('button[type="submit"]'); + const originalText = submitButton.innerHTML; + + // Show loading state + submitButton.innerHTML = ' Envoi en cours...'; + submitButton.disabled = true; + + // Simulate form submission (replace with actual API call) + try { + await new Promise(resolve => setTimeout(resolve, 2000)); + + // Show success message + submitButton.innerHTML = ' Message Envoyé!'; + submitButton.style.background = '#10b981'; + + // Reset form + contactForm.reset(); + + // Show success notification + showNotification('Votre message a été envoyé avec succès! Nous vous contacterons sous 24h.', 'success'); + + // Reset button after 3 seconds + setTimeout(() => { + submitButton.innerHTML = originalText; + submitButton.disabled = false; + submitButton.style.background = ''; + }, 3000); + + } catch (error) { + // Show error message + submitButton.innerHTML = ' Erreur'; + submitButton.style.background = '#ef4444'; + showNotification('Une erreur est survenue. Veuillez réessayer.', 'error'); + + // Reset button after 3 seconds + setTimeout(() => { + submitButton.innerHTML = originalText; + submitButton.disabled = false; + submitButton.style.background = ''; + }, 3000); + } + }); + + // Form validation + const inputs = contactForm.querySelectorAll('input[required], textarea[required]'); + inputs.forEach(input => { + input.addEventListener('blur', validateField); + input.addEventListener('input', clearFieldError); + }); +} + +// Field validation +function validateField(e) { + const field = e.target; + const value = field.value.trim(); + + // Remove existing error styles + field.classList.remove('error'); + + // Validate required fields + if (field.hasAttribute('required') && !value) { + showFieldError(field, 'Ce champ est requis'); + return false; + } + + // Validate email + if (field.type === 'email' && value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(value)) { + showFieldError(field, 'Veuillez entrer une adresse email valide'); + return false; + } + } + + return true; +} + +function showFieldError(field, message) { + field.classList.add('error'); + + // Remove existing error message + const existingError = field.parentNode.querySelector('.error-message'); + if (existingError) { + existingError.remove(); + } + + // Add error message + const errorDiv = document.createElement('div'); + errorDiv.className = 'error-message'; + errorDiv.textContent = message; + errorDiv.style.color = '#ef4444'; + errorDiv.style.fontSize = '0.875rem'; + errorDiv.style.marginTop = '0.25rem'; + + field.parentNode.appendChild(errorDiv); +} + +function clearFieldError(e) { + const field = e.target; + field.classList.remove('error'); + + const errorMessage = field.parentNode.querySelector('.error-message'); + if (errorMessage) { + errorMessage.remove(); + } +} + +// Notification system +function showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + notification.innerHTML = ` +
+ + ${message} + +
+ `; + + // Add styles + notification.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#2563eb'}; + color: white; + padding: 1rem 1.5rem; + border-radius: 0.5rem; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + z-index: 9999; + transform: translateX(100%); + transition: transform 0.3s ease-out; + max-width: 400px; + `; + + notification.querySelector('.notification-content').style.cssText = ` + display: flex; + align-items: center; + gap: 0.75rem; + `; + + notification.querySelector('.notification-close').style.cssText = ` + background: none; + border: none; + color: white; + cursor: pointer; + font-size: 1rem; + opacity: 0.8; + transition: opacity 0.2s; + `; + + document.body.appendChild(notification); + + // Animate in + setTimeout(() => { + notification.style.transform = 'translateX(0)'; + }, 100); + + // Close functionality + const closeBtn = notification.querySelector('.notification-close'); + closeBtn.addEventListener('click', () => { + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + notification.remove(); + }, 300); + }); + + // Auto remove after 5 seconds + setTimeout(() => { + if (notification.parentNode) { + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + notification.remove(); + }, 300); + } + }, 5000); +} + +// Floating particles animation +function initFloatingParticles() { + const particlesContainer = document.querySelector('.floating-particles'); + if (!particlesContainer) return; + + for (let i = 0; i < 50; i++) { + const particle = document.createElement('div'); + particle.className = 'particle'; + particle.style.cssText = ` + position: absolute; + width: ${Math.random() * 4 + 2}px; + height: ${Math.random() * 4 + 2}px; + background: rgba(255, 255, 255, ${Math.random() * 0.3 + 0.1}); + border-radius: 50%; + left: ${Math.random() * 100}%; + top: ${Math.random() * 100}%; + animation: floatParticle ${Math.random() * 20 + 10}s infinite linear; + animation-delay: ${Math.random() * 20}s; + `; + + particlesContainer.appendChild(particle); + } + + // Add keyframes for particle animation + const style = document.createElement('style'); + style.textContent = ` + @keyframes floatParticle { + 0% { + transform: translateY(0px) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + transform: translateY(-100vh) rotate(360deg); + opacity: 0; + } + } + `; + document.head.appendChild(style); +} + +// Parallax effect +function initParallax() { + const parallaxElements = document.querySelectorAll('.floating-card'); + + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const rate = scrolled * -0.5; + + parallaxElements.forEach((el, index) => { + const speed = (index + 1) * 0.2; + el.style.transform = `translateY(${rate * speed}px)`; + }); + }); +} + +// Smooth reveal animations +function initRevealAnimations() { + const revealElements = document.querySelectorAll('.section-header, .hero-content, .cta-content'); + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1 + }); + + revealElements.forEach((el, index) => { + el.style.cssText = ` + opacity: 0; + transform: translateY(50px); + transition: opacity 0.8s ease-out ${index * 0.1}s, transform 0.8s ease-out ${index * 0.1}s; + `; + revealObserver.observe(el); + }); + + // Add revealed class styles + const style = document.createElement('style'); + style.textContent = ` + .revealed { + opacity: 1 !important; + transform: translateY(0) !important; + } + `; + document.head.appendChild(style); +} + +// Mouse cursor effects +function initCursorEffects() { + const cursor = document.createElement('div'); + cursor.className = 'custom-cursor'; + cursor.style.cssText = ` + position: fixed; + width: 20px; + height: 20px; + background: rgba(37, 99, 235, 0.5); + border-radius: 50%; + pointer-events: none; + z-index: 9999; + transform: translate(-50%, -50%); + transition: all 0.1s ease-out; + mix-blend-mode: difference; + `; + document.body.appendChild(cursor); + + document.addEventListener('mousemove', (e) => { + cursor.style.left = e.clientX + 'px'; + cursor.style.top = e.clientY + 'px'; + }); + + // Hover effects + const hoverElements = document.querySelectorAll('a, button, .service-card, .case-card'); + hoverElements.forEach(el => { + el.addEventListener('mouseenter', () => { + cursor.style.transform = 'translate(-50%, -50%) scale(2)'; + cursor.style.background = 'rgba(245, 158, 11, 0.7)'; + }); + + el.addEventListener('mouseleave', () => { + cursor.style.transform = 'translate(-50%, -50%) scale(1)'; + cursor.style.background = 'rgba(37, 99, 235, 0.5)'; + }); + }); +} + +// Performance optimization +function initPerformanceOptimizations() { + // Lazy loading for images + const images = document.querySelectorAll('img[data-src]'); + const imageObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + imageObserver.unobserve(img); + } + }); + }); + + images.forEach(img => { + imageObserver.observe(img); + }); + + // Debounce scroll events + let scrollTimeout; + window.addEventListener('scroll', () => { + if (scrollTimeout) { + clearTimeout(scrollTimeout); + } + scrollTimeout = setTimeout(() => { + // Scroll events here + }, 10); + }); +} + +// Initialize everything when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + console.log('🚀 Yunbaoo CN - Initializing...'); + + initNavigation(); + initSolutions(); + initContactForm(); + initAnimations(); + initFloatingParticles(); + initParallax(); + initRevealAnimations(); + initCursorEffects(); + initPerformanceOptimizations(); + + // Initialize charts after a short delay to ensure Canvas elements are ready + setTimeout(() => { + initCharts(); + }, 500); + + console.log('✅ Yunbaoo CN - All systems ready!'); +}); + +// Handle page visibility changes +document.addEventListener('visibilitychange', () => { + if (document.hidden) { + // Pause animations when page is not visible + document.body.style.animationPlayState = 'paused'; + } else { + // Resume animations when page becomes visible + document.body.style.animationPlayState = 'running'; + } +}); + +// Error handling +window.addEventListener('error', (e) => { + console.error('JS Error:', e.error); + // Silently handle errors in production +}); + +// Export functions for potential external use +window.YunbaooApp = { + showNotification, + animateCounter, + validateField +}; \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..b14249a --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,47 @@ + + + + + + https://www.yunbaoo-cn.com/ + 2024-01-15 + weekly + 1.0 + + + + + https://www.yunbaoo-cn.com/#services + 2024-01-15 + monthly + 0.8 + + + + + https://www.yunbaoo-cn.com/#solutions + 2024-01-15 + monthly + 0.8 + + + + + https://www.yunbaoo-cn.com/#cas-etudes + 2024-01-15 + monthly + 0.7 + + + + + https://www.yunbaoo-cn.com/#contact + 2024-01-15 + monthly + 0.9 + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..39a2986 --- /dev/null +++ b/styles.css @@ -0,0 +1,1392 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* Color Palette */ + --primary-color: #2563eb; + --primary-dark: #1d4ed8; + --secondary-color: #7c3aed; + --accent-color: #f59e0b; + --success-color: #10b981; + --warning-color: #f59e0b; + --error-color: #ef4444; + + /* Neutral Colors */ + --white: #ffffff; + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-900: #111827; + + /* Gradients */ + --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); + + /* Typography */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 1.875rem; + --font-size-4xl: 2.25rem; + --font-size-5xl: 3rem; + --font-size-6xl: 3.75rem; + + /* Spacing */ + --spacing-1: 0.25rem; + --spacing-2: 0.5rem; + --spacing-3: 0.75rem; + --spacing-4: 1rem; + --spacing-5: 1.25rem; + --spacing-6: 1.5rem; + --spacing-8: 2rem; + --spacing-10: 2.5rem; + --spacing-12: 3rem; + --spacing-16: 4rem; + --spacing-20: 5rem; + --spacing-24: 6rem; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + /* Border Radius */ + --border-radius-sm: 0.125rem; + --border-radius: 0.25rem; + --border-radius-md: 0.375rem; + --border-radius-lg: 0.5rem; + --border-radius-xl: 0.75rem; + --border-radius-2xl: 1rem; + --border-radius-3xl: 1.5rem; + --border-radius-full: 9999px; + + /* Transitions */ + --transition-fast: 150ms ease-in-out; + --transition-normal: 300ms ease-in-out; + --transition-slow: 500ms ease-in-out; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-family); + line-height: 1.6; + color: var(--gray-700); + background-color: var(--white); + overflow-x: hidden; +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-6); +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--gray-200); + z-index: 1000; + transition: var(--transition-normal); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-6); + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; +} + +.nav-logo { + display: flex; + align-items: center; + gap: var(--spacing-3); +} + +.logo { + height: 40px; + width: auto; +} + +.logo-text { + font-size: var(--font-size-xl); + font-weight: 800; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.nav-menu { + display: flex; + list-style: none; + gap: var(--spacing-8); + align-items: center; +} + +.nav-link { + text-decoration: none; + color: var(--gray-700); + font-weight: 500; + transition: var(--transition-fast); + position: relative; +} + +.nav-link:hover { + color: var(--primary-color); +} + +.nav-link.cta-button { + background: var(--gradient-primary); + color: var(--white); + padding: var(--spacing-3) var(--spacing-6); + border-radius: var(--border-radius-full); + font-weight: 600; + transition: var(--transition-normal); +} + +.nav-link.cta-button:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background-color: var(--gray-700); + margin: 3px 0; + transition: var(--transition-fast); +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + position: relative; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); +} + +.floating-particles { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} + +.floating-particles::before, +.floating-particles::after { + content: ''; + position: absolute; + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); + border-radius: 50%; + animation: float 20s infinite; +} + +.floating-particles::before { + top: 10%; + left: 10%; + animation-delay: 0s; +} + +.floating-particles::after { + top: 60%; + right: 10%; + animation-delay: 10s; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(-20px) rotate(180deg); + } +} + +.hero-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-6); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-16); + align-items: center; + min-height: 100vh; +} + +.hero-content { + z-index: 2; +} + +.hero-title { + font-size: var(--font-size-6xl); + font-weight: 800; + line-height: 1.1; + margin-bottom: var(--spacing-6); + color: var(--white); +} + +.title-line { + display: block; + opacity: 0; + animation: slideInUp 1s ease-out forwards; +} + +.title-line:nth-child(1) { animation-delay: 0.2s; } +.title-line:nth-child(2) { animation-delay: 0.4s; } +.title-line:nth-child(3) { animation-delay: 0.6s; } + +.title-line.highlight { + background: linear-gradient(45deg, #fbbf24, #f59e0b); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-subtitle { + font-size: var(--font-size-xl); + color: rgba(255, 255, 255, 0.9); + margin-bottom: var(--spacing-8); + line-height: 1.7; + opacity: 0; + animation: slideInUp 1s ease-out 0.8s forwards; +} + +.hero-buttons { + display: flex; + gap: var(--spacing-4); + margin-bottom: var(--spacing-12); + opacity: 0; + animation: slideInUp 1s ease-out 1s forwards; +} + +.hero-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-8); + opacity: 0; + animation: slideInUp 1s ease-out 1.2s forwards; +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-size: var(--font-size-3xl); + font-weight: 800; + color: var(--white); + margin-bottom: var(--spacing-2); +} + +.stat-label { + font-size: var(--font-size-sm); + color: rgba(255, 255, 255, 0.8); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Hero Visual */ +.hero-visual { + position: relative; + z-index: 2; +} + +.visual-container { + position: relative; + height: 500px; +} + +.floating-card { + position: absolute; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: var(--border-radius-xl); + padding: var(--spacing-4) var(--spacing-6); + display: flex; + align-items: center; + gap: var(--spacing-3); + color: var(--white); + font-weight: 600; + animation: floatCard 6s ease-in-out infinite; +} + +.floating-card i { + font-size: var(--font-size-xl); + color: var(--accent-color); +} + +.card-1 { + top: 20%; + left: 0; + animation-delay: 0s; +} + +.card-2 { + top: 60%; + right: 10%; + animation-delay: 2s; +} + +.card-3 { + bottom: 10%; + left: 20%; + animation-delay: 4s; +} + +@keyframes floatCard { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-15px); + } +} + +.main-visual { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.phone-mockup { + width: 300px; + height: 600px; + background: linear-gradient(45deg, #1f2937, #374151); + border-radius: 30px; + padding: 20px; + position: relative; + box-shadow: var(--shadow-2xl); +} + +.screen { + width: 100%; + height: 100%; + background: var(--white); + border-radius: 20px; + overflow: hidden; + position: relative; +} + +.app-interface { + padding: var(--spacing-4); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.graph-container { + width: 100%; + height: 200px; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + padding: var(--spacing-4) var(--spacing-6); + border-radius: var(--border-radius-lg); + text-decoration: none; + font-weight: 600; + font-size: var(--font-size-base); + transition: var(--transition-normal); + border: none; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.btn-primary { + background: var(--gradient-primary); + color: var(--white); + box-shadow: var(--shadow-md); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-xl); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: var(--white); + border: 1px solid rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.btn-large { + padding: var(--spacing-5) var(--spacing-8); + font-size: var(--font-size-lg); +} + +.btn-full { + width: 100%; + justify-content: center; +} + +/* Section Headers */ +.section-header { + text-align: center; + margin-bottom: var(--spacing-16); +} + +.section-tag { + display: inline-block; + background: var(--gradient-primary); + color: var(--white); + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-full); + font-size: var(--font-size-sm); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: var(--spacing-4); +} + +.section-title { + font-size: var(--font-size-4xl); + font-weight: 800; + color: var(--gray-900); + margin-bottom: var(--spacing-4); + line-height: 1.2; +} + +.section-subtitle { + font-size: var(--font-size-xl); + color: var(--gray-600); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* Services Section */ +.services { + padding: var(--spacing-24) 0; + background: var(--gray-50); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: var(--spacing-8); +} + +.service-card { + background: var(--white); + border-radius: var(--border-radius-2xl); + padding: var(--spacing-8); + position: relative; + transition: var(--transition-normal); + border: 1px solid var(--gray-200); + overflow: hidden; +} + +.service-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +.service-card.featured { + background: var(--gradient-primary); + color: var(--white); + transform: scale(1.05); +} + +.service-card.featured:hover { + transform: scale(1.05) translateY(-8px); +} + +.service-badge { + position: absolute; + top: var(--spacing-4); + right: var(--spacing-4); + background: var(--accent-color); + color: var(--white); + padding: var(--spacing-1) var(--spacing-3); + border-radius: var(--border-radius-full); + font-size: var(--font-size-xs); + font-weight: 600; + text-transform: uppercase; +} + +.service-icon { + width: 70px; + height: 70px; + background: var(--gradient-primary); + border-radius: var(--border-radius-xl); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-6); +} + +.service-card.featured .service-icon { + background: rgba(255, 255, 255, 0.2); +} + +.service-icon i { + font-size: var(--font-size-2xl); + color: var(--white); +} + +.service-title { + font-size: var(--font-size-2xl); + font-weight: 700; + margin-bottom: var(--spacing-4); + color: var(--gray-900); +} + +.service-card.featured .service-title { + color: var(--white); +} + +.service-description { + color: var(--gray-600); + margin-bottom: var(--spacing-6); + line-height: 1.6; +} + +.service-card.featured .service-description { + color: rgba(255, 255, 255, 0.9); +} + +.service-features { + list-style: none; + margin-bottom: var(--spacing-6); +} + +.service-features li { + display: flex; + align-items: center; + gap: var(--spacing-3); + margin-bottom: var(--spacing-3); + color: var(--gray-700); +} + +.service-card.featured .service-features li { + color: rgba(255, 255, 255, 0.9); +} + +.service-features i { + color: var(--success-color); + font-size: var(--font-size-sm); +} + +.service-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + color: var(--primary-color); + text-decoration: none; + font-weight: 600; + transition: var(--transition-fast); +} + +.service-card.featured .service-link { + color: var(--white); +} + +.service-link:hover { + gap: var(--spacing-3); +} + +/* Solutions Section */ +.solutions { + padding: var(--spacing-24) 0; + background: var(--white); +} + +.solutions-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-16); + align-items: center; +} + +.solution-item { + border: 1px solid var(--gray-200); + border-radius: var(--border-radius-xl); + padding: var(--spacing-6); + margin-bottom: var(--spacing-4); + cursor: pointer; + transition: var(--transition-normal); +} + +.solution-item:hover { + border-color: var(--primary-color); + background: var(--gray-50); +} + +.solution-item.active { + border-color: var(--primary-color); + background: var(--primary-color); + color: var(--white); +} + +.solution-header { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.solution-icon { + width: 50px; + height: 50px; + background: var(--gray-100); + border-radius: var(--border-radius-lg); + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-normal); +} + +.solution-item.active .solution-icon { + background: rgba(255, 255, 255, 0.2); +} + +.solution-icon i { + font-size: var(--font-size-xl); + color: var(--primary-color); +} + +.solution-item.active .solution-icon i { + color: var(--white); +} + +.solution-info h3 { + font-size: var(--font-size-xl); + font-weight: 700; + margin-bottom: var(--spacing-2); + color: var(--gray-900); +} + +.solution-item.active .solution-info h3 { + color: var(--white); +} + +.solution-info p { + color: var(--gray-600); + line-height: 1.5; +} + +.solution-item.active .solution-info p { + color: rgba(255, 255, 255, 0.9); +} + +.solutions-visual { + position: relative; + height: 400px; +} + +.solution-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + transition: var(--transition-normal); +} + +.solution-content.active { + opacity: 1; +} + +.visual-card { + background: var(--gradient-primary); + color: var(--white); + border-radius: var(--border-radius-2xl); + padding: var(--spacing-8); + height: 100%; + display: flex; + flex-direction: column; +} + +.card-header h4 { + font-size: var(--font-size-2xl); + font-weight: 700; + margin-bottom: var(--spacing-6); +} + +.team-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); + flex: 1; + align-items: center; +} + +.stat { + text-align: center; +} + +.stat .number { + display: block; + font-size: var(--font-size-3xl); + font-weight: 800; + margin-bottom: var(--spacing-2); +} + +.stat .label { + font-size: var(--font-size-sm); + opacity: 0.9; +} + +.tech-features { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + flex: 1; + justify-content: center; +} + +.feature { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4); + background: rgba(255, 255, 255, 0.1); + border-radius: var(--border-radius-lg); +} + +.feature i { + font-size: var(--font-size-xl); + color: var(--accent-color); +} + +.results-chart { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.support-info { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + flex: 1; + justify-content: center; +} + +.support-item { + display: flex; + align-items: center; + gap: var(--spacing-4); + padding: var(--spacing-4); + background: rgba(255, 255, 255, 0.1); + border-radius: var(--border-radius-lg); +} + +.support-item i { + font-size: var(--font-size-xl); + color: var(--accent-color); +} + +/* Case Studies Section */ +.case-studies { + padding: var(--spacing-24) 0; + background: var(--gray-50); +} + +.cases-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: var(--spacing-8); +} + +.case-card { + background: var(--white); + border-radius: var(--border-radius-2xl); + overflow: hidden; + transition: var(--transition-normal); + border: 1px solid var(--gray-200); +} + +.case-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +.case-image { + height: 200px; + background: var(--gradient-primary); + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.case-overlay { + position: absolute; + top: var(--spacing-4); + right: var(--spacing-4); +} + +.case-category { + background: rgba(0, 0, 0, 0.7); + color: var(--white); + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-full); + font-size: var(--font-size-sm); + font-weight: 600; +} + +.case-content { + padding: var(--spacing-8); +} + +.case-title { + font-size: var(--font-size-xl); + font-weight: 700; + color: var(--gray-900); + margin-bottom: var(--spacing-4); +} + +.case-description { + color: var(--gray-600); + margin-bottom: var(--spacing-6); + line-height: 1.6; +} + +.case-results { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-4); + margin-bottom: var(--spacing-6); +} + +.result-item { + text-align: center; + padding: var(--spacing-4); + background: var(--gray-50); + border-radius: var(--border-radius-lg); +} + +.result-number { + display: block; + font-size: var(--font-size-xl); + font-weight: 800; + color: var(--primary-color); + margin-bottom: var(--spacing-1); +} + +.result-label { + font-size: var(--font-size-sm); + color: var(--gray-600); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.case-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-2); + color: var(--primary-color); + text-decoration: none; + font-weight: 600; + transition: var(--transition-fast); +} + +.case-link:hover { + gap: var(--spacing-3); +} + +/* CTA Section */ +.cta-section { + padding: var(--spacing-24) 0; + background: var(--gradient-primary); + color: var(--white); +} + +.cta-content { + display: grid; + grid-template-columns: 1fr auto; + gap: var(--spacing-8); + align-items: center; +} + +.cta-title { + font-size: var(--font-size-4xl); + font-weight: 800; + margin-bottom: var(--spacing-4); +} + +.cta-subtitle { + font-size: var(--font-size-xl); + opacity: 0.9; + line-height: 1.6; +} + +.cta-actions { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--spacing-4); +} + +.cta-info { + display: flex; + gap: var(--spacing-6); + font-size: var(--font-size-sm); + opacity: 0.8; +} + +.cta-info span { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +/* Contact Section */ +.contact { + padding: var(--spacing-24) 0; + background: var(--white); +} + +.contact-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-16); +} + +.contact-details { + margin-bottom: var(--spacing-8); +} + +.contact-item { + display: flex; + gap: var(--spacing-4); + margin-bottom: var(--spacing-6); +} + +.contact-icon { + width: 50px; + height: 50px; + background: var(--gradient-primary); + border-radius: var(--border-radius-lg); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.contact-icon i { + font-size: var(--font-size-lg); + color: var(--white); +} + +.contact-text h4 { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--gray-900); + margin-bottom: var(--spacing-2); +} + +.contact-text p { + color: var(--gray-600); +} + +.social-links { + display: flex; + gap: var(--spacing-4); +} + +.social-link { + width: 50px; + height: 50px; + background: var(--gray-100); + border-radius: var(--border-radius-lg); + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-600); + text-decoration: none; + transition: var(--transition-normal); +} + +.social-link:hover { + background: var(--primary-color); + color: var(--white); + transform: translateY(-2px); +} + +/* Contact Form */ +.contact-form-container { + background: var(--gray-50); + border-radius: var(--border-radius-2xl); + padding: var(--spacing-8); +} + +.contact-form { + display: flex; + flex-direction: column; + gap: var(--spacing-6); +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-4); +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + font-weight: 600; + color: var(--gray-700); + margin-bottom: var(--spacing-2); +} + +.form-group input, +.form-group select, +.form-group textarea { + padding: var(--spacing-4); + border: 1px solid var(--gray-300); + border-radius: var(--border-radius-lg); + font-size: var(--font-size-base); + transition: var(--transition-fast); + background: var(--white); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +/* Footer */ +.footer { + background: var(--gray-900); + color: var(--gray-300); + padding: var(--spacing-16) 0 var(--spacing-8); +} + +.footer-content { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: var(--spacing-8); + margin-bottom: var(--spacing-8); +} + +.footer-section h4 { + color: var(--white); + font-size: var(--font-size-lg); + font-weight: 600; + margin-bottom: var(--spacing-4); +} + +.footer-logo .logo-text { + font-size: var(--font-size-2xl); + font-weight: 800; + color: var(--white); + margin-bottom: var(--spacing-4); + display: block; +} + +.footer-tagline { + color: var(--gray-400); + margin-bottom: var(--spacing-6); +} + +.footer-social { + display: flex; + gap: var(--spacing-3); +} + +.footer-social .social-link { + background: var(--gray-800); +} + +.footer-social .social-link:hover { + background: var(--primary-color); +} + +.footer-links { + list-style: none; +} + +.footer-links li { + margin-bottom: var(--spacing-3); +} + +.footer-links a { + color: var(--gray-400); + text-decoration: none; + transition: var(--transition-fast); +} + +.footer-links a:hover { + color: var(--white); +} + +.footer-bottom { + border-top: 1px solid var(--gray-800); + padding-top: var(--spacing-8); + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-legal { + display: flex; + gap: var(--spacing-6); +} + +.footer-legal a { + color: var(--gray-400); + text-decoration: none; + font-size: var(--font-size-sm); + transition: var(--transition-fast); +} + +.footer-legal a:hover { + color: var(--white); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .hamburger { + display: flex; + } + + .hero-container { + grid-template-columns: 1fr; + text-align: center; + gap: var(--spacing-8); + } + + .hero-title { + font-size: var(--font-size-4xl); + } + + .hero-buttons { + flex-direction: column; + } + + .hero-stats { + grid-template-columns: 1fr; + gap: var(--spacing-4); + } + + .services-grid { + grid-template-columns: 1fr; + } + + .solutions-content { + grid-template-columns: 1fr; + gap: var(--spacing-8); + } + + .cases-grid { + grid-template-columns: 1fr; + } + + .cta-content { + grid-template-columns: 1fr; + text-align: center; + } + + .cta-actions { + align-items: center; + } + + .contact-content { + grid-template-columns: 1fr; + gap: var(--spacing-8); + } + + .form-row { + grid-template-columns: 1fr; + } + + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-bottom { + flex-direction: column; + gap: var(--spacing-4); + text-align: center; + } + + .visual-container { + height: 300px; + } + + .phone-mockup { + width: 200px; + height: 400px; + } + + .floating-card { + padding: var(--spacing-2) var(--spacing-4); + font-size: var(--font-size-sm); + } +} + +@media (max-width: 480px) { + .container { + padding: 0 var(--spacing-4); + } + + .nav-container { + padding: 0 var(--spacing-4); + } + + .hero-title { + font-size: var(--font-size-3xl); + } + + .section-title { + font-size: var(--font-size-3xl); + } + + .cta-title { + font-size: var(--font-size-3xl); + } +} + +/* Utility Classes */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.hidden { display: none; } +.visible { display: block; } + +.fade-in { + opacity: 0; + animation: fadeIn 1s ease-out forwards; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +.slide-up { + transform: translateY(50px); + opacity: 0; + animation: slideUp 1s ease-out forwards; +} + +@keyframes slideUp { + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Smooth scrolling and performance optimizations */ +html { + scroll-behavior: smooth; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--gray-100); +} + +::-webkit-scrollbar-thumb { + background: var(--primary-color); + border-radius: var(--border-radius-full); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--primary-dark); +} \ No newline at end of file