v1

assets/css/custom.css

@@ -97,6 +97,24 @@ body {
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
+.gallery-card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.gallery-card .card-img-top {
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+}
+
 .form-control:focus {
     box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
     border-color: var(--primary-color);

index.php

@@ -40,6 +40,7 @@
                     <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                     <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#gallery">Mushroom Gallery</a></li>
                     <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                 </ul>
             </div>
@@ -101,7 +102,46 @@
             </div>
         </section>
 
-        <section id="contact" class="section">
+        <section id="gallery" class="section">
+            <div class="container">
+                <h2 class="section-title">Mushroom Gallery</h2>
+                <div class="row g-4">
+                    <?php
+                    require_once __DIR__ . '/includes/pexels.php';
+                    $query = 'mushroom';
+                    $url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&per_page=6';
+                    $data = pexels_get($url);
+                    if ($data && !empty($data['photos'])) {
+                        foreach ($data['photos'] as $photo) {
+                            $src = $photo['src']['large'] ?? $photo['src']['original'];
+                            $filename = basename(parse_url($src, PHP_URL_PATH));
+                            $local_path = __DIR__ . '/assets/images/pexels/' . $photo['id'] . '.jpg';
+                            if (!file_exists($local_path)) {
+                                download_to($src, $local_path);
+                            }
+                            $local_url = 'assets/images/pexels/' . $photo['id'] . '.jpg';
+                    ?>
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card gallery-card h-100">
+                            <img src="<?php echo htmlspecialchars($local_url); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($photo['alt'] ?? 'Mushroom image'); ?>">
+                            <div class="card-body">
+                                <p class="card-text small">
+                                    Photo by <a href="<?php echo htmlspecialchars($photo['photographer_url']); ?>" target="_blank"><?php echo htmlspecialchars($photo['photographer']); ?></a> on Pexels.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <?php
+                        }
+                    } else {
+                        echo '<p>Could not fetch images. Please check your Pexels API key.</p>';
+                    }
+                    ?>
+                </div>
+            </div>
+        </section>
+
+        <section id="contact" class="section bg-light">
             <div class="container">
                 <h2 class="section-title">Get In Touch</h2>
                 <div class="row justify-content-center">