Initial commit of project structure

2026-01-13 08:13:48 +01:00
commit be7f7b7bf7
47 changed files with 4455 additions and 0 deletions
--- a/Pottery-website/components/HorizontalScrollSection.tsx
+++ b/Pottery-website/components/HorizontalScrollSection.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+const horizontalImages = [
+    { src: '/pottery-vase.png', title: 'Handcrafted Vases', description: 'Each vase tells a story of patience and craft' },
+    { src: '/pottery-bowls.png', title: 'Artisan Bowls', description: 'Organic forms inspired by nature' },
+    { src: '/pottery-plates.png', title: 'Dinner Collection', description: 'Elevate your everyday dining experience' },
+    { src: '/pottery-studio.png', title: 'Our Studio', description: 'Where creativity meets tradition' },
+    { src: '/ceramic-cups.png', title: 'Ceramic Cups', description: 'Handmade with love and intention' },
+];
+
+const HorizontalScrollSection: React.FC = () => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        const scrollContainer = scrollRef.current;
+
+        if (!container || !scrollContainer) return;
+
+        const scrollWidth = scrollContainer.scrollWidth - window.innerWidth;
+
+        const tween = gsap.to(scrollContainer, {
+            x: -scrollWidth,
+            ease: 'none',
+            scrollTrigger: {
+                trigger: container,
+                start: 'top top',
+                end: () => `+=${scrollWidth * 0.5}`,
+                scrub: 1,
+                pin: true,
+                anticipatePin: 1,
+            },
+        });
+
+        return () => {
+            tween.scrollTrigger?.kill();
+            tween.kill();
+        };
+    }, []);
+
+    return (
+        <section ref={containerRef} className="relative overflow-hidden bg-clay-dark">
+            <div
+                ref={scrollRef}
+                className="flex h-screen items-center"
+            >
+                {horizontalImages.map((image, index) => (
+                    <div
+                        key={index}
+                        className="relative flex-shrink-0 w-[90vw] md:w-[75vw] h-screen flex items-center justify-center p-4 md:p-8"
+                    >
+                        <div className="relative w-full h-full max-w-5xl max-h-[80vh] overflow-hidden rounded-lg shadow-2xl group">
+                            <img
+                                src={image.src}
+                                alt={image.title}
+                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                            <div className="absolute bottom-0 left-0 p-12 text-white">
+                                <h3 className="font-display text-5xl md:text-6xl font-light mb-4">{image.title}</h3>
+                                <p className="font-body text-lg font-light opacity-80 max-w-md">{image.description}</p>
+                            </div>
+                        </div>
+                        <div className="absolute top-1/2 right-8 -translate-y-1/2 text-white/20 font-display text-[15rem] leading-none select-none pointer-events-none">
+                            {String(index + 1).padStart(2, '0')}
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/60">
+                <span className="material-symbols-outlined text-sm">arrow_back</span>
+                <span className="text-xs uppercase tracking-[0.3em] font-light">Scroll to explore</span>
+                <span className="material-symbols-outlined text-sm">arrow_forward</span>
+            </div>
+        </section>
+    );
+};
+
+export default HorizontalScrollSection;