237 lines
15 KiB
PHP
237 lines
15 KiB
PHP
<?php
|
|
include 'includes/header.php';
|
|
?>
|
|
|
|
<!-- Aligned Hero Carousel -->
|
|
<section class="py-4 bg-primary-bg">
|
|
<div class="container">
|
|
<div id="mainHeroCarousel" class="carousel slide carousel-fade rounded-5 overflow-hidden shadow-lg" data-bs-ride="carousel" data-bs-interval="5000">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="0" class="active"></button>
|
|
<button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="1"></button>
|
|
<button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="2"></button>
|
|
<button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="3"></button>
|
|
<button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="4"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<?php
|
|
$hero_slides = [
|
|
['title' => 'The World\'s Leading', 'subtitle' => 'Crypto Exchange', 'img' => 'hero_1.jpg'],
|
|
['title' => 'Secure & Trusted', 'subtitle' => 'Institutional Grade', 'img' => 'hero_2.jpg'],
|
|
['title' => 'Deep Liquidity', 'subtitle' => 'Global Access', 'img' => 'hero_3.jpg'],
|
|
['title' => 'Perpetual Contracts', 'subtitle' => '100x Leverage', 'img' => 'hero_4.jpg'],
|
|
['title' => 'Join the Elite', 'subtitle' => 'Trust BITCrypto', 'img' => 'hero_5.jpg']
|
|
];
|
|
foreach ($hero_slides as $index => $slide):
|
|
?>
|
|
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
|
<div class="carousel-image-container" style="height: 450px; background-image: linear-gradient(rgba(11, 14, 17, 0.6), rgba(11, 14, 17, 0.4)), url('assets/images/hero/<?php echo $slide['img']; ?>'); background-size: cover; background-position: center;">
|
|
<div class="container h-100">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-lg-8 text-white ps-5 slide-content">
|
|
<h1 class="display-4 fw-bold mb-3"><?php echo mt($slide['title']); ?><br><span class="text-primary"><?php echo mt($slide['subtitle']); ?></span></h1>
|
|
<p class="lead mb-4 text-light opacity-75 d-none d-md-block" 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 gap-3">
|
|
<a href="register.php" class="btn btn-primary btn-lg px-4 py-2 rounded-pill fw-bold shadow-lg"><?php echo mt('Get Started'); ?></a>
|
|
<a href="market.php" class="btn btn-outline-light btn-lg px-4 py-2 rounded-pill fw-bold"><?php echo mt('View Markets'); ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Market Ticker -->
|
|
<div class="market-ticker-bar bg-secondary-bg border-bottom border-white border-opacity-5 py-3">
|
|
<div class="container">
|
|
<div class="d-flex flex-wrap justify-content-center justify-content-lg-between gap-4" id="hero-market-ticker">
|
|
<!-- Loaded via JS -->
|
|
<div class="ticker-item skeleton" style="width: 150px; height: 40px;"></div>
|
|
<div class="ticker-item skeleton d-none d-md-block" style="width: 150px; height: 40px;"></div>
|
|
<div class="ticker-item skeleton d-none d-lg-block" style="width: 150px; height: 40px;"></div>
|
|
<div class="ticker-item skeleton d-none d-xl-block" style="width: 150px; height: 40px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Market Trends -->
|
|
<section class="py-5 bg-darker" id="market-section">
|
|
<div class="container py-2">
|
|
<div class="d-flex justify-content-between align-items-end mb-4">
|
|
<div>
|
|
<h2 class="fw-bold text-white mb-2"><?php echo mt('Market Trends'); ?></h2>
|
|
<p class="text-muted mb-0 small"><?php echo mt('Stay updated with real-time price changes'); ?></p>
|
|
</div>
|
|
<a href="market.php" class="text-primary text-decoration-none fw-bold small"><?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-20 shadow-lg">
|
|
<table class="table table-dark table-hover mb-0 align-middle border-0">
|
|
<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 - Aligned with Market Trends -->
|
|
<section class="py-5 bg-primary-bg">
|
|
<div class="container py-4">
|
|
<div class="text-center mb-5">
|
|
<h2 class="display-6 fw-bold text-white mb-3"><?php echo mt('Why Choose BITCrypto?'); ?></h2>
|
|
<p class="text-muted mx-auto" style="max-width: 700px;"><?php echo mt('Experience the most professional trading environment with institutional-grade security and liquidity.'); ?></p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
|
|
<div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-shield-halved fa-lg"></i>
|
|
</div>
|
|
<h5 class="text-white fw-bold mb-3"><?php echo mt('Safe & Secure'); ?></h5>
|
|
<p class="text-muted small mb-4"><?php echo mt('Industry-leading encryption and multi-signature cold storage for your digital assets.'); ?></p>
|
|
<ul class="list-unstyled text-muted x-small mt-auto">
|
|
<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="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
|
|
<div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 text-success" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-bolt-lightning fa-lg"></i>
|
|
</div>
|
|
<h5 class="text-white fw-bold mb-3"><?php echo mt('Instant Execution'); ?></h5>
|
|
<p class="text-muted small mb-4"><?php echo mt('Advanced matching engine processing over 100,000 transactions per second.'); ?></p>
|
|
<ul class="list-unstyled text-muted x-small mt-auto">
|
|
<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="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
|
|
<div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 text-info" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-headset fa-lg"></i>
|
|
</div>
|
|
<h5 class="text-white fw-bold mb-3"><?php echo mt('24/7 Global Support'); ?></h5>
|
|
<p class="text-muted small mb-4"><?php echo mt('Get help whenever you need it with our around-the-clock professional customer service.'); ?></p>
|
|
<ul class="list-unstyled text-muted x-small mt-auto">
|
|
<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>
|
|
|
|
<!-- Mobile App Section -->
|
|
<section class="py-5 bg-darker border-top border-white border-opacity-5">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
|
<h2 class="display-5 fw-bold text-white mb-4"><?php echo mt('Trade Anywhere, Anytime'); ?></h2>
|
|
<p class="text-muted lead 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">
|
|
<a href="#" class="btn btn-dark btn-lg px-4 py-3 rounded-4 border border-white border-opacity-10 d-flex align-items-center">
|
|
<i class="fab fa-apple fa-2x me-3"></i>
|
|
<div class="text-start">
|
|
<div class="x-small text-muted opacity-75"><?php echo mt('Download on the'); ?></div>
|
|
<div class="fw-bold">App Store</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="btn btn-dark btn-lg px-4 py-3 rounded-4 border border-white border-opacity-10 d-flex align-items-center">
|
|
<i class="fab fa-google-play fa-2x me-3"></i>
|
|
<div class="text-start">
|
|
<div class="x-small text-muted opacity-75"><?php echo mt('Get it on'); ?></div>
|
|
<div class="fw-bold">Google Play</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="bg-white p-2 rounded-3">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://bitcrypto.com/download" width="80" height="80">
|
|
</div>
|
|
<div class="text-muted small">
|
|
<div class="fw-bold text-white mb-1"><?php echo mt('Scan to download'); ?></div>
|
|
<?php echo mt('Compatible with iOS and Android devices.'); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<div class="position-relative d-inline-block">
|
|
<img src="assets/images/mobile-app-mockup.jpg" alt="Mobile App" class="img-fluid rounded-5 shadow-2xl border border-white border-opacity-10" style="max-height: 600px;">
|
|
<!-- Decorative Elements -->
|
|
<div class="position-absolute top-0 start-0 translate-middle p-3 bg-primary rounded-circle shadow-lg animate-bounce d-none d-md-block">
|
|
<i class="fas fa-bitcoin-sign text-white fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="py-5 bg-primary-bg">
|
|
<div class="container py-4">
|
|
<div class="text-center mb-5">
|
|
<h5 class="text-primary fw-bold text-uppercase mb-3" style="letter-spacing: 2px;"><?php echo mt('Global Trust'); ?></h5>
|
|
<h2 class="fw-bold text-white"><?php echo mt('Our Global Partners'); ?></h2>
|
|
</div>
|
|
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-5 align-items-center opacity-75">
|
|
<div class="col text-center">
|
|
<i class="fab fa-ethereum fa-3x text-white mb-3"></i>
|
|
<div class="small text-muted"><?php echo mt('Smart Contracts'); ?></div>
|
|
</div>
|
|
<div class="col text-center">
|
|
<i class="fab fa-bitcoin fa-3x text-white mb-3"></i>
|
|
<div class="small text-muted"><?php echo mt('Primary Network'); ?></div>
|
|
</div>
|
|
<div class="col text-center">
|
|
<i class="fas fa-shield-halved fa-3x text-white mb-3"></i>
|
|
<div class="small text-muted"><?php echo mt('Security Audit'); ?></div>
|
|
</div>
|
|
<div class="col text-center">
|
|
<i class="fas fa-building-columns fa-3x text-white mb-3"></i>
|
|
<div class="small text-muted"><?php echo mt('Financial Partner'); ?></div>
|
|
</div>
|
|
<div class="col text-center">
|
|
<i class="fas fa-globe-asia fa-3x text-white mb-3"></i>
|
|
<div class="small text-muted"><?php echo mt('Strategic Advisor'); ?></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php include 'includes/footer.php'; ?>
|