Create a multi-page, conversion-focused, SEO-friendly marketing website for Burns Law Offices, P.A. using React with Tailwind CSS, Lucide-react icons, Framer Motion animations, and standard routing (no one-page SPA). The website must feature clear navigation with crawlable routes for the following pages: Home (/), About (/about), Services (/services), Contact (/contact), Service Area (/service-area), and Case Studies (/case-studies) and Blog (/blog). Each page must strictly include sections in this order: Hero, Problem, Solution, Benefits/Features, Proof, FAQ, and CTA. All sections should use detailed conversion-oriented content with explicit instructions and technical integration notes as follows: 1. Home Page (/): - Hero: Use a split hero layout featuring a strong headline and subheadline that highlight Burns Law Offices’ trusted legal expertise, emphasizing Mergers and Acquisitions, Business Law, and Real Estate Law. Include a prominent booking button (primary CTA) linked directly to https://www.burnslawfl.com/contact. Specify that background visuals use art-directed imagery such as courthouse silhouette, column line art, or subtle legal documents texture, applying the corporate trust palette (navy, charcoal, white, and gold accents). - Problem: Present common legal challenges for entrepreneurs and business owners, especially regarding complex transactions, emphasizing uncertainty and the need for clear legal guidance. - Solution: Explain how Burns Law Offices provides clear, step-by-step legal services that balance responsiveness and cost-effectiveness. Emphasize integrated process steps. - Benefits/Features: Use a bento layout with mix-sized blocks to list benefits like trust, years of experience, and successful deal closures. Include icons (Lucide-react) with thin-line, consistent strokes. - Proof: Include a Proof Strip or Credibility Bar with credentials, partner logos, badges, and testimonials. Cite key metrics (years in business, cases closed, success rate) to improve trust. - Signature Moment: Timeline Rail: Immediately above the 'Special Instructions for the Home Page', embed one visually distinctive signature section titled "Signature Moment: Timeline Rail". This section must not be a generic 3-card grid. Instead, design a horizontal or vertical timeline rail that highlights key credibility moments (e.g., critical case wins, process milestones, and firm promises). Use subtle dividers, restrained motion, and an on-brand color scheme. - FAQ: Address common objections in the Professional Services niche, including pricing concerns, process reliability, and trust factors. Provide clear, confident answers. - CTA: Final call-to-action band with a primary booking button (linking to https://www.burnslawfl.com/contact) and a secondary friction-reducing CTA (like 'Request More Info'). 2. About Page (/about): - Hero: Use an editorial hero layout with a professional photograph (or art-directed silhouette) of the firm or founders, a concise mission statement, and trust indicators. - Problem: Briefly describe the common legal uncertainties businesses face. - Solution: Outline the firm’s approach focused on integrity, process clarity, and long-term partnership. - Benefits/Features: Use a values grid or bento features block to highlight the firm’s values and successful process outcomes. - Proof: Present a credibility section with key credentials, years of experience, and partner logos. - FAQ: Include legal and trust-related questions; handle objections with clear, outcome-focused responses. - CTA: Include a clear call-to-action for consultation requests. 3. Services Page (/services): - Hero: Use a services hero header that clearly identifies the three primary services: Mergers and Acquisitions, Business Law, and Real Estate Law. Include strong visuals tied to legal iconography (e.g., courthouse, scales of justice). - Problem: Outline the challenges in each area (complex transactions, contract negotiations, title issues). - Solution: Describe the firm’s specific approach for each service. Use sticky sidebar service detail components to allow users to scroll through different service descriptions while viewing a consistent benefits sidebar. - Benefits/Features: Incorporate a table-style comparison section that details features, process steps, and pricing tiers if applicable. Follow the design blueprint’s table-style section layout. - Proof: Use testimonials, trust badges, and metrics related to each service area. - FAQ: Address service-specific objections and process questions. - CTA: Final booking/consult call-to-action linking to the booking URL. 4. Contact Page (/contact): - Hero: Present a contact-focused hero with reassuring language and clear contact details. Use art-directed imagery consistent with the industry theme (e.g., legal documents, courthouse silhouettes). - Problem: Briefly mention the frustrations of dealing with legal ambiguities. - Solution: Communicate the ease and direct access Burns Law Offices offers through a simple form and integration with their booking system. - Benefits/Features: Outline support benefits, quick response times, and professional service delivery in a two-column layout mixing a form and supplementary info (phone: (305) 733-8223, service areas, and business hours 9-6 M-F). - Proof: Include a trust strip featuring social media links, partner logos, and client testimonials. - FAQ: Answer contact-specific questions and clarify process steps. - CTA: Prominent CTA band urging users to schedule a consultation. 5. Service Area Page (/service-area): - Hero: Detail the regions served (Miami, Palm Beach, Boca Raton, Fort Lauderdale) with a strong regional emphasis. - Problem: Describe geographical challenges or legal nuances in multiple regions. - Solution: Explain localized expertise and process customization for each area. - Benefits/Features: Use a grid layout (ensuring no more than one traditional 3-up card grid) that lists benefits per region, using icons and specific images (custom art-directed silhouettes or line-art maps). - Proof: Clear credentials and testimonials from clients in these areas. - FAQ: Address region-specific legal questions. - CTA: Direct CTA encouraging region-specific inquiries with a link to the booking/contact page. 6. Case Studies Page (/case-studies): - Hero: Use a compelling layout showcasing successful legal representations with case snapshots using art-directed visuals (e.g., subtle document imagery or legal icon compositions). - Problem: Summarize typical challenges faced before engaging Burns Law Offices. - Solution: Detail specific cases with a process timeline and outcomes. - Benefits/Features: Use a detailed testimonial and outcome narrative, employing a mix of textual outlines and infographic style statistics. - Proof: Prominently display performance metrics, partner logos, and client testimonials. - FAQ: Include questions on how case studies translate to client benefits and the process involved. - CTA: End with a strong call-to-action to book a consult (linking to https://www.burnslawfl.com/contact). 7. Blog Page (/blog): - Hero: Introduce the blog with an engaging title and short description about expert legal insights for business owners. Use subtle background textures (paper grain, courthouse silhouettes) as per design guidelines. - Problem: Explain why staying informed on legal trends is challenging for busy professionals. - Solution: Offer a range of detailed articles providing actionable professional services advice. Include internal links to service pages and case studies. - Benefits/Features: Highlight blog post categories and feature 3-6 starter blog ideas such as: 'Navigating Mergers and Acquisitions in a Changing Economy', 'Key Legal Considerations for Real Estate Transactions', 'How Business Law Protects Your Enterprise', 'Understanding Title Insurance and Real Estate Closings', 'Overcoming Contractual Challenges for Entrepreneurs', and 'Trust and Transparency in Legal Partnerships.' - Proof: Embed trust badges by linking to author credentials and relevant case studies. - FAQ: Provide common questions about blog content frequency, authorship, and content depth. - CTA: Conclude with a newsletter subscription form and a booking link for consultation. Technical and Design Requirements: - Use typography IBM Plex Sans for headings and Inter for body copy as per the design blueprint. Ensure consistent usage of these fonts via Google Fonts or next/font. - Follow the design pack 'corporate_trust', implementing grid overlays, clean lines, and a subtle paper grain background where needed. Ensure visuals are art-directed: use legal-centric silhouettes, thin-line icons, and minimal containers. - Navigation must be clean with distinct routes (not a SPA scroller). Integrate structured SEO data including unique Title tags, Meta Descriptions, and internal linking opportunities across pages. Contact page and Footer must incorporate business phone, location details, and business hours. - Footer must include social media icons with links to the provided LinkedIn, Facebook, and X profiles. - Enable booking integration on all CTAs where bookings are mentioned. Design interactive elements with subtle Framer Motion animations (e.g., scroll-into-view transitions) and interactive hover states with elevation only for clickable elements. - Provide editable text blocks with clear instructions for non-technical users to swap or update content. Special Instructions for the Home Page: Include the 'Signature Moment: Timeline Rail' section immediately above the standard 'Special Instructions for the Home Page:' heading. This section should be visually distinct, leveraging a timeline or steps rail that drives conversion by showcasing the firm’s key credibility moments and process milestones in a premium, conversion-oriented presentation. Ensure that every page strictly adheres to the order of sections (Hero, Problem, Solution, Benefits/Features, Proof, FAQ, CTA) using varied layouts as directed in the blueprint’s page pattern plan. Avoid using generic placeholders and always implement industry-themed, art-directed visual treatments. --- DESIGN BLUEPRINT (PASTE-FRIENDLY) PAGE PATTERN PLAN (from blueprint): - Home: Split Hero, Proof Strip, Zig-Zag Story Blocks, Bento Features (subtle), Process Steps Rail, FAQ, Final CTA Band - About: Editorial Hero, Values Grid, Credibility Section, Team/Founder Block, CTA Band - Services: Services Hero, Sticky Sidebar Service Detail, Comparison Table, Process Steps Rail, FAQ, CTA Band - Contact: Contact Hero, Two-Column Form + Info, Trust Strip, CTA Band TYPOGRAPHY (from blueprint): headings=IBM Plex Sans, body=Inter DO-NOT RULES (from blueprint): Do not use playful illustrations unless the business explicitly requests it. | Do not use oversized rounded cards everywhere. | Do not use an SPA scroller navigation, use real routes. DESIGN BLUEPRINT (JSON): {"design_pack_id":"corporate_trust","design_pack_name":"Corporate Trust","typography":{"headings":"IBM Plex Sans","body":"Inter"},"typography_pack":"ibm-plex-sans+inter","industry_package":"Trust-first corporate system: structured grid, high readability, conservative motion, credibility-forward sections.","industry_visual_theme":{"industry_slug":"law-firm","motifs":["courthouse silhouette","scales of justice","column architecture","legal documents","fountain pen","city skyline watermark"],"visual_style":"monochrome line-art or soft silhouette, no cartoons","iconography_rules":"Outline icons, consistent stroke weight, minimal containers","background_texture":"subtle paper grain or thin grid","placeholder_instructions":"If no images are provided, use courthouse silhouettes, column line art, and subtle document textures as hero and section visuals. Keep everything premium, calm, and high-trust."},"industry_profile":{"ui_label":"Professional Services","slug":"professional-services","tone_rules":["Confident, clear, trust-building, no fluff.","Lead with outcomes and process, then credibility."],"visual_rules":["Motifs: grid overlays, clean lines, subtle paper grain.","Imagery: silhouette or icon montage (desk, tools, courthouse, clipboard).","Icons: thin-line, consistent stroke, high clarity."],"section_priorities":{"Home":["Hero","Credibility bar","Problem/Solution","Services overview","Process","Proof","FAQ","CTA"]},"proof_types":["Credentials","Years of experience","Badges","Testimonials","Partner logos"],"cta_style":["Book consult","Request quote","Schedule call"],"signature_moment_defaults":["Process timeline rail","Packages comparison table","Sticky sidebar \u201cWhy us\u201d rail"]},"visual_rules":["Use strong typographic hierarchy, generous whitespace, and consistent alignment.","Prefer subtle backgrounds (light neutrals), thin borders, and restrained shadows.","Use icons sparingly and consistently (Lucide-react, same stroke weight).","Animations must be subtle and professional (Framer Motion, low distance, low duration)."],"depth_rules":["No loud gradients. If used, gradients must be extremely subtle.","Use elevation only for interactive elements (hover states, sticky nav)."],"layout_rules":["No more than one 3-up card grid section per page.","Every page must include at least 3 distinct section layout patterns (not repeated templates).","Use at least one table-style section (comparison or details) on Services."],"do_not_rules":["Do not use playful illustrations unless the business explicitly requests it.","Do not use oversized rounded cards everywhere.","Do not use an SPA scroller navigation, use real routes."],"signature_section":{"type":"Credibility Timeline Rail","instructions":"On Home, include one signature section that is NOT a card grid: a horizontal or vertical timeline rail that highlights key credibility moments (years of experience, case types, process milestones, or firm promises). Use subtle dividers and restrained motion. This section must feel intentional and premium, not generic."},"page_pattern_plan":{"home":["Split Hero","Proof Strip","Zig-Zag Story Blocks","Bento Features (subtle)","Process Steps Rail","FAQ","Final CTA Band"],"about":["Editorial Hero","Values Grid","Credibility Section","Team/Founder Block","CTA Band"],"services":["Services Hero","Sticky Sidebar Service Detail","Comparison Table","Process Steps Rail","FAQ","CTA Band"],"contact":["Contact Hero","Two-Column Form + Info","Trust Strip","CTA Band"]}}