<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafBox Technologies - Merry Christmas 2025</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Background Canvas for Particle Snow -->
<canvas id="snowCanvas"></canvas>
<!-- Theme Toggle Button -->
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
<svg class="icon-moon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg class="icon-sun" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
<!-- Sound Toggle Button -->
<button id="soundToggle" class="sound-toggle" aria-label="Toggle sound">
<svg class="icon-sound-on" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
<svg class="icon-sound-off" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<line x1="23" y1="9" x2="17" y2="15"></line>
<line x1="17" y1="9" x2="23" y2="15"></line>
</svg>
</button>
<!-- Hero Section -->
<section id="hero" class="hero">
<div class="container">
<!-- Digital Christmas Tree Canvas -->
<canvas id="treeCanvas" class="digital-tree"></canvas>
<div class="hero-content">
<h1 class="hero-title glow-text">
Merry Christmas from<br>
<span class="brand-highlight">LeafBox Technologies</span><br>
<span class="subtitle">Innovating into the Future</span>
</h1>
<p class="hero-description">Where technology meets the magic of Christmas</p>
<a href="#contact" class="cta-button glow-button">
<span>Start Your Journey</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
</div>
<!-- Data Stream Background -->
<div class="data-streams"></div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<h2 class="section-title glow-text">Our Innovation Journey</h2>
<p class="section-subtitle">Milestones that shaped the future</p>
<div class="timeline">
<div class="timeline-item" data-year="2020">
<div class="timeline-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
</div>
<div class="timeline-content">
<h3>Foundation</h3>
<p>LeafBox Technologies was born with a vision to revolutionize digital solutions</p>
</div>
<div class="christmas-ornament ornament-green"></div>
</div>
<div class="timeline-item" data-year="2021">
<div class="timeline-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<div class="timeline-content">
<h3>First Major Product</h3>
<p>Launched our flagship AI-powered platform serving 10,000+ users globally</p>
</div>
<div class="christmas-ornament ornament-gold"></div>
</div>
<div class="timeline-item" data-year="2022">
<div class="timeline-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="timeline-content">
<h3>Global Expansion</h3>
<p>Opened offices in 5 countries, building a worldwide innovation network</p>
</div>
<div class="christmas-ornament ornament-blue"></div>
</div>
<div class="timeline-item" data-year="2023">
<div class="timeline-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</div>
<div class="timeline-content">
<h3>Innovation Awards</h3>
<p>Recognized as Tech Innovator of the Year for groundbreaking solutions</p>
</div>
<div class="christmas-ornament ornament-green"></div>
</div>
<div class="timeline-item" data-year="2024">
<div class="timeline-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div class="timeline-content">
<h3>Future-Ready</h3>
<p>Pioneering quantum computing integration and sustainable tech solutions</p>
</div>
<div class="christmas-ornament ornament-gold"></div>
</div>
<div class="timeline-item" data-year="2025">
<div class="timeline-marker special-marker">
<div class="pulse-ring"></div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<div class="timeline-content">
<h3>The Journey Continues</h3>
<p>Celebrating innovation and looking forward to new horizons</p>
</div>
<div class="christmas-ornament ornament-blue pulse"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<h2 class="section-title glow-text">Digital Gift Boxes</h2>
<p class="section-subtitle">Hover to unwrap our innovative solutions</p>
<div class="services-grid">
<div class="service-card" data-service="ai">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
<h3 class="service-title">AI Solutions</h3>
<p class="service-description">Advanced artificial intelligence systems that learn, adapt, and transform your business operations</p>
</div>
<div class="service-card" data-service="cloud">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
</svg>
</div>
<h3 class="service-title">Cloud Infrastructure</h3>
<p class="service-description">Scalable, secure cloud solutions that power your digital transformation journey</p>
</div>
<div class="service-card" data-service="blockchain">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="1" y="3" width="15" height="13"></rect>
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
<circle cx="5.5" cy="18.5" r="2.5"></circle>
<circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>
</div>
<h3 class="service-title">Blockchain Tech</h3>
<p class="service-description">Decentralized solutions ensuring transparency, security, and trust in every transaction</p>
</div>
<div class="service-card" data-service="iot">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="2"></circle>
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
</svg>
</div>
<h3 class="service-title">IoT Ecosystem</h3>
<p class="service-description">Connected devices and smart systems creating an intelligent, responsive environment</p>
</div>
<div class="service-card" data-service="quantum">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<h3 class="service-title">Quantum Computing</h3>
<p class="service-description">Next-generation computing power solving complex problems at unprecedented speeds</p>
</div>
<div class="service-card" data-service="cybersecurity" id="easterEgg">
<div class="card-glow"></div>
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<h3 class="service-title">Cybersecurity</h3>
<p class="service-description">Enterprise-grade protection safeguarding your digital assets 24/7</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="contact-content">
<h2 class="section-title glow-text animated-greeting">
Wishing you innovation, joy, and success this holiday season
</h2>
<p class="contact-text">
Let's build the future together. Connect with LeafBox Technologies and transform your vision into reality.
</p>
<button class="neon-contact-button" id="contactButton">
<span>Get In Touch</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</button>
<div class="contact-info">
<div class="info-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<span>hello@leafbox.tech</span>
</div>
<div class="info-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span>Silicon Valley, CA & Worldwide</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-snow"></div>
<div class="container">
<div class="countdown-container">
<h3 class="countdown-label">Countdown to New Year 2026</h3>
<div class="countdown" id="countdown">
<div class="countdown-segment">
<div class="digit-display" id="days">00</div>
<div class="digit-label">DAYS</div>
</div>
<div class="countdown-divider">:</div>
<div class="countdown-segment">
<div class="digit-display" id="hours">00</div>
<div class="digit-label">HOURS</div>
</div>
<div class="countdown-divider">:</div>
<div class="countdown-segment">
<div class="digit-display" id="minutes">00</div>
<div class="digit-label">MINUTES</div>
</div>
<div class="countdown-divider">:</div>
<div class="countdown-segment">
<div class="digit-display" id="seconds">00</div>
<div class="digit-label">SECONDS</div>
</div>
</div>
</div>
<div class="footer-content">
<div class="footer-logo">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
<path d="M2 17l10 5 10-5"></path>
<path d="M2 12l10 5 10-5"></path>
</svg>
<span>LeafBox Technologies</span>
</div>
<div class="footer-links">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<a href="#" id="privacyLink">Privacy</a>
</div>
<div class="footer-social">
<a href="#" aria-label="LinkedIn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" aria-label="Twitter">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</a>
<a href="#" aria-label="GitHub">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LeafBox Technologies. All rights reserved.</p>
<p class="easter-hint">✨ Can you find the hidden message?</p>
</div>
</div>
</footer>
<!-- Easter Egg Modal -->
<div id="easterEggModal" class="modal">
<div class="modal-content">
<button class="modal-close" id="modalClose">×</button>
<h2 class="glow-text">🎄 You Found It! 🎄</h2>
<p class="modal-message">
"From the LeafBox team: May your code compile on the first try,<br>
your servers stay up during the holidays,<br>
and your coffee be strong! ☕<br><br>
Happy Holidays & Happy Coding! 🚀"
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>