| 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 : |
@include('components.site-head')
<style>
:root{
--indigo: #1B2A4A;
--indigo-deep: #121D35;
--saffron: #E8742C;
--gold: #D9A441;
--sand: #FBF6EE;
--ink: #23201B;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { background: var(--sand); color: var(--ink); }
section[id] { scroll-margin-top: 6rem; }
.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: .09s }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .15s }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .21s }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .27s }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .33s }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .39s }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .45s }
.reveal-stagger.is-visible > *:nth-child(9){ transition-delay: .51s }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay: .57s }
@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 sunrise signature */
.hero-sky{
background: radial-gradient(120% 90% at 50% 105%, #3a3167 0%, var(--indigo) 42%, var(--indigo-deep) 100%);
}
.sun-rise{
animation: sunrise 2.6s cubic-bezier(.22,.9,.25,1) forwards;
animation-delay: .3s;
opacity: 0;
}
@keyframes sunrise{
0% { transform: translateY(64px) scale(.86); 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); }
.value-pill{ transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.value-pill:hover{ background-color: var(--saffron); color: white; transform: translateY(-3px); }
.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));
}
.quote-mark{ font-family: 'Fraunces', serif; }
.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%; }
::selection{ background: var(--saffron); color: white; }
</style>
</head>
<body x-data :class="{'overflow-hidden': $store.modalOpen}" class="font-body antialiased">
<!-- ============ NAV ============ -->
@include('components.site-header')
<!-- ============ HERO ============ -->
<section id="top" class="hero-sky relative overflow-hidden pt-40 pb-28 md:pt-48 md:pb-40 px-5 md:px-8">
<!-- ambient rings -->
<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-10 w-72 h-72 rounded-full border border-saffron/20" style="animation-delay:1.2s"></div>
<div class="max-w-6xl 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">
Akhil Bhartiya Yog Shikshak Mahasangh · ABYOGASMS Foundation
</p>
<h1 class="font-display text-[2.15rem] leading-[1.15] sm:text-5xl md:text-6xl font-semibold text-sand max-w-4xl mx-auto">
Yogi Bano. Sahyogi Bano.
<span class="italic font-normal text-gold">Samaj Ke Liye Upyogi Bano.</span>
</h1>
<p class="mt-6 text-sand/75 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
India's mission for professional yoga education, teacher empowerment and global wellness —
building one national platform for authentic yoga, service and leadership.
</p>
<div class="mt-9 flex flex-col sm:flex-row items-center justify-center gap-4">
@auth
<a href="/dashboard" class="mt-2 inline-flex justify-center items-center bg-saffron text-white font-semibold px-5 py-3 rounded-full">Member Dashboard</a>
@else
<button x-data
@click="window.dispatchEvent(new CustomEvent('open-location-modal'))"
type="button" data-open-membership class="w-full sm:w-auto text-center bg-saffron hover:bg-saffron-deep text-white font-semibold px-7 py-3.5 rounded-full transition-colors duration-300 shadow-[0_18px_40px_-14px_rgba(232,116,44,0.75)]">
Become A Member
</button>
@endauth
<a href="#services" class="w-full sm:w-auto text-center border border-sand/30 hover:border-gold hover:text-gold text-sand font-semibold px-7 py-3.5 rounded-full transition-colors duration-300">
Explore Our Services
</a>
</div>
</div>
<!-- Signature: Surya arc rising over the range -->
<div class="relative z-10 mt-20 md:mt-24 max-w-4xl mx-auto">
<svg viewBox="0 0 800 260" class="w-full h-auto" role="img" aria-label="Sun rising over a mountain range, representing Surya Namaskar and a new dawn for yoga education">
<defs>
<linearGradient id="sunGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FBEBD2"/>
<stop offset="55%" stop-color="#F0AE54"/>
<stop offset="100%" stop-color="#E8742C"/>
</linearGradient>
<linearGradient id="mtnGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#233457"/>
<stop offset="100%" stop-color="#121D35"/>
</linearGradient>
<radialGradient id="haloGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#F3B65E" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#F3B65E" stop-opacity="0"/>
</radialGradient>
</defs>
<path d="M0,200 C60,170 90,150 150,150 C190,150 200,190 240,190 C280,190 300,120 360,120 C410,120 420,175 470,175 C520,175 540,110 600,110 C650,110 670,160 720,160 C760,160 780,185 800,185 L800,260 L0,260 Z" fill="url(#mtnGrad)" opacity="0.95"/>
<g class="sun-rise">
<circle cx="400" cy="150" r="76" fill="url(#haloGrad)" class="arc-glow"/>
<circle cx="400" cy="150" r="46" fill="url(#sunGrad)"/>
<g stroke="#EFCB84" stroke-width="2.5" stroke-linecap="round" class="arc-glow">
<line x1="400" y1="58" x2="400" y2="38"/>
<line x1="470" y1="80" x2="486" y2="66"/>
<line x1="330" y1="80" x2="314" y2="66"/>
<line x1="330" y1="220" x2="314" y2="234"/>
<line x1="470" y1="220" x2="486" y2="234"/>
</g>
</g>
<path d="M0,206 C70,178 110,158 170,158 C210,158 222,196 262,196 C300,196 322,132 380,132 C428,132 440,182 490,182 C538,182 560,120 618,120 C666,120 686,166 734,166 C768,166 788,188 800,188 L800,260 L0,260 Z" fill="url(#mtnGrad)"/>
</svg>
</div>
</section>
<!-- ============ ABOUT / MISSION ============ -->
<section id="about" class="px-5 md:px-8 py-24 md:py-32 bg-sand">
<div class="max-w-6xl mx-auto grid md:grid-cols-12 gap-14">
<div class="md:col-span-5 reveal">
<div class="divider-mark"></div>
<p class="font-mono text-xs tracking-[0.2em] uppercase text-saffron-deep mb-4">Who We Are</p>
<h2 class="font-display text-3xl md:text-[2.6rem] leading-tight font-semibold text-indigo">
A national home for India's yoga educators.
</h2>
<p class="mt-6 text-ink/75 leading-relaxed">
Akhil Bhartiya Yog Shikshak Mahasangh (ABYOGASMS Foundation) is a national organization committed to
strengthening the yoga education ecosystem by empowering yoga teachers, institutions and wellness
professionals. We provide affiliation, certification support, professional development, teacher
registration, institutional recognition, seminars, conferences, workshops and wellness initiatives to
advance quality yoga education across India and beyond.
</p>
<p class="mt-4 text-ink/75 leading-relaxed">
Together, we are creating a healthier, happier and more conscious society through yoga.
</p>
</div>
<div class="md:col-span-7 grid sm:grid-cols-2 gap-6">
<div class="reveal bg-indigo text-sand rounded-2xl p-8 flex flex-col justify-between">
<div>
<p class="font-mono text-[11px] tracking-[0.2em] uppercase text-gold mb-3">Our Vision</p>
<p class="font-display text-lg leading-relaxed">
To establish a globally respected network of certified yoga teachers and institutions dedicated to
holistic health, ethical education and social transformation.
</p>
</div>
</div>
<div class="reveal bg-white border border-indigo/10 rounded-2xl p-8">
<p class="font-mono text-[11px] tracking-[0.2em] uppercase text-saffron-deep mb-4">Our Mission</p>
<ul class="space-y-2.5 text-sm text-ink/80 leading-relaxed">
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Promote authentic yoga education</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Empower yoga teachers professionally</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Build a national network of institutions</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Encourage research and innovation</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Organize national & global yoga events</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Support community health awareness</li>
<li class="flex gap-2.5"><span class="text-saffron mt-0.5">✓</span>Develop leadership among professionals</li>
</ul>
</div>
<div class="reveal sm:col-span-2 bg-gradient-to-r from-gold/20 to-saffron/10 border border-gold/30 rounded-2xl p-7">
<p class="font-display italic text-lg md:text-xl text-indigo leading-relaxed text-center">
"Yoga for Every Individual, Professional Excellence for Every Teacher, Wellness for Every Society."
</p>
</div>
</div>
</div>
</section>
<!-- ============ SERVICES ============ -->
<section id="services" class="px-5 md:px-8 py-24 md:py-32 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">What We Offer</p>
<h2 class="font-display text-3xl md:text-[2.6rem] font-semibold text-sand leading-tight">Our Services</h2>
<p class="mt-5 text-sand/65 leading-relaxed">
From institutional affiliation to digital certificate verification, ABYOGASMS Foundation supports every
stage of a yoga professional's journey.
</p>
</div>
<div class="mt-14 grid sm:grid-cols-2 lg:grid-cols-3 gap-6 reveal-stagger">
<!-- card 1 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">Institute Affiliation</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Become an affiliated yoga institute and receive official recognition, institutional support, digital
verification and national visibility.
</p>
</div>
<!-- card 2 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">Yoga Teacher Registration</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Professional registration for yoga instructors with a unique registration number and digital
verification.
</p>
</div>
<!-- card 3 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="m9 15 2 2 4-4"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">Student Certification Support</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Support for student certification with secure verification and standardized documentation.
</p>
</div>
<!-- card 4 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">Faculty Development Programs</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Advanced training, workshops, seminars and continuing professional education for yoga teachers.
</p>
</div>
<!-- card 5 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18 9 9 0 0 0 0-18z"/><path d="M3 12h18"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">National Conferences & Festivals</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Participation in national yoga conclaves, wellness summits, International Yoga Day celebrations and
research conferences.
</p>
</div>
<!-- card 6 -->
<div class="card-lift bg-indigo/60 border border-sand/10 rounded-2xl p-7">
<div class="w-12 h-12 rounded-full bg-saffron/15 flex items-center justify-center mb-6">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E8742C" stroke-width="1.8"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><path d="M12 15v2"/></svg>
</div>
<h3 class="font-display text-lg font-semibold text-sand mb-2">Digital Verification</h3>
<p class="text-sand/60 text-sm leading-relaxed">
Online verification of certificates, affiliations and teacher registrations — secure and instant.
</p>
</div>
</div>
</div>
</section>
<!-- ============ WHY CHOOSE US ============ -->
<section id="why-us" class="px-5 md:px-8 py-24 md:py-32 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">The Difference</p>
<h2 class="font-display text-3xl md:text-[2.6rem] font-semibold text-indigo leading-tight">
Why Choose ABYOGASMS Foundation?
</h2>
</div>
<div class="mt-14 grid sm:grid-cols-2 lg:grid-cols-2 gap-x-10 gap-y-5 max-w-4xl mx-auto reveal-stagger">
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">National professional network</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Transparent registration system</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Institute affiliation support</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Teacher identity & recognition</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Workshops & continuing education</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">National & international events</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Digital certificate verification</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Research & publication opportunities</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Community health initiatives</span>
</div>
<div class="flex items-start gap-3 bg-white rounded-xl p-5 border border-indigo/10">
<span class="w-8 h-8 rounded-full bg-saffron/15 text-saffron flex items-center justify-center flex-shrink-0 font-semibold">✓</span>
<span class="text-sm text-ink/80 pt-1">Dedicated support team</span>
</div>
</div>
</div>
</section>
<!-- ============ MEMBERSHIP ============ -->
<section id="membership" class="px-5 md:px-8 py-24 md:py-32 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="grid md:grid-cols-12 gap-14 items-start">
<div class="md:col-span-4 reveal">
<div class="divider-mark"></div>
<p class="font-mono text-xs tracking-[0.2em] uppercase text-gold mb-4">Membership</p>
<h2 class="font-display text-3xl md:text-[2.4rem] font-semibold text-sand leading-tight">
What you receive as a member.
</h2>
<p class="mt-5 text-sand/65 leading-relaxed text-sm">
Every registered teacher and affiliated institute becomes part of a growing, recognized professional
community.
</p>
<button type="button" data-open-membership class="mt-7 inline-flex items-center gap-2 text-gold font-semibold text-sm hover:text-saffron-light transition-colors">
Become a member →
</button>
</div>
<div class="md:col-span-8 grid sm:grid-cols-2 gap-4 reveal-stagger">
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Official Membership Certificate</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Digital ID Card</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Professional Recognition</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Event Participation</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Training Opportunities</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Networking Platform</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Leadership Opportunities</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Exclusive Resources</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Regular Updates</div>
<div class="bg-white/[.04] border border-sand/10 rounded-xl px-5 py-4 text-sand/85 text-sm font-medium">Career Growth Support</div>
</div>
</div>
</div>
</section>
<!-- ============ CORE VALUES ============ -->
<section id="values" class="px-5 md:px-8 py-24 md:py-32 bg-sand">
<div class="max-w-4xl 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">What We Stand For</p>
<h2 class="font-display text-3xl md:text-[2.6rem] font-semibold text-indigo leading-tight">Our Core Values</h2>
<div class="mt-12 flex flex-wrap justify-center gap-3 reveal-stagger">
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Integrity</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Authenticity</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Service</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Professional Excellence</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Research</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Leadership</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Innovation</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Compassion</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">National Development</span>
<span class="value-pill bg-white border border-indigo/15 text-indigo text-sm font-medium px-5 py-2.5 rounded-full cursor-default">Global Wellness</span>
</div>
</div>
</section>
<!-- ============ FOUNDER ============ -->
<section id="founder" class="px-5 md:px-8 py-24 md:py-32 bg-indigo-deep relative overflow-hidden">
<div class="max-w-3xl mx-auto relative reveal text-center">
<span class="quote-mark text-7xl text-gold/40 leading-none">“</span>
<p class="font-display italic text-xl md:text-2xl text-sand leading-relaxed -mt-6">
Yoga is not merely a practice—it is a way of life. Our vision is to unite yoga teachers,
institutions and wellness professionals under one national platform that promotes excellence, ethics and
service. Together, we can transform society through authentic yoga education and collective leadership.
</p>
<div class="mt-8 flex items-center justify-center gap-3">
<span class="w-10 h-[2px] bg-gold/60"></span>
<p class="font-mono text-xs tracking-[0.2em] uppercase text-gold/80">Message from the Founder</p>
<span class="w-10 h-[2px] bg-gold/60"></span>
</div>
</div>
</section>
<!-- ============ JOIN / CTA ============ -->
<section id="join" class="relative px-5 md:px-8 py-24 md:py-32 overflow-hidden" style="background: linear-gradient(135deg, var(--saffron) 0%, var(--gold) 100%);">
<div class="absolute -left-20 -top-20 w-72 h-72 rounded-full border border-white/25"></div>
<div class="absolute -right-16 -bottom-24 w-80 h-80 rounded-full border border-white/25"></div>
<div class="max-w-3xl mx-auto text-center relative reveal">
<h2 class="font-display text-3xl md:text-[2.6rem] font-semibold text-white leading-tight">
Join Our Mission
</h2>
<p class="mt-5 text-white/90 leading-relaxed max-w-2xl mx-auto">
Whether you are a yoga teacher, institute, therapist, trainer, student or wellness enthusiast, we invite
you to become part of India's growing professional yoga community.
</p>
<p class="mt-3 font-display italic text-white text-lg">
Together We Inspire. Together We Serve. Together We Transform Lives.
</p>
<div class="mt-9 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto text-center bg-indigo-deep hover:bg-indigo text-sand font-semibold px-8 py-3.5 rounded-full transition-colors duration-300">
Register Now
</a>
<a href="#" class="w-full sm:w-auto text-center border-2 border-white/70 hover:border-white text-white font-semibold px-8 py-3.5 rounded-full transition-colors duration-300">
Affiliate Your Institute
</a>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
@include('components.site-footer')
@include('components.membership-modal')
</body>
</html>