| 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: .07s }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .11s }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .15s }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .19s }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .23s }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .27s }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .31s }
.reveal-stagger.is-visible > *:nth-child(9){ transition-delay: .35s }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay: .39s }
@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%; }
.step-line{ background: repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 12px); width: 2px; }
::selection{ background: var(--saffron); color: white; }
</style>
</head>
<body class="font-body antialiased">
<!-- ============ NAV ============ -->
@include('components.site-header')
<!-- ============ HERO ============ -->
<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">Membership</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">Become Part of India's Yoga Teacher Community</p>
<p class="mt-6 text-sand/75 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
चाहे आप योग शिक्षक हों, संस्थान हों, थेरेपिस्ट, प्रशिक्षक, छात्र या वेलनेस उत्साही — महासंघ की
सदस्यता आपको एक राष्ट्रीय पहचान और मंच प्रदान करती है।
</p>
</div>
</section>
<!-- ============ WHO CAN JOIN ============ -->
<section 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">Who Can Join</p>
<h2 class="font-display text-3xl md:text-[2.4rem] font-semibold text-indigo leading-tight">कौन जुड़ सकता है</h2>
</div>
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5 reveal-stagger">
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">योग शिक्षक</span>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">योग संस्थान</span>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M20.8 4.6a5 5 0 0 0-7.1 0L12 6.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 20.3l8.8-8.6a5 5 0 0 0 0-7.1z"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">थेरेपिस्ट</span>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">प्रशिक्षक</span>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">छात्र</span>
</div>
<div class="card-lift bg-white border border-indigo/10 rounded-2xl p-6 flex items-center gap-4">
<span class="w-11 h-11 rounded-full bg-saffron/15 flex items-center justify-center flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
</span>
<span class="font-display text-base text-indigo font-semibold">वेलनेस उत्साही</span>
</div>
</div>
</div>
</section>
<!-- ============ MEMBERSHIP BENEFITS ============ -->
<section id="labh" class="px-5 md:px-8 py-20 md:py-28 bg-indigo relative overflow-hidden">
<div class="absolute left-1/2 -translate-x-1/2 -bottom-32 w-[36rem] h-[36rem] rounded-full border border-gold/10"></div>
<div class="max-w-6xl mx-auto relative">
<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-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 sm:grid-cols-2 lg:grid-cols-2 gap-5 reveal-stagger">
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">01</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">आधिकारिक सदस्यता प्रमाण-पत्र</h3>
<p class="text-sand/55 text-sm leading-relaxed">महासंघ की मान्यता का औपचारिक प्रमाण।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">02</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">डिजिटल आईडी कार्ड</h3>
<p class="text-sand/55 text-sm leading-relaxed">ऑनलाइन सत्यापन-योग्य डिजिटल पहचान पत्र।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">03</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">पेशेवर मान्यता</h3>
<p class="text-sand/55 text-sm leading-relaxed">राष्ट्रीय स्तर पर पहचानी जाने वाली व्यावसायिक हैसियत।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">04</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">कार्यक्रमों में भागीदारी</h3>
<p class="text-sand/55 text-sm leading-relaxed">राष्ट्रीय सम्मेलनों एवं आयोजनों में सहभागिता का अवसर।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">05</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">प्रशिक्षण के अवसर</h3>
<p class="text-sand/55 text-sm leading-relaxed">कार्यशालाओं एवं सतत शिक्षा कार्यक्रमों तक पहुंच।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">06</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">नेटवर्किंग प्लेटफॉर्म</h3>
<p class="text-sand/55 text-sm leading-relaxed">देशभर के योग शिक्षकों एवं संस्थानों से जुड़ाव।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">07</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">नेतृत्व के अवसर</h3>
<p class="text-sand/55 text-sm leading-relaxed">संगठन की गतिविधियों में नेतृत्व की भूमिका निभाने का मौका।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">08</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">विशेष संसाधन</h3>
<p class="text-sand/55 text-sm leading-relaxed">सदस्यों के लिए आरक्षित सामग्री एवं संसाधन।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">09</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">नियमित अपडेट</h3>
<p class="text-sand/55 text-sm leading-relaxed">संगठन की गतिविधियों एवं अवसरों की समय-समय पर जानकारी।</p>
</div>
</div>
<div class="bg-white/[.04] border border-sand/10 rounded-2xl p-6 flex gap-4 card-lift">
<span class="text-gold font-mono text-sm mt-0.5">10</span>
<div>
<h3 class="font-display text-base text-sand font-semibold mb-1">करियर विकास सहयोग</h3>
<p class="text-sand/55 text-sm leading-relaxed">व्यावसायिक विकास एवं करियर वृद्धि में निरंतर सहयोग।</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ HOW TO JOIN ============ -->
<section class="px-5 md:px-8 py-20 md:py-28 bg-sand">
<div class="max-w-3xl 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">How to Join</p>
<h2 class="font-display text-3xl md:text-[2.4rem] font-semibold text-indigo leading-tight">सदस्यता कैसे लें</h2>
</div>
<div class="max-w-xl mx-auto mt-14 reveal-stagger">
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-saffron text-white font-mono font-bold flex items-center justify-center flex-shrink-0">1</div>
<div class="step-line flex-1 my-2"></div>
</div>
<div class="pb-10">
<h3 class="font-display text-lg text-indigo font-semibold mb-1.5">आवेदन पत्र भरें</h3>
<p class="text-ink/65 text-sm leading-relaxed">अपनी श्रेणी (शिक्षक, संस्थान, छात्र आदि) के अनुसार आवेदन विवरण जमा करें।</p>
</div>
</div>
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-saffron text-white font-mono font-bold flex items-center justify-center flex-shrink-0">2</div>
<div class="step-line flex-1 my-2"></div>
</div>
<div class="pb-10">
<h3 class="font-display text-lg text-indigo font-semibold mb-1.5">दस्तावेज़ सत्यापन</h3>
<p class="text-ink/65 text-sm leading-relaxed">महासंघ की टीम द्वारा आपके विवरण एवं दस्तावेज़ों की समीक्षा की जाती है।</p>
</div>
</div>
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-saffron text-white font-mono font-bold flex items-center justify-center flex-shrink-0">3</div>
</div>
<div>
<h3 class="font-display text-lg text-indigo font-semibold mb-1.5">प्रमाण-पत्र एवं डिजिटल आईडी</h3>
<p class="text-ink/65 text-sm leading-relaxed">स्वीकृति के पश्चात सदस्यता प्रमाण-पत्र एवं डिजिटल आईडी कार्ड जारी किया जाता है।</p>
</div>
</div>
</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>