<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataBlocks - AI Enablement Specialists</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/section1-header-hero.css">
<link rel="stylesheet" href="css/section2-services-about.css">
<link rel="stylesheet" href="css/section3-articles.css">
<link rel="stylesheet" href="css/section4-contact-footer.css">
<link rel="stylesheet" href="css/animation.css">
<style>
.snake-game-section { background-color: #FFFFFF !important; }
.snake-game-section .game-container { background-color: transparent !important; box-shadow: none !important; border: none !important; }
</style>
</head>
<body>
<header>
<div class="container header-container">
<a href="#" class="logo">
<span class="logo-square"></span>
DataBlocks
</a>
<nav class="nav-desktop">
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="nav-mobile" id="navMobile">
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="title-section">
<h1 class="hero-title">You're in the right place to:</h1>
<div class="typewriter-text" id="typewriter-text"></div>
</div>
<p class="hero-subtitle">At DataBlocks, we empower small and medium businesses and local authorities to confidently adopt AI — with privacy, clarity, and real-world impact.</p>
</div>
<div class="hero-shapes">
</div>
<div class="highlight-row" id="section1-highlight"></div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<div class="services-grid">
<div class="service-card">
<h3 class="service-title">E-commerce Strategy & Analytics</h3>
<p class="service-description">We help small e-commerce businesses develop targeted strategies, set up analytics infrastructure, and optimize ads for purchase intent. Focus on growing your business while we handle the technical details and provide data-driven insights.</p>
<a href="#" class="btn btn-secondary" id="ecom-learn-more">Learn More</a>
</div>
<div class="service-card">
<h3 class="service-title">Custom Analytical Tools</h3>
<p class="service-description">We build bespoke data analytics solutions for small businesses and local authorities. Transform your raw data into actionable insights with custom dashboards, automated reporting, and real-time monitoring systems tailored to your specific needs.</p>
<a href="#" class="btn btn-secondary" id="analytics-learn-more">Learn More</a>
</div>
<div class="service-card">
<h3 class="service-title">AI Implementation & Training</h3>
<p class="service-description">We guide small businesses through AI adoption from initial assessment to full implementation. Identify opportunities, develop deployment strategies, and train your team to leverage AI tools effectively for sustainable business growth.</p>
<a href="#" class="btn btn-secondary" id="implementation-learn-more">Learn More</a>
</div>
</div>
<div id="ecom-modal" class="modal" style="display:none;">
<div class="modal-content">
<button class="modal-close" id="ecom-modal-close" aria-label="Close">×</button>
<h2>Data-Driven Strategy for Small E-commerce Businesses</h2>
<p>Prepare your business for technological changes and stay ahead of market trends. Get clear insights into your business objectives, strengths, weaknesses, and market position.</p>
<h3>What we handle for you:</h3>
<ul>
<li>Google Ads management and optimization</li>
<li>Data analysis from ads, search engines, and shop traffic</li>
<li>Trend analysis based on Google and Pinterest data</li>
<li>Technical setup and ongoing monitoring</li>
<li>Strategic recommendations based on real performance data</li>
</ul>
<h3>What you get:</h3>
<ul>
<li>Clear business strategy tailored to your market</li>
<li>Monthly data insights and recommendations</li>
<li>Focus on high-purchase-intent traffic</li>
<li>More time to focus on running your business</li>
</ul>
<h3>From £200 a month</h3>
</div>
</div>
<div id="analytics-modal" class="modal" style="display:none;">
<div class="modal-content">
<button class="modal-close" id="analytics-modal-close" aria-label="Close">×</button>
<h2>Bespoke Analytics Solutions</h2>
<p>Transform your organization's data into powerful decision-making tools. We develop custom analytics platforms that integrate with your existing systems and provide real-time insights specific to your industry and objectives.</p>
<h3>What we build for you:</h3>
<ul>
<li>Custom dashboards and data visualization tools</li>
<li>Automated reporting systems and alerts</li>
<li>Data integration from multiple sources</li>
<li>Real-time monitoring and analytics platforms</li>
<li>Mobile-responsive interfaces for on-the-go access</li>
</ul>
<h3>What you get:</h3>
<ul>
<li>Tailored solutions designed for your specific needs</li>
<li>Seamless integration with existing systems</li>
<li>Training and ongoing technical support</li>
<li>Scalable platforms that grow with your organization</li>
<li>Clear data insights that drive better decisions</li>
</ul>
<h3>From £500 a month</h3>
</div>
</div>
<div id="implementation-modal" class="modal" style="display:none;">
<div class="modal-content">
<button class="modal-close" id="implementation-modal-close" aria-label="Close">×</button>
<h2>Complete AI Adoption Support</h2>
<p>Navigate the AI landscape with confidence. We assess your business needs, design practical implementation strategies, and provide comprehensive training to ensure your team can effectively use AI tools to drive growth and efficiency.</p>
<h3>What we handle for you:</h3>
<ul>
<li>Comprehensive needs assessment and AI opportunity identification</li>
<li>Custom implementation roadmap and timeline development</li>
<li>AI tool selection and integration planning</li>
<li>Staff training programs and ongoing support</li>
<li>Change management and adoption strategies</li>
</ul>
<h3>What you get:</h3>
<ul>
<li>Clear understanding of AI opportunities in your business</li>
<li>Step-by-step implementation plan tailored to your resources</li>
<li>Confident team equipped with practical AI skills</li>
<li>Ongoing support during transition and beyond</li>
<li>Measurable improvements in efficiency and decision-making</li>
</ul>
<h3>From £1,000 a month</h3>
</div>
</div>
<div class="highlight-row" id="services-highlight"></div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<h2 class="section-title">About DataBlocks</h2>
<div class="about-content">
<div class="about-text" style="text-align: center; width: 100%;">
<p>DataBlocks was founded with a mission to democratize access to AI technologies for small and medium enterprises and local government authorities. We believe that these organizations have unique needs and challenges when it comes to AI adoption, and our goal is to provide tailored support and resources.</p>
<a href="#" class="btn btn-secondary" style="margin-top: 20px; display: inline-block;">Meet the Team</a>
</div>
</div>
<div class="highlight-row" id="about-highlight"></div>
</div>
</section>
<section class="articles" id="articles">
<div class="container">
<h2 class="section-title">Latest Articles</h2>
<div class="articles-grid">
<div class="article-card">
<div class="article-content">
<h3 class="article-title">AI Adoption Challenges for Local Governments</h3>
<p class="article-excerpt">Exploring the unique obstacles faced by local authorities when implementing AI solutions and strategies to overcome them.</p>
<p class="article-date">March 10, 2025</p>
<a href="#" class="btn btn-secondary">Read More</a>
</div>
</div>
<div class="article-card">
<div class="article-content">
<h3 class="article-title">Building AI Literacy in Your Organization</h3>
<p class="article-excerpt">Practical approaches to developing AI understanding and skills across different departments and roles.</p>
<p class="article-date">March 5, 2025</p>
<a href="#" class="btn btn-secondary">Read More</a>
</div>
</div>
<div class="article-card">
<div class="article-content">
<h3 class="article-title">Case Study: AI Success in a Mid-sized Manufacturing Company</h3>
<p class="article-excerpt">How a 50-employee company transformed operations through targeted AI implementation.</p>
<p class="article-date">February 28, 2025</p>
<a href="#" class="btn btn-secondary">Read More</a>
</div>
</div>
</div>
<div class="highlight-row" id="articles-highlight"></div>
</div>
</section>
<section class="snake-game-section">
<div class="container">
<h2 class="section-title">Take a Break with Snake</h2>
<p class="snake-description">Control the snake using arrow keys or WASD. Collect the red squares to grow!</p>
<div class="game-container">
<canvas id="snakeCanvas"></canvas>
<div class="game-controls">
<div class="score">Score: <span id="scoreValue">0</span></div>
<button id="startGame" class="btn btn-primary">Start Game</button>
<button id="pauseGame" class="btn btn-secondary">Pause</button>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" class="form-control" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="organization" class="form-label">Organization</label>
<input type="text" id="organization" class="form-control">
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" class="form-control" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
<div class="form-success" id="formSuccess" style="display: none;">
<div class="success-icon">✓</div>
<h3>Message Sent!</h3>
<p>Thank you for contacting us. We'll get back to you shortly.</p>
</div>
</div>
<div class="highlight-row" id="contact-highlight"></div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-info">
<div class="footer-logo">
<span class="footer-logo-square"></span>
DataBlocks
</div>
<p>Supporting SMEs and local governments on their AI journey.</p>
<div class="footer-social">
<a href="#" class="social-icon" aria-label="Facebook">FB</a>
<a href="#" class="social-icon" aria-label="Twitter">TW</a>
<a href="#" class="social-icon" aria-label="LinkedIn">LI</a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul class="footer-nav">
<li><a href="#services">Services</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>Contact Information</h3>
<p class="contact-item">Email: <a href="mailto:info@datablocks.co.uk">info@datablocks.co.uk</a></p>
<p class="contact-item">Phone: <a href="tel:+441234567890">+44 123 456 7890</a></p>
<p class="contact-item">Address: London, UK</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 DataBlocks. All rights reserved.</p>
</div>
</div>
</footer>
<div class="highlight-squares-container"></div>
<script src="js/section1-header-hero.js"></script>
<script src="js/section2-services-about.js"></script>
<script src="js/section3-articles.js"></script>
<script src="js/section4-contact-footer.js"></script>
<script src="js/animation.js"></script>
<script src="js/snake-game.js"></script>
</body>
</html>