A modern, responsive landing page for TAK12 - Vietnam's comprehensive K-12 online learning platform.

• Comprehensive K-12 Education: Math and English courses for grades 1-12
• International Certifications: Cambridge, TOEFL, IELTS preparation courses
• Entrance Exam Prep: Specialized courses for grade 6, grade 10, and university entrance exams
• Curriculum Integration: Supports popular Vietnamese textbooks (Kết nối tri thức, Cánh diều, Global Success)

• Responsive Design: Mobile-first approach optimized for all devices
• Interactive Elements:
  • Collapsible FAQ section with smooth animations
  • Course catalog modal with tabbed navigation
  • Smooth scrolling navigation
  • Copy-to-clipboard promo code functionality
• Video Integration: YouTube introduction video with privacy-focused nocookie domain
• Visual Feedback: Hover effects, loading animations, and user interaction feedback

• Promotional Features:
  • Prominent discount code (DSMANHTUAN) with 10% off guarantee
  • Pricing disclaimers explaining discount permanence
  • Multiple CTA buttons throughout the page
• Course Showcase: Three featured courses with detailed pricing and purchase buttons
• Comprehensive Course Catalog: Modal with 30+ courses across 5 categories

Visit the live site: TAK12 Landing Page

• HTML5: Semantic markup with ARIA accessibility features
• CSS3: Modern styling with CSS Grid, Flexbox, custom properties, and animations
• JavaScript: Interactive features, intersection observers, and smooth UX enhancements

• SEO Optimized:
  • Comprehensive meta tags and Open Graph implementation
  • JSON-LD structured data for educational organization
  • FAQ schema for rich snippets
  • Twitter Card integration
• Analytics: PostHog integration for user behavior tracking and insights
• Performance: Core Web Vitals optimization, lazy loading, preconnect hints

• Image CDN: jsDelivr CDN via GitHub for global image delivery
• Font Optimization: Google Fonts with preconnect for performance
• Social Media Preview: Custom feature images for Open Graph and Twitter Cards

• Mobile-First: Optimized layout starting from 320px width
• Breakpoints: 768px (tablet) and 1024px (desktop) with fluid scaling
• Touch-Friendly: Large tap targets and mobile-optimized interactions
• Cross-Browser: Compatible with modern browsers including Safari, Chrome, Firefox

• Educational Organization schema for TAK12
• Course offerings with pricing information
• FAQ schema for rich search results
• LocalBusiness schema for Vietnam market

• Open Graph tags for Facebook, LinkedIn sharing
• Twitter Card support with large image previews
• Custom feature images served via CDN
• Optimized meta descriptions and titles

• Consistent ?ref=njg2odn parameter across all TAK12 links
• Trackable course purchase buttons
• Analytics integration for conversion tracking

1. Clone the repository:

git clone https://github.com/tuantmdev/tak12.git
cd tak12

2. Serve locally:

# Simply open index.html in your browser

tak12/
├── index.html          # Main landing page
├── styles.css          # Complete styling with 2025 color trends
├── script.js           # Interactive functionality
├── images/             # Feature images for social media
│   ├── feature_desktop.png
│   └── feature_mobile.png
├── README.md           # This file
└── CLAUDE.md          # Development instructions

This site is deployed using GitHub Pages with automatic deployment:

• Any push to main branch triggers automatic deployment
• Live at: https://tuantmdev.github.io/tak12/
• Custom domain supported via CNAME file

• User Behavior: Page views, interactions, conversion tracking
• Privacy-Focused: Identified users only, GDPR compliant
• Custom Events: CTA clicks, promo code usage, course selections

• Core Web Vitals: Optimized for LCP, FID, CLS metrics
• Loading Performance: Preconnect hints, optimized assets
• SEO Tracking: Rich snippets, search appearance monitoring

• Primary: Mocha (#A47864) - warm, trustworthy
• Secondary: Terracotta (#C77B5B) - energetic accent
• Backgrounds: Warm whites and creams for comfort
• Success: Sage green for positive actions
• Typography: Deep brown for excellent readability

• Hover Effects: Subtle transforms and color transitions
• Loading States: Skeleton screens and progressive disclosure
• Micro-animations: Scroll-triggered reveals, button feedback
• Accessibility: High contrast ratios, keyboard navigation

This is a marketing landing page for TAK12. For:

• Course Content Issues: Contact TAK12 directly
• Technical Issues: Open GitHub issue
• Feature Requests: Submit via GitHub issues

This landing page is created for promotional purposes. All educational content and services are provided by TAK12.

• ✅ Added PostHog analytics integration
• ✅ Implemented jsDelivr CDN for global image delivery
• ✅ Enhanced course catalog with 30+ specific course offerings
• ✅ Added pricing disclaimers and transparency features
• ✅ Optimized mobile responsive design with multiple breakpoint fixes
• ✅ Integrated comprehensive FAQ section with 8 questions
• ✅ Added YouTube video introduction with privacy controls

Built with ❤️ using Claude Code | Deployed via GitHub Pages | Analytics by PostHog