Swap mission and vision card content in about.html, updating text and layout for clarity and consistency.

This commit is contained in:
George Birikorang 2025-09-18 03:00:55 -07:00
parent 8f3685cdb7
commit 4fef072cdd

View file

@ -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">
<!-- Mission 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-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"
></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"
>01</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"
>
MISSION
</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"
>
Out of the ordinary the Extraordinary that inspires the
world.
</p>
</div>
</div>
</div>
<!-- Vision 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-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse"
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"
class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping"
></div>
<div class="relative text-center">
@ -711,6 +647,70 @@
>
We will be the standard of global business excellence in
Africa.
</p>
</div>
</div>
</div>
<!-- Mission 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-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"
></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"
>01</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"
>
MISSION
</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"
>
Out of the ordinary the Extraordinary that inspires the
world.
</p>
</div>
</div>