SheetSite

Build professional small business websites in minutes.

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

# Create a new Next.js project
npx create-next-app@latest my-business-site
cd my-business-site

# Install SheetSite
npm install @aws505/sheetsite

# Start developing
npm run dev

Features

• 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, 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, Consulting
• Health: Personal Trainers, Yoga Studios, Massage Therapy
• Creative: Photography, Music Lessons, Event Planning

Basic Usage

// app/page.tsx
import {
  Hero,
  Services,
  Testimonials,
  FAQ,
  Hours,
  Header,
  Footer,
} from '@aws505/sheetsite/components';

export default async function HomePage() {
  const data = await fetchSiteData(); // Your data fetching logic

  return (
    <>
      <Header business={data.business} />
      <main>
        <Hero business={data.business} />
        <Services services={data.services} />
        <Testimonials testimonials={data.testimonials} />
        <FAQ items={data.faq} />
      </main>
      <Footer business={data.business} hours={data.hours} />
    </>
  );
}

Business-Type Specific Components

Restaurant Menu

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)

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)

import { TrustBadges } from '@aws505/sheetsite/components';

<TrustBadges
  badges={certifications}
  title="Certifications"
  variant="grid" // or "inline" or "cards"
/>

Gallery with Lightbox

import { Gallery } from '@aws505/sheetsite/components';

<Gallery
  items={galleryItems}
  enableLightbox={true}
  columns={3}
/>

Scroll Animations

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>

Animation options: fade-up, fade-down, fade-left, fade-right, zoom, none

Theming with CSS Custom Properties

Add these CSS variables to your globals.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:

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:

<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:

<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:

import type {
  BusinessInfo,
  Service,
  Testimonial,
  FAQItem,
  HoursEntry,
  GalleryItem,
  MenuItem,
  TrustBadge,
  BeforeAfterItem,
} from '@aws505/sheetsite/data';

License

MIT