Contact Block

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { Input } from "@base-ui/react/input";
5import { motion } from "framer-motion";
6import { Mail, MapPin, Phone, Send } from "lucide-react";
7 
8const contactInfo = [
9  {
10    icon: Mail,
11    label: "Email",
12    value: "hello@example.com",
13    href: "mailto:hello@example.com",
14  },
15  {
16    icon: Phone,
17    label: "Phone",
18    value: "+1 (555) 123-4567",
19    href: "tel:+15551234567",
20  },
21  {
22    icon: MapPin,
23    label: "Location",
24    value: "San Francisco, CA",
25    href: "#",
26  },
27];
28 
29export function ContactBlockBaseui() {
30  return (
31    <section className="relative w-full overflow-hidden bg-background px-4 py-12 sm:py-16 md:py-20 lg:py-24">
32      {/* Background Pattern */}
33      <div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
34 
35      <div className="mx-auto w-full max-w-6xl">
36        <motion.div
37          initial={{ opacity: 0, y: 20 }}
38          whileInView={{ opacity: 1, y: 0 }}
39          viewport={{ once: true }}
40          transition={{ duration: 0.5 }}
41          className="mb-12 sm:mb-16 md:mb-20 text-center"
42        >
43          <h2 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl">
44            Get In Touch
45          </h2>
46          <p className="mx-auto max-w-2xl px-4 text-base text-muted-foreground sm:text-lg">
47            Have a project in mind? Let's discuss how we can work together
48          </p>
49        </motion.div>
50 
51        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
52          {/* Contact Form */}
53          <motion.div
54            initial={{ opacity: 0, x: -20 }}
55            whileInView={{ opacity: 1, x: 0 }}
56            viewport={{ once: true }}
57            transition={{ duration: 0.5, delay: 0.2 }}
58          >
59            <div className="relative overflow-hidden rounded-xl border border-border/40 bg-background/60 p-6 backdrop-blur-sm sm:p-8">
60              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-50" />
61              <form className="relative z-10 space-y-6">
62                <div className="grid gap-6 sm:grid-cols-2">
63                  <div className="space-y-2">
64                    <label
65                      htmlFor="name"
66// … truncated