300 lines
17 KiB
PHP
300 lines
17 KiB
PHP
<?php
|
|
include 'includes/header.php';
|
|
?>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section text-white py-5 mt-4">
|
|
<div class="container py-lg-5">
|
|
<div class="row align-items-center g-5">
|
|
<div class="col-lg-7 text-center text-lg-start">
|
|
<h1 class="display-3 fw-bold mb-4 slide-up"><?php echo mt('The World\'s Leading'); ?><br><span class="text-primary"><?php echo mt('Crypto Exchange'); ?></span></h1>
|
|
<p class="lead mb-5 slide-up-delayed text-muted mx-auto mx-lg-0" style="max-width: 600px;"><?php echo mt('Trade Bitcoin, Ethereum, and hundreds of other cryptocurrencies with the lowest fees in the industry.'); ?></p>
|
|
<div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 slide-up-more">
|
|
<a href="register.php" class="btn btn-primary btn-lg px-5 py-3 rounded-pill fw-bold shadow-lg"><?php echo mt('Get Started'); ?></a>
|
|
<a href="market.php" class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill fw-bold"><?php echo mt('View Markets'); ?></a>
|
|
</div>
|
|
|
|
<!-- Market Ticker Aligned with Hero -->
|
|
<div class="mt-5 d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 slide-up-more" id="hero-market-ticker">
|
|
<!-- Loaded via JS -->
|
|
<div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
|
|
<div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
|
|
<div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 slide-up-delayed d-none d-lg-block">
|
|
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
|
<div class="carousel-inner rounded-5 shadow-lg overflow-hidden border border-white border-opacity-10">
|
|
<div class="carousel-item active">
|
|
<div class="p-5 bg-gradient-dark h-100 d-flex flex-column justify-content-center align-items-center text-center">
|
|
<img src="assets/images/mobile-app-mockup.jpg" class="img-fluid rounded-4 mb-4 floating-app" style="max-height: 300px;" alt="App">
|
|
<h4 class="fw-bold"><?php echo mt('Trade Anywhere'); ?></h4>
|
|
<p class="text-muted small"><?php echo mt('Download BITCrypto mobile app for iOS and Android'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="p-5 bg-gradient-blue h-100 d-flex flex-column justify-content-center align-items-center text-center">
|
|
<i class="fas fa-shield-halved fa-5x text-primary mb-4"></i>
|
|
<h4 class="fw-bold"><?php echo mt('Secure & Trusted'); ?></h4>
|
|
<p class="text-muted small"><?php echo mt('Your assets are protected by industry-leading security'); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Market Trends -->
|
|
<section class="py-5 bg-dark border-top border-white border-opacity-10" id="market-section">
|
|
<div class="container py-4">
|
|
<div class="d-flex justify-content-between align-items-end mb-5">
|
|
<div>
|
|
<h2 class="fw-bold text-white mb-2"><?php echo mt('Market Trends'); ?></h2>
|
|
<p class="text-muted mb-0"><?php echo mt('Stay updated with real-time price changes'); ?></p>
|
|
</div>
|
|
<a href="market.php" class="text-primary text-decoration-none fw-bold"><?php echo mt('View All'); ?> <i class="fas fa-chevron-right ms-1"></i></a>
|
|
</div>
|
|
|
|
<div class="table-responsive rounded-4 border border-white border-opacity-10 bg-black bg-opacity-30">
|
|
<table class="table table-dark table-hover mb-0 align-middle">
|
|
<thead>
|
|
<tr class="text-muted small">
|
|
<th class="ps-4 py-3 border-0"><?php echo mt('Name'); ?></th>
|
|
<th class="py-3 border-0"><?php echo mt('Price'); ?></th>
|
|
<th class="py-3 border-0"><?php echo mt('24h Change'); ?></th>
|
|
<th class="py-3 border-0 text-end pe-4"><?php echo mt('Action'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-trends">
|
|
<!-- Loaded via JS -->
|
|
<tr>
|
|
<td colspan="4" class="text-center py-5">
|
|
<div class="spinner-border spinner-border-sm text-primary" role="status"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Choose Us -->
|
|
<section class="py-5">
|
|
<div class="container py-4">
|
|
<div class="text-center mb-5">
|
|
<h2 class="fw-bold text-white"><?php echo mt('Why Choose BITCrypto?'); ?></h2>
|
|
<p class="text-muted"><?php echo mt('Experience the most professional trading environment'); ?></p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
|
|
<div class="position-absolute top-0 end-0 p-4 opacity-10">
|
|
<i class="fas fa-shield-alt fa-6x"></i>
|
|
</div>
|
|
<div class="icon-box mb-4 bg-primary bg-opacity-20 text-primary rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
|
|
<i class="fas fa-lock fa-2x"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?php echo mt('Safe & Secure'); ?></h4>
|
|
<p class="text-muted mb-0"><?php echo mt('Industry-leading encryption and multi-signature cold storage for your digital assets.'); ?></p>
|
|
<ul class="list-unstyled mt-4 text-muted small">
|
|
<li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('Multi-sig Cold Storage'); ?></li>
|
|
<li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('DDoS Protection'); ?></li>
|
|
<li><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('2FA Security'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
|
|
<div class="position-absolute top-0 end-0 p-4 opacity-10">
|
|
<i class="fas fa-bolt fa-6x"></i>
|
|
</div>
|
|
<div class="icon-box mb-4 bg-success bg-opacity-20 text-success rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
|
|
<i class="fas fa-gauge-high fa-2x"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?php echo mt('Instant Execution'); ?></h4>
|
|
<p class="text-muted mb-0"><?php echo mt('Advanced matching engine processing over 100,000 transactions per second.'); ?></p>
|
|
<ul class="list-unstyled mt-4 text-muted small">
|
|
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('Ultra-low Latency'); ?></li>
|
|
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('High Liquidity'); ?></li>
|
|
<li><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('Zero Slippage'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
|
|
<div class="position-absolute top-0 end-0 p-4 opacity-10">
|
|
<i class="fas fa-headset fa-6x"></i>
|
|
</div>
|
|
<div class="icon-box mb-4 bg-info bg-opacity-20 text-info rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
|
|
<i class="fas fa-comments fa-2x"></i>
|
|
</div>
|
|
<h4 class="text-white fw-bold mb-3"><?php echo mt('24/7 Global Support'); ?></h4>
|
|
<p class="text-muted mb-0"><?php echo mt('Get help whenever you need it with our around-the-clock professional customer service.'); ?></p>
|
|
<ul class="list-unstyled mt-4 text-muted small">
|
|
<li class="mb-2"><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Multi-language Support'); ?></li>
|
|
<li class="mb-2"><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Live Chat'); ?></li>
|
|
<li><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Fast Response'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="py-5 bg-black bg-opacity-20 border-top border-bottom border-white border-opacity-5">
|
|
<div class="container py-4 text-center">
|
|
<h2 class="fw-bold text-white mb-2"><?php echo mt('Our Global Partners'); ?></h2>
|
|
<p class="text-muted mb-5"><?php echo mt('Trusted by industry leaders worldwide'); ?></p>
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-4 align-items-center">
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-apple fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">Apple Pay</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-google-pay fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">Google Pay</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-aws fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">AWS</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Infrastructure'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-cc-visa fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">Visa</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Financial Partner'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-cc-mastercard fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">Mastercard</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Financial Partner'); ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="partner-card p-4 rounded-4 hover-lift">
|
|
<i class="fab fa-paypal fa-3x text-white mb-3"></i>
|
|
<h6 class="text-white mb-0">PayPal</h6>
|
|
<p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Section -->
|
|
<section class="py-5 overflow-hidden">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center g-5">
|
|
<div class="col-lg-6">
|
|
<h2 class="display-5 fw-bold text-white mb-4"><?php echo mt('Trade Anywhere, Anytime'); ?></h2>
|
|
<p class="lead text-muted mb-5"><?php echo mt('Experience the full power of our exchange on your mobile device. Trade spot and futures with ease.'); ?></p>
|
|
|
|
<div class="d-flex flex-wrap gap-3 mb-5">
|
|
<div class="download-btn-modern">
|
|
<i class="fab fa-apple fa-2x"></i>
|
|
<div>
|
|
<div class="small-text"><?php echo mt('Download on the'); ?></div>
|
|
<div class="bold-text">App Store</div>
|
|
</div>
|
|
</div>
|
|
<div class="download-btn-modern">
|
|
<i class="fab fa-google-play fa-2x"></i>
|
|
<div>
|
|
<div class="small-text"><?php echo mt('Get it on'); ?></div>
|
|
<div class="bold-text">Google Play</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-4 p-4 bg-white bg-opacity-5 rounded-4 border border-white border-opacity-10 shadow-sm" style="backdrop-filter: blur(10px);">
|
|
<div class="bg-white p-2 rounded-3 shadow">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://bitcrypto.com/download&color=0046ff" alt="Download QR" width="100">
|
|
</div>
|
|
<div>
|
|
<h6 class="text-white fw-bold mb-1"><?php echo mt('Scan to download'); ?></h6>
|
|
<p class="text-muted small mb-0"><?php echo mt('Compatible with iOS and Android devices.'); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center position-relative">
|
|
<div class="position-absolute top-50 start-50 translate-middle z-n1" style="width: 500px; height: 500px; background: radial-gradient(circle, rgba(0,70,255,0.2) 0%, rgba(0,255,150,0.1) 30%, transparent 70%); filter: blur(40px);"></div>
|
|
<img src="assets/images/mobile-app-mockup.jpg" alt="Mobile App" class="img-fluid floating-app rounded-5 shadow-lg border border-white border-opacity-10" style="max-width: 350px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.bg-gradient-dark { background: linear-gradient(135deg, #0b0e11 0%, #181a20 100%); }
|
|
.bg-gradient-blue { background: linear-gradient(135deg, #001a4d 0%, #0046ff 100%); }
|
|
|
|
.slide-up { animation: slideUp 0.8s ease-out; }
|
|
.slide-up-delayed { animation: slideUp 0.8s ease-out 0.2s both; }
|
|
.slide-up-more { animation: slideUp 0.8s ease-out 0.4s both; }
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.floating-app {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
.download-btn-modern {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
padding: 10px 20px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.download-btn-modern:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
.download-btn-modern .small-text { font-size: 10px; opacity: 0.7; }
|
|
.download-btn-modern .bold-text { font-size: 16px; font-weight: bold; }
|
|
|
|
.hover-lift { transition: all 0.3s ease; }
|
|
.hover-lift:hover { transform: translateY(-10px); background: rgba(255,255,255,0.08); }
|
|
|
|
.partner-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
</style>
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
<?php include 'includes/footer.php'; ?>
|