4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T9092,import { useState, useEffect } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Slider } from '@/components/ui/slider'; import { Switch } from '@/components/ui/switch'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import { InfoIcon, CheckIcon, ShoppingCartIcon, Share2Icon, HeartIcon, } from 'lucide-react'; export default function HeroFormProductCustomizer() { // Product state const [product, setProduct] = useState({ name: 'Custom Ergonomic Chair', basePrice: 299, color: 'black', material: 'fabric', armrests: true, headrest: false, lumbarSupport: true, height: 5, // 1-10 scale recline: 3, // 1-5 scale quantity: 1, }); // UI state const [totalPrice, setTotalPrice] = useState(0); const [orderComplete, setOrderComplete] = useState(false); const [isLoading, setIsLoading] = useState(false); // Calculate price based on options useEffect(() => { let price = product.basePrice; // Add costs for premium options if (product.material === 'leather') price += 100; else if (product.material === 'mesh') price += 50; if (product.headrest) price += 45; if (product.lumbarSupport) price += 35; // Multiply by quantity price *= product.quantity; setTotalPrice(price); }, [product]); // Get image URL based on product configuration const getProductImageUrl = () => { let baseImage = ''; // Select base image based on color and material if (product.material === 'leather') { if (product.color === 'black') { baseImage = 'https://images.unsplash.com/photo-1580480055273-228ff5388ef8?q=80&w=2000&auto=format&fit=crop'; } else if (product.color === 'brown') { baseImage = 'https://images.unsplash.com/photo-1592078615290-033ee584e267?q=80&w=1964&auto=format&fit=crop'; } else { baseImage = 'https://images.unsplash.com/photo-1505843490701-5c4b83790555?q=80&w=1918&auto=format&fit=crop'; } } else if (product.material === 'mesh') { baseImage = 'https://images.unsplash.com/photo-1596079890701-dd42edf0b7d4?q=80&w=2071&auto=format&fit=crop'; } else { // Fabric chair if (product.color === 'black') { baseImage = 'https://images.unsplash.com/photo-1505843513577-22bb7d21e455?q=80&w=2069&auto=format&fit=crop'; } else if (product.color === 'blue') { baseImage = 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=2158&auto=format&fit=crop'; } else { baseImage = 'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?q=80&w=1974&auto=format&fit=crop'; } } return baseImage; }; // Handle form submission const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); // Simulate API call setTimeout(() => { setIsLoading(false); setOrderComplete(true); }, 1500); }; return ( <> {/* Hero */}

Customizable Product

Design Your Perfect Chair

Customize every detail to create a chair that matches your exact needs, comfort preferences, and style.

{!orderComplete ? (

{/* Product Preview */}

{product.name}

Your custom configuration

${totalPrice}

Free shipping

Selected Options

Color: {product.color}

Material: {product.material}

Armrests: {product.armrests ? 'Yes' : 'No'}

Headrest: {product.headrest ? 'Yes' : 'No'}

Lumbar Support: {product.lumbarSupport ? 'Yes' : 'No'}

Height: {product.height}/10

Recline: {product.recline}/5

Quantity: {product.quantity}

Product Features

5-year warranty on all parts
Easy assembly with included tools
Certified eco-friendly materials
30-day risk-free trial

{/* Customization Options */}

Customize Your Chair Select your preferred options and features

{/* Color Selection */}

Color setProduct({ ...product, color: value }) } className="flex gap-3" >

{product.color === 'black' && ( )}

{product.color === 'blue' && ( )}

{product.color === 'brown' && ( )}

{product.color === 'gray' && ( )}

{/* Material Selection */}

Material

Material Details:

Fabric: {' '} Breathable and comfortable, standard option.
Mesh:{' '} Better airflow, ideal for warmer environments (+$50).
Leather: {' '} Premium look and feel, more durable (+$100).

setProduct({ ...product, material: value }) } className="grid grid-cols-3 gap-3" >

Fabric Standard

Mesh +$50

Leather +$100

{/* Optional Features */}

Features

Armrests

Adjustable height and width

setProduct({ ...product, armrests: checked }) } />

Headrest

Additional head support (+$45)

setProduct({ ...product, headrest: checked }) } />

Lumbar Support

Adjustable back support (+$35)

setProduct({ ...product, lumbarSupport: checked, }) } />

{/* Adjustments */}

Adjustments

Chair Height {product.height}/10

setProduct({ ...product, height: values[0]! }) } />

Lower Higher

Recline Tension {product.recline}/5

setProduct({ ...product, recline: values[0]! }) } />

Soft Firm

{/* Quantity */}

Quantity

{ const value = parseInt(e.target.value); if ( !isNaN(value) && value >= 1 && value <= 10 ) { setProduct({ ...product, quantity: value }); } }} />

Total

${totalPrice}

) : (

Order Added to Cart! Your custom chair has been added to your cart.

{product.name}

Custom configuration

{product.color.charAt(0).toUpperCase() + product.color.slice(1)} ,{' '} {product.material.charAt(0).toUpperCase() + product.material.slice(1)} {product.headrest ? ', with headrest' : ''}

Qty {product.quantity}

${totalPrice}

Subtotal ${totalPrice}

Shipping Free

Tax (estimated) ${Math.round(totalPrice * 0.0725)}

Total ${totalPrice + Math.round(totalPrice * 0.0725)}

)}

{/* End Hero */} ); } 53:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 54:T69c,"use client" import * as React from "react" import { RadioGroup as RadioGroupPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function RadioGroup({ className, ...props }: React.ComponentProps) { return ( ) } function RadioGroupItem({ className, ...props }: React.ComponentProps) { return ( ) } export { RadioGroup, RadioGroupItem } 55:T719,"use client" import * as React from "react" import { Slider as SliderPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps) { const _values = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max] ) return ( {Array.from({ length: _values.length }, (_, index) => ( ))} ) } export { Slider } 56:T6de,"use client" import * as React from "react" import { Switch as SwitchPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Switch({ className, size = "default", ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( ) } export { Switch } 57:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 58:T83f,"use client" import * as React from "react" import { Tooltip as TooltipPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) { return ( ) } function Tooltip({ ...props }: React.ComponentProps) { return } function TooltipTrigger({ ...props }: React.ComponentProps) { return } function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps) { return ( {children} ) } export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 59:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-hero-forms-product-customizer-form.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-hero-forms-product-customizer-form","itemId":"@shadcn-ui-blocks/marketing-hero-forms-product-customizer-form"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/marketing/hero-forms/product-customizer-form.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/hero-forms/product-customizer-form.tsx"},{"path":"components/ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/radio-group.tsx","content":"$54","type":"registry:ui","target":"components/ui/radio-group.tsx"},{"path":"components/ui/slider.tsx","content":"$55","type":"registry:ui","target":"components/ui/slider.tsx"},{"path":"components/ui/switch.tsx","content":"$56","type":"registry:ui","target":"components/ui/switch.tsx"},{"path":"components/ui/card.tsx","content":"$57","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tooltip.tsx","content":"$58","type":"registry:ui","target":"components/ui/tooltip.tsx"},{"path":"components/ui/badge.tsx","content":"$59","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/separator.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Separator };\n","type":"registry:ui","target":"components/ui/separator.tsx"}]}]]}],"$L5a"]}]

Product Customizer Form

Installation

Files

components

Styles