diff --git a/src/app/page.tsx b/src/app/page.tsx index c7fa1f3..b14be0e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -302,7 +302,7 @@ export default function LandingPage() { { title: "About MTL Labs", items: [ { - label: "MTL Labs: Experimentation and design from Montreal.", href: "#"}, + label: "MTL Labs: Experimentation and design from Montreal.", href: "/about"}, { label: "Instagram", href: "https://instagram.com/mtllabs"}, ], @@ -325,6 +325,8 @@ export default function LandingPage() { label: "Terms of Service", href: "#"}, { label: "hello@mtllabs.com", href: "mailto:hello@mtllabs.com"}, + { + label: "Contact Us", href: "/contact"} ], }, ]} diff --git a/src/app/shop/[productId]/page.tsx b/src/app/shop/[productId]/page.tsx new file mode 100644 index 0000000..97c2da4 --- /dev/null +++ b/src/app/shop/[productId]/page.tsx @@ -0,0 +1,131 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import SplitAbout from '@/components/sections/about/SplitAbout'; +import FooterBase from '@/components/sections/footer/FooterBase'; + +export default function ProductDetailPage({ params }: { params: { productId: string } }) { + const { productId } = params; + + // This would typically fetch data based on productId + // For this template, we'll use placeholder data + const productData = { + id: productId, + name: "Flux Pullover Hoodie", price: "$90.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-515sbofe.jpg", imageAlt: "Flux Pullover Hoodie", description: "Experience unparalleled comfort and style with the Flux Pullover Hoodie. Engineered for modern aesthetics and durability, this hoodie is perfect for any occasion. Designed with a minimalist approach, it integrates seamlessly into your everyday wardrobe.\n\nFabric: Crafted from a premium blend of organic cotton and recycled polyester, offering a soft touch and eco-conscious wear.\nPrint Type: Featuring a subtle, tonal embossed logo on the chest, ensuring a premium feel without overt branding.\nFit Information: A relaxed, oversized fit for maximum comfort, with dropped shoulders and a slightly elongated hem. Available in S, M, L, XL.", sizes: ["Small", "Medium", "Large", "X-Large"] + }; + + return ( + + + + +
+ ({ title: size, description: "Available" }))} + imageSrc={productData.imageSrc} + imageAlt={productData.imageAlt} + mediaAnimation="slide-up" + buttons={[ + { + text: "Add to Cart", onClick: () => console.log(`Added ${productData.name} (${productData.id}) to cart`) + } + ]} + /> +
+ + + + + ); +} diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx new file mode 100644 index 0000000..bcd42bb --- /dev/null +++ b/src/app/shop/page.tsx @@ -0,0 +1,185 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import ProductCardOne from '@/components/sections/product/ProductCardOne'; +import FooterBase from '@/components/sections/footer/FooterBase'; + +export default function ShopPage() { + return ( + + + + +
+ +
+ +
+ console.log("Navigate to /shop/hoodie-1") + }, + { + id: "hoodie-2", name: "Flux Pullover Hoodie", price: "$90", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-515sbofe.jpg", imageAlt: "Flux Pullover Hoodie", onProductClick: () => console.log("Navigate to /shop/hoodie-2") + } + ]} + buttons={[ + { + text: "View All Hoodies", href: "/shop/category/hoodies" + } + ]} + /> +
+ +
+ console.log("Navigate to /shop/tshirt-1") + }, + { + id: "tshirt-2", name: "Aether Tee", price: "$40", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-xocaj3zb.jpg", imageAlt: "Aether Tee", onProductClick: () => console.log("Navigate to /shop/tshirt-2") + } + ]} + buttons={[ + { + text: "View All T-Shirts", href: "/shop/category/t-shirts" + } + ]} + /> +
+ +
+ console.log("Navigate to /shop/accessory-1") + } + ]} + buttons={[ + { + text: "View All Accessories", href: "/shop/category/accessories" + } + ]} + /> +
+ + + + + ); +}