Premium
1
10
MindPlay
MindPlay offers a dynamic blend of interactive activities, creative exercises, and educational games designed to inspire curiosity and critical thinking in kids.
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MindPlay - Unlock the Secrets of Fun Education</title>
<meta name="description" content="MindPlay is a playful Tailwind CSS education website template for children's activities, learning games, creative exercises, and school programs.">
<meta name="keywords" content="MindPlay, Tailwind CSS template, HTML website template, kids education template, school landing page, learning games, responsive education design">
<!-- Scripts & Styles -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- 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=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#7c3aed',
secondary: '#fb923c',
accent: '#fbbf24',
dark: '#1e1b4b'
},
fontFamily: {
sans: ['Outfit', 'sans-serif'],
},
borderRadius: {
'4xl': '2rem',
'5xl': '3rem',
}
}
}
}
</script>
<style>
.squiggle-bg {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 Q 25 25 40 50 T 70 50 T 100 50' stroke='%237c3aed' stroke-width='2' fill='none' opacity='0.1'/%3E%3C/svg%3E");
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 2rem;
}
.marquee-content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: 2rem;
min-width: 100%;
animation: scroll 30s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
</style>
</head>
<body class="bg-[#fdfcfd] text-dark overflow-x-hidden">
<!-- block:start header -->
<header id="header" class="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-purple-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="#" class="flex items-center gap-2">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white rotate-3">
<i class="fa-solid fa-graduation-cap text-xl"></i>
</div>
<span class="text-2xl font-extrabold tracking-tight text-primary">MINDPLAY</span>
</a>
<nav class="hidden lg:flex items-center gap-10">
<a href="#" class="text-sm font-bold text-primary bg-primary/10 px-4 py-2 rounded-full">Home</a>
<a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">About Us</a>
<a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">Services</a>
<a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">Pages</a>
</nav>
<button class="bg-primary text-white px-6 py-3 rounded-2xl text-sm font-bold hover:shadow-lg hover:shadow-primary/20 transition flex items-center gap-2">
Contact Us
<div class="w-6 h-6 bg-white/20 rounded-lg flex items-center justify-center">
<i class="fa-solid fa-paper-plane text-[10px]"></i>
</div>
</button>
</div>
</header>
<!-- block:end header -->
<!-- block:start hero -->
<section id="hero" class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute top-20 right-20 text-accent opacity-20 rotate-12">
<i class="fa-solid fa-sun text-9xl"></i>
</div>
<div class="absolute top-40 left-10 text-primary opacity-10">
<i class="fa-solid fa-star text-4xl"></i>
</div>
<div class="max-w-7xl mx-auto px-6 text-center relative z-10">
<span class="text-secondary font-extrabold text-xs uppercase tracking-[0.3em] mb-6 block">Power of Play</span>
<h1 class="text-5xl md:text-7xl font-extrabold mb-8 leading-tight">
Unlock the Secrets of<br>
<span class="text-primary relative">
Fun Education
<svg class="absolute -bottom-2 left-0 w-full h-3 text-accent" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M0 5 Q 25 0 50 5 T 100 5" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
</svg>
</span>
</h1>
<p class="text-gray-500 text-lg md:text-xl font-medium max-w-2xl mx-auto mb-10">
From hands-on science experiments to creative arts and crafts, these engaging ideas help boost your child's skills while sparking curiosity.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-6">
<button class="bg-primary text-white px-8 py-4 rounded-3xl font-bold shadow-xl shadow-primary/20 flex items-center gap-3 group">
Learn More
<div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center group-hover:translate-x-1 transition">
<i class="fa-solid fa-arrow-right text-[10px]"></i>
</div>
</button>
<div class="flex items-center gap-4 bg-white p-2 pr-6 rounded-3xl shadow-sm border border-gray-100">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="child">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="child">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="child">
</div>
<span class="text-sm font-bold text-gray-700">Happy Kids</span>
</div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start feature-cards -->
<section class="pb-20">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Learning Astronomy -->
<div class="bg-secondary rounded-[3rem] p-8 text-white relative overflow-hidden group">
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-4">Learning Astronomy</h3>
<p class="text-white/80 text-sm font-medium mb-8 leading-relaxed">By learning about constellations, the solar system, and space missions, kids can discover the mystery of the sky world.</p>
<a href="#" class="inline-flex items-center gap-2 text-sm font-bold border-b border-white pb-1 group-hover:gap-4 transition-all">Learn More <i class="fa-solid fa-arrow-right"></i></a>
</div>
<div class="mt-8 relative h-48 rounded-2xl overflow-hidden bg-white/20">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_53eb0bfa43_67780c15ed4b53ef.png" alt="kids learning about planets and stars, telescope, educational setting, vibrant orange background" />
</div>
</div>
<!-- Museum Visit -->
<div class="bg-primary rounded-[3rem] p-8 text-white relative overflow-hidden group">
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-4">Museum Visit</h3>
<p class="text-white/80 text-sm font-medium mb-8 leading-relaxed">Exploring different exhibits helps children develop critical thinking and a deeper understanding of the world around them.</p>
<a href="#" class="inline-flex items-center gap-2 text-sm font-bold border-b border-white pb-1 group-hover:gap-4 transition-all">Learn More <i class="fa-solid fa-arrow-right"></i></a>
</div>
<div class="mt-8 relative h-48 rounded-2xl overflow-hidden bg-white/20">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_8bf9e63f1b_4e24aca05a942dcf.png" alt="kids looking at dinosaur skeleton in a museum, educational school trip, vibrant purple background" />
</div>
</div>
<!-- Camping & Singing -->
<div class="bg-accent rounded-[3rem] p-8 text-dark relative overflow-hidden group">
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-4 text-dark">Camping & Singing</h3>
<p class="text-dark/70 text-sm font-medium mb-8 leading-relaxed">These activities promote physical activity, communication, and problem-solving, making them a perfect combination.</p>
<a href="#" class="inline-flex items-center gap-2 text-sm font-bold border-b border-dark pb-1 group-hover:gap-4 transition-all text-dark">Learn More <i class="fa-solid fa-arrow-right"></i></a>
</div>
<div class="mt-8 relative h-48 rounded-2xl overflow-hidden bg-white/50">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_2c5a107280_44093f2388a76a3a.png" alt="kids sitting around a campfire singing and playing guitar, outdoors educational camp, vibrant yellow" />
</div>
</div>
</div>
</div>
</section>
<!-- block:end feature-cards -->
<!-- block:start activities -->
<section class="py-20 bg-purple-50/50">
<div class="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-20">
<div class="lg:w-1/2">
<span class="text-primary font-extrabold text-xs uppercase tracking-widest mb-6 block">Train Readers</span>
<h2 class="text-4xl md:text-5xl font-extrabold mb-8 leading-tight">Fun Games & Activities for Smart Kids</h2>
<p class="text-gray-500 font-medium mb-8 leading-relaxed">Fun games and activities for smart kids that stimulate creativity, problem-solving, and critical thinking. These activities make learning enjoyable and stimulate young minds.</p>
<ul class="space-y-4 mb-10">
<li class="flex items-center gap-4">
<div class="w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-primary">
<i class="fa-solid fa-check text-[10px]"></i>
</div>
<span class="text-sm font-bold text-gray-700">Create dynamic and interactive learning environments.</span>
</li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-primary">
<i class="fa-solid fa-check text-[10px]"></i>
</div>
<span class="text-sm font-bold text-gray-700">Develop critical thinking and independence.</span>
</li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-primary">
<i class="fa-solid fa-check text-[10px]"></i>
</div>
<span class="text-sm font-bold text-gray-700">Build confidence and a love for learning.</span>
</li>
</ul>
<div class="flex items-center gap-6">
<button class="bg-primary text-white px-8 py-4 rounded-3xl font-bold shadow-lg shadow-primary/20 flex items-center gap-3">
Learn More
<i class="fa-solid fa-play text-[10px]"></i>
</button>
<button class="w-12 h-12 rounded-full border-2 border-primary flex items-center justify-center text-primary">
<i class="fa-solid fa-play"></i>
</button>
</div>
</div>
<div class="lg:w-1/2 relative">
<div class="relative z-10 rounded-[4rem] overflow-hidden border-[12px] border-white shadow-2xl">
<img class="w-full aspect-[4/5] object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1a0884b4ee_a89e55ab77837843.png" alt="a smiling young girl holding a stack of books on her head, educational setting, bright colors" />
</div>
<!-- Floating tags -->
<div class="absolute -top-10 -right-10 bg-accent text-dark font-black px-6 py-3 rounded-2xl rotate-12 shadow-xl">LEARNING</div>
<div class="absolute bottom-20 -left-10 bg-primary text-white font-black px-6 py-3 rounded-2xl -rotate-12 shadow-xl">PLAYING</div>
<div class="absolute bottom-10 -right-5 bg-secondary text-white font-black px-6 py-3 rounded-2xl rotate-6 shadow-xl">MATH</div>
</div>
</div>
</section>
<!-- block:end activities -->
<!-- block:start teachers -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-6 text-center">
<span class="text-secondary font-extrabold text-xs uppercase tracking-widest mb-6 block">Classroom Heroes</span>
<h2 class="text-4xl md:text-5xl font-extrabold mb-6">The Role of a Teacher in <span class="text-primary">Learning</span></h2>
<p class="text-gray-500 font-medium max-w-2xl mx-auto mb-16">They encourage curiosity, critical thinking, and problem-solving skills while helping students build confidence.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Teacher 1 -->
<div class="bg-white rounded-[3rem] p-4 border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500">
<div class="bg-accent rounded-[2.5rem] p-6 mb-6 overflow-hidden relative group">
<img class="w-full h-80 object-cover rounded-2xl group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_08d1b3c048_fdca87d3958edf8b.png" alt="professional male primary school teacher, friendly smile, holding a tablet, yellow artistic backgrou" />
<div class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md rounded-2xl p-4">
<h4 class="font-extrabold text-lg">Andrew White</h4>
<p class="text-xs text-primary font-bold">Principal</p>
</div>
</div>
</div>
<!-- Teacher 2 -->
<div class="bg-white rounded-[3rem] p-4 border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500">
<div class="bg-primary rounded-[2.5rem] p-6 mb-6 overflow-hidden relative group">
<img class="w-full h-80 object-cover rounded-2xl group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_79dd18e1e8_4dea036bc6e762cc.png" alt="professional female primary school teacher, friendly, holding a book, purple artistic background" />
<div class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md rounded-2xl p-4">
<h4 class="font-extrabold text-lg">Marrie Anna</h4>
<p class="text-xs text-primary font-bold">Math Teacher</p>
</div>
</div>
</div>
<!-- Teacher 3 -->
<div class="bg-white rounded-[3rem] p-4 border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500">
<div class="bg-secondary rounded-[2.5rem] p-6 mb-6 overflow-hidden relative group">
<img class="w-full h-80 object-cover rounded-2xl group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_08d1b3c048_10655080d3df209d.png" alt="professional male primary school teacher, friendly, wearing glasses, orange artistic background" />
<div class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md rounded-2xl p-4">
<h4 class="font-extrabold text-lg">Benjamin Adam</h4>
<p class="text-xs text-primary font-bold">Art Teacher</p>
</div>
</div>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 mt-24">
<div class="flex flex-col items-center">
<span class="text-5xl font-black text-dark mb-2">15<sup>+</sup></span>
<span class="text-sm font-bold text-gray-400 uppercase tracking-widest">Years of Experience</span>
</div>
<div class="flex flex-col items-center">
<span class="text-5xl font-black text-dark mb-2">30<sup>+</sup></span>
<span class="text-sm font-bold text-gray-400 uppercase tracking-widest">Expert Teacher</span>
</div>
<div class="flex flex-col items-center">
<span class="text-5xl font-black text-dark mb-2">95<sup>%</sup></span>
<span class="text-sm font-bold text-gray-400 uppercase tracking-widest">Happy Children</span>
</div>
<div class="flex flex-col items-center">
<span class="text-5xl font-black text-dark mb-2">20<sup>+</sup></span>
<span class="text-sm font-bold text-gray-400 uppercase tracking-widest">Learning Programs</span>
</div>
</div>
</div>
</section>
<!-- block:end teachers -->
<!-- block:start ticker -->
<div class="py-10 bg-primary/5 border-y border-primary/10 overflow-hidden">
<div class="marquee">
<div class="marquee-content">
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-leaf text-secondary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Exploring Nature</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-user-astronaut text-primary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Learning Astronomy</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-mountain text-accent"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Rock Climbing</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-flask text-secondary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Science Class</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-palette text-primary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Reading Class</span>
</div>
<!-- Duplicate for seamless loop -->
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-leaf text-secondary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Exploring Nature</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-user-astronaut text-primary"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Learning Astronomy</span>
</div>
<div class="flex items-center gap-4 px-8">
<i class="fa-solid fa-mountain text-accent"></i>
<span class="text-2xl font-black uppercase tracking-tighter">Rock Climbing</span>
</div>
</div>
</div>
</div>
<!-- block:end ticker -->
<!-- block:start why-choose -->
<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6 text-center">
<span class="text-primary font-extrabold text-xs uppercase tracking-widest mb-6 block">Why Choose Us</span>
<h2 class="text-4xl md:text-5xl font-extrabold mb-16">Stimulating Space for <span class="text-secondary">Growing</span> Minds</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-secondary/5 border border-secondary/10 p-10 rounded-[3rem] relative group hover:bg-secondary hover:text-white transition-all duration-500">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-secondary font-black text-2xl mb-8 group-hover:bg-white/20 group-hover:text-white transition">01</div>
<h4 class="text-2xl font-extrabold mb-4">Holistic Learning Approach</h4>
<p class="text-gray-500 text-sm font-medium leading-relaxed group-hover:text-white/80 transition">We focus on nurturing the whole child—academically, socially, and emotionally ensuring they develop essential skills.</p>
</div>
<div class="bg-primary/5 border border-primary/10 p-10 rounded-[3rem] relative group hover:bg-primary hover:text-white transition-all duration-500">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-primary font-black text-2xl mb-8 group-hover:bg-white/20 group-hover:text-white transition">02</div>
<h4 class="text-2xl font-extrabold mb-4">Safe & Supportive Learning</h4>
<p class="text-gray-500 text-sm font-medium leading-relaxed group-hover:text-white/80 transition">We prioritize safety and well-being, providing a secure online space where children can explore, learn and grow.</p>
</div>
<div class="bg-accent/5 border border-accent/10 p-10 rounded-[3rem] relative group hover:bg-accent hover:text-dark transition-all duration-500">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-accent font-black text-2xl mb-8 group-hover:bg-white/50 group-hover:text-dark transition">03</div>
<h4 class="text-2xl font-extrabold mb-4">Proven Adaptive Learning</h4>
<p class="text-gray-500 text-sm font-medium leading-relaxed group-hover:text-dark/70 transition">Focusing on each child's strengths, building confidence and academic performance with measurable progress.</p>
</div>
</div>
</div>
</section>
<!-- block:end why-choose -->
<!-- block:start testimonials -->
<section class="py-24 bg-purple-50/30">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col lg:flex-row gap-20">
<div class="lg:w-1/3">
<span class="text-primary font-extrabold text-xs uppercase tracking-widest mb-6 block">Testimonials</span>
<h2 class="text-4xl font-extrabold mb-8 leading-tight">What Parents <span class="text-primary">Says</span> About Our Program</h2>
<p class="text-gray-500 font-medium mb-10 leading-relaxed">We have received many positive testimonials from parents about the program.</p>
<button class="bg-primary text-white px-8 py-4 rounded-3xl font-bold flex items-center gap-3">
View All <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<div class="lg:w-2/3 space-y-6">
<div class="bg-white p-8 rounded-[2.5rem] shadow-sm relative border border-purple-50">
<div class="flex gap-1 text-accent mb-6">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-gray-700 font-medium italic mb-8 leading-relaxed">"The interactive features keep him entertained while also teaching him important concepts. I've seen a significant improvement in his grades and, more importantly, his enthusiasm for learning!"</p>
<div class="flex items-center gap-4">
<img class="w-12 h-12 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-7.jpg" alt="parent">
<div>
<h5 class="font-extrabold">Sarah Lucky</h5>
<p class="text-xs text-gray-400 font-bold uppercase">Parents</p>
</div>
</div>
<i class="fa-solid fa-quote-right absolute top-8 right-10 text-primary/10 text-6xl"></i>
</div>
<div class="bg-white p-8 rounded-[2.5rem] shadow-sm relative border border-purple-50">
<div class="flex gap-1 text-accent mb-6">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-gray-700 font-medium italic mb-8 leading-relaxed">"I've always struggled with finding resources that keep my child engaged outside of school, but this program is different. I've seen improvements in everything from reading skills to critical thinking."</p>
<div class="flex items-center gap-4">
<img class="w-12 h-12 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="parent">
<div>
<h5 class="font-extrabold">Michelle Karen</h5>
<p class="text-xs text-gray-400 font-bold uppercase">Parents</p>
</div>
</div>
<i class="fa-solid fa-quote-right absolute top-8 right-10 text-primary/10 text-6xl"></i>
</div>
</div>
</div>
</div>
</section>
<!-- block:end testimonials -->
<!-- block:start cta -->
<section class="py-20 px-6">
<div class="max-w-7xl mx-auto bg-primary rounded-[4rem] p-10 md:p-20 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
<div class="lg:w-1/2">
<h2 class="text-4xl md:text-5xl font-extrabold mb-6 leading-tight">Discover Fun and Engaging <span class="text-accent">Learning</span> for Kids</h2>
<p class="text-white/80 font-medium mb-10 leading-relaxed">Our programs offer a dynamic blend of interactive activities, creative exercises, and educational games that spark young minds.</p>
<div class="flex flex-wrap items-center gap-6">
<button class="bg-white text-primary px-10 py-5 rounded-3xl font-black shadow-xl hover:bg-accent hover:text-dark transition">Contact Us <i class="fa-solid fa-paper-plane ml-2"></i></button>
<div class="flex items-center gap-3">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="child">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="child">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="child">
</div>
<span class="text-sm font-bold text-white/90">Join 10k+ Happy Kids</span>
</div>
</div>
</div>
<div class="lg:w-1/3">
<div class="relative p-4 bg-white/10 backdrop-blur-md rounded-[3rem]">
<img class="w-full h-80 object-cover rounded-[2.5rem]" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_0231a12b03_25fffcffbcc0ca94.png" alt="happy children group playing together, educational background, vibrant colors, primary school settin" />
</div>
</div>
</div>
</div>
</section>
<!-- block:end cta -->
<!-- block:start articles -->
<section class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-16">
<div>
<span class="text-primary font-extrabold text-xs uppercase tracking-widest mb-6 block">Latest Articles</span>
<h2 class="text-4xl md:text-5xl font-extrabold">Stay <span class="text-primary">Update</span> With Our News and Article</h2>
</div>
<button class="hidden md:flex items-center gap-3 bg-primary/5 text-primary px-8 py-4 rounded-3xl font-bold hover:bg-primary hover:text-white transition">
View All <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-7">
<div class="group cursor-pointer">
<div class="relative h-[400px] rounded-[3rem] overflow-hidden mb-8">
<img class="w-full h-full object-cover group-hover:scale-105 transition duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_81f536fe13_f1d659c4c8d53762.png" alt="kids reading books together in a cozy library setting, educational blog post feature image" />
<div class="absolute top-6 left-6 bg-accent text-dark font-black px-4 py-2 rounded-xl text-xs uppercase">New</div>
</div>
<h3 class="text-3xl font-extrabold mb-4 group-hover:text-primary transition">The Importance of Reading: How to Encourage Kids to Love Books</h3>
<p class="text-gray-500 font-medium mb-6 leading-relaxed">Simple tips to inspire a love for books in kids, from creating a cozy reading nook to choosing stories that match their interests.</p>
<a href="#" class="text-primary font-black uppercase text-xs tracking-widest flex items-center gap-2">Read More <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
<div class="lg:col-span-5 space-y-10">
<div class="flex gap-6 group cursor-pointer">
<div class="w-32 h-32 rounded-3xl overflow-hidden shrink-0">
<img class="w-full h-full object-cover group-hover:scale-105 transition" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_a27d99a8ec_e8042dfe0011d434.png" alt="kids doing memory exercises, concentration, educational activity" />
</div>
<div>
<h4 class="font-extrabold mb-2 group-hover:text-primary transition">Quick Exercises to Boost Focus and Memory in Kids</h4>
<p class="text-sm text-gray-500 font-medium mb-3">These activities are designed to be engaging, making it easier for kids of all ages.</p>
<a href="#" class="text-primary font-bold text-xs tracking-widest uppercase">Read More</a>
</div>
</div>
<div class="flex gap-6 group cursor-pointer">
<div class="w-32 h-32 rounded-3xl overflow-hidden shrink-0">
<img class="w-full h-full object-cover group-hover:scale-105 transition" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_47a7bf46af_d154b4bdff79c408.png" alt="kids doing crafts, creative arts, educational activity" />
</div>
<div>
<h4 class="font-extrabold mb-2 group-hover:text-primary transition">Crafts That Teach and Entertain at the Same Time</h4>
<p class="text-sm text-gray-500 font-medium mb-3">These projects teach essential skills like problem-solving, math, and geography.</p>
<a href="#" class="text-primary font-bold text-xs tracking-widest uppercase">Read More</a>
</div>
</div>
<div class="flex gap-6 group cursor-pointer">
<div class="w-32 h-32 rounded-3xl overflow-hidden shrink-0">
<img class="w-full h-full object-cover group-hover:scale-105 transition" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ec181e57a5_e76955fc311d0ad5.png" alt="kids laughing and learning, happy educational environment" />
</div>
<div>
<h4 class="font-extrabold mb-2 group-hover:text-primary transition">Why Kids Learn Best When They're Having a Blast</h4>
<p class="text-sm text-gray-500 font-medium mb-3">Discover how play, laughter, and engaging activities activate young minds.</p>
<a href="#" class="text-primary font-bold text-xs tracking-widest uppercase">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end articles -->
<!-- block:start footer -->
<footer id="footer" class="bg-primary/5 pt-24 pb-12 border-t border-primary/10">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
<div class="col-span-1 lg:col-span-1">
<a href="#" class="flex items-center gap-2 mb-8">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white rotate-3">
<i class="fa-solid fa-graduation-cap text-xl"></i>
</div>
<span class="text-2xl font-extrabold tracking-tight text-primary uppercase">MindPlay</span>
</a>
<p class="text-gray-500 font-medium text-sm leading-relaxed mb-10">We believe every child has a unique potential waiting to be unlocked through the power of play and fun education.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary hover:bg-primary hover:text-white transition">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary hover:bg-primary hover:text-white transition">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary hover:bg-primary hover:text-white transition">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</div>
<div>
<h5 class="font-black uppercase tracking-[0.2em] text-[11px] text-dark mb-10">Pages</h5>
<ul class="space-y-4">
<li><a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">About Us</a></li>
<li><a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">Teachers</a></li>
<li><a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">Learning Programs</a></li>
<li><a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">FAQs</a></li>
<li><a href="#" class="text-sm font-bold text-gray-500 hover:text-primary transition">Contact Us</a></li>
</ul>
</div>
<div>
<h5 class="font-black uppercase tracking-[0.2em] text-[11px] text-dark mb-10">Contact Us</h5>
<ul class="space-y-6">
<li class="flex items-start gap-4">
<div class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary shrink-0">
<i class="fa-solid fa-location-dot"></i>
</div>
<span class="text-sm font-bold text-gray-500">4512 St. No.99, Play City, ID 28289</span>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary shrink-0">
<i class="fa-solid fa-phone"></i>
</div>
<span class="text-sm font-bold text-gray-500">+9781-5523-308</span>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 bg-white border border-gray-100 rounded-xl flex items-center justify-center text-primary shrink-0">
<i class="fa-solid fa-envelope"></i>
</div>
<span class="text-sm font-bold text-gray-500">hello@domain.com</span>
</li>
</ul>
</div>
<div class="bg-primary p-8 rounded-[3rem] text-white relative overflow-hidden group">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
<h5 class="text-xl font-extrabold mb-4 relative z-10">Build Confidence And a Love for <span class="text-accent">Learning</span></h5>
<div class="relative h-32 rounded-2xl overflow-hidden mb-6">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6f7e392ae2_c49c6895322d4fb9.png" alt="kids playing with building blocks, educational toys, happy faces" />
</div>
<button class="w-full bg-white text-primary py-4 rounded-2xl text-xs font-black uppercase tracking-widest hover:bg-accent hover:text-dark transition">Enroll Now</button>
</div>
</div>
<div class="pt-8 border-t border-primary/10 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-[11px] font-black uppercase tracking-widest text-gray-400">Copyright © 2024 MINDPLAY. All Rights Reserved.</p>
<div class="flex gap-8 text-[11px] font-black uppercase tracking-widest text-gray-400">
<a href="#" class="hover:text-primary transition">Privacy Policy</a>
<a href="#" class="hover:text-primary transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access
