From bf48b40ffcc83ee1895edd5c1a717e088afbc199 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 00:02:29 +0000
Subject: [PATCH] Update src/app/materials/page.tsx

---
 src/app/materials/page.tsx | 176 +++++++++++++++++++++++--------------
 1 file changed, 109 insertions(+), 67 deletions(-)

diff --git a/src/app/materials/page.tsx b/src/app/materials/page.tsx
index e077189..91bd060 100644
--- a/src/app/materials/page.tsx
+++ b/src/app/materials/page.tsx
@@ -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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1