Merge version_3 into main #7
@@ -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"}
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
131
src/app/shop/[productId]/page.tsx
Normal file
131
src/app/shop/[productId]/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "About", id: "/about"
|
||||
},
|
||||
{
|
||||
name: "Services", id: "/services"
|
||||
},
|
||||
{
|
||||
name: "Portfolio", id: "/portfolio"
|
||||
},
|
||||
{
|
||||
name: "Shop", id: "/shop"
|
||||
},
|
||||
{
|
||||
name: "Insights", id: "/insights"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/contact"
|
||||
}
|
||||
]}
|
||||
brandName="MTL Labs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-detail" data-section="product-detail">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imagePosition="right"
|
||||
title={productData.name}
|
||||
description={`${productData.price}\n\n${productData.description}`}
|
||||
bulletPoints={productData.sizes.map(size => ({ 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`)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "About MTL Labs", items: [
|
||||
{
|
||||
label: "MTL Labs: Experimentation and design from Montreal.", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com/mtllabs"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/portfolio"
|
||||
},
|
||||
{
|
||||
label: "Shop", href: "/shop"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal & Contact", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "hello@mtllabs.com", href: "mailto:hello@mtllabs.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="MTL Labs"
|
||||
copyrightText="© 2024 MTL Labs | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
185
src/app/shop/page.tsx
Normal file
185
src/app/shop/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "About", id: "/about"
|
||||
},
|
||||
{
|
||||
name: "Services", id: "/services"
|
||||
},
|
||||
{
|
||||
name: "Portfolio", id: "/portfolio"
|
||||
},
|
||||
{
|
||||
name: "Shop", id: "/shop"
|
||||
},
|
||||
{
|
||||
name: "Insights", id: "/insights"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/contact"
|
||||
}
|
||||
]}
|
||||
brandName="MTL Labs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-hero" data-section="shop-hero">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Explore Our Collection"
|
||||
description="Discover a range of high-quality apparel and accessories, crafted with precision and engineered aesthetics."
|
||||
products={[]}
|
||||
buttons={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hoodies" data-section="hoodies">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Hoodies"
|
||||
description="Comfort meets cutting-edge design."
|
||||
products={[
|
||||
{
|
||||
id: "hoodie-1", name: "Quantum Knit Hoodie", price: "$85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-ww1p5ppt.jpg", imageAlt: "Quantum Knit Hoodie", onProductClick: () => 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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="t-shirts" data-section="t-shirts">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
title="T-Shirts"
|
||||
description="Minimalist style, maximum impact."
|
||||
products={[
|
||||
{
|
||||
id: "tshirt-1", name: "Kinetic Tee", price: "$35", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-fqdnuwdv.jpg", imageAlt: "Kinetic Tee", onProductClick: () => 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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="accessories" data-section="accessories">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Accessories"
|
||||
description="The final touch for any look."
|
||||
products={[
|
||||
{
|
||||
id: "accessory-1", name: "Dataflow Cap", price: "$25", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/uploaded-1774392275829-uj125n8w.jpg", imageAlt: "Dataflow Cap", onProductClick: () => console.log("Navigate to /shop/accessory-1")
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Accessories", href: "/shop/category/accessories"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "About MTL Labs", items: [
|
||||
{
|
||||
label: "MTL Labs: Experimentation and design from Montreal.", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com/mtllabs"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/portfolio"
|
||||
},
|
||||
{
|
||||
label: "Shop", href: "/shop"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal & Contact", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "hello@mtllabs.com", href: "mailto:hello@mtllabs.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="MTL Labs"
|
||||
copyrightText="© 2024 MTL Labs | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user