| Server IP : 139.59.63.204 / Your IP : 216.73.217.62 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-s-1vcpu-1gb-blr1-01 6.8.0-110-generic #110-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 19 15:09:20 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/abyogasms.com/resources/views/ |
Upload File : |
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>हमारी सेवाएं | अखिल भारतीय योग शिक्षक महासंघ (ABYOGASMS Foundation)</title>
<meta name="description" content="संस्थान संबद्धता, योग शिक्षक पंजीकरण, छात्र प्रमाणन सहायता, संकाय विकास कार्यक्रम, राष्ट्रीय सम्मेलन और डिजिटल सत्यापन — ABYOGASMS Foundation की सेवाएं।" />
<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=Noto+Serif+Devanagari:wght@500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
:root{
--indigo: #1B2A4A;
--indigo-deep: #121D35;
--saffron: #E8742C;
--gold: #D9A441;
--sand: #FBF6EE;
--ink: #23201B;
}
html { scroll-behavior: smooth; }
body { background: var(--sand); color: var(--ink); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .03s }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .08s }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .13s }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .18s }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .23s }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .28s }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .33s }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .38s }
.reveal-stagger.is-visible > *:nth-child(9){ transition-delay: .43s }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay: .48s }
@media (prefers-reduced-motion: reduce){
html { scroll-behavior: auto; }
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.sun-rise, .arc-glow, .float-ring { animation: none !important; }
}
.hero-sky{
background: radial-gradient(120% 90% at 50% 105%, #3a3167 0%, var(--indigo) 42%, var(--indigo-deep) 100%);
}
.sun-rise{
animation: sunrise 2.4s cubic-bezier(.22,.9,.25,1) forwards;
animation-delay: .25s;
opacity: 0;
}
@keyframes sunrise{
0% { transform: translateY(48px) scale(.88); opacity: 0; }
60% { opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.arc-glow{ animation: glowpulse 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes glowpulse{ 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.float-ring{ animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-9px); } }
.card-lift{ transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(27,42,74,.35); border-color: var(--saffron); }
.divider-mark::before{
content:"";
display:block;
width: 46px; height: 3px;
background: linear-gradient(90deg, var(--saffron), var(--gold));
border-radius: 2px;
margin-bottom: 1.1rem;
}
.stamp-ring{ background: conic-gradient(from 180deg, var(--gold), var(--saffron), var(--gold)); }
.nav-link{ position: relative; }
.nav-link::after{
content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
background: var(--saffron); transition: width .3s ease;
}
.nav-link:hover::after{ width: 100%; }
.nav-link.active::after{ width: 100%; }
.reason-num{ -webkit-text-stroke: 1.2px var(--gold); color: transparent; }
::selection{ background: var(--saffron); color: white; }
</style>
</head>
<body class="font-body antialiased">
<!-- ============ NAV ============ -->
@include('components.site-header')
<!-- ============ HERO / PAGE HEADER ============ -->
<section class="hero-sky relative overflow-hidden pt-36 pb-20 md:pt-44 md:pb-28 px-5 md:px-8">
<div class="float-ring absolute -left-16 top-24 w-56 h-56 rounded-full border border-gold/20"></div>
<div class="float-ring absolute right-[-4rem] bottom-6 w-64 h-64 rounded-full border border-saffron/20" style="animation-delay:1.2s"></div>
<div class="max-w-4xl mx-auto relative z-10 text-center">
<p class="font-mono text-[11px] md:text-xs tracking-[0.28em] uppercase text-gold/90 mb-5">
The Difference
</p>
<h1 class="font-display text-[2rem] leading-[1.2] sm:text-4xl md:text-[3rem] font-semibold text-sand max-w-3xl mx-auto">
हमें क्यों चुनें?
</h1>
<p class="mt-3 font-display text-gold text-lg md:text-xl">Why Choose ABYOGASMS Foundation?</p>
<p class="mt-6 text-sand/75 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
पारदर्शिता, राष्ट्रीय पहचान और निरंतर सहयोग — यही वे स्तंभ हैं जिन पर महासंघ हर योग शिक्षक
और संस्थान के साथ अपना संबंध खड़ा करता है।
</p>
</div>
</section>
<!-- ============ 10 REASONS ============ -->
<section id="reasons" class="px-5 md:px-8 py-20 md:py-28 bg-sand">
<div class="max-w-6xl mx-auto">
<div class="max-w-2xl mx-auto text-center reveal">
<div class="divider-mark mx-auto"></div>
<p class="font-mono text-xs tracking-[0.2em] uppercase text-saffron-deep mb-4">10 कारण</p>
<h2 class="font-display text-3xl md:text-[2.4rem] font-semibold text-indigo leading-tight">
महासंघ के साथ जुड़ने के 10 कारण
</h2>
</div>
<div class="mt-14 grid sm:grid-cols-2 lg:grid-cols-2 gap-6 reveal-stagger">
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">01</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">राष्ट्रीय पेशेवर नेटवर्क</h3>
<p class="text-ink/70 text-sm leading-relaxed">देशभर के योग शिक्षकों और संस्थानों को एक मान्यता-प्राप्त पेशेवर समुदाय से जोड़ता है, जिससे सहयोग, संपर्क और विश्वसनीयता का दायरा किसी एक व्यक्ति या संस्थान से कहीं बड़ा हो जाता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">02</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">पारदर्शी पंजीकरण प्रणाली</h3>
<p class="text-ink/70 text-sm leading-relaxed">हर पंजीकरण एक विशिष्ट संख्या के साथ दर्ज होता है और कभी भी ऑनलाइन सत्यापित किया जा सकता है, जिससे विश्वास केवल कहे गए शब्दों पर नहीं, दस्तावेज़ पर टिका होता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">03</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">संस्थान संबद्धता सहयोग</h3>
<p class="text-ink/70 text-sm leading-relaxed">दस्तावेज़ीकरण से लेकर आधिकारिक मान्यता तक, संबद्धता की पूरी प्रक्रिया में संस्थानों को व्यावहारिक सहयोग एवं मार्गदर्शन मिलता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">04</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">शिक्षक पहचान एवं सम्मान</h3>
<p class="text-ink/70 text-sm leading-relaxed">डिजिटल आईडी और पंजीकरण संख्या हर योग शिक्षक को एक राष्ट्रीय स्तर पर पहचानी जाने वाली पेशेवर पहचान प्रदान करती है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">05</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">कार्यशालाएं एवं सतत शिक्षा</h3>
<p class="text-ink/70 text-sm leading-relaxed">नियमित कार्यशालाओं, संगोष्ठियों और सतत व्यावसायिक शिक्षा के माध्यम से शिक्षकों का ज्ञान और कौशल निरंतर अद्यतन रहता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">06</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">राष्ट्रीय एवं अंतर्राष्ट्रीय आयोजन</h3>
<p class="text-ink/70 text-sm leading-relaxed">राष्ट्रीय सम्मेलनों, अंतर्राष्ट्रीय योग दिवस समारोहों और वेलनेस सम्मिट में सहभागिता का अवसर मिलता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">07</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">डिजिटल प्रमाण-पत्र सत्यापन</h3>
<p class="text-ink/70 text-sm leading-relaxed">प्रमाण-पत्र, संबद्धता एवं पंजीकरण को ऑनलाइन सत्यापित किया जा सकता है, जिससे गलत प्रस्तुति की संभावना कम होती है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">08</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">शोध एवं प्रकाशन के अवसर</h3>
<p class="text-ink/70 text-sm leading-relaxed">योग से संबंधित शोध, लेखन एवं प्रकाशन में योगदान करने और उससे जुड़ने के लिए एक मंच उपलब्ध कराया जाता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">09</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">सामुदायिक स्वास्थ्य पहल</h3>
<p class="text-ink/70 text-sm leading-relaxed">जन-जागरूकता एवं सामुदायिक स्वास्थ्य अभियानों के माध्यम से योग को समाज के हर वर्ग तक पहुँचाने का प्रयास किया जाता है।</p>
</div>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-7 flex gap-5">
<span class="reason-num font-display text-4xl font-bold flex-shrink-0">10</span>
<div>
<h3 class="font-display text-lg font-semibold text-indigo mb-2">समर्पित सहयोग टीम</h3>
<p class="text-ink/70 text-sm leading-relaxed">पंजीकरण, नवीनीकरण एवं सामान्य प्रश्नों में सदस्यों की सहायता के लिए एक समर्पित टीम सदैव उपलब्ध रहती है।</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FOR TEACHERS / FOR INSTITUTES ============ -->
<section id="members" class="px-5 md:px-8 py-20 md:py-28 bg-indigo-deep relative overflow-hidden">
<div class="absolute -right-24 -top-24 w-96 h-96 rounded-full border border-gold/10"></div>
<div class="max-w-6xl mx-auto relative">
<div class="max-w-2xl reveal">
<div class="divider-mark"></div>
<p class="font-mono text-xs tracking-[0.2em] uppercase text-gold mb-4">Membership Benefits</p>
<h2 class="font-display text-3xl md:text-[2.4rem] font-semibold text-sand leading-tight">आपको क्या मिलता है</h2>
</div>
<div class="mt-14 grid md:grid-cols-2 gap-6 reveal-stagger">
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-8">
<p class="font-mono text-[11px] tracking-[0.18em] uppercase text-gold mb-5">योग शिक्षकों के लिए</p>
<ul class="space-y-3 text-sm text-sand/80">
<li class="flex gap-2.5"><span class="text-gold">✓</span>आधिकारिक सदस्यता प्रमाण-पत्र</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>डिजिटल पहचान पत्र</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>पेशेवर मान्यता एवं पहचान</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>प्रशिक्षण एवं कार्यशाला में भागीदारी</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>नेतृत्व एवं करियर विकास सहयोग</li>
</ul>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-8">
<p class="font-mono text-[11px] tracking-[0.18em] uppercase text-gold mb-5">संस्थानों के लिए</p>
<ul class="space-y-3 text-sm text-sand/80">
<li class="flex gap-2.5"><span class="text-gold">✓</span>आधिकारिक संबद्धता मान्यता</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>राष्ट्रीय स्तर पर दृश्यता</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>छात्र प्रमाणन में सहयोग</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>नेटवर्किंग एवं संसाधन उपलब्धता</li>
<li class="flex gap-2.5"><span class="text-gold">✓</span>नियमित अपडेट एवं सूचनाएं</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============ QUOTE ============ -->
<section class="px-5 md:px-8 py-20 md:py-24 bg-sand">
<div class="max-w-3xl mx-auto text-center reveal">
<span class="font-display text-6xl text-gold/40 leading-none">“</span>
<p class="font-display italic text-xl md:text-2xl text-indigo leading-relaxed -mt-5">
योग शिक्षकों के सम्मान, स्वाभिमान एवं सुरक्षित भविष्य के लिए निरंतर संघर्ष एवं सेवा।
</p>
<p class="mt-5 font-mono text-xs tracking-[0.2em] uppercase text-saffron-deep">महासंघ का संकल्प</p>
</div>
</section>
<!-- ============ CTA ============ -->
@include('components.cta')
<!-- ============ FOOTER ============ -->
@include('components.site-footer')
@include('components.membership-modal')
<script>
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
const isOpen = !mobileMenu.classList.contains('hidden');
mobileMenu.classList.toggle('hidden');
menuBtn.setAttribute('aria-expanded', String(!isOpen));
});
document.querySelectorAll('.mnav').forEach(a => {
a.addEventListener('click', () => mobileMenu.classList.add('hidden'));
});
const nav = document.getElementById('site-nav');
const onScroll = () => {
if (window.scrollY > 40) {
nav.classList.add('bg-indigo-deep/95', 'backdrop-blur', 'shadow-lg', 'shadow-black/10');
} else {
nav.classList.remove('bg-indigo-deep/95', 'backdrop-blur', 'shadow-lg', 'shadow-black/10');
}
};
window.addEventListener('scroll', onScroll);
onScroll();
const revealEls = document.querySelectorAll('.reveal, .reveal-stagger');
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
io.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
revealEls.forEach(el => io.observe(el));
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>