regal-idea

As a frontend developer, implement the ServicesHero section for the Services page. Uses framer-motion with two animation variants: `stagger` (staggerChildren 0.14, delayChildren 0.2) wrapping `fadeUpScale` (opacity 0→1, y 32→0, scale 0.96→1, cubic-ease 0.6s) for the text block, and `brushReveal` custom variant (opacity + scale + clipPath 'inset(0 100% 0 0)'→'inset(0 0% 0 0)', spring ease [0.34,1.56,0.64,1]) for icon cards. Three decorative blobs rendered as `sh-bg-blob` divs. Text block contains: `sh-badge` span with `sh-badge-dot` pulse indicator and 'Our Services' label, h1 headline with `<em>Your Business</em>`, and a subhead paragraph. Icon row maps `servicesIcons` array of 4 items (Palette/Logo Design/blue, Globe/Websites/coral, PenTool/Branding/teal, Megaphone/Marketing/purple) — each card has `sh-icon-circle` with gradient class, icon at size 24 strokeWidth 1.8, label, and `sh-brush-line` span with dynamic width from `brushWidth` property.

As a frontend developer, implement the ServicesGrid section for the Services page. Renders a 6-card grid from a static `services` array: Logo Design (Palette), Website Creation (Globe), Branding (PenTool), Digital Marketing (TrendingUp), Content Writing (FileText), Mobile Optimization (Smartphone) — each with title, description, and category badge. Uses `cardVariants` framer-motion variant with `whileInView` trigger: hidden state has opacity 0, y 48, scale 0.94, and clipPath 'inset(0 100% 0 0)'; visible state animates all to natural values with staggered delay (i * 0.12) and separate clipPath transition (0.65s, [0.65,0,0.35,1] ease). Section header has three separate `whileInView` motion elements (sg-label, sg-title, sg-subtitle) with viewport margin '-60px' and `once: true`. All icons imported from lucide-react with ArrowRight also imported for potential card CTAs.

As a frontend developer, implement the ServicesFeatures section for the Services page. Defines a `features` array of 3 objects (Custom Design/Palette, Fast Turnaround/Zap, Unlimited Revisions/RefreshCw) each with num ('01','02','03'), title, icon, desc, and points array (3 bullet points each). Uses a `FeatureBlock` sub-component that accepts feature, index, reverse, and inViewRef props — internally calls `useInView(inViewRef, { once: true, margin: '-80px 0px' })` and drives `blockVariants` animation (opacity 0→1, y 48→0, 0.55s ease). Each block has `sf-reverse` class for alternating layout. Visual side contains `sf-icon-wrap` with `sf-icon-glow` div and dynamic Icon component (strokeWidth 1.8). Content side has sf-feature-num, sf-feature-title, sf-feature-desc, and `sf-feature-points` ul where each li has a CheckCircle icon (strokeWidth 2) and span text. Parent `ServicesFeatures` creates a `listRef` via useRef passed to FeatureBlocks. Section has `sf-header` with sf-badge, sf-title, sf-subtitle.

As a frontend developer, implement the ServicesPricing section for the Services page. Renders 3 pricing tiers from `pricingTiers` array: Logo Design (₹2,499, 5 features, popular: false, delay 0), Website Creation (₹8,999, 6 features, popular: true, delay 0.12), Full Branding Package (₹16,499, 6 features, popular: false, delay 0.24). Popular card receives `spp-popular` CSS class. Uses `cardVariants` framer-motion variant (hidden: opacity 0, y 40; visible: opacity 1, y 0 with custom delay prop via `custom={tier.delay}`). Features list uses `featureVariants` with x: -10→0 stagger (delay: 0.35 + i * 0.06) and Check icon from lucide-react. Section has two decorative blobs (`spp-decor-blob`, `spp-decor-blob-right`). Header block uses `whileInView` with viewport margin '-60px' and once: true, containing `spp-section-label`, h2 `spp-title`, and `spp-subtitle`. Cards use `whileInView` with `viewport={{ once: true, margin: '-80px' }}`.

As a frontend developer, implement the ServicesCTA section for the Services page. Uses useRef + useInView (once: true, margin: '-80px') to drive all animations from a single `inView` boolean. Animation variants: `brushReveal` (opacity + clipPath 'inset(0 100% 0 0)'→'inset(0 0% 0 0)', 0.7s ease); `fadeUp` (opacity 0→1, y 28→0, 0.6s); `stagger` (staggerChildren 0.16, delayChildren 0.2). Three decorative `scta-decor` divs (top, bottom, stroke). Motion div `scta-inner` uses stagger variant with `animate={inView ? 'visible' : 'hidden'}`. h2 headline 'Ready to Elevate Your Brand?' wrapped in brushReveal motion div with `overflow: hidden`. `scta-accent-line` span separator. Subhead paragraph with fadeUp variant. Actions div contains two motion.a elements with `whileHover={{ scale: 1.03 }}` and `whileTap={{ scale: 0.97 }}`: WhatsApp button (MessageCircle size 20, external link to wa.me/919876543210, `scta-btn--whatsapp` class) and Send Inquiry button (Send size 18, href='/Contact', `scta-btn--inquiry` class).

As a frontend developer, implement the Footer section for the Services page. Uses a `ftr-decor` decorative div. Four-column layout: Brand column (`ftr-brand-col`) with Palette icon (size 20, strokeWidth 2.2) logo mark, 'regal-idea' text, tagline paragraph, and social icons row mapping 4 socials (Instagram, LinkedIn, Dribbble, Twitter from lucide-react) as `ftr-social` anchors with external target and aria-label. Nav column (`ftr-nav-col`) with 'Explore' h4 title and ul of navLinks (Portfolio, Services, Contact) as `ftr-link` anchors. Contact column (`ftr-contact-col`) with 'Get in Touch' h4, email link (hello@regalidea.studio with Mail icon), and WhatsApp link (+1 555 042-7788 with MessageCircle icon, external to wa.me/15550427788). CTA column (`ftr-cta-col`) with 'Start a...' h4 (truncated in source). Dynamic `year` via `new Date().getFullYear()`. Note: this component likely already exists from Portfolio/Contact pages; reuse or verify consistency.

As a frontend developer, implement the PortfolioHero section for the Portfolio page. Uses `useRef` (sectionRef), `useInView` from framer-motion with `{ once: true, margin: '-80px' }`, `useAnimation`, and `useState` (headlineRevealed) to trigger reveal animations on scroll entry. Renders decorative background layers: `ph-bg-glow`, `ph-bg-accent`, `ph-bg-dots`, four `ph-paint-splatter` divs (s1–s4), and two `ph-brush-mark` SVG elements (top-right and bottom-left) with quadratic bezier `<path>` strokes using `var(--accent)` and `var(--primary_light)`. Headline words ['My', 'Portfolio'] are each wrapped in `<motion.span>` using `wordVariants` with staggered delay (`0.15 + i * 0.10`), opacity/y/blur transitions. Subheadline uses `subheadlineVariants` (delay 0.6). Breadcrumb uses `breadcrumbVariants` (x: -12 → 0, delay 0.05). An SVG brushstroke overlay uses `brushVariants` animating `pathLength` from 0 to 1 along `brushstrokePath` (a long multi-point quadratic bezier Q path). Overline uses `overlineVariants` with scaleX animation. Imports PortfolioHero.css for all `ph-*` class styling. framer-motion and lucide-react are dependencies.

As a frontend developer, implement the PortfolioGalleryGrid section for the Portfolio page. Uses `useState` for active category filter and `useMemo` to derive filtered projects from the `PROJECTS` array (9 entries: Serenity Spa, Bloom Bakery, Apex Coaching, Willow & Sage, Brew & Barrel, Elevate Fitness, Golden Hour Photography, Hearth & Home Interiors, CodeCraft Academy). Each project has title, category, desc, img (null — uses placeholder SVG), and color. Filter tabs use `ALL_CATEGORIES` array ['All', 'Logo Design', 'Branding', 'Website Design']. `AnimatePresence` from framer-motion wraps the grid for enter/exit animations on filter change. A `CardPlaceholder` sub-component renders category-specific inline SVGs: Logo Design shows a dashed-circle star path, Branding and Website Design have their own SVG variants, all using the project's `color` prop. Each card shows an `<Eye>` icon from lucide-react on hover. Imports PortfolioGalleryGrid.css for all grid and card styling.

As a frontend developer, implement the PortfolioCaseStudies section for the Portfolio page. Uses `useState` (visibleSet as a Set), `useRef` (cardRefs array), `useEffect`, and `useCallback` for IntersectionObserver-based scroll reveal of 3 case study cards. The `CASE_STUDIES` array contains: Blissful Beauty Salon (Palette icon, results: 214% bookings increase, 4.7× ROI), Golden Crust Bakery (ShoppingBag icon, results: 58% revenue increase, 3.2× AOV lift), Horizon Coaching Center (Globe icon, results: 89% organic traffic growth, 140+ new inquiries). Each card uses `motion` from framer-motion and displays client name, headline, tags array, challenge/solution text blocks, and a results grid with `val` and `label` fields. Icons (ArrowRight, Palette, Globe, ShoppingBag) are imported from lucide-react. The `handleIntersection` callback adds card index to `visibleSet` to trigger per-card entrance animations. Imports PortfolioCaseStudies.css for all `pcs-*` class styling.

As a frontend developer, implement the PortfolioCTA section for the Portfolio page. Uses `useRef` (sectionRef), `useInView` with `{ once: true, margin: '-80px' }`, `useMotionValue`, `useSpring`, and `useTransform` from framer-motion. Renders a `stats` array of 4 animated counters: Projects (50+), Happy Clients (30+), Industries (12+), Years XP (5). The `AnimatedNumber` sub-component uses `useMotionValue(0)`, `useSpring` with `{ stiffness: 60, damping: 20 }`, and `useTransform` to display a rounded integer, triggered when the element enters the viewport via `useInView`. The `MagneticButton` sub-component tracks mouse position relative to element center via `getBoundingClientRect()`, applies `useMotionValue` x/y offsets scaled by `magneticStrength = 0.35`, and resets on `onMouseLeave`. The main section uses `containerVariants` (staggerChildren: 0.14, delayChildren: 0.1) and `itemVariants` (y: 28 → 0 spring) for staggered reveal. Background uses `pcta-bg`, `pcta-bg-layer`, `pcta-bg-brush`, `pcta-bg-brush2` divs. Includes `pcta-accent-line`, `pcta-headline`, ArrowRight and MessageCircle lucide icons. Imports PortfolioCTA.css for all `pcta-*` class styling.

As a backend developer, implement the POST /api/v1/contact endpoint using FastAPI to receive contact form submissions. Accept JSON body with fields: name (str), email (str), phone (str, optional), service (str), message (str), honeypot (str). Validate inputs server-side (email regex, phone regex if provided), reject honeypot-filled requests silently, persist submissions to the MySQL `contact_inquiries` table, and return 201 on success or 422 on validation failure. Also implement GET /api/v1/health for service health checks. Include CORS middleware configured for the frontend origin. Note: Frontend task d3b2bc58-9549-42e3-9263-5e0a54f6e017 (ContactForm) depends on this endpoint.

As a backend developer, implement GET /api/v1/portfolio/projects endpoint using FastAPI to serve portfolio project data. Returns a list of project objects with fields: id, title, category, description, image_url, color, sort_order. Implement GET /api/v1/portfolio/projects/{id} for a single project. Support optional query param ?category= for filtering. Data is seeded from the 9 static projects defined in the frontend (Serenity Spa, Bloom Bakery, Apex Coaching, etc.). Also provide GET /api/v1/portfolio/case-studies to serve the 3 case study objects (Blissful Beauty Salon, Golden Crust Bakery, Horizon Coaching Center) with all fields. Note: Frontend tasks b27dbe6b (PortfolioGalleryGrid) and 11b3a9e5 (PortfolioCaseStudies) depend on this endpoint.

As a frontend developer, set up React Router v6 for the regal-idea application and implement the App shell. Configure routes: / → Home, /Services → Services page, /Portfolio → Portfolio page, /Contact → Contact page. Implement lazy loading (React.lazy + Suspense) for each page component to meet the 3-second load requirement. Set up the main App.jsx with the router, scroll-to-top on route change, and a shared page wrapper. Ensure the Navbar/Header component from existing tasks (c762d41a, 5594d5e3) is rendered as a shared layout element. Configure the WhatsApp floating button as a global persistent element visible on all pages (mobile). Verify all CTA navigation links (/Portfolio, /Services, /Contact) resolve correctly across all section components.

As a frontend developer, set up the API client layer for the regal-idea React application. Create src/api/client.js (or .ts) using axios or fetch with the FastAPI base URL configured via environment variable (REACT_APP_API_URL). Implement: (1) contactApi.submitInquiry(formData) — POST /api/v1/contact, returns promise. (2) portfolioApi.getProjects(category?) — GET /api/v1/portfolio/projects with optional category filter. (3) portfolioApi.getCaseStudies() — GET /api/v1/portfolio/case-studies. Handle request/response interceptors for error normalization. Export typed response interfaces. The ContactForm component (task d3b2bc58) must replace its simulated setTimeout API call with contactApi.submitInquiry(). PortfolioGalleryGrid (task b27dbe6b) should optionally fetch from portfolioApi if data is not static.

As a Tech Lead, verify the end-to-end integration between the Contact page frontend implementation and the Contact Inquiry backend API. Ensure the ContactForm component (task d3b2bc58) correctly calls the POST /api/v1/contact endpoint via the API client (task frontend-api-client), form validation errors are handled both client-side and from API 422 responses, success/error banners display correctly based on real API responses, the honeypot field is submitted but filtered server-side, and submitted inquiries are persisted to the contact_inquiries MySQL table. Verify CORS headers allow the React frontend origin. Test on both desktop and mobile.

As a Tech Lead, verify the end-to-end integration between the Portfolio page frontend sections and the Portfolio backend API. Ensure PortfolioGalleryGrid (task b27dbe6b) and PortfolioCaseStudies (task 11b3a9e5) correctly fetch data from GET /api/v1/portfolio/projects and GET /api/v1/portfolio/case-studies respectively via the API client (task frontend-api-client). Verify category filtering works correctly end-to-end, loading states are shown while fetching, error states are handled gracefully if the API is unavailable, and seed data matches the static data defined in frontend components. Confirm animated entrance effects still trigger correctly after async data load.