[V0_FILE]typescriptreact:file="app/products/ultimate-plunge-bundle/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import ProductDetails from "@/components/products/product-details" import { getProduct, getRecentlyViewedProducts } from "@/lib/products" import { Suspense } from "react" import ProductSkeleton from "@/components/products/product-skeleton" export const metadata: Metadata = { title: "Ultimate Plunge Bundle | The Cold Life", description: "Transform your wellness routine with our premium cold plunge bundle. Includes everything you need for the ultimate cold therapy experience at home.", openGraph: { title: "Ultimate Plunge Bundle | The Cold Life", description: "Transform your wellness routine with our premium cold plunge bundle. Includes everything you need for the ultimate cold therapy experience at home.", images: [ { url: "/images/products/ultimate-plunge-bundle/hero.jpg", width: 1200, height: 630, alt: "Ultimate Plunge Bundle", }, ], }, twitter: { card: "summary_large_image", title: "Ultimate Plunge Bundle | The Cold Life", description: "Transform your wellness routine with our premium cold plunge bundle. Includes everything you need for the ultimate cold therapy experience at home.", images: ["/images/products/ultimate-plunge-bundle/hero.jpg"], }, } export default async function ProductPage() { // In a real implementation, this would fetch from a CMS or API const product = await getProduct("ultimate-plunge-bundle") const recentlyViewed = await getRecentlyViewedProducts() return ( }> ) } [V0_FILE]typescriptreact:file="components/products/product-tabs.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Check, AlertCircle } from "lucide-react" import type { Product } from "@/lib/types" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" interface DescriptionProps { product: Product } function Description({ product }: DescriptionProps) { return (

Transform Your Wellness Routine with Cold Therapy

The Ultimate Plunge Bundle is your complete solution for bringing the powerful benefits of cold therapy into your home. Designed for wellness enthusiasts, athletes, and anyone looking to enhance their recovery and overall health, this premium bundle includes everything you need to start your cold plunge journey.

Why Cold Plunging?

Cold water immersion has been practiced for centuries and is backed by modern science. Regular cold plunging can help:

Reduce inflammation and muscle soreness
Improve circulation and cardiovascular health
Boost immune system function
Enhance mental clarity and mood
Increase energy levels and metabolism
Promote better sleep quality

The Complete Cold Therapy Solution

Our Ultimate Plunge Bundle combines our award-winning cold plunge tub with essential accessories to maximize your experience. Handcrafted in the USA with premium materials, our cold plunge tubs are designed to be both functional and aesthetically pleasing, fitting seamlessly into any home environment.

Limited Time Offer Take advantage of our $1000 discount and free shipping while supplies last.

What's Included

{feature}

Key Benefits

{benefit}

) } interface SpecificationsProps { product: Product } function Specifications({ product }: SpecificationsProps) { return (

Specification Details {product.specifications.map((spec, index) => ( {spec.name} {spec.value} ))}

Maintenance Requirements

{item}

) } const ProductTabs = { Description, Specifications, } export default ProductTabs [V0_FILE]typescriptreact:file="components/products/product-reviews.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Star, ThumbsUp, ChevronDown, ChevronUp, Filter, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import type { ProductReview } from "@/lib/types" import { cn } from "@/lib/utils" interface ProductReviewsProps { reviews: ProductReview[] averageRating: number onReviewExpand?: () => void } export default function ProductReviews({ reviews, averageRating, onReviewExpand }: ProductReviewsProps) { const [expandedReviews, setExpandedReviews] = useState([]) const [sortBy, setSortBy] = useState("recent") const [filterRating, setFilterRating] = useState(null) const toggleReviewExpansion = (reviewId: string) => { setExpandedReviews((prev) => (prev.includes(reviewId) ? prev.filter((id) => id !== reviewId) : [...prev, reviewId])) if (!expandedReviews.includes(reviewId)) { onReviewExpand?.() } } // Calculate rating distribution const ratingCounts = [0, 0, 0, 0, 0] reviews.forEach((review) => { ratingCounts[review.rating - 1]++ }) const filteredReviews = reviews .filter((review) => filterRating === null || review.rating === filterRating) .sort((a, b) => { if (sortBy === "recent") { return new Date(b.date).getTime() - new Date(a.date).getTime() } else if (sortBy === "highest") { return b.rating - a.rating } else if (sortBy === "lowest") { return a.rating - b.rating } else if (sortBy === "helpful") { return b.helpfulCount - a.helpfulCount } return 0 }) return (

{/* Rating Summary */}

{averageRating.toFixed(1)}

{[...Array(5)].map((_, i) => ( ))}

Based on {reviews.length} reviews

{[5, 4, 3, 2, 1].map((rating) => (

{rating} stars

{Math.round((ratingCounts[rating - 1] / reviews.length) * 100)}%

))}

{/* Reviews List */}

Filter by:

Sort by:

{filteredReviews.length > 0 ? (

{filteredReviews.map((review) => { const isExpanded = expandedReviews.includes(review.id) const needsExpansion = review.content.length > 300 return (

{review.author.substring(0, 2).toUpperCase()}

{review.author}

{new Date(review.date).toLocaleDateString()}

{[...Array(5)].map((_, i) => ( ))}

{review.purchaseVerified && (

Verified Purchase

)}

{needsExpansion && !isExpanded ? `${review.content.substring(0, 300)}...` : review.content}

{needsExpansion && ( )}

{/* {review.images && review.images.length > 0 && (

{review.images.map((image, index) => (

))}

)} */}

) })}

) : (

No reviews match your current filters.

)} {filteredReviews.length > 0 && (

)}

) } [V0_FILE]typescriptreact:file="components/products/cross-sell-products.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import type { RelatedProduct } from "@/lib/types" import { cn } from "@/lib/utils" import { useMediaQuery } from "@/hooks/use-media-query" interface CrossSellProductsProps { products: RelatedProduct[] onProductClick?: (productId: string) => void } export default function CrossSellProducts({ products, onProductClick }: CrossSellProductsProps) { const [startIndex, setStartIndex] = useState(0) const isMobile = useMediaQuery("(max-width: 640px)") const isTablet = useMediaQuery("(max-width: 1024px)") const itemsToShow = isMobile ? 1 : isTablet ? 2 : 3 const canScrollLeft = startIndex > 0 const canScrollRight = startIndex + itemsToShow < products.length const handlePrevious = () => { setStartIndex((prev) => Math.max(0, prev - 1)) } const handleNext = () => { setStartIndex((prev) => Math.min(products.length - itemsToShow, prev + 1)) } const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(price) } return (

{products.slice(startIndex, startIndex + itemsToShow).map((product) => (

onProductClick?.(product.id)} >

{product.badge && {product.badge}}

onProductClick?.(product.id)} > {product.name}

{[...Array(5)].map((_, i) => ( ))} ({product.reviewCount})

{formatPrice(product.price)} {product.compareAtPrice && ( {formatPrice(product.compareAtPrice)} )}

))}

{/* Navigation Arrows */}

) } [V0_FILE]typescriptreact:file="components/products/product-faq.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp, Search } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import type { ProductFAQ } from "@/lib/types" interface ProductFaqProps { faqs: ProductFAQ[] onFaqExpand?: (faqId: string) => void onFaqSearch?: (query: string) => void } export default function ProductFaq({ faqs, onFaqExpand, onFaqSearch }: ProductFaqProps) { const [expandedFaqs, setExpandedFaqs] = useState([]) const [searchQuery, setSearchQuery] = useState("") const toggleFaq = (faqId: string) => { setExpandedFaqs((prev) => (prev.includes(faqId) ? prev.filter((id) => id !== faqId) : [...prev, faqId])) if (!expandedFaqs.includes(faqId)) { onFaqExpand?.(faqId) } } const handleSearch = (query: string) => { setSearchQuery(query) onFaqSearch?.(query) } const filteredFaqs = faqs.filter( (faq) => faq.question.toLowerCase().includes(searchQuery.toLowerCase()) || faq.answer.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

handleSearch(e.target.value)} className="pl-10" />

{filteredFaqs.length > 0 ? ( filteredFaqs.map((faq) => { const isExpanded = expandedFaqs.includes(faq.id) return (

{isExpanded && (

{faq.answer}

)}

) }) ) : (

No FAQs match your search.

)}

Still have questions?

Our customer support team is here to help you with any questions you may have about our products.

) } [V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true" export interface Product { id: string name: string shortDescription: string description: string rating: number reviewCount: number images: ProductImage[] videos?: ProductVideo[] threeSixtyView?: string variants: ProductVariant[] features: string[] benefits: string[] benefitsData?: Benefit[] specifications: ProductSpecification[] maintenance: string[] reviews: ProductReview[] faqs: ProductFAQ[] relatedProducts: RelatedProduct[] testimonials?: Testimonial[] bundleIncludes?: BundleItem[] } export interface ProductImage { id: string url: string alt: string } export interface ProductVideo { id: string url: string title: string thumbnail: string duration: number } export interface ProductVariant { id: string name: string description: string price: number compareAtPrice: number inStock: boolean } export interface ProductSpecification { name: string value: string } export interface ProductReview { id: string author: string avatar: string rating: number date: string content: string helpfulCount: number purchaseVerified: boolean images?: string[] } export interface ProductFAQ { id: string question: string answer: string } export interface RelatedProduct { id: string name: string image: string price: number compareAtPrice?: number rating: number reviewCount: number badge?: string } export interface Testimonial { id: string name: string title: string image: string quote: string } export interface BundleItem { name: string description: string image: string } export interface Benefit { title: string description: string icon: string } [V0_FILE]typescriptreact:file="lib/products.ts" isEdit="true" isMerged="true" // Update the product data with new pricing and specs import type { Product } from "./types" export async function getProduct(slug: string): Promise { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) return { id: "ultimate-plunge-bundle", name: "Ultimate Plunge Bundle", shortDescription: "Simplified maintenance, an upgraded pump, 2-step filtration, and a NEW step/seat ensure clean water and easy access.", description: "Transform your wellness routine with our premium cold plunge bundle. Includes everything you need for the ultimate cold therapy experience at home.", rating: 5.0, reviewCount: 83, images: [ { id: "img1", url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v1%20%281%29-lwd8EVawpxepNQKr7vJD7SPq9EDdXC.png", alt: "Ultimate Plunge Bundle - White Model", }, { id: "img2", url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v3%20%282%29-8H68rFXO9mIxxljIn3fcnRGMZucOhS.png", alt: "Ultimate Plunge Bundle - Black Model", }, { id: "img3", url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v2%20%281%29-IHKZuAKtxK7F6GgFnckrcU1LpBhkib.png", alt: "Ultimate Plunge Bundle - With Steps", }, { id: "img4", url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v5%20%282%29-444gtEOChPMPU1A0YGLC7EW8Liy8eu.png", alt: "Digital Chiller Unit", }, { id: "img5", url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v4%20%282%29-oY9eTwbenvbfjT7Qoplbinx8NXJNfd.png", alt: "Step Platforms - Black and White", }, ], testimonials: [ { id: "mark-wahlberg", name: "Mark Wahlberg", title: "Actor", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled_design_18-ltT7i3AERrbxnBMhZTmusS9JqvTDJX.webp", quote: "The Cold Life plunge has become an essential part of my daily wellness routine.", }, { id: "gary-brecka", name: "Gary Brecka", title: "The Ultimate Human", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/13_2_1-j01JgHMV2hyYO1Na1DPhCRtTh6Ak3R.webp", quote: "This is the most advanced cold plunge system I've ever used.", }, { id: "jon-jones", name: "Jon Jones", title: "UFC Heavyweight Champion", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled_design_11_4c5c076d-0de4-405b-8e64-a97594219454-dUtYAAkUDZnjDJjDcYRoK6jcZp9vn3.webp", quote: "Perfect for recovery between training sessions.", }, ], variants: [ { id: "white", name: "White Ultimate Plunge", description: "Classic white finish with premium features", price: 6499, compareAtPrice: 7499, inStock: true, }, { id: "black", name: "Black Ultimate Plunge", description: "Sleek black finish with premium features", price: 6499, compareAtPrice: 7499, inStock: true, }, ], features: [ "Advanced cooling power to 37℉", "Indoor & outdoor rated", "Fully insulated to keep water cold", "Made with aerospace grade aluminum", "Comfortably fits anyone up to 6'9\"", "Manufactured in Miami, FL", "2-step filtration system", "Upgraded pump system", "Easy-access step/seat included", ], benefits: [ "Improves mood and mental health", "Reduces inflammation", "Better recovery and performance", "Increases metabolism", "Enhances sleep quality", "Boosts mental clarity and focus", ], benefitsData: [ { title: "Improves mood and mental health", description: "Cold therapy enhances mood and mental health by activating the parasympathetic nervous system, which helps reduce depression, anxiety, and stress.", icon: "Brain", }, { title: "Reduces inflammation", description: "Cold therapy reduces inflammation throughout the body and boosts the immune system through stimulation of the vagus nerve.", icon: "Flame", }, { title: "Better recovery and performance", description: "Cold therapy reduces muscle soreness and pain by constricting blood flow to muscles, reducing swelling and muscle spasms.", icon: "Activity", }, { title: "Increases metabolism", description: "Cold therapy increases metabolism up to 350% as the body has to burn fat and sugar to increase core body temperature.", icon: "Zap", }, { title: "Enhances sleep quality", description: "Cold therapy promotes deeper and more restful sleep by regulating body temperature and reducing stress levels.", icon: "Moon", }, { title: "Boosts mental clarity and focus", description: "Cold therapy boosts alertness and mental clarity by stimulating the release of hormones that enhance brain function.", icon: "Focus", }, ], bundleIncludes: [ { name: "Cold Life Plunge", description: "Patented Vertical Plunge in Black or White", image: "/placeholder.svg", }, { name: "Pro Curve Chiller", description: "3/4 HP Xtreme Power Chiller", image: "/placeholder.svg", }, { name: "Stepping Stool", description: "Anti-Slip Modern 2-Step", image: "/placeholder.svg", }, { name: "Skimmie Net", description: "Hand help Skimmie Net", image: "/placeholder.svg", }, { name: "Carbon Hose Filter", description: "Advanced Granular Activated Carbon Hose Filter", image: "/placeholder.svg", }, ], specifications: [ { name: "Plunge + Chiller", value: '40" (L) x 50" (W) x 43" (H)', }, { name: "Plunge Only", value: '33" (D) x 43" (H)', }, { name: "Interior Size", value: '31" (D) x 38" (H)', }, { name: "Step Size", value: '16" Two Step', }, { name: "Dry Weight", value: "78 lbs", }, { name: "Filled Weight", value: "1,000 lbs (approx w/ Chiller)", }, { name: "Weather Rating", value: "Outdoor & Indoor Rated", }, { name: "Manufacturer", value: "USA, Fulfillment in Atl GA", }, { name: "Filtration", value: "2-Step Filtration", }, { name: "Power Supply", value: "110V, 450W, 4AMP", }, { name: "Power Cord", value: "10' Power Cord w/ GFCI", }, { name: "Hose Length", value: "(2) 5' Hoses", }, { name: "Cooling Power", value: "3/4HP, 7500 BTU", }, { name: "Temperature", value: "37°F minimum", }, ], maintenance: [], reviews: [ { id: "review1", author: "Luke", avatar: "/placeholder.svg", rating: 5, date: "2024-03-05", content: "The coldlife team is phenomenal and helped every step of the way. there isnt another plunge out there that comes close to the ultimate plunge. you can tell its made with only the best materials.", helpfulCount: 42, purchaseVerified: true, }, { id: "review2", author: "Alessandro", avatar: "/placeholder.svg", rating: 5, date: "2024-02-20", content: "Want to give a huge shoutout to the Breckas and The Cold Life for such an amazing cold plunge. I use it everyday I am in town", helpfulCount: 28, purchaseVerified: true, }, ], faqs: [ { id: "whats-included", question: "What's included in my purchase?", answer: "Your purchase includes the Cold Life Plunge tub in your chosen color, Pro Curve Chiller, 2-step platform, maintenance kit, and all necessary hoses and filters for setup.", }, { id: "warranty", question: "What type of warranty does it come with?", answer: "The Cold Life Plunge comes with a comprehensive 1-year warranty covering all components and manufacturing defects.", }, { id: "lead-time", question: "What is the lead time?", answer: "Current lead time is approximately 2-3 weeks for delivery.", }, ], relatedProducts: [ { id: "ice-barrel", name: "Ice Barrel", image: "/placeholder.svg", price: 1199, rating: 4.5, reviewCount: 50, }, { id: "modtub", name: "Modtub", image: "/placeholder.svg", price: 999, rating: 4.2, reviewCount: 30, }, { id: "polar-plunge", name: "Polar Plunge", image: "/placeholder.svg", price: 1299, rating: 4.8, reviewCount: 75, }, ], } } export async function getRecentlyViewedProducts() { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 250)) const recentlyViewed = [] for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i) if (key && key.startsWith("recently_viewed_")) { try { const product = JSON.parse(localStorage.getItem(key) || "null") if (product) { recentlyViewed.push(product) } } catch (e) { console.error("Failed to parse recently viewed product", e) } } } // Sort by timestamp recentlyViewed.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()) return recentlyViewed.slice(0, 4) } [V0_FILE]typescriptreact:file="hooks/use-media-query.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false) useEffect(() => { const media = window.matchMedia(query) // Update the state initially setMatches(media.matches) // Define callback for media query change const listener = (event: MediaQueryListEvent) => { setMatches(event.matches) } // Add the listener media.addEventListener("change", listener) // Clean up return () => { media.removeEventListener("change", listener) } }, [query]) return matches } [V0_FILE]typescriptreact:file="components/products/product-comparison.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Check, Minus } from "lucide-react" import { Button } from "@/components/ui/button" import type { ProductVariant } from "@/lib/types" import { cn } from "@/lib/utils" interface ProductComparisonProps { variants: ProductVariant[] selectedVariantId: string onVariantSelect: (variantId: string) => void } export default function ProductComparison({ variants, selectedVariantId, onVariantSelect }: ProductComparisonProps) { const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(price) } // Define comparison features const features = [ { name: "Cold Plunge Tub", standard: true, premium: true, ultimate: true }, { name: "Basic Filtration System", standard: true, premium: true, ultimate: true }, { name: "Advanced Filtration System", standard: false, premium: true, ultimate: true }, { name: "Digital Temperature Control", standard: true, premium: true, ultimate: true }, { name: "Chiller Unit", standard: false, premium: true, ultimate: true }, { name: "Insulated Cover", standard: true, premium: true, ultimate: true }, { name: "Premium Insulated Cover", standard: false, premium: false, ultimate: true }, { name: "Maintenance Kit", standard: true, premium: true, ultimate: true }, { name: "Premium Maintenance Kit", standard: false, premium: true, ultimate: true }, { name: "Step Platform", standard: true, premium: true, ultimate: true }, { name: "Deluxe Step Platform", standard: false, premium: false, ultimate: true }, { name: "Water Treatment Starter Pack", standard: true, premium: true, ultimate: true }, { name: "Extended Water Treatment Pack", standard: false, premium: true, ultimate: true }, { name: "Standard Warranty", standard: true, premium: true, ultimate: true }, { name: "Extended Warranty", standard: false, premium: false, ultimate: true }, { name: "Priority Support", standard: false, premium: true, ultimate: true }, { name: "Lifetime Priority Support", standard: false, premium: false, ultimate: true }, ] return (

{variants.map((variant) => ( ))} {features.map((feature, index) => ( ))}

	{variant.name} {variant.description} {formatPrice(variant.price)} {variant.compareAtPrice > variant.price && ( {formatPrice(variant.compareAtPrice)} )}
{feature.name}	{feature.standard ? ( ) : ( )}	{feature.premium ? ( ) : ( )}	{feature.ultimate ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/products/recently-viewed.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import type { RelatedProduct } from "@/lib/types" import { cn } from "@/lib/utils" import { useMediaQuery } from "@/hooks/use-media-query" interface RecentlyViewedProps { products: RelatedProduct[] onProductClick?: (productId: string) => void } export default function RecentlyViewed({ products, onProductClick }: RecentlyViewedProps) { const [startIndex, setStartIndex] = useState(0) const isMobile = useMediaQuery("(max-width: 640px)") const isTablet = useMediaQuery("(max-width: 1024px)") const itemsToShow = isMobile ? 1 : isTablet ? 2 : 4 const canScrollLeft = startIndex > 0 const canScrollRight = startIndex + itemsToShow < products.length const handlePrevious = () => { setStartIndex((prev) => Math.max(0, prev - 1)) } const handleNext = () => { setStartIndex((prev) => Math.min(products.length - itemsToShow, prev + 1)) } const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(price) } return (

{products.slice(startIndex, startIndex + itemsToShow).map((product) => (

onProductClick?.(product.id)} > {product.name}

{[...Array(5)].map((_, i) => ( ))} ({product.reviewCount})

{formatPrice(product.price)} {product.compareAtPrice && ( {formatPrice(product.compareAtPrice)} )}

))}

{/* Navigation Arrows */}

) } [V0_FILE]typescriptreact:file="components/products/product-skeleton.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function ProductSkeleton() { return (

{/* Banner Skeleton */}

{/* Gallery Skeleton */}

{[...Array(4)].map((_, i) => (

))}

{/* Product Info Skeleton */}

{[...Array(3)].map((_, i) => (

))}

{/* Trust Badges Skeleton */}

{[...Array(4)].map((_, i) => (

))}

{/* Tabs Skeleton */}

{[...Array(4)].map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="lib/analytics.ts" isMerged="true" // This is a mock analytics implementation // In a real application, this would integrate with a service like Google Analytics, Segment, or Amplitude type EventName = "product_viewed" | "add_to_cart" | "begin_checkout" | "add_to_wishlist" | "experiment_viewed" | string type EventProperties = Record export function trackEvent(eventName: EventName, properties: EventProperties = {}) { // In development, log to console if (process.env.NODE_ENV === "development") { console.log(`[Analytics] ${eventName}`, properties) } // In production, this would send data to your analytics provider // Example: // if (window.analytics) { // window.analytics.track(eventName, properties); // } } export function identifyUser(userId: string, traits: Record = {}) { // In development, log to console if (process.env.NODE_ENV === "development") { console.log(`[Analytics] Identify User: ${userId}`, traits) } // In production, this would identify the user in your analytics provider // Example: // if (window.analytics) { // window.analytics.identify(userId, traits); // } } export function pageView(url: string, properties: Record = {}) { // In development, log to console if (process.env.NODE_ENV === "development") { console.log(`[Analytics] Page View: ${url}`, properties) } // In production, this would track a page view in your analytics provider // Example: // if (window.analytics) { // window.analytics.page(url, properties); // } } [V0_FILE]typescriptreact:file="hooks/use-countdown.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" interface CountdownResult { days: number hours: number minutes: number seconds: number isComplete: boolean } interface CountdownOptions { playSound?: boolean finalWarningAt?: number // seconds remaining to trigger final warning } export function useCountdown(targetDate: number, options: CountdownOptions = {}): CountdownResult { const { playSound = false, finalWarningAt = 60 } = options const [hasPlayedWarning, setHasPlayedWarning] = useState(false) const audioRef = useRef(null) useEffect(() => { if (playSound && typeof window !== "undefined") { audioRef.current = new Audio("/tick.mp3") // We would add this file in a real implementation } }, [playSound]) const calculateTimeLeft = (): CountdownResult => { const difference = targetDate - new Date().getTime() if (difference <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0, isComplete: true, } } return { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), isComplete: false, } } const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()) useEffect(() => { const timer = setInterval(() => { const newTimeLeft = calculateTimeLeft() setTimeLeft(newTimeLeft) // Play sound every minute if enabled if ( playSound && audioRef.current && newTimeLeft.seconds === 0 && (newTimeLeft.minutes > 0 || newTimeLeft.hours > 0 || newTimeLeft.days > 0) ) { audioRef.current.play().catch((e) => console.log("Audio play error:", e)) } // Play final warning sound const totalSecondsLeft = newTimeLeft.days * 86400 + newTimeLeft.hours * 3600 + newTimeLeft.minutes * 60 + newTimeLeft.seconds if (playSound && audioRef.current && totalSecondsLeft <= finalWarningAt && !hasPlayedWarning) { // Could play a different sound for the final warning setHasPlayedWarning(true) } }, 1000) return () => clearInterval(timer) }, [targetDate, playSound, finalWarningAt, hasPlayedWarning]) return timeLeft } [V0_FILE]typescript:file="tailwind.config.ts" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, frost: { 50: "#F0F7FF", 100: "#E0EFFF", 200: "#B9DEFF", 300: "#8CCDFF", 400: "#5ABBFF", 500: "#3B9EFF", 600: "#2B7CFF", 700: "#1E5CFF", 800: "#1D4ED8", 900: "#1E40AF", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, backgroundImage: { "frost-gradient": "linear-gradient(to right, rgb(240, 247, 255), rgb(224, 239, 255))", "frost-glow": "radial-gradient(circle, rgba(224, 239, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%)", "ice-texture": "url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233B82F6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E\")", }, boxShadow: { frost: "0 4px 14px 0 rgba(59, 130, 246, 0.1)", }, animation: { "frost-pulse": "frost-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, "frost-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.7 }, }, }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/products/product-details.tsx" isEdit="true" "use client" import { useState, useEffect, Suspense, lazy } from "react" import { useRouter } from "next/navigation" import type { Product, ProductVariant, RelatedProduct } from "@/lib/types" import ProductGallery from "./product-gallery" import ProductInfo from "./product-info" import ProductTabs from "./product-tabs" import TrustBadges from "./trust-badges" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useMediaQuery } from "@/hooks/use-media-query" import { useToast } from "@/hooks/use-toast" import { useInView } from "react-intersection-observer" import { AlertCircle, Clock, ArrowRight, ShoppingCart, CreditCard, Heart, Share2 } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { useCountdown } from "@/hooks/use-countdown" import { trackEvent } from "@/lib/analytics" import { motion, AnimatePresence } from "framer-motion" // Lazy-loaded components for better performance const ProductReviews = lazy(() => import("./product-reviews")) const CrossSellProducts = lazy(() => import("./cross-sell-products")) const ProductFaq = lazy(() => import("./product-faq")) const RecentlyViewed = lazy(() => import("./recently-viewed")) const ProductComparison = lazy(() => import("./product-comparison")) const BundleContents = lazy(() => import("./bundle-contents")) const Testimonials = lazy(() => import("./testimonials")) const BenefitsGrid = lazy(() => import("./benefits-grid")) const FinancingCalculator = lazy(() => import("./financing-calculator")) const SizeComparison = lazy(() => import("./size-comparison")) const CustomerPhotos = lazy(() => import("./customer-photos")) interface ProductDetailsProps { product: Product recentlyViewed?: RelatedProduct[] } export default function ProductDetails({ product, recentlyViewed = [] }: ProductDetailsProps) { const router = useRouter() const [selectedVariant, setSelectedVariant] = useState(product.variants[0]) const [quantity, setQuantity] = useState(1) const [activeTab, setActiveTab] = useState("description") const [showComparisonTable, setShowComparisonTable] = useState(false) const [showFinancingCalculator, setShowFinancingCalculator] = useState(false) const [showSizeComparison, setShowSizeComparison] = useState(false) const [isWishlisted, setIsWishlisted] = useState(false) const isMobile = useMediaQuery("(max-width: 768px)") const isTablet = useMediaQuery("(max-width: 1024px)") const { toast } = useToast() // Countdown timer for limited time offer const { days, hours, minutes, seconds, isComplete } = useCountdown(new Date().getTime() + 2 * 24 * 60 * 60 * 1000, { playSound: false, finalWarningAt: 3600, // 1 hour }) // Intersection observers for scroll-based effects const [headerRef, headerInView] = useInView({ threshold: 0 }) const [ctaRef, ctaInView] = useInView({ threshold: 0 }) const [benefitsRef, benefitsInView] = useInView({ threshold: 0.1, triggerOnce: true, }) // Track page view on component mount useEffect(() => { trackEvent("product_viewed", { product_id: product.id, product_name: product.name, product_price: selectedVariant.price, currency: "USD", }) // Record product view in recently viewed try { localStorage.setItem( `recently_viewed_${product.id}`, JSON.stringify({ id: product.id, name: product.name, image: product.images[0].url, price: selectedVariant.price, timestamp: new Date().toISOString(), }), ) } catch (e) { console.error("Failed to save to localStorage:", e) } }, [product.id, product.name, product.images, selectedVariant.price]) // Track micro-conversions const trackMicroConversion = (action: string, metadata = {}) => { trackEvent(`micro_conversion_${action}`, { product_id: product.id, product_name: product.name, variant_id: selectedVariant.id, variant_name: selectedVariant.name, ...metadata, }) } const handleAddToCart = () => { toast({ title: "Added to cart!", description: `${quantity} × ${product.name} (${selectedVariant.name}) added to your cart.`, }) trackEvent("add_to_cart", { product_id: product.id, product_name: product.name, variant_id: selectedVariant.id, variant_name: selectedVariant.name, price: selectedVariant.price, quantity: quantity, currency: "USD", }) } const handleBuyNow = () => { handleAddToCart() // Simulate redirect to checkout setTimeout(() => { toast({ title: "Proceeding to checkout", description: "You would now be redirected to the checkout page.", }) }, 1000) trackEvent("begin_checkout", { product_id: product.id, product_name: product.name, variant_id: selectedVariant.id, variant_name: selectedVariant.name, price: selectedVariant.price, quantity: quantity, currency: "USD", }) } const toggleWishlist = () => { setIsWishlisted(!isWishlisted) toast({ title: isWishlisted ? "Removed from wishlist" : "Added to wishlist", description: `${product.name} has been ${isWishlisted ? "removed from" : "added to"} your wishlist.`, }) trackEvent(isWishlisted ? "remove_from_wishlist" : "add_to_wishlist", { product_id: product.id, product_name: product.name, variant_id: selectedVariant.id, variant_name: selectedVariant.name, price: selectedVariant.price, }) } const handleShare = async () => { if (navigator.share) { try { await navigator.share({ title: product.name, text: product.shortDescription, url: window.location.href, }) trackMicroConversion("shared_product") } catch (error) { console.error("Error sharing:", error) } } else { // Fallback for browsers that don't support the Web Share API navigator.clipboard.writeText(window.location.href) toast({ title: "Link copied to clipboard", description: "You can now share this product with others.", }) trackMicroConversion("copied_product_link") } } // Format price with currency const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(price) } // Calculate monthly payment const calculateMonthlyPayment = (price: number, months = 24) => { return (price / months).toFixed(2) } return (

{/* Limited Time Offer Banner */} {!isComplete && (

LIMITED TIME SALE: $1000 OFF + FREE SHIPPING

Ends in:

{days}d : {hours}h : {minutes}m : {seconds}s

)} {/* Sticky Add to Cart Bar */} {!ctaInView && (

{product.name}

{formatPrice(selectedVariant.price)} {selectedVariant.compareAtPrice > selectedVariant.price && ( {formatPrice(selectedVariant.compareAtPrice)} )}

)}

{/* Product Gallery */}

trackMicroConversion("viewed_image")} onVideoPlay={() => trackMicroConversion("played_video")} on360View={() => trackMicroConversion("viewed_360")} />

{/* Product Information */}

{/* Product Title and Badges */}

Limited Time Offer Best Seller {selectedVariant.inStock ? ( In Stock ) : ( Pre-Order )}

{product.name}

{ setSelectedVariant(variant) trackMicroConversion("changed_variant", { new_variant_id: variant.id, new_variant_name: variant.name }) }} quantity={quantity} setQuantity={(qty) => { setQuantity(qty) trackMicroConversion("changed_quantity", { new_quantity: qty }) }} onReviewsClick={() => { trackMicroConversion("viewed_reviews") setActiveTab("reviews") // Scroll to tabs section document.getElementById("product-tabs")?.scrollIntoView({ behavior: "smooth" }) }} onCompareClick={() => { setShowComparisonTable(!showComparisonTable) trackMicroConversion("viewed_comparison") }} onFinancingClick={() => { setShowFinancingCalculator(!showFinancingCalculator) trackMicroConversion("viewed_financing") }} onSizeComparisonClick={() => { setShowSizeComparison(!showSizeComparison) trackMicroConversion("viewed_size_comparison") }} ctaRef={ctaRef} onAddToCart={handleAddToCart} onBuyNow={handleBuyNow} /> {/* Financing Calculator */} {showFinancingCalculator && ( }> setShowFinancingCalculator(false)} /> )} {/* Size Comparison */} {showSizeComparison && ( }> setShowSizeComparison(false)} /> )} {/* Variant Comparison Table */} {showComparisonTable && ( }> { const variant = product.variants.find((v) => v.id === variantId) if (variant) { setSelectedVariant(variant) trackMicroConversion("selected_variant_from_comparison", { variant_id: variant.id, variant_name: variant.name, }) } }} /> )} {/* Social Proof Alert */}

People are loving this product 127 customers have purchased this product in the last 24 hours.{" "} 98% of customers recommend this product.

{/* Mobile-only trust badges */}

{/* Desktop trust badges */}

{/* Benefits Section */}

Experience the Cold Therapy Revolution

{[...Array(6)].map((_, i) => ( ))}

} >

{/* Bundle Contents Section */} {product.bundleIncludes && (

)} {/* Testimonials Section */} {product.testimonials && (

)} {/* Customer Photos */}

{/* Product Details Tabs */}

{ setActiveTab(value) trackMicroConversion("changed_tab", { tab: value }) }} > trackMicroConversion("viewed_description")}> Description trackMicroConversion("viewed_specifications")}> Specifications trackMicroConversion("viewed_reviews")}> Reviews trackMicroConversion("viewed_faq")}> FAQ }> trackMicroConversion("expanded_review", { review_id: reviewId })} /> }> trackMicroConversion("expanded_faq", { faq_id: faqId })} onFaqSearch={(query) => trackMicroConversion("searched_faqs", { query })} />

{/* Cross-sell/Upsell Section */}

Complete Your Cold Plunge Experience

{[...Array(3)].map((_, i) => ( ))}

} > trackMicroConversion("viewed_related_product", { related_product_id: id })} /> {/* Recently Viewed Products */} {recentlyViewed.length > 0 && (

Transform Your Recovery Routine Today

Join thousands of satisfied customers who have elevated their wellness journey with The Cold Life's premium cold plunge solutions.

Limited time offer. Free shipping on all orders. 30-day risk-free trial.

{/* Customer Testimonial */}

What Our Customers Say

"I've tried various recovery methods over the years, but nothing compares to the benefits I've experienced with my Cold Life plunge. It's become an essential part of my daily routine, helping me recover faster and feel better overall."

Michael Johnson

Professional Athlete

) } [V0_FILE]typescriptreact:file="components/products/product-info.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Star, Check, Info, Heart, Truck, Shield, ArrowRight, BarChart2, CreditCard, Ruler } from "lucide-react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import type { Product, ProductVariant } from "@/lib/types" import { cn } from "@/lib/utils" import { motion } from "framer-motion" interface ProductInfoProps { product: Product selectedVariant: ProductVariant setSelectedVariant: (variant: ProductVariant) => void quantity: number setQuantity: (quantity: number) => void onReviewsClick: () => void onCompareClick: () => void onFinancingClick: () => void onSizeComparisonClick: () => void onAddToCart: () => void onBuyNow: () => void ctaRef?: React.RefObject } export default function ProductInfo({ product, selectedVariant, setSelectedVariant, quantity, setQuantity, onReviewsClick, onCompareClick, onFinancingClick, onSizeComparisonClick, onAddToCart, onBuyNow, ctaRef, }: ProductInfoProps) { const [ctaVariant, setCtaVariant] = useState<"a" | "b">("a") const [recentViewCount, setRecentViewCount] = useState(0) const [stockCount, setStockCount] = useState(0) const [isWishlisted, setIsWishlisted] = useState(false) const [progressValue, setProgressValue] = useState(0) // Randomly select CTA variant for A/B testing (in a real app, this would be more sophisticated) useEffect(() => { setCtaVariant(Math.random() > 0.5 ? "a" : "b") // Simulate dynamic stock and view counts setRecentViewCount(Math.floor(Math.random() * 50) + 20) setStockCount(Math.floor(Math.random() * 10) + 5) // Animate progress bar const timer = setTimeout(() => { setProgressValue(100) }, 500) return () => clearTimeout(timer) }, []) const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(price) } const discountPercentage = Math.round( ((selectedVariant.compareAtPrice - selectedVariant.price) / selectedVariant.compareAtPrice) * 100, ) const monthlyPayment = (selectedVariant.price / 24).toFixed(2) const toggleWishlist = () => { setIsWishlisted(!isWishlisted) } return (

{/* Ratings */}

{[...Array(5)].map((_, i) => ( ))}

{/* Price */}

{formatPrice(selectedVariant.price)} {selectedVariant.compareAtPrice > selectedVariant.price && ( <> {formatPrice(selectedVariant.compareAtPrice)} Save {discountPercentage}% )}

{/* Short Description */}

{product.shortDescription}

{/* Real-time Activity Indicators */}

{recentViewCount} people are viewing this product right now

{selectedVariant.inStock && stockCount <= 10 && (

Only {stockCount} units left in stock

)}

Selling fast 72% sold

{/* Variant Selection */}

Select Model

{ const variant = product.variants.find((v) => v.id === value) if (variant) setSelectedVariant(variant) }} className="grid grid-cols-1 gap-3" > {product.variants.map((variant) => (

{variant.name}

{variant.description}

{!variant.inStock && ( Pre-Order (Ships in 2-3 weeks) )}

{formatPrice(variant.price)}

{variant.compareAtPrice > variant.price && (

{formatPrice(variant.compareAtPrice)}

)}

))}

{/* Size Comparison */} {/* Quantity */}

Quantity

setQuantity(Number.parseInt(e.target.value) || 1)} className="h-9 w-14 rounded-none border-x-0 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" />

{/* CTA Buttons - A/B Testing Variants */}

{ctaVariant === "a" ? ( // Variant A: Standard layout

) : ( // Variant B: Urgency-focused layout

Limited stock available. This item is selling fast with{" "} 12 sold in the last 24 hours.

)}

{/* Shipping & Returns */}

Free Shipping

Delivery in 5-7 business days

10-Year Warranty

Industry-leading coverage for peace of mind

30-Day Risk-Free Trial

Try it at home, return if not satisfied

) } [V0_FILE]typescriptreact:file="components/products/product-gallery.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Expand, RotateCw, Play, Pause, Maximize2 } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import type { ProductImage, ProductVideo } from "@/lib/types" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { motion, AnimatePresence } from "framer-motion" interface ProductGalleryProps { images: ProductImage[] videos?: ProductVideo[] threeSixtyView?: string onImageView?: () => void onVideoPlay?: () => void on360View?: () => void } export default function ProductGallery({ images, videos = [], threeSixtyView, onImageView, onVideoPlay, on360View, }: ProductGalleryProps) { const [activeIndex, setActiveIndex] = useState(0) const [activeType, setActiveType] = useState<"image" | "video" | "360">("image") const [isRotating, setIsRotating] = useState(false) const [isPlaying, setIsPlaying] = useState(false) const videoRef = useRef(null) const [isFullscreen, setIsFullscreen] = useState(false) const [isZoomed, setIsZoomed] = useState(false) const [zoomPosition, setZoomPosition] = useState({ x: 0, y: 0 }) const imageRef = useRef(null) const [isLightboxOpen, setIsLightboxOpen] = useState(false) const allMedia = [ ...images.map((image) => ({ type: "image" as const, item: image })), ...videos.map((video) => ({ type: "video" as const, item: video })), ...(threeSixtyView ? [{ type: "360" as const, item: { id: "360", url: threeSixtyView, alt: "360 degree view" } }] : []), ] const handlePrevious = () => { const newIndex = activeIndex === 0 ? allMedia.length - 1 : activeIndex - 1 setActiveIndex(newIndex) setActiveType(allMedia[newIndex].type) if (allMedia[newIndex].type === "image") onImageView?.() if (allMedia[newIndex].type === "video") onVideoPlay?.() if (allMedia[newIndex].type === "360") on360View?.() } const handleNext = () => { const newIndex = activeIndex === allMedia.length - 1 ? 0 : activeIndex + 1 setActiveIndex(newIndex) setActiveType(allMedia[newIndex].type) if (allMedia[newIndex].type === "image") onImageView?.() if (allMedia[newIndex].type === "video") onVideoPlay?.() if (allMedia[newIndex].type === "360") on360View?.() } const handleThumbnailClick = (index: number) => { setActiveIndex(index) setActiveType(allMedia[index].type) if (allMedia[index].type === "image") onImageView?.() if (allMedia[index].type === "video") onVideoPlay?.() if (allMedia[index].type === "360") on360View?.() } const toggleRotation = () => { setIsRotating(!isRotating) on360View?.() } const togglePlayPause = () => { if (videoRef.current) { if (isPlaying) { videoRef.current.pause() } else { videoRef.current.play() onVideoPlay?.() } setIsPlaying(!isPlaying) } } const toggleFullscreen = () => { if (videoRef.current) { if (!isFullscreen) { if (videoRef.current.requestFullscreen) { videoRef.current.requestFullscreen() } } else { if (document.exitFullscreen) { document.exitFullscreen() } } setIsFullscreen(!isFullscreen) } } const handleImageZoom = (e: React.MouseEvent) => { if (!imageRef.current || activeType !== "image") return const { left, top, width, height } = imageRef.current.getBoundingClientRect() const x = ((e.clientX - left) / width) * 100 const y = ((e.clientY - top) / height) * 100 setZoomPosition({ x, y }) } const handleImageZoomToggle = () => { setIsZoomed(!isZoomed) if (!isZoomed) onImageView?.() } const openLightbox = () => { setIsLightboxOpen(true) onImageView?.() } useEffect(() => { const handleVideoEnd = () => { setIsPlaying(false) } const videoElement = videoRef.current if (videoElement) { videoElement.addEventListener("ended", handleVideoEnd) } return () => { if (videoElement) { videoElement.removeEventListener("ended", handleVideoEnd) } } }, []) // Handle keyboard navigation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") { handlePrevious() } else if (e.key === "ArrowRight") { handleNext() } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [activeIndex]) return (

{/* Main Media Display */}

{/* Image View */} {activeType === "image" && (

{isZoomed &&

} )} {/* Video View */} {activeType === "video" && (

)} {/* 360 View */} {activeType === "360" && ( 360 degree view

{/* 360 Controls */}

)} {/* Navigation Arrows */}

{/* Expand Button */} {activeType === "image" && ( )}

{/* Media Type Tabs */} {(videos.length > 0 || threeSixtyView) && ( All Images Videos & 360°

{allMedia.map((media, index) => ( handleThumbnailClick(index)} aria-label={`View ${media.type === "image" ? "image" : media.type === "video" ? "video" : "360 view"}`} > {media.type === "video" && (

)} {media.type === "360" && (

)}

))}

{images.map((image, index) => { const globalIndex = allMedia.findIndex((m) => m.type === "image" && m.item.id === image.id) return ( handleThumbnailClick(globalIndex)} aria-label={`View ${image.alt}`} >

) })}

{videos.map((video, index) => { const globalIndex = allMedia.findIndex((m) => m.type === "video" && m.item.id === video.id) return ( handleThumbnailClick(globalIndex)} aria-label={`View video: ${video.title}`} >

) })} {threeSixtyView && ( m.type === "360") ? "ring-2 ring-blue-600 shadow-md scale-105" : "ring-1 ring-gray-200 hover:ring-blue-300 hover:shadow-sm", )} onClick={() => handleThumbnailClick(allMedia.findIndex((m) => m.type === "360"))} aria-label="View 360° view" >

)}

)} {/* Thumbnails (when no videos or 360 view) */} {videos.length === 0 && !threeSixtyView && (

{images.map((image, index) => ( handleThumbnailClick(index)} aria-label={`View ${image.alt}`} >

))}

)}

) } [V0_FILE]typescriptreact:file="components/products/financing-calculator.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { X, CreditCard, Info } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { motion } from "framer-motion" interface FinancingCalculatorProps { price: number onClose: () => void } export default function FinancingCalculator({ price, onClose }: FinancingCalculatorProps) { const [months, setMonths] = useState(24) const [downPayment, setDownPayment] = useState(0) const formatPrice = (amount: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount) } const calculateMonthlyPayment = () => { const financeAmount = price - downPayment return financeAmount / months } const monthlyPayment = calculateMonthlyPayment() return (

Financing Calculator

Term Length {months} months

setMonths(value[0])} className="py-2" />

6 months 36 months

Down Payment {formatPrice(downPayment)}

setDownPayment(value[0])} className="py-2" />

{formatPrice(0)} {formatPrice(price * 0.5)}

Product Price: {formatPrice(price)}

Down Payment: - {formatPrice(downPayment)}

Amount to Finance: {formatPrice(price - downPayment)}

Monthly Payment: {formatPrice(monthlyPayment)}

Term Length: {months} months

Interest Rate: 0% APR

Financing subject to credit approval. Minimum purchase required.

0% APR financing available for qualified customers. Minimum purchase of $1,000 required. Subject to credit approval. Monthly payment shown is equal to the purchase price (excluding taxes and shipping) divided by the number of months in the term.

) } [V0_FILE]typescriptreact:file="components/products/size-comparison.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { X, Ruler, UserIcon as Human, ChevronLeft, ChevronRight } from "lucide-react" import { motion } from "framer-motion" import type { Product } from "@/lib/types" import Image from "next/image" interface SizeComparisonProps { product: Product onClose: () => void } export default function SizeComparison({ product, onClose }: SizeComparisonProps) { const [activeView, setActiveView] = useState<"human" | "room" | "dimensions">("human") const getSpecValue = (name: string): string => { const spec = product.specifications.find((s) => s.name === name) return spec ? spec.value : "N/A" } const renderHumanComparison = () => (

Average adult height: 5'9" (175cm)

Product height: {getSpecValue("Plunge Only").split("x")[1].trim()}

) const renderRoomComparison = () => (

Recommended room space: 6' x 6' (1.8m x 1.8m)

Product footprint: {getSpecValue("Plunge + Chiller")}

) const renderDimensions = () => (

Plunge + Chiller

{getSpecValue("Plunge + Chiller")}

Plunge Only

{getSpecValue("Plunge Only")}

Interior Size

{getSpecValue("Interior Size")}

Step Size

{getSpecValue("Step Size")}

Dry Weight

{getSpecValue("Dry Weight")}

Filled Weight

{getSpecValue("Filled Weight")}

) return (

Size Comparison

{activeView === "human" && renderHumanComparison()} {activeView === "room" && renderRoomComparison()} {activeView === "dimensions" && renderDimensions()}

Note: Images are for illustrative purposes only. Please refer to the exact dimensions for accurate sizing.

) } [V0_FILE]typescriptreact:file="components/products/customer-photos.tsx" "use client" import { useState } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Instagram } from "lucide-react" import { Button } from "@/components/ui/button" import { motion, AnimatePresence } from "framer-motion" export default function CustomerPhotos() { const [activeIndex, setActiveIndex] = useState(0) // Mock customer photos const photos = [ { id: "1", url: "/placeholder.svg?height=400&width=400", username: "@coldplunge_enthusiast", caption: "Best investment I've made for my recovery routine! #coldplunge #recovery", }, { id: "2", url: "/placeholder.svg?height=400&width=400", username: "@fitness_pro", caption: "Morning routine with my new Cold Life plunge. Game changer! #wellness", }, { id: "3", url: "/placeholder.svg?height=400&width=400", username: "@athlete_recovery", caption: "Post-workout recovery just got upgraded. #coldtherapy #recovery", }, { id: "4", url: "/placeholder.svg?height=400&width=400", username: "@wellness_journey", caption: "Day 30 of my cold plunge challenge. Feeling amazing! #coldplunge", }, ] const handlePrevious = () => { setActiveIndex((prev) => (prev === 0 ? photos.length - 1 : prev - 1)) } const handleNext = () => { setActiveIndex((prev) => (prev === photos.length - 1 ? 0 : prev + 1)) } return (

Customer Photos

{/* Navigation Arrows */}

{photos[activeIndex].username}

{photos[activeIndex].caption}

Share your Cold Life experience with us by tagging #MyColdLife on Instagram for a chance to be featured!

{photos.map((photo, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/products/testimonials.tsx" isEdit="true" "use client" import Image from "next/image" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight, Quote } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { motion, AnimatePresence } from "framer-motion" interface Testimonial { id: string name: string title: string image: string quote: string } interface TestimonialsProps { testimonials: Testimonial[] } export default function Testimonials({ testimonials }: TestimonialsProps) { const [activeIndex, setActiveIndex] = useState(0) const [autoplay, setAutoplay] = useState(true) const handlePrevious = () => { setActiveIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1)) setAutoplay(false) } const handleNext = () => { setActiveIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1)) setAutoplay(false) } // Auto-rotate testimonials useEffect(() => { if (!autoplay) return const interval = setInterval(() => { setActiveIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1)) }, 5000) return () => clearInterval(interval) }, [testimonials.length, autoplay]) return (

Trusted by World-Class Athletes & Performers

{testimonials[activeIndex].quote}

{testimonials[activeIndex].name}

{testimonials[activeIndex].title}

{testimonials.map((_, index) => (

) } [V0_FILE]typescriptreact:file="components/products/benefits-grid.tsx" isEdit="true" "use client" import { Brain, Flame, Activity, Zap, Moon, Focus } from "lucide-react" import { motion } from "framer-motion" interface Benefit { title: string description: string icon: string } interface BenefitsGridProps { benefits?: Benefit[] } const icons = { Brain, Flame, Activity, Zap, Moon, Focus, } export default function BenefitsGrid({ benefits = [] }: BenefitsGridProps) { if (!benefits || benefits.length === 0) { return null } return (

{benefits.map((benefit, index) => { const Icon = icons[benefit.icon as keyof typeof icons] || Activity return (

{benefit.title}

{benefit.description}

) })}

) } [V0_FILE]typescriptreact:file="components/products/bundle-contents.tsx" isEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" interface BundleItem { name: string description: string image: string } interface BundleContentsProps { items?: BundleItem[] } export default function BundleContents({ items = [] }: BundleContentsProps) { if (!items || items.length === 0) { return null } const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 }, } return (

What's Included in Your Bundle

{items.map((item, index) => (

{item.name}

{item.description}

{index + 1}

))}

) } [V0_FILE]typescriptreact:file="components/products/trust-badges.tsx" isEdit="true" "use client" import { Shield, Truck, CreditCard, RefreshCw } from "lucide-react" import { motion } from "framer-motion" export default function TrustBadges() { const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } return (

10-Year Warranty

Industry-leading coverage

Free Shipping

On all US orders

30-Day Returns

Risk-free trial period

Secure Payment

SSL encrypted checkout

) }

About

Tags

Share

About

Tags

Share

More from yeazel

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yeazel

More Templates Like This