landing page completed
This commit is contained in:
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: url({{ asset('trust/assets/images/background/sweden.png') }}) no-repeat center top/cover;
|
||||
/* background: url({{ asset('trust/assets/images/background/sweden.png') }}) no-repeat center top/cover; */
|
||||
color: var(--dark-text);
|
||||
/* padding: 100px 0; */
|
||||
}
|
||||
@ -109,7 +109,8 @@
|
||||
.benefit-icon {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: var(--primary-color);
|
||||
background: linear-gradient(to right, #e8171a 60%, #ffa21c 100%);
|
||||
;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
@ -196,7 +197,7 @@
|
||||
}
|
||||
|
||||
.text-primary-custom {
|
||||
color: var(--primary-color) !important;
|
||||
color: #e8171a !important;
|
||||
}
|
||||
|
||||
.flowchart-container {
|
||||
@ -799,43 +800,47 @@
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container-fluid">
|
||||
<div class="row min-vh-100" style="background: linear-gradient(to right, #e8171a 60%, #ffa21c 100%);">
|
||||
<div class="col-lg-6">
|
||||
<img src="" alt="Landing Image" class="img-fluid h-100 w-100" style="object-fit: cover;">
|
||||
<div class="row min-vh-100" style="background: linear-gradient(135deg, #264552, #203a43, #19343f);">
|
||||
<div class="col-lg-6 d-flex flex-column">
|
||||
@foreach ($banners as $banner)
|
||||
<img src="{{ asset($banner->cover) }}" alt="Landing Image" class="img-fluid h-100 w-100"
|
||||
style="object-fit: cover;">
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 d-flex align-items-center justify-content-center p-4">
|
||||
<div class="w-100" style="max-width: 500px;">
|
||||
<div class="form-container animate-fade-in-up">
|
||||
<h3 class="form-title">Registration Form</h3>
|
||||
<div class="form-container animate-fade-in-up p-4 rounded-4 shadow"
|
||||
style="background: #c9c6c6; color: #333; border: 1px solid #ddd; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);">
|
||||
<h3 class="form-title text-center mb-4" style="color: #222;">Registration Form</h3>
|
||||
<form id="enquiry-form" action="{{ route('form.submit-enquiry') }}" method="POST">
|
||||
@csrf
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label for="name" class="form-label">Full Name <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" name="name"
|
||||
placeholder="Enter your full name" required>
|
||||
<input type="text" class="form-control border border-light-subtle" id="name"
|
||||
name="name" placeholder="Enter your full name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label for="email" class="form-label">Email Address <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" name="email"
|
||||
placeholder="Enter your email" required>
|
||||
<input type="email" class="form-control border border-light-subtle" id="email"
|
||||
name="email" placeholder="Enter your email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label for="phone" class="form-label">Phone Number <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="phone" name="phone"
|
||||
placeholder="Enter your phone number" required>
|
||||
<input type="tel" class="form-control border border-light-subtle" id="phone"
|
||||
name="phone" placeholder="Enter your phone number" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="qualification" class="form-label">
|
||||
Highest Qualification<span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-control" id="qualification" name="qualification" required>
|
||||
<div class="form-group mb-3">
|
||||
<label for="qualification" class="form-label">Highest Qualification <span
|
||||
class="text-danger">*</span></label>
|
||||
<select class="form-control border border-light-subtle" id="qualification"
|
||||
name="qualification" required>
|
||||
<option value="">-Select Qualification-</option>
|
||||
<option value="10">+2 or Equivalent</option>
|
||||
<option value="20">Bachelors (3 year) or Equivalent</option>
|
||||
@ -844,35 +849,36 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="score" class="form-label">Score<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="score" name="score"
|
||||
placeholder="Enter Score" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="passed_year" class="form-label">Passed Year<span
|
||||
<div class="form-group mb-3">
|
||||
<label for="score" class="form-label">Score <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="passed_year" name="passed_year"
|
||||
placeholder="Enter Passed Year" required>
|
||||
<input type="text" class="form-control border border-light-subtle" id="score"
|
||||
name="score" placeholder="Enter Score" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="passed_year" class="form-label">Passed Year <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control border border-light-subtle" id="passed_year"
|
||||
name="passed_year" placeholder="Enter Passed Year" required>
|
||||
</div>
|
||||
|
||||
@if ($setting->recaptcha_site_key)
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<div id="g-recaptcha-response" class="g-recaptcha mb-2"
|
||||
data-sitekey="{{ $setting->recaptcha_site_key }}"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<button type="submit" class="btn-primary" id="submit">
|
||||
<button type="submit" class="btn btn-dark w-100" id="submit">
|
||||
Register
|
||||
</button>
|
||||
|
||||
<div id="message-notification" class="text-success mt-3"></div>
|
||||
|
||||
<div id="message-notification" class="text-success mt-3 text-center"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -880,33 +886,48 @@
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">
|
||||
Testimonials
|
||||
</h2>
|
||||
<div class="row g-3">
|
||||
@foreach ($success_stories as $story)
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
|
||||
<div class="visa-post">
|
||||
@foreach (json_decode($story->extra_content) as $content)
|
||||
<iframe width="100%" height="350" src="{{ $content->fieldHeader }}"
|
||||
title="{{ $story->title }}" frameborder="0"
|
||||
<!-- Successful Visa Grants -->
|
||||
<section class="section-padding" style="background-color: #aeb5bb">
|
||||
@foreach ($success_stories as $story)
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center" style="color: #fc4e24">
|
||||
Trusted by Many — Testimonials
|
||||
</h2>
|
||||
<div class="row g-3">
|
||||
@php
|
||||
function convertToEmbedUrl($url)
|
||||
{
|
||||
$parsed = parse_url($url);
|
||||
if (isset($parsed['query'])) {
|
||||
parse_str($parsed['query'], $queryParams);
|
||||
if (isset($queryParams['v'])) {
|
||||
return 'https://www.youtube.com/embed/' . $queryParams['v'];
|
||||
}
|
||||
}
|
||||
return $url; // fallback
|
||||
}
|
||||
@endphp
|
||||
|
||||
@foreach (json_decode($story->extra_content) as $content)
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
|
||||
<div class="visa-post">
|
||||
<iframe width="100%" height="350"
|
||||
src="{{ convertToEmbedUrl($content->fieldHeader) }}" title="video1" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</section>
|
||||
|
||||
<!-- Benefits of choosing TEF -->
|
||||
<section class="section-padding">
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">
|
||||
Benefits
|
||||
<h2 class="section-title text-center" style="color: #fc4e24">
|
||||
Benefits of Choosing Us
|
||||
</h2>
|
||||
<div class="row g-4">
|
||||
<!-- Benefit 1 -->
|
||||
@ -914,7 +935,8 @@
|
||||
@foreach (json_decode($tef->extra_content) as $content)
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="benefit-icon mb-3" style="font-size: 2.5rem; color: #5291b6;">
|
||||
<div class="benefit-icon mb-3"
|
||||
style="font-size: 2.5rem; color: linear-gradient(to right, #e8171a 60%, #ffa21c 100%);">
|
||||
{{ $content->fieldHeader }}
|
||||
</div>
|
||||
<h5 class="text-primary-custom">{{ $tef->title }}</h5>
|
||||
@ -929,16 +951,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-padding bg-light">
|
||||
<section class="section-padding" style="background-color: #c1c8cf">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">
|
||||
Success Stories
|
||||
<h2 class="section-title text-center" style="color: #fc4e24">
|
||||
Our Success Stories
|
||||
</h2>
|
||||
<div class="row g-3">
|
||||
@foreach ($visa_grants as $visas)
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
|
||||
<div class="visa-post">
|
||||
<img src="{{ asset($visas->cover) }}" />
|
||||
<img src="{{ asset($visas->cover) }}" width="400px" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@ -946,6 +968,73 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
||||
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
|
||||
integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
|
||||
<script>
|
||||
$(document).on("submit", "#enquiry-form", function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const action = $(this).attr("action");
|
||||
const url = new URL(window.location.href);
|
||||
const isRecaptchaEnabled = !!"{{ $setting->recaptcha_site_key }}";
|
||||
|
||||
|
||||
let formData = $(this).serializeArray();
|
||||
|
||||
if (isRecaptchaEnabled) {
|
||||
formData.push({
|
||||
name: 'g-recaptcha-response',
|
||||
value: grecaptcha.getResponse()
|
||||
});
|
||||
}
|
||||
|
||||
$("#submit")
|
||||
.html(`Submitting...`)
|
||||
.attr("disabled", true);
|
||||
|
||||
$.ajax({
|
||||
url: action,
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: formData,
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.status == 200) {
|
||||
toastr.success(response.message);
|
||||
document.getElementById("message-notification").innerHTML = response.message;
|
||||
$("#enquiry-form")[0].reset();
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422 || xhr.status === 500) {
|
||||
let errors = xhr.responseJSON.errors;
|
||||
for (let key in errors) {
|
||||
const errorMessage = errors[key][0];
|
||||
toastr.error(errorMessage);
|
||||
}
|
||||
} else {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
// grecaptcha.reset();
|
||||
$("#submit").html(`<span>Register</span>`)
|
||||
.attr("disabled", false);
|
||||
form.reset();
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user