@aws505/sheetsite 1.0.0

package/src/components/sections/Testimonials.tsx

@@ -0,0 +1,184 @@
+/**
+ * Testimonials Section Component
+ *
+ * Displays customer reviews and testimonials.
+ */
+
+import React from 'react';
+import type { Testimonial } from '../../data/types';
+import { StarIcon } from '../ui/Icons';
+
+export interface TestimonialsProps {
+  testimonials: Testimonial[];
+  title?: string;
+  subtitle?: string;
+  columns?: 1 | 2 | 3;
+  showRatings?: boolean;
+  variant?: 'cards' | 'quotes' | 'minimal';
+  limit?: number;
+  className?: string;
+}
+
+/**
+ * Testimonials section component.
+ */
+export function Testimonials({
+  testimonials,
+  title = 'What Our Customers Say',
+  subtitle,
+  columns = 3,
+  showRatings = true,
+  variant = 'cards',
+  limit,
+  className = '',
+}: TestimonialsProps) {
+  const displayedTestimonials = limit ? testimonials.slice(0, limit) : testimonials;
+
+  const gridCols = {
+    1: 'max-w-2xl mx-auto',
+    2: 'md:grid-cols-2 max-w-4xl mx-auto',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+  };
+
+  return (
+    <section className={`py-16 ${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>
+
+        {/* Testimonials Grid */}
+        <div className={`grid gap-6 ${gridCols[columns]}`}>
+          {displayedTestimonials.map((testimonial) => (
+            <TestimonialCard
+              key={testimonial.id || testimonial.name}
+              testimonial={testimonial}
+              showRating={showRatings}
+              variant={variant}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Individual testimonial card.
+ */
+function TestimonialCard({
+  testimonial,
+  showRating,
+  variant,
+}: {
+  testimonial: Testimonial;
+  showRating: boolean;
+  variant: TestimonialsProps['variant'];
+}) {
+  if (variant === 'quotes') {
+    return (
+      <div className="text-center">
+        <QuoteIcon className="w-10 h-10 text-primary-200 mx-auto mb-4" />
+        <blockquote className="text-lg text-gray-700 italic mb-4">
+          "{testimonial.quote}"
+        </blockquote>
+        {showRating && testimonial.rating && (
+          <StarRating rating={testimonial.rating} className="justify-center mb-2" />
+        )}
+        <div className="font-semibold text-gray-900">{testimonial.name}</div>
+        {testimonial.context && (
+          <div className="text-sm text-gray-500">{testimonial.context}</div>
+        )}
+      </div>
+    );
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <div className="border-l-4 border-primary-500 pl-4">
+        <blockquote className="text-gray-700 mb-2">
+          "{testimonial.quote}"
+        </blockquote>
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-gray-900">{testimonial.name}</span>
+          {showRating && testimonial.rating && (
+            <StarRating rating={testimonial.rating} size={14} />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Default: cards variant
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      {showRating && testimonial.rating && (
+        <StarRating rating={testimonial.rating} className="mb-3" />
+      )}
+      <blockquote className="text-gray-700 mb-4">
+        "{testimonial.quote}"
+      </blockquote>
+      <div className="flex items-center">
+        {testimonial.imageUrl && (
+          <img
+            src={testimonial.imageUrl}
+            alt={testimonial.name}
+            className="w-10 h-10 rounded-full mr-3 object-cover"
+          />
+        )}
+        <div>
+          <div className="font-semibold text-gray-900">{testimonial.name}</div>
+          {testimonial.context && (
+            <div className="text-sm text-gray-500">{testimonial.context}</div>
+          )}
+          {testimonial.source && (
+            <div className="text-xs text-gray-400">via {testimonial.source}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Star rating component.
+ */
+function StarRating({
+  rating,
+  size = 18,
+  className = '',
+}: {
+  rating: number;
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <div className={`flex ${className}`} aria-label={`${rating} out of 5 stars`}>
+      {[1, 2, 3, 4, 5].map((star) => (
+        <StarIcon
+          key={star}
+          size={size}
+          filled={star <= rating}
+          className={star <= rating ? 'text-yellow-400' : 'text-gray-300'}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Quote icon.
+ */
+function QuoteIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+    </svg>
+  );
+}
+
+export default Testimonials;

package/src/components/ui/Button.tsx

@@ -0,0 +1,158 @@
+/**
+ * Button Component
+ *
+ * A versatile button component with multiple variants and sizes.
+ */
+
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+/**
+ * Get CSS classes for button variants and sizes.
+ */
+function getButtonClasses(props: Pick<ButtonProps, 'variant' | 'size' | 'fullWidth' | 'disabled'>): string {
+  const { variant = 'primary', size = 'md', fullWidth, disabled } = props;
+
+  const baseClasses = [
+    'inline-flex items-center justify-center',
+    'font-medium',
+    'transition-colors duration-200',
+    'focus:outline-none focus:ring-2 focus:ring-offset-2',
+    disabled ? 'opacity-50 cursor-not-allowed' : '',
+    fullWidth ? 'w-full' : '',
+  ];
+
+  // Variant classes
+  const variantClasses: Record<NonNullable<ButtonProps['variant']>, string> = {
+    primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
+    secondary: 'bg-primary-100 text-primary-700 hover:bg-primary-200 focus:ring-primary-500',
+    outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 focus:ring-primary-500',
+    ghost: 'text-primary-600 hover:bg-primary-100 focus:ring-primary-500',
+    link: 'text-primary-600 hover:underline focus:ring-primary-500 p-0',
+  };
+
+  // Size classes
+  const sizeClasses: Record<NonNullable<ButtonProps['size']>, string> = {
+    sm: 'text-sm px-3 py-1.5 rounded',
+    md: 'text-base px-4 py-2 rounded-md',
+    lg: 'text-lg px-6 py-3 rounded-lg',
+  };
+
+  return [
+    ...baseClasses,
+    variantClasses[variant],
+    variant !== 'link' ? sizeClasses[size] : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Button component with multiple variants and sizes.
+ */
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled,
+  className = '',
+  ...props
+}: ButtonProps) {
+  const classes = getButtonClasses({ variant, size, fullWidth, disabled: disabled || loading });
+
+  return (
+    <button
+      className={`${classes} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <LoadingSpinner size={size} />
+      ) : (
+        <>
+          {leftIcon && <span className="mr-2">{leftIcon}</span>}
+          {children}
+          {rightIcon && <span className="ml-2">{rightIcon}</span>}
+        </>
+      )}
+    </button>
+  );
+}
+
+/**
+ * Loading spinner for button loading state.
+ */
+function LoadingSpinner({ size }: { size: ButtonProps['size'] }) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+  };
+
+  return (
+    <svg
+      className={`animate-spin ${sizeClasses[size || 'md']}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Link styled as a button.
+ */
+export interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  fullWidth?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export function ButtonLink({
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  children,
+  className = '',
+  ...props
+}: ButtonLinkProps) {
+  const classes = getButtonClasses({ variant, size, fullWidth, disabled: false });
+
+  return (
+    <a className={`${classes} ${className}`} {...props}>
+      {leftIcon && <span className="mr-2">{leftIcon}</span>}
+      {children}
+      {rightIcon && <span className="ml-2">{rightIcon}</span>}
+    </a>
+  );
+}

package/src/components/ui/Card.tsx

@@ -0,0 +1,162 @@
+/**
+ * Card Component
+ *
+ * A flexible card component for displaying content in a contained box.
+ */
+
+import React from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'elevated' | 'outlined' | 'filled';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  hover?: boolean;
+}
+
+/**
+ * Get CSS classes for card variants.
+ */
+function getCardClasses(props: Pick<CardProps, 'variant' | 'padding' | 'hover'>): string {
+  const { variant = 'default', padding = 'md', hover = false } = props;
+
+  const baseClasses = ['rounded-lg', 'overflow-hidden'];
+
+  // Variant classes
+  const variantClasses: Record<NonNullable<CardProps['variant']>, string> = {
+    default: 'bg-white shadow',
+    elevated: 'bg-white shadow-lg',
+    outlined: 'bg-white border border-gray-200',
+    filled: 'bg-gray-50',
+  };
+
+  // Padding classes
+  const paddingClasses: Record<NonNullable<CardProps['padding']>, string> = {
+    none: '',
+    sm: 'p-3',
+    md: 'p-5',
+    lg: 'p-8',
+  };
+
+  // Hover effect
+  const hoverClasses = hover
+    ? 'transition-all duration-200 hover:shadow-lg hover:-translate-y-1'
+    : '';
+
+  return [
+    ...baseClasses,
+    variantClasses[variant],
+    paddingClasses[padding],
+    hoverClasses,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Card component for containing content.
+ */
+export function Card({
+  variant = 'default',
+  padding = 'md',
+  hover = false,
+  children,
+  className = '',
+  ...props
+}: CardProps) {
+  const classes = getCardClasses({ variant, padding, hover });
+
+  return (
+    <div className={`${classes} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Card header section.
+ */
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+}
+
+export function CardHeader({
+  title,
+  subtitle,
+  action,
+  children,
+  className = '',
+  ...props
+}: CardHeaderProps) {
+  return (
+    <div className={`flex items-start justify-between ${className}`} {...props}>
+      <div>
+        {title && <h3 className="text-lg font-semibold text-gray-900">{title}</h3>}
+        {subtitle && <p className="mt-1 text-sm text-gray-500">{subtitle}</p>}
+        {children}
+      </div>
+      {action && <div className="flex-shrink-0 ml-4">{action}</div>}
+    </div>
+  );
+}
+
+/**
+ * Card body section.
+ */
+export function CardBody({
+  children,
+  className = '',
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`mt-4 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Card footer section.
+ */
+export function CardFooter({
+  children,
+  className = '',
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`mt-4 pt-4 border-t border-gray-100 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Card image section.
+ */
+export interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  aspectRatio?: 'square' | 'video' | 'wide' | 'auto';
+}
+
+export function CardImage({
+  aspectRatio = 'video',
+  className = '',
+  alt = '',
+  ...props
+}: CardImageProps) {
+  const aspectClasses: Record<NonNullable<CardImageProps['aspectRatio']>, string> = {
+    square: 'aspect-square',
+    video: 'aspect-video',
+    wide: 'aspect-[2/1]',
+    auto: '',
+  };
+
+  return (
+    <div className={`-m-5 mb-4 ${aspectClasses[aspectRatio]} overflow-hidden`}>
+      <img
+        className={`w-full h-full object-cover ${className}`}
+        alt={alt}
+        {...props}
+      />
+    </div>
+  );
+}