Price Calculator

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.