@aws505/sheetsite 1.0.2 → 1.0.4

package/src/components/ui/AnimatedSection.tsx

@@ -0,0 +1,136 @@
+/**
+ * Animated Section Component
+ *
+ * A wrapper component that adds scroll-triggered animations to its children.
+ */
+
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface AnimatedSectionProps {
+  children: React.ReactNode;
+  animation?: 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'zoom' | 'none';
+  delay?: number;
+  duration?: number;
+  threshold?: number;
+  once?: boolean;
+  className?: string;
+  as?: React.ElementType;
+}
+
+/**
+ * Animated section wrapper with scroll-triggered animations.
+ */
+export function AnimatedSection({
+  children,
+  animation = 'fade-up',
+  delay = 0,
+  duration = 600,
+  threshold = 0.1,
+  once = true,
+  className = '',
+  as: Component = 'div',
+}: AnimatedSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          if (once && ref.current) {
+            observer.unobserve(ref.current);
+          }
+        } else if (!once) {
+          setIsVisible(false);
+        }
+      },
+      { threshold }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [threshold, once]);
+
+  const getAnimationStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      transition: `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`,
+      transitionDelay: `${delay}ms`,
+    };
+
+    if (!isVisible) {
+      switch (animation) {
+        case 'fade-up':
+          return { ...baseStyles, opacity: 0, transform: 'translateY(30px)' };
+        case 'fade-down':
+          return { ...baseStyles, opacity: 0, transform: 'translateY(-30px)' };
+        case 'fade-left':
+          return { ...baseStyles, opacity: 0, transform: 'translateX(30px)' };
+        case 'fade-right':
+          return { ...baseStyles, opacity: 0, transform: 'translateX(-30px)' };
+        case 'zoom':
+          return { ...baseStyles, opacity: 0, transform: 'scale(0.95)' };
+        case 'none':
+          return {};
+        default:
+          return { ...baseStyles, opacity: 0, transform: 'translateY(30px)' };
+      }
+    }
+
+    return { ...baseStyles, opacity: 1, transform: 'translateY(0) translateX(0) scale(1)' };
+  };
+
+  if (animation === 'none') {
+    return <Component className={className}>{children}</Component>;
+  }
+
+  return (
+    <Component ref={ref} style={getAnimationStyles()} className={className}>
+      {children}
+    </Component>
+  );
+}
+
+/**
+ * Stagger animation container - animates children with increasing delays.
+ */
+export interface StaggerContainerProps {
+  children: React.ReactNode;
+  staggerDelay?: number;
+  animation?: AnimatedSectionProps['animation'];
+  duration?: number;
+  className?: string;
+}
+
+export function StaggerContainer({
+  children,
+  staggerDelay = 100,
+  animation = 'fade-up',
+  duration = 600,
+  className = '',
+}: StaggerContainerProps) {
+  return (
+    <div className={className}>
+      {React.Children.map(children, (child, index) => (
+        <AnimatedSection
+          animation={animation}
+          delay={index * staggerDelay}
+          duration={duration}
+        >
+          {child}
+        </AnimatedSection>
+      ))}
+    </div>
+  );
+}
+
+export default AnimatedSection;

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;