@aws505/sheetsite 1.0.0

package/src/components/index.ts

@@ -0,0 +1,41 @@
+/**
+ * SheetSite Component Library
+ *
+ * Pre-built React components for building small business websites.
+ * All components are designed to work with SheetSite data types.
+ */
+
+// Layout Components
+export { Header } from './layout/Header';
+export type { HeaderProps, NavItem } from './layout/Header';
+
+export { Footer } from './layout/Footer';
+export type { FooterProps, FooterLink } from './layout/Footer';
+
+// Section Components
+export { Hero } from './sections/Hero';
+export type { HeroProps } from './sections/Hero';
+
+export { Services } from './sections/Services';
+export type { ServicesProps } from './sections/Services';
+
+export { Testimonials } from './sections/Testimonials';
+export type { TestimonialsProps } from './sections/Testimonials';
+
+export { FAQ } from './sections/FAQ';
+export type { FAQProps } from './sections/FAQ';
+
+export { Hours, getTodayHours, isCurrentlyOpen } from './sections/Hours';
+export type { HoursProps } from './sections/Hours';
+
+export { Gallery } from './sections/Gallery';
+export type { GalleryProps } from './sections/Gallery';
+
+// UI Components
+export { Button, ButtonLink } from './ui/Button';
+export type { ButtonProps, ButtonLinkProps } from './ui/Button';
+
+export { Card, CardHeader, CardBody, CardFooter, CardImage } from './ui/Card';
+export type { CardProps, CardHeaderProps, CardImageProps } from './ui/Card';
+
+export * from './ui/Icons';

package/src/components/layout/Footer.tsx

@@ -0,0 +1,234 @@
+/**
+ * Footer Component
+ *
+ * A comprehensive footer with business info, links, and social icons.
+ */
+
+import React from 'react';
+import type { BusinessInfo, HoursEntry } from '../../data/types';
+import {
+  PhoneIcon,
+  MailIcon,
+  MapPinIcon,
+  ClockIcon,
+  FacebookIcon,
+  InstagramIcon,
+  YelpIcon,
+} from '../ui/Icons';
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterProps {
+  business: BusinessInfo;
+  hours?: HoursEntry[];
+  quickLinks?: FooterLink[];
+  showHours?: boolean;
+  showSocial?: boolean;
+  variant?: 'simple' | 'columns' | 'centered';
+  className?: string;
+}
+
+const defaultQuickLinks: FooterLink[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Services', href: '/services' },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+  { label: 'Privacy Policy', href: '/privacy' },
+];
+
+const dayNames: Record<string, string> = {
+  monday: 'Mon',
+  tuesday: 'Tue',
+  wednesday: 'Wed',
+  thursday: 'Thu',
+  friday: 'Fri',
+  saturday: 'Sat',
+  sunday: 'Sun',
+};
+
+/**
+ * Footer component.
+ */
+export function Footer({
+  business,
+  hours = [],
+  quickLinks = defaultQuickLinks,
+  showHours = true,
+  showSocial = true,
+  variant = 'columns',
+  className = '',
+}: FooterProps) {
+  const currentYear = new Date().getFullYear();
+
+  const socialLinks = [
+    { url: business.socialYelp, icon: YelpIcon, label: 'Yelp' },
+    { url: business.socialInstagram, icon: InstagramIcon, label: 'Instagram' },
+    { url: business.socialFacebook, icon: FacebookIcon, label: 'Facebook' },
+  ].filter((link) => link.url);
+
+  if (variant === 'simple') {
+    return (
+      <footer className={`bg-gray-900 text-white py-8 ${className}`}>
+        <div className="container mx-auto px-4 text-center">
+          <p className="text-lg font-semibold mb-2">{business.name}</p>
+          {business.phone && <p className="text-gray-400">{business.phone}</p>}
+          <p className="text-gray-500 text-sm mt-4">
+            © {currentYear} {business.name}. All rights reserved.
+          </p>
+        </div>
+      </footer>
+    );
+  }
+
+  if (variant === 'centered') {
+    return (
+      <footer className={`bg-gray-900 text-white py-12 ${className}`}>
+        <div className="container mx-auto px-4 text-center">
+          <p className="text-2xl font-bold mb-4">{business.name}</p>
+          {business.tagline && <p className="text-gray-400 mb-6">{business.tagline}</p>}
+
+          <div className="flex flex-wrap justify-center gap-6 mb-8">
+            {quickLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="text-gray-400 hover:text-white transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+
+          {showSocial && socialLinks.length > 0 && (
+            <div className="flex justify-center gap-4 mb-8">
+              {socialLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition-colors"
+                  aria-label={link.label}
+                >
+                  <link.icon size={20} />
+                </a>
+              ))}
+            </div>
+          )}
+
+          <p className="text-gray-500 text-sm">
+            © {currentYear} {business.name}. All rights reserved.
+          </p>
+        </div>
+      </footer>
+    );
+  }
+
+  // Default: columns variant
+  return (
+    <footer className={`bg-gray-900 text-white py-12 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="grid md:grid-cols-3 gap-8">
+          {/* Business Info */}
+          <div>
+            <h3 className="text-xl font-bold mb-4">{business.name}</h3>
+            {business.addressLine1 && (
+              <div className="flex items-start text-gray-400 mb-3">
+                <MapPinIcon size={18} className="mr-2 mt-1 flex-shrink-0" />
+                <div>
+                  <p>{business.addressLine1}</p>
+                  {business.addressLine2 && <p>{business.addressLine2}</p>}
+                  <p>
+                    {business.city}, {business.state} {business.zip}
+                  </p>
+                </div>
+              </div>
+            )}
+            {business.phone && (
+              <a
+                href={`tel:${business.phone.replace(/\D/g, '')}`}
+                className="flex items-center text-gray-400 hover:text-white mb-3"
+              >
+                <PhoneIcon size={18} className="mr-2" />
+                {business.phone}
+              </a>
+            )}
+            {business.email && (
+              <a
+                href={`mailto:${business.email}`}
+                className="flex items-center text-gray-400 hover:text-white"
+              >
+                <MailIcon size={18} className="mr-2" />
+                {business.email}
+              </a>
+            )}
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
+            <ul className="space-y-2">
+              {quickLinks.map((link) => (
+                <li key={link.href}>
+                  <a
+                    href={link.href}
+                    className="text-gray-400 hover:text-white transition-colors"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+
+            {showSocial && socialLinks.length > 0 && (
+              <div className="flex gap-3 mt-6">
+                {socialLinks.map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition-colors"
+                    aria-label={link.label}
+                  >
+                    <link.icon size={20} />
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Hours */}
+          {showHours && hours.length > 0 && (
+            <div>
+              <h3 className="text-lg font-semibold mb-4 flex items-center">
+                <ClockIcon size={18} className="mr-2" />
+                Hours
+              </h3>
+              <ul className="space-y-1 text-gray-400">
+                {hours.map((entry) => (
+                  <li key={entry.day} className="flex justify-between">
+                    <span>{dayNames[entry.day]}</span>
+                    <span>
+                      {entry.closed ? 'Closed' : `${entry.open} - ${entry.close}`}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
+          <p>© {currentYear} {business.name}. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

package/src/components/layout/Header.tsx

@@ -0,0 +1,134 @@
+/**
+ * Header Component
+ *
+ * A responsive header with navigation and mobile menu.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import type { BusinessInfo } from '../../data/types';
+import { MenuIcon, XIcon, PhoneIcon } from '../ui/Icons';
+
+export interface NavItem {
+  label: string;
+  href: string;
+}
+
+export interface HeaderProps {
+  business: BusinessInfo;
+  navigation?: NavItem[];
+  sticky?: boolean;
+  transparent?: boolean;
+  showPhone?: boolean;
+  className?: string;
+}
+
+const defaultNavigation: NavItem[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Services', href: '/services' },
+  { label: 'Gallery', href: '/gallery' },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+];
+
+/**
+ * Header component.
+ */
+export function Header({
+  business,
+  navigation = defaultNavigation,
+  sticky = true,
+  transparent = false,
+  showPhone = true,
+  className = '',
+}: HeaderProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header
+      className={`
+        ${sticky ? 'sticky top-0 z-50' : ''}
+        ${transparent ? 'bg-transparent' : 'bg-white shadow-sm'}
+        ${className}
+      `}
+    >
+      <nav className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo / Business Name */}
+          <a href="/" className="flex items-center">
+            {business.logoUrl ? (
+              <img
+                src={business.logoUrl}
+                alt={business.name}
+                className="h-10 w-auto"
+              />
+            ) : (
+              <span className="text-xl font-bold text-gray-900">{business.name}</span>
+            )}
+          </a>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navigation.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                className="text-gray-600 hover:text-primary-600 font-medium transition-colors"
+              >
+                {item.label}
+              </a>
+            ))}
+
+            {/* Phone Button */}
+            {showPhone && business.phone && (
+              <a
+                href={`tel:${business.phone.replace(/\D/g, '')}`}
+                className="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+              >
+                <PhoneIcon size={18} className="mr-2" />
+                {business.phone}
+              </a>
+            )}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden p-2 rounded-lg hover:bg-gray-100"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+          >
+            {mobileMenuOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {mobileMenuOpen && (
+          <div className="md:hidden py-4 border-t">
+            {navigation.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                className="block py-2 text-gray-600 hover:text-primary-600 font-medium"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.label}
+              </a>
+            ))}
+            {showPhone && business.phone && (
+              <a
+                href={`tel:${business.phone.replace(/\D/g, '')}`}
+                className="flex items-center py-2 text-primary-600 font-medium"
+              >
+                <PhoneIcon size={18} className="mr-2" />
+                {business.phone}
+              </a>
+            )}
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+}
+
+export default Header;

package/src/components/sections/FAQ.tsx

@@ -0,0 +1,178 @@
+/**
+ * FAQ Section Component
+ *
+ * Displays frequently asked questions in an accordion format.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import type { FAQItem } from '../../data/types';
+import { ChevronDownIcon } from '../ui/Icons';
+
+export interface FAQProps {
+  items: FAQItem[];
+  title?: string;
+  subtitle?: string;
+  variant?: 'accordion' | 'cards' | 'simple';
+  defaultOpen?: number | number[];
+  allowMultiple?: boolean;
+  className?: string;
+}
+
+/**
+ * FAQ section component.
+ */
+export function FAQ({
+  items,
+  title = 'Frequently Asked Questions',
+  subtitle,
+  variant = 'accordion',
+  defaultOpen = 0,
+  allowMultiple = false,
+  className = '',
+}: FAQProps) {
+  const initialOpen = Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
+  const [openItems, setOpenItems] = useState<number[]>(initialOpen);
+
+  const toggleItem = (index: number) => {
+    if (allowMultiple) {
+      setOpenItems((prev) =>
+        prev.includes(index)
+          ? prev.filter((i) => i !== index)
+          : [...prev, index]
+      );
+    } else {
+      setOpenItems((prev) =>
+        prev.includes(index) ? [] : [index]
+      );
+    }
+  };
+
+  if (variant === 'cards') {
+    return (
+      <section className={`py-16 ${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">
+            {items.map((item) => (
+              <FAQCard key={item.id || item.question} item={item} />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (variant === 'simple') {
+    return (
+      <section className={`py-16 ${className}`}>
+        <div className="container mx-auto px-4">
+          <SectionHeader title={title} subtitle={subtitle} />
+          <div className="max-w-3xl mx-auto space-y-8">
+            {items.map((item) => (
+              <FAQSimple key={item.id || item.question} item={item} />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Default: accordion variant
+  return (
+    <section className={`py-16 bg-gray-50 ${className}`}>
+      <div className="container mx-auto px-4">
+        <SectionHeader title={title} subtitle={subtitle} />
+        <div className="max-w-3xl mx-auto">
+          {items.map((item, index) => (
+            <FAQAccordionItem
+              key={item.id || item.question}
+              item={item}
+              isOpen={openItems.includes(index)}
+              onToggle={() => toggleItem(index)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Section header.
+ */
+function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <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>
+  );
+}
+
+/**
+ * Accordion FAQ item.
+ */
+function FAQAccordionItem({
+  item,
+  isOpen,
+  onToggle,
+}: {
+  item: FAQItem;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div className="border-b border-gray-200 last:border-b-0">
+      <button
+        className="w-full py-4 flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded"
+        onClick={onToggle}
+        aria-expanded={isOpen}
+      >
+        <span className="text-lg font-medium text-gray-900 pr-4">{item.question}</span>
+        <ChevronDownIcon
+          size={20}
+          className={`flex-shrink-0 text-gray-500 transition-transform duration-200 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-200 ${
+          isOpen ? 'max-h-96 pb-4' : 'max-h-0'
+        }`}
+      >
+        <p className="text-gray-600">{item.answer}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Card FAQ item.
+ */
+function FAQCard({ item }: { item: FAQItem }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.question}</h3>
+      <p className="text-gray-600">{item.answer}</p>
+    </div>
+  );
+}
+
+/**
+ * Simple FAQ item.
+ */
+function FAQSimple({ item }: { item: FAQItem }) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.question}</h3>
+      <p className="text-gray-600">{item.answer}</p>
+    </div>
+  );
+}
+
+export default FAQ;

package/src/components/sections/Gallery.tsx

@@ -0,0 +1,107 @@
+/**
+ * Gallery Section Component
+ *
+ * Displays a grid of images.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import type { GalleryItem } from '../../data/types';
+
+export interface GalleryProps {
+  items: GalleryItem[];
+  title?: string;
+  subtitle?: string;
+  columns?: 2 | 3 | 4;
+  variant?: 'grid' | 'masonry' | 'carousel';
+  showCaptions?: boolean;
+  limit?: number;
+  className?: string;
+}
+
+/**
+ * Gallery section component.
+ */
+export function Gallery({
+  items,
+  title = 'Gallery',
+  subtitle,
+  columns = 3,
+  variant = 'grid',
+  showCaptions = true,
+  limit,
+  className = '',
+}: GalleryProps) {
+  const displayedItems = limit ? items.slice(0, limit) : items;
+  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
+
+  const handleImageError = (id: string) => {
+    setFailedImages((prev) => new Set(prev).add(id));
+  };
+
+  const gridCols = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  };
+
+  return (
+    <section className={`py-16 ${className}`}>
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        {(title || subtitle) && (
+          <div className="text-center mb-12">
+            {title && (
+              <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>
+        )}
+
+        {/* Gallery Grid */}
+        <div className={`grid gap-4 ${gridCols[columns]}`}>
+          {displayedItems.map((item) => {
+            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"
+              >
+                {hasFailed ? (
+                  <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                    <span>Image unavailable</span>
+                  </div>
+                ) : (
+                  <>
+                    <img
+                      src={item.imageUrl}
+                      alt={item.alt || ''}
+                      loading="lazy"
+                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      onError={() => handleImageError(itemId)}
+                    />
+                    {/* Caption overlay */}
+                    {showCaptions && item.caption && (
+                      <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>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Gallery;