Files
new_raffles/resources/views/client/raffles/pages/about-us-template.blade.php
2025-07-27 17:40:56 +05:45

287 lines
15 KiB
PHP

@extends('client.raffles.layouts.app')
@section('content')
<section class="about scroll-section" id="about-page">
<div class="about-page-banner">
<img src="{{ asset($page->banner) }}" alt="">
</div>
<section class=" section lqd-section analysis bg-transparent transition-all about-page" id="analysis">
<div class="container">
<div class="w-80percent mx-auto">
<h2 class="md:text-30 text-60 text-sec text-center">{{ $page->title }}</h2>
<div class="title-line mx-auto"></div>
<p class="md:text-14 text-20 text-center leading-10">{{ $page->short_description }}</p>
</div>
@if ($page->children->count() > 0)
@php
$firstPage = $page->children[0];
@endphp
<div class="row">
<div class="col col-12">
<div class="module-content px-10percent">
<div class="container p-0">
<div class="ceo-container">
<div class="design-element"></div>
<div class="content-wrapper">
<div class="image-section">
<div class="image-frame">
<img src="{{ asset($firstPage->image) }}" alt="CEO portrait"
class="ceo-image">
</div>
<span class="name-badge">Dinesh Dhakal</span>
</div>
<div class="message-section">
<div class="accent-line"></div>
<div class="quote-mark">"</div>
<h3 class="title">{{ $firstPage->short_description }}</h3>
<h2 class="heading">{{ $firstPage->title }}</h2>
<p class="message">
{!! $firstPage->description !!}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</section>
@if ($page->children->count() > 0)
@php
$secondPage = $page->children[1];
@endphp
<section class="section pt-30">
<div class="container">
<div class="flex flex-col gap-5 justify-center items-center text-center">
<h2 class="text-42 md:text-30 text-black">Empowering Students to Succeed Beyond Borders</h2>
</div>
</div>
</section>
<!-- first row -->
<section class="lqd-section text-box-image pt-30">
<div class="container">
<div class="row items-center">
<div class="col col-12 col-md-6">
<div class="flex flex-wrap mr-120 lg:m-0">
<div class="mb-20 relative">
<h2 class="ld-fh-element inline-block relative lqd-highlight-classic lqd-highlight-grow-left mt-0/5em mb-0 md:text-20 text-30 font-bold w-full"
data-inview="true" data-transition-delay="true"
data-delay-options='{"elements": ".lqd-highlight-inner", "delayType": "transition"}'>
<span>
{{ $secondPage->title }}
</span>
</h2>
</div>
<div class="mb-20 ld-fancy-heading relative">
<p class="leading-25 ld-fh-element inline-block relative mb-0/5em text-justify">
{{ $secondPage->short_description }}
</p>
</div>
</div>
</div>
<div class="col col-12 col-md-6 p-0">
<div class="module-section flex items-center justify-end transition-all p-20 lg:p-0 ">
<div class="flex items-center justify-end bg-center bg-no-repeat bg-contain">
<div class="lqd-imggrp-single block relative " data-float="ease-in-out">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-end">
<figure class=" relative">
<img width="450" height="450" src="{{ asset($secondPage->image) }}"
alt="text box image" />
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endif
<!-- second row -->
@if ($page->children->count() > 0)
@php
$thirdPage = $page->children[2];
@endphp
<!-- second row -->
<section class="lqd-section text-box-image pt-10">
<div class="container">
<div class="row items-center">
<div class="col col-12 col-md-6 p-0 order-first sm:order-last ">
<div class="module-section flex items-center justify-start transition-all mr-120 lg:m-0 ">
<div class="flex items-center justify-start bg-center bg-no-repeat bg-contain">
<div class="lqd-imggrp-single block relative " data-float="ease-in-out">
<div
class="lqd-imggrp-img-container inline-flex relative items-center justify-start">
<figure class=" relative">
<img width="450" height="450" src="{{ asset($thirdPage->image) }}"
alt="text box image" />
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col col-12 col-md-6 order-last sm:order-first">
<div class="flex flex-wrap ml-40 lg:m-0">
<div class="mb-20 relative">
<h2 class="ld-fh-element inline-block relative lqd-highlight-classic lqd-highlight-grow-left mt-0/5em mb-0 md:text-20 text-30 font-bold w-full"
data-inview="true" data-transition-delay="true"
data-delay-options='{"elements": ".lqd-highlight-inner", "delayType": "transition"}'>
<span>
{{ $thirdPage->title }}
</span>
</h2>
</div>
<div class="mb-20 ld-fancy-heading relative">
<p class="leading-25 ld-fh-element inline-block relative mb-0/5em text-justify">
{{ $thirdPage->short_description }}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
@endif
@if ($page->children->count() > 0)
@php
$fourthPage = $page->children[3];
@endphp
<section class="lqd-section text-box-image pt-10 ">
<div class="container">
<div class="row items-center">
<div class="col col-12 col-md-6">
<div class="flex flex-wrap mr-120 lg:m-0">
<div class="mb-20 relative">
<h2 class="ld-fh-element inline-block relative lqd-highlight-classic lqd-highlight-grow-left mt-0/5em mb-0 md:text-20 text-30 font-bold w-full"
data-inview="true" data-transition-delay="true"
data-delay-options='{"elements": ".lqd-highlight-inner", "delayType": "transition"}'>
<span>
{{ $fourthPage->title }}
</span>
</h2>
</div>
<div class="mb-20 ld-fancy-heading relative">
<p class="leading-25 ld-fh-element inline-block relative mb-0/5em text-justify">
{{ $fourthPage->short_description }}
</p>
</div>
</div>
</div>
<div class="col col-12 col-md-6 p-0">
<div class="module-section flex items-center justify-start transition-all p-20 lg:p-0">
<div class="flex items-center justify-start ">
<div class="lqd-imggrp-single block relative " data-float="ease-in-out">
<div
class="lqd-imggrp-img-container inline-flex relative items-center justify-start">
<figure class=" relative">
<img width="450" height="450" src="{{ asset($fourthPage->image) }}"
alt="text box image" />
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-break"></div>
</div>
</section>
@endif
<!-- teachers slider -->
<section class="section pt-30">
<div class="flex flex-col gap-5 justify-center items-center text-center">
<h2 class="text-42 md:text-30 text-black">Team</h2>
</div>
</section>
<section class="container">
<div class="swiper mySwiper-team">
<div class="swiper-wrapper">
@foreach ($teams as $team)
<div class="swiper-slide ">
<div class="image">
<img src="{{ $team->image }}" alt="">
<div class="text bg-sec ">
<h3 class="text-14 m-0 text-white text-center">{{ $team->title }}</h3>
<p class="text-12 text-white text-center m-0 p-0">{{ $team->designation }}</p>
</div>
</div>
</div>
@endforeach
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="section-break"></div>
</section>
@if ($page->children->count() > 0)
@php
$fifthPage = $page->children[4];
@endphp
<div class="container section">
<section class="section">
<div class="flex flex-col gap-5 justify-center items-center text-center">
<h2 class="text-42 md:text-30 text-sec">{{ $fifthPage->title }}</h2>
</div>
</section>
<div class="row section">
@foreach ($fifthPage->custom as $child)
<div class="col col-md-4">
<div class="flex flex-col gap-10 ceo-container px-20 py-20">
<h3 class="text-brand text-26 md:text-18 font-bold leading-30">{{ $child['icon'] ?? '' }}
</h3>
<p class="text-black text-14 text-center">{{ $child['key'] ?? '' }}</p>
</div>
</div>
@endforeach
</div>
<div class="section-break"></div>
</div>
@endif
<!-- blog -->
<section class="section pb-30">
<div class="container">
<div class="flex flex-col gap-5 justify-center items-center text-center">
<h2 class="text-42 md:text-30 text-sec">Blogs</h2>
</div>
<div class="row pb-20">
@foreach ($blogs as $blog)
<div class="col col-sm-6 col-xxl-4">
<a href="blog-detail.php" class="flex flex-col gap-20 p-5 blog-post">
<div class="w-100percent h-210 overflow-hidden rounded-16 relative">
<img class="w-full h-full object-cover rounded-16" src="{{ asset($blog->image) }}"
alt="">
<span class=" text-sec rounded-30 text-10 py-5 px-10 reading-time">20 min read</span>
</div>
<div>
<h2 class="text-20 text-ter pt-10">{{ $blog->title }}</h2>
</div>
<div class="flex flex-col gap-20">
<p class="text-16 text-black">{{ $blog->short_description }}</p>
<p class="text-14">{{ $blog->created_at }}</p>
</div>
</a>
</div>
@endforeach
</div>
</div>
</section>
</section>
@endsection