productsPageDone (#37)

* productsPageDone

Author: FirePheonix

public/assets/Products/sugarTshirtBlue.jpeg

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { products, ProductType } from '@/constants/ProductsData';
+
+const Product = () => {
+  return (
+    <section className="py-12 px-4">
+      <div className="max-w-5xl mx-auto grid grid-cols-1 gap-12">
+        {products.map((product, index) => (
+          <ProductCard key={index} product={product} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({ product }: { product: ProductType }) => {
+  const imageUrls = Object.values(product.colors); // Get all image URLs
+  const hasMultipleImages = imageUrls.length > 1; // Check if there are multiple images
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  const nextImage = () => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imageUrls.length);
+  };
+
+  const prevImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === 0 ? imageUrls.length - 1 : prevIndex - 1,
+    );
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 border-b pb-10">
+      {/* Product Image / Carousel */}
+      <div className="relative">
+        <img
+          src={imageUrls[currentImageIndex]}
+          alt={product.name}
+          className="w-full rounded-lg shadow-md"
+        />
+
+        {/* Image Carousel Controls (only if multiple images exist) */}
+        {hasMultipleImages && (
+          <>
+            <button
+              onClick={prevImage}
+              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white px-3 py-2 rounded-full"
+            >
+              ◀
+            </button>
+            <button
+              onClick={nextImage}
+              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white px-3 py-2 rounded-full"
+            >
+              ▶
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Product Details */}
+      <div>
+        <h3 className="text-3xl font-semibold">{product.name}</h3>
+        <p className="text-gray-600 mt-2">{product.description}</p>
+
+        {/* Buy Now Button (Links to an external page) */}
+        <div className="mt-6">
+          <a
+            href={product.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-blue-600 text-white px-6 py-3 rounded-lg text-lg shadow-md hover:bg-blue-700 transition"
+          >
+            Buy Now
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Product;

public/assets/Products/sugarTshirtGreen.jpeg

@@ -0,0 +1,30 @@
+export type ProductType = {
+  name: string;
+  description: string;
+  colors: Record<string, string>; // Image URLs mapped by color names
+  link: string; // External purchase link
+};
+
+export const products: ProductType[] = [
+  {
+    name: 'Classic Cotton T-Shirt',
+    description:
+      'Support Sugar Labs®—a US-based 501(c)(3) nonprofit empowering youth through technology education—with this premium cotton t-shirt, designed for comfort and durability.',
+    colors: {
+      blue: 'assets/Products/sugarTshirtBlue.jpeg',
+      white: 'assets/Products/sugarTshirtWhite.jpeg',
+      green: 'assets/Products/sugarTshirtGreen.jpeg',
+      purple: 'assets/Products/sugarTshirtPurple.jpeg',
+    },
+    link: 'https://www.bonfire.com/store/sugar-labs-merch/', // Purchase link
+  },
+  {
+    name: 'SugarLabs USB',
+    description:
+      'Easily install Fedora Sugar On A Stick (SOAS) to your device directly from this USB flash drive. The Fedora SOAS on this USB drive is for Intel and AMD x86_64 systems.',
+    colors: {
+      white: 'assets/Products/sugarlabsUsb.jpeg',
+    },
+    link: 'https://www.usbmemorydirect.com/store/novelty/sugarlabs/', // Purchase link
+  },
+];

public/assets/Products/sugarTshirtPurple.jpeg

@@ -1,59 +1,23 @@
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
+import Product from '@/components/Product';
 
-const Products = () => {
+const ProductsPage = () => {
   return (
     <div>
       <Header />
-      <main className="container mx-auto p-4">
-        <h1 className="text-4xl font-bold text-center my-8">Products</h1>
-        <p className="text-lg text-gray-700 text-center">
-          Explore our range of products designed to enhance learning and
-          education.
-        </p>
-        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div className="bg-blue-100 p-6 rounded-lg shadow-md">
-            <h2 className="text-2xl font-semibold">Sugar Desktop</h2>
-            <p className="mt-2 text-gray-700">
-              A free and open-source desktop environment for learning.
-            </p>
-            <a
-              href="#"
-              className="mt-4 inline-block text-blue-600 hover:underline"
-            >
-              Learn More →
-            </a>
-          </div>
-          <div className="bg-green-100 p-6 rounded-lg shadow-md">
-            <h2 className="text-2xl font-semibold">Sugar Learning Platform</h2>
-            <p className="mt-2 text-gray-700">
-              A web-based platform for learning and collaboration.
-            </p>
-            <a
-              href="#"
-              className="mt-4 inline-block text-green-600 hover:underline"
-            >
-              Learn More →
-            </a>
-          </div>
-          <div className="bg-yellow-100 p-6 rounded-lg shadow-md">
-            <h2 className="text-2xl font-semibold">Sugar Activities</h2>
-            <p className="mt-2 text-gray-700">
-              A collection of educational activities for Sugar Desktop and the
-              Sugar Learning Platform.
-            </p>
-            <a
-              href="#"
-              className="mt-4 inline-block text-yellow-600 hover:underline"
-            >
-              Learn More →
-            </a>
-          </div>
-        </div>
+      <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
+        {/* Responsive Heading */}
+        <h2 className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-extralight text-center mb-6 font-[Oswald] tracking-wide py-8">
+          <span className="text-black">OUR</span>{' '}
+          <span className="text-orange-500">PRODUCTS</span>
+        </h2>
+
+        <Product />
       </main>
       <Footer />
     </div>
   );
 };
 
-export default Products;
+export default ProductsPage;