<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoRide Pro - Coming Soon!</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--primary-blue: #1A3E6F; /* Darker blue from logo border */
--secondary-blue: #2E86AB; /* Mid blue from logo water */
--accent-orange: #F57C00; /* GoRide text orange */
--light-grey: #F8F8F8;
--text-color: #333;
}
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: var(--primary-blue);
color: var(--text-color);
text-align: center;
background-image: linear-gradient(135deg, var(--primary-blue) 0%, #0F2D51 100%); /* Subtle gradient */
}
.container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 40px 30px;
max-width: 600px;
width: 90%;
animation: fadeIn 1s ease-out;
transform: translateY(0); /* Ensure no initial translateY from animation */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.logo {
max-width: 180px;
margin-bottom: 25px;
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2.5em;
color: var(--primary-blue);
margin-bottom: 15px;
line-height: 1.2;
}
p {
font-size: 1.1em;
margin-bottom: 25px;
line-height: 1.6;
color: #555;
}
.social-links a {
display: inline-block;
margin: 0 10px;
color: var(--primary-blue);
font-size: 1.8em;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--accent-orange);
transform: scale(1.1);
}
.contact-email {
margin-top: 30px;
font-size: 0.95em;
color: #777;
}
.contact-email a {
color: var(--secondary-blue);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.contact-email a:hover {
color: var(--accent-orange);
text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
.social-links a {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.7em;
}
.logo {
max-width: 150px;
}
}
</style>
</head>
<body>
<div class="container">
<img src="YOUR_LOGO_URL_HERE" alt="GoRide Pro Logo" class="logo">
<h1>Get Ready to Ride!</h1>
<p>Our new adventure portal, **GoRide Pro**, is currently under construction and will launch soon. We're building the ultimate gateway to your next windsurfing, skiing, snowboarding, wakeboarding, and SUP adventures in Azerbaijan!</p>
<p>Stay tuned for exciting trips, courses, master classes, and unforgettable experiences across Baku and the Caucasus mountains.</p>
<p>Follow us for updates:</p>
<div class="social-links">
<a href="#" target="_blank" aria-label="Facebook">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon icon-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a>
<a href="#" target="_blank" aria-label="Instagram">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon icon-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
</a>
<a href="#" target="_blank" aria-label="Telegram">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon icon-telegram"><path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z"></path></svg>
</a>
</div>
<p class="contact-email">For urgent inquiries, please contact us at <a href="mailto:info@goride.az">info@goride.az</a></p>
</div>
</body>
</html>