541 lines
37 KiB
PHP
541 lines
37 KiB
PHP
@extends('web.layouts.app')
|
|
|
|
@push('header-css')
|
|
<style>
|
|
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var(--font-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:.5rem}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 1400px){.container{max-width:1400px}}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.left-\[10\%\]{left:10%}.left-\[35\%\]{left:35%}.left-\[65\%\]{left:65%}.left-\[90\%\]{left:90%}.top-\[-30px\]{top:-30px}.top-\[-60px\]{top:-60px}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.mr-1{margin-right:0.25rem}.flex{display:flex}.grid{display:grid}.aspect-video{aspect-ratio:16 / 9}.h-4{height:1rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\[30px\]{height:30px}.h-\[60px\]{height:60px}.h-full{height:100%}.h-px{height:1px}.w-4{width:1rem}.w-6{width:1.5rem}.w-\[80\%\]{width:80%}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:48rem}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 184 166 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-gray-50{--tw-gradient-to:#f9fafb var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{object-fit:cover}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-16{padding-top:4rem;padding-bottom:4rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.tracking-tight{letter-spacing:-0.025em}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}@keyframes enter{from{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.duration-300{animation-duration:300ms}.org-chart{position:relative}.org-box{border-radius:var(--radius);border-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1rem;text-align:center;--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;animation-duration:300ms}@media (hover: hover){body:not(.v0-lite-dev) .org-box:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}}.org-box-director{width:16rem;border-left-width:4px;--tw-border-opacity:1;border-left-color:rgb(20 184 166 / var(--tw-border-opacity, 1));background-image:linear-gradient(to right, var(--tw-gradient-stops));--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:rgb(240 253 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#faf5ff var(--tw-gradient-to-position);padding-left:2rem;padding-right:2rem;padding-top:1.5rem;padding-bottom:1.5rem}.org-box-advisor{width:16rem;border-left-width:4px;--tw-border-opacity:1;border-left-color:rgb(59 130 246 / var(--tw-border-opacity, 1));background-image:linear-gradient(to right, var(--tw-gradient-stops));--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#f0fdfa var(--tw-gradient-to-position);padding-left:2rem;padding-right:2rem;padding-top:1.5rem;padding-bottom:1.5rem}.org-box-department{border-top-width:4px;--tw-border-opacity:1;border-top-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;animation-duration:300ms}@media (hover: hover){body:not(.v0-lite-dev) .org-box-department:hover{--tw-border-opacity:1;border-top-color:rgb(20 184 166 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}body:not(.v0-lite-dev) .hover\:text-teal-800:hover{--tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1))}body:not(.v0-lite-dev) .hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:p-10{padding:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}
|
|
</style>
|
|
<style>
|
|
:root {
|
|
--timeline-primary-color: #0070f3;
|
|
--timeline-primary-light: rgba(0, 112, 243, 0.1);
|
|
--timeline-text-color: #333;
|
|
--timeline-text-muted: #666;
|
|
--timeline-border-color: #e1e1e1;
|
|
--timeline-background-color: #fff;
|
|
--timeline-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--transition-speed: 0.3s;
|
|
--timeline-button-shadow: 0 2px 8px rgba(0, 112, 243, 0.25);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: a0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--timeline-text-color);
|
|
background-color: var(--timeline-background-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.header p {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
color: var(--timeline-text-muted);
|
|
}
|
|
|
|
.timeline-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3rem;
|
|
}
|
|
|
|
/* Timeline dates styling */
|
|
.timeline-dates {
|
|
position: relative;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: var(--timeline-border-color);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.dates-container {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.date-button {
|
|
position: relative;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--timeline-border-color);
|
|
background-color: var(--timeline-background-color);
|
|
color: var(--timeline-text-muted);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 1;
|
|
}
|
|
|
|
.date-button:hover {
|
|
border-color: var(--timeline-primary-color);
|
|
color: var(--timeline-primary-color);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.date-button.active {
|
|
border-color: var(--timeline-primary-color);
|
|
color: var(--timeline-primary-color);
|
|
transform: scale(1.25);
|
|
box-shadow: var(--timeline-button-shadow);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Content area styling */
|
|
.content-area {
|
|
position: relative;
|
|
border: 1px solid var(--timeline-border-color);
|
|
border-radius: 0.75rem;
|
|
background-color: var(--timeline-background-color);
|
|
box-shadow: var(--timeline-shadow);
|
|
overflow: hidden;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.content-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.timeline-content {
|
|
display: grid;
|
|
gap: 2rem;
|
|
padding: 1.5rem;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.timeline-content.active {
|
|
position: relative;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timeline-content.next {
|
|
transform: translateX(50px);
|
|
}
|
|
|
|
.timeline-content.prev {
|
|
transform: translateX(-50px);
|
|
}
|
|
|
|
.timeline-content.next.slide-in,
|
|
.timeline-content.prev.slide-in {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.timeline-content.active.slide-out-left {
|
|
transform: translateX(-50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.timeline-content.active.slide-out-right {
|
|
transform: translateX(50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.content-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.year-badge {
|
|
display: inline-block;
|
|
background-color: var(--timeline-primary-light);
|
|
color: var(--timeline-primary-color);
|
|
font-weight: 600;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
margin: 0 0 0.5rem 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.content-description {
|
|
color: var(--timeline-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.content-image {
|
|
overflow: hidden;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.content-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.timeline-content.active img {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.timeline-content img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Navigation controls */
|
|
.navigation-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--timeline-border-color);
|
|
}
|
|
|
|
.nav-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--timeline-border-color);
|
|
background-color: var(--timeline-background-color);
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: var(--timeline-text-color);
|
|
}
|
|
|
|
.nav-button:hover:not(:disabled) {
|
|
background-color: var(--timeline-primary-light);
|
|
border-color: var(--timeline-primary-color);
|
|
color: var(--timeline-primary-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--timeline-button-shadow);
|
|
}
|
|
|
|
.nav-button:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.nav-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Responsive styling */
|
|
@media (min-width: 768px) {
|
|
.timeline-content {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
@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">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="breadcrumb__area-content">
|
|
<h2>{{ __('About Us') }}</h2>
|
|
<ul>
|
|
<li><a href="/">{{ __('Home') }}</a><i class="fa-regular fa-angle-right"></i></li>
|
|
<li>{{ __('About Us') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcrumb Area End -->
|
|
|
|
<div>
|
|
<div>
|
|
<div class="bg-gradient-to-b from-white to-gray-50 py-16 md:py-24">
|
|
<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">{{ $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">
|
|
{{ $aboutSettings->our_story_paragraph_one }}
|
|
</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">
|
|
<a href="{{ $aboutSettings->our_story_button_url }}">{{ $aboutSettings->our_story_button_text }}</a>
|
|
<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-chevron-right h-4 w-4 ml-1"
|
|
>
|
|
<path d="m9 18 6-6-6-6"></path>
|
|
</svg>
|
|
</button>
|
|
</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="{{ 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<section class="header">
|
|
<h1>{{ $aboutSettings->our_journey_title }}</h1>
|
|
<p>{{ $aboutSettings->our_journey_subtitle }}</p>
|
|
</section>
|
|
|
|
<!-- Our History Area Start -->
|
|
<div class="history__area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="company__history-area">
|
|
@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 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>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Our History Area End -->
|
|
</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">{{ $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">{{ $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">{{ $aboutSettings->company_structure_advisor_name }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
|
<div class="absolute top-[-60px] left-1/2 transform -translate-x-1/2 w-px h-[30px] bg-gray-300"></div>
|
|
<div class="absolute top-[-30px] left-1/2 transform -translate-x-1/2 w-[80%] h-px bg-gray-300"></div>
|
|
<div class="absolute top-[-30px] left-[10%] w-px h-[30px] bg-gray-300"></div>
|
|
<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>
|
|
@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>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
@foreach (App\Models\TeamMember::all() 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>
|
|
@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">{{ $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">
|
|
@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"
|
|
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">{{ $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 }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@stop
|