mirror of
https://github.com/thecyberlearn/victory-web.git
synced 2026-08-18 10:13:03 +00:00
test pages
This commit is contained in:
quantumtaskai
GitHub
parent
53cc0c642d
commit
2622dc3849
717
test.html
Normal file
717
test.html
Normal file
@ -0,0 +1,717 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Victory International Trading - Global Commerce Solutions</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
.font-inter { font-family: 'Inter', sans-serif; }
|
||||||
|
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(60px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes scaleIn {
|
||||||
|
from { opacity: 0; transform: scale(0.9); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float { animation: float 6s ease-in-out infinite; }
|
||||||
|
.animate-slide-up { animation: slideUp 0.6s ease-out; }
|
||||||
|
.animate-fade-in { animation: fadeIn 0.8s ease-out; }
|
||||||
|
.animate-scale-in { animation: scaleIn 0.5s ease-out; }
|
||||||
|
|
||||||
|
.glassmorphism {
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
.neumorphism {
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow:
|
||||||
|
20px 20px 60px #d1d5db,
|
||||||
|
-20px -20px 60px #ffffff;
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #eab308, #f59e0b, #d97706);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-gradient {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
|
||||||
|
}
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow:
|
||||||
|
0 25px 50px -12px rgba(0, 0, 0, 0.1),
|
||||||
|
0 0 0 1px rgba(234, 179, 8, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom color classes */
|
||||||
|
.bg-primary-50 { background-color: #fefce8; }
|
||||||
|
.bg-primary-100 { background-color: #fef9c3; }
|
||||||
|
.bg-primary-200 { background-color: #fef08a; }
|
||||||
|
.bg-primary-500 { background-color: #eab308; }
|
||||||
|
.bg-primary-600 { background-color: #ca8a04; }
|
||||||
|
.bg-primary-700 { background-color: #a16207; }
|
||||||
|
|
||||||
|
.text-primary-400 { color: #facc15; }
|
||||||
|
.text-primary-500 { color: #eab308; }
|
||||||
|
.text-primary-600 { color: #ca8a04; }
|
||||||
|
.text-primary-700 { color: #a16207; }
|
||||||
|
|
||||||
|
.border-primary-200 { border-color: #fef08a; }
|
||||||
|
.border-primary-500 { border-color: #eab308; }
|
||||||
|
|
||||||
|
.from-primary-500 { --tw-gradient-from: #eab308; }
|
||||||
|
.to-primary-600 { --tw-gradient-to: #ca8a04; }
|
||||||
|
|
||||||
|
.focus\:border-primary-500:focus { border-color: #eab308; }
|
||||||
|
|
||||||
|
.hover\:text-primary-600:hover { color: #ca8a04; }
|
||||||
|
.hover\:border-primary-500:hover { border-color: #eab308; }
|
||||||
|
.hover\:text-primary-400:hover { color: #facc15; }
|
||||||
|
.hover\:bg-primary-600:hover { background-color: #ca8a04; }
|
||||||
|
|
||||||
|
.shadow-primary-500\/25 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.25); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter text-gray-800 bg-white">
|
||||||
|
<!-- Modern Navigation -->
|
||||||
|
<nav class="fixed top-0 left-0 right-0 z-50 glassmorphism border-b border-gray-200/20">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="flex items-center justify-between h-20">
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold text-lg">V</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-jakarta font-bold text-2xl bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
|
||||||
|
Victory Trading
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex items-center space-x-8">
|
||||||
|
<a href="#home" class="text-gray-600 hover:text-primary-600 font-medium transition-colors duration-200">Home</a>
|
||||||
|
<a href="#services" class="text-gray-600 hover:text-primary-600 font-medium transition-colors duration-200">Services</a>
|
||||||
|
<a href="#network" class="text-gray-600 hover:text-primary-600 font-medium transition-colors duration-200">Network</a>
|
||||||
|
<a href="#clients" class="text-gray-600 hover:text-primary-600 font-medium transition-colors duration-200">Clients</a>
|
||||||
|
<a href="#contact" class="text-gray-600 hover:text-primary-600 font-medium transition-colors duration-200">Contact</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button class="lg:hidden p-2 rounded-xl hover:bg-gray-100 transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a href="#contact" class="bg-gradient-to-r from-primary-500 to-primary-600 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg hover:shadow-primary-500/25 transition-all duration-300">
|
||||||
|
Get Quote
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="home" class="pt-20 pb-16 hero-gradient overflow-hidden">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center min-h-screen">
|
||||||
|
<div class="space-y-8 animate-slide-up">
|
||||||
|
<div class="inline-flex items-center px-4 py-2 rounded-full bg-primary-50 border border-primary-200">
|
||||||
|
<span class="w-2 h-2 bg-primary-500 rounded-full mr-2"></span>
|
||||||
|
<span class="text-primary-700 font-medium text-sm">Quick & Reliable Solutions</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="font-jakarta font-bold text-5xl lg:text-7xl leading-tight">
|
||||||
|
<span class="text-gray-900">Global Trade</span><br>
|
||||||
|
<span class="gradient-text">Excellence</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed max-w-2xl">
|
||||||
|
Victory International Trading delivers comprehensive import/export solutions with 35+ years of experience across Dubai, Singapore, India, Myanmar & Indonesia. We ensure fast delivery and competitive prices for your global business needs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#contact" class="bg-gradient-to-r from-primary-500 to-primary-600 text-white px-8 py-4 rounded-xl font-semibold hover:shadow-xl hover:shadow-primary-500/25 transition-all duration-300 text-center">
|
||||||
|
Get Free Quote
|
||||||
|
</a>
|
||||||
|
<a href="#services" class="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-xl font-semibold hover:border-primary-500 hover:text-primary-600 transition-all duration-300 text-center">
|
||||||
|
Our Services
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative animate-fade-in">
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="neumorphism rounded-3xl p-8 bg-white">
|
||||||
|
<div class="aspect-w-16 aspect-h-12 rounded-2xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
|
||||||
|
<div class="w-full h-80 bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||||
|
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2L1 7l11 5 9-4.09V17h2V7z"/>
|
||||||
|
<path d="M5 13.18v4L12 21l7-3.82v-4L12 17z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-2xl text-gray-800 mb-2">Global Network</h3>
|
||||||
|
<p class="text-gray-600">Connected worldwide</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-4 right-4 bg-gradient-to-r from-primary-500 to-primary-600 text-white px-4 py-2 rounded-xl font-semibold text-sm">
|
||||||
|
35+ Years
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating elements -->
|
||||||
|
<div class="absolute -top-4 -right-4 w-20 h-20 bg-gradient-to-br from-primary-200 to-primary-300 rounded-full animate-float opacity-60"></div>
|
||||||
|
<div class="absolute -bottom-8 -left-8 w-32 h-32 bg-gradient-to-br from-gray-200 to-gray-300 rounded-full animate-float opacity-40" style="animation-delay: -2s"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Stats Section -->
|
||||||
|
<section class="py-16 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="text-center group">
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="text-4xl lg:text-5xl font-jakarta font-bold gradient-text mb-2">35+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Years Experience</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center group">
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="text-4xl lg:text-5xl font-jakarta font-bold gradient-text mb-2">1000+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Products</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center group">
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="text-4xl lg:text-5xl font-jakarta font-bold gradient-text mb-2">5+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Countries</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center group">
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="text-4xl lg:text-5xl font-jakarta font-bold gradient-text mb-2">100%</div>
|
||||||
|
<div class="text-gray-600 font-medium">Trusted</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="py-24 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="font-jakarta font-bold text-4xl lg:text-5xl text-gray-900 mb-6">
|
||||||
|
Our <span class="gradient-text">Expertise</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Comprehensive solutions in all aspects related to export and import with established partnerships and mutual trust
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="bg-white rounded-3xl p-8 card-hover border border-gray-100">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl text-gray-900 mb-4">Branded FMCG</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">Fast-moving consumer goods distribution and export/import services with comprehensive solutions for global markets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-3xl p-8 card-hover border border-gray-100">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl text-gray-900 mb-4">Commodities</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">Reliable commodity trading with competitive prices, safe delivery within committed timeframes and strong global network connections.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-3xl p-8 card-hover border border-gray-100">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl text-gray-900 mb-4">Automotive</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">Cars and automotive parts import/export services with trusted solutions and comprehensive logistics support across multiple markets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-3xl p-8 card-hover border border-gray-100">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<circle cx="12" cy="12" r="6"/>
|
||||||
|
<circle cx="12" cy="12" r="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl text-gray-900 mb-4">Tyre Distribution</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">Quality tire distribution across global markets with established partnerships and reliable supply chain management solutions.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Network Section -->
|
||||||
|
<section id="network" class="py-24 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div class="space-y-8">
|
||||||
|
<h2 class="font-jakarta font-bold text-4xl lg:text-5xl text-gray-900 leading-tight">
|
||||||
|
Connected to Each <span class="gradient-text">Corner of Earth</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">
|
||||||
|
With Victory International Trading's strong worldwide logistic network, we ensure safe delivery of your consignment within the committed time frame.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-lg text-gray-600 leading-relaxed">
|
||||||
|
Our established partnership, respect and mutual trust are core values that have built our strong global network over 35+ successful years.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid sm:grid-cols-2 gap-6">
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg text-gray-900 mb-1">Global Presence</h4>
|
||||||
|
<p class="text-gray-600">Offices in Dubai, Singapore, India, Myanmar & Indonesia</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg text-gray-900 mb-1">Fast Delivery</h4>
|
||||||
|
<p class="text-gray-600">Committed timeframes with competitive prices globally</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg text-gray-900 mb-1">Safe Logistics</h4>
|
||||||
|
<p class="text-gray-600">Strong worldwide logistic network ensuring security</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg text-gray-900 mb-1">Trusted Brand</h4>
|
||||||
|
<p class="text-gray-600">35+ years of established partnerships and mutual trust</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="neumorphism rounded-3xl p-8 bg-white">
|
||||||
|
<div class="aspect-square rounded-2xl bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-24 h-24 bg-gradient-to-br from-primary-500 to-primary-600 rounded-3xl mx-auto mb-6 flex items-center justify-center">
|
||||||
|
<svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-jakarta font-bold text-3xl text-gray-800 mb-4">Global Network</h3>
|
||||||
|
<p class="text-gray-600 text-lg">Connected across 5+ countries with trusted partnerships</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating elements -->
|
||||||
|
<div class="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-blue-200 to-blue-300 rounded-full animate-float opacity-60"></div>
|
||||||
|
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-gradient-to-br from-green-200 to-green-300 rounded-full animate-float opacity-40" style="animation-delay: -3s"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Clients Section -->
|
||||||
|
<section id="clients" class="py-24 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="font-jakarta font-bold text-4xl lg:text-5xl text-gray-900 mb-6">
|
||||||
|
Distinguished <span class="gradient-text">Clientele</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Trusted by leading global brands and forward-thinking enterprises worldwide
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">ADIDAS</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">INTEL</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">TOYOTA</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">SHELL</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">APPLE</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">McDONALD'S</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">UNILEVER</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">COCA COLA</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">P&G</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">VOLKSWAGEN</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">GSK</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">VISA</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">ADOBE</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">FEDEX</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover border border-gray-100 flex items-center justify-center h-24">
|
||||||
|
<span class="font-jakarta font-bold text-gray-400 text-lg">PFIZER</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="py-24 bg-white">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="font-jakarta font-bold text-4xl lg:text-5xl text-gray-900 mb-6">
|
||||||
|
Contact Us to <span class="gradient-text">Grow Your Business</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">
|
||||||
|
Reach out to us for free quotation and comprehensive import/export solutions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-3xl p-8 lg:p-12 bg-white">
|
||||||
|
<form class="space-y-8" onsubmit="handleSubmit(event)">
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label for="name" class="block text-sm font-semibold text-gray-700">Full Name</label>
|
||||||
|
<input type="text" id="name" name="name" required
|
||||||
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:outline-none transition-colors bg-gray-50 focus:bg-white">
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label for="email" class="block text-sm font-semibold text-gray-700">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" required
|
||||||
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:outline-none transition-colors bg-gray-50 focus:bg-white">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label for="company" class="block text-sm font-semibold text-gray-700">Company Name</label>
|
||||||
|
<input type="text" id="company" name="company"
|
||||||
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:outline-none transition-colors bg-gray-50 focus:bg-white">
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label for="service" class="block text-sm font-semibold text-gray-700">Service Interest</label>
|
||||||
|
<select id="service" name="service"
|
||||||
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:outline-none transition-colors bg-gray-50 focus:bg-white">
|
||||||
|
<option value="">Select a service</option>
|
||||||
|
<option value="fmcg">Branded FMCG</option>
|
||||||
|
<option value="commodities">Commodities</option>
|
||||||
|
<option value="automotive">Automotive</option>
|
||||||
|
<option value="tires">Tyre Distribution</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label for="message" class="block text-sm font-semibold text-gray-700">Message</label>
|
||||||
|
<textarea id="message" name="message" rows="5"
|
||||||
|
placeholder="Tell us about your import/export requirements..."
|
||||||
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:outline-none transition-colors bg-gray-50 focus:bg-white resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white py-4 rounded-xl font-semibold text-lg hover:shadow-xl hover:shadow-primary-500/25 transition-all duration-300">
|
||||||
|
Get Free Quotation
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="py-24 bg-gradient-to-br from-primary-500 to-primary-600 text-white">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="font-jakarta font-bold text-4xl lg:text-5xl mb-6 leading-tight">
|
||||||
|
Elevate Your Global Trade
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl leading-relaxed mb-8 opacity-90 max-w-2xl mx-auto">
|
||||||
|
Join thousands of satisfied clients who trust Victory International Trading for their import/export needs. Experience comprehensive solutions with competitive prices and fast delivery.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<a href="#contact" class="bg-white text-primary-600 px-8 py-4 rounded-xl font-semibold hover:shadow-xl transition-all duration-300">
|
||||||
|
Request Quote
|
||||||
|
</a>
|
||||||
|
<a href="#services" class="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold hover:bg-white hover:text-primary-600 transition-all duration-300">
|
||||||
|
Explore Services
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gray-900 text-white py-16">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold text-lg">V</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-jakarta font-bold text-2xl">Victory Trading</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 leading-relaxed">
|
||||||
|
Victory International Trading is your trusted partner in global commerce with 35+ years of experience delivering comprehensive import/export solutions.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-xl flex items-center justify-center hover:bg-primary-600 transition-colors">
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-xl flex items-center justify-center hover:bg-primary-600 transition-colors">
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-xl flex items-center justify-center hover:bg-primary-600 transition-colors">
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg mb-6 text-white">Services</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Branded FMCG</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Commodities</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Automotive</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Tyre Distribution</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Import Solutions</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Export Solutions</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg mb-6 text-white">Company</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">About Victory</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Our Network</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Global Offices</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Partnerships</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Careers</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">News & Media</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-semibold text-lg mb-6 text-white">Support</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Contact Us</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Get Quote</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Track Shipment</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Documentation</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">FAQ</a></li>
|
||||||
|
<li><a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Client Portal</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div class="text-gray-400 mb-4 md:mb-0">
|
||||||
|
<p>© 2025 Victory International Trading. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Privacy Policy</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Terms of Service</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Cookie Policy</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Modern scroll effects
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
nav.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||||
|
nav.style.borderBottom = '1px solid rgba(229, 231, 235, 0.5)';
|
||||||
|
} else {
|
||||||
|
nav.style.background = 'rgba(255, 255, 255, 0.25)';
|
||||||
|
nav.style.borderBottom = '1px solid rgba(255, 255, 255, 0.2)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth scrolling
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submission
|
||||||
|
function handleSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const submitBtn = event.target.querySelector('button[type="submit"]');
|
||||||
|
const originalText = submitBtn.textContent;
|
||||||
|
|
||||||
|
submitBtn.textContent = 'Sending...';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
alert('Thank you for your inquiry! Victory International Trading will contact you within 24 hours with a free quotation.');
|
||||||
|
event.target.reset();
|
||||||
|
submitBtn.textContent = originalText;
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Intersection Observer for animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe sections for scroll animations
|
||||||
|
document.querySelectorAll('section').forEach(section => {
|
||||||
|
section.style.opacity = '0';
|
||||||
|
section.style.transform = 'translateY(30px)';
|
||||||
|
section.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
observer.observe(section);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Counter animation for stats
|
||||||
|
function animateCounter(element, target, duration = 2000) {
|
||||||
|
let start = 0;
|
||||||
|
const increment = target / (duration / 16);
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
start += increment;
|
||||||
|
if (start >= target) {
|
||||||
|
start = target;
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
const suffix = element.textContent.includes('+') ? '+' :
|
||||||
|
element.textContent.includes('%') ? '%' : '';
|
||||||
|
element.textContent = Math.floor(start) + suffix;
|
||||||
|
}, 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger counter animation when stats section is visible
|
||||||
|
const statsObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const counters = entry.target.querySelectorAll('.gradient-text');
|
||||||
|
counters.forEach(counter => {
|
||||||
|
const text = counter.textContent;
|
||||||
|
let target = parseInt(text);
|
||||||
|
if (text.includes('%')) target = parseInt(text);
|
||||||
|
else if (text.includes('+')) target = parseInt(text);
|
||||||
|
|
||||||
|
counter.textContent = '0';
|
||||||
|
animateCounter(counter, target);
|
||||||
|
});
|
||||||
|
statsObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const statsSection = document.querySelector('#services').previousElementSibling;
|
||||||
|
if (statsSection) {
|
||||||
|
statsObserver.observe(statsSection);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile menu toggle (basic implementation)
|
||||||
|
const mobileMenuBtn = document.querySelector('.lg\\:hidden button');
|
||||||
|
if (mobileMenuBtn) {
|
||||||
|
mobileMenuBtn.addEventListener('click', () => {
|
||||||
|
// Basic mobile menu toggle - would need full implementation
|
||||||
|
console.log('Mobile menu toggle');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
931
test1.html
Normal file
931
test1.html
Normal file
@ -0,0 +1,931 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Victory International Trading LLC - Global Trade Excellence</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
.font-inter { font-family: 'Inter', sans-serif; }
|
||||||
|
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(60px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes scaleIn {
|
||||||
|
from { opacity: 0; transform: scale(0.9); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float { animation: float 6s ease-in-out infinite; }
|
||||||
|
.animate-slide-up { animation: slideUp 0.6s ease-out; }
|
||||||
|
.animate-fade-in { animation: fadeIn 0.8s ease-out; }
|
||||||
|
.animate-scale-in { animation: scaleIn 0.5s ease-out; }
|
||||||
|
|
||||||
|
.glassmorphism {
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
.neumorphism {
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow:
|
||||||
|
20px 20px 60px #d1d5db,
|
||||||
|
-20px -20px 60px #ffffff;
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #065f46, #047857, #059669);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-gradient {
|
||||||
|
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%);
|
||||||
|
}
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow:
|
||||||
|
0 25px 50px -12px rgba(0, 0, 0, 0.1),
|
||||||
|
0 0 0 1px rgba(5, 150, 105, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom emerald color system */
|
||||||
|
.bg-emerald-50 { background-color: #ecfdf5; }
|
||||||
|
.bg-emerald-100 { background-color: #d1fae5; }
|
||||||
|
.bg-emerald-500 { background-color: #10b981; }
|
||||||
|
.bg-emerald-600 { background-color: #059669; }
|
||||||
|
.bg-emerald-700 { background-color: #047857; }
|
||||||
|
.bg-emerald-900 { background-color: #064e3b; }
|
||||||
|
|
||||||
|
.text-emerald-500 { color: #10b981; }
|
||||||
|
.text-emerald-600 { color: #059669; }
|
||||||
|
.text-emerald-700 { color: #047857; }
|
||||||
|
.text-emerald-900 { color: #064e3b; }
|
||||||
|
|
||||||
|
.border-emerald-200 { border-color: #a7f3d0; }
|
||||||
|
.border-emerald-500 { border-color: #10b981; }
|
||||||
|
|
||||||
|
.from-emerald-500 { --tw-gradient-from: #10b981; }
|
||||||
|
.to-emerald-600 { --tw-gradient-to: #059669; }
|
||||||
|
|
||||||
|
.focus\:border-emerald-500:focus { border-color: #10b981; }
|
||||||
|
|
||||||
|
.hover\:text-emerald-600:hover { color: #059669; }
|
||||||
|
.hover\:border-emerald-500:hover { border-color: #10b981; }
|
||||||
|
.hover\:bg-emerald-600:hover { background-color: #059669; }
|
||||||
|
|
||||||
|
.shadow-emerald-500\/25 { box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25); }
|
||||||
|
|
||||||
|
/* Brand logos grid animation */
|
||||||
|
.brand-scroll {
|
||||||
|
animation: scroll 30s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.nav-blur {
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-white">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-200">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between items-center h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<span class="text-white font-bold text-xl">V</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-jakarta font-bold text-xl text-gray-900">Victory</h1>
|
||||||
|
<p class="text-xs text-gray-500 -mt-1">International Trading</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-10 flex items-baseline space-x-8">
|
||||||
|
<a href="#home" class="text-gray-900 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">Home</a>
|
||||||
|
<a href="#about" class="text-gray-700 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">About</a>
|
||||||
|
<a href="#services" class="text-gray-700 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">Services</a>
|
||||||
|
<a href="#products" class="text-gray-700 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">Products</a>
|
||||||
|
<a href="#network" class="text-gray-700 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">Network</a>
|
||||||
|
<a href="#contact" class="text-gray-700 hover:text-emerald-600 px-3 py-2 text-sm font-medium transition-colors">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<button class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-emerald-600 transition-colors shadow-emerald-500/25">
|
||||||
|
Get Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:hidden">
|
||||||
|
<button id="mobile-menu-btn" class="text-gray-500 hover:text-gray-600 focus:outline-none">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="home" class="hero-gradient pt-16 pb-20 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="animate-slide-up">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-jakarta font-bold text-gray-900 mb-6">
|
||||||
|
Global Trade
|
||||||
|
<span class="gradient-text">Excellence</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||||
|
Connecting markets worldwide since 1988. Your trusted partner for FMCG, commodities, and automotive trading across 5 countries.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="animate-fade-in flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
|
<button class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-emerald-600 transition-all transform hover:scale-105 shadow-emerald-500/25">
|
||||||
|
Start Trading
|
||||||
|
</button>
|
||||||
|
<button class="border-2 border-emerald-500 text-emerald-700 px-8 py-4 rounded-xl text-lg font-semibold hover:bg-emerald-50 transition-all">
|
||||||
|
Our Products
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="animate-scale-in grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-emerald-600 mb-2">35+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Years Experience</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-emerald-600 mb-2">1000+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Products</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-emerald-600 mb-2">5</div>
|
||||||
|
<div class="text-gray-600 font-medium">Countries</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-emerald-600 mb-2">100%</div>
|
||||||
|
<div class="text-gray-600 font-medium">Satisfaction</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Brand Partners Showcase -->
|
||||||
|
<section class="py-12 bg-white border-y border-gray-100">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-600 mb-4">Trusted by Leading Global Brands</h3>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-hidden">
|
||||||
|
<div class="flex space-x-8 brand-scroll">
|
||||||
|
<div class="flex space-x-8 min-w-full">
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-blue-600">Nestlé</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-red-600">Coca-Cola</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-blue-800">Unilever</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-purple-600">Cadbury</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-green-600">Sprite</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-yellow-600">Lipton</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-8 min-w-full">
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-blue-600">Nestlé</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-red-600">Coca-Cola</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-blue-800">Unilever</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-purple-600">Cadbury</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-green-600">Sprite</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="font-bold text-yellow-600">Lipton</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Comprehensive Trade Solutions
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
From FMCG distribution to automotive solutions, we deliver end-to-end trading services across global markets
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">🛒</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">FMCG Products</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Fast-moving consumer goods distribution across global markets with established supply chains.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">📦</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Commodities Trading</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Raw materials and commodity sourcing worldwide with competitive pricing and quality assurance.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">🚗</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Automotive Solutions</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Complete automotive trading including vehicles, tires, and parts distribution services.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">🚢</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Export Services</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Comprehensive export facilitation, documentation, and logistics management.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">📥</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Import Solutions</h3>
|
||||||
|
<p class="text-gray-600 mb-6">End-to-end import management including customs clearance and distribution.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8 card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<span class="text-2xl">🌐</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Global Logistics</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Worldwide shipping and distribution network with real-time tracking capabilities.</p>
|
||||||
|
<button class="text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">Learn More →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="py-20 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-6">
|
||||||
|
35+ Years of Global Excellence
|
||||||
|
</h2>
|
||||||
|
<p class="text-lg text-gray-600 mb-8">
|
||||||
|
Since 1988, Victory International Trading LLC has been at the forefront of global commerce,
|
||||||
|
connecting markets and building lasting partnerships across continents.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-4 mb-8">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white text-sm">✓</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-700">Established in 1988 in Dubai</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white text-sm">✓</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-700">FMCG & Commodities Specialists</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white text-sm">✓</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-700">Trusted by 1000+ Global Partners</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white text-sm">✓</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-700">5-Country Network Presence</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition-colors">
|
||||||
|
Our Story
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="glassmorphism rounded-2xl p-8">
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-6">Our Journey</h3>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 font-bold">1988</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Founded in Dubai</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Established headquarters in UAE</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 font-bold">1995</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Singapore Expansion</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Entered ASEAN markets</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 font-bold">2000</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Indian Operations</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Established Mumbai office</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 font-bold">2025</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Global Leader</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Leading trade solutions provider</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Global Network -->
|
||||||
|
<section id="network" class="py-20 bg-emerald-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Global Network
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
Strategically located offices across key international markets
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="neumorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-white font-bold">🇦🇪</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold text-gray-900 mb-2">Dubai, UAE</h3>
|
||||||
|
<p class="text-gray-600 mb-3">Headquarters & Regional Hub</p>
|
||||||
|
<p class="text-sm text-gray-500">📞 +971-XX-XXXXXXX</p>
|
||||||
|
<p class="text-sm text-gray-500">✉️ dubai@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-white font-bold">🇸🇬</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold text-gray-900 mb-2">Singapore</h3>
|
||||||
|
<p class="text-gray-600 mb-3">ASEAN Operations Center</p>
|
||||||
|
<p class="text-sm text-gray-500">📞 +65-XXXX-XXXX</p>
|
||||||
|
<p class="text-sm text-gray-500">✉️ singapore@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-white font-bold">🇮🇳</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold text-gray-900 mb-2">Mumbai, India</h3>
|
||||||
|
<p class="text-gray-600 mb-3">South Asia Operations</p>
|
||||||
|
<p class="text-sm text-gray-500">📞 +91-XX-XXXXXXXX</p>
|
||||||
|
<p class="text-sm text-gray-500">✉️ india@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-white font-bold">🇲🇲</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold text-gray-900 mb-2">Yangon, Myanmar</h3>
|
||||||
|
<p class="text-gray-600 mb-3">Myanmar Market Access</p>
|
||||||
|
<p class="text-sm text-gray-500">📞 +95-X-XXXXXXX</p>
|
||||||
|
<p class="text-sm text-gray-500">✉️ myanmar@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-white font-bold">🇮🇩</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold text-gray-900 mb-2">Jakarta, Indonesia</h3>
|
||||||
|
<p class="text-gray-600 mb-3">Indonesia Operations</p>
|
||||||
|
<p class="text-sm text-gray-500">📞 +62-XX-XXXXXXXX</p>
|
||||||
|
<p class="text-sm text-gray-500">✉️ indonesia@victory.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Products Section -->
|
||||||
|
<section id="products" class="py-20 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Product Portfolio
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
1000+ premium products across multiple categories
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Categories Filter -->
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 mb-12">
|
||||||
|
<button class="product-filter-btn active bg-emerald-500 text-white px-6 py-3 rounded-full font-medium transition-all" data-filter="all">
|
||||||
|
All Products
|
||||||
|
</button>
|
||||||
|
<button class="product-filter-btn border-2 border-emerald-500 text-emerald-600 px-6 py-3 rounded-full font-medium hover:bg-emerald-50 transition-all" data-filter="fmcg">
|
||||||
|
FMCG
|
||||||
|
</button>
|
||||||
|
<button class="product-filter-btn border-2 border-emerald-500 text-emerald-600 px-6 py-3 rounded-full font-medium hover:bg-emerald-50 transition-all" data-filter="commodities">
|
||||||
|
Commodities
|
||||||
|
</button>
|
||||||
|
<button class="product-filter-btn border-2 border-emerald-500 text-emerald-600 px-6 py-3 rounded-full font-medium hover:bg-emerald-50 transition-all" data-filter="automotive">
|
||||||
|
Automotive
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="product-grid">
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="fmcg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">📱</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Consumer Electronics</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">Premium electronics and digital devices for global markets</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="fmcg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">🥤</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Food & Beverages</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">World-class food products and beverage brands</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="commodities">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">🌾</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Agriculture Products</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">Premium agricultural commodities and raw materials</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="commodities">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">⚡</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Energy Resources</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">Sustainable energy solutions and petroleum products</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="automotive">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">🚗</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Automobiles</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">Premium vehicles and automotive solutions worldwide</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card neumorphism rounded-2xl p-6 card-hover" data-category="automotive">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-gray-500 to-gray-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl">⚙️</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-3 text-center">Auto Parts & Tires</h3>
|
||||||
|
<p class="text-gray-600 text-center mb-6">Quality automotive components and tire solutions</p>
|
||||||
|
<button class="w-full border-2 border-emerald-500 text-emerald-600 py-3 rounded-lg font-medium hover:bg-emerald-50 transition-all">
|
||||||
|
Request Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Testimonials -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Client Success Stories
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
Trusted by industry leaders worldwide
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="neumorphism rounded-2xl p-8">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white font-bold">A</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-gray-900">Ahmed Al-Mansouri</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Gulf Trading Co., Dubai</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-700 italic">
|
||||||
|
"Victory Trading has been our reliable partner for FMCG distribution across ASEAN markets.
|
||||||
|
Their expertise and network are unmatched in the industry."
|
||||||
|
</p>
|
||||||
|
<div class="flex text-yellow-400 mt-4">
|
||||||
|
<span>★★★★★</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<span class="text-white font-bold">P</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-gray-900">Priya Sharma</h4>
|
||||||
|
<p class="text-gray-600 text-sm">Mumbai Exports Ltd., India</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-700 italic">
|
||||||
|
"Excellent logistics solutions and competitive pricing. They've helped us expand our
|
||||||
|
commodity trading operations significantly across multiple countries."
|
||||||
|
</p>
|
||||||
|
<div class="flex text-yellow-400 mt-4">
|
||||||
|
<span>★★★★★</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="py-20 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-6">
|
||||||
|
Let's Trade Together
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 mb-8">
|
||||||
|
Ready to expand your global reach? Connect with our team today.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-6 mb-8">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 text-xl">📞</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Phone</h4>
|
||||||
|
<p class="text-gray-600">+971-XX-XXXXXXX</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 text-xl">✉️</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Email</h4>
|
||||||
|
<p class="text-gray-600">info@victorytrading.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-emerald-600 text-xl">📍</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Headquarters</h4>
|
||||||
|
<p class="text-gray-600">Dubai, United Arab Emirates</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neumorphism rounded-2xl p-8">
|
||||||
|
<form class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<input type="text" placeholder="Your Name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="email" placeholder="Email Address" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
<option value="">Select Service</option>
|
||||||
|
<option value="fmcg">FMCG Products</option>
|
||||||
|
<option value="commodities">Commodities Trading</option>
|
||||||
|
<option value="automotive">Automotive Solutions</option>
|
||||||
|
<option value="export">Export Services</option>
|
||||||
|
<option value="import">Import Solutions</option>
|
||||||
|
<option value="logistics">Global Logistics</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<textarea rows="4" placeholder="Your Message" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 text-white py-4 rounded-lg font-semibold hover:bg-emerald-600 transition-all transform hover:scale-105 shadow-emerald-500/25">
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gray-900 text-white py-16">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<span class="text-white font-bold text-xl">V</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl">Victory International Trading LLC</h3>
|
||||||
|
<p class="text-gray-400 text-sm">Global Trade Solutions Since 1988</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 mb-6 max-w-md">
|
||||||
|
Leading the future of international trade with innovative solutions,
|
||||||
|
trusted partnerships, and unmatched global reach.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors">
|
||||||
|
<span class="text-sm">in</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors">
|
||||||
|
<span class="text-sm">tw</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors">
|
||||||
|
<span class="text-sm">fb</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-lg mb-6">Services</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#services" class="text-gray-300 hover:text-emerald-400 transition-colors">FMCG Products</a></li>
|
||||||
|
<li><a href="#services" class="text-gray-300 hover:text-emerald-400 transition-colors">Commodities Trading</a></li>
|
||||||
|
<li><a href="#services" class="text-gray-300 hover:text-emerald-400 transition-colors">Automotive Solutions</a></li>
|
||||||
|
<li><a href="#services" class="text-gray-300 hover:text-emerald-400 transition-colors">Global Logistics</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-lg mb-6">Company</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#about" class="text-gray-300 hover:text-emerald-400 transition-colors">About Us</a></li>
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-emerald-400 transition-colors">Global Network</a></li>
|
||||||
|
<li><a href="#contact" class="text-gray-300 hover:text-emerald-400 transition-colors">Contact</a></li>
|
||||||
|
<li><a href="#" class="text-gray-300 hover:text-emerald-400 transition-colors">Careers</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-800 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 Victory International Trading LLC. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-emerald-400 text-sm transition-colors">Privacy Policy</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-emerald-400 text-sm transition-colors">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Quote Modal -->
|
||||||
|
<div id="quoteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
|
||||||
|
<div class="bg-white rounded-2xl max-w-md w-full p-8 relative">
|
||||||
|
<button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-2xl">×</button>
|
||||||
|
<h3 class="text-2xl font-jakarta font-bold text-gray-900 mb-6">Request Quote</h3>
|
||||||
|
<form class="space-y-4">
|
||||||
|
<input type="text" placeholder="Company Name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
<input type="text" placeholder="Contact Person" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
<input type="email" placeholder="Email Address" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
<select required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
|
||||||
|
<option value="">Product Category</option>
|
||||||
|
<option value="fmcg">FMCG Products</option>
|
||||||
|
<option value="commodities">Commodities</option>
|
||||||
|
<option value="automotive">Automotive</option>
|
||||||
|
</select>
|
||||||
|
<textarea rows="3" placeholder="Product Details" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors resize-none"></textarea>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 text-white py-3 rounded-lg font-semibold hover:bg-emerald-600 transition-colors">
|
||||||
|
Submit Quote Request
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mobile menu toggle
|
||||||
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Product filter functionality
|
||||||
|
const filterButtons = document.querySelectorAll('.product-filter-btn');
|
||||||
|
const productCards = document.querySelectorAll('.product-card');
|
||||||
|
|
||||||
|
filterButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const filter = button.getAttribute('data-filter');
|
||||||
|
|
||||||
|
// Update active button
|
||||||
|
filterButtons.forEach(btn => {
|
||||||
|
btn.classList.remove('active', 'bg-emerald-500', 'text-white');
|
||||||
|
btn.classList.add('border-2', 'border-emerald-500', 'text-emerald-600');
|
||||||
|
});
|
||||||
|
button.classList.add('active', 'bg-emerald-500', 'text-white');
|
||||||
|
button.classList.remove('border-2', 'border-emerald-500', 'text-emerald-600');
|
||||||
|
|
||||||
|
// Filter products
|
||||||
|
productCards.forEach(card => {
|
||||||
|
const category = card.getAttribute('data-category');
|
||||||
|
if (filter === 'all' || category === filter) {
|
||||||
|
card.style.display = 'block';
|
||||||
|
card.classList.add('animate-scale-in');
|
||||||
|
} else {
|
||||||
|
card.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quote modal functionality
|
||||||
|
const getQuoteButtons = document.querySelectorAll('[href="#"], button:contains("Get Quote")');
|
||||||
|
const quoteModal = document.getElementById('quoteModal');
|
||||||
|
const closeModal = document.getElementById('closeModal');
|
||||||
|
|
||||||
|
// Open modal
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (e.target.textContent.includes('Get Quote') || e.target.textContent.includes('Request Quote')) {
|
||||||
|
e.preventDefault();
|
||||||
|
quoteModal.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
closeModal?.addEventListener('click', () => {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal on backdrop click
|
||||||
|
quoteModal?.addEventListener('click', (e) => {
|
||||||
|
if (e.target === quoteModal) {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submission handling
|
||||||
|
document.querySelectorAll('form').forEach(form => {
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Thank you for your inquiry! We will contact you within 24 hours.');
|
||||||
|
if (quoteModal && !quoteModal.classList.contains('hidden')) {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate-slide-up');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements for animation
|
||||||
|
document.querySelectorAll('.card-hover, .neumorphism').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navbar background on scroll
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const navbar = document.querySelector('nav');
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
navbar.classList.add('shadow-lg');
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove('shadow-lg');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
94
test2.html
Normal file
94
test2.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Victory Dubai | International Trading LLC</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Poppins', sans-serif; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-50 text-gray-800">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="fixed top-0 w-full bg-white/80 backdrop-blur shadow z-30">
|
||||||
|
<div class="container mx-auto flex items-center justify-between px-6 py-4">
|
||||||
|
<img src="your-logo-path/victory-logo.png" alt="Victory Dubai" class="h-12" />
|
||||||
|
<nav class="hidden md:flex space-x-8 text-sm font-medium">
|
||||||
|
<a href="#home" class="hover:text-blue-600 transition">Home</a>
|
||||||
|
<a href="#about" class="hover:text-blue-600 transition">About</a>
|
||||||
|
<a href="#brands" class="hover:text-blue-600 transition">Brands</a>
|
||||||
|
<a href="#contact" class="hover:text-blue-600 transition">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section id="home" class="pt-32 pb-24 bg-gradient-to-r from-blue-600 to-blue-800 text-white text-center">
|
||||||
|
<div class="container mx-auto px-6">
|
||||||
|
<h1 class="text-5xl font-bold mb-6 animate-fadeIn">Empowering Global Trade</h1>
|
||||||
|
<p class="text-lg mb-8 max-w-2xl mx-auto animate-fadeIn delay-200">Victory International Trading LLC brings the world’s leading brands and commodities to new markets, driven by excellence and trust for over 35 years.</p>
|
||||||
|
<a href="#about" class="inline-block bg-white text-blue-700 font-semibold px-8 py-3 rounded shadow hover:bg-gray-100 transition animate-fadeIn delay-400">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About -->
|
||||||
|
<section id="about" class="py-20 bg-white text-center">
|
||||||
|
<div class="container mx-auto px-6">
|
||||||
|
<h2 class="text-4xl font-semibold mb-6">About Victory Dubai</h2>
|
||||||
|
<p class="max-w-3xl mx-auto text-gray-600 leading-relaxed">Victory International Trading LLC is a trusted global trading company based in Dubai. With a diversified portfolio spanning FMCG, agriculture, tires, and machinery, Victory connects suppliers and buyers across five continents with unparalleled service and commitment.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Brands Grid -->
|
||||||
|
<section id="brands" class="py-20 bg-gray-100">
|
||||||
|
<div class="container mx-auto px-6">
|
||||||
|
<h2 class="text-4xl font-semibold text-center mb-12">Our Brands</h2>
|
||||||
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 items-center">
|
||||||
|
<!-- Replace src with your brand images -->
|
||||||
|
<img src="your-brands/logo1.png" alt="Brand 1" class="object-contain h-24 mx-auto grayscale hover:grayscale-0 transition" />
|
||||||
|
<img src="your-brands/logo2.png" alt="Brand 2" class="object-contain h-24 mx-auto grayscale hover:grayscale-0 transition" />
|
||||||
|
<img src="your-brands/logo3.png" alt="Brand 3" class="object-contain h-24 mx-auto grayscale hover:grayscale-0 transition" />
|
||||||
|
<img src="your-brands/logo4.png" alt="Brand 4" class="object-contain h-24 mx-auto grayscale hover:grayscale-0 transition" />
|
||||||
|
<img src="your-brands/logo5.png" alt="Brand 5" class="object-contain h-24 mx-auto grayscale hover:grayscale-0 transition" />
|
||||||
|
<!-- Add more logos as needed -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section id="contact" class="py-20 bg-white text-center">
|
||||||
|
<div class="container mx-auto px-6">
|
||||||
|
<h2 class="text-4xl font-semibold mb-6">Get in Touch</h2>
|
||||||
|
<p class="text-gray-600 mb-4">Email: <a href="mailto:info@victorydubai.com" class="text-blue-600 hover:underline">info@victorydubai.com</a></p>
|
||||||
|
<p class="text-gray-600">Phone: +971-4-xxxxxxx</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="py-6 bg-gray-800 text-gray-400 text-center text-sm">
|
||||||
|
© 2025 Victory International Trading LLC. All rights reserved.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Animations -->
|
||||||
|
<style>
|
||||||
|
.animate-fadeIn {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
animation: fadeIn 0.8s ease forwards;
|
||||||
|
}
|
||||||
|
.animate-fadeIn.delay-200 { animation-delay: 0.2s; }
|
||||||
|
.animate-fadeIn.delay-400 { animation-delay: 0.4s; }
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
926
test3.html
Normal file
926
test3.html
Normal file
@ -0,0 +1,926 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Victory International Trading LLC - Quick and Reliable International Trade Solution</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
.font-inter { font-family: 'Inter', sans-serif; }
|
||||||
|
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(60px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float { animation: float 3s ease-in-out infinite; }
|
||||||
|
.animate-slide-up { animation: slideUp 0.8s ease-out; }
|
||||||
|
.animate-fade-in { animation: fadeIn 1s ease-out; }
|
||||||
|
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }
|
||||||
|
|
||||||
|
.glassmorphism {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-overlay {
|
||||||
|
background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(96, 165, 250, 0.7) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 10px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo:hover {
|
||||||
|
filter: grayscale(0%);
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-blur {
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-padding {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-counter {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-white">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-100">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between items-center h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<span class="text-white font-bold text-xl">V</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-jakarta font-bold text-xl text-gray-900">Victory</h1>
|
||||||
|
<p class="text-xs text-gray-500 -mt-1">International Trading</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-10 flex items-baseline space-x-8">
|
||||||
|
<a href="#home" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Home</a>
|
||||||
|
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">About</a>
|
||||||
|
<a href="#products" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Products</a>
|
||||||
|
<a href="#network" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Global Reach</a>
|
||||||
|
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<button class="gradient-bg text-white px-6 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Get Quote
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="home" class="relative min-h-screen flex items-center">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 800\"><defs><linearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:%23dbeafe;stop-opacity:1\" /><stop offset=\"100%\" style=\"stop-color:%23bfdbfe;stop-opacity:1\" /></linearGradient></defs><rect width=\"1200\" height=\"800\" fill=\"url(%23grad)\"/><g opacity=\"0.1\"><circle cx=\"200\" cy=\"150\" r=\"80\" fill=\"%233b82f6\"/><circle cx=\"900\" cy=\"200\" r=\"120\" fill=\"%231e40af\"/><circle cx=\"300\" cy=\"600\" r=\"100\" fill=\"%232563eb\"/><circle cx=\"1000\" cy=\"500\" r=\"90\" fill=\"%2360a5fa\"/></g></svg>');">
|
||||||
|
</div>
|
||||||
|
<div class="hero-overlay absolute inset-0"></div>
|
||||||
|
|
||||||
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
|
||||||
|
<div class="animate-slide-up">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-jakarta font-bold mb-6">
|
||||||
|
Quick and Reliable<br>
|
||||||
|
<span class="text-yellow-300">International Trade Solution</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto opacity-90">
|
||||||
|
Victory International Trading is an international company operating in the field of distribution,
|
||||||
|
export and import in the FMCG and Commodity sector. With offices in Dubai, Singapore, India,
|
||||||
|
Myanmar & Indonesia and experience of more than 35 years we have built a strong network globally.
|
||||||
|
</p>
|
||||||
|
<p class="text-lg mb-10 max-w-3xl mx-auto opacity-80">
|
||||||
|
The established partnership, respect and mutual trust are core values of the company.
|
||||||
|
We ensure fast delivery and competitive prices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="animate-fade-in flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||||
|
<button class="gradient-bg text-white px-8 py-4 rounded-xl text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105">
|
||||||
|
Get Free Quotation
|
||||||
|
</button>
|
||||||
|
<button class="border-2 border-white text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-white hover:text-blue-600 transition-all">
|
||||||
|
Our Products
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating Stats -->
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||||
|
<div class="glassmorphism rounded-xl p-6 animate-float">
|
||||||
|
<div class="stats-counter mb-2">35+</div>
|
||||||
|
<div class="text-sm opacity-90">Years Experience</div>
|
||||||
|
</div>
|
||||||
|
<div class="glassmorphism rounded-xl p-6 animate-float" style="animation-delay: 0.5s;">
|
||||||
|
<div class="stats-counter mb-2">1000+</div>
|
||||||
|
<div class="text-sm opacity-90">Products</div>
|
||||||
|
</div>
|
||||||
|
<div class="glassmorphism rounded-xl p-6 animate-float" style="animation-delay: 1s;">
|
||||||
|
<div class="stats-counter mb-2">5+</div>
|
||||||
|
<div class="text-sm opacity-90">Countries</div>
|
||||||
|
</div>
|
||||||
|
<div class="glassmorphism rounded-xl p-6 animate-float" style="animation-delay: 1.5s;">
|
||||||
|
<div class="stats-counter mb-2">100%</div>
|
||||||
|
<div class="text-sm opacity-90">Trusted</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Brand Partners Section -->
|
||||||
|
<section class="section-padding bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Trusted by Leading Global Brands
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
We deal with premium FMCG brands and trusted partners worldwide
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Personal Care & Beauty Brands -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Personal Care & Beauty</h3>
|
||||||
|
<div class="brand-grid">
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-600 font-bold text-lg">Dove</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-700 font-bold text-lg">Head & Shoulders</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">Old Spice</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-gray-800 font-bold text-lg">L'ORÉAL</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-yellow-600 font-bold text-lg">PANTENE</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-800 font-bold text-lg">Gillette</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-700 font-bold text-lg">Colgate</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-teal-600 font-bold text-lg">Oral-B</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Food & Beverage Brands -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Food & Beverages</h3>
|
||||||
|
<div class="brand-grid">
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-800 font-bold text-lg">Nestlé</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">Kraft</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-600 font-bold text-lg">Unilever</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-700 font-bold text-lg">Kellogg's</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">Campbell's</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-green-600 font-bold text-lg">Knorr</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-orange-600 font-bold text-lg">Uncle Ben's</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-700 font-bold text-lg">Quaker</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Confectionery Brands -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Confectionery & Snacks</h3>
|
||||||
|
<div class="brand-grid">
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-700 font-bold text-lg">Mars</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-800 font-bold text-lg">SNICKERS</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">KitKat</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-purple-700 font-bold text-lg">Cadbury</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-yellow-600 font-bold text-lg">FERRERO ROCHER</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-brown-700 font-bold text-lg">HERSHEY'S</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">Skittles</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-800 font-bold text-lg">OREO</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Beverages -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Beverages</h3>
|
||||||
|
<div class="brand-grid">
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-600 font-bold text-lg">Coca-Cola</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-700 font-bold text-lg">Pepsi</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-green-600 font-bold text-lg">Sprite</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-yellow-600 font-bold text-lg">Lipton</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-orange-600 font-bold text-lg">Fanta</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-red-700 font-bold text-lg">Red Bull</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-green-700 font-bold text-lg">Starbucks</span>
|
||||||
|
</div>
|
||||||
|
<div class="brand-logo bg-white rounded-lg flex items-center justify-center p-4">
|
||||||
|
<span class="text-blue-600 font-bold text-lg">NESTEA</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="section-padding bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-6">
|
||||||
|
Connected to each corner of the Earth
|
||||||
|
</h2>
|
||||||
|
<p class="text-lg text-gray-600 mb-8">
|
||||||
|
With Victory International Trading's strong worldwide logistic network we ensure safe delivery
|
||||||
|
of your consignment within the committed time frame.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mb-8">
|
||||||
|
<h3 class="text-2xl font-jakarta font-bold text-gray-900 mb-6">
|
||||||
|
A Trusted Brand with Experience
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-6">
|
||||||
|
We are dealing with more than 1000 products since 35+ successful years into various global markets.
|
||||||
|
We are trusted solution provider by many industries like:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="flex items-center p-4 bg-blue-50 rounded-lg">
|
||||||
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-2xl">🛒</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Branded FMCG</h4>
|
||||||
|
<p class="text-sm text-gray-600">Consumer goods distribution</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center p-4 bg-green-50 rounded-lg">
|
||||||
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-2xl">📦</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Commodities</h4>
|
||||||
|
<p class="text-sm text-gray-600">Raw materials trading</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center p-4 bg-yellow-50 rounded-lg">
|
||||||
|
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-2xl">🚗</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Tyre & Cars</h4>
|
||||||
|
<p class="text-sm text-gray-600">Automotive solutions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center p-4 bg-purple-50 rounded-lg">
|
||||||
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<span class="text-2xl">🌐</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-gray-900">Global Logistics</h4>
|
||||||
|
<p class="text-sm text-gray-600">Worldwide distribution</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8">
|
||||||
|
<div class="grid grid-cols-2 gap-8 text-center">
|
||||||
|
<div class="bg-white rounded-xl p-6 card-hover">
|
||||||
|
<div class="text-4xl font-bold text-blue-600 mb-2">1000+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Dealt with Products</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl p-6 card-hover">
|
||||||
|
<div class="text-4xl font-bold text-blue-600 mb-2">5+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Global Reach Countries</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl p-6 card-hover col-span-2">
|
||||||
|
<div class="text-4xl font-bold text-blue-600 mb-2">35+</div>
|
||||||
|
<div class="text-gray-600 font-medium">Years of Excellence</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating elements -->
|
||||||
|
<div class="absolute -top-4 -right-4 w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center animate-pulse-slow">
|
||||||
|
<span class="text-2xl">✨</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -left-4 w-12 h-12 bg-green-400 rounded-full flex items-center justify-center animate-float">
|
||||||
|
<span class="text-xl">🌍</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Global Network -->
|
||||||
|
<section id="network" class="section-padding bg-blue-600 text-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold mb-4">
|
||||||
|
Global Reach: 5+ Countries
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl opacity-90">
|
||||||
|
Strategically located offices across key international markets
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="glassmorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-2xl">🇦🇪</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold mb-2">Dubai, UAE</h3>
|
||||||
|
<p class="opacity-90 mb-3">Headquarters & Regional Hub</p>
|
||||||
|
<p class="text-sm opacity-80">📞 +971-XX-XXXXXXX</p>
|
||||||
|
<p class="text-sm opacity-80">✉️ dubai@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glassmorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-2xl">🇸🇬</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold mb-2">Singapore</h3>
|
||||||
|
<p class="opacity-90 mb-3">ASEAN Operations Center</p>
|
||||||
|
<p class="text-sm opacity-80">📞 +65-XXXX-XXXX</p>
|
||||||
|
<p class="text-sm opacity-80">✉️ singapore@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glassmorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-2xl">🇮🇳</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold mb-2">Mumbai, India</h3>
|
||||||
|
<p class="opacity-90 mb-3">South Asia Operations</p>
|
||||||
|
<p class="text-sm opacity-80">📞 +91-XX-XXXXXXXX</p>
|
||||||
|
<p class="text-sm opacity-80">✉️ india@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glassmorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-2xl">🇲🇲</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold mb-2">Yangon, Myanmar</h3>
|
||||||
|
<p class="opacity-90 mb-3">Myanmar Market Access</p>
|
||||||
|
<p class="text-sm opacity-80">📞 +95-X-XXXXXXX</p>
|
||||||
|
<p class="text-sm opacity-80">✉️ myanmar@victory.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glassmorphism rounded-2xl p-6 text-center card-hover">
|
||||||
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span class="text-2xl">🇮🇩</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-jakarta font-bold mb-2">Jakarta, Indonesia</h3>
|
||||||
|
<p class="opacity-90 mb-3">Indonesia Operations</p>
|
||||||
|
<p class="text-sm opacity-80">📞 +62-XX-XXXXXXXX</p>
|
||||||
|
<p class="text-sm opacity-80">✉️ indonesia@victory.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- World Map Visualization -->
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<div class="relative bg-white bg-opacity-10 rounded-2xl p-8 backdrop-blur-sm">
|
||||||
|
<h3 class="text-2xl font-jakarta font-bold mb-6">Our Global Presence</h3>
|
||||||
|
<div class="flex flex-wrap justify-center items-center gap-4 text-sm">
|
||||||
|
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">🇦🇪 UAE</span>
|
||||||
|
<span class="text-yellow-300">→</span>
|
||||||
|
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">🇸🇬 Singapore</span>
|
||||||
|
<span class="text-yellow-300">→</span>
|
||||||
|
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">🇮🇳 India</span>
|
||||||
|
<span class="text-yellow-300">→</span>
|
||||||
|
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">🇲🇲 Myanmar</span>
|
||||||
|
<span class="text-yellow-300">→</span>
|
||||||
|
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">🇮🇩 Indonesia</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Products Section -->
|
||||||
|
<section id="products" class="section-padding bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Our Product Categories
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
Comprehensive range of products across multiple industries
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="bg-white rounded-2xl p-8 text-center card-hover shadow-lg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl text-white">🛒</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Branded FMCG</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Fast-moving consumer goods from leading global brands</p>
|
||||||
|
<ul class="text-sm text-gray-500 space-y-1">
|
||||||
|
<li>• Personal Care Products</li>
|
||||||
|
<li>• Household Items</li>
|
||||||
|
<li>• Beauty & Cosmetics</li>
|
||||||
|
<li>• Health & Wellness</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl p-8 text-center card-hover shadow-lg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl text-white">📦</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Commodities</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Raw materials and bulk commodities for industrial use</p>
|
||||||
|
<ul class="text-sm text-gray-500 space-y-1">
|
||||||
|
<li>• Agricultural Products</li>
|
||||||
|
<li>• Industrial Raw Materials</li>
|
||||||
|
<li>• Energy Resources</li>
|
||||||
|
<li>• Metals & Minerals</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl p-8 text-center card-hover shadow-lg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl text-white">🚗</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Tyre & Cars</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Automotive solutions including vehicles and components</p>
|
||||||
|
<ul class="text-sm text-gray-500 space-y-1">
|
||||||
|
<li>• Premium Vehicle Brands</li>
|
||||||
|
<li>• Tire Solutions</li>
|
||||||
|
<li>• Auto Parts & Accessories</li>
|
||||||
|
<li>• Maintenance Products</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl p-8 text-center card-hover shadow-lg">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<span class="text-3xl text-white">🥤</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-jakarta font-bold text-gray-900 mb-4">Food & Beverages</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Premium food products and beverage brands worldwide</p>
|
||||||
|
<ul class="text-sm text-gray-500 space-y-1">
|
||||||
|
<li>• Confectionery & Snacks</li>
|
||||||
|
<li>• Beverages & Drinks</li>
|
||||||
|
<li>• Packaged Foods</li>
|
||||||
|
<li>• Specialty Products</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Call to Action Section -->
|
||||||
|
<section class="section-padding gradient-bg text-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<div class="max-w-3xl mx-auto">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold mb-6">
|
||||||
|
Contact us to Grow your Business
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl mb-8 opacity-90">
|
||||||
|
You can reach to us for free quotation. Let's discuss how we can help expand your global reach.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
|
<button class="bg-white text-blue-600 px-8 py-4 rounded-xl text-lg font-semibold hover:bg-gray-100 transition-all transform hover:scale-105">
|
||||||
|
Get Free Quotation
|
||||||
|
</button>
|
||||||
|
<button class="border-2 border-white text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-white hover:text-blue-600 transition-all">
|
||||||
|
Schedule a Call
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="glassmorphism rounded-xl p-6">
|
||||||
|
<div class="text-2xl mb-3">📞</div>
|
||||||
|
<h4 class="font-semibold mb-2">Call Us</h4>
|
||||||
|
<p class="text-sm opacity-90">+971-XX-XXXXXXX</p>
|
||||||
|
</div>
|
||||||
|
<div class="glassmorphism rounded-xl p-6">
|
||||||
|
<div class="text-2xl mb-3">✉️</div>
|
||||||
|
<h4 class="font-semibold mb-2">Email Us</h4>
|
||||||
|
<p class="text-sm opacity-90">info@victorytrading.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="glassmorphism rounded-xl p-6">
|
||||||
|
<div class="text-2xl mb-3">📍</div>
|
||||||
|
<h4 class="font-semibold mb-2">Visit Us</h4>
|
||||||
|
<p class="text-sm opacity-90">Dubai, UAE</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Form Section -->
|
||||||
|
<section id="contact" class="section-padding bg-white">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-jakarta font-bold text-gray-900 mb-4">
|
||||||
|
Get Your Free Quote Today
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
Fill out the form below and we'll get back to you within 24 hours
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 rounded-2xl p-8 lg:p-12">
|
||||||
|
<form class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
|
||||||
|
<input type="text" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Company Name *</label>
|
||||||
|
<input type="text" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
|
||||||
|
<input type="email" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
|
||||||
|
<input type="tel"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Product Category *</label>
|
||||||
|
<select required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
<option value="">Select Category</option>
|
||||||
|
<option value="fmcg">Branded FMCG</option>
|
||||||
|
<option value="commodities">Commodities</option>
|
||||||
|
<option value="automotive">Tyre & Cars</option>
|
||||||
|
<option value="food">Food & Beverages</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Country/Region</label>
|
||||||
|
<input type="text" placeholder="Your location"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Message / Product Details *</label>
|
||||||
|
<textarea rows="5" required placeholder="Please describe your requirements, quantities, and any specific details..."
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full gradient-bg text-white py-4 rounded-lg text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105">
|
||||||
|
Send Free Quote Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gray-900 text-white py-16">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<span class="text-white font-bold text-xl">V</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-jakarta font-bold text-xl">Victory International Trading LLC</h3>
|
||||||
|
<p class="text-gray-400 text-sm">Quick and Reliable International Trade Solution</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 mb-6 max-w-md">
|
||||||
|
With 35+ years of experience and offices across 5 countries, we are your trusted partner
|
||||||
|
for international trade solutions in FMCG, commodities, and automotive sectors.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||||
|
<span class="text-sm">📱</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||||
|
<span class="text-sm">💼</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||||
|
<span class="text-sm">✉️</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-lg mb-6">Our Products</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#products" class="text-gray-300 hover:text-blue-400 transition-colors">Branded FMCG</a></li>
|
||||||
|
<li><a href="#products" class="text-gray-300 hover:text-blue-400 transition-colors">Commodities</a></li>
|
||||||
|
<li><a href="#products" class="text-gray-300 hover:text-blue-400 transition-colors">Tyre & Cars</a></li>
|
||||||
|
<li><a href="#products" class="text-gray-300 hover:text-blue-400 transition-colors">Food & Beverages</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="font-jakarta font-bold text-lg mb-6">Global Offices</h4>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-blue-400 transition-colors">🇦🇪 Dubai, UAE</a></li>
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-blue-400 transition-colors">🇸🇬 Singapore</a></li>
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-blue-400 transition-colors">🇮🇳 Mumbai, India</a></li>
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-blue-400 transition-colors">🇲🇲 Yangon, Myanmar</a></li>
|
||||||
|
<li><a href="#network" class="text-gray-300 hover:text-blue-400 transition-colors">🇮🇩 Jakarta, Indonesia</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-800 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 Victory International Trading LLC. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition-colors">Privacy Policy</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition-colors">Terms of Service</a>
|
||||||
|
<a href="#contact" class="text-gray-400 hover:text-blue-400 text-sm transition-colors">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Quote Modal -->
|
||||||
|
<div id="quoteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
|
||||||
|
<div class="bg-white rounded-2xl max-w-md w-full p-8 relative">
|
||||||
|
<button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-2xl">×</button>
|
||||||
|
<h3 class="text-2xl font-jakarta font-bold text-gray-900 mb-6">Quick Quote Request</h3>
|
||||||
|
<form class="space-y-4">
|
||||||
|
<input type="text" placeholder="Your Name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
<input type="email" placeholder="Email Address" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
<input type="text" placeholder="Company Name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
<select required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||||
|
<option value="">Product Category</option>
|
||||||
|
<option value="fmcg">Branded FMCG</option>
|
||||||
|
<option value="commodities">Commodities</option>
|
||||||
|
<option value="automotive">Tyre & Cars</option>
|
||||||
|
<option value="food">Food & Beverages</option>
|
||||||
|
</select>
|
||||||
|
<textarea rows="3" placeholder="Your Requirements" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"></textarea>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
|
||||||
|
Submit Quote Request
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quote modal functionality
|
||||||
|
const quoteModal = document.getElementById('quoteModal');
|
||||||
|
const closeModal = document.getElementById('closeModal');
|
||||||
|
|
||||||
|
// Open modal
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (e.target.textContent.includes('Get Quote') ||
|
||||||
|
e.target.textContent.includes('Get Free Quotation') ||
|
||||||
|
e.target.textContent.includes('Quote Request')) {
|
||||||
|
e.preventDefault();
|
||||||
|
quoteModal.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
closeModal?.addEventListener('click', () => {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal on backdrop click
|
||||||
|
quoteModal?.addEventListener('click', (e) => {
|
||||||
|
if (e.target === quoteModal) {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submission handling
|
||||||
|
document.querySelectorAll('form').forEach(form => {
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Thank you for your inquiry! We will contact you within 24 hours with your free quotation.');
|
||||||
|
if (quoteModal && !quoteModal.classList.contains('hidden')) {
|
||||||
|
quoteModal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate-slide-up');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements for animation
|
||||||
|
document.querySelectorAll('.card-hover, .brand-logo').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navbar background on scroll
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const navbar = document.querySelector('nav');
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
navbar.classList.add('shadow-lg');
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove('shadow-lg');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Counter animation for stats
|
||||||
|
function animateCounters() {
|
||||||
|
const counters = document.querySelectorAll('.stats-counter');
|
||||||
|
counters.forEach(counter => {
|
||||||
|
const target = parseInt(counter.textContent.replace(/\D/g, ''));
|
||||||
|
const suffix = counter.textContent.replace(/[0-9]/g, '');
|
||||||
|
let current = 0;
|
||||||
|
const increment = target / 50;
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
current += increment;
|
||||||
|
if (current >= target) {
|
||||||
|
counter.textContent = target + suffix;
|
||||||
|
clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
counter.textContent = Math.floor(current) + suffix;
|
||||||
|
}
|
||||||
|
}, 40);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger counter animation when hero section is visible
|
||||||
|
const heroObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
animateCounters();
|
||||||
|
heroObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const heroSection = document.querySelector('#home');
|
||||||
|
if (heroSection) {
|
||||||
|
heroObserver.observe(heroSection);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1329
test4.html
Normal file
1329
test4.html
Normal file
File diff suppressed because it is too large
Load Diff
1422
test5.html
Normal file
1422
test5.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user