mirror of
https://github.com/thecyberlearn/victory-web.git
synced 2026-08-18 06:33:01 +00:00
1329 lines
48 KiB
HTML
1329 lines
48 KiB
HTML
<!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 - Quick and Reliable International Trade Solution</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg-dark: #0B0B0F;
|
||
--bg-secondary: #16161D;
|
||
--surface: #1E1E2E;
|
||
--accent-primary: #00D9FF;
|
||
--accent-secondary: #7C3AED;
|
||
--accent-tertiary: #F59E0B;
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #A1A1AA;
|
||
--text-muted: #71717A;
|
||
--border: rgba(255, 255, 255, 0.1);
|
||
--glow-cyan: rgba(0, 217, 255, 0.5);
|
||
--glow-purple: rgba(124, 58, 237, 0.5);
|
||
}
|
||
|
||
body {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
background: var(--bg-dark);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
cursor: none;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Custom Cursor */
|
||
.cursor {
|
||
position: fixed;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--accent-primary);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
mix-blend-mode: difference;
|
||
transition: transform 0.1s ease;
|
||
}
|
||
|
||
.cursor-follower {
|
||
position: fixed;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 2px solid var(--accent-primary);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
z-index: 9998;
|
||
transition: all 0.3s ease;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Noise Texture Overlay */
|
||
.noise-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.02;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Navigation */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
padding: 20px 0;
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
background: rgba(11, 11, 15, 0.8);
|
||
border-bottom: 1px solid var(--border);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 50px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-link {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--accent-primary);
|
||
text-shadow: 0 0 10px var(--glow-cyan);
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -8px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.cta-nav {
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
border: none;
|
||
padding: 12px 30px;
|
||
border-radius: 30px;
|
||
color: var(--bg-dark);
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
cursor: none;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cta-nav:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 25px var(--glow-cyan);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: radial-gradient(ellipse at center, rgba(0, 217, 255, 0.05) 0%, transparent 70%),
|
||
radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
|
||
}
|
||
|
||
.hero-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background:
|
||
conic-gradient(from 45deg at 20% 30%, var(--accent-primary) 0deg, transparent 120deg),
|
||
conic-gradient(from 225deg at 80% 70%, var(--accent-secondary) 0deg, transparent 120deg);
|
||
opacity: 0.03;
|
||
animation: heroRotate 20s linear infinite;
|
||
}
|
||
|
||
@keyframes heroRotate {
|
||
0% { transform: rotate(0deg) scale(1); }
|
||
50% { transform: rotate(180deg) scale(1.1); }
|
||
100% { transform: rotate(360deg) scale(1); }
|
||
}
|
||
|
||
.floating-elements {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.floating-shape {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
opacity: 0.1;
|
||
animation: float 8s ease-in-out infinite;
|
||
}
|
||
|
||
.shape-1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
|
||
.shape-2 { width: 60px; height: 60px; top: 70%; right: 15%; animation-delay: 2s; }
|
||
.shape-3 { width: 100px; height: 100px; bottom: 20%; left: 20%; animation-delay: 4s; }
|
||
.shape-4 { width: 40px; height: 40px; top: 40%; right: 30%; animation-delay: 6s; }
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
|
||
50% { transform: translateY(-40px) rotate(180deg); opacity: 0.3; }
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
z-index: 10;
|
||
max-width: 1200px;
|
||
padding: 0 40px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: clamp(3rem, 10vw, 8rem);
|
||
font-weight: 800;
|
||
line-height: 0.9;
|
||
margin-bottom: 30px;
|
||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-transform: uppercase;
|
||
letter-spacing: -2px;
|
||
animation: titleGlow 4s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes titleGlow {
|
||
0% { filter: drop-shadow(0 0 20px var(--glow-cyan)); }
|
||
100% { filter: drop-shadow(0 0 40px var(--glow-purple)); }
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 24px;
|
||
color: var(--accent-primary);
|
||
margin-bottom: 40px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 4px;
|
||
animation: fadeInUp 1s ease 0.5s both;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
max-width: 900px;
|
||
margin: 0 auto 50px;
|
||
line-height: 1.8;
|
||
animation: fadeInUp 1s ease 1s both;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translateY(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.hero-cta {
|
||
animation: fadeInUp 1s ease 1.5s both;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
border: none;
|
||
padding: 20px 50px;
|
||
border-radius: 50px;
|
||
color: var(--bg-dark);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
cursor: none;
|
||
margin: 0 15px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px var(--glow-cyan);
|
||
}
|
||
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.btn-primary:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
border: 2px solid var(--accent-primary);
|
||
padding: 18px 48px;
|
||
border-radius: 50px;
|
||
color: var(--accent-primary);
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
cursor: none;
|
||
margin: 0 15px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--accent-primary);
|
||
color: var(--bg-dark);
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px var(--glow-cyan);
|
||
}
|
||
|
||
/* About Section */
|
||
.about {
|
||
padding: 120px 0;
|
||
background: var(--bg-secondary);
|
||
position: relative;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 40px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||
font-weight: 800;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-transform: uppercase;
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
text-align: center;
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 80px;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.about-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 80px;
|
||
align-items: center;
|
||
margin-bottom: 100px;
|
||
}
|
||
|
||
.about-text h3 {
|
||
font-size: 42px;
|
||
font-weight: 700;
|
||
margin-bottom: 30px;
|
||
color: var(--text-primary);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.about-text p {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 30px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.about-visual {
|
||
position: relative;
|
||
}
|
||
|
||
.stats-container {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 24px;
|
||
padding: 50px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stats-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 10px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Industries Section */
|
||
.industries {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.industries-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.industry-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
text-align: center;
|
||
transition: all 0.4s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.industry-card:hover {
|
||
transform: translateY(-10px);
|
||
border-color: var(--accent-primary);
|
||
box-shadow: 0 25px 50px rgba(0, 217, 255, 0.15);
|
||
}
|
||
|
||
.industry-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.05), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.industry-card:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.industry-number {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--accent-primary);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.industry-name {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.industry-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Global Reach Section */
|
||
.global-reach {
|
||
padding: 120px 0;
|
||
background: var(--bg-dark);
|
||
position: relative;
|
||
}
|
||
|
||
.reach-visual {
|
||
text-align: center;
|
||
margin: 80px 0;
|
||
}
|
||
|
||
.reach-graphic {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 24px;
|
||
padding: 60px;
|
||
display: inline-block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.reach-graphic::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
|
||
}
|
||
|
||
.reach-stats {
|
||
display: flex;
|
||
gap: 60px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.reach-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.reach-stat .number {
|
||
font-size: 64px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 10px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.reach-stat .label {
|
||
color: var(--text-secondary);
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Contact Section */
|
||
.contact {
|
||
padding: 120px 0;
|
||
background: var(--bg-secondary);
|
||
position: relative;
|
||
}
|
||
|
||
.contact-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.contact h2 {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
margin-bottom: 30px;
|
||
background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.contact p {
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 50px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.contact-form {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 24px;
|
||
padding: 50px;
|
||
margin-top: 60px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contact-form::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-group.full-width {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.form-group label {
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
background: var(--bg-dark);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
color: var(--text-primary);
|
||
font-family: inherit;
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent-primary);
|
||
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
|
||
}
|
||
|
||
.form-submit {
|
||
width: 100%;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
color: var(--bg-dark);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
cursor: none;
|
||
transition: all 0.3s ease;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.form-submit:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 15px 30px var(--glow-cyan);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: var(--bg-dark);
|
||
border-top: 1px solid var(--border);
|
||
padding: 80px 0 40px;
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 60px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.footer-brand h3 {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 20px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.footer-brand p {
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.footer-section h4 {
|
||
color: var(--text-primary);
|
||
font-weight: 700;
|
||
margin-bottom: 25px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-section ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-section li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.footer-section a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.footer-section a:hover {
|
||
color: var(--accent-primary);
|
||
text-shadow: 0 0 10px var(--glow-cyan);
|
||
}
|
||
|
||
.footer-bottom {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-bottom p {
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Responsive Design */
|
||
@media (max-width: 768px) {
|
||
.nav-menu { display: none; }
|
||
.hero-title { font-size: 3rem; }
|
||
.about-grid { grid-template-columns: 1fr; gap: 50px; }
|
||
.form-grid { grid-template-columns: 1fr; }
|
||
.footer-content { grid-template-columns: 1fr; gap: 40px; }
|
||
.reach-stats { flex-direction: column; gap: 40px; }
|
||
.container { padding: 0 20px; }
|
||
}
|
||
|
||
/* Scroll Animations */
|
||
.scroll-reveal {
|
||
opacity: 0;
|
||
transform: translateY(50px);
|
||
transition: all 0.8s ease;
|
||
}
|
||
|
||
.scroll-reveal.revealed {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Cursor Interactions */
|
||
.cursor-hover:hover ~ .cursor {
|
||
transform: scale(2);
|
||
background: var(--accent-secondary);
|
||
}
|
||
|
||
.cursor-hover:hover ~ .cursor-follower {
|
||
transform: scale(1.5);
|
||
border-color: var(--accent-secondary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Custom Cursor -->
|
||
<div class="cursor"></div>
|
||
<div class="cursor-follower"></div>
|
||
|
||
<!-- Noise Overlay -->
|
||
<div class="noise-overlay"></div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<div class="logo">Victory</div>
|
||
<ul class="nav-menu">
|
||
<li><a href="#home" class="nav-link cursor-hover">Home</a></li>
|
||
<li><a href="#about" class="nav-link cursor-hover">About</a></li>
|
||
<li><a href="#services" class="nav-link cursor-hover">Services</a></li>
|
||
<li><a href="#contact" class="nav-link cursor-hover">Contact</a></li>
|
||
</ul>
|
||
<button class="cta-nav cursor-hover">Get Quote</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="floating-elements">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="floating-shape shape-3"></div>
|
||
<div class="floating-shape shape-4"></div>
|
||
</div>
|
||
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">Quick and Reliable<br>International Trade Solution</h1>
|
||
<p class="hero-subtitle">Victory International Trading</p>
|
||
<p class="hero-description">
|
||
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.
|
||
The established partnership, respect and mutual trust are core values of the company.
|
||
</p>
|
||
<div class="hero-cta">
|
||
<button class="btn-primary cursor-hover">Get Free Quote</button>
|
||
<button class="btn-secondary cursor-hover">Learn More</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<h2 class="section-title scroll-reveal">Connected to each corner of the Earth</h2>
|
||
<p class="section-subtitle scroll-reveal">
|
||
With Victory International Trading's strong worldwide logistic network we ensure safe delivery
|
||
of your consignment within the committed time frame.
|
||
</p>
|
||
|
||
<div class="about-grid scroll-reveal">
|
||
<div class="about-text">
|
||
<h3>Victory International Trading – A Trusted Brand with Experience</h3>
|
||
<p>
|
||
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>
|
||
<p>
|
||
The main goal of Victory International Trading is not only supplying diverse products,
|
||
but also offering comprehensive solutions in all aspects related to export and import.
|
||
We ensure fast delivery and competitive prices.
|
||
</p>
|
||
</div>
|
||
<div class="about-visual">
|
||
<div class="stats-container">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<div class="stat-number">1000+</div>
|
||
<div class="stat-label">Products Dealt</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">5+</div>
|
||
<div class="stat-label">Countries</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">35+</div>
|
||
<div class="stat-label">Years Experience</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">100%</div>
|
||
<div class="stat-label">Trusted Solutions</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Industries Section -->
|
||
<section id="services" class="industries">
|
||
<div class="container">
|
||
<h2 class="section-title scroll-reveal">Trusted Solution Provider</h2>
|
||
<p class="section-subtitle scroll-reveal">
|
||
We are trusted solution provider by many industries
|
||
</p>
|
||
|
||
<div class="industries-grid scroll-reveal">
|
||
<div class="industry-card cursor-hover">
|
||
<div class="industry-number">01</div>
|
||
<h3 class="industry-name">Branded FMCG</h3>
|
||
<p class="industry-desc">
|
||
Fast-moving consumer goods distribution across global markets with established supply chains
|
||
</p>
|
||
</div>
|
||
|
||
<div class="industry-card cursor-hover">
|
||
<div class="industry-number">02</div>
|
||
<h3 class="industry-name">Commodities</h3>
|
||
<p class="industry-desc">
|
||
Raw materials and commodity sourcing worldwide with competitive pricing and quality assurance
|
||
</p>
|
||
</div>
|
||
|
||
<div class="industry-card cursor-hover">
|
||
<div class="industry-number">03</div>
|
||
<h3 class="industry-name">Tyre</h3>
|
||
<p class="industry-desc">
|
||
Premium tire solutions and distribution services across multiple international markets
|
||
</p>
|
||
</div>
|
||
|
||
<div class="industry-card cursor-hover">
|
||
<div class="industry-number">04</div>
|
||
<h3 class="industry-name">Cars</h3>
|
||
<p class="industry-desc">
|
||
Automotive trading including vehicles and automotive parts distribution services
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Global Reach Section -->
|
||
<section class="global-reach">
|
||
<div class="container">
|
||
<h2 class="section-title scroll-reveal">Global Reach</h2>
|
||
<p class="section-subtitle scroll-reveal">
|
||
Strategic presence across key international markets
|
||
</p>
|
||
|
||
<div class="reach-visual scroll-reveal">
|
||
<div class="reach-graphic">
|
||
<div class="reach-stats">
|
||
<div class="reach-stat">
|
||
<div class="number">1000+</div>
|
||
<div class="label">Products Dealt</div>
|
||
</div>
|
||
<div class="reach-stat">
|
||
<div class="number">5+</div>
|
||
<div class="label">Countries</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-grid scroll-reveal">
|
||
<div class="about-text">
|
||
<h3>Global Network Coverage</h3>
|
||
<p>
|
||
Our strategic offices are located in key international trading hubs:
|
||
</p>
|
||
<ul style="list-style: none; padding: 0; margin: 30px 0;">
|
||
<li style="padding: 10px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border);">
|
||
🇦🇪 <strong style="color: var(--accent-primary);">Dubai</strong> - Middle East Hub
|
||
</li>
|
||
<li style="padding: 10px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border);">
|
||
🇸🇬 <strong style="color: var(--accent-primary);">Singapore</strong> - ASEAN Operations
|
||
</li>
|
||
<li style="padding: 10px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border);">
|
||
🇮🇳 <strong style="color: var(--accent-primary);">India</strong> - South Asia Gateway
|
||
</li>
|
||
<li style="padding: 10px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border);">
|
||
🇲🇲 <strong style="color: var(--accent-primary);">Myanmar</strong> - Emerging Markets
|
||
</li>
|
||
<li style="padding: 10px 0; color: var(--text-secondary);">
|
||
🇮🇩 <strong style="color: var(--accent-primary);">Indonesia</strong> - Southeast Asia
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="about-visual">
|
||
<div class="stats-container">
|
||
<h4 style="color: var(--accent-primary); margin-bottom: 30px; font-family: 'JetBrains Mono', monospace; text-align: center;">
|
||
Network Statistics
|
||
</h4>
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<div class="stat-number">35+</div>
|
||
<div class="stat-label">Years Experience</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">5</div>
|
||
<div class="stat-label">Office Locations</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">1000+</div>
|
||
<div class="stat-label">Global Products</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">100%</div>
|
||
<div class="stat-label">Commitment</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<div class="contact-content">
|
||
<h2 class="scroll-reveal">Contact us to Grow your Business</h2>
|
||
<p class="scroll-reveal">
|
||
You can reach to us for free quotation. Let's discuss how we can help expand your global reach
|
||
with our comprehensive trade solutions.
|
||
</p>
|
||
|
||
<div class="contact-form scroll-reveal">
|
||
<h3 style="color: var(--accent-primary); margin-bottom: 30px; font-family: 'JetBrains Mono', monospace; text-align: center;">
|
||
Request Free Quotation
|
||
</h3>
|
||
<form>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label>Your Name</label>
|
||
<input type="text" required placeholder="Enter your full name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Company Name</label>
|
||
<input type="text" required placeholder="Your company name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Email Address</label>
|
||
<input type="email" required placeholder="your@email.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Phone Number</label>
|
||
<input type="tel" placeholder="+1 (555) 000-0000">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Industry Interest</label>
|
||
<select required>
|
||
<option value="">Select your industry</option>
|
||
<option value="fmcg">Branded FMCG</option>
|
||
<option value="commodities">Commodities</option>
|
||
<option value="tyre">Tyre</option>
|
||
<option value="cars">Cars</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group full-width">
|
||
<label>Your Requirements</label>
|
||
<textarea rows="5" required placeholder="Please describe your requirements, quantities, and any specific details..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="form-submit cursor-hover">Send Free Quote Request</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<h3>Victory</h3>
|
||
<p>
|
||
Leading international trade solutions since 1988. Connecting global markets with trust,
|
||
reliability, and comprehensive services across FMCG, commodities, automotive, and logistics sectors.
|
||
</p>
|
||
<div style="font-family: 'JetBrains Mono', monospace; color: var(--accent-primary); font-size: 14px; margin-top: 20px;">
|
||
// STATUS: ONLINE<br>
|
||
// TRADING: ACTIVE<br>
|
||
// NETWORK: GLOBAL
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-section">
|
||
<h4>Services</h4>
|
||
<ul>
|
||
<li><a href="#services" class="cursor-hover">Branded FMCG</a></li>
|
||
<li><a href="#services" class="cursor-hover">Commodities</a></li>
|
||
<li><a href="#services" class="cursor-hover">Tyre Solutions</a></li>
|
||
<li><a href="#services" class="cursor-hover">Automotive</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-section">
|
||
<h4>Company</h4>
|
||
<ul>
|
||
<li><a href="#about" class="cursor-hover">About Us</a></li>
|
||
<li><a href="#services" class="cursor-hover">Global Network</a></li>
|
||
<li><a href="#contact" class="cursor-hover">Contact</a></li>
|
||
<li><a href="#" class="cursor-hover">Careers</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-section">
|
||
<h4>Global Offices</h4>
|
||
<ul>
|
||
<li><a href="#" class="cursor-hover">🇦🇪 Dubai, UAE</a></li>
|
||
<li><a href="#" class="cursor-hover">🇸🇬 Singapore</a></li>
|
||
<li><a href="#" class="cursor-hover">🇮🇳 India</a></li>
|
||
<li><a href="#" class="cursor-hover">🇲🇲 Myanmar</a></li>
|
||
<li><a href="#" class="cursor-hover">🇮🇩 Indonesia</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2025 Victory International Trading. All rights reserved. | Quick and Reliable International Trade Solution</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Custom Cursor Implementation
|
||
const cursor = document.querySelector('.cursor');
|
||
const cursorFollower = document.querySelector('.cursor-follower');
|
||
|
||
let mouseX = 0, mouseY = 0;
|
||
let followerX = 0, followerY = 0;
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
mouseX = e.clientX;
|
||
mouseY = e.clientY;
|
||
|
||
cursor.style.left = mouseX - 10 + 'px';
|
||
cursor.style.top = mouseY - 10 + 'px';
|
||
});
|
||
|
||
// Smooth follower animation
|
||
function animateFollower() {
|
||
const dx = mouseX - followerX;
|
||
const dy = mouseY - followerY;
|
||
|
||
followerX += dx * 0.1;
|
||
followerY += dy * 0.1;
|
||
|
||
cursorFollower.style.left = followerX - 20 + 'px';
|
||
cursorFollower.style.top = followerY - 20 + 'px';
|
||
|
||
requestAnimationFrame(animateFollower);
|
||
}
|
||
animateFollower();
|
||
|
||
// Cursor hover effects
|
||
const hoverElements = document.querySelectorAll('.cursor-hover');
|
||
|
||
hoverElements.forEach(element => {
|
||
element.addEventListener('mouseenter', () => {
|
||
cursor.style.transform = 'scale(2)';
|
||
cursor.style.background = 'var(--accent-secondary)';
|
||
cursorFollower.style.transform = 'scale(1.5)';
|
||
cursorFollower.style.borderColor = 'var(--accent-secondary)';
|
||
});
|
||
|
||
element.addEventListener('mouseleave', () => {
|
||
cursor.style.transform = 'scale(1)';
|
||
cursor.style.background = 'var(--accent-primary)';
|
||
cursorFollower.style.transform = 'scale(1)';
|
||
cursorFollower.style.borderColor = 'var(--accent-primary)';
|
||
});
|
||
});
|
||
|
||
// Smooth scrolling for navigation
|
||
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'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Scroll reveal 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('revealed');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe all scroll reveal elements
|
||
document.querySelectorAll('.scroll-reveal').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Navbar scroll effect
|
||
window.addEventListener('scroll', () => {
|
||
const navbar = document.querySelector('.navbar');
|
||
if (window.scrollY > 100) {
|
||
navbar.style.background = 'rgba(11, 11, 15, 0.95)';
|
||
navbar.style.backdropFilter = 'blur(20px) saturate(180%)';
|
||
} else {
|
||
navbar.style.background = 'rgba(11, 11, 15, 0.8)';
|
||
navbar.style.backdropFilter = 'blur(20px) saturate(180%)';
|
||
}
|
||
});
|
||
|
||
// Parallax effect for floating shapes
|
||
document.addEventListener('mousemove', (e) => {
|
||
const shapes = document.querySelectorAll('.floating-shape');
|
||
const mouseX = e.clientX / window.innerWidth;
|
||
const mouseY = e.clientY / window.innerHeight;
|
||
|
||
shapes.forEach((shape, index) => {
|
||
const speed = (index + 1) * 0.3;
|
||
const x = (mouseX - 0.5) * speed * 30;
|
||
const y = (mouseY - 0.5) * speed * 30;
|
||
|
||
shape.style.transform += ` translate(${x}px, ${y}px)`;
|
||
});
|
||
});
|
||
|
||
// Form submission with animation
|
||
document.querySelectorAll('form').forEach(form => {
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
|
||
const submitBtn = form.querySelector('.form-submit, .cta-nav, .btn-primary');
|
||
const originalText = submitBtn.textContent;
|
||
|
||
// Submission animation
|
||
submitBtn.textContent = 'SENDING...';
|
||
submitBtn.style.background = 'linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary))';
|
||
|
||
setTimeout(() => {
|
||
submitBtn.textContent = 'SUCCESS!';
|
||
submitBtn.style.background = 'linear-gradient(135deg, #10b981, #059669)';
|
||
|
||
setTimeout(() => {
|
||
submitBtn.textContent = originalText;
|
||
submitBtn.style.background = 'linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))';
|
||
|
||
// Show success message
|
||
alert('Thank you for your inquiry! We will contact you within 24 hours with your free quotation.');
|
||
form.reset();
|
||
}, 2000);
|
||
}, 1500);
|
||
});
|
||
});
|
||
|
||
// Counter animation for stats
|
||
function animateCounters() {
|
||
const counters = document.querySelectorAll('.stat-number, .number');
|
||
|
||
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 / 60;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= target) {
|
||
counter.textContent = target + suffix;
|
||
clearInterval(timer);
|
||
} else {
|
||
counter.textContent = Math.floor(current) + suffix;
|
||
}
|
||
}, 30);
|
||
});
|
||
}
|
||
|
||
// Trigger counter animation when stats section is visible
|
||
const statsObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
animateCounters();
|
||
statsObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
const statsSection = document.querySelector('.stats-container');
|
||
if (statsSection) {
|
||
statsObserver.observe(statsSection);
|
||
}
|
||
|
||
// Console easter egg for developers
|
||
console.log(`
|
||
╔══════════════════════════════════════╗
|
||
║ VICTORY INTERNATIONAL TRADING ║
|
||
║ ───────────────────────────── ║
|
||
║ System Status: ONLINE ║
|
||
║ Network: GLOBAL ║
|
||
║ Experience: 35+ Years ║
|
||
║ Products: 1000+ ║
|
||
║ Countries: 5+ ║
|
||
╚══════════════════════════════════════╝
|
||
|
||
Quick and Reliable International Trade Solution
|
||
Built with cutting-edge 2025 web technologies
|
||
`);
|
||
|
||
// Performance optimization - reduce animations on low-end devices
|
||
if (navigator.hardwareConcurrency <= 2) {
|
||
document.querySelectorAll('.floating-shape').forEach(shape => {
|
||
shape.style.animation = 'none';
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |