<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Taal Nirtya Kuteer – Dance Class Registration</title>
<script src=”https://cdn.tailwindcss.com”></script>
<script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>
<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=Poppins:wght@300;400;500;600;700&display=swap” rel=”stylesheet”>
<!– Chosen Palette: Nritya Harmony –>
<!– Application Structure Plan: The application is structured as a single-page narrative, guiding the user from inspiration to action. It starts with a welcoming Hero section to capture interest, followed by an ‘About’ section to build trust. The ‘Our Classes’ section is the interactive core, allowing users to explore dance styles in a non-linear way. A ‘Why Choose Us’ section reinforces the value proposition. Finally, the user is led to a clear ‘Registration’ call-to-action. This top-down funnel structure is designed to be intuitive, minimizing clicks and scrolling to make information easily digestible and the registration process seamless. –>
<!– Visualization & Content Choices: Dance styles are presented as interactive cards (HTML/CSS/JS) for tactile exploration. A Donut chart (Chart.js) is used to visually represent class popularity, offering a quick, data-driven insight. This is more engaging than a simple list. Key selling points are presented as a grid of feature blocks with icons for quick scanning. This mix of interactive elements, data visualization, and concise text blocks serves the goal of informing and engaging the user effectively, guiding them towards registration. –>
<!– CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. –>
<style>
body {
font-family: ‘Poppins’, sans-serif;
background-color: #FFF8F0; /* Warm Neutral Background */
color: #4A2E2B; /* Deep Brown for Text */
}
.bg-primary { background-color: #D17A22; } /* Saffron Accent */
.bg-secondary { background-color: #8C3B3B; } /* Maroon Accent */
.text-primary { color: #D17A22; }
.text-secondary { color: #8C3B3B; }
.border-primary { border-color: #D17A22; }
.nav-link {
transition: color 0.3s, border-bottom-color 0.3s;
border-bottom: 2px solid transparent;
}
.nav-link:hover {
color: #D17A22;
border-bottom-color: #D17A22;
}
.chart-container {
position: relative;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
</style>
</head>
<body>
<header class=”bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50″>
<nav class=”container mx-auto px-6 py-4 flex justify-between items-center”>
<a href=”#” class=”text-2xl font-bold text-secondary”>Taal Nirtya Kuteer</a>
<div class=”hidden md:flex space-x-8″>
<a href=”#about” class=”nav-link”>About</a>
<a href=”#classes” class=”nav-link”>Classes</a>
<a href=”#why-us” class=”nav-link”>Why Us</a>
<a href=”#register” class=”nav-link”>Register</a>
</div>
<button id=”mobile-menu-button” class=”md:hidden text-2xl”>☰</button>
</nav>
<div id=”mobile-menu” class=”hidden md:hidden px-6 pb-4″>
<a href=”#about” class=”block py-2″>About</a>
<a href=”#classes” class=”block py-2″>Classes</a>
<a href=”#why-us” class=”block py-2″>Why Us</a>
<a href=”#register” class=”block py-2″>Register</a>
</div>
</header>
<main>
<section id=”hero” class=”min-h-[60vh] flex items-center bg-secondary/10″>
<div class=”container mx-auto px-6 text-center”>
<h1 class=”text-4xl md:text-6xl font-bold text-secondary mb-4″>Where Rhythm Meets Grace</h1>
<p class=”text-lg md:text-xl mb-8″>Celebrating India’s rich cultural heritage through the art of dance. Join our vibrant community!</p>
<a href=”#register” class=”bg-primary text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-90 transition-transform transform hover:scale-105″>Register Now</a>
</div>
</section>
<section id=”about” class=”py-16 sm:py-24″>
<div class=”container mx-auto px-6″>
<h2 class=”text-3xl font-bold text-center mb-12 text-secondary”>About Taal Nirtya Kuteer</h2>
<div class=”grid md:grid-cols-2 gap-12 items-center”>
<div>
<h3 class=”text-2xl font-semibold mb-4 text-primary”>Our Mission</h3>
<p class=”mb-4″>Established in 2017 by esteemed Kathak dancer Geetika Sharma, our mission is to celebrate and preserve India’s rich cultural heritage. We provide high-quality dance education, fostering creativity, discipline, and self-expression in students of all ages and skill levels.</p>
<h3 class=”text-2xl font-semibold mb-4 text-primary”>About the Founder</h3>
<p>Geetika Sharma is a visionary in the world of dance. Her profound passion for traditional dance forms, particularly Kathak, has transformed into a lifelong commitment. With rigorous training under esteemed gurus and captivating performances across the nation, she inspires a deep appreciation for our cultural heritage in every student.</p>
</div>
<div class=”bg-white p-8 rounded-lg shadow-lg”>
<img src=”https://placehold.co/500×500/FFF8F0/4A2E2B?text=Geetika+Sharma” alt=”Founder Geetika Sharma” class=”rounded-full mx-auto w-48 h-48 mb-6 object-cover”>
<p class=”text-center font-semibold text-xl text-secondary”>Geetika Sharma</p>
<p class=”text-center text-primary”>Founder & Principal Instructor</p>
</div>
</div>
</div>
</section>
<section id=”classes” class=”py-16 sm:py-24 bg-secondary/10″>
<div class=”container mx-auto px-6″>
<h2 class=”text-3xl font-bold text-center mb-12 text-secondary”>Explore Our Classes</h2>
<p class=”max-w-3xl mx-auto text-center mb-12″>We offer a diverse range of classes for all ages and skill levels, available both offline and online. Click on a style to learn more about what we offer. Each class is designed to be engaging, fun, and a wonderful way to connect with our cultural roots.</p>
<div id=”class-cards-container” class=”grid md:grid-cols-2 lg:grid-cols-4 gap-8″>
</div>
</div>
</section>
<section id=”why-us” class=”py-16 sm:py-24″>
<div class=”container mx-auto px-6″>
<h2 class=”text-3xl font-bold text-center mb-12 text-secondary”>Why Choose Us?</h2>
<div class=”grid md:grid-cols-2 lg:grid-cols-3 gap-8″>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>👩🏫</div>
<h3 class=”text-xl font-semibold mb-2″>Expert Instructors</h3>
<p>Learn from trained professionals with stage and industry experience.</p>
</div>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>👨👩👧👦</div>
<h3 class=”text-xl font-semibold mb-2″>All Age Groups</h3>
<p>Our programs are thoughtfully designed for toddlers, teens, and adults.</p>
</div>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>🎭</div>
<h3 class=”text-xl font-semibold mb-2″>Cultural & Modern Mix</h3>
<p>From classical Kathak to trendy Bollywood, we blend tradition with today’s style.</p>
</div>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>🌟</div>
<h3 class=”text-xl font-semibold mb-2″>Performance Ready</h3>
<p>Get stage-ready with regular showcases, competitions, and events.</p>
</div>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>💪</div>
<h3 class=”text-xl font-semibold mb-2″>Skill + Confidence</h3>
<p>We focus on talent building along with personality grooming.</p>
</div>
<div class=”bg-white p-6 rounded-lg shadow-md text-center”>
<div class=”text-4xl mb-4 text-primary”>🧘♀️</div>
<h3 class=”text-xl font-semibold mb-2″>Balance Mind & Body</h3>
<p>Nurture creativity and confidence through the discipline of dance and art.</p>
</div>
</div>
<div class=”mt-16″>
<h3 class=”text-2xl font-bold text-center mb-8 text-secondary”>Class Popularity</h3>
<div class=”chart-container”>
<canvas id=”popularityChart”></canvas>
</div>
</div>
</div>
</section>
<section id=”register” class=”py-16 sm:py-24 bg-secondary/10″>
<div class=”container mx-auto px-6″>
<h2 class=”text-3xl font-bold text-center mb-12 text-secondary”>Register for a Class</h2>
<p class=”max-w-3xl mx-auto text-center mb-12″>Ready to start your dance journey? Fill out the form below to register for our classes. We’re excited to welcome you to our community and look forward to dancing with you!</p>
<form class=”max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-lg”>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label for=”fullName” class=”block mb-2 font-medium”>Full Name</label>
<input type=”text” id=”fullName” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary” required>
</div>
<div>
<label for=”dob” class=”block mb-2 font-medium”>Date of Birth</label>
<input type=”date” id=”dob” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary” required>
</div>
<div>
<label for=”guardianName” class=”block mb-2 font-medium”>Parent/Guardian Name (if minor)</label>
<input type=”text” id=”guardianName” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary”>
</div>
<div>
<label for=”phone” class=”block mb-2 font-medium”>Phone Number</label>
<input type=”tel” id=”phone” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary” required>
</div>
</div>
<div class=”mt-6″>
<label for=”email” class=”block mb-2 font-medium”>Email Address</label>
<input type=”email” id=”email” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary” required>
</div>
<div class=”mt-6″>
<label class=”block mb-2 font-medium”>Dance Style Interested In</label>
<select id=”danceStyle” class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary”>
<option>Kathak</option>
<option>Bollywood</option>
<option>Contemporary</option>
<option>Hip-Hop</option>
<option>Zumba</option>
<option>Other</option>
</select>
</div>
<div class=”mt-6″>
<label class=”block mb-2 font-medium”>Experience Level</label>
<div class=”flex space-x-4″>
<label><input type=”radio” name=”experience” value=”beginner” class=”mr-2″>Beginner</label>
<label><input type=”radio” name=”experience” value=”intermediate” class=”mr-2″>Intermediate</label>
<label><input type=”radio” name=”experience” value=”advanced” class=”mr-2″>Advanced</label>
</div>
</div>
<div class=”mt-6″>
<label for=”message” class=”block mb-2 font-medium”>Message / Questions</label>
<textarea id=”message” rows=”4″ class=”w-full p-3 border rounded-md focus:ring-primary focus:border-primary”></textarea>
</div>
<div class=”mt-8 text-center”>
<button type=”submit” class=”bg-primary text-white font-bold py-3 px-12 rounded-full hover:bg-opacity-90 transition-transform transform hover:scale-105″>Submit Registration</button>
</div>
</form>
</div>
</section>
</main>
<footer class=”bg-secondary text-white py-12″>
<div class=”container mx-auto px-6 text-center”>
<h3 class=”text-2xl font-bold mb-4″>Taal Nirtya Kuteer</h3>
<p class=”mb-2″>C1/6-GF4 DLF ANKUR VIHAR, LONI GHAZIABAD-201102</p>
<p class=”mb-2″><strong>Phone:</strong> +91 9871754496 | +91 8800193339</p>
<p class=”mb-4″><strong>Email:</strong> geetmusic20@gmail.com | taalnrityaindia@gmail.com</p>
<p>© 2024 Taal Nirtya Kuteer. All Rights Reserved.</p>
</div>
</footer>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const mobileMenuButton = document.getElementById(‘mobile-menu-button’);
const mobileMenu = document.getElementById(‘mobile-menu’);
mobileMenuButton.addEventListener(‘click’, () => {
mobileMenu.classList.toggle(‘hidden’);
});
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
document.querySelector(this.getAttribute(‘href’)).scrollIntoView({
behavior: ‘smooth’
});
if(mobileMenu.classList.contains(‘hidden’) === false){
mobileMenu.classList.add(‘hidden’);
}
});
});
const classData = [
{
title: ‘Kathak’,
description: ‘Learn the beautiful Indian classical dance form with expert instructors. Focus on intricate footwork, graceful movements, and expressive storytelling.’,
image: ‘https://placehold.co/400×300/8C3B3B/FFF8F0?text=Kathak’
},
{
title: ‘Bollywood Dance’,
description: ‘Experience the vibrant energy of Bollywood with our fun and engaging classes. Learn popular choreography from the latest movies.’,
image: ‘https://placehold.co/400×300/D17A22/FFF8F0?text=Bollywood’
},
{
title: ‘Contemporary’,
description: ‘Explore freedom of movement and self-expression. This class blends elements of modern, jazz, lyrical, and classical ballet.’,
image: ‘https://placehold.co/400×300/4A2E2B/FFF8F0?text=Contemporary’
},
{
title: ‘Zumba Fitness’,
description: ‘A fun, high-energy fitness program that combines Latin and international music with dance moves. A great way to blend fun with fitness!’,
image: ‘https://placehold.co/400×300/D17A22/FFF8F0?text=Zumba’
}
];
const classCardsContainer = document.getElementById(‘class-cards-container’);
classData.forEach(danceClass => {
const card = document.createElement(‘div’);
card.className = ‘bg-white rounded-lg shadow-lg overflow-hidden cursor-pointer transform hover:-translate-y-2 transition-transform’;
card.innerHTML = `
<img src=”${danceClass.image}” alt=”${danceClass.title}” class=”w-full h-48 object-cover”>
<div class=”p-6″>
<h3 class=”text-xl font-bold mb-2 text-secondary”>${danceClass.title}</h3>
<div class=”details hidden”>
<p class=”text-gray-700″>${danceClass.description}</p>
</div>
<p class=”text-primary font-semibold mt-2 read-more”>Click to learn more</p>
</div>
`;
classCardsContainer.appendChild(card);
card.addEventListener(‘click’, () => {
const details = card.querySelector(‘.details’);
const readMore = card.querySelector(‘.read-more’);
details.classList.toggle(‘hidden’);
readMore.textContent = details.classList.contains(‘hidden’) ? ‘Click to learn more’ : ‘Show less’;
});
});
const ctx = document.getElementById(‘popularityChart’).getContext(‘2d’);
const popularityChart = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: [‘Kathak’, ‘Bollywood’, ‘Contemporary’, ‘Zumba’, ‘Hip-Hop’],
datasets: [{
label: ‘Class Popularity’,
data: [35, 30, 15, 12, 8],
backgroundColor: [
‘#8C3B3B’,
‘#D17A22’,
‘#4A2E2B’,
‘#E8A87C’,
‘#C38D9E’
],
borderColor: ‘#FFF8F0’,
borderWidth: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: ‘top’,
},
title: {
display: false,
text: ‘Class Popularity Distribution’
}
}
}
});
});
</script>
</body>
</html>