Integrate dynamic settings into About page: update content sections to utilize AboutSettings for titles, subtitles, paragraphs, and media sources, enhancing content management and user experience.

This commit is contained in:
2025-07-29 14:16:10 +05:00
parent 8e770941fa
commit 76397637f0
5 changed files with 534 additions and 278 deletions

View File

@@ -286,6 +286,9 @@ body {
@endpush
@section('content')
@php
$aboutSettings = app(App\Settings\AboutSettings::class);
@endphp
<!-- Breadcrumb Area Start -->
<div class="breadcrumb__area" style="background-image: url('/web/assets/img/page/breadcrumb.jpg');">
<div class="container">
@@ -310,19 +313,18 @@ body {
<div class="container px-4 md:px-6 mx-auto">
<section class="mb-24">
<div class="text-center max-w-3xl mx-auto mb-10">
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">Our Story</h2>
<p class="text-lg text-gray-600 md:text-xl">A journey of passion, innovation, and dedication that shaped who we are today.</p>
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">{{ $aboutSettings->our_story_title }}</h2>
<p class="text-lg text-gray-600 md:text-xl">{{ $aboutSettings->our_story_subtitle }}</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
<div class="order-2 lg:order-1">
<p class="text-gray-700 mb-4">
Founded in 2015, our company began with a simple mission: to revolutionize how businesses approach their challenges. What started as a small team of three passionate individuals has grown into a global
organization serving clients across multiple industries.
{{ $aboutSettings->our_story_paragraph_one }}
</p>
<p class="text-gray-700 mb-4">Through years of dedication and innovation, we've established ourselves as industry leaders, known for our commitment to excellence and customer satisfaction.</p>
<p class="text-gray-700 mb-6">Today, we're proud to have a diverse team of experts working together to deliver exceptional solutions that make a real difference for our clients.</p>
<p class="text-gray-700 mb-4">{{ $aboutSettings->our_story_paragraph_two }}</p>
<p class="text-gray-700 mb-6">{{ $aboutSettings->our_story_paragraph_three }}</p>
<button class="flex items-center text-sm font-medium text-teal-600 hover:text-teal-800 transition-colors">
Learn more about our journey
<a href="{{ $aboutSettings->our_story_button_url }}">{{ $aboutSettings->our_story_button_text }}</a>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -341,8 +343,8 @@ body {
</div>
<div class="order-1 lg:order-2 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="aspect-video relative">
<video class="w-full h-full object-cover" controls="" poster="/placeholder.svg?height=720&amp;width=1280">
<source type="video/mp4" src="#" />
<video class="w-full h-full object-cover" controls="" poster="{{ asset('storage/' . $aboutSettings->our_story_video_poster) }}">
<source type="video/mp4" src="{{ asset('storage/' . $aboutSettings->our_story_video_source) }}" />
Your browser does not support the video tag.
</video>
</div>
@@ -351,8 +353,8 @@ body {
<div class="container">
<section class="header">
<h1>Our Journey</h1>
<p>Explore our company's history and milestones through the years. Click on any date to learn more about our journey.</p>
<h1>{{ $aboutSettings->our_journey_title }}</h1>
<p>{{ $aboutSettings->our_journey_subtitle }}</p>
</section>
<!-- Our History Area Start -->
@@ -361,76 +363,22 @@ body {
<div class="row">
<div class="col-xl-12">
<div class="company__history-area">
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>2010</span>
</div>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="/web/assets/img/portfolio/portfolio-2.jpg" alt="image">
@foreach ($aboutSettings->our_journey_milestones as $milestone)
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>{{ $milestone['year'] }}</span>
</div>
<div class="company__history-area-item-inner-content">
<h4>Start Company</h4>
<p>Launching a new company is an exciting journey that requires careful planning and execution. Lets begin!</p>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="{{ asset('storage/' . $milestone['image']) }}" alt="{{ $milestone['title'] }}">
</div>
<div class="company__history-area-item-inner-content">
<h4>{{ $milestone['title'] }}</h4>
<p>{{ $milestone['description'] }}</p>
</div>
</div>
</div>
</div>
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>2014</span>
</div>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="/web/assets/img/portfolio/portfolio-3.jpg" alt="image">
</div>
<div class="company__history-area-item-inner-content">
<h4>Opening Office</h4>
<p>Opening a new office represents growth and opportunity. Join us as we expand our operations!</p>
</div>
</div>
</div>
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>2018</span>
</div>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="/web/assets/img/portfolio/portfolio-5.jpg" alt="image">
</div>
<div class="company__history-area-item-inner-content">
<h4>Project Management</h4>
<p>Effective project management ensures timely delivery and quality results. Our expert team is here to help!</p>
</div>
</div>
</div>
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>2021</span>
</div>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="/web/assets/img/portfolio/portfolio-8.jpg" alt="image">
</div>
<div class="company__history-area-item-inner-content">
<h4>Open Research Team</h4>
<p>Our open research team is dedicated to innovation and collaboration, driving impactful solutions for clients.</p>
</div>
</div>
</div>
<div class="company__history-area-item">
<div class="company__history-area-item-date">
<span>2024</span>
</div>
<div class="company__history-area-item-inner wow fadeInUp" data-wow-delay=".4s">
<div class="company__history-area-item-inner-image">
<img src="/web/assets/img/portfolio/portfolio-6.jpg" alt="image">
</div>
<div class="company__history-area-item-inner-content">
<h4>Winning Award</h4>
<p>Winning awards showcases our commitment to excellence and innovation. Thank you for believing</p>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@@ -441,22 +389,22 @@ body {
</section>
<section class="mb-24">
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">Company Structure</h2>
<p class="text-lg text-gray-600">Our organizational hierarchy designed for efficiency</p>
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">{{ $aboutSettings->company_structure_title }}</h2>
<p class="text-lg text-gray-600">{{ $aboutSettings->company_structure_subtitle }}</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-8 md:p-10">
<div class="org-chart">
<div class="flex justify-center mb-16">
<div class="org-box org-box-director">
<h3 class="font-bold text-lg">Director</h3>
<p class="text-sm text-gray-500">John Smith</p>
<p class="text-sm text-gray-500">{{ $aboutSettings->company_structure_director_name }}</p>
</div>
</div>
<div class="flex justify-center mb-16 relative">
<div class="absolute top-[-60px] w-px h-[60px] bg-gray-300"></div>
<div class="org-box org-box-advisor">
<h3 class="font-bold text-lg">Technical Advisor</h3>
<p class="text-sm text-gray-500">Sarah Johnson</p>
<p class="text-sm text-gray-500">{{ $aboutSettings->company_structure_advisor_name }}</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
@@ -466,111 +414,87 @@ body {
<div class="absolute top-[-30px] left-[35%] w-px h-[30px] bg-gray-300"></div>
<div class="absolute top-[-30px] left-[65%] w-px h-[30px] bg-gray-300"></div>
<div class="absolute top-[-30px] left-[90%] w-px h-[30px] bg-gray-300"></div>
<div class="org-box org-box-department">
<h3 class="font-bold">HSE</h3>
<p class="text-sm text-gray-500">Michael Brown</p>
</div>
<div class="org-box org-box-department">
<h3 class="font-bold">Personnel</h3>
<p class="text-sm text-gray-500">Emily Davis</p>
</div>
<div class="org-box org-box-department">
<h3 class="font-bold">Operations</h3>
<p class="text-sm text-gray-500">Robert Wilson</p>
</div>
<div class="org-box org-box-department">
<h3 class="font-bold">Finance</h3>
<p class="text-sm text-gray-500">Jennifer Lee</p>
</div>
@foreach ($aboutSettings->company_structure_departments as $department)
<div class="org-box org-box-department">
<h3 class="font-bold">{{ $department['name'] }}</h3>
<p class="text-sm text-gray-500">{{ $department['person'] }}</p>
</div>
@endforeach
</div>
</div>
</div>
</section>
<section class="mb-24">
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">Our Management</h2>
<p class="text-lg text-gray-600">Meet the leadership team driving our vision forward</p>
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">{{ $aboutSettings->our_management_title }}</h2>
<p class="text-lg text-gray-600">{{ $aboutSettings->our_management_subtitle }}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-56 w-full">
<img
alt="John Smith"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="/placeholder.svg?height=600&amp;width=600"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
@foreach ($aboutSettings->our_management_team as $member)
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-56 w-full">
<img
alt="{{ $member['name'] }}"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="{{ asset('storage/' . $member['image']) }}"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<h3 class="text-xl font-bold">{{ $member['name'] }}</h3>
<p class="text-teal-600 text-sm font-medium mb-3">{{ $member['title'] }}</p>
<p class="text-gray-600 text-sm mb-4">{{ $member['description'] }}</p>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold">John Smith</h3>
<p class="text-teal-600 text-sm font-medium mb-3">Chief Executive Officer</p>
<p class="text-gray-600 text-sm mb-4">With over 20 years of industry experience, John leads our company with vision and strategic insight.</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-56 w-full">
<img
alt="Sarah Johnson"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="/placeholder.svg?height=600&amp;width=600"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<h3 class="text-xl font-bold">Sarah Johnson</h3>
<p class="text-teal-600 text-sm font-medium mb-3">Chief Technical Officer</p>
<p class="text-gray-600 text-sm mb-4">Sarah brings technical excellence and innovation to every aspect of our products and services.</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-56 w-full">
<img
alt="Michael Brown"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="/placeholder.svg?height=600&amp;width=600"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<h3 class="text-xl font-bold">Michael Brown</h3>
<p class="text-teal-600 text-sm font-medium mb-3">Head of Operations</p>
<p class="text-gray-600 text-sm mb-4">Michael ensures smooth operation across all our facilities and project deployments.</p>
</div>
</div>
@endforeach
</div>
</section>
<section>
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">Our Facilities</h2>
<p class="text-lg text-gray-600">State-of-the-art locations where innovation happens</p>
<h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-purple-600">{{ $aboutSettings->our_facilities_title }}</h2>
<p class="text-lg text-gray-600">{{ $aboutSettings->our_facilities_subtitle }}</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-64 w-full">
<img
alt="Headquarters"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="/placeholder.svg?height=800&amp;width=1200"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">Headquarters</h3>
<div class="flex items-center text-gray-600 mb-4">
@foreach ($aboutSettings->our_facilities_locations as $location)
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-64 w-full">
<img
alt="{{ $location['name'] }}"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="{{ asset('storage/' . $location['image']) }}"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">{{ $location['name'] }}</h3>
<div class="flex items-center text-gray-600 mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-map-pin h-4 w-4 mr-1"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span class="text-sm">{{ $location['location'] }}</span>
</div>
</div>
<div class="bg-teal-50 p-2 rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -581,117 +505,31 @@ body {
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-map-pin h-4 w-4 mr-1"
class="lucide lucide-building h-6 w-6 text-teal-600"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
<rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect>
<path d="M9 22v-4h6v4"></path>
<path d="M8 6h.01"></path>
<path d="M16 6h.01"></path>
<path d="M12 6h.01"></path>
<path d="M12 10h.01"></path>
<path d="M12 14h.01"></path>
<path d="M16 10h.01"></path>
<path d="M16 14h.01"></path>
<path d="M8 10h.01"></path>
<path d="M8 14h.01"></path>
</svg>
<span class="text-sm">San Francisco, California</span>
</div>
</div>
<div class="bg-teal-50 p-2 rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-building h-6 w-6 text-teal-600"
>
<rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect>
<path d="M9 22v-4h6v4"></path>
<path d="M8 6h.01"></path>
<path d="M16 6h.01"></path>
<path d="M12 6h.01"></path>
<path d="M12 10h.01"></path>
<path d="M12 14h.01"></path>
<path d="M16 10h.01"></path>
<path d="M16 14h.01"></path>
<path d="M8 10h.01"></path>
<path d="M8 14h.01"></path>
</svg>
<p class="text-gray-600 mb-4">{{ $location['description'] }}</p>
<div class="flex flex-wrap gap-2">
@foreach ($location['tags'] as $tag)
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">{{ $tag['value'] }}</span>
@endforeach
</div>
</div>
<p class="text-gray-600 mb-4">Our global headquarters houses our executive team and primary R&amp;D facilities with state-of-the-art equipment and collaborative spaces.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">R&amp;D Labs</span><span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Executive Offices</span>
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Conference Center</span><span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Innovation Hub</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
<div class="relative h-64 w-full">
<img
alt="Manufacturing Center"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover"
src="/placeholder.svg?height=800&amp;width=1200"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
/>
</div>
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">Manufacturing Center</h3>
<div class="flex items-center text-gray-600 mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-map-pin h-4 w-4 mr-1"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span class="text-sm">Austin, Texas</span>
</div>
</div>
<div class="bg-teal-50 p-2 rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-building h-6 w-6 text-teal-600"
>
<rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect>
<path d="M9 22v-4h6v4"></path>
<path d="M8 6h.01"></path>
<path d="M16 6h.01"></path>
<path d="M12 6h.01"></path>
<path d="M12 10h.01"></path>
<path d="M12 14h.01"></path>
<path d="M16 10h.01"></path>
<path d="M16 14h.01"></path>
<path d="M8 10h.01"></path>
<path d="M8 14h.01"></path>
</svg>
</div>
</div>
<p class="text-gray-600 mb-4">Our primary manufacturing facility implements cutting-edge production techniques with a focus on sustainability and efficiency.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Production Lines</span><span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Quality Control</span>
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Warehouse</span><span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">Distribution Center</span>
</div>
</div>
</div>
@endforeach
</div>
</section>
</div>