Swap mission and vision card content in about.html, updating text and layout for clarity and consistency.
This commit is contained in:
parent
8f3685cdb7
commit
4fef072cdd
1 changed files with 67 additions and 67 deletions
134
about.html
134
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">
|
||||
<!-- 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue