854 lines
56 KiB
PHP
854 lines
56 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
|
||
|
||
@push('footer-js')
|
||
<script src="/web/cs/js/timeline.js"></script>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<!-- 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="index.html">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">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>
|
||
</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.
|
||
</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>
|
||
<button class="flex items-center text-sm font-medium text-teal-600 hover:text-teal-800 transition-colors">
|
||
Learn more about our journey
|
||
<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="/placeholder.svg?height=720&width=1280">
|
||
<source type="video/mp4" src="#" />
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
</section>
|
||
|
||
<div class="timeline-container">
|
||
<!-- Timeline dates will be generated here -->
|
||
<div class="timeline-dates">
|
||
<div class="timeline-line"></div>
|
||
<div id="dates-container" class="dates-container"></div>
|
||
</div>
|
||
|
||
<!-- Content area -->
|
||
<div class="content-area">
|
||
<div id="content-container" class="content-container">
|
||
<!-- Content will be inserted here -->
|
||
</div>
|
||
|
||
<!-- Navigation buttons -->
|
||
<div class="navigation-controls">
|
||
<button id="prev-btn" class="nav-button" aria-label="Previous milestone">
|
||
<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="icon">
|
||
<path d="m15 18-6-6 6-6"/>
|
||
</svg>
|
||
<span class="sr-only">Previous</span>
|
||
</button>
|
||
<button id="next-btn" class="nav-button" aria-label="Next milestone">
|
||
<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="icon">
|
||
<path d="m9 18 6-6-6-6"/>
|
||
</svg>
|
||
<span class="sr-only">Next</span>
|
||
</button>
|
||
</div>
|
||
</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">Company Structure</h2>
|
||
<p class="text-lg text-gray-600">Our organizational hierarchy designed for efficiency</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>
|
||
</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>
|
||
</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>
|
||
<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>
|
||
</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">
|
||
<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&width=600"
|
||
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
|
||
/>
|
||
</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&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&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>
|
||
</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>
|
||
</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&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">
|
||
<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">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>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-600 mb-4">Our global headquarters houses our executive team and primary R&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&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&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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Mission Area Start -->
|
||
<div class="mission__area section-padding">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 lg-mb-25">
|
||
<div class="mission__area-left mr-40 xl-mr-0">
|
||
<span class="subtitle wow fadeInLeft" data-wow-delay=".4s">Our Mission</span>
|
||
<h2 class="title_split_anim">Dedicated to Delivering Value and Excellence</h2>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="mission__area-right">
|
||
<div class="row">
|
||
<div class="col-md-6 md-mb-25 wow fadeInUp" data-wow-delay=".6s">
|
||
<div class="experience__area-list-item">
|
||
<i class="flaticon-team"></i>
|
||
<div class="experience__area-list-item-content">
|
||
<h4>Project Planning</h4>
|
||
<p>Ensuring every detail is considered designing</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 wow fadeInUp" data-wow-delay=".9s">
|
||
<div class="experience__area-list-item">
|
||
<i class="flaticon-technology"></i>
|
||
<div class="experience__area-list-item-content">
|
||
<h4>Labor Preparation</h4>
|
||
<p>We take pride in our quality craftsmanship</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Mission Area End -->
|
||
<!-- About Area Start -->
|
||
<div class="about__five section-padding pt-0">
|
||
<div class="container">
|
||
<div class="row al-center">
|
||
<div class="col-lg-5 lg-mb-25">
|
||
<div class="about__five-image wow img_left_animation">
|
||
<img src="/web/assets/img/about/about-4.jpg" alt="image">
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<div class="about__five-right ml-70 xl-ml-0">
|
||
<div class="about__five-right-title">
|
||
<span class="subtitle wow fadeInLeft" data-wow-delay=".4s">About Our Company</span>
|
||
<h2 class="title_split_anim">Trusted Partner in Construction and Design</h2>
|
||
</div>
|
||
<div class="features wow fadeInUp" data-wow-delay=".3s" style="background-image: url('/web/assets/img/portfolio/portfolio-8.jpg');">
|
||
<h3>Building Trust<br>Since 1989</h3>
|
||
</div>
|
||
<p class="wow fadeInUp" data-wow-delay=".6s">Our journey began with a commitment to excellence, and that commitment remains at the core of our operations today. We’ve grown from a small local business into a trusted partner for both residential and commercial.</p>
|
||
<div class="item_bounce">
|
||
<a class="build_button mt-20" href="portfolio.html">See Projects<i class="flaticon-right-up"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- About Area End -->
|
||
<!-- Video Area Start -->
|
||
<div class="video__two" style="background-image: url('/web/assets/img/service/services-1.jpg');">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="video__two-icon item_bounce">
|
||
<div class="video video-pulse">
|
||
<a class="video-popup" href="https://youtube.com/watch?v=0WC-tD-njcA"><i class="fas fa-play"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scroll__slider">
|
||
<div class="text-slide">
|
||
<div class="sliders text_scroll">
|
||
<ul>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Residential</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Architecture</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Community</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Healthcare</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Seaside Resort</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Modern</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="sliders text_scroll">
|
||
<ul>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Residential</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Architecture</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Community</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Healthcare</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Seaside Resort</a></li>
|
||
<li><img src="/web/assets/img/icon/star-dark.svg" alt="icon"><a href="portfolio-details">Modern</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Video Area End -->
|
||
<!-- Certification Area Start -->
|
||
<div class="certification section-padding pt-0">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-4 col-lg-5 lg-mb-25">
|
||
<div class="certification-left section-padding pb-0">
|
||
<span class="subtitle wow fadeInLeft" data-wow-delay=".4s">Industry Certifications</span>
|
||
<h2 class="title_split_anim">Our Key Achievements Over the Years</h2>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-8 col-lg-7">
|
||
<div class="certification-right">
|
||
<img class="wow img_top_animation" src="/web/assets/img/page/who-we-are.jpg" alt="image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="counter__one-area mt-80">
|
||
<div class="certification-right-counter">
|
||
<h2><span class="counter">678</span>+</h2>
|
||
<span>Complete Projects</span>
|
||
</div>
|
||
<div class="certification-right-counter">
|
||
<h2><span class="counter">120</span>+</h2>
|
||
<span>Team Members</span>
|
||
</div>
|
||
<div class="certification-right-counter">
|
||
<h2><span class="counter">635</span>+</h2>
|
||
<span>Client Reviews</span>
|
||
</div>
|
||
<div class="certification-right-counter">
|
||
<h2><span class="counter">89</span>+</h2>
|
||
<span>Winning Awards</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Certification Area End -->
|
||
<!-- Team Area Start -->
|
||
<div class="team__area section-padding">
|
||
<div class="container">
|
||
<div class="row mb-35">
|
||
<div class="col-xl-12">
|
||
<div class="team__area-title t-center">
|
||
<span class="subtitle wow fadeInLeft" data-wow-delay=".4s">Meet Our Experts</span>
|
||
<h2 class="title_split_anim">Dedicated Professionals</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-3 col-md-6 wow fadeInUp mt-25" data-wow-delay=".3s">
|
||
<div class="team__area-item">
|
||
<img class="img_full" src="/web/assets/img/team/team-1.jpg" alt="image">
|
||
<div class="team__area-item-content t-center pt-20">
|
||
<h5>Alan Dosan</h5>
|
||
<span>Lead Architect</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 wow fadeInUp mt-25" data-wow-delay=".6s">
|
||
<div class="team__area-item">
|
||
<img class="img_full" src="/web/assets/img/team/team-2.jpg" alt="image">
|
||
<div class="team__area-item-content t-center pt-20">
|
||
<h5>Sarah Johnson</h5>
|
||
<span>General Laborer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 wow fadeInUp mt-25" data-wow-delay=".9s">
|
||
<div class="team__area-item">
|
||
<img class="img_full" src="/web/assets/img/team/team-3.jpg" alt="image">
|
||
<div class="team__area-item-content t-center pt-20">
|
||
<h5>Derya Kurtulus</h5>
|
||
<span>Safety Inspector</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 wow fadeInUp mt-25" data-wow-delay="1.2s">
|
||
<div class="team__area-item">
|
||
<img class="img_full" src="/web/assets/img/team/team-4.jpg" alt="image">
|
||
<div class="team__area-item-content t-center pt-20">
|
||
<h5>Steve Rhodes</h5>
|
||
<span>Civil Engineer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Team Area End -->
|
||
@stop
|