<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LeafBox Technologies - Modern IT solutions with innovative technology and festive holiday greetings">
<meta name="keywords" content="IT solutions, technology, cloud computing, cybersecurity, LeafBox Technologies">
<title>LeafBox Technologies - Holiday Greetings 2025</title>
<!-- Google Fonts -->
<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=Inter:wght@400;500;600&family=Lora:wght@600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/animations.css">
<link rel="stylesheet" href="styles/responsive.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A4B3A'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>">
</head>
<body>
<!-- Theme Toggle -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
<svg class="theme-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
<svg class="theme-icon hidden" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" />
</svg>
</button>
<!-- Snow Canvas -->
<canvas id="snowCanvas" aria-hidden="true"></canvas>
<!-- Header -->
<header class="header">
<nav class="nav container">
<div class="nav-brand">
<div class="logo">
<svg width="40" height="40" viewBox="0 0 40 40" fill="currentColor">
<circle cx="20" cy="20" r="18" fill="#FDFDFC" stroke="#B89B5F" stroke-width="2" />
<path d="M20 8L22.5 15.5H30L24 20L26.5 27.5L20 22.5L13.5 27.5L16 20L10 15.5H17.5L20 8Z" fill="#B89B5F" />
</svg>
<span class="brand-text">LeafBox Technologies</span>
</div>
<div class="holiday-decoration">
<div class="snow-cap"></div>
</div>
</div>
<div class="nav-menu">
<a href="#home" class="nav-link">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#services" class="nav-link">Services</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<main>
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-logo">
<div class="logo-large">
<svg width="120" height="120" viewBox="0 0 120 120" fill="currentColor">
<circle cx="60" cy="60" r="55" fill="#FDFDFC" stroke="#B89B5F" stroke-width="3" />
<path d="M60 20L67.5 42.5H90L72.5 60L79.5 82.5L60 67.5L40.5 82.5L47.5 60L30 42.5H52.5L60 20Z" fill="#B89B5F" />
<!-- Santa hat -->
<path d="M80 25C85 15 95 10 105 15L95 25H85Z" fill="#C36A6A" />
<circle cx="100" cy="15" r="8" fill="#FFFFFF" />
</svg>
</div>
</div>
<h1 class="hero-title fade-in">Seasons Greetings from LeafBox</h1>
<p class="hero-subtitle fade-in-delay">Wishing you an innovative and joyful holiday season</p>
<div class="countdown-container fade-in-delay-2">
<h3>Countdown to New Year</h3>
<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="section-header">
<h2 class="section-title">About LeafBox Technologies</h2>
<div class="section-decoration"></div>
</div>
<div class="about-content">
<div class="about-text">
<p>At LeafBox Technologies, we're passionate about transforming businesses through innovative IT solutions. Our team of expert professionals is dedicated to delivering cutting-edge technology that drives growth, enhances security, andStreamlines operations.</p>
<p>As we celebrate this festive season, we're reminded of the importance of connection, innovation, and collaboration. Just like the winter season brings renewal and fresh perspectives, we continuously evolve to meet the changing needs of our clients.</p>
<p>Thank you for being part of our journey. Here's to a new year filled with technological breakthroughs and shared success!</p>
</div>
<div class="about-stats">
<div class="stat-item">
<div class="stat-number">5+</div>
<div class="stat-label">Years Experience</div>
</div>
<div class="stat-item">
<div class="stat-number">100+</div>
<div class="stat-label">Projects Delivered</div>
</div>
<div class="stat-item">
<div class="stat-number">50+</div>
<div class="stat-label">Happy Clients</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2 class="section-title">Our Services</h2>
<div class="section-decoration"></div>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</div>
<h3 class="service-title">Cloud Solutions</h3>
<p class="service-description">Scalable cloud infrastructure and migration services to modernize your business operations and enhance productivity.</p>
<a href="#" class="service-link">Learn More</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
<h3 class="service-title">Cybersecurity</h3>
<p class="service-description">Comprehensive security solutions to protect your digital assets and ensure compliance with industry standards.</p>
<a href="#" class="service-link">Learn More</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</div>
<h3 class="service-title">Software Development</h3>
<p class="service-description">Custom software solutions tailored to your business needs, from web applications to enterprise systems.</p>
<a href="#" class="service-link">Learn More</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3" />
<path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m15.5-6.5l-4.24 4.24M7.76 16.76l-4.24 4.24M16.76 16.76l-4.24 4.24M7.76 7.24 3.52 3" />
</svg>
</div>
<h3 class="service-title">IT Consulting</h3>
<p class="service-description">Strategic technology consulting to help you make informed decisions and drive digital transformation.</p>
<a href="#" class="service-link">Learn More</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
<polyline points="14,2 14,8 20,8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
<polyline points="10,9 9,9 8,9" />
</svg>
</div>
<h3 class="service-title">Data Analytics</h3>
<p class="service-description">Transform your data into actionable insights with our advanced analytics and business intelligence solutions.</p>
<a href="#" class="service-link">Learn More</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
<polyline points="9,22 9,12 15,12 15,22" />
</svg>
</div>
<h3 class="service-title">24/7 Support</h3>
<p class="service-description">Round-the-clock technical support to ensure your systems run smoothly and your business stays connected.</p>
<a href="#" class="service-link">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2 class="section-title">Holiday Greetings</h2>
<div class="section-decoration"></div>
</div>
<div class="contact-content">
<div class="contact-text">
<p class="greeting-message">Wishing you innovation and joy this holiday season! May your new year be filled with technological breakthroughs and continued success.</p>
<div class="contact-info">
<div class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span>hello@leafbox.tech</span>
</div>
<div class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
</svg>
<span>+1 (555) 123-4567</span>
</div>
<div class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
<span>123 Innovation Drive, Tech City, TC 12345</span>
</div>
</div>
</div>
<form class="contact-form" id="contactForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="company">Company</label>
<input type="text" id="company" name="company">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="submit-btn">
Send Holiday Greetings
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 2L11 13" />
<polygon points="22,2 15,22 11,13 2,9" />
</svg>
</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<svg width="40" height="40" viewBox="0 0 40 40" fill="currentColor">
<circle cx="20" cy="20" r="18" fill="#FDFDFC" stroke="#B89B5F" stroke-width="2" />
<path d="M20 8L22.5 15.5H30L24 20L26.5 27.5L20 22.5L13.5 27.5L16 20L10 15.5H17.5L20 8Z" fill="#B89B5F" />
</svg>
<span>LeafBox Technologies</span>
</div>
<div class="footer-text">
<p>© 2025 LeafBox Technologies. All rights reserved. | Celebrating innovation this holiday season</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="scripts/main.js"></script>
<script src="scripts/snow.js"></script>
<script src="scripts/countdown.js"></script>
</body>
</html>