可直接使用的提示词
原文
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 <Slider> 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:
"Within 7 Days" → +$100/pages
"Within 14 Days" → +$25/pages
"Regular Speed (Based on discussion)" → no extra cost (default)
RIGHT COLUMN (Cost Estimation): Padding p-8 lg:p-12, border border-white/10 rounded-r-2xl, min-height 717.98px.
h3 "Estimated Cost" + description paragraph.
3 stacked cards (rounded-2xl p-6 space-y-3):
Agency card: bg-muted/50. Title "Typical Agency charges minimum". Large price text-4xl font-bold. Subtitle: "+ Too much extra time & additional cost".
Freelancer card: bg-muted/50. Title "Regular Freelancer charges minimum". Large price text-4xl font-bold. Subtitle: "+ Too much headache & back-and-forth".
Your price card: bg-gradient-to-r from-pink-500 to-orange-500 text-white. Title "With Webfluin Studio". Price text-5xl font-bold. Subtitle: "Save your money, time & headache".
PRICING LOGIC:
calculatePrice():
Base prices by service:
design: base=399, perPage=100
development: base=199, perPage=100
both: base=499, perPage=200
total = max(base, base + (pages - 1) * perPage)
if needContent: total += pages * 50
if needSEO: total += pages * 50
if rush: total += pages * 100
if fast: total += pages * 25
calculateAgencyCost():
perPage = (both ? 1000 : 400)
return 8000 + (pages - 1) * perPage
calculateFreelancerCost():
perPage = (both ? 500 : 200)
return 3000 + (pages - 1) * perPage
All prices displayed with .toLocaleString() and $ prefix.
State: serviceType (design|development|both, default both), pages (number, default 5), needContent (bool), needSEO (bool), timeline (regular|fast|rush, default regular).
Dependencies: Shadcn Slider component, useToast hook.案例说明
面向SaaS 产品的定价与转化效果，以轮播切换、动态渐变组织视觉层次；适合用于网页原型、品牌展示与交互动效参考。
适用信息
适配模型：React + Tailwind CSS + Motion
难度：进阶
标签：网页特效、定价与转化、轮播切换、动态渐变、SaaS
来源：AI妙词（已获授权转载），原条目 ID 147。
