bender/1cbac7c6-0d57-4c55-9f79-b8b9d72eb300
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #4

Merged
bender merged 1 commits from version_2 into main 2026-03-12 00:02:33 +00:00
Conversation 0 Commits 1 Files Changed 1 +109 -67
1 changed files with 109 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/app/materials/page.tsx
View File

@@ -5,9 +5,41 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Leaf } from "lucide-react";
import { Leaf, ChevronLeft, ChevronRight } from "lucide-react";
import { useState } from "react";
export default function MaterialsPage() {
const [currentMaterialIndex, setCurrentMaterialIndex] = useState(0);
const materials = [
{
id: "01", title: "Organic Cotton", description: "Grown without synthetic pesticides or fertilizers. Soft, breathable, and perfect for sensitive skin. Requires significant water but supports ethical farming practices.", imageSrc: "http://img.b2bpic.net/free-photo/cotton-plants-still-life_23-2151158812.jpg?_wi=3", imageAlt: "Organic cotton natural fiber"},
{
id: "02", title: "Merino Wool", description: "Naturally temperature-regulating and antimicrobial. Ideal for active wear and layering. Merino sheep are raised with strong animal welfare standards in sustainable farms.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sheep-wool-texture_53876-148178.jpg?_wi=3", imageAlt: "Merino wool sustainable fabric"},
{
id: "03", title: "Hemp", description: "Highly durable with UV protection. Requires minimal water and no pesticides. Strong and long-lasting, hemp is one of the most sustainable fiber crops available.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cloth_23-2148817494.jpg?_wi=2", imageAlt: "Hemp natural sustainable fabric"},
{
id: "04", title: "Linen", description: "Lightweight, breathable, and naturally cooling. Made from flax plants, linen requires minimal pesticides. Perfect for warm weather and summer clothing.", imageSrc: "http://img.b2bpic.net/free-photo/burlap-texture_23-2151943859.jpg?_wi=3", imageAlt: "Linen breathable natural material"},
{
id: "05", title: "Silk", description: "Luxurious, hypoallergenic, and gentle on skin. Produced sustainably through ethical sericulture. Premium natural fiber ideal for special occasions and delicate garments.", imageSrc: "http://img.b2bpic.net/free-photo/pink-fabric-material-texture-with-copy-space_23-2148402305.jpg?_wi=3", imageAlt: "Silk luxury natural fiber"},
{
id: "06", title: "Bamboo", description: "Fast-growing and renewable without pesticides. Silky-smooth texture similar to silk. One of the most sustainable materials, bamboo regenerates quickly after harvesting.", imageSrc: "http://img.b2bpic.net/free-photo/camouflage-military-background-close-up_23-2149341333.jpg?_wi=4", imageAlt: "Bamboo eco-friendly sustainable fabric"},
];
const handlePrevious = () => {
setCurrentMaterialIndex((prev) =>
prev === 0 ? materials.length - 1 : prev - 1
);
};
const handleNext = () => {
setCurrentMaterialIndex((prev) =>
prev === materials.length - 1 ? 0 : prev + 1
);
};
const currentMaterial = materials[currentMaterialIndex];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -39,61 +71,77 @@ export default function MaterialsPage() {
{/* Comprehensive Natural Materials Guide */}
<div id="all-materials" data-section="all-materials">
<FeatureCardThree
title="Complete Natural Fiber Guide"
description="Learn about all the sustainable natural fibers we feature, their benefits, applications, and environmental impact. Choose the materials that align with your values."
tag="Material Education"
tagIcon={Leaf}
tagAnimation="slide-up"
features={[
{
id: "01",
title: "Organic Cotton",
description: "Grown without synthetic pesticides or fertilizers. Soft, breathable, and perfect for sensitive skin. Requires significant water but supports ethical farming practices.",
imageSrc: "http://img.b2bpic.net/free-photo/cotton-plants-still-life_23-2151158812.jpg?_wi=3",
imageAlt: "Organic cotton natural fiber",
},
{
id: "02",
title: "Merino Wool",
description: "Naturally temperature-regulating and antimicrobial. Ideal for active wear and layering. Merino sheep are raised with strong animal welfare standards in sustainable farms.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-sheep-wool-texture_53876-148178.jpg?_wi=3",
imageAlt: "Merino wool sustainable fabric",
},
{
id: "03",
title: "Hemp",
description: "Highly durable with UV protection. Requires minimal water and no pesticides. Strong and long-lasting, hemp is one of the most sustainable fiber crops available.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cloth_23-2148817494.jpg?_wi=2",
imageAlt: "Hemp natural sustainable fabric",
},
{
id: "04",
title: "Linen",
description: "Lightweight, breathable, and naturally cooling. Made from flax plants, linen requires minimal pesticides. Perfect for warm weather and summer clothing.",
imageSrc: "http://img.b2bpic.net/free-photo/burlap-texture_23-2151943859.jpg?_wi=3",
imageAlt: "Linen breathable natural material",
},
{
id: "05",
title: "Silk",
description: "Luxurious, hypoallergenic, and gentle on skin. Produced sustainably through ethical sericulture. Premium natural fiber ideal for special occasions and delicate garments.",
imageSrc: "http://img.b2bpic.net/free-photo/pink-fabric-material-texture-with-copy-space_23-2148402305.jpg?_wi=3",
imageAlt: "Silk luxury natural fiber",
},
{
id: "06",
title: "Bamboo",
description: "Fast-growing and renewable without pesticides. Silky-smooth texture similar to silk. One of the most sustainable materials, bamboo regenerates quickly after harvesting.",
imageSrc: "http://img.b2bpic.net/free-photo/camouflage-military-background-close-up_23-2149341333.jpg?_wi=4",
imageAlt: "Bamboo eco-friendly sustainable fabric",
},
]}
gridVariant="bento-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
<div className="relative w-full py-16 md:py-24 lg:py-32">
<div className="flex flex-col items-center justify-center mb-12">
<div className="text-center mb-8">
<div className="inline-block mb-4 px-4 py-2 rounded-full bg-primary-button/10 border border-accent/20">
<span className="text-sm font-semibold text-primary-button flex items-center gap-2">
<Leaf size={16} />
Material Education
</span>
</div>
<h2 className="text-4xl md:text-5xl font-bold mb-4">Complete Natural Fiber Guide</h2>
<p className="text-lg text-foreground/70 max-w-2xl mx-auto">
Learn about all the sustainable natural fibers we feature, their benefits, applications, and environmental impact. Choose the materials that align with your values.
</p>
</div>
</div>
{/* Arrow Navigation */}
<div className="flex items-center justify-center gap-8 md:gap-12">
{/* Left Arrow */}
<button
onClick={handlePrevious}
className="p-3 rounded-full border-2 border-primary-cta bg-transparent hover:bg-primary-cta hover:text-background transition-all duration-300 flex items-center justify-center"
aria-label="Previous material"
>
<ChevronLeft size={24} />
</button>
{/* Material Card Display */}
<div className="w-full max-w-2xl">
<div className="bg-card rounded-lg overflow-hidden shadow-lg">
<div className="aspect-video overflow-hidden bg-background">
<img
src={currentMaterial.imageSrc}
alt={currentMaterial.imageAlt}
className="w-full h-full object-cover"
/>
</div>
<div className="p-8">
<div className="text-sm font-semibold text-accent mb-2">Material {currentMaterial.id}</div>
<h3 className="text-3xl font-bold mb-4">{currentMaterial.title}</h3>
<p className="text-foreground/80 leading-relaxed">{currentMaterial.description}</p>
</div>
</div>
{/* Indicator Dots */}
<div className="flex justify-center gap-2 mt-6">
{materials.map((_, index) => (
<button
key={index}
onClick={() => setCurrentMaterialIndex(index)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
index === currentMaterialIndex
? "bg-primary-cta w-6"
: "bg-accent/40 hover:bg-accent/70"
}`}
aria-label={`Go to material ${index + 1}`}
/>
))}
</div>
</div>
{/* Right Arrow */}
<button
onClick={handleNext}
className="p-3 rounded-full border-2 border-primary-cta bg-transparent hover:bg-primary-cta hover:text-background transition-all duration-300 flex items-center justify-center"
aria-label="Next material"
>
<ChevronRight size={24} />
</button>
</div>
</div>
</div>
{/* Detailed Information About Natural Fibers */}
@@ -101,10 +149,7 @@ export default function MaterialsPage() {
<TextSplitAbout
title="Why Choose Natural Fibers?"
description={[
"Natural fibers offer superior breathability, comfort, and durability compared to synthetic alternatives. They adapt to your body temperature and wick moisture naturally, making them ideal for any season.",
"From an environmental perspective, natural fibers are biodegradable and require fewer chemicals in their production. They support sustainable agriculture and ethical farming practices.",
"Your health matters too. Natural fibers reduce skin irritation, minimize microplastic shedding, and create a more comfortable wearing experience throughout the day. Investing in natural fiber clothing is an investment in your well-being.",
]}
"Natural fibers offer superior breathability, comfort, and durability compared to synthetic alternatives. They adapt to your body temperature and wick moisture naturally, making them ideal for any season.", "From an environmental perspective, natural fibers are biodegradable and require fewer chemicals in their production. They support sustainable agriculture and ethical farming practices.", "Your health matters too. Natural fibers reduce skin irritation, minimize microplastic shedding, and create a more comfortable wearing experience throughout the day. Investing in natural fiber clothing is an investment in your well-being."]}
buttons={[
{ text: "Shop Natural Fibers", href: "/" },
{ text: "Read Our Blog", href: "/blog" },
@@ -120,8 +165,7 @@ export default function MaterialsPage() {
<FooterBaseReveal
columns={[
{
title: "Explore",
items: [
title: "Explore", items: [
{ label: "Home", href: "/" },
{ label: "Men's Clothing", href: "/men" },
{ label: "Women's Clothing", href: "/women" },
@@ -129,8 +173,7 @@ export default function MaterialsPage() {
],
},
{
title: "Learn",
items: [
title: "Learn", items: [
{ label: "Blog", href: "/blog" },
{ label: "Clothing Without Plastic", href: "/clothing-without-plastic" },
{ label: "Natural Fiber Guide", href: "/materials" },
@@ -138,8 +181,7 @@ export default function MaterialsPage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Contact", href: "mailto:hello@intuneclothing.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Newsletter", href: "#" },
@@ -152,4 +194,4 @@ export default function MaterialsPage() {
</div>
</ThemeProvider>
);
}
}