186 lines
9.8 KiB
PHP
186 lines
9.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Coral Hub - The Universal Coral Marketplace</title>
|
|
<meta name="description" content="Find and buy corals from sellers worldwide. Coral Hub is your one-stop shop for every coral imaginable.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://your-domain.com/">
|
|
<meta property="og:title" content="Coral Hub - The Universal Coral Marketplace">
|
|
<meta property="og:description" content="Find and buy corals from sellers worldwide. Coral Hub is your one-stop shop for every coral imaginable.">
|
|
<meta property="og:image" content="https://picsum.photos/seed/coralreef/1200/630">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://your-domain.com/">
|
|
<meta property="twitter:title" content="Coral Hub - The Universal Coral Marketplace">
|
|
<meta property="twitter:description" content="Find and buy corals from sellers worldwide. Coral Hub is your one-stop shop for every coral imaginable.">
|
|
<meta property="twitter:image" content="https://picsum.photos/seed/coralreef/1200/630">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Toast Container -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<!-- Header -->
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold text-primary" href="index.php"><i data-feather="box" class="me-2"></i>Coral Hub</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="index.php">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="search.php">Search Corals</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#about">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="py-5 text-center container-fluid" style="background: linear-gradient(135deg, rgba(0, 169, 157, 0.8) 0%, rgba(0, 194, 178, 0.7) 100%), url('https://picsum.photos/seed/coralreef/1600/900') no-repeat center center; background-size: cover;">
|
|
<div class="row py-lg-5">
|
|
<div class="col-lg-6 col-md-8 mx-auto">
|
|
<h1 class="display-3 fw-bold text-white">All Corals. One Ocean.</h1>
|
|
<p class="lead text-white-50 my-4">The ultimate marketplace for reef aquarists. Search thousands of corals from sellers worldwide.</p>
|
|
<p>
|
|
<a href="search.php" class="btn btn-primary my-2">Find Your Coral</a>
|
|
<a href="#contact" class="btn btn-secondary my-2">Become a Seller</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<h2 class="mb-4">What is Coral Hub?</h2>
|
|
<p class="lead">Tired of browsing dozens of websites to find that one specific coral? We are too.</p>
|
|
<p>Coral Hub is a revolutionary platform that aggregates coral listings from online sellers and local stores into one massive, searchable library. Our mission is to make finding and buying the corals you love simple, fast, and efficient.</p>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<img src="https://picsum.photos/seed/aquarium/500/500" class="img-fluid rounded-circle shadow" alt="A beautiful home reef aquarium.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="section-bg">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2>Featured Corals</h2>
|
|
<p class="lead">A glimpse of what you can find on Coral Hub.</p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<?php
|
|
$corals = [
|
|
['name' => 'Ultra Acropora', 'img_seed' => 'acropora', 'price' => '129.99', 'alt' => 'A beautiful Acropora coral fragment.'],
|
|
['name' => 'Rainbow Zoanthids', 'img_seed' => 'zoanthid', 'price' => '79.50', 'alt' => 'A colony of colorful Zoanthid polyps.'],
|
|
['name' => 'Flower Pot Goniopora', 'img_seed' => 'goniopora', 'price' => '99.00', 'alt' => 'A bright pink Goniopora coral.'],
|
|
];
|
|
foreach ($corals as $coral):
|
|
?>
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card coral-card h-100">
|
|
<img src="https://picsum.photos/seed/<?php echo $coral['img_seed']; ?>/600/600" class="card-img-top" alt="<?php echo htmlspecialchars($coral['alt']); ?>">
|
|
<div class="card-body">
|
|
<h5 class="card-title"><?php echo htmlspecialchars($coral['name']); ?></h5>
|
|
<p class="card-text d-flex justify-content-between align-items-center">
|
|
<span class="coral-price">$<?php echo $coral['price']; ?></span>
|
|
<a href="#" class="btn btn-sm btn-secondary">View Seller</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2>Get In Touch</h2>
|
|
<p class="lead">Have questions, feedback, or want to become a seller? Drop us a line!</p>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<form id="contactForm" class="needs-validation" novalidate>
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
<div class="invalid-feedback">Please enter your name.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email address</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
<div class="invalid-feedback">Please enter a valid email address.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
|
|
<div class="invalid-feedback">Please enter your message.</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date('Y'); ?> Coral Hub. All Rights Reserved.</p>
|
|
<p><a href="/privacy.php" class="text-white-50">Privacy Policy</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
<!-- Feather Icons -->
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
<script>
|
|
feather.replace()
|
|
</script>
|
|
</body>
|
|
</html>
|