Shakir graphics

As a frontend developer, implement the HomeHero section for the Home page. Build the MagneticButton sub-component using useRef, useMotionValue, useSpring (stiffness:300, damping:20, mass:0.5), and useTransform from framer-motion to create a magnetic cursor-tracking CTA button. Implement handleMouseMove that computes delta from button center and applies 0.25 multiplier to x/y springs. Add parallax background layer (--scroll CSS var, translateY speed 0.3) with 9 decorative shape divs (hh-shape--circle-1/2/3, hh-shape--dot, hh-shape--bar-1/2/3, hh-shape--ring, hh-shape--square). Implement parallax midground layer (speed 0.45) with 3 mid-shape divs. Add hh-accent-line motion.div with scaleX entrance animation (0→1, 0.8s, 0.2s delay). Implement headline with scale+fade reveal animation. Include MagneticButton instances for primary CTA. Import HomeHero.css.

As a frontend developer, implement the ServiceCarousel section for the Home page. Build a 3D carousel using @react-three/fiber Canvas with useFrame and useThree hooks, and @react-three/drei Text and RoundedBox components. Define SERVICES array (8 items: Flex Printing, Banner Design, Visiting Cards, Brochures, Stickers, Digital Printing, LED Signboards, Logo Design) each with name, brief, description, tags array, Lucide icon (Printer, Image, CreditCard, BookOpen, Sticker, Monitor, Lightbulb, PenTool), and hex color. Implement 3D card mesh using THREE.js with RoundedBox geometry positioned in a circular arrangement. Add AnimatePresence-driven detail panel showing full description and tags on card selection via useState. Use useCallback, useRef, useMemo for performance optimization. Import ServiceCarousel.css.

As a frontend developer, implement the ServiceGrid section for the Home page. Build a responsive 8-card grid using a services array (Flex Printing, Banner Design, Visiting Cards, Brochures, Stickers & Labels, Digital Printing, LED Signboards, Logo Design) each with title, desc, and Lucide icon (Printer, PenTool, CreditCard, BookOpen, Sticker, Monitor, Lightbulb, Layers). Implement ServiceCard sub-component with useState (hovered) and motion.div using cardVariants (opacity 0→1, y 40→0, staggered delay i*0.1, whileInView with once:true viewport). Add sg-underline motion.span with scaleX animation (0→1 on hover, 0.35s cubic-bezier ease). Implement headerVariants for section header entrance (opacity+y, 0.6s). Import ServiceGrid.css.

As a frontend developer, implement the WhyChooseUs section for the Home page. Build the AnimatedCounter sub-component using useMotionValue, useTransform (Math.round), and framer-motion animate to count from 0 to target (24hr, 100%, 50%, 10+) over 1.8s easeOut when in view, resetting when out of view. Implement useInView hook with useRef to trigger counter animations. Build BenefitCard sub-component as motion.div with entrance animation (opacity+y 40, staggered). Define benefits array (4 items: Fast Delivery stat:24 suffix:'hr', Quality Print stat:100 suffix:'%', Affordable Rates stat:50 suffix:'%', Experienced Team stat:10 suffix:'+') each with inline SVG icon, title, and description. Import WhyChooseUs.css.

As a frontend developer, implement the Portfolio section for the Home page. Build a filterable portfolio grid with 8 portfolioItems (id, category, title, color, accent, pattern) using useState for active category filter. Implement PlaceholderImage sub-component rendering inline SVG with dynamic defs-based pattern fills (diagonal, circles, grid, waves, dots patterns using patternId pf-pat-${item.id}) driven by item.pattern and item.accent. Add AnimatePresence for grid item enter/exit animations with layout animation support. Implement category filter tabs with motion.div active indicator. Add card hover overlay revealing title and category. Import Portfolio.css.

As a frontend developer, implement the Contact section for the Home page. Build the contact form using useState (formData: {name, email, message}, submitted boolean) with handleChange and handleSubmit handlers — form submission sets submitted:true when all fields populated (no external API, client-side only). Render contactInfo array (4 items: Address, Phone href:tel, Email href:mailto, Business Hours with multi-line value) each with inline SVG icon. Implement cardVariants (opacity+x:-60→0, staggered delay 0.15+i*0.1) for contact info cards via whileInView. Add formSlideVariant (opacity+x:60→0, 0.6s, 0.2s delay) for form panel and mapSlideVariant (opacity+y:40→0) for embedded map area. Include dark overlay div (ct-ove). Import Contact.css.

As a frontend developer, implement the Footer section for the Home page. Build SocialOrbitIcons sub-component using useState (isHovering) and useMotionValue (progress 0→1 animated over ORBIT_DURATION:1.5s easeInOut) to trigger an orbital animation around a center point at ORBIT_RADIUS:32px on mouseEnter. Render SOCIAL_ICONS array (Facebook, Instagram, WhatsApp with inline SVG icons) with orbit positioning calculated from progress motionValue. Implement QUICK_LINKS array (Home, Services, Portfolio, Contact) as navigation links. Add footer brand section with logo/name. Note: this Footer component may already exist from other pages — reuse if available. Import Footer.css.

As a frontend developer, implement the Navbar section for the Services page. This component may already exist from the Home page (task 4980407f-953b-4820-8445-5097190d4e72). It uses useState for `scrolled` and `drawerOpen` state, useEffect for scroll listener (window.scrollY > 10 threshold) and body overflow lock on mobile drawer open. Renders NAV_ITEMS array with active state detection via window.location.pathname. Includes 'SG' logo mark with 'Shakir Graphics' brand name and 'Premium Print & Design' tagline, a WhatsApp CTA button (wa.me/923001234567) with inline SVG icon, and mobile drawer logic. Apply nb-root, nb-scrolled, nb-active CSS classes from Navbar.css.

As a Frontend Developer, create shared/reusable UI components used across multiple pages: Navbar (single canonical Navbar.jsx/Navbar.css reused across Home, Services, Portfolio, WhyChooseUs, Contact pages), Footer (single canonical Footer.jsx/Footer.css reused across all pages), and any other cross-page shared primitives (buttons, icons wrappers, layout containers). Consolidate the multiple per-page Navbar and Footer implementations described in existing tasks into one canonical shared component each, ensuring consistent behavior (scroll state, WhatsApp CTA, mobile drawer, social links, quick links). Note: Existing section tasks for Navbar and Footer on individual pages should import from this shared component rather than re-implementing.

As a Frontend Developer, implement performance optimizations required by the SRD's non-functional requirements. Tasks include: lazy loading for portfolio gallery images and Three.js canvas components (use React.lazy and Suspense), image optimization and WebP conversion for all portfolio/gallery assets, code splitting per page/route, preloading Google Fonts with font-display: swap, bundle size analysis and tree-shaking of Three.js imports (import only needed modules), and performance audit using Lighthouse to ensure fast load times. Also implement proper loading states and skeleton screens for 3D canvas sections.

As a frontend developer, implement the ServicesHero section for the Services page. Uses @react-three/fiber Canvas with a ParticleField component (160 particles via Float32Array, useRef mesh with useFrame rotation on Y and sin-based X), FloatingRing components (torusGeometry, three rings at radii 2.8/3.4/4.0 with independent speeds and axes), and a SceneElements wrapper. Framer Motion variants include fadeUp, fadeUpDelay(delay), headlineChars (per-character staggered reveal with custom index delays), scaleIn (scale 0.85→1), and statsReveal (staggered per stat card). The hero displays animated headline characters, subheadline, stats row, and CTA buttons. Imports from ServicesHero.css.

As a frontend developer, implement the ServicesGrid section for the Services page. Renders 8 service cards from a static `services` array using lucide-react icons: Printer, Image, CreditCard, BookOpen, Stamp, Monitor, Lightbulb, PenTool. Each ServiceCard uses useRef for cardRef, useState for glowPos ({x,y} percentage tracking) and tilt ({x,y} degrees) and hovered boolean. handleMouseMove computes glow position and 3D tilt (±10deg) from mouse offset relative to card bounds; handleMouseLeave resets to center/zero. Framer Motion cardVariants stagger cards with delay i*0.08 and cubic-bezier ease. headerVariants animate section header. useInView triggers animation on scroll. ChevronRight icon appears on hover. Imports from ServicesGrid.css.

As a frontend developer, implement the ServiceDetails section for the Services page. Uses @react-three/fiber Canvas alongside Framer Motion and lucide-react (Printer, Monitor, Lightbulb, Palette) and THREE from three. Renders a SERVICES array of 4 items (Flex Printing, Digital Printing, LED Signboards, Logo & Brand Design), each with name, tag, description, useCases[], features[], pricing, Icon component, and accent color hex. Each entry has a 3D canvas accent element using useMemo and useInView for scroll-triggered reveal. Features list and use-cases grid are animated in with staggered Framer Motion transitions. Pricing badge and tag label are styled per accent color. Imports from ServiceDetails.css.

As a frontend developer, implement the ServiceBenefits section for the Services page. Renders 6 BenefitCard components from a static `benefits` array using lucide-react icons: Zap, Award, DollarSign, Users, Palette, Truck. Each BenefitCard uses useRef (cardRef), useState for tiltStyle object, and useCallback for handleMouseMove (computes perspective rotateX/rotateY from cursor offset relative to card center, ±6deg range) and handleMouseLeave (resets transform). useInView (once: true, margin: '-60px') triggers Framer Motion animate between opacity/y states. Cards animate with delay index*0.1 and cubic-bezier [0.22,0.61,0.36,1]. Icon wrapped in sb-card-icon-wrap div. Imports from ServiceBenefits.css.

As a frontend developer, implement the ServicePortfolio section for the Services page. Renders 8 PORTFOLIO_ITEMS (Flex Printing, Banner Design, Visiting Cards, Brochures, Stickers, Digital Printing, LED Signboards, Logo Design) each with id, category, title, desc, gradient string, lucide-react icon (Printer, Layout, CreditCard, FileText, Sticker, Image, Monitor, Palette), and accent hex. Uses @react-three/fiber Canvas with a ParticleField component (Sphere from @react-three/drei). Uses Framer Motion hooks: useMotionValue, useSpring, useTransform for parallax/hover effects. useInView for scroll-triggered card reveals. ArrowRight icon for card CTA. useRef and useEffect for canvas sizing. Imports from ServicePortfolio.css.

As a frontend developer, implement the ServiceCTA section for the Services page. Uses @react-three/fiber Canvas with a FloatingGeometries component: a group ref animated via useFrame (rotation.y = t*0.07, rotation.x = sin(t*0.18)*0.04) containing 6 meshes — icosahedronGeometry (0.45r, position [2.8,1.4,-0.8]), torusGeometry ([0.55,0.09,16,40], position [-2.4,-0.3,-1.0]), wireframe octahedronGeometry (0.36r), small accent icosahedronGeometry (0.24r), wireframe torusKnotGeometry ([0.32,0.07,64,6]), and a distant sphereGeometry (0.3r). Canvas uses alpha:true gl prop for transparency overlay. Framer Motion containerVariants (staggerChildren: 0.14, delayChildren: 0.1) and itemVariants (opacity/y with cubic-bezier ease) animate CTA content. ArrowRight lucide icon on CTA button. Imports from ServiceCTA.css.

As a frontend developer, implement the ServiceFAQ section for the Services page. Uses useState for `activeIndex` to track the currently expanded accordion item. Renders FAQ_ITEMS array of 7 Q&A entries covering printing services offered, pricing, turnaround times, ordering process, accepted file formats (PDF, AI, PSD, EPS, CDR, PNG, JPEG), minimum order quantity, and delivery areas. Uses Framer Motion AnimatePresence for smooth accordion answer reveal/collapse transitions and motion.div for per-item entry animations. MessageCircle and HelpCircle lucide-react icons used for section header and item markers. Imports from ServiceFAQ.css.

As a frontend developer, implement the Footer section for the Services page. This component may already exist from the Home page (task c4b3771c-eb55-4466-8b58-f3e93cabf263). Renders a ftr-root footer with decorative background (3x ftr-bg-circle divs) and ftr-accent-bar. Content grid includes: brand column with Printer lucide icon logo, 'Shakir Graphics' name, tagline 'Your Vision, Our Print.', and social links (Facebook, Instagram, WhatsApp via MessageCircle) with aria-labels; quick links column from `quickLinks` array (Services, Portfolio, WhyChooseUs, Contact) each with ftr-link-arrow span; contact info column using MapPin, Phone, Mail lucide icons. currentYear computed via new Date().getFullYear(). Imports from Footer.css.

As a frontend developer, implement the PortfolioHero section for the Portfolio page. This section features a full-screen hero with a React Three Fiber Canvas rendering a GeometricShapes component — a group of 10 animated 3D meshes (box, torus, octahedron, icosahedron, torusKnot, dodecahedron) with semi-transparent meshStandardMaterial (opacity 0.22) in brand colors (#F5B700, #FF5733, #FFC300, #3C5A7E). The useFrame hook drives per-shape sinusoidal float animation using shape-specific speed and phase values. Framer Motion handles entrance animations for the hero text and CTA overlay. Uses useMemo to generate shape configs and useRef for the group. Import PortfolioHero.css for styling. Note: Navbar component may already exist from a previous page.

As a Frontend Developer, implement and audit full mobile responsiveness across all pages and sections as required by the SRD. Define shared responsive breakpoints (mobile: <600px, tablet: 600-1024px, desktop: >1024px) in the design system. Audit and fix each page section for: touch-friendly interaction targets (min 44px), proper stacking of grid/flex layouts on small screens, mobile-specific Three.js canvas scaling or fallback (disable heavy 3D on low-end mobile), touch swipe for carousels and sliders, safe area insets for notched devices, and font size scaling. Validate on iOS Safari, Android Chrome, and tablet viewports.

As a Tech Lead, verify the end-to-end integration of all Home page sections into a cohesive single-page experience. Ensure correct section ordering (Navbar → HomeHero → ServiceGrid → ServiceCarousel → Portfolio → WhyChooseUs → Contact → Footer), smooth scroll behavior between anchor links, consistent theme/styling across all Home sections, proper z-index layering of Three.js canvases and overlays, and that all cross-section interactions (e.g., Service card click scrolling to Portfolio, WhatsApp CTA consistency) work correctly. Validate page-level layout on mobile and desktop. Note: depends on all Home section tasks: 35a9a6b6, cd1c2c06, c3c73c0a, 69aa0b56, 2ef9a8c0, 01cc310f, c4b3771c, 4980407f.

As a Frontend Developer, implement SEO metadata and accessibility standards across all pages. Add meta tags (title, description, og:image, og:title, og:description, canonical URL) for each page. Ensure semantic HTML structure (h1-h6 hierarchy, main/section/nav/footer landmarks, proper alt text on all images and SVG icons). Add ARIA labels to interactive elements (buttons, links, form fields, accordions). Implement keyboard navigation support for all interactive components (carousels, accordions, modals/lightboxes). Ensure color contrast ratios meet WCAG AA standards against the deep blue/golden color scheme. Add lang='en' and appropriate meta viewport tags. Validate with axe or Lighthouse accessibility audit.

As a frontend developer, implement the PortfolioGalleryGrid section for the Portfolio page. This section renders a masonry/grid layout of gallery items from the `galleryItems` array (12+ real Shakir Graphics projects including 'Election Campaign Flex', 'Talagang Trade Fair Banner', 'Al-Makkah Super Store Cards', etc.), each with gradient backgrounds, accent colors, category slugs, and descriptions. Uses useState, useEffect, useRef, useMemo, and useCallback for filtering and layout logic. Integrates Three.js (*) for decorative background elements, and Framer Motion with AnimatePresence for card entrance and filter transitions. Items are mapped with unique IDs (gp-1 through gp-12+) and categorySlug fields. Import PortfolioGalleryGrid.css.

As a frontend developer, implement the PortfolioCaseStudies section for the Portfolio page. This section features a React Three Fiber Canvas with a `ParticleField` component rendering 140 animated particles using `bufferGeometry` with per-vertex colors blended between #F5B700, #FF5733, and #1A3B5D using THREE.Color.lerp. The particle mesh rotates slowly via requestAnimationFrame in a useEffect. Case study cards use `useInView` from Framer Motion for scroll-triggered entrance animations. Reusable SVG icon components (QuoteIcon, CheckIcon, ClockIcon, StarIcon) are defined inline. Uses useMemo for particle position/color Float32Arrays (count=140), and THREE.AdditiveBlending for the point material. Import PortfolioCaseStudies.css.

As a frontend developer, implement the PortfolioServiceShowcase section for the Portfolio page. This section renders an interactive service showcase with `serviceData` array covering 8 services (Flex Printing, Banner Design, Visiting Cards, Brochures, Stickers, Digital Printing, LED Signboards, Logo Design), each with id, name, desc, Lucide icon (Printer, PenTool, Layers, Scissors, Sticker, Monitor, Lightbulb, Image), project count, and a detailed projects list. Uses useState, useEffect, and useRef for active service selection and panel expand/collapse. Framer Motion AnimatePresence handles panel transition animations. THREE.js is imported for decorative background elements. An X and ArrowRight icon from lucide-react are used for close/navigate interactions. Import PortfolioServiceShowcase.css.

As a frontend developer, implement the PortfolioTestimonials section for the Portfolio page. This section renders 6 client testimonials (Ahmed Khan / Al-Madina Super Store, Fatima Bibi / The Educators School, Rashid Mehmood / Talagang Food Corner, Saima Akhtar / Glow Beauty Salon, Malik Zafar / Campaign Office, Noreen Iqbal / Private Client) with quote, clientName, business, businessType, rating (4-5 stars), projectLabel, and projectTheme fields. Uses useState, useRef, useEffect, and useCallback for carousel/slider logic. A StarIcon SVG component renders star ratings. useInView from Framer Motion triggers scroll-entrance animations. THREE.js is imported for a decorative particle/background layer rendered via a canvas. Import PortfolioTestimonials.css.

As a frontend developer, implement the PortfolioCTA section for the Portfolio page. This section renders a call-to-action block (`pcta-root`) with a React Three Fiber Canvas hosting a `ParticleField` component of 120 animated particles. The ParticleField uses useMemo to generate Float32Arrays for positions, velocities, and colors (blended between #F5B700 and #FF5733 via THREE.Color.lerp). The useFrame hook drives per-frame position updates with velocity bouncing at boundary limits (±7x, ±4y, ±2.5z). The CTA content uses useInView (margin '-80px', once: true) for scroll-triggered reveal with contentVariants (staggerChildren 0.14) and childVariants (scale 0.96→1, y 32→0). pointsMaterial uses AdditiveBlending, opacity 0.7. Import PortfolioCTA.css.

As a frontend developer, implement the Navbar section for the WhyChooseUs page. This component (Navbar.css) may already exist from previous pages (Services, Portfolio). It uses useState for `scrolled` and `drawerOpen` states, useEffect for scroll listener (sets scrolled when window.scrollY > 10) and body overflow lock when drawer is open. Renders nav with class `nb-root` (adds `nb-scrolled` on scroll), logo block with 'SG' icon span and 'Shakir Graphics' / 'Premium Print & Design' text, NAV_ITEMS array mapping to `nb-link` anchors with `nb-active` class for current path detection via window.location.pathname, a WhatsApp CTA button with inline SVG icon linking to wa.me/923001234567, and a mobile hamburger drawer. Reuse existing Navbar component if already built.

As a frontend developer, implement the PortfolioFilterTabs section for the Portfolio page. This section renders a horizontal scrollable tab bar (`pft-root` > `pft-inner` > `pft-scroll`) with 9 filter categories: All, Flex Printing, Banner Design, Visiting Cards, Brochures, Stickers, Digital Printing, LED Signboards, and Logo Design. Uses useState for `active` tab, useRef for `scrollRef` and `tabRefs` (per-tab DOM refs), and useCallback for `handleTabClick` and `updateIndicator`. A spring-animated `indicatorStyle` (left + width) tracks the active tab underline using `requestAnimationFrame`. Framer Motion animates the container with staggered `tabVariants` (opacity/y). Partially-hidden tabs auto-scroll into view via `scrollIntoView`. Import PortfolioFilterTabs.css.

As a frontend developer, implement the PortfolioLightbox section for the Portfolio page. This section manages a modal lightbox for 6 portfolio projects (Luxury Wedding Card Suite, Al-Shifa Pharmacy Branding, Eid Mubarak Flex Banner, Taste of Punjab Menu Redesign, GreenField School Prospectus, City Motors Showroom Wrap) defined in `portfolioProjects` array — each with title, category, description, date, image path, and optional testimonial object (text, author, role). Uses useState, useEffect, useCallback, useRef, and useMemo. Framer Motion AnimatePresence handles lightbox open/close transitions. A React Three Fiber Canvas renders a decorative 3D background inside the lightbox modal. Keyboard ESC and click-outside close the lightbox. Import PortfolioLightbox.css.

As a frontend developer, implement the WhyChooseUsHero section for the WhyChooseUs page (WhyChooseUsHero.css). Features a full Three.js 3D decorative background via the `ThreeDBackground` component mounted in a ref container — scene includes PerspectiveCamera at z=12, WebGLRenderer with alpha, AmbientLight, DirectionalLight, and PointLight (gold #F5B700). Three.js shapes: a BoxGeometry(1.6,1.6,1.6) in gold MeshPhongMaterial at position(4.5,2.8,-3), a SphereGeometry(0.8) in blue MeshPhongMaterial at (-4.2,-1.2,-2), and a TorusGeometry(0.55,0.15) at top-left, all added to a `shapes` array with basePos/baseRot/speed/axis for floating animation loop. Hero content uses `framer-motion` with `useInView` for staggered entrance animations. Stat icons from lucide-react: Trophy, Clock, Users, Star. ArrowRight icon on CTA. useState tracks animated counter values for stats. Cleanup disposes renderer and removes event listeners on unmount.

As a frontend developer, implement the BenefitsCards section for the WhyChooseUs page (BenefitsCards.css). Renders a `benefits` array of 4 items (Fast Delivery, Quality Print, Affordable Rates, Experienced Team) each with a lucide-react icon (Clock, CheckCircle, Banknote, Users), title, and description. Cards use `framer-motion` with `useInView` ref for staggered reveal animations. Background uses `@react-three/fiber` Canvas with a `FloatingGeometries` component: three `Float`-wrapped `Sphere` meshes from `@react-three/drei` using `MeshDistortMaterial` in gold (#F5B700), blue (#1A3B5D), and yellow (#FFC300) at low opacity (0.09–0.13) for ambient depth effect. A fourth sphere in (#3C5A7E) also floats. AmbientLight intensity 0.6 and pointLight at [10,8,10].

As a frontend developer, implement the ProcessSteps section for the WhyChooseUs page (ProcessSteps.css). Renders a `STEPS` array of 4 items (01 Consultation, 02 Design, 03 Production, 04 Delivery) with number badges, titles, and descriptions. Uses `framer-motion` with `useInView` for animated step reveals. Background uses a raw Three.js `ParticleField` component (no R3F): creates a Scene with PerspectiveCamera at z=30, WebGLRenderer with alpha, 80 particles in a BufferGeometry with `position` and `size` BufferAttributes, rendered as THREE.Points with PointsMaterial (color: #F5B700, AdditiveBlending, opacity: 0.35). Animation loop rotates points.rotation.y += 0.0004 and rotation.x += 0.0002 and drifts particle positions via clock.getElapsedTime(). Uses `useMemo` for stable geometry and `useState` for animation state. Handles resize via ResizeObserver. Cleanup cancels animId and disposes geometry/material.

As a frontend developer, implement the ComparisonSection for the WhyChooseUs page (ComparisonSection.css). Renders a `comparisonRows` array of 10 feature rows comparing Shakir Graphics vs. Others across: Design Quality, Print Resolution, Turnaround Time, Material Options, Free Revisions, Design Consultation, After-Sales Support, Custom Orders, Price Match Guarantee, Bulk Order Discount. Each row has shakirIcon ('check'/'dash') and othersIcon ('check'/'x'/'dash') with badge labels (Best, Fast, Free, Save). Icon set from lucide-react: Check, X, Minus, ChevronDown, ArrowRight, Zap, Shield, Clock, Star. Uses `useState` for expanded/collapsed row state and `useRef` + `useInView` with `AnimatePresence` from framer-motion for animated row entrances. Background includes a `@react-three/fiber` Canvas with a `DiamondShape` component: THREE.OctahedronGeometry(0.9,0) as MeshStandardMaterial (color: #F5B700, metalness: 0.4, roughness: 0.25) animated via useEffect requestAnimationFrame loop with rotation.y += 0.004, rotation.x += 0.002, and sinusoidal position.y float. OrbitControls imported from @react-three/drei.

As a frontend developer, implement the TestimonialsSection for the WhyChooseUs page (TestimonialsSection.css). Renders 6 testimonials from a `testimonials` array: Ahmed Raza (5★), Sana Malik (5★), Usman Khalid (5★), Fatima Noor (5★), Bilal Sheikh (5★), Zara Iqbal (4★), each with id, quote, name, role, stars count, avatarBg color, and initials. Uses `useState` for active/selected card index, `useEffect` for auto-advance carousel timer, `useRef` + `useInView` for scroll-triggered animations, `useMemo` for computed values, and `useCallback` for stable event handlers. Custom `StarIcon` SVG component renders filled/unfilled stars. Custom `QuoteIcon` SVG component renders opening quotation marks. Background uses `@react-three/fiber` Canvas with raw THREE.js scene. Uses `framer-motion` for card transition animations.

As a frontend developer, implement the WhyChooseUsCTA section for the WhyChooseUs page (WhyChooseUsCTA.css). Features a `@react-three/fiber` Canvas with a `GeometryScene` component using `useFrame` for animation. `GeometryScene` creates 5 geometry objects via `useMemo` — each assigned a random orbital position (radius 3-7), rotation speeds, scale (0.35–1.05), phase offset, and type (0=icosahedronGeometry, 1=octahedronGeometry, 2=torusGeometry(0.7,0.15,8,16)). Materials: type 0 uses gold #F5B700 emissive MeshStandardMaterial (opacity 0.38), type 1 uses #FFC300 (opacity 0.3), type 2 uses white #FFFFFF (opacity 0.2). `useFrame` rotates groupRef.current.rotation.y += 0.0012, oscillates rotation.x via sin, and floats each child mesh's position.y with per-item phase offset. CTA content uses `framer-motion` for entrance animations, `useState` for hover states, and `useCallback` for button handlers. AmbientLight intensity 0.5, DirectionalLight at [5,8,3] intensity 0.7.

As a frontend developer, implement the Footer section for the WhyChooseUs page (Footer.css). This component may already exist from previous pages (Home, Services, Portfolio). Static functional component with no state. Uses lucide-react icons: Phone, MapPin, Mail, Facebook, Instagram, MessageCircle, Printer. Renders: decorative ftr-bg-pattern with 3 absolutely-positioned ftr-bg-circle divs, a ftr-accent-bar, and a ftr-content-layer containing ftr-inner grid with: (1) brand column — Printer icon logo, 'Shakir Graphics' name, tagline 'Your Vision, Our Print', social links to facebook.com, instagram.com, wa.me/923001234567; (2) quick links column mapping `quickLinks` array (Services, Portfolio, Why Choose Us, Contact) with arrow prefix; (3) contact column with MapPin, Phone, Mail icon rows. Footer bottom bar shows dynamic currentYear via new Date().getFullYear(). Reuse existing Footer component if already built.

As a frontend developer, implement the Navbar section for the Contact page. This component (Navbar.jsx) uses useState for `scrolled` and `drawerOpen` states, with useEffect hooks listening to window scroll events (passive) and managing body overflow for mobile drawer. Renders a nav with class `nb-root` that gains `nb-scrolled` on scroll >10px. Includes an `nb-logo` with 'SG' icon, brand name, and tagline, plus NAV_ITEMS array mapping to anchor links with active state detection via window.location.pathname. Features an `nb-cta` WhatsApp button with inline SVG icon linking to wa.me. Note: this component likely already exists from Services, Portfolio, and WhyChooseUs pages — reuse or verify consistency. Depends on WhyChooseUs Navbar task to establish page chain.

As a frontend developer, implement the ContactHero section for the Contact page. Uses @react-three/fiber Canvas with a custom ParticleField component: 80 particles in a Float32Array with randomized positions, per-particle speeds (0.15–0.60) and sizes (0.015–0.055), animated via useFrame to float upward and wrap at y=±2.8. PointsMaterial uses color #F5B700, additive blending, opacity 0.55. Content layer uses framer-motion with staggered entrance animations (opacity+y) on a badge (ch-badge with ch-badge-dot), h1 headline (ch-headline), and contact info chips for WhatsApp (FaWhatsapp), Email (HiOutlineMail), and Hours (FiClock). Canvas wrapped in ch-canvas-wrap div for layering. CSS animated gradient overlay via pseudo-elements.

As a frontend developer, implement the ContactForm section for the Contact page. Manages form state with useState for `form` (name, email, phone, service, message), `errors`, `touched`, `submitting`, and `submitted`. Includes a validateField function covering regex email validation, optional phone format check, and length guards for name/message. Features a BackgroundCanvas component using raw THREE.js (not react-three-fiber): creates PerspectiveCamera, WebGLRenderer with alpha, AmbientLight, two PointLights (#f5b700 and #ff5733), and animated floating geometric shapes — all mounted/unmounted via useEffect with ResizeObserver for responsiveness. Form fields use FiUser, FiMail, FiPhone, FiSend, FiAlertCircle, FiCheck, FiChevronDown icons. Service dropdown uses serviceOptions array with 8 service values. useAnimation and useInView from framer-motion drive section entrance. Form submit handler uses useCallback.

As a frontend developer, implement the ContactInfo section for the Contact page. Renders 4 ContactCard components from a contactItems array covering WhatsApp (FaWhatsapp, href wa.me), Email (FiMail, mailto), Phone (FaPhoneAlt, tel), and Location (FiMapPin, Google Maps link). Each ContactCard has a 3D CSS tilt effect via handleMouseMove computing rotateX/rotateY from cursor offset relative to card center (±8deg). Cards use framer-motion spring transitions (stiffness 260, damping 22, mass 0.8) for entrance animations and hover lift. AnimatePresence wraps cards. Background uses @react-three/fiber Canvas with a static ParticleField of 160 points in Float32Array, pointsMaterial color #3C5A7E with THREE.AdditiveBlending. FiArrowRight used on CTA links per card.

As a frontend developer, implement the ContactMap section for the Contact page. Features a MapPinCanvas component using @react-three/fiber Canvas (fov 35, alpha) rendering a LocationPin3D group wrapped in @react-three/drei Float (speed 2.5, rotationIntensity 0.3, floatIntensity 0.6). The pin geometry is composed of a sphereGeometry (half-dome top, color #FF5733), cylinderGeometry body, coneGeometry tip (color #CC4422), a white circleGeometry highlight with emissiveIntensity 0.4, and a shadow disc (black, opacity 0.18). Includes directional and point lights with shadow casting (512x512 shadow map). Alongside the 3D canvas, renders an embedded Google Maps iframe for Talagang coordinates. Info sidebar shows FiMapPin address, FiPhone number, FiClock hours, and FiExternalLink directions button. Section uses framer-motion entrance animations.

As a frontend developer, implement the ContactFAQ section for the Contact page. Uses useState for `activeIndex` (accordion open state, null for all collapsed) and `inView` (scroll trigger). IntersectionObserver via useRef on sectionRef fires once at threshold 0.12 to set inView=true and then unobserves. Renders 4 faqItems (turnaround time, bulk discounts, file formats, order tracking) as an accordion with toggleItem toggling activeIndex. Each item is a motion.div; answers use AnimatePresence for height-animated expand/collapse. Section header animates on inView with opacity+y (duration 0.6, cubic-bezier easing). CSS class cfq-section, cfq-item, cfq-header, cfq-accordion, cfq-section-label, cfq-heading, cfq-subheading.

As a frontend developer, implement the Footer section for the Contact page. Uses lucide-react icons: Phone, MapPin, Mail, Facebook, Instagram, MessageCircle, Printer. Renders ftr-root footer with decorative ftr-bg-pattern (3x ftr-bg-circle divs) and ftr-accent-bar. Three-column ftr-inner grid: brand column (ftr-logo-icon with Printer icon, brand name, tagline, ftr-socials with Facebook/Instagram/WhatsApp links), quick links column mapping quickLinks array (/Services, /Portfolio, /WhyChooseUs, /Contact) with arrow prefix, and contact column with MapPin/Phone/Mail items. Dynamic copyright year via new Date().getFullYear(). Note: this Footer component likely already exists from Services and WhyChooseUs pages — reuse or verify consistency.

As a frontend developer, implement the FooterTop section for the Footer page. This section renders a branded footer header using Framer Motion's `brandFadeIn` variant with staggered `custom` index delays (0–3) and `whileInView` viewport triggers (once: true, amount: 0.6). It includes: an animated SVG logo icon (`.ftop-logo-icon`) with rect, path lines, and decorative circles; an animated `<h2>` with `.ftop-business-name` and a highlighted `<span>` for 'Shakir Graphics'; an animated `.ftop-divider` bar; and an animated `.ftop-tagline` paragraph reading 'Your Vision, Our Print'. Background decoration includes `.ftop-accent-bar` and three `.ftop-decorative-dot` elements. Note: this component may already exist from a previous page (e.g., WhyChooseUs or Contact Footer). Depends on Contact page Navbar task to chain pages correctly.

As a frontend developer, implement the FooterLinks section for the Footer page. This section renders a four-column link grid using the `footerData` array containing Services, Company, Resources, and Legal columns, each with labeled `<a>` hrefs to internal routes (/Services, /Home, /Portfolio, /WhyChooseUs, /Contact, /Privacy, /Terms). It uses `useState(openColumn)` and `useState(isMobile)` for a mobile accordion toggle pattern, with a `useEffect` that listens to `window.resize` and sets `isMobile` when `window.innerWidth < 600`. A second `useEffect` wires an `IntersectionObserver` to `.fl-column-reveal` elements via `sectionRef`, animating them from `opacity: 0; transform: translateY(18px)` to visible on scroll. `toggleColumn(index)` collapses/expands columns on mobile. Background includes `.fl-accent-bar`, `.fl-bg-overlay`, and `.fl-bg-pattern`.

As a frontend developer, implement the FooterSocial section for the Footer page. This section renders a social media links row using the `socialPlatforms` array containing Instagram (https://instagram.com/shakirgraphics), Facebook (https://facebook.com/shakirgraphics), and WhatsApp (https://wa.me/923001234567), each with a custom inline SVG icon rendered as `.fso-icon-svg`. The component uses `useState`, `useEffect`, and `useRef` for scroll-triggered visibility animations. Icons link out to external social/messaging platforms with full SVG path definitions for each brand logo.

As a frontend developer, implement the FooterBottom section for the Footer page. This section uses Three.js (`* as THREE`) for a live particle background rendered on a `<canvas ref={canvasRef}>` with a `WebGLRenderer` (alpha: true, antialias: true), a `PerspectiveCamera` at z=30, and a `BufferGeometry` particle system of 40 points. Particles use `PointsMaterial` with color `#F5B700`, size 0.25, opacity 0.5, and `AdditiveBlending`. A `ResizeObserver` handles responsive canvas sizing. The animation loop floats particles upward via Y-axis speed increments and resets them at bounds (-12/+12), while `particles.rotation.y` drifts at 0.0008/frame. Framer Motion (`motion`) is imported for scroll-triggered reveal of copyright/legal text via `useState(inView)` toggled by an `IntersectionObserver` at threshold 0.2 on `sectionRef`. Cleanup cancels `animationFrame`, disconnects `ResizeObserver`, and calls `renderer.dispose()`.

As a Tech Lead, verify the end-to-end integration of all Portfolio page sections. Ensure correct section ordering (Navbar → PortfolioHero → PortfolioFilterTabs → PortfolioGalleryGrid → PortfolioServiceShowcase → PortfolioCaseStudies → PortfolioTestimonials → PortfolioLightbox → PortfolioCTA → Footer), that PortfolioFilterTabs correctly filters PortfolioGalleryGrid items by category, that clicking a gallery item triggers PortfolioLightbox correctly, and that PortfolioServiceShowcase service selection and panel expand/collapse work. Validate Three.js canvas performance with multiple particle systems on the same page. Note: depends on all Portfolio section tasks: 867a7c4c, ea68206e, 881b60f6, 414aa512, 9c88b71d, bcc5ee90, 4e31a9ec, 07345484, 9c88b71d.

As a Tech Lead, verify the end-to-end integration of all WhyChooseUs page sections. Ensure correct section ordering (Navbar → WhyChooseUsHero → BenefitsCards → ComparisonSection → ProcessSteps → TestimonialsSection → WhyChooseUsCTA → Footer), that animated counters in WhyChooseUsHero trigger correctly on scroll, that ComparisonSection row expand/collapse works, and that TestimonialsSection auto-advance carousel and manual selection are consistent. Validate Three.js and R3F canvas coexistence on the same page without WebGL context limit errors. Note: depends on all WhyChooseUs section tasks: 3e33d0e3, 51cae9ff, a94f6a4b, ba90442a, 650261cf, b5dc4c89, 7a186708, e7d695dc.

As a Tech Lead, verify the end-to-end integration of the WhatsApp CTA across all pages and sections. Ensure all WhatsApp links (wa.me/923001234567 and wa.me/923000000000 — reconcile to a single canonical number) are consistent, correctly formatted with pre-filled message parameters where appropriate (e.g., 'I am interested in a quote for...'), and functional across: HomeHero CTA button, Navbar CTA button, ContactInfo WhatsApp card, ContactHero chip, and Footer social links. Validate that clicking any WhatsApp CTA opens the correct chat on both mobile (native app) and desktop (web.whatsapp.com). Note: depends on 35a9a6b6 (HomeHero), 4980407f (Navbar Home), ce607f11 (ContactHero), 32d413c5 (ContactInfo).

As a Tech Lead, verify the end-to-end integration of the Google Maps embed in the ContactMap section. Ensure the iframe embed for Talagang coordinates uses the correct Google Maps link (https://maps.app.goo.gl/6AxqEqipmkmhRJT6A), loads correctly without CSP violations, is responsive across screen sizes, and degrades gracefully if blocked. Validate the FiExternalLink directions button opens the correct Google Maps URL in a new tab. Cross-check with ContactMap section (37882e14) implementation. Confirm no API key is exposed client-side for the basic embed use case.

As a Tech Lead, verify the end-to-end integration of all Contact page sections. Ensure correct section ordering (Navbar → ContactHero → ContactInfo → ContactMap → ContactForm → ContactFAQ → Footer), that ContactForm validation works end-to-end (field-level validation messages, submit state, success state), that ContactInfo WhatsApp/Email/Phone/Location cards all have correct href values and open correctly, that Google Maps iframe loads without errors, and that all framer-motion entrance animations trigger correctly on scroll. Note: depends on all Contact section tasks: ce607f11, 32d413c5, 37882e14, 0e68e103, 269ffbc3, c76724ab, c6217394.

As a Tech Lead, verify the end-to-end integration of all Footer page sections (FooterTop, FooterLinks, FooterSocial, FooterBottom) into a cohesive footer component. Ensure FooterLinks accordion works on mobile, FooterSocial external links (Instagram, Facebook, WhatsApp) open correctly in new tabs, FooterBottom Three.js particle animation runs without memory leaks, and FooterTop Framer Motion entrance animations trigger correctly. Validate that this Footer page component is consistent with the shared Footer used on other pages, or that both are intentionally distinct. Note: depends on footer section tasks: b9b9cbfd, d9804966, f3930bc7, 0e643d77.