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/FeatureSection.tsx
+++ b/Pottery-website/components/FeatureSection.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+const FeatureSection: React.FC = () => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    const image = imageRef.current;
+    const content = contentRef.current;
+
+    if (!section || !image || !content) return;
+
+    // Image reveal animation
+    gsap.fromTo(
+      image,
+      { clipPath: 'inset(100% 0 0 0)', opacity: 0 },
+      {
+        clipPath: 'inset(0% 0 0 0)',
+        opacity: 1,
+        duration: 1.2,
+        ease: 'power3.out',
+        scrollTrigger: {
+          trigger: section,
+          start: 'top 60%',
+          toggleActions: 'play none none reverse',
+        },
+      }
+    );
+
+    // Content fade in animation
+    gsap.fromTo(
+      content,
+      { x: -60, opacity: 0 },
+      {
+        x: 0,
+        opacity: 1,
+        duration: 1,
+        ease: 'power3.out',
+        scrollTrigger: {
+          trigger: section,
+          start: 'top 50%',
+          toggleActions: 'play none none reverse',
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  return (
+    <section ref={sectionRef} className="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
+      <div className="max-w-[1800px] mx-auto px-6">
+        <div className="relative flex flex-col md:block">
+          <div className="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-[0.03] dark:opacity-[0.05] pointer-events-none">
+            <span className="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
+          </div>
+          <div
+            ref={imageRef}
+            className="w-full md:w-3/5 h-[600px] md:h-[800px] ml-auto relative z-10 shadow-2xl bg-center bg-cover bg-no-repeat"
+            style={{ backgroundImage: "url('/ceramic-cups.png')" }}
+          >
+          </div>
+          <div ref={contentRef} className="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
+            <span className="block w-12 h-[1px] bg-text-main mb-8"></span>
+            <h2 className="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
+              The Art of <br /><i className="font-thin">Slow Living</i>
+            </h2>
+            <p className="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
+              We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
+            </p>
+            <a className="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
+              Read Our Story <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureSection;