-
-
-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
- {
+ setServicesCompleted(completed);
+ };
+
+ return (
+
+ {/* Enhanced background with parallax elements */}
+
+ );
+}
+
+export default EnhancedHero;
diff --git a/src/components/EnhancedProcess.tsx b/src/components/EnhancedProcess.tsx
new file mode 100644
index 0000000..3ede2c0
--- /dev/null
+++ b/src/components/EnhancedProcess.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef } from "react";
+import { CheckCircle, Calendar, Truck, Sparkles } from "lucide-react";
+
+interface ProcessStep {
+ id: number;
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ color: string;
+ bgColor: string;
+}
+
+const processSteps: ProcessStep[] = [
+ {
+ id: 1,
+ title: "Get a Quote",
+ description: "Fill out our discovery form to get a personalized estimate tailored to your specific project needs.",
+ icon:
+
+ );
+}
diff --git a/src/components/EnhancedScrollingServices.tsx b/src/components/EnhancedScrollingServices.tsx
new file mode 100644
index 0000000..461467f
--- /dev/null
+++ b/src/components/EnhancedScrollingServices.tsx
@@ -0,0 +1,375 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useScroll, useTransform, useMotionTemplate, AnimatePresence } from "framer-motion";
+import { Card } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
+import {
+ Paintbrush,
+ Hammer,
+ Ruler,
+ PanelsTopLeft,
+ ArrowDown,
+ Sparkles,
+} from "lucide-react";
+
+/**
+ * EnhancedScrollingServices
+ * - Shows a heading, then a center-locked card that changes contents as you scroll.
+ * - After the sequence completes, the card is released and page continues normally.
+ * - Enhanced with smooth morphing transitions, contextual backgrounds, and better UX.
+ */
+
+export default function EnhancedScrollingServices() {
+ const containerRef = useRef(null);
+ const [index, setIndex] = useState(0);
+ const [chipIndex, setChipIndex] = useState(0);
+ const CHIP_LABELS = ["EXPERT", "CRAFTSMANSHIP", "QUALITY", "TRUSTED", "LOCAL"] as const;
+
+ // Set the scroll tracking across the whole container section
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end end"],
+ });
+
+ // Enhanced card entrance/exit transforms with smooth transitions
+ const opacity = useTransform(scrollYProgress, [0, 0.05, 0.95, 1], [0, 1, 1, 0]);
+ const scale = useTransform(scrollYProgress, [0, 0.08, 0.92, 1], [0.95, 1, 1, 0.95]);
+ const y = useTransform(scrollYProgress, [0, 0.12, 0.88, 1], [200, 0, 0, -200]);
+ const overlayOpacity = useTransform(scrollYProgress, [0, 0.06, 0.94, 1], [0, 0.9, 0.9, 0]);
+
+ // Enhanced rotating border with gradient
+ const borderAngle = useTransform(scrollYProgress, [0, 1], [0, 360]);
+ const borderGradient = useMotionTemplate`conic-gradient(from ${borderAngle}deg, rgba(95,116,70,0.7) 0deg, rgba(184,176,165,0.6) 150deg, rgba(95,116,70,0.7) 360deg)`;
+
+ // Contextual background colors for each service
+ const backgroundGradients = {
+ 0: "from-olive-900 via-taupe-800 to-olive-950", // Painting
+ 1: "from-taupe-900 via-olive-800 to-taupe-950", // Drywall
+ 2: "from-olive-950 via-taupe-900 to-olive-900", // Wood
+ 3: "from-taupe-950 via-olive-950 to-taupe-900", // Installations
+ };
+
+ // Determine which service section should be shown based on scroll progress
+ const SECTIONS = SERVICES.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * SECTIONS), SECTIONS - 1);
+ setIndex(next);
+ });
+ return () => unsub();
+ }, [scrollYProgress, SECTIONS]);
+
+ // Chip highlight progression across the whole section
+ const CHIPS = CHIP_LABELS.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * CHIPS), CHIPS - 1);
+ setChipIndex(next);
+ });
+ return () => unsub();
+ }, [scrollYProgress, CHIPS]);
+
+ const current = SERVICES[index];
+
+ // Smooth morphing transition variants
+ const contentVariants = {
+ enter: {
+ opacity: 0,
+ y: 30,
+ scale: 0.9,
+ transition: { duration: 0.4, ease: "easeOut" as const }
+ },
+ center: {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ transition: { duration: 0.4, ease: "easeOut" as const }
+ },
+ exit: {
+ opacity: 0,
+ y: -30,
+ scale: 0.9,
+ transition: { duration: 0.4, ease: "easeIn" as const }
+ }
+ };
+
+ // Decorative element variants
+ const decorativeVariants = {
+ hidden: { scale: 0, opacity: 0 },
+ visible: {
+ scale: 1,
+ opacity: 1,
+ transition: {
+ type: "spring" as const,
+ stiffness: 200,
+ damping: 15
+ }
+ }
+ };
+
+ return (
+
+ {/* Enhanced lead-in content */}
+
+ {/* Base dark gradient in site palette */}
+
+ {/* Subtle radial vignette for focus */}
+
+ {/* Soft diagonal wash in olive tint */}
+
+ {/* Animated particles */}
+ {[...Array(8)].map((_, i) => (
+
+
+ {/* Fixed centered card with enhanced styling */}
+ 0 ? 0 : 1 }}
+ className="fixed bottom-16 left-1/2 -translate-x-1/2 text-taupe-200/80 z-20"
+ >
+
+
+
+
+
+
+ {/* Spacer below to allow sequence to complete and then release */}
+
+
+ );
+}
+
+/**
+ * Enhanced Services content
+ * Each item controls its icon, gradient, and accent color with improved visual hierarchy.
+ */
+const SERVICES = [
+ {
+ id: 1,
+ title: "Interior & Exterior Painting",
+ description:
+ "Crisp lines and durable coatings for walls, trim, and siding. Proper prep and premium materials for lasting results that transform your space with professional craftsmanship.",
+ icon: (null);
+ const [index, setIndex] = useState(0);
+ const [chipIndex, setChipIndex] = useState(0);
+ const [isCompleted, setIsCompleted] = useState(false);
+ const CHIP_LABELS = ["EXPERT", "CRAFTSMANSHIP", "QUALITY", "TRUSTED", "LOCAL"] as const;
+
+ // Set the scroll tracking across the whole container section
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end end"],
+ });
+
+ // Enhanced card entrance/exit transforms with smooth transitions
+ const opacity = useTransform(scrollYProgress, [0, 0.05, 0.95, 1], [0, 1, 1, 0]);
+ const scale = useTransform(scrollYProgress, [0, 0.08, 0.92, 1], [0.95, 1, 1, 0.95]);
+ const y = useTransform(scrollYProgress, [0, 0.12, 0.88, 1], [200, 0, 0, -200]);
+ const overlayOpacity = useTransform(scrollYProgress, [0, 0.06, 0.94, 1], [0, 0.9, 0.9, 0]);
+
+ // Enhanced rotating border with gradient
+ const borderAngle = useTransform(scrollYProgress, [0, 1], [0, 360]);
+ const borderGradient = useMotionTemplate`conic-gradient(from ${borderAngle}deg, rgba(95,116,70,0.7) 0deg, rgba(184,176,165,0.6) 150deg, rgba(95,116,70,0.7) 360deg)`;
+
+ // Contextual background colors for each service
+ const backgroundGradients = {
+ 0: "from-olive-900 via-taupe-800 to-olive-950", // Painting
+ 1: "from-taupe-900 via-olive-800 to-taupe-950", // Drywall
+ 2: "from-olive-950 via-taupe-900 to-olive-900", // Wood
+ 3: "from-taupe-950 via-olive-950 to-taupe-900", // Installations
+ };
+
+ // Determine which service section should be shown based on scroll progress
+ const SECTIONS = SERVICES.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * SECTIONS), SECTIONS - 1);
+ setIndex(next);
+
+ // Trigger completion callback when nearly complete
+ if (latest >= 0.9 && !isCompleted) {
+ setIsCompleted(true);
+ onComplete?.(true);
+ } else if (latest <= 0.1 && isCompleted) {
+ setIsCompleted(false);
+ onComplete?.(false);
+ }
+ });
+ return () => unsub();
+ }, [scrollYProgress, SECTIONS, isCompleted, onComplete]);
+
+ // Chip highlight progression across the whole section
+ const CHIPS = CHIP_LABELS.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * CHIPS), CHIPS - 1);
+ setChipIndex(next);
+ });
+ return () => unsub();
+ }, [scrollYProgress, CHIPS]);
+
+ const current = SERVICES[index];
+
+ // Smooth morphing transition variants
+ const contentVariants = {
+ enter: {
+ opacity: 0,
+ y: 30,
+ scale: 0.9,
+ transition: { duration: 0.4, ease: "easeOut" as const }
+ },
+ center: {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ transition: { duration: 0.4, ease: "easeOut" as const }
+ },
+ exit: {
+ opacity: 0,
+ y: -30,
+ scale: 0.9,
+ transition: { duration: 0.4, ease: "easeIn" as const }
+ }
+ };
+
+ // Decorative element variants
+ const decorativeVariants = {
+ hidden: { scale: 0, opacity: 0 },
+ visible: {
+ scale: 1,
+ opacity: 1,
+ transition: {
+ type: "spring" as const,
+ stiffness: 200,
+ damping: 15
+ }
+ }
+ };
+
+ return (
+
+ {/* Enhanced lead-in content with smooth entrance */}
+
+ {/* Base dark gradient in site palette */}
+
+ {/* Subtle radial vignette for focus */}
+
+ {/* Soft diagonal wash in olive tint */}
+
+ {/* Animated particles */}
+ {[...Array(8)].map((_, i) => (
+
+
+ {/* Fixed centered card with enhanced styling */}
+ 0 ? 0 : 1 }}
+ className="fixed bottom-16 left-1/2 -translate-x-1/2 text-taupe-200/80 z-20"
+ >
+
+
+
+
+
+
+ {/* Spacer below to allow sequence to complete and then release */}
+
+
+ );
+}
+
+/**
+ * Enhanced Services content
+ * Each item controls its icon, gradient, and accent color with improved visual hierarchy.
+ */
+const SERVICES = [
+ {
+ id: 1,
+ title: "Interior & Exterior Painting",
+ description:
+ "Crisp lines and durable coatings for walls, trim, and siding. Proper prep and premium materials for lasting results that transform your space with professional craftsmanship.",
+ icon: (null);
+ const [index, setIndex] = useState(0);
+ const [isCompleted, setIsCompleted] = useState(false);
+
+ // Check for reduced motion preference
+ const prefersReducedMotion = typeof window !== 'undefined'
+ ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+ : false;
+
+ // Set the scroll tracking across the whole container section
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end end"],
+ });
+
+ // Gentle card transforms - much slower and smoother
+ const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
+ const scale = useTransform(scrollYProgress, [0, 0.15, 0.85, 1], [0.98, 1, 1, 0.98]);
+ const y = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [100, 0, 0, -100]);
+ const overlayOpacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 0.7, 0.7, 0]);
+
+ // Gentle rotating border - much slower
+ const borderAngle = useTransform(scrollYProgress, [0, 1], [0, 180]);
+ const borderGradient = useSpring(
+ useMotionTemplate`conic-gradient(from ${borderAngle}deg, rgba(95,116,70,0.4) 0deg, rgba(184,176,165,0.3) 150deg, rgba(95,116,70,0.4) 360deg)`,
+ { stiffness: 20, damping: 15 }
+ );
+
+ // Contextual background colors for each service
+ const backgroundGradients = {
+ 0: "from-olive-900 via-taupe-800 to-olive-950", // Painting
+ 1: "from-taupe-900 via-olive-800 to-taupe-950", // Drywall
+ 2: "from-olive-950 via-taupe-900 to-olive-900", // Wood
+ 3: "from-taupe-950 via-olive-950 to-taupe-900", // Installations
+ };
+
+ // Determine which service section should be shown based on scroll progress
+ const SECTIONS = SERVICES.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * SECTIONS), SECTIONS - 1);
+ setIndex(next);
+
+ // Trigger completion callback when nearly complete
+ if (latest >= 0.85 && !isCompleted) {
+ setIsCompleted(true);
+ onComplete?.(true);
+ } else if (latest <= 0.15 && isCompleted) {
+ setIsCompleted(false);
+ onComplete?.(false);
+ }
+ });
+ return () => unsub();
+ }, [scrollYProgress, SECTIONS, isCompleted, onComplete]);
+
+ const current = SERVICES[index];
+
+ // Clickable pagination: scroll to section index
+ const handleDotClick = (i: number) => {
+ const el = containerRef.current;
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+ const start = window.scrollY + rect.top;
+ const end = start + el.offsetHeight - window.innerHeight;
+ const denom = Math.max(1, SECTIONS - 1);
+ const targetY = start + (i / denom) * (end - start);
+ window.scrollTo({ top: targetY, behavior: "smooth" });
+ };
+
+ // Gentle content transition variants
+ const contentVariants = {
+ enter: {
+ opacity: 0,
+ y: 20,
+ transition: {
+ duration: prefersReducedMotion ? 0.1 : 0.6,
+ ease: "easeOut" as const
+ }
+ },
+ center: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: prefersReducedMotion ? 0.1 : 0.6,
+ ease: "easeOut" as const
+ }
+ },
+ exit: {
+ opacity: 0,
+ y: -20,
+ transition: {
+ duration: prefersReducedMotion ? 0.1 : 0.6,
+ ease: "easeIn" as const
+ }
+ }
+ };
+
+ // Gentle decorative element variants
+ const decorativeVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ duration: prefersReducedMotion ? 0.1 : 0.8,
+ ease: "easeOut" as const
+ }
+ }
+ };
+
+ return (
+
+ {/* Gentle lead-in content */}
+ {showLeadIn && (
+
+
+
+
+
+ {/* Fixed centered card with gentle styling */}
+ 0 ? 0 : 1 }}
+ className="fixed bottom-12 left-1/2 -translate-x-1/2 text-taupe-200/70 z-20"
+ >
+
+
+
+
+ {/* Gentle spacer below */}
+
+
+ );
+}
+
+/**
+ * Gentle Services content
+ * Simplified and calming content
+ */
+const SERVICES = [
+ {
+ id: 1,
+ title: "Interior & Exterior Painting",
+ description:
+ "Professional painting services with attention to detail and quality materials for lasting beauty.",
+ icon:
+
+ );
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..4fc99c5
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import Link from "next/link";
+import { motion, Variants } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+
+// Small utility to sequence children animations
+const container: Variants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: { staggerChildren: 0.08, delayChildren: 0.15 },
+ },
+};
+
+const item: Variants = {
+ hidden: { opacity: 0, y: 16, filter: "blur(6px)" },
+ visible: {
+ opacity: 1,
+ y: 0,
+ filter: "blur(0px)",
+ transition: { type: "spring", bounce: 0.25, duration: 0.9 },
+ },
+};
+
+export function Hero() {
+ return (
+
+ {/* Subtle vignette + radial accents */}
+
+ );
+}
+
+export default Hero;
diff --git a/src/components/MobileCTA.tsx b/src/components/MobileCTA.tsx
new file mode 100644
index 0000000..f618208
--- /dev/null
+++ b/src/components/MobileCTA.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/Button";
+
+export function MobileCTA() {
+ return (
+ (null);
+ const [index, setIndex] = useState(0);
+ const [chipIndex, setChipIndex] = useState(0);
+ const CHIP_LABELS = ["A","LAUNCH","B","C","D"] as const;
+
+ // Set the scroll tracking across the whole container section
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end end"],
+ });
+
+ // Card entrance/exit transforms
+ // Make the card visibly scroll into frame from the bottom, pin, then scroll out the top.
+ const opacity = useTransform(scrollYProgress, [0, 0.07, 0.93, 1], [0, 1, 1, 0]);
+ const scale = useTransform(scrollYProgress, [0, 0.12, 0.88, 1], [0.98, 1, 1, 0.98]);
+ const y = useTransform(scrollYProgress, [0, 0.15, 0.85, 1], [320, 0, 0, -320]);
+ const overlayOpacity = useTransform(scrollYProgress, [0, 0.08, 0.92, 1], [0, 0.85, 0.85, 0]);
+ // Rotating border angle tied to scroll progress
+ const borderAngle = useTransform(scrollYProgress, [0, 1], [0, 360]);
+ const borderGradient = useMotionTemplate`conic-gradient(from ${borderAngle}deg, rgba(95,116,70,0.6) 0deg, rgba(184,176,165,0.5) 150deg, rgba(95,116,70,0.6) 360deg)`;
+
+ // Determine which service section should be shown based on scroll progress
+ const SECTIONS = SERVICES.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * SECTIONS), SECTIONS - 1);
+ setIndex(next);
+ });
+ return () => unsub();
+ }, [scrollYProgress, SECTIONS]);
+
+ // Chip highlight progression across the whole section
+ const CHIPS = CHIP_LABELS.length;
+ useEffect(() => {
+ const unsub = scrollYProgress.on("change", (latest) => {
+ const next = Math.min(Math.floor(latest * CHIPS), CHIPS - 1);
+ setChipIndex(next);
+ });
+ return () => unsub();
+ }, [scrollYProgress, CHIPS]);
+
+ const current = SERVICES[index];
+
+ return (
+
+ {/* Lead-in content to satisfy: begins with a header then card takes center */}
+
+ {/* Base dark gradient in site palette */}
+
+ {/* Subtle radial vignette for focus */}
+
+ {/* Soft diagonal wash in olive tint */}
+
+
+ {/* Fixed centered card. pointer-events allowed on children */}
+ 0 ? 0 : 1 }}
+ className="fixed bottom-16 left-1/2 -translate-x-1/2 text-taupe-700/80 z-20"
+ >
+
+
+ {/* Spacer below to allow sequence to complete and then release */}
+
+
+ );
+}
+
+/**
+ * Services content
+ * Each item controls its icon, gradient, and accent color.
+ */
+const SERVICES = [
+ {
+ id: 1,
+ title: "Interior & Exterior Painting",
+ description:
+ "Crisp lines and durable coatings for walls, trim, and siding. Proper prep and premium materials for lasting results.",
+ icon: (null);
+ const [scrollProgress, setScrollProgress] = useState(0);
+
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start end", "end start"],
+ });
+
+ // Smooth spring animation for the transition
+ const smoothProgress = useSpring(scrollYProgress, {
+ stiffness: 100,
+ damping: 30,
+ });
+
+ // Create a smooth fade and scale transition
+ const opacity = useTransform(smoothProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);
+ const scale = useTransform(smoothProgress, [0, 0.2, 0.8, 1], [0.95, 1, 1, 0.95]);
+ const y = useTransform(smoothProgress, [0, 0.2, 0.8, 1], [50, 0, 0, -50]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Hook to detect when scrolling services section is complete
+export function useScrollServicesComplete() {
+ const [isComplete, setIsComplete] = useState(false);
+ const containerRef = useRef(null);
+
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end end"],
+ });
+
+ useEffect(() => {
+ const unsubscribe = scrollYProgress.on("change", (latest) => {
+ if (latest >= 0.95) {
+ setIsComplete(true);
+ } else if (latest <= 0.05) {
+ setIsComplete(false);
+ }
+ });
+
+ return () => unsubscribe();
+ }, [scrollYProgress]);
+
+ return { isComplete, containerRef };
+}
+
+// Component to create a visual bridge between sections
+export function VisualBridge() {
+ return (
+
+ {/* Decorative background to compliment site's soft neutral theme */}
+
+
+
+ );
+}
diff --git a/src/components/SiteNav.tsx b/src/components/SiteNav.tsx
new file mode 100644
index 0000000..f987928
--- /dev/null
+++ b/src/components/SiteNav.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+ { href: "/services", label: "Services" },
+ { href: "/gallery", label: "Gallery" },
+ { href: "/areas", label: "Service Areas" },
+ { href: "/about", label: "About" },
+];
+
+export default function SiteNav() {
+ const [open, setOpen] = useState(false);
+ // atTop === true when near the top of the page
+ const [atTop, setAtTop] = useState(true);
+
+ useEffect(() => {
+ const onScroll = () => setAtTop(window.scrollY <= 12);
+ onScroll();
+ window.addEventListener("scroll", onScroll, { passive: true });
+ return () => window.removeEventListener("scroll", onScroll);
+ }, []);
+
+ // Higher-contrast nav link colors for readability
+ const linkClass = atTop
+ ? "text-taupe-900 hover:text-taupe-950 transition-colors"
+ : "text-white hover:text-white/90 transition-colors";
+
+ return (
+
+ {/* top contact bar */}
+
+ );
+}
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
new file mode 100644
index 0000000..cec5dfe
--- /dev/null
+++ b/src/components/Testimonials.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { Star } from "lucide-react";
+
+type Testimonial = {
+ name: string;
+ location: string;
+ quote: string;
+ rating?: number;
+};
+
+const testimonials: Testimonial[] = [
+ {
+ name: "Megan R.",
+ location: "Colorado Springs",
+ quote:
+ "Flawless lines and cleanup. They finished ahead of schedule and helped us pick colors that look great in every light.",
+ rating: 5,
+ },
+ {
+ name: "Daniel P.",
+ location: "Monument",
+ quote:
+ "Patched drywall and repainted our living room after a water leak. You'd never know there was damage. Highly recommend.",
+ rating: 5,
+ },
+ {
+ name: "Lauren T.",
+ location: "Woodland Park",
+ quote:
+ "Friendly, punctual, and meticulous. The exterior paint has totally refreshed our home. We'll be calling again.",
+ rating: 5,
+ },
+];
+
+function Stars({ count = 5 }: { count?: number }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/TrustBar.tsx b/src/components/TrustBar.tsx
new file mode 100644
index 0000000..a253def
--- /dev/null
+++ b/src/components/TrustBar.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ShieldCheck, Star, BadgeCheck, MapPin } from "lucide-react";
+
+export default function TrustBar() {
+ const items = [
+ {
+ icon: ShieldCheck,
+ title: "Licensed & Insured",
+ desc: "Professional, insured workmanship",
+ },
+ {
+ icon: Star,
+ title: "5‑Star Reviews",
+ desc: "Homeowners trust our quality",
+ },
+ {
+ icon: BadgeCheck,
+ title: "Warranty",
+ desc: "Workmanship covered for peace of mind",
+ },
+ {
+ icon: MapPin,
+ title: "Local Experts",
+ desc: "Colorado Springs & surrounding areas",
+ },
+ ];
+
+ return (
+
+
+ );
+}
diff --git a/src/components/UnifiedNav.tsx b/src/components/UnifiedNav.tsx
new file mode 100644
index 0000000..58f7f42
--- /dev/null
+++ b/src/components/UnifiedNav.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Menu, X, Phone } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+ { href: "/services", label: "Services" },
+ { href: "/gallery", label: "Gallery" },
+ { href: "/areas", label: "Service Areas" },
+ { href: "/about", label: "About" },
+];
+
+export default function UnifiedNav() {
+ const [open, setOpen] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
+ const pathname = usePathname();
+
+ useEffect(() => {
+ const handleScroll = () => setScrolled(window.scrollY > 12);
+ handleScroll();
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ // Minimal, light background that slightly solidifies on scroll
+ const navVariants = {
+ top: {
+ backgroundColor: "rgba(255,255,255,0.7)",
+ backdropFilter: "blur(8px)",
+ boxShadow: "0 1px 0 rgba(0,0,0,0.06)",
+ },
+ scrolled: {
+ backgroundColor: "rgba(255,255,255,0.96)",
+ backdropFilter: "blur(10px)",
+ boxShadow: "0 6px 20px rgba(0,0,0,0.08)",
+ },
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..1f28729
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type BadgeVariant = "default" | "secondary" | "outline";
+
+export interface BadgeProps extends React.HTMLAttributes {
+ variant?: BadgeVariant;
+}
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+ const base =
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors";
+ const variants: Record = {
+ default:
+ "bg-olive-700 text-white border-olive-700",
+ secondary:
+ "bg-taupe-100 text-taupe-900 border-taupe-200",
+ outline:
+ "border-taupe-300 text-taupe-800",
+ };
+
+ return ;
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..fac1b6e
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes {
+ variant?: "primary" | "secondary" | "outline";
+ children: React.ReactNode;
+}
+
+export function Button({
+ variant = "primary",
+ children,
+ className = "",
+ ...props
+}: ButtonProps) {
+ const baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none px-4 py-2 ring-offset-white";
+
+ const variantClasses = {
+ primary: "bg-olive-600 text-white hover:bg-olive-700 focus-visible:ring-olive-600",
+ secondary: "bg-taupe-100 text-taupe-900 hover:bg-taupe-200 focus-visible:ring-taupe-200",
+ outline: "border border-taupe-300 bg-transparent text-taupe-800 hover:bg-taupe-50 focus-visible:ring-taupe-300"
+ };
+
+ const classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+ return (
+
+ );
+}
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..afc7ecf
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ );
+}
+
+export function CardHeader({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return ;
+}
+
+export function CardContent({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return ;
+}
+
+export function CardFooter({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return ;
+}
diff --git a/src/components/ui/about-us-section.tsx b/src/components/ui/about-us-section.tsx
new file mode 100644
index 0000000..6e96e31
--- /dev/null
+++ b/src/components/ui/about-us-section.tsx
@@ -0,0 +1,473 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect, useRef } from "react"
+import {
+ Pen,
+ PaintBucket,
+ Home,
+ Ruler,
+ PenTool,
+ Building2,
+ Award,
+ Users,
+ Calendar,
+ CheckCircle,
+ Sparkles,
+ Star,
+ ArrowRight,
+ Zap,
+ TrendingUp,
+} from "lucide-react"
+import { motion, useScroll, useTransform, useInView, useSpring, type Variants } from "framer-motion"
+
+export default function AboutUsSection() {
+ const [isVisible, setIsVisible] = useState(false)
+ const sectionRef = useRef(null)
+ const statsRef = useRef(null)
+ const isInView = useInView(sectionRef, { once: false, amount: 0.1 })
+ const isStatsInView = useInView(statsRef, { once: false, amount: 0.3 })
+
+ // Parallax effect for decorative elements
+ const { scrollYProgress } = useScroll({
+ target: sectionRef,
+ offset: ["start end", "end start"],
+ })
+
+ const y1 = useTransform(scrollYProgress, [0, 1], [0, -50])
+ const y2 = useTransform(scrollYProgress, [0, 1], [0, 50])
+ const rotate1 = useTransform(scrollYProgress, [0, 1], [0, 20])
+ const rotate2 = useTransform(scrollYProgress, [0, 1], [0, -20])
+
+ useEffect(() => {
+ setIsVisible(true)
+ }, [])
+
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.2,
+ delayChildren: 0.3,
+ },
+ },
+ }
+
+ const itemVariants: Variants = {
+ hidden: { y: 20, opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1,
+ transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
+ },
+ }
+
+ const services = [
+ {
+ icon:
+ {/* Decorative background elements */}
+
+
+
+
+
+
+
+ We're a small, detail-focused team serving Colorado Springs with clean lines, durable finishes, and
+ reliable scheduling. From prep to final walkthrough, our process is built for quality and communication.
+
+
+
+ {stats.map((stat, index) => (
+
+
+ {/* CTA Section */}
+
+
+ Get Started
+
+
+
+ )
+}
+
+interface ServiceItemProps {
+ icon: React.ReactNode
+ secondaryIcon?: React.ReactNode
+ title: string
+ description: string
+ variants: Variants
+ delay: number
+ direction: "left" | "right"
+}
+
+function ServiceItem({ icon, secondaryIcon, title, description, variants, delay, direction }: ServiceItemProps) {
+ return (
+
+
+
+ {icon}
+ {secondaryIcon}
+
+
+
+ {description}
+
+
+
+ Learn more
+
+ )
+}
+
+interface StatCounterProps {
+ icon: React.ReactNode
+ value: number
+ label: string
+ suffix: string
+ delay: number
+}
+
+function StatCounter({ icon, value, label, suffix, delay }: StatCounterProps) {
+ const countRef = useRef(null)
+ const isInView = useInView(countRef, { once: false })
+ const [hasAnimated, setHasAnimated] = useState(false)
+
+ const springValue = useSpring(0, {
+ stiffness: 50,
+ damping: 10,
+ })
+
+ useEffect(() => {
+ if (isInView && !hasAnimated) {
+ springValue.set(value)
+ setHasAnimated(true)
+ } else if (!isInView && hasAnimated) {
+ springValue.set(0)
+ setHasAnimated(false)
+ }
+ }, [isInView, value, springValue, hasAnimated])
+
+ const displayValue = useTransform(springValue, (latest) => Math.floor(latest))
+
+ return (
+
+
+ {icon}
+
+
+ {displayValue}
+ {suffix}
+
+
+ )
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..1dc8233
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,60 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+ content: [
+ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ taupe: {
+ 50: '#f8f6f4',
+ 100: '#f0ede9',
+ 200: '#e1ddd7',
+ 300: '#d2cdc5',
+ 400: '#b8b0a5',
+ 500: '#9e968a',
+ 600: '#7a6c5d',
+ 700: '#6b5e51',
+ 800: '#5b4f43',
+ 900: '#4a3b2f',
+ 950: '#2d2218',
+ },
+ olive: {
+ 50: '#f4f7f1',
+ 100: '#e8f0e2',
+ 200: '#d1e1c5',
+ 300: '#b9d2a8',
+ 400: '#9fb98a',
+ 500: '#748e58',
+ 600: '#5f7446',
+ 700: '#4b5b38',
+ 800: '#37432a',
+ 900: '#242b1c',
+ 950: '#12160d',
+ },
+ brown: {
+ 50: '#faf8f6',
+ 100: '#f4f0ec',
+ 200: '#e8e0d7',
+ 300: '#d9cfc4',
+ 400: '#bda08d',
+ 500: '#9e7a64',
+ 600: '#7a5e4d',
+ 700: '#5b4636',
+ 800: '#4a372a',
+ 900: '#382a1f',
+ 950: '#261d15',
+ }
+ },
+ fontFamily: {
+ sans: ['var(--font-geist-sans)', 'sans-serif'],
+ mono: ['var(--font-geist-mono)', 'monospace']
+ }
+ },
+ },
+ plugins: [],
+};
+export default config;
+ {/* Enhanced Hero Section */}
+
+
+
+ {/* Visual Bridge - Smooth transition between sections */}
+
+
+ {servicesCompleted && (
+
+
+ )}
+
+
+
+ {/* Testimonials */}
+
+
+ {servicesCompleted && (
+
+
+ )}
+
+
+
+ {/* Service Areas with Delayed Entrance */}
+
+
+ {servicesCompleted && (
+
+
+
+
+ )}
+
+
);
}
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
new file mode 100644
index 0000000..fc5e799
--- /dev/null
+++ b/src/app/privacy/page.tsx
@@ -0,0 +1,91 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+ title: "Privacy Policy | Summit Painting & Handyman",
+ description: "How we collect, use, and protect your personal information.",
+ robots: { index: true, follow: true },
+};
+
+export default function PrivacyPage() {
+ return (
+
+
-
-
-
+
+
+
+
+ Service Areas
+
+
+
+
+ Serving the following communities in Colorado Springs and surrounding areas:
+
+
+
+ {[
+ "Colorado Springs",
+ "Monument",
+ "Black Forest",
+ "Woodland Park",
+ "Guffey",
+ "Lake George",
+ ].map((city, index) => (
+
+ {city}
+
+ ))}
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Content */}
+
+
+
+ );
+}
diff --git a/src/app/quote/page.tsx b/src/app/quote/page.tsx
new file mode 100644
index 0000000..1fdc6fe
--- /dev/null
+++ b/src/app/quote/page.tsx
@@ -0,0 +1,157 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/Button";
+
+export default function QuotePage() {
+ return (
+
+
+ + Privacy Policy +
+
+
+
+
+ Last updated: September 7, 2025
+ + +Introduction
+This privacy policy explains how Summit Painting & Handyman Services collects, uses, and protects your personal information when you visit our website or use our services.
+ + +Information We Collect
+We may collect the following types of information:
+-
+
- Personal identification information (name, address, phone number, email address) +
- Service-related information (project details, preferences) +
- Technical information (browser type, IP address, device information) +
How We Use Your Information
+We use the collected information for:
+-
+
- Providing and improving our services +
- Communicating with you about your projects +
- Processing quotes and orders +
- Marketing and promotional purposes (with your consent) +
Information Sharing
+We do not sell, trade, or rent your personal identification information to others. We may share information with trusted third parties who assist us in operating our website, conducting our business, or serving our customers.
+ + +Data Security
+We implement a variety of security measures to maintain the safety of your personal information when you enter, submit, or access your personal information.
+ + +Your Rights
+You have the right to access, update, or delete your personal information. You may also withdraw your consent for marketing communications at any time.
+ + +Changes to This Policy
+We reserve the right to modify this privacy policy at any time. Changes will be posted on this page with an updated effective date.
+ + +Contact Us
+If you have any questions about this privacy policy, please contact us at:
+
+ Summit Painting & Handyman
+ Email: nicholai@biohazardvfx.com
+ Phone: (719) 660-4281
+
+ {/* Hero Section */}
+
+
+
+ {/* Form Steps */}
+
+
+
+ );
+}
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..af428f5
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,90 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/Button";
+
+export default function ServicesPage() {
+ const services = [
+ {
+ id: "painting",
+ title: "Painting",
+ description: "Professional residential painting services for both interior and exterior projects with premium materials.",
+ icon: "🎨"
+ },
+ {
+ id: "drywall",
+ title: "Drywall & Texture",
+ description: "Drywall repair, popcorn ceiling removal, and texture matching for a seamless finish.",
+ icon: "🧱"
+ },
+ {
+ id: "wood",
+ title: "Wood Repair & Replacement",
+ description: "Residential wood repair, replacement, and refinishing for decks, trim, and structural elements.",
+ icon: "🪵"
+ },
+ {
+ id: "installations",
+ title: "Installations",
+ description: "Trim installation, faucet replacement, electrical fixture replacement, and TV mounting.",
+ icon: "🔧"
+ },
+ {
+ id: "exterior",
+ title: "Exterior Care",
+ description: "Power washing of home exteriors and concrete, gutter cleaning, door installation, and deck repairs.",
+ icon: "🏠"
+ },
+ {
+ id: "more",
+ title: "More Services",
+ description: "Including landscaping, tree trimming, junk haul away, and basic auto maintenance.",
+ icon: "🛠️"
+ }
+ ];
+
+ return (
+
+
+ + Get a Free Quote +
++ Fill out our discovery form to get a personalized estimate for your project. +
+
+
+
+ {/* Progress Bar */}
+
+
+
+
+ {/* Step Content - Contact Info */}
+
+
+
+ {[1, 2, 3, 4, 5].map((step) => (
+
+
+
+ ))}
+
+ {step}
+
+
+ {step === 1 ? 'Contact' :
+ step === 2 ? 'Services' :
+ step === 3 ? 'Details' :
+ step === 4 ? 'Timing' :
+ 'Review'}
+
+
+
+
+ {/* Navigation Buttons */}
+ Contact Information
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Services List */}
+
+
+
+ {/* CTA Section */}
+
+
+
+ );
+}
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
new file mode 100644
index 0000000..671e854
--- /dev/null
+++ b/src/app/terms/page.tsx
@@ -0,0 +1,96 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+ title: "Terms of Service | Summit Painting & Handyman",
+ description: "Terms and conditions for using our website and services.",
+ robots: { index: true, follow: true },
+};
+
+export default function TermsPage() {
+ return (
+
+
+ + Our Services +
++ Comprehensive residential painting and handyman services tailored to your needs. +
+
+
+
+ {services.map((service) => (
+
+
+
+ ))}
+ {service.icon}
+ {service.title}
+{service.description}
+ + Learn more → + +
+
+ Ready to get started?
++ Contact us today for a free consultation and quote. +
+ +
+ {/* Hero Section */}
+
+
+
+ {/* Content */}
+
+
+
+ );
+}
diff --git a/src/components/EnhancedHero.tsx b/src/components/EnhancedHero.tsx
new file mode 100644
index 0000000..deef886
--- /dev/null
+++ b/src/components/EnhancedHero.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import Link from "next/link";
+import { motion, useMotionValue, useTransform, useSpring, Variants } from "framer-motion";
+import { ArrowRight, MousePointer } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { useEffect, useState } from "react";
+
+// Small utility to sequence children animations
+const container: Variants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: { staggerChildren: 0.08, delayChildren: 0.15 },
+ },
+};
+
+const item: Variants = {
+ hidden: { opacity: 0, y: 16, filter: "blur(6px)" },
+ visible: {
+ opacity: 1,
+ y: 0,
+ filter: "blur(0px)",
+ transition: { type: "spring", bounce: 0.25, duration: 0.9 },
+ },
+};
+
+export function EnhancedHero() {
+ const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+ const prefersReducedMotion =
+ typeof window !== "undefined"
+ ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ : false;
+
+ // Mouse tracking for parallax effects
+ const mouseX = useMotionValue(0);
+ const mouseY = useMotionValue(0);
+
+ // Smooth spring animations for parallax
+ const parallaxX = useSpring(useTransform(mouseX, [0, 1], [-30, 30]), {
+ stiffness: 50,
+ damping: 20
+ });
+ const parallaxY = useSpring(useTransform(mouseY, [0, 1], [-20, 20]), {
+ stiffness: 50,
+ damping: 20
+ });
+
+ // Typing animation state
+ const [displayText, setDisplayText] = useState("");
+ const fullText = "Transform Your Home with Expert Painting & Handyman Services";
+
+ useEffect(() => {
+ if (prefersReducedMotion) {
+ setDisplayText(fullText);
+ return;
+ }
+ let index = 0;
+ const interval = setInterval(() => {
+ if (index <= fullText.length) {
+ setDisplayText(fullText.slice(0, index));
+ index++;
+ } else {
+ clearInterval(interval);
+ }
+ }, 50);
+ return () => clearInterval(interval);
+ }, [prefersReducedMotion]);
+
+ // Mouse move handler
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (prefersReducedMotion) return;
+ const { clientX, clientY } = e;
+ const { innerWidth, innerHeight } = window;
+
+ mouseX.set(clientX / innerWidth);
+ mouseY.set(clientY / innerHeight);
+ };
+
+ // Particle animation variants
+ const particleVariants = {
+ animate: (i: number) => ({
+ y: [0, -20, 0],
+ opacity: [0.3, 0.8, 0.3],
+ transition: {
+ duration: 3 + i * 0.5,
+ repeat: Infinity,
+ ease: "easeInOut" as const,
+ delay: i * 0.2
+ }
+ })
+ };
+
+ // Magnetic button effect
+ const magneticButton = {
+ rest: { scale: 1 },
+ hover: {
+ scale: 1.05,
+ transition: { type: "spring" as const, stiffness: 400, damping: 30 }
+ },
+ tap: { scale: 0.95 }
+ };
+
+ return (
+
+
+ + Terms of Service +
+
+
+
+
+ Last updated: September 7, 2025
+ + + + +Introduction
++ Welcome to Summit Painting & Handyman Services. These terms and conditions outline the rules + and regulations for the use of our website and services. +
+ + +Intellectual Property Rights
++ Unless otherwise stated, Summit Painting & Handyman Services and/or its licensors own the + intellectual property rights for all material on our website. All intellectual property rights + are reserved. +
+ + +User Content
++ We do not claim ownership of any user-generated content submitted through our services. + By submitting content, you grant us a non-exclusive, royalty-free license to use, reproduce, + and display such content in connection with providing our services. +
+ + +Limitation of Liability
++ In no event shall Summit Painting & Handyman Services be liable for any indirect, + incidental, special, consequential or punitive damages, including without limitation, loss of + profits, data, use, goodwill, or other intangible losses. +
+ + +Changes to These Terms
++ We reserve the right to modify these terms at any time. Changes will be posted on this page + with an updated effective date. Continued use of the website following any changes constitutes + acceptance of the updated terms. +
+ + +Contact Us
+If you have any questions about these terms, please contact us at:
+
+ Summit Painting & Handyman
+ Email: nicholai@biohazardvfx.com
+ Phone: (719) 660-4281
+
+ For information on how we handle personal data, please see our{" "} + Privacy Policy. +
+
+ {/* Parallax background elements */}
+ v * -0.5), y: useTransform(parallaxY, v => v * -0.3) }}
+ className="absolute left-[10%] top-[-20%] h-[70rem] w-56 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,rgba(255,255,255,0.06)_0,rgba(255,255,255,0.02)_80%,transparent_100%)]"
+ />
+
+
+ {/* Floating particles */}
+ {(!prefersReducedMotion ? [...Array(6)] : []).map((_, i) => (
+
+
+
+
+
+
+ See how we can help
+ Our Services
+
+
+
+
+
+
+
+ {displayText}
+ {!prefersReducedMotion && (
+
+
+
+ Professional residential painting, drywall repair, wood restoration,
+ and small installs—clean lines, durable finishes, and reliable
+ scheduling throughout Colorado Springs.
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Scroll indicator with enhanced animation */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+
+
+ + Our Process +
++ A simple, transparent process from quote to completion +
+
+ {processSteps.slice(0, -1).map((_, i) => (
+
+
+
+ {processSteps.map((step, i) => (
+
+
+ ))}
+
+
+ {/* Bottom decoration */}
+
+ {/* Step number with animation */}
+
+ {step.id}
+
+
+ {/* Icon with animation */}
+
+ {step.icon}
+
+
+ {/* Title with hover effect */}
+
+ {step.title}
+
+
+ {/* Description */}
+
+ {step.description}
+
+
+ {/* Hover indicator */}
+
+
+
+ Ready to start your project?
+
+
+
+
+
+
+
+ {/* Spacer above to create distance before the card locks in */}
+
+
+ {/* Enhanced backdrop overlay */}
+ + Discover Our Craftsmanship +
++ Scroll to explore our core services. Each card reveals our dedication to quality. +
+
+
+
+
+
+
+
+
+
+ {/* Enhanced progress dots with animations */}
+
+ {/* Enhanced right-side visual with animated elements */}
+
+
+
+ {/* Enhanced decorative elements */}
+ {[...Array(5)].map((_, i) => (
+
+ {/* Fade the right visual smoothly into the left solid background */}
+
+
+
+ {/* Left column: chips, title, description with morphing animations */}
+
+ {/* Enhanced chip row with animations */}
+
+ {CHIP_LABELS.map((label, i) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ {/* Enhanced title with morphing animation */}
+
+
+ {current.title}
+
+
+
+ {/* Enhanced description with morphing animation */}
+
+
+ {current.description}
+
+
+
+ {/* Enhanced service icon with animation */}
+
+
+
+
+ {/* Spacer column keeps left content width; right side visual is a background layer */}
+
+
+ {current.icon}
+
+
+
+
+ {/* Enhanced scroll hint with particle effects */}
+
+ {SERVICES.map((_, i) => (
+
+
+
+
+
+
+ {/* Spacer above to create distance before the card locks in */}
+
+
+ {/* Enhanced backdrop overlay */}
+ + Discover Our Craftsmanship +
++ Scroll to explore our core services. Each card reveals our dedication to quality. +
+
+
+
+
+
+
+
+
+
+ {/* Enhanced progress dots with animations */}
+
+ {/* Enhanced right-side visual with animated elements */}
+
+
+
+ {/* Enhanced decorative elements */}
+ {[...Array(5)].map((_, i) => (
+
+ {/* Fade the right visual smoothly into the left solid background */}
+
+
+
+ {/* Left column: chips, title, description with morphing animations */}
+
+ {/* Enhanced chip row with animations */}
+
+ {CHIP_LABELS.map((label, i) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ {/* Enhanced title with morphing animation */}
+
+
+ {current.title}
+
+
+
+ {/* Enhanced description with morphing animation */}
+
+
+ {current.description}
+
+
+
+ {/* Enhanced service icon with animation */}
+
+
+
+
+ {/* Spacer column keeps left content width; right side visual is a background layer */}
+
+
+ {current.icon}
+
+
+
+
+ {/* Enhanced scroll hint with particle effects */}
+
+ {SERVICES.map((_, i) => (
+
+
+
+
+
+ )}
+
+ {/* Gentle spacer - reduced from 60vh to 40vh for better pacing */}
+
+
+ {/* Gentle backdrop overlay - much lower opacity */}
+ + Our Craftsmanship +
++ Discover our core services with care and attention to detail +
+
+
+
+
+
+
+
+
+
+ {/* Gentle progress dots (clickable, accessible) */}
+
+ {/* Gentle right-side visual */}
+
+
+
+ {/* Gentle decorative elements - fewer and slower */}
+ {[...Array(3)].map((_, i) => (
+
+ {/* Gentle fade */}
+
+
+
+ {/* Left column: gentle content transitions */}
+
+ {/* Service title with gentle animation */}
+
+
+ {current.title}
+
+
+
+ {/* Service description with gentle animation */}
+
+
+ {current.description}
+
+
+
+ {/* Service icon with gentle animation */}
+
+
+
+
+ {/* Spacer column */}
+
+
+ {current.icon}
+
+
+
+
+ {/* Gentle completion indicator */}
+
+ {SERVICES.map((s, i) => {
+ const active = i === index;
+ return (
+ handleDotClick(i)}
+ className={`h-3 w-3 rounded-full ring-1 transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-olive-500 ${
+ active ? "bg-olive-500 ring-olive-400" : "bg-taupe-400/80 ring-taupe-400/60"
+ }`}
+ animate={{
+ scale: active ? 1.25 : 1,
+ opacity: active ? 1 : 0.8,
+ }}
+ transition={{ duration: 0.2 }}
+ />
+ );
+ })}
+
+
+ {/* Top contact bar */}
+
+
+
+
+ {/* Main header */}
+
+ Call Now: (719) 660-4281
+ •
+ Serving Colorado Springs, Monument, Black Forest, Woodland Park, Guffey, Lake George
+
+
+ Our Services
+
+
+
+ Summit Painting & Handyman
+
+
+ {/* Desktop Navigation */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ See how we can help
+ Our Services
+
+
+
+
+
+ Transform Your Home with Expert Painting & Handyman Services
+
+
+
+ Professional residential painting, drywall repair, wood restoration,
+ and small installs—clean lines, durable finishes, and reliable
+ scheduling throughout Colorado Springs.
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/ScrollingServices.tsx b/src/components/ScrollingServices.tsx
new file mode 100644
index 0000000..b205104
--- /dev/null
+++ b/src/components/ScrollingServices.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useScroll, useTransform, useMotionTemplate } from "framer-motion";
+import { Card } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
+import {
+ Paintbrush,
+ Hammer,
+ Ruler,
+ PanelsTopLeft,
+ ArrowDown,
+} from "lucide-react";
+
+/**
+ * ScrollingServices
+ * - Shows a heading, then a center-locked card that changes contents as you scroll.
+ * - After the sequence completes, the card is released and page continues normally.
+ */
+
+export default function ScrollingServices() {
+ const containerRef = useRef
+
+
+
+
+
+
+
+
+ {/* Spacer above to create distance before the card locks in */}
+
+
+ {/* Backdrop overlay that darkens while card is centered */}
+ + Scroll to explore our core services. The card will guide you through each offering. +
+
+
+
+
+
+
+
+
+
+ {/* Progress dots */}
+
+ {/* Right-side visual fills the card and fades into left background */}
+
+
+
+ {/* decorative dots */}
+
+
+
+
+
+ {/* subtle vignette */}
+
+
+ {/* fade the right visual smoothly into the left solid background */}
+
+
+ {/* Left column: chips, title, description (like the reference) */}
+
+ {/* Chip row */}
+
+ {CHIP_LABELS.map((label, i) => (
+
+ {label}
+
+ ))}
+
+
+ {/* Title */}
+
+ {current.title}
+
+
+ {/* Description */}
+
+ {current.description}
+
+
+
+ {/* Spacer column keeps left content width; right side visual is a background layer */}
+
+
+
+
+ {/* Scroll hint at the beginning */}
+
+ {SERVICES.map((_, i) => (
+
+
+ Scroll to explore
+
+
+
+
+
+ {/* Subtle wave pattern */}
+
+
+ {/* Floating elements */}
+ {[...Array(5)].map((_, i) => (
+
+
+ );
+}
diff --git a/src/components/ServiceAreasShowcase.tsx b/src/components/ServiceAreasShowcase.tsx
new file mode 100644
index 0000000..8193f93
--- /dev/null
+++ b/src/components/ServiceAreasShowcase.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { Variants } from "framer-motion";
+import { MapPin } from "lucide-react";
+import React from "react";
+
+type Area = {
+ name: string;
+ description: string;
+};
+
+type ServiceAreasShowcaseProps = {
+ areas: Area[];
+ title?: string;
+ subtitle?: string;
+};
+
+const container: Variants = {
+ hidden: {},
+ show: {
+ transition: {
+ staggerChildren: 0.08,
+ delayChildren: 0.05,
+ },
+ },
+};
+
+const item: Variants = {
+ hidden: { opacity: 0, y: 20, scale: 0.98 },
+ show: {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ transition: {
+ type: "spring" as const,
+ stiffness: 220,
+ damping: 22,
+ mass: 0.6,
+ },
+ },
+};
+
+const glow: Variants = {
+ rest: { opacity: 0, scale: 0.95 },
+ hover: {
+ opacity: 1,
+ scale: 1.02,
+ transition: { type: "spring" as const, stiffness: 200, damping: 18 },
+ },
+};
+
+export default function ServiceAreasShowcase({
+ areas,
+ title = "Communities We Serve",
+ subtitle = "Proudly serving Colorado Springs and surrounding areas",
+}: ServiceAreasShowcaseProps) {
+ return (
+
+
+ {areas.map((area, idx) => (
+
+ {/* glow/outline */}
+
+ ))}
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+ {/* Grid with staggered reveal and subtle hover lift */}
+
+
+
+
+
+ {/* subtle bottom accent that animates on hover */}
+
+
+
+
+ + {area.name} +
++ {area.description} +
+
+
+
+
+
+ {/* main nav */}
+
+
+
+
+ Call Now: (719) 660-4281
+ •
+
+ Serving Colorado Springs, Monument, Black Forest, Woodland Park,
+ Guffey, Lake George
+
+
+
+ Our Services
+
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ );
+}
+
+export default function TestimonialsSection() {
+ return (
+
+
+
+
+
+ + Homeowners Love Our Work +
++ Real feedback from local projects across Colorado Springs and surrounding areas. +
+-
+ {testimonials.map((t) => (
+
-
+
+
++ + “{t.quote}” +
+ +
+ ))}
+
+
+ -
+ {items.map(({ icon: Icon, title, desc }) => (
+
-
+ + ++
+ + ++{title}
+{desc}
+
+ ))}
+
About Us
+
+ {/* Left Column */}
+
+
+ {/* Stats Section */}
+
+ {services
+ .filter((service) => service.position === "left")
+ .map((service, index) => (
+
+
+ {/* Center Image */}
+
+
+
+ 
+
+
+ Our Portfolio
+
+
+
+
+
+ {/* Right Column */}
+
+
+ {services
+ .filter((service) => service.position === "right")
+ .map((service, index) => (
+
+
+
+ Ready to transform your space?
+Let's create something beautiful together.
++ {title} +
+{label}
+