Contact Block

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