22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:Tc70,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: "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.24:T21e0,Build a "Projects / Case Studies" section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). White background, black text. Here is the exact specification: --- **Section Container:** - `

` with `relative bg-white text-black`, inline style `fontFamily: "'DM Sans', sans-serif"` - All animations use easing `[0.22, 1, 0.36, 1]` - Inject a `

Price Calculator

Pixel Grid Hover

No-Code Waitlist

Finlytic AI Agent

ADHD Planner

LaunchEx Submissions

Inner Quest

Automation Machines

Dark Portfolio Hero

Radial Diagram

Innovation

Luxury Hero

Bio-Age Dashboard

Cognitra Feature

NexaCore Process

FAQ CTA

Sync AI

USD Halo

Rocket Pricing

Fun 404 Page