sharp-bot
Ronak PatelCreate a premium, professional B2B landing page for "Immigro Services", a premier backend legal support agency that provides technical and administrative assistance to North American legal practices. Use a sophisticated color palette: Deep Navy Blue (#0F172A) as the primary color to build trust, Clean Slate Gray/White for backgrounds, and a sharp Amber Gold (#D97706) for strategic call-to-action buttons. The design should look clean, minimalist, corporate, and highly secure. Include the following sections and copy: 1. HERO SECTION: - Main Headline: Scale Your Law Practice with Elite Backend Support. - Subheadline: We handle the administrative heavy lifting, data entry, and technical management so your attorneys can focus on winning cases. Tailored operations for North American law firms. - Primary CTA Button: Schedule a Discovery Call - Secondary CTA Button: Explore Our Services 2. VALUE PROPOSITION (3-Column Grid): - Card 1: Reduce Overhead Costs. Cut administrative expenses by outsourcing time-consuming backend tasks to a dedicated, trained team. - Card 2: Technical Precision. Expert management of legal tech platforms, CRMs, and case management software without the learning curve. - Card 3: Enterprise-Grade Security. Strict confidentiality protocols and secure file management designed to meet the high standards of legal data privacy. 3. SERVICES SECTION (List or Grid with Icons): - Service 1: Administrative Support (Document preparation, data entry, intake coordination, and calendar management). - Service 2: Legal Tech & CRM Management (System updates, case management software maintenance, and technical workflow optimization). - Service 3: Quality Control & Compliance (Meticulous file auditing and administrative checklist verification). 4. SECURITY & CONFIDENTIALITY BANNER: - Headline: Your Data is Safe With Us. - Text: We operate with strict non-disclosure agreements (NDAs) and use end-to-end encrypted workflows to ensure absolute data privacy and compliance. 5. FINAL CALL TO ACTION (CTA): - Headline: Ready to Optimize Your Practice’s Operations? - Text: Let’s discuss how Immigro Services can seamlessly integrate with your existing workflows. - Button: Contact Our Team Today 6. FOOTER: - Text: © 2026 Immigro Services. All rights reserved. Backend Technical & Administrative Legal Support.
Comments (0)
Sign in to leave a comment
Project Tasks15
Implement Navbar for Landing
As a frontend developer, implement the Navbar section for the Landing page. The component uses useState(false) for `scrolled` state and a useEffect scroll listener (passive, cleaned up on unmount) that sets scrolled=true when window.scrollY > 30, toggling the `ln-navbar--scrolled` CSS class. Renders a fixed nav with an SVG shield logo linking to #hero, three anchor nav-links (#value-props, #services, #security), and a CTA button linking to #contact with an inline arrow SVG. All styles via Navbar.css using ln-navbar BEM classes. This component may already exist if shared across pages.
Implement CTASection for Landing
As a frontend developer, implement the CTASection section for the Landing page. Renders a `ln-cta` section (id=contact) with a decorative background of three `ln-cta__shape` divs and an inline SVG with three sinusoidal path strokes using rgba amber/gold/steel-blue colors. Content area includes: a `ln-cta__icon-wrap` with a 40×40 shield+checkmark SVG using `cta-shield` linearGradient (amber-to-gold), an eyebrow span ('Get Started Today'), an h2 heading, a descriptive paragraph about Canadian/USA law firms, an `<a href=mailto:info@immigroservices.com>` CTA button with arrow SVG, and a `ln-cta__trust-row` with trust chips (Free Consultation, and others) each with a green checkmark SVG. Applies `ln-reveal` class for scroll-reveal animation. Uses CTASection.css (4198 chars).
Contact Form Submission API
As a Backend Developer, implement a FastAPI endpoint POST /api/v1/contact that accepts visitor contact form submissions (name, email, phone, message, firm_name). Validate input with Pydantic models, store submissions in MySQL/MariaDB via SQLAlchemy ORM, and return appropriate success/error responses. Include rate limiting to prevent abuse. This API supports the CTASection contact functionality on the Landing page.
Contact Submissions DB Migration
As a Backend Developer, create the database model and Alembic migration for the contact_submissions table with fields: id (PK), name, email, phone, firm_name, message, created_at, ip_address. Run alembic init if not already set up and generate the initial migration script. Ensure the migration is reversible (upgrade/downgrade). Required before the contact API endpoint can persist data.
FastAPI CORS and Middleware Setup
As a Backend Developer, configure FastAPI application with CORS middleware allowing requests from the React frontend origin, set up global exception handlers, request logging middleware, and health check endpoint GET /api/health. Configure environment-based settings using pydantic-settings for DATABASE_URL, CORS_ORIGINS, and other config values. This is a prerequisite for all API endpoints.
Design System and Theme Setup
As a Frontend Developer, establish the global design system for the Landing page including: CSS custom properties (variables) for all color tokens (Deep Navy #0F172A, Amber Gold #D97706, Soft Gold #FFD700, etc.), typography scale, spacing system, and shared animation utilities (ln-reveal scroll-reveal class, parallax CSS custom properties). Create a global CSS/SCSS base file imported by all section components. Ensure WCAG 2.1 AA color contrast compliance. Note: This task must be completed before section implementation tasks (0d79299e, 500df8f2, ab2669a8, d085acef, dc2b90a5, f0b5a5db, ff4210f5).
Implement HeroSection for Landing
As a frontend developer, implement the HeroSection section for the Landing page. Renders a full-viewport `ln-hero` section with a layered decorative background comprising four `ln-hero__shape` divs, a `ln-hero__grid` div, and a large 820×820 SVG (`ln-hero__deco-svg`) containing concentric circles (r=400, r=340 with stroke-dasharray, r=280), a centered shield path with checkmark, corner accent marks, and floating dot circles — all using rgba amber/gold/steel-blue color tokens. Content area includes a `ln-hero__badge` with an animated `ln-hero__badge-dot` pulse indicator and trust text, an h1 with `ln-hero__title-accent` gradient span, a subtitle paragraph, and CTA button links. CSS (7570 chars) handles parallax via CSS custom properties and reveal animations via `ln-reveal` class.
Implement ValuePropSection for Landing
As a frontend developer, implement the ValuePropSection section for the Landing page. Renders a `ln-value-props` section (id=value-props) mapping over a `valueProps` array of 3 objects, each with an inline SVG icon using unique linearGradient defs (vp-grad-1, vp-grad-2, vp-grad-3) with amber-to-gold stops, a title, and a description. The three value props are: Dedicated Legal Teams (dual-circle people SVG), Scalable On Demand (trend-line chart SVG), and Uncompromising Security (shield with checkmark SVG). Card layout uses BEM class `ln-vp__card`. CSS (4732 chars) handles grid layout and card hover states.
Implement ServicesSection for Landing
As a frontend developer, implement the ServicesSection section for the Landing page. Renders a `ln-services` section (id=services) mapping over a `services` array of at least 5 service objects, each with an inline SVG icon (30×30), a title, and a description string. Services include: Canadian Immigration Case Management (document with badge SVG), Document Preparation & Review (file-check SVG), Legal Research & Analysis (search-plus SVG), Client Communication Support (envelope SVG), and additional services. Each card uses BEM class `ln-svc__card`. Uses ServicesSection.css (4602 chars) for grid/card layout.
Implement SecurityBanner for Landing
As a frontend developer, implement the SecurityBanner section for the Landing page. Renders a `ln-security` section (id=security) with a decorative background (two shape divs + inline SVG). Maps over a `secPoints` array of 4 objects, each with a pre-rendered JSX SVG icon (26×26), a title, and a description. Security points: NDA Protection (padlock SVG), SOC 2 Type II Compliant (shield-check SVG), AES-256 Encryption (credit-card SVG), and HIPAA-Ready Operations (globe/target SVG). Cards use BEM class `ln-security__card`. SecurityBanner.css (4386 chars) handles layout, card styles, and background decorations.
Implement Footer for Landing
As a frontend developer, implement the Footer section for the Landing page. Renders a `ln-footer` element with a three-column `ln-footer__grid`. Column 1 (brand): SVG shield logo with `ft-shield` linearGradient, brand name 'Immigro Services', brand description paragraph, and three badge spans (SOC 2, NDA Protected, HIPAA Ready). Column 2 (Navigation links): h4 heading and a `<ul>` of anchor links to #value-props, #services, #security, each with a 12×12 arrow SVG icon. Column 3 (additional links/contact). Footer bottom bar displays `currentYear` via `new Date().getFullYear()`. This component may already exist if shared across pages. Uses Footer.css (4165 chars).
Parallax Scroll Animation Utility
As a Frontend Developer, implement the parallax scroll interaction model as a shared React hook (useParallax) and scroll-reveal utility (useScrollReveal). The parallax hook updates CSS custom properties on scroll for layered depth effect — decorative elements translate at different speeds while real content stays in normal flow. The scroll-reveal utility adds/removes the ln-reveal class as sections enter the viewport using IntersectionObserver. Integrate framer-motion for the 'Legal Precision' book-spine animations described in the Signature Design Concept. This utility is shared across all Landing page sections.
Frontend Performance Optimization
As a Frontend Developer, optimize the Landing page to meet the 3-second load time requirement on standard broadband. Tasks include: lazy-loading below-the-fold sections with React.lazy/Suspense, optimizing SVG assets (SVGO), enabling code splitting via Vite/webpack config, configuring proper caching headers, and auditing with Lighthouse. Target LCP < 2.5s, CLS < 0.1, FID < 100ms. Note: Depends on all section implementation tasks being complete (0d79299e, 500df8f2, ab2669a8, d085acef, dc2b90a5, f0b5a5db, ff4210f5).
WCAG 2.1 AA Accessibility Audit
As a Frontend Developer, audit and remediate the Landing page for WCAG 2.1 AA compliance. Ensure: all images/SVGs have aria-labels or alt text, interactive elements have keyboard focus styles, color contrast ratios meet 4.5:1 for normal text and 3:1 for large text, skip navigation link is present, and aria-landmarks are used for all major sections (hero, main, nav, footer). Run axe-core or similar automated tool and fix all critical/serious violations. Note: Audit should be performed after all section tasks complete.
Integrate CTA Contact Form API
As a Tech Lead, verify the end-to-end integration between the CTASection frontend implementation (ff4210f5) and the Contact Form Submission API backend (temp_backend_contact_api). Ensure the mailto CTA link and any contact form correctly submits to POST /api/v1/contact, API responses are handled properly in the UI with success/error feedback, rate limiting is respected, and the contact submission flow works end-to-end in the Docker environment. Validate that CORS is correctly configured between React frontend and FastAPI backend.
No comments yet. Be the first!