File: /home/durgeshpandey215/public_html/mykarma.skilladders.com/resources/views/volunteerning.blade.php
@extends('layouts.app')
@section('title','My Karma Foundation | ')
@section('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="{{url('/assets/css/kstyle.css')}}">
@stop
@section('content')
@include('common.navigation')
<section>
<div class="indexbanner-con">
<img src="{{url('/assets/img/volunteer.webp')}}" alt="" srcset="" class="img-fluid">
<div ></div>
</div>
</section>
<section>
<div class="container">
<div class="row my-5">
<div class="col-lg-6">
<p class="text-uppercase fs-14 fw-bold text-tri mb-1 letter-space mt-1">join us to make the change</p>
<h5 class="fs-3">Become a Volunteer</h5>
<p>As part of the My Karma Foundation Foundation team, our journey has been inspiring and impactful. Together, we work to empower refugees, provide essential aid, and develop sustainable programs that foster hope and resilience in vulnerable communities.</p>
<ul class="px-0">
<li class="list-unstyled d-flex"><div class=""><img src="{{url('/assets/img/points.webp')}}" alt="" srcset="" width="20" ></div><p class="ps-2">Collaboratively empowered refugee youth by providing tailored education, one-on-one mentorship, and comprehensive career development opportunities, helping them build confidence, develop critical skills, and pursue a brighter, self-sustained future.</p></li>
<li class="list-unstyled d-flex"><div class=""><img src="{{url('/assets/img/points.webp')}}" alt="" srcset="" width="20" ></div><p class="ps-2">Delivered essential aid and holistic support to displaced families, ensuring their immediate needs such as food, shelter, and healthcare were met, while also promoting their long-term stability and integration into the community.</p></li>
<li class="list-unstyled d-flex"><div class=""><img src="{{url('/assets/img/points.webp')}}" alt="" srcset="" width="20" ></div><p class="ps-2">Fostered a strong, compassionate team culture focused on collaboration, empathy, and sustainability, developing community-driven initiatives that create lasting, positive change for vulnerable populations and contribute to their long-term resilience.</p></li>
</ul>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center">
<img src="{{url('/assets/img/vounteer_imge.webp')}}" alt="" class="w-100">
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid event-banner py-5">
<p class="text-uppercase fs-14 fw-bold text-tri mb-1 letter-space text-center">Our Volunteer message</p>
<h6 class="fs-50 fw-bold w-75 m-auto text-center">A Journey of Impact: Discover the Rewards of Volunteering</h6>
<p class="fs-14 text-tri w-50 m-auto text-center mt-3 mb-5">Volunteering at Karma Foundation has shaped my outlook on life. From community outreach to animal welfare, the work we do feels significant. It’s taught me empathy, leadership, and a strong sense of duty toward others. I’m proud to be part of such a transformative initiative.</p>
<div class="row">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/volunteer/nageshpandey.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Nagesh Pandey</h4>
<p class="mt-2">Volunteering with Karma Foundation has been life-changing. I’ve worked closely with the Mahila Udyog project, helping widows and homemakers start small businesses. It's empowering to see them gain financial independence, and I feel proud to contribute to their journey toward a better life.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/volunteer/nitesh-bag.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Nitesh Bag</h4>
<p class="mt-2">Caring for abandoned street dogs at the Karma Foundation shelter has been incredibly fulfilling. I’ve learned so much about compassion and responsibility. Watching the dogs heal and find happiness in a safe environment makes every moment worth it. It's an experience that’s touched my heart deeply.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/volunteer/sapna-surve.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Sapna Surve</h4>
<p class="mt-2">Working on small-scale projects like making papads and incense sticks with women has been inspiring. Seeing these women grow more confident and financially stable motivates me. Karma Foundation has not only helped them but has also given me a sense of purpose and personal growth.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/volunteer/sujal-singh.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Sujal singh</h4>
<p class="mt-2">Teaching children from underprivileged backgrounds has been one of the most rewarding parts of volunteering with Karma Foundation. Their eagerness to learn and grow despite their challenges fills me with hope. Every smile and achievement makes me realize how impactful small efforts can be.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/volunteer/uday-karmokar.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Uday Karmokar</h4>
<p class="mt-2">Karma Foundation has shown me how small acts of kindness can transform lives. From supporting women in business to caring for street dogs, every task feels meaningful. Volunteering here has made me more compassionate and aware of the needs in our community.</p>
</div>
</div>
</div>
{{-- <div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/camimg.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Rahul</h4>
<p class="mt-2">Being part of Karma Foundation has opened my eyes to the power of teamwork and community service. Whether it’s organizing campaigns or helping with shelter home projects, I’ve gained valuable skills and a deeper sense of responsibility toward society. It’s an experience I’ll always cherish.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/camimg.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Arjun</h4>
<p class="mt-2">Volunteering with the street dog shelter has taught me patience and empathy. Seeing the transformation in these dogs, from scared and injured to happy and healthy, has been incredibly rewarding. It’s amazing to know that our care is making such a big difference in their lives.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/camimg.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Vikram</h4>
<p class="mt-2">Helping women set up small businesses through the Mahila Udyog project has been inspiring. I’ve seen firsthand how financial independence changes lives. Being able to contribute to such a positive cause has been a humbling experience, and I’ve learned a lot about resilience and hard work.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="volunteer-card rounded-2">
<div class="volunteer-header">
<img src="{{url('/assets/img/camimg.webp')}}" alt="" height="180" srcset="" class="w-100">
</div>
<div class="volunteer-content bg-white px-3 py-2 rounded-bottom-2">
<h4 class="fs-5 text-capitalize text-tri mb-1 text-sec1 mt-1">Kunal</h4>
<p class="mt-2">Volunteering at Karma Foundation has shaped my outlook on life. From community outreach to animal welfare, the work we do feels significant. It’s taught me empathy, leadership, and a strong sense of duty toward others. I’m proud to be part of such a transformative initiative.</p>
</div>
</div>
</div> --}}
</div>
<div class="swiper-button-next camp-next"></div>
<div class="swiper-button-prev camp-prev"></div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row my-5">
<p class="text-uppercase fs-14 fw-bold text-tri mb-1 letter-space text-center mt-1">join us to make the change</p>
<h5 class="fs-3 text-center">Become a Volunteer</h5>
<div class="col-md-10 col-lg-7 shadow m-auto my-3">
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li class="list-unstyled">{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{url('volunteerstore')}}" method="post" class="m-2 rounded-3">
@csrf
<div class="row">
<div class="col-md-6">
<input type="text" name="first_name" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="First Name" value="{{ old('first_name') }}" required>
@error('first_name')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<input type="text" name="contact_number" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="Contact Number" value="{{ old('contact_number') }}" required>
@error('contact_number')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<input type="email" name="email" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="Email" value="{{ old('email') }}" required>
@error('email')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<input type="number" name="age" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="Age" value="{{ old('age') }}" required>
@error('age')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<input type="text" name="education" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="Education Qualification" value="{{ old('education') }}" required>
@error('education')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<select name="gender" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" required>
<option value="">Select Gender</option>
<option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
<option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
<option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Others</option>
</select>
@error('gender')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="col-12">
<textarea name="address" rows="7" class="w-100 bg-body-secondary rounded-2 py-2 px-3 border-0 my-2 outline-0" placeholder="Address" required>{{ old('address') }}</textarea>
@error('address')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="d-flex justify-content-end">
<input type="submit" value="Send" class="text-white d-inline-block bg-dark rounded-2 px-3 ms-auto py-2">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
@include('common.footer')
@section('script')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 4, // Default value for desktop
spaceBetween: 5, // Default space between slides
navigation: {
nextEl: ".camp-next",
prevEl: ".camp-prev",
},
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 10,
},
768: {
slidesPerView: 2, // 3 slides per view
spaceBetween: 10, // Space between slides
},
// When the screen width is >= 480px (small tablet/large mobile)
480: {
slidesPerView: 1,
spaceBetween: 10, // Space between slides
},
0: {
slidesPerView: 1,
spaceBetween: 5,
}
}
});
</script>
@stop
@stop