8f:I[903690,["/chat-static/_next/static/immutable/chunks/2ybsaxpysrx3k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/35-nlmawxaj8p.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/30td236wdlcro.js","/chat-static/_next/static/immutable/chunks/3cqf4tcvie24-.js","/chat-static/_next/static/immutable/chunks/4576ad3_33w4k.js","/chat-static/_next/static/immutable/chunks/2eak4833ykpz9.js","/chat-static/_next/static/immutable/chunks/0v5lqi_k7y0zu.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/1burfdz76fpil.js","/chat-static/_next/static/immutable/chunks/0pzpn7ylks18s.js","/chat-static/_next/static/immutable/chunks/3a0yrl1-a81ma.js","/chat-static/_next/static/immutable/chunks/0s6bplb938zwb.js","/chat-static/_next/static/immutable/chunks/0jpmqrgtvb3hr.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1so2r5tg0qd8q.js","/chat-static/_next/static/immutable/chunks/0vovpmvjcw9bo.js","/chat-static/_next/static/immutable/chunks/20lcysynek2f5.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/0cgss2n3w0xlo.js","/chat-static/_next/static/immutable/chunks/1cf64xqtunwxy.js","/chat-static/_next/static/immutable/chunks/0sjop--fk06ib.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1ua550dvhuk35.js","/chat-static/_next/static/immutable/chunks/273rh4lha-1nk.js","/chat-static/_next/static/immutable/chunks/2_42kyq3qjsjr.js","/chat-static/_next/static/immutable/chunks/0gwwtocyms501.js","/chat-static/_next/static/immutable/chunks/2_2k2arawdxjd.js","/chat-static/_next/static/immutable/chunks/20893rxamxi2j.js","/chat-static/_next/static/immutable/chunks/10iu-hstx-rfs.js","/chat-static/_next/static/immutable/chunks/0vuoagmlp7na5.js","/chat-static/_next/static/immutable/chunks/3zac0wg636mqe.js","/chat-static/_next/static/immutable/chunks/3w3pc4is82tiy.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/2ybsaxpysrx3k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/35-nlmawxaj8p.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/30td236wdlcro.js","/chat-static/_next/static/immutable/chunks/3cqf4tcvie24-.js","/chat-static/_next/static/immutable/chunks/4576ad3_33w4k.js","/chat-static/_next/static/immutable/chunks/2eak4833ykpz9.js","/chat-static/_next/static/immutable/chunks/0v5lqi_k7y0zu.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/1burfdz76fpil.js","/chat-static/_next/static/immutable/chunks/0pzpn7ylks18s.js","/chat-static/_next/static/immutable/chunks/3a0yrl1-a81ma.js","/chat-static/_next/static/immutable/chunks/0s6bplb938zwb.js","/chat-static/_next/static/immutable/chunks/0jpmqrgtvb3hr.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1so2r5tg0qd8q.js","/chat-static/_next/static/immutable/chunks/0vovpmvjcw9bo.js","/chat-static/_next/static/immutable/chunks/20lcysynek2f5.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/0cgss2n3w0xlo.js","/chat-static/_next/static/immutable/chunks/1cf64xqtunwxy.js","/chat-static/_next/static/immutable/chunks/0sjop--fk06ib.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1ua550dvhuk35.js","/chat-static/_next/static/immutable/chunks/273rh4lha-1nk.js","/chat-static/_next/static/immutable/chunks/2_42kyq3qjsjr.js","/chat-static/_next/static/immutable/chunks/0gwwtocyms501.js","/chat-static/_next/static/immutable/chunks/2_2k2arawdxjd.js","/chat-static/_next/static/immutable/chunks/20893rxamxi2j.js","/chat-static/_next/static/immutable/chunks/10iu-hstx-rfs.js","/chat-static/_next/static/immutable/chunks/0vuoagmlp7na5.js","/chat-static/_next/static/immutable/chunks/3zac0wg636mqe.js","/chat-static/_next/static/immutable/chunks/3w3pc4is82tiy.js"],"SWRDataProvider"] 91:Tbd3c,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { HeroSection } from "@/components/hero-section" import { AboutSection } from "@/components/about-section" import { ServicesSection } from "@/components/services-section" import { WhyChooseSection } from "@/components/why-choose-section" import { GallerySection } from "@/components/gallery-section" import { ContactSection } from "@/components/contact-section" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/gallery-section.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import Image from "next/image" import { useScrollAnimation } from "@/hooks/use-scroll-animation" const projects = [ { title: "Deck Construction", before: "/old-worn-deck-before-renovation.jpg", after: "/beautiful-new-timber-deck-after-construction.jpg", }, { title: "Kitchen Renovation", before: "/outdated-kitchen-before-renovation.jpg", after: "/modern-renovated-kitchen-with-new-cabinets.jpg", }, { title: "Fence Repair", before: "/damaged-old-fence-before-repair.jpg", after: "/newly-repaired-wooden-fence.jpg", }, ] export function GallerySection() { const sectionRef = useRef(null) const { isVisible, scrollProgress } = useScrollAnimation(sectionRef, { threshold: 0.1 }) return (

Our Work

See the quality and craftsmanship in our completed projects

{projects.map((project, index) => { const isEven = index % 2 === 0 return (

{project.title}

Before

After

) })}

) } [V0_FILE]jpg:file="public/old-worn-deck-before-renovation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/old-worn-deck-before-renovation-u5aY8lmt1Z1npL9p2zP82BwjKRDLkH.jpg" isMerged="true" [V0_FILE]jpg:file="public/beautiful-new-timber-deck-after-construction.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/beautiful-new-timber-deck-after-construction-nUKelNBAjxUqfbDTwwM9Jjldbvb6da.jpg" isMerged="true" [V0_FILE]jpg:file="public/outdated-kitchen-before-renovation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/outdated-kitchen-before-renovation-jZx2hjO2c5tRiH4G4JD0DfXwKeuRfK.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-renovated-kitchen-with-new-cabinets.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-renovated-kitchen-with-new-cabinets-EtrCSAMFV5LpAZqaUWN7nEHZRUwe95.jpg" isMerged="true" [V0_FILE]jpg:file="public/damaged-old-fence-before-repair.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/damaged-old-fence-before-repair-1lpEgm3Pjiu2c4uYi5LuafLZuss0mU.jpg" isMerged="true" [V0_FILE]jpg:file="public/newly-repaired-wooden-fence.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/newly-repaired-wooden-fence-LHn2uewic74zIQmQXQnbdpmv5rlcC6.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "resend": "6.1.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="hooks/use-scroll-animation.ts" isMerged="true" "use client" import { useEffect, useState, type RefObject } from "react" interface ScrollAnimationOptions { threshold?: number rootMargin?: string } export function useScrollAnimation(ref: RefObject, options: ScrollAnimationOptions = {}) { const [isVisible, setIsVisible] = useState(false) const [scrollProgress, setScrollProgress] = useState(0) useEffect(() => { const element = ref.current if (!element) return const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: options.threshold || 0.1, rootMargin: options.rootMargin || "0px", }, ) observer.observe(element) const handleScroll = () => { if (!element) return const rect = element.getBoundingClientRect() const elementTop = rect.top const elementHeight = rect.height const windowHeight = window.innerHeight // Calculate progress from 0 to 1 as element moves through viewport const progress = Math.max(0, Math.min(1, (windowHeight - elementTop) / (windowHeight + elementHeight))) setScrollProgress(progress) } window.addEventListener("scroll", handleScroll, { passive: true }) handleScroll() // Initial calculation return () => { observer.disconnect() window.removeEventListener("scroll", handleScroll) } }, [ref, options.threshold, options.rootMargin]) return { isVisible, scrollProgress } } [V0_FILE]typescriptreact:file="hooks/use-parallax.ts" isMerged="true" "use client" import { useEffect, useState } from "react" export function useParallax(speed = 0.5) { const [offset, setOffset] = useState(0) useEffect(() => { const handleScroll = () => { setOffset(window.scrollY * speed) } window.addEventListener("scroll", handleScroll, { passive: true }) return () => window.removeEventListener("scroll", handleScroll) }, [speed]) return offset } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match St Tolo's brand - warm neutrals with teal and terracotta accents */ --background: oklch(0.98 0.005 85); --foreground: oklch(0.25 0.02 180); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 180); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 180); --primary: oklch(0.35 0.08 195); --primary-foreground: oklch(0.98 0.005 85); --secondary: oklch(0.65 0.12 45); --secondary-foreground: oklch(0.98 0.005 85); --muted: oklch(0.94 0.01 85); --muted-foreground: oklch(0.5 0.02 180); --accent: oklch(0.65 0.12 45); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.005 85); --border: oklch(0.88 0.01 85); --input: oklch(0.88 0.01 85); --ring: oklch(0.35 0.08 195); --chart-1: oklch(0.35 0.08 195); --chart-2: oklch(0.65 0.12 45); --chart-3: oklch(0.5 0.02 180); --chart-4: oklch(0.75 0.08 85); --chart-5: oklch(0.45 0.06 160); --radius: 0.5rem; --sidebar: oklch(0.98 0.005 85); --sidebar-foreground: oklch(0.25 0.02 180); --sidebar-primary: oklch(0.35 0.08 195); --sidebar-primary-foreground: oklch(0.98 0.005 85); --sidebar-accent: oklch(0.94 0.01 85); --sidebar-accent-foreground: oklch(0.25 0.02 180); --sidebar-border: oklch(0.88 0.01 85); --sidebar-ring: oklch(0.35 0.08 195); } .dark { --background: oklch(0.2 0.02 180); --foreground: oklch(0.98 0.005 85); --card: oklch(0.25 0.02 180); --card-foreground: oklch(0.98 0.005 85); --popover: oklch(0.25 0.02 180); --popover-foreground: oklch(0.98 0.005 85); --primary: oklch(0.45 0.1 195); --primary-foreground: oklch(0.98 0.005 85); --secondary: oklch(0.65 0.12 45); --secondary-foreground: oklch(0.98 0.005 85); --muted: oklch(0.3 0.02 180); --muted-foreground: oklch(0.7 0.02 85); --accent: oklch(0.65 0.12 45); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.98 0.005 85); --border: oklch(0.35 0.02 180); --input: oklch(0.35 0.02 180); --ring: oklch(0.45 0.1 195); --chart-1: oklch(0.45 0.1 195); --chart-2: oklch(0.65 0.12 45); --chart-3: oklch(0.7 0.02 85); --chart-4: oklch(0.55 0.08 85); --chart-5: oklch(0.6 0.08 160); --sidebar: oklch(0.25 0.02 180); --sidebar-foreground: oklch(0.98 0.005 85); --sidebar-primary: oklch(0.45 0.1 195); --sidebar-primary-foreground: oklch(0.98 0.005 85); --sidebar-accent: oklch(0.3 0.02 180); --sidebar-accent-foreground: oklch(0.98 0.005 85); --sidebar-border: oklch(0.35 0.02 180); --sidebar-ring: oklch(0.45 0.1 195); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; will-change: auto; /* Performance optimization for parallax animations */ } body { @apply bg-background text-foreground; overflow-x: hidden; /* Enhanced smooth scrolling and added performance optimizations for parallax */ } } /* Added smooth scroll behavior for parallax effects */ html { scroll-behavior: smooth; } /* Added wooden texture pattern */ .wood-texture { background-image: repeating-linear-gradient( 90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); } /* Added smooth transitions for all interactive elements */ @layer utilities { .transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/why-choose-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle2, Clock, Award } from "lucide-react" import { useRef } from "react" import { useScrollAnimation } from "@/hooks/use-scroll-animation" const reasons = [ { icon: Clock, title: "Reliable & On Time", description: "We respect your time and always arrive when scheduled", }, { icon: Award, title: "Quality Workmanship", description: "Attention to detail with a workmanship guarantee", }, { icon: CheckCircle2, title: "Fair Pricing", description: "Honest service with transparent, competitive rates", }, ] export function WhyChooseSection() { const sectionRef = useRef(null) const { isVisible, scrollProgress } = useScrollAnimation(sectionRef, { threshold: 0.2 }) return (

Why Choose St Tolo's

Local business committed to excellence and customer satisfaction

{reasons.map((reason, index) => { const Icon = reason.icon return (

{reason.title}

{reason.description}

) })}

) } [V0_FILE]typescriptreact:file="components/services-section.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Hammer, Wrench, PaintBucket, Home, Fence, Droplets, DoorOpen, TreePine } from "lucide-react" import { useRef } from "react" import { useScrollAnimation } from "@/hooks/use-scroll-animation" const services = [ { icon: Wrench, title: "General Property Maintenance", description: "Complete maintenance solutions for your property", }, { icon: Hammer, title: "Carpentry & Woodwork", description: "Expert carpentry and custom woodwork", }, { icon: TreePine, title: "Furniture & Cabinet Making", description: "Custom furniture and cabinetry solutions", }, { icon: Home, title: "Decks & Pergolas", description: "Beautiful outdoor living spaces", }, { icon: Droplets, title: "Basic Plumbing Repairs", description: "Quick and reliable plumbing fixes", }, { icon: PaintBucket, title: "Painting & Finishing", description: "Professional painting and finishing services", }, { icon: Fence, title: "Fence & Gate Repairs", description: "Secure and stylish fencing solutions", }, { icon: DoorOpen, title: "Installations", description: "Doors, shelves, fixtures, blinds and more", }, ] export function ServicesSection() { const sectionRef = useRef(null) const { isVisible, scrollProgress } = useScrollAnimation(sectionRef, { threshold: 0.1 }) return (

Our Services

Comprehensive property maintenance and carpentry services tailored to your needs

{services.map((service, index) => { const Icon = service.icon const row = Math.floor(index / 3) const col = index % 3 return (

{service.title}

{service.description}

) })}

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { useScrollAnimation } from "@/hooks/use-scroll-animation" export function AboutSection() { const sectionRef = useRef(null) const { isVisible, scrollProgress } = useScrollAnimation(sectionRef, { threshold: 0.2 }) const textOffset = (scrollProgress - 0.5) * 50 const statsOffset = (scrollProgress - 0.5) * -30 return (

About St Tolo's

St Tolo's takes care of all those jobs around your property — big or small. We offer dependable handyman and maintenance services designed to make your life easier, with attention to detail and a friendly, can-do attitude.

{[ { value: "10+", label: "Years Experience", delay: 300 }, { value: "100%", label: "Satisfaction Rate", delay: 400 }, { value: "Local", label: "Northern Beaches", delay: 500 }, ].map((stat, index) => (

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ArrowDown, Hammer, Wrench } from "lucide-react" import { useEffect, useState } from "react" import Image from "next/image" import { useParallax } from "@/hooks/use-parallax" export function HeroSection() { const [isLoaded, setIsLoaded] = useState(false) const parallaxBg = useParallax(0.5) const parallaxLogo = useParallax(0.2) useEffect(() => { setIsLoaded(true) }, []) const scrollToContact = () => { document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }) } return (

St Tolo's Property Maintenance - Leandro Díaz

Reliable Handyman & Maintenance Services in the Northern Beaches

From minor fixes to home improvements, we've got you covered.

) } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" import { Toaster } from "@/components/ui/toaster" export const metadata: Metadata = { title: "St Tolo's Property Maintenance | Northern Beaches Sydney", description: "Reliable property maintenance and carpentry services in Northern Beaches, Sydney. Expert craftsmanship for all your home repair and renovation needs.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/actions/send-email.tsx" isEdit="true" isMerged="true" "use server" import { Resend } from "resend" export async function sendContactEmail(formData: { name: string email: string phone: string message: string }) { try { const apiKey = process.env.RESEND_API_KEY if (!apiKey) { console.error("[v0] RESEND_API_KEY is not set in environment variables") return { success: false, error: "Email service is not configured. Please contact us directly at info@sttolos.com.au", } } const resend = new Resend(apiKey) const { data, error } = await resend.emails.send({ from: "St Tolo's Website ", to: ["info@sttolos.com.au"], replyTo: formData.email, subject: `New Quote Request from ${formData.name}`, html: `

New Quote Request

Name: ${formData.name}

Email: ${formData.email}

Phone: ${formData.phone}

Message:

${formData.message.replace(/\n/g, "
")}

`, }) if (error) { console.error("[v0] Email error:", error) return { success: false, error: error.message } } return { success: true, data } } catch (error) { console.error("[v0] Failed to send email:", error) return { success: false, error: "Failed to send email" } } } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Phone, Mail, MapPin, Instagram, Facebook } from "lucide-react" import { useState, useRef } from "react" import { useScrollAnimation } from "@/hooks/use-scroll-animation" import { sendContactEmail } from "@/app/actions/send-email" import { useToast } from "@/hooks/use-toast" export function ContactSection() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const { toast } = useToast() const sectionRef = useRef(null) const { isVisible, scrollProgress } = useScrollAnimation(sectionRef, { threshold: 0.2 }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const result = await sendContactEmail(formData) if (result.success) { toast({ title: "Message sent!", description: "Thank you for your inquiry. We'll get back to you soon.", }) setFormData({ name: "", email: "", phone: "", message: "", }) } else { toast({ title: "Failed to send message", description: result.error || "Please try again or contact us directly.", variant: "destructive", }) } } catch (error) { toast({ title: "Error", description: "Something went wrong. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } return (

Get In Touch

Ready to start your project? Request a free quote today

Request a Quote

Name

Phone

Message

</div>
                  <Button
                    type="submit"
                    size="lg"
                    className="w-full hover:scale-105 hover:shadow-xl transition-all duration-300"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              </CardContent>
            </Card>

<div className="space-y-8">
              {[
                {
                  icon: Phone,
                  title: "Phone",
                  content: (
                    <a href="tel:+61405946020" className="text-muted-foreground hover:text-primary transition-colors">
                      +61 405 946 020
                    </a>
                  ),
                  delay: 400,
                },
                {
                  icon: Mail,
                  title: "Email",
                  content: (
                    <a
                      href="mailto:info@sttolos.com.au"
                      className="text-muted-foreground hover:text-primary transition-colors break-all"
                    >
                      info@sttolos.com.au
                    </a>
                  ),
                  delay: 500,
                },
                {
                  icon: MapPin,
                  title: "Service Area",
                  content: <p className="text-muted-foreground">Northern Beaches, Sydney, Australia</p>,
                  delay: 600,
                },
              ].map((item, index) => {
                const Icon = item.icon
                return (
                  <Card
                    key={index}
                    className={`shadow-lg hover:shadow-2xl transition-all duration-1000 hover:-translate-y-2 hover:scale-105 bg-card/95 backdrop-blur-sm ${
                      isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-12"
                    }`}
                    style={{ transitionDelay: `${item.delay}ms` }}
                  >
                    <CardContent className="pt-6">
                      <div className="flex items-start gap-4">
                        <div className="p-3 rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground hover:scale-110 hover:rotate-6 transition-all duration-300">
                          <Icon className="h-6 w-6" />
                        </div>
                        <div>
                          <h3 className="font-semibold mb-1">{item.title}</h3>
                          {item.content}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )
              })}

<Card
                className={`shadow-lg hover:shadow-2xl transition-all duration-1000 bg-card/95 backdrop-blur-sm ${
                  isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-12"
                }`}
                style={{ transitionDelay: "700ms" }}
              >
                <CardContent className="pt-6">
                  <h3 className="font-semibold mb-4">Follow Us</h3>
                  <div className="flex gap-4">
                    <a
                      href="#"
                      className="p-3 rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300 hover:scale-110"
                      aria-label="Instagram"
                    >
                      <Instagram className="h-6 w-6" />
                    </a>
                    <a
                      href="#"
                      className="p-3 rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300 hover:scale-110"
                      aria-label="Facebook"
                    >
                      <Facebook className="h-6 w-6" />
                    </a>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}88:["$","$L8f",null,{"chatId":"gNT74Ift98D","children":["$","$L90",null,{"data":{"@\"active-block\",\"gNT74Ift98D\",":{"id":"b_z4L5pIoxbuf","messageId":"zCotdGEjn7dfaaBJIeZX2EDqOe5rVJBU","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"st-tolos-property-maintenance","type":"code-project","project":"st-tolos-property-maintenance","taskNameActive":"Updating contact email","taskNameComplete":"Updated contact email"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"gNT74Ift98D\",":false},"children":"$L92"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This