Shared Components — Footer, Breadcrumbs, Contact Form, Page Transition

[AbinVarghexe]

Description

Build the shared layout components used across all pages, following the Figma design specifications.

Components to Build

1. Footer Component (app/components/layout/Footer.tsx)

From Figma (referenced in About, Case Studies, Careers pages):

• Left: Location: Kanjirappally, Kerala, India
• Center: incial. logo text
• Right: 2025 @ Incial. All Rights Reserved
• Dark background, full-width, minimal padding

2. Breadcrumb Component (app/components/ui/Breadcrumb.tsx)

From Figma (used in About, Works, Careers, Case Study detail pages):

• Format: Home > About Us or Home > Work > Homescape
• Small pill-style links with > chevron separators
• Centered on the page, positioned below header

3. Contact Form Component (app/components/ui/ContactForm.tsx)

From Figma (About page Contact section):

• 4 input fields: Name, Email, Subject/Phone, Message (textarea)
• Submit button aligned right
• Heading: "Have a question? Need a quote?"
• Subtext: "We promise to reply within 24 hours, every time."
• Dark-themed inputs with rounded corners

4. Page Transition Wrapper (app/components/layout/PageTransition.tsx)

• Shared page-enter/exit animation using Framer Motion
• Consistent with the existing home page animation language

Technical Requirements

• All components must be responsive (mobile-first)
• Use Tailwind CSS v4 for styling
• Follow existing project conventions (client/server component boundaries)
• Reuse existing font setup from layout.tsx

Branch

feat/shared-components

Figma Reference

• Footer: Nodes 624:1183, 624:1715, 624:1295
• Breadcrumb: Nodes 701:639, 624:1195, 624:1822
• Contact: Node 701:587

Parent: #1