mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 18:41:46 +00:00
feat: add services page
This commit is contained in:
parent
e53db02cfd
commit
bc95267aa4
8 changed files with 2661 additions and 398 deletions
388
contact.html
388
contact.html
|
|
@ -25,22 +25,22 @@
|
|||
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
||||
id="navMenu"
|
||||
>
|
||||
<div class="p-8 pt-12 flex flex-col h-full">
|
||||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links - Inverted C Layout -->
|
||||
<nav class="flex-1 relative">
|
||||
<div class="absolute inset-0 flex items-start">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="relative ml-8">
|
||||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME - Top -->
|
||||
<a
|
||||
href="index.html"
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
</a>
|
||||
|
||||
<!-- ABOUT US - Slightly right -->
|
||||
<a
|
||||
href="about.html"
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -161,8 +161,8 @@
|
|||
</a>
|
||||
|
||||
<!-- SERVICES - More right -->
|
||||
<a
|
||||
href="services.html"
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -399,7 +399,7 @@
|
|||
|
||||
<!-- PARTNERS - Back to left -->
|
||||
<a
|
||||
href="brands.html"
|
||||
href="partners.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
>
|
||||
<span
|
||||
|
|
@ -482,20 +482,24 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="container mx-auto px-8">
|
||||
<div class="flex justify-between items-center py-6">
|
||||
<!-- Static Logo and Menu -->
|
||||
<div class="fixed top-8 left-8 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider"
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||||
>KH3</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle -->
|
||||
<div class="fixed top-8 right-8 z-40">
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
|
|
@ -508,84 +512,148 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen flex items-center justify-center">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60"
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
src="assets/images/contact.png"
|
||||
alt="Office Background"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="relative z-10 text-center w-full">
|
||||
<div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto">
|
||||
<div
|
||||
class="flex-1 h-1 bg-white opacity-0"
|
||||
style="
|
||||
min-width: 100px;
|
||||
animation: fadeInLeft 1s ease-out 0.3s forwards;
|
||||
"
|
||||
></div>
|
||||
<h1
|
||||
class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0"
|
||||
style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
|
||||
>
|
||||
CONTACT US
|
||||
</h1>
|
||||
<div
|
||||
class="flex-1 h-1 bg-white opacity-0"
|
||||
style="
|
||||
min-width: 100px;
|
||||
animation: fadeInRight 1s ease-out 0.3s forwards;
|
||||
"
|
||||
></div>
|
||||
<div class="relative z-10 text-center">
|
||||
<h1 class="text-6xl md:text-8xl font-bold mb-6 masked-reveal">
|
||||
CONTACT US
|
||||
</h1>
|
||||
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
|
||||
</div>
|
||||
<div
|
||||
class="text-xl md:text-2xl text-white tracking-widest opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 0.9s forwards"
|
||||
>
|
||||
LET'S DISCUSS YOUR PROJECT
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="py-20 bg-white text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-4xl font-bold">GET IN TOUCH</h2>
|
||||
<p class="text-lg leading-relaxed text-neutral-600">
|
||||
<section class="relative min-h-screen flex items-center">
|
||||
<!-- Background Image with Overlay -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
src="assets/images/contact.png"
|
||||
alt="Office Background"
|
||||
class="w-full h-full object-cover transform scale-y-[-1]"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/60"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content Container -->
|
||||
<div class="relative z-10 w-full">
|
||||
<div class="container mx-auto px-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<!-- Left Column - Contact Information -->
|
||||
<div class="text-white space-y-8">
|
||||
<!-- Title -->
|
||||
<h2
|
||||
class="text-5xl md:text-6xl font-bold text-white opacity-0 hover:scale-105 transition-transform duration-300"
|
||||
style="animation: titleBounce 3s ease-out 2.7s forwards"
|
||||
>
|
||||
GET IN TOUCH
|
||||
</h2>
|
||||
|
||||
<!-- Description -->
|
||||
<p
|
||||
class="text-lg leading-relaxed text-white/80 opacity-0 hover:text-white transition-colors duration-500"
|
||||
style="animation: fadeInUp 1s ease-out 3.1s forwards"
|
||||
>
|
||||
Ready to start your next project? We'd love to hear from you. Fill
|
||||
out the form and we'll get back to you within 24 hours.
|
||||
</p>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">📍</div>
|
||||
<!-- Contact Details -->
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
class="flex items-start space-x-4 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.3s forwards"
|
||||
>
|
||||
<div class="text-kh3-red text-2xl">📍</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Address</h3>
|
||||
<p class="text-neutral-600">Accra, Ghana<br />Main Office</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">📞</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Phone</h3>
|
||||
<p class="text-neutral-600">
|
||||
+233 20 123 4567<br />+233 24 123 4567
|
||||
<h3 class="text-xl font-semibold mb-2 text-white">Address</h3>
|
||||
<p class="text-white/80">
|
||||
29 Labone Crescent, Accra<br />Accra - Ghana
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">✉️</div>
|
||||
<div
|
||||
class="flex items-start space-x-4 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.5s forwards"
|
||||
>
|
||||
<div class="text-kh3-red text-2xl">📞</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Email</h3>
|
||||
<p class="text-neutral-600">
|
||||
info@kh3.com<br />projects@kh3.com
|
||||
</p>
|
||||
<h3 class="text-xl font-semibold mb-2 text-white">Phone</h3>
|
||||
<p class="text-white/80">+233 30 396 9970</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-start space-x-4 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.7s forwards"
|
||||
>
|
||||
<div class="text-kh3-red text-2xl">✉️</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2 text-white">Email</h3>
|
||||
<p class="text-white/80">Info@KH3group.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">🕒</div>
|
||||
<div
|
||||
class="flex items-start space-x-4 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3.9s forwards"
|
||||
>
|
||||
<div class="text-kh3-red text-2xl">🕒</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Business Hours</h3>
|
||||
<p class="text-neutral-600">
|
||||
Monday - Friday<br />8:00 AM - 6:00 PM
|
||||
<h3 class="text-xl font-semibold mb-2 text-white">Business Hours</h3>
|
||||
<p class="text-white/80">
|
||||
Monday - Friday<br />9:00 AM - 6:00 PM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-50 p-8 rounded-lg">
|
||||
<!-- Right Column - Contact Form -->
|
||||
<div
|
||||
class="bg-white p-8 rounded-lg shadow-xl opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.9s forwards"
|
||||
>
|
||||
<form class="space-y-6" id="contactForm">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-semibold mb-2"
|
||||
<label for="name" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Full Name *</label
|
||||
>
|
||||
<input
|
||||
|
|
@ -593,12 +661,12 @@
|
|||
id="name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-semibold mb-2"
|
||||
<label for="email" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Email Address *</label
|
||||
>
|
||||
<input
|
||||
|
|
@ -606,42 +674,42 @@
|
|||
id="email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-semibold mb-2"
|
||||
<label for="phone" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Phone Number</label
|
||||
>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="company" class="block text-sm font-semibold mb-2"
|
||||
<label for="company" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Company</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="service" class="block text-sm font-semibold mb-2"
|
||||
<label for="service" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Service Interest</label
|
||||
>
|
||||
<select
|
||||
id="service"
|
||||
name="service"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
>
|
||||
<option value="">Select a service</option>
|
||||
<option value="design">Interior Design</option>
|
||||
|
|
@ -654,13 +722,13 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label for="budget" class="block text-sm font-semibold mb-2"
|
||||
<label for="budget" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Project Budget</label
|
||||
>
|
||||
<select
|
||||
id="budget"
|
||||
name="budget"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
|
||||
>
|
||||
<option value="">Select budget range</option>
|
||||
<option value="under-100k">Under 100K GHS</option>
|
||||
|
|
@ -672,7 +740,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-semibold mb-2"
|
||||
<label for="message" class="block text-sm font-semibold mb-2 text-gray-800"
|
||||
>Project Details *</label
|
||||
>
|
||||
<textarea
|
||||
|
|
@ -680,43 +748,90 @@
|
|||
name="message"
|
||||
rows="6"
|
||||
required
|
||||
placeholder="Tell us about your project, requirements, timeline, and any specific needs..."
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none"
|
||||
placeholder="Tell us about your project, requirements, and any specific needs..."
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none text-gray-900"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2"
|
||||
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2 font-semibold"
|
||||
>
|
||||
<span>Send Message</span>
|
||||
<span>→</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Down Prompt -->
|
||||
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
||||
<button
|
||||
id="contactScrollArrow"
|
||||
class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
|
||||
style="animation: fadeInUp 800ms ease-out 4.5s forwards"
|
||||
>
|
||||
<span class="text-xs tracking-widest mb-2">SCROLL</span>
|
||||
<svg
|
||||
class="w-5 h-5 animate-arrowPulse"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
<div class="w-px h-8 bg-white/70"></div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Map Section -->
|
||||
<section class="py-20 bg-kh3-black text-white">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold text-center mb-16">FIND US</h2>
|
||||
<div class="bg-neutral-800 rounded-lg p-12 text-center">
|
||||
<h2
|
||||
class="text-4xl font-bold text-center mb-16 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.4s forwards"
|
||||
>
|
||||
FIND US
|
||||
</h2>
|
||||
<div class="bg-kh3-grey/20 rounded-lg p-12 text-center">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3>
|
||||
<p class="text-neutral-300 leading-relaxed mb-6">
|
||||
<h3
|
||||
class="text-2xl font-bold mb-4 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.6s forwards"
|
||||
>
|
||||
Accra, Ghana
|
||||
</h3>
|
||||
<p
|
||||
class="text-kh3-grey leading-relaxed mb-6 opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 2.8s forwards"
|
||||
>
|
||||
Our main office is located in the heart of Accra, easily
|
||||
accessible from all major areas.
|
||||
</p>
|
||||
<div class="text-kh3-red font-semibold">
|
||||
<span>📍 5.5600° N, 0.2057° W</span>
|
||||
<div
|
||||
class="text-kh3-red font-semibold opacity-0"
|
||||
style="animation: fadeInUp 1s ease-out 3s forwards"
|
||||
>
|
||||
<span>📍 29 Labone Crescent, Accra, Ghana</span>
|
||||
</div>
|
||||
|
||||
<!-- Embedded Map -->
|
||||
<div
|
||||
class="mt-10 w-full overflow-hidden rounded-lg"
|
||||
style="aspect-ratio: 4 / 3"
|
||||
class="mt-10 w-full overflow-hidden rounded-lg opacity-0"
|
||||
style="
|
||||
aspect-ratio: 4 / 3;
|
||||
animation: fadeInUp 1s ease-out 3.2s forwards;
|
||||
"
|
||||
>
|
||||
<iframe
|
||||
title="KH3 Office Location Map"
|
||||
|
|
@ -742,7 +857,11 @@
|
|||
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
<div class="flex space-x-8">
|
||||
|
|
@ -779,6 +898,93 @@
|
|||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes arrowPulse {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-arrowPulse {
|
||||
animation: arrowPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes titleBounce {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px) scale(0.5);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translateY(20px) scale(1.1);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(5px) scale(1.02);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-2px) scale(0.98);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes maskRevealCenter {
|
||||
0% {
|
||||
clip-path: inset(0 50% 0 50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
clip-path: inset(0 0 0 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes maskReveal {
|
||||
0% {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
|
|
@ -905,7 +1111,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Auto-scroll to contact section after 2 seconds with custom smooth animation
|
||||
// Auto-scroll to contact section after 2.5 seconds with custom smooth animation
|
||||
setTimeout(() => {
|
||||
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
|
||||
if (contactSection) {
|
||||
|
|
@ -938,7 +1144,7 @@
|
|||
|
||||
requestAnimationFrame(animation);
|
||||
}
|
||||
}, 2000);
|
||||
}, 2500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue