@aws505/sheetsite 1.0.2 → 1.0.3

package/src/components/sections/Menu.tsx

@@ -0,0 +1,312 @@
+/**
+ * Menu Section Component
+ *
+ * Displays a restaurant or food service menu with categories.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import type { MenuItem } from '../../data/types';
+
+export interface MenuProps {
+  items: MenuItem[];
+  title?: string;
+  subtitle?: string;
+  showCategories?: boolean;
+  showImages?: boolean;
+  showDietary?: boolean;
+  variant?: 'cards' | 'list' | 'compact';
+  columns?: 1 | 2 | 3;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Menu section component.
+ */
+export function Menu({
+  items,
+  title = 'Our Menu',
+  subtitle,
+  showCategories = true,
+  showImages = true,
+  showDietary = true,
+  variant = 'cards',
+  columns = 2,
+  className = '',
+  id = 'menu',
+}: MenuProps) {
+  // Get unique categories
+  const categories = showCategories
+    ? [...new Set(items.filter(item => item.category).map(item => item.category!))]
+    : [];
+
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    categories.length > 0 ? categories[0] : 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">
+            {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>
+        )}
+
+        {/* Menu Items */}
+        {variant === 'list' ? (
+          <div className="max-w-3xl mx-auto divide-y divide-gray-200">
+            {sortedItems.map((item) => (
+              <MenuListItem
+                key={item.id || item.name}
+                item={item}
+                showImage={showImages}
+                showDietary={showDietary}
+              />
+            ))}
+          </div>
+        ) : variant === 'compact' ? (
+          <div className={`grid gap-4 ${gridCols[columns]}`}>
+            {sortedItems.map((item) => (
+              <MenuCompactItem
+                key={item.id || item.name}
+                item={item}
+                showDietary={showDietary}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className={`grid gap-6 ${gridCols[columns]}`}>
+            {sortedItems.map((item) => (
+              <MenuCard
+                key={item.id || item.name}
+                item={item}
+                showImage={showImages}
+                showDietary={showDietary}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Menu card component.
+ */
+function MenuCard({
+  item,
+  showImage,
+  showDietary,
+}: {
+  item: MenuItem;
+  showImage: boolean;
+  showDietary: boolean;
+}) {
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+      {showImage && item.imageUrl && (
+        <div className="aspect-video relative overflow-hidden">
+          <img
+            src={item.imageUrl}
+            alt={item.name}
+            className="w-full h-full object-cover"
+          />
+          {item.featured && (
+            <span className="absolute top-2 left-2 px-2 py-1 bg-primary-600 text-white text-xs font-medium rounded">
+              Featured
+            </span>
+          )}
+        </div>
+      )}
+      <div className="p-4">
+        <div className="flex justify-between items-start mb-2">
+          <h3 className="text-lg font-semibold text-gray-900">{item.name}</h3>
+          <PriceDisplay item={item} />
+        </div>
+        {item.description && (
+          <p className="text-gray-600 text-sm mb-3">{item.description}</p>
+        )}
+        {showDietary && item.dietary && item.dietary.length > 0 && (
+          <DietaryBadges dietary={item.dietary} />
+        )}
+        {!item.available && (
+          <span className="inline-block mt-2 px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded">
+            Currently unavailable
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Menu list item component.
+ */
+function MenuListItem({
+  item,
+  showImage,
+  showDietary,
+}: {
+  item: MenuItem;
+  showImage: boolean;
+  showDietary: boolean;
+}) {
+  return (
+    <div className="py-4 flex gap-4">
+      {showImage && item.imageUrl && (
+        <div className="w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden">
+          <img
+            src={item.imageUrl}
+            alt={item.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="flex justify-between items-start">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">
+              {item.name}
+              {item.featured && (
+                <span className="ml-2 px-2 py-0.5 bg-primary-100 text-primary-700 text-xs font-medium rounded">
+                  Popular
+                </span>
+              )}
+            </h3>
+            {item.description && (
+              <p className="text-gray-600 text-sm mt-1">{item.description}</p>
+            )}
+            {showDietary && item.dietary && item.dietary.length > 0 && (
+              <div className="mt-2">
+                <DietaryBadges dietary={item.dietary} />
+              </div>
+            )}
+          </div>
+          <PriceDisplay item={item} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Compact menu item component.
+ */
+function MenuCompactItem({
+  item,
+  showDietary,
+}: {
+  item: MenuItem;
+  showDietary: boolean;
+}) {
+  return (
+    <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-gray-900">{item.name}</span>
+        {item.featured && (
+          <span className="w-2 h-2 bg-primary-500 rounded-full" title="Popular" />
+        )}
+        {showDietary && item.dietary && item.dietary.length > 0 && (
+          <span className="text-xs text-gray-500">
+            ({item.dietary.join(', ')})
+          </span>
+        )}
+      </div>
+      <PriceDisplay item={item} compact />
+    </div>
+  );
+}
+
+/**
+ * Price display component.
+ */
+function PriceDisplay({ item, compact = false }: { item: MenuItem; compact?: boolean }) {
+  if (item.priceNote) {
+    return (
+      <span className={`text-primary-600 font-medium ${compact ? 'text-sm' : ''}`}>
+        {item.priceNote}
+      </span>
+    );
+  }
+
+  if (item.price) {
+    return (
+      <span className={`text-primary-600 font-medium ${compact ? 'text-sm' : ''}`}>
+        ${item.price.toFixed(2)}
+      </span>
+    );
+  }
+
+  return null;
+}
+
+/**
+ * Dietary badges component.
+ */
+function DietaryBadges({ dietary }: { dietary: string[] }) {
+  const dietaryIcons: Record<string, string> = {
+    vegetarian: 'V',
+    vegan: 'VG',
+    'gluten-free': 'GF',
+    'dairy-free': 'DF',
+    'nut-free': 'NF',
+    spicy: '🌶',
+    halal: 'H',
+    kosher: 'K',
+  };
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {dietary.map((diet) => (
+        <span
+          key={diet}
+          className="px-1.5 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded"
+          title={diet}
+        >
+          {dietaryIcons[diet.toLowerCase()] || diet}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default Menu;

package/src/components/sections/Services.tsx

@@ -46,7 +46,7 @@ export function Services({
 
   if (variant === 'list') {
     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 divide-y divide-gray-200">
@@ -66,7 +66,7 @@ export function Services({
 
   if (variant === 'minimal') {
     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 gap-6 ${gridCols[columns]}`}>
@@ -85,7 +85,7 @@ export function Services({
 
   // Default: cards 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={`grid gap-6 ${gridCols[columns]}`}>

package/src/components/sections/Testimonials.tsx

@@ -43,7 +43,7 @@ export function Testimonials({
   };
 
   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">
         {/* Header */}
         <div className="text-center mb-12">

package/src/components/sections/TrustBadges.tsx

@@ -0,0 +1,283 @@
+/**
+ * Trust Badges Section Component
+ *
+ * Displays certifications, awards, affiliations, and trust indicators.
+ */
+
+import React from 'react';
+
+export interface TrustBadge {
+  id?: string;
+  name: string;
+  description?: string;
+  imageUrl?: string;
+  icon?: string;
+  year?: string;
+  link?: string;
+  featured?: boolean;
+  sortOrder?: number;
+}
+
+export interface TrustBadgesProps {
+  badges: TrustBadge[];
+  title?: string;
+  subtitle?: string;
+  variant?: 'grid' | 'inline' | 'cards';
+  columns?: 3 | 4 | 5 | 6;
+  showDescriptions?: boolean;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Trust badges section component.
+ */
+export function TrustBadges({
+  badges,
+  title = 'Certifications & Affiliations',
+  subtitle,
+  variant = 'grid',
+  columns = 4,
+  showDescriptions = false,
+  className = '',
+  id = 'certifications',
+}: TrustBadgesProps) {
+  const sortedBadges = [...badges].sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+
+  const gridCols = {
+    3: 'grid-cols-2 sm:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-3 sm:grid-cols-6',
+  };
+
+  if (variant === 'inline') {
+    return (
+      <section id={id} className={`py-12 scroll-mt-20 bg-gray-50 ${className}`}>
+        <div className="container mx-auto px-4">
+          {title && (
+            <p className="text-center text-sm text-gray-500 mb-6">{title}</p>
+          )}
+          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12">
+            {sortedBadges.map((badge) => (
+              <InlineBadge key={badge.id || badge.name} badge={badge} />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (variant === 'cards') {
+    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>
+
+          {/* Cards Grid */}
+          <div className={`grid gap-6 ${gridCols[columns]}`}>
+            {sortedBadges.map((badge) => (
+              <CardBadge
+                key={badge.id || badge.name}
+                badge={badge}
+                showDescription={showDescriptions}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Default: grid variant
+  return (
+    <section id={id} className={`py-16 scroll-mt-20 bg-gray-50 ${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>
+
+        {/* Grid */}
+        <div className={`grid gap-8 ${gridCols[columns]}`}>
+          {sortedBadges.map((badge) => (
+            <GridBadge
+              key={badge.id || badge.name}
+              badge={badge}
+              showDescription={showDescriptions}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Inline badge component.
+ */
+function InlineBadge({ badge }: { badge: TrustBadge }) {
+  const Wrapper = badge.link ? 'a' : 'div';
+  const wrapperProps = badge.link
+    ? { href: badge.link, target: '_blank', rel: 'noopener noreferrer' }
+    : {};
+
+  return (
+    <Wrapper
+      {...wrapperProps}
+      className="flex items-center opacity-70 hover:opacity-100 transition-opacity"
+      title={badge.name}
+    >
+      {badge.imageUrl ? (
+        <img
+          src={badge.imageUrl}
+          alt={badge.name}
+          className="h-10 md:h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
+        />
+      ) : (
+        <div className="flex items-center gap-2 text-gray-600">
+          {badge.icon && <BadgeIcon icon={badge.icon} className="w-8 h-8" />}
+          <span className="text-sm font-medium">{badge.name}</span>
+        </div>
+      )}
+    </Wrapper>
+  );
+}
+
+/**
+ * Grid badge component.
+ */
+function GridBadge({
+  badge,
+  showDescription,
+}: {
+  badge: TrustBadge;
+  showDescription: boolean;
+}) {
+  const Wrapper = badge.link ? 'a' : 'div';
+  const wrapperProps = badge.link
+    ? { href: badge.link, target: '_blank', rel: 'noopener noreferrer' }
+    : {};
+
+  return (
+    <Wrapper
+      {...wrapperProps}
+      className="flex flex-col items-center text-center group"
+    >
+      <div className="w-20 h-20 mb-3 flex items-center justify-center">
+        {badge.imageUrl ? (
+          <img
+            src={badge.imageUrl}
+            alt={badge.name}
+            className="max-w-full max-h-full object-contain group-hover:scale-110 transition-transform"
+          />
+        ) : (
+          <BadgeIcon
+            icon={badge.icon || 'certificate'}
+            className="w-16 h-16 text-primary-600 group-hover:scale-110 transition-transform"
+          />
+        )}
+      </div>
+      <h3 className="font-semibold text-gray-900 text-sm">{badge.name}</h3>
+      {badge.year && (
+        <span className="text-xs text-gray-500">Since {badge.year}</span>
+      )}
+      {showDescription && badge.description && (
+        <p className="text-sm text-gray-600 mt-2">{badge.description}</p>
+      )}
+    </Wrapper>
+  );
+}
+
+/**
+ * Card badge component.
+ */
+function CardBadge({
+  badge,
+  showDescription,
+}: {
+  badge: TrustBadge;
+  showDescription: boolean;
+}) {
+  const Wrapper = badge.link ? 'a' : 'div';
+  const wrapperProps = badge.link
+    ? { href: badge.link, target: '_blank', rel: 'noopener noreferrer' }
+    : {};
+
+  return (
+    <Wrapper
+      {...wrapperProps}
+      className="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center hover:shadow-md transition-shadow"
+    >
+      <div className="w-16 h-16 mb-4 flex items-center justify-center">
+        {badge.imageUrl ? (
+          <img
+            src={badge.imageUrl}
+            alt={badge.name}
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : (
+          <BadgeIcon icon={badge.icon || 'certificate'} className="w-12 h-12 text-primary-600" />
+        )}
+      </div>
+      <h3 className="font-semibold text-gray-900">{badge.name}</h3>
+      {badge.year && (
+        <span className="text-xs text-gray-500 mt-1">Since {badge.year}</span>
+      )}
+      {showDescription && badge.description && (
+        <p className="text-sm text-gray-600 mt-2">{badge.description}</p>
+      )}
+    </Wrapper>
+  );
+}
+
+/**
+ * Badge icon component with common certification icons.
+ */
+function BadgeIcon({ icon, className = '' }: { icon: string; className?: string }) {
+  const icons: Record<string, JSX.Element> = {
+    certificate: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+      </svg>
+    ),
+    shield: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+    star: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+      </svg>
+    ),
+    award: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+      </svg>
+    ),
+    check: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    verified: (
+      <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+      </svg>
+    ),
+  };
+
+  return icons[icon] || icons.certificate;
+}
+
+export default TrustBadges;