Contact Form Grid With Details
The left column displays a mail icon in a styled container, heading, description, and contact details (email, phone, support email). Below that, a world map SVG renders with CSS perspective transform at 45 degrees, creating a tilted 3D effect. An animated Pin component marks a location on the map.
The right column contains the contact form with a dotted grid background pattern. Form fields include name, email, company, budget dropdown, and message textarea. Each input uses focus ring styling and the form has a gradient background from gray-100 to gray-200 in light mode.
The grid pattern is generated using a reusable Grid component that creates an SVG with circular dots. The component accepts a size prop to control dot spacing.
Useful for SaaS companies, consulting firms, agencies, and any business with a global presence that wants to communicate geographic reach.
Explore more
Part of Contact Sections · All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
