Price Calculator

网站 · SaaS · 免费
Price Calculator 预览

在云境TS 中打开并复制 →

内容预览

Recreate Project Estimation Calculator Section Create a full-width dark calculator section with id calculator-section. Background: bg-background, padding py-16 md:py-28 px-4 md:px-16, max-width max-w-7xl centered. Header: Centered. Small mono uppercase tracking-widest label "Try project estimation calculator" in text-muted-foreground. Below it, an h2: "Get premium website within your budget" — text-3xl md:text-4xl lg:text-5xl font-normal. Layout: 2-column grid (grid-cols-1 lg:grid-cols-2), rounded-2xl overflow-hidden, no gap. LEFT COLUMN (Calculator Form): Background #0D0D0D, padding p-8 lg:p-12, sections divided by divide-y divide-[#1E1E1E]. 4 sections separated by horizontal dividers: Service Type (radio buttons): h3 "What kind of service do you need?" — 3 options: "Only Design" (design), "Only Development" (development), "Design + Development" (both, default). Custom radio circles: w-5 h-5 rounded-full border-2, active = border-[#FF5656] with inner w-2 h-2 rounded-full bg-[#FF5656]. Number of Pages (slider): h3 with current value in #FF5656. Shadcn min=1, max=30, step=1, default=5. Labels "1" and "30" below. Add-ons (checkboxes): Two checkboxes with price labels on the right in #FF5656: "I will need help with content" → +$50/pages "I want to optimize my website for SEO" → +$50/pages Custom checkboxes: w-5 h-5 border-2 rounded, checked = border-[#FF5656] bg-[#FF5656] with white SVG checkmark. Timeline (radio buttons): h3 "How fast do you need this?" — 3 options with prices:

……(完整源码请在站内查看)