mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 22:51:47 +00:00
Compare commits
No commits in common. "6746f1de777fafa6076513806ba40d062caa4751" and "8f3685cdb7725b09e5a717b4e61d9d298cde8218" have entirely different histories.
6746f1de77
...
8f3685cdb7
1 changed files with 72 additions and 72 deletions
144
about.html
144
about.html
|
|
@ -588,70 +588,6 @@
|
|||
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
|
||||
<div class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
||||
<!-- Vision Card -->
|
||||
<div class="relative group">
|
||||
<!-- Decorative elements -->
|
||||
<div
|
||||
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
|
||||
>
|
||||
<!-- Glossy overlay -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
||||
></div>
|
||||
|
||||
<!-- Animated border glow -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div
|
||||
class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping"
|
||||
></div>
|
||||
|
||||
<div class="relative text-center">
|
||||
<!-- Icon/Number with glow -->
|
||||
<div
|
||||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>02</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Title with text glow -->
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
||||
>
|
||||
VISION
|
||||
</h2>
|
||||
|
||||
<!-- Animated divider -->
|
||||
<div
|
||||
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Content with hover effect -->
|
||||
<p
|
||||
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
|
||||
>
|
||||
We will be the standard of global business excellence in
|
||||
Africa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission Card -->
|
||||
<div class="relative group">
|
||||
<!-- Decorative elements -->
|
||||
|
|
@ -672,15 +608,15 @@
|
|||
|
||||
<!-- Animated border glow -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div
|
||||
class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"
|
||||
class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"
|
||||
class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"
|
||||
></div>
|
||||
|
||||
<div class="relative text-center">
|
||||
|
|
@ -711,6 +647,70 @@
|
|||
>
|
||||
Out of the ordinary the Extraordinary that inspires the
|
||||
world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vision Card -->
|
||||
<div class="relative group">
|
||||
<!-- Decorative elements -->
|
||||
<div
|
||||
class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
|
||||
>
|
||||
<!-- Glossy overlay -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
|
||||
></div>
|
||||
|
||||
<!-- Animated border glow -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div
|
||||
class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping"
|
||||
></div>
|
||||
|
||||
<div class="relative text-center">
|
||||
<!-- Icon/Number with glow -->
|
||||
<div
|
||||
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
|
||||
>
|
||||
<span class="text-white text-2xl font-bold drop-shadow-lg"
|
||||
>02</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Title with text glow -->
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
|
||||
>
|
||||
VISION
|
||||
</h2>
|
||||
|
||||
<!-- Animated divider -->
|
||||
<div
|
||||
class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
|
||||
></div>
|
||||
|
||||
<!-- Content with hover effect -->
|
||||
<p
|
||||
class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
|
||||
>
|
||||
We will be the standard of global business excellence in
|
||||
Africa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -767,15 +767,15 @@
|
|||
<h3
|
||||
class="text-2xl font-semibold mb-6 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
|
||||
>
|
||||
Innovation
|
||||
Integrity
|
||||
</h3>
|
||||
<p
|
||||
class="text-lg text-neutral-600 leading-relaxed transition-all duration-300 group-hover:text-neutral-800"
|
||||
>
|
||||
we challenge the status quo. We seek better, smarter and more
|
||||
beautiful ways to solve problems and deliver value. When ideas
|
||||
fall short, we learn, adapt and try again- never settling,
|
||||
always solving
|
||||
We stay true to our word. We will do what we say we will do, and
|
||||
deliver on our promises. If forfeiting on our word is beyond our
|
||||
human control; we will communicate this transparently and in
|
||||
good time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue