Add Product page (#649)

* add product page with products

* link product page to products section on nav

_includes/nav.html

@@ -48,7 +48,7 @@
                   aria-haspopup="true" aria-expanded="false">Donate<span class="caret"></span></a>
                 <div class="dropdown-menu">
                   <a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
-                  <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/product">Products</a>
                 </div>
               </li>
             </ul>
@@ -111,7 +111,7 @@
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
-            <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/product">Products</a>
           </div>
         </li>
       </ul>

css/custom.css

@@ -286,3 +286,76 @@ ul {
   padding: revert;
   list-style: inherit;
 }
+
+/* Container for Product Cards */
+.product-container {
+  padding-left: 150px;
+  padding-right: 150px;
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 150px;
+}
+
+/* Individual Product Card */
+.product-card {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.product-card:hover {
+  transform: translateY(-10px);
+}
+
+/* product image Styling */
+.product-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  max-height: 250px;
+}
+
+/* Product Details */
+.product-details {
+  padding: 15px;
+}
+
+.product-name {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.product-description {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.product-price {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.explore-btn {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}

product.html

@@ -0,0 +1,47 @@
+---
+layout: default
+title: Products - Sugar Labs
+permalink: /product/index.html
+---
+
+<!-- Title section -->
+<div class="section-title1">
+  <span class="tag tag-regular">Our Products</span>
+</div>
+
+<!-- Products Section -->
+<section id="intro">
+  <div class="container my-2">
+    <div class="border-bottom pb-3 mb-3">
+      <div class="product-container">
+        <!-- Product Card 1 -->
+        <div class="product-card">
+          <img src="assets\products\sugarlabs mech.jpg" alt="Merch" class="product-image" />
+          <div class="product-details">
+            <h3 class="product-name">Sugarlabs Merch</h3>
+            <p class="product-description">
+                Sweet merch that supports our unique cause.
+            </p>
+            <div class="product-footer">
+                <a href="https://www.bonfire.com/store/sugar-labs-merch/" class="explore-btn">Explore More</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Product Card 2 -->
+        <div class="product-card">
+          <img src="assets\products\sugarlabs_USB_drive.jpg" alt="SOAS" class="product-image" />
+          <div class="product-details">
+            <h3 class="product-name">Sugarlabs USB Flash Drive</h3>
+            <p class="product-description">
+                Easily install Fedora Sugar On A Stick (SOAS) to your device directly from this USB flash drive.
+            </p>
+            <div class="product-footer">
+              <a href="https://www.usbmemorydirect.com/store/novelty/sugarlabs/" class="explore-btn">Explore More</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>