@aws505/sheetsite 1.0.2 → 1.0.4

package/README.md

@@ -1,8 +1,8 @@
 # SheetSite
 
-**Build Google Sheets-powered websites for small businesses in minutes.**
+**Build professional small business websites in minutes.**
 
-SheetSite is a Next.js library designed specifically for AI-assisted development with Claude Code. It provides pre-built components, Google Sheets integration, and business-type presets that make creating professional small business websites incredibly fast.
+SheetSite is a Next.js component library providing pre-built, customizable components for small business websites. Designed for rapid development with AI assistance.
 
 ## Quick Start
 
@@ -12,7 +12,7 @@ npx create-next-app@latest my-business-site
 cd my-business-site
 
 # Install SheetSite
-npm install sheetsite
+npm install @aws505/sheetsite
 
 # Start developing
 npm run dev
@@ -20,51 +20,65 @@ npm run dev
 
 ## Features
 
-- **Google Sheets CMS**: Manage all content through Google Sheets - no database needed
-- **Pre-built Components**: Hero, Services, Gallery, Testimonials, FAQ, Hours, and more
-- **Business Presets**: Tailored configurations for 25+ business types
-- **Theme System**: Color palettes and typography for different industries
-- **SEO Built-in**: JSON-LD structured data, sitemaps, and meta tags
+- **Pre-built Components**: Hero, Services, Gallery with Lightbox, Testimonials, FAQ, Hours, Menu, and more
+- **Business-Type Specific Sections**: Menu for restaurants, Before/After gallery for tailors, Trust Badges for service businesses
+- **Theme System**: CSS custom properties for easy brand customization
+- **Scroll Animations**: Built-in scroll-triggered animations with `AnimatedSection`
+- **SEO Ready**: Structured data support for local businesses
 - **TypeScript**: Full type safety throughout
 - **AI-Optimized**: Designed for rapid development with Claude Code
 
+## Components
+
+### Layout Components
+- **Header** - Responsive navigation with mobile menu
+- **Footer** - Footer with business info, hours, and social links
+
+### Section Components
+- **Hero** - Prominent hero section with CTA buttons
+- **Services** - Grid, list, or minimal service display
+- **Testimonials** - Customer reviews with ratings
+- **FAQ** - Accordion, cards, or simple FAQ display
+- **Hours** - Business hours with "Open Now" status
+- **Gallery** - Image gallery with lightbox support
+- **Menu** - Restaurant menu with categories and dietary badges
+- **BeforeAfter** - Before/after comparison with slider
+- **TrustBadges** - Certifications and affiliations display
+
+### UI Components
+- **Button** - Styled buttons and button links
+- **Card** - Flexible card components
+- **AnimatedSection** - Scroll-triggered animations
+- **StaggerContainer** - Staggered child animations
+- **Icons** - Common icon set
+
 ## Supported Business Types
 
 - **Service**: Tailors, Shoe Repair, Dry Cleaners, Salons, Barbershops, Spas
-- **Food**: Restaurants, Cafes, Bakeries, Food Trucks, Home Kitchens, Catering
+- **Food**: Restaurants, Cafes, Bakeries, Food Trucks, Catering
 - **Retail**: Craft Sellers, Boutiques, Florists, Gift Shops
 - **Home Services**: Cleaning, Landscaping, Handyman, Plumbers, Electricians
 - **Auto**: Auto Repair, Auto Detail, Tire Shops
-- **Professional**: Accountants, Lawyers, Real Estate, Insurance, Consulting
-- **Health**: Personal Trainers, Yoga Studios, Chiropractors, Massage
-- **Creative**: Photography, Videography, Music Lessons, Event Planning
-
-## Documentation
-
-- [Quick Start Guide](./docs/QUICKSTART.md)
-- [AI Development Guide](./docs/AI-DEVELOPMENT-GUIDE.md) - **Start here if using Claude Code**
-- [Google Sheets Setup](./docs/GOOGLE-SHEETS-SETUP.md)
-- [Business Type Reference](./docs/BUSINESS-TYPES.md)
-- [Component Reference](./docs/COMPONENTS.md)
-- [Customization Guide](./docs/CUSTOMIZATION.md)
+- **Professional**: Accountants, Lawyers, Real Estate, Consulting
+- **Health**: Personal Trainers, Yoga Studios, Massage Therapy
+- **Creative**: Photography, Music Lessons, Event Planning
 
 ## Basic Usage
 
 ```tsx
 // app/page.tsx
 import {
-  getSiteData,
-  createSheetConfigFromEnv,
   Hero,
   Services,
   Testimonials,
+  FAQ,
+  Hours,
   Header,
   Footer,
-} from 'sheetsite';
+} from '@aws505/sheetsite/components';
 
 export default async function HomePage() {
-  const config = createSheetConfigFromEnv();
-  const data = await getSiteData(config);
+  const data = await fetchSiteData(); // Your data fetching logic
 
   return (
     <>
@@ -73,6 +87,7 @@ export default async function HomePage() {
         <Hero business={data.business} />
         <Services services={data.services} />
         <Testimonials testimonials={data.testimonials} />
+        <FAQ items={data.faq} />
       </main>
       <Footer business={data.business} hours={data.hours} />
     </>
@@ -80,24 +95,154 @@ export default async function HomePage() {
 }
 ```
 
-## Environment Variables
+## Business-Type Specific Components
+
+### Restaurant Menu
+```tsx
+import { Menu } from '@aws505/sheetsite/components';
+
+<Menu
+  items={menuItems}
+  title="Our Menu"
+  showCategories={true}
+  variant="cards" // or "list" or "compact"
+/>
+```
+
+### Before/After Gallery (Tailors, Home Services)
+```tsx
+import { BeforeAfter } from '@aws505/sheetsite/components';
+
+<BeforeAfter
+  items={portfolioItems}
+  title="Our Work"
+  variant="slider" // or "side-by-side" or "stacked"
+/>
+```
+
+### Trust Badges (Auto Repair, Professional Services)
+```tsx
+import { TrustBadges } from '@aws505/sheetsite/components';
+
+<TrustBadges
+  badges={certifications}
+  title="Certifications"
+  variant="grid" // or "inline" or "cards"
+/>
+```
+
+### Gallery with Lightbox
+```tsx
+import { Gallery } from '@aws505/sheetsite/components';
+
+<Gallery
+  items={galleryItems}
+  enableLightbox={true}
+  columns={3}
+/>
+```
 
-```env
-# Choose mode: "public_csv" or "private_api"
-SHEET_MODE="public_csv"
+## Scroll Animations
 
-# For public CSV mode (simpler):
-SHEET_CSV_URL_BUSINESS="https://docs.google.com/spreadsheets/d/e/.../pub?output=csv"
-SHEET_CSV_URL_HOURS="..."
-SHEET_CSV_URL_SERVICES="..."
+```tsx
+import { AnimatedSection, StaggerContainer } from '@aws505/sheetsite/components';
+
+// Single animated element
+<AnimatedSection animation="fade-up" delay={200}>
+  <Card>Content here</Card>
+</AnimatedSection>
+
+// Staggered children
+<StaggerContainer staggerDelay={100} animation="fade-up">
+  <Card>Item 1</Card>
+  <Card>Item 2</Card>
+  <Card>Item 3</Card>
+</StaggerContainer>
+```
 
-# For private API mode (more secure):
-SHEET_ID="your-sheet-id"
-GOOGLE_SERVICE_ACCOUNT_EMAIL="..."
-GOOGLE_PRIVATE_KEY="..."
+Animation options: `fade-up`, `fade-down`, `fade-left`, `fade-right`, `zoom`, `none`
 
-# Site URL for SEO
-NEXT_PUBLIC_SITE_URL="https://your-domain.com"
+## Theming with CSS Custom Properties
+
+Add these CSS variables to your `globals.css`:
+
+```css
+:root {
+  --color-primary-50: #fef2f2;
+  --color-primary-100: #fee2e2;
+  --color-primary-500: #ef4444;
+  --color-primary-600: #dc2626;
+  --color-primary-700: #b91c1c;
+
+  --color-accent-400: #facc15;
+  --color-accent-500: #eab308;
+  --color-accent-600: #ca8a04;
+}
+```
+
+## Tailwind CSS Integration
+
+Extend your `tailwind.config.js`:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: 'var(--color-primary-50)',
+          100: 'var(--color-primary-100)',
+          500: 'var(--color-primary-500)',
+          600: 'var(--color-primary-600)',
+          700: 'var(--color-primary-700)',
+        },
+        accent: {
+          400: 'var(--color-accent-400)',
+          500: 'var(--color-accent-500)',
+          600: 'var(--color-accent-600)',
+        },
+      },
+    },
+  },
+};
+```
+
+## Anchor Links
+
+All section components support the `id` prop and include `scroll-mt-20` for proper scrolling with sticky headers:
+
+```tsx
+<Services id="services" services={services} />
+<Testimonials id="reviews" testimonials={testimonials} />
+<FAQ id="faq" items={faq} />
+<Hours id="hours" hours={hours} />
+<Gallery id="gallery" items={gallery} />
+<Menu id="menu" items={menu} />
+```
+
+Navigation automatically scrolls to these sections:
+```tsx
+<a href="/#services">Services</a>
+<a href="/#reviews">Reviews</a>
+<a href="/#faq">FAQ</a>
+```
+
+## TypeScript Types
+
+All types are exported for use in your application:
+
+```tsx
+import type {
+  BusinessInfo,
+  Service,
+  Testimonial,
+  FAQItem,
+  HoursEntry,
+  GalleryItem,
+  MenuItem,
+  TrustBadge,
+  BeforeAfterItem,
+} from '@aws505/sheetsite/data';
 ```
 
 ## License