Contact Panel

Overview

About the Contact Panel

A two-column contact section with a live office clock, copy-to-clipboard email, topic chips, budget selector, character counter, and an animated success state. It is delivered as editable TypeScript for React. Tailwind CSS is required for layout and utility classes; the success and status animation CSS is embedded in the TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

• Agency and freelancer sites qualifying project inquiries by topic and budget.
• Company contact pages that show office hours and direct channels beside the form.

What’s included

Files installed with the component

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

import ContactPanel from "@/components/contact-panel";

export default function ContactPage() {
  return <ContactPanel />;
}

Props

Component API

The current source has no public props; edit the office object, topics, and budgets, and connect handleSubmit to your form endpoint.

Compatibility

Verified project setup

• ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
• This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
• Tailwind CSS is required for layout and utility classes; the success and status animation CSS is embedded in the TypeScript source.

Images

No image files are included. All visuals are inline SVG and CSS contained in the component source.

Fonts

No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Contact Panel ZIP, place the source file at src/components/contact-panel.tsx, and copy the example into your own page or feature folder.

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.