@aws505/sheetsite 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws505/sheetsite",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "publishConfig": {
     "access": "public"
   },

package/src/components/index.ts

@@ -31,6 +31,15 @@ export type { HoursProps } from './sections/Hours';
 export { Gallery } from './sections/Gallery';
 export type { GalleryProps } from './sections/Gallery';
 
+export { Menu } from './sections/Menu';
+export type { MenuProps } from './sections/Menu';
+
+export { TrustBadges } from './sections/TrustBadges';
+export type { TrustBadgesProps, TrustBadge } from './sections/TrustBadges';
+
+export { BeforeAfter } from './sections/BeforeAfter';
+export type { BeforeAfterProps, BeforeAfterItem } from './sections/BeforeAfter';
+
 // UI Components
 export { Button, ButtonLink } from './ui/Button';
 export type { ButtonProps, ButtonLinkProps } from './ui/Button';
@@ -39,3 +48,6 @@ export { Card, CardHeader, CardBody, CardFooter, CardImage } from './ui/Card';
 export type { CardProps, CardHeaderProps, CardImageProps } from './ui/Card';
 
 export * from './ui/Icons';
+
+export { AnimatedSection, StaggerContainer } from './ui/AnimatedSection';
+export type { AnimatedSectionProps, StaggerContainerProps } from './ui/AnimatedSection';

package/src/components/sections/BeforeAfter.tsx

@@ -0,0 +1,345 @@
+/**
+ * Before/After Gallery Section Component
+ *
+ * Displays before and after images with an interactive slider.
+ * Perfect for tailors, home services, beauty services, etc.
+ */
+
+'use client';
+
+import React, { useState, useRef, useCallback } from 'react';
+
+export interface BeforeAfterItem {
+  id?: string;
+  beforeImageUrl: string;
+  afterImageUrl: string;
+  beforeAlt?: string;
+  afterAlt?: string;
+  title?: string;
+  description?: string;
+  category?: string;
+  featured?: boolean;
+  sortOrder?: number;
+}
+
+export interface BeforeAfterProps {
+  items: BeforeAfterItem[];
+  title?: string;
+  subtitle?: string;
+  columns?: 1 | 2 | 3;
+  variant?: 'slider' | 'side-by-side' | 'stacked';
+  showCategories?: boolean;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Before/After gallery section component.
+ */
+export function BeforeAfter({
+  items,
+  title = 'Our Work',
+  subtitle = 'See the transformation',
+  columns = 2,
+  variant = 'slider',
+  showCategories = true,
+  className = '',
+  id = 'portfolio',
+}: BeforeAfterProps) {
+  // Get unique categories
+  const categories = showCategories
+    ? [...new Set(items.filter(item => item.category).map(item => item.category!))]
+    : [];
+
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+
+  // Filter items by category
+  const displayedItems = activeCategory
+    ? items.filter(item => item.category === activeCategory)
+    : items;
+
+  // Sort by sortOrder
+  const sortedItems = [...displayedItems].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+
+  const gridCols = {
+    1: 'max-w-2xl mx-auto',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+  };
+
+  return (
+    <section id={id} className={`py-16 scroll-mt-20 ${className}`}>
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{title}</h2>
+          {subtitle && (
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">{subtitle}</p>
+          )}
+        </div>
+
+        {/* Category Tabs */}
+        {showCategories && categories.length > 1 && (
+          <div className="flex flex-wrap justify-center gap-2 mb-8">
+            <button
+              onClick={() => setActiveCategory(null)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                activeCategory === null
+                  ? 'bg-primary-600 text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              All
+            </button>
+            {categories.map((category) => (
+              <button
+                key={category}
+                onClick={() => setActiveCategory(category)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  activeCategory === category
+                    ? 'bg-primary-600 text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Items Grid */}
+        <div className={`grid gap-8 ${gridCols[columns]}`}>
+          {sortedItems.map((item) => (
+            <BeforeAfterCard
+              key={item.id || `${item.beforeImageUrl}-${item.afterImageUrl}`}
+              item={item}
+              variant={variant}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Before/After card component.
+ */
+function BeforeAfterCard({
+  item,
+  variant,
+}: {
+  item: BeforeAfterItem;
+  variant: BeforeAfterProps['variant'];
+}) {
+  if (variant === 'side-by-side') {
+    return <SideBySideCard item={item} />;
+  }
+
+  if (variant === 'stacked') {
+    return <StackedCard item={item} />;
+  }
+
+  // Default: slider variant
+  return <SliderCard item={item} />;
+}
+
+/**
+ * Slider card with draggable comparison.
+ */
+function SliderCard({ item }: { item: BeforeAfterItem }) {
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  const handleMove = useCallback((clientX: number) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition(percentage);
+  }, []);
+
+  const handleMouseDown = () => {
+    isDragging.current = true;
+  };
+
+  const handleMouseUp = () => {
+    isDragging.current = false;
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging.current) {
+      handleMove(e.clientX);
+    }
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleMove(e.touches[0].clientX);
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+      <div
+        ref={containerRef}
+        className="relative aspect-[4/3] cursor-ew-resize select-none overflow-hidden"
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onMouseMove={handleMouseMove}
+        onTouchMove={handleTouchMove}
+      >
+        {/* After image (full) */}
+        <img
+          src={item.afterImageUrl}
+          alt={item.afterAlt || 'After'}
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+
+        {/* Before image (clipped) */}
+        <div
+          className="absolute inset-0 overflow-hidden"
+          style={{ width: `${sliderPosition}%` }}
+        >
+          <img
+            src={item.beforeImageUrl}
+            alt={item.beforeAlt || 'Before'}
+            className="absolute inset-0 w-full h-full object-cover"
+            style={{ width: containerRef.current?.offsetWidth || '100%' }}
+          />
+        </div>
+
+        {/* Slider handle */}
+        <div
+          className="absolute top-0 bottom-0 w-1 bg-white shadow-lg cursor-ew-resize"
+          style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
+        >
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
+            <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+            </svg>
+          </div>
+        </div>
+
+        {/* Labels */}
+        <div className="absolute bottom-4 left-4 px-2 py-1 bg-black/60 text-white text-xs rounded">
+          Before
+        </div>
+        <div className="absolute bottom-4 right-4 px-2 py-1 bg-black/60 text-white text-xs rounded">
+          After
+        </div>
+      </div>
+
+      {/* Content */}
+      {(item.title || item.description) && (
+        <div className="p-4">
+          {item.title && (
+            <h3 className="text-lg font-semibold text-gray-900 mb-1">{item.title}</h3>
+          )}
+          {item.description && (
+            <p className="text-gray-600 text-sm">{item.description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Side by side card.
+ */
+function SideBySideCard({ item }: { item: BeforeAfterItem }) {
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+      <div className="grid grid-cols-2">
+        <div className="relative aspect-square">
+          <img
+            src={item.beforeImageUrl}
+            alt={item.beforeAlt || 'Before'}
+            className="w-full h-full object-cover"
+          />
+          <span className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 text-white text-xs rounded">
+            Before
+          </span>
+        </div>
+        <div className="relative aspect-square">
+          <img
+            src={item.afterImageUrl}
+            alt={item.afterAlt || 'After'}
+            className="w-full h-full object-cover"
+          />
+          <span className="absolute bottom-2 right-2 px-2 py-1 bg-black/60 text-white text-xs rounded">
+            After
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      {(item.title || item.description) && (
+        <div className="p-4">
+          {item.title && (
+            <h3 className="text-lg font-semibold text-gray-900 mb-1">{item.title}</h3>
+          )}
+          {item.description && (
+            <p className="text-gray-600 text-sm">{item.description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Stacked card with hover reveal.
+ */
+function StackedCard({ item }: { item: BeforeAfterItem }) {
+  const [showAfter, setShowAfter] = useState(false);
+
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+      <div
+        className="relative aspect-[4/3] cursor-pointer"
+        onMouseEnter={() => setShowAfter(true)}
+        onMouseLeave={() => setShowAfter(false)}
+        onClick={() => setShowAfter(!showAfter)}
+      >
+        {/* Before image */}
+        <img
+          src={item.beforeImageUrl}
+          alt={item.beforeAlt || 'Before'}
+          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
+            showAfter ? 'opacity-0' : 'opacity-100'
+          }`}
+        />
+
+        {/* After image */}
+        <img
+          src={item.afterImageUrl}
+          alt={item.afterAlt || 'After'}
+          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
+            showAfter ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+
+        {/* Label */}
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1 bg-black/60 text-white text-sm rounded">
+          {showAfter ? 'After' : 'Before'} (hover to toggle)
+        </div>
+      </div>
+
+      {/* Content */}
+      {(item.title || item.description) && (
+        <div className="p-4">
+          {item.title && (
+            <h3 className="text-lg font-semibold text-gray-900 mb-1">{item.title}</h3>
+          )}
+          {item.description && (
+            <p className="text-gray-600 text-sm">{item.description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default BeforeAfter;

package/src/components/sections/FAQ.tsx

@@ -53,7 +53,7 @@ export function FAQ({
 
   if (variant === 'cards') {
     return (
-      <section id={id} className={`py-16 ${className}`}>
+      <section id={id} className={`py-16 scroll-mt-20 ${className}`}>
         <div className="container mx-auto px-4">
           <SectionHeader title={title} subtitle={subtitle} />
           <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
@@ -68,7 +68,7 @@ export function FAQ({
 
   if (variant === 'simple') {
     return (
-      <section id={id} className={`py-16 ${className}`}>
+      <section id={id} className={`py-16 scroll-mt-20 ${className}`}>
         <div className="container mx-auto px-4">
           <SectionHeader title={title} subtitle={subtitle} />
           <div className="max-w-3xl mx-auto space-y-8">
@@ -83,7 +83,7 @@ export function FAQ({
 
   // Default: accordion variant
   return (
-    <section id={id} className={`py-16 bg-gray-50 ${className}`}>
+    <section id={id} className={`py-16 scroll-mt-20 bg-gray-50 ${className}`}>
       <div className="container mx-auto px-4">
         <SectionHeader title={title} subtitle={subtitle} />
         <div className="max-w-3xl mx-auto">

package/src/components/sections/Gallery.tsx

@@ -16,8 +16,10 @@ export interface GalleryProps {
   columns?: 2 | 3 | 4;
   variant?: 'grid' | 'masonry' | 'carousel';
   showCaptions?: boolean;
+  enableLightbox?: boolean;
   limit?: number;
   className?: string;
+  id?: string;
 }
 
 /**
@@ -30,11 +32,14 @@ export function Gallery({
   columns = 3,
   variant = 'grid',
   showCaptions = true,
+  enableLightbox = true,
   limit,
   className = '',
+  id = 'gallery',
 }: GalleryProps) {
   const displayedItems = limit ? items.slice(0, limit) : items;
   const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
 
   const handleImageError = (id: string) => {
     setFailedImages((prev) => new Set(prev).add(id));
@@ -46,8 +51,28 @@ export function Gallery({
     4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
   };
 
+  const openLightbox = (index: number) => {
+    if (enableLightbox) {
+      setLightboxIndex(index);
+    }
+  };
+
+  const closeLightbox = () => setLightboxIndex(null);
+
+  const goToPrevious = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === 0 ? displayedItems.length - 1 : lightboxIndex - 1);
+    }
+  };
+
+  const goToNext = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === displayedItems.length - 1 ? 0 : lightboxIndex + 1);
+    }
+  };
+
   return (
-    <section className={`py-16 ${className}`}>
+    <section id={id} className={`py-16 scroll-mt-20 ${className}`}>
       <div className="container mx-auto px-4">
         {/* Header */}
         {(title || subtitle) && (
@@ -63,14 +88,18 @@ export function Gallery({
 
         {/* Gallery Grid */}
         <div className={`grid gap-4 ${gridCols[columns]}`}>
-          {displayedItems.map((item) => {
+          {displayedItems.map((item, index) => {
             const itemId = item.id || item.imageUrl;
             const hasFailed = failedImages.has(itemId);
 
             return (
               <div
                 key={itemId}
-                className="group relative aspect-square overflow-hidden rounded-lg bg-gray-100"
+                className={`group relative aspect-square overflow-hidden rounded-lg bg-gray-100 ${enableLightbox ? 'cursor-pointer' : ''}`}
+                onClick={() => openLightbox(index)}
+                role={enableLightbox ? 'button' : undefined}
+                tabIndex={enableLightbox ? 0 : undefined}
+                onKeyDown={enableLightbox ? (e) => e.key === 'Enter' && openLightbox(index) : undefined}
               >
                 {hasFailed ? (
                   <div className="absolute inset-0 flex items-center justify-center text-gray-400">
@@ -85,8 +114,16 @@ export function Gallery({
                       className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                       onError={() => handleImageError(itemId)}
                     />
+                    {/* Hover overlay with zoom icon */}
+                    {enableLightbox && (
+                      <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                        <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+                        </svg>
+                      </div>
+                    )}
                     {/* Caption overlay */}
-                    {showCaptions && item.caption && (
+                    {showCaptions && item.caption && !enableLightbox && (
                       <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                         <div className="absolute bottom-0 left-0 right-0 p-4">
                           <p className="text-white text-sm">{item.caption}</p>
@@ -100,6 +137,69 @@ export function Gallery({
           })}
         </div>
       </div>
+
+      {/* Lightbox Modal */}
+      {enableLightbox && lightboxIndex !== null && (
+        <div
+          className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
+          onClick={closeLightbox}
+        >
+          {/* Close button */}
+          <button
+            onClick={closeLightbox}
+            className="absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10"
+            aria-label="Close lightbox"
+          >
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+
+          {/* Previous button */}
+          <button
+            onClick={(e) => { e.stopPropagation(); goToPrevious(); }}
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10"
+            aria-label="Previous image"
+          >
+            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+
+          {/* Next button */}
+          <button
+            onClick={(e) => { e.stopPropagation(); goToNext(); }}
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10"
+            aria-label="Next image"
+          >
+            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+
+          {/* Image container */}
+          <div
+            className="max-w-5xl max-h-[85vh] mx-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <img
+              src={displayedItems[lightboxIndex].imageUrl}
+              alt={displayedItems[lightboxIndex].alt || ''}
+              className="max-w-full max-h-[85vh] object-contain"
+            />
+            {showCaptions && displayedItems[lightboxIndex].caption && (
+              <p className="text-white text-center mt-4 text-lg">
+                {displayedItems[lightboxIndex].caption}
+              </p>
+            )}
+          </div>
+
+          {/* Image counter */}
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm">
+            {lightboxIndex + 1} / {displayedItems.length}
+          </div>
+        </div>
+      )}
     </section>
   );
 }