@aws505/sheetsite 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws505/sheetsite",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "publishConfig": {
     "access": "public"
   },

package/src/components/index.ts

@@ -51,3 +51,6 @@ export * from './ui/Icons';
 
 export { AnimatedSection, StaggerContainer } from './ui/AnimatedSection';
 export type { AnimatedSectionProps, StaggerContainerProps } from './ui/AnimatedSection';
+
+export { FloatingClaimBanner } from './ui/FloatingClaimBanner';
+export type { FloatingClaimBannerProps } from './ui/FloatingClaimBanner';

package/src/components/layout/Header.tsx

@@ -27,6 +27,7 @@ export interface HeaderProps {
 const defaultNavigation: NavItem[] = [
   { label: 'Home', href: '/' },
   { label: 'Services', href: '/#services' },
+  { label: 'Gallery', href: '/#gallery' },
   { label: 'Hours', href: '/#hours' },
   { label: 'Reviews', href: '/#reviews' },
   { label: 'FAQ', href: '/#faq' },

package/src/components/sections/Hero.tsx

@@ -20,11 +20,23 @@ export interface HeroProps {
   backgroundImage?: string;
   overlay?: boolean;
   className?: string;
+  /** Custom trust signals/selling points. Defaults based on business type if not provided. */
+  trustSignals?: string[];
 }
 
 /**
  * Hero section component.
  */
+const defaultTrustSignals: Record<string, string[]> = {
+  salon: ['Expert Stylists', 'Walk-Ins Welcome', 'Quality Products'],
+  restaurant: ['Fresh Ingredients', 'Family Recipes', 'Friendly Service'],
+  repair: ['Certified Technicians', 'Honest Estimates', 'Quality Parts'],
+  tailor: ['Expert Craftsmanship', 'Perfect Fit Guaranteed', 'Quick Turnaround'],
+  professional: ['Quality Work', 'Fair Prices', 'Fast Service'],
+  retail: ['Quality Products', 'Great Selection', 'Friendly Service'],
+  default: ['Quality Work', 'Fair Prices', 'Fast Service'],
+};
+
 export function Hero({
   business,
   variant = 'centered',
@@ -34,7 +46,11 @@ export function Hero({
   backgroundImage,
   overlay = true,
   className = '',
+  trustSignals,
 }: HeroProps) {
+  // Determine trust signals based on business type or use provided ones
+  const businessType = (business as any).type || 'default';
+  const signals = trustSignals || defaultTrustSignals[businessType] || defaultTrustSignals.default;
   const bgStyle = backgroundImage
     ? { backgroundImage: `url(${backgroundImage})` }
     : undefined;
@@ -133,14 +149,14 @@ export function Hero({
 
             {/* Description */}
             {business.aboutShort && (
-              <p className="text-lg text-white/80 mb-8 max-w-xl">
+              <p className={`text-lg text-white/80 mb-8 max-w-xl ${variant === 'centered' ? 'mx-auto' : ''}`}>
                 {business.aboutShort}
               </p>
             )}
 
             {/* Trust Signals */}
-            <div className="flex flex-wrap justify-center gap-4 mb-8">
-              {['Quality Work', 'Fair Prices', 'Fast Service'].map((signal) => (
+            <div className={`flex flex-wrap gap-4 mb-8 ${variant === 'centered' ? 'justify-center' : ''}`}>
+              {signals.map((signal) => (
                 <div key={signal} className="flex items-center text-white/90">
                   <svg className="w-5 h-5 text-accent-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                     <path

package/src/components/ui/FloatingClaimBanner.tsx

@@ -0,0 +1,160 @@
+/**
+ * Floating Claim Banner Component
+ *
+ * A floating notification banner for business owners to claim their website.
+ * Used for sales outreach purposes.
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+export interface FloatingClaimBannerProps {
+  /** The email address to send claim requests to */
+  contactEmail?: string;
+  /** The site URL to include in the email subject (defaults to window.location.hostname) */
+  siteUrl?: string;
+  /** Business name for the email */
+  businessName?: string;
+  /** Position of the banner */
+  position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+  /** Delay before showing the banner (ms) */
+  showDelay?: number;
+  /** Whether the banner can be dismissed */
+  dismissible?: boolean;
+  /** Custom message text */
+  message?: string;
+  /** Custom button text */
+  buttonText?: string;
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Floating banner for business owners to claim their site.
+ */
+export function FloatingClaimBanner({
+  contactEmail = 'andrew@whotookmy.com',
+  siteUrl,
+  businessName,
+  position = 'bottom-right',
+  showDelay = 3000,
+  dismissible = true,
+  message = 'Is this your business?',
+  buttonText = 'Claim This Site',
+  className = '',
+}: FloatingClaimBannerProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    // Check if already dismissed in this session
+    const dismissed = sessionStorage.getItem('claimBannerDismissed');
+    if (dismissed) {
+      setIsDismissed(true);
+      return;
+    }
+
+    // Show banner after delay
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, showDelay);
+
+    return () => clearTimeout(timer);
+  }, [showDelay]);
+
+  const handleDismiss = () => {
+    setIsVisible(false);
+    setIsDismissed(true);
+    sessionStorage.setItem('claimBannerDismissed', 'true');
+  };
+
+  const handleClaim = () => {
+    const url = siteUrl || (typeof window !== 'undefined' ? window.location.hostname : 'unknown');
+    const subject = encodeURIComponent(`Claim my site - ${url}`);
+    const body = encodeURIComponent(
+      `Hi,\n\nI am the owner of ${businessName || 'this business'} and I would like to claim my website at ${url}.\n\nPlease contact me to discuss.\n\nThank you!`
+    );
+    window.location.href = `mailto:${contactEmail}?subject=${subject}&body=${body}`;
+  };
+
+  if (isDismissed || !isVisible) {
+    return null;
+  }
+
+  const positionClasses = {
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  };
+
+  return (
+    <div
+      className={`
+        fixed z-50 ${positionClasses[position]}
+        animate-slide-up
+        ${className}
+      `}
+      style={{
+        animation: 'slideUp 0.5s ease-out',
+      }}
+    >
+      <div className="bg-white rounded-lg shadow-2xl border border-gray-200 p-4 max-w-sm">
+        <div className="flex items-start gap-3">
+          {/* Icon */}
+          <div className="flex-shrink-0 w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
+            <svg className="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-gray-900">{message}</p>
+            <p className="text-xs text-gray-500 mt-1">
+              We built this site for you. Claim it today!
+            </p>
+            <button
+              onClick={handleClaim}
+              className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              {buttonText}
+            </button>
+          </div>
+
+          {/* Dismiss button */}
+          {dismissible && (
+            <button
+              onClick={handleDismiss}
+              className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
+              aria-label="Dismiss"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Animation keyframes */}
+      <style jsx>{`
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default FloatingClaimBanner;